Skip to content

Instantly share code, notes, and snippets.

@tmthrgd

tmthrgd/description.md

Last active October 18, 2016 04:00
Show Gist options
  • Save tmthrgd/bc16e8973675155f42c4b001ded4ce07 to your computer and use it in GitHub Desktop.
Save tmthrgd/bc16e8973675155f42c4b001ded4ce07 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
description.md

Hi,

Thank you for applying for the UI/UX Designer and Web Developer Position

As part of the recruitment process we are asking potential candidates to carry out a small code test before we proceed to interview stage. If you make it through to the initial interview stage there’ll be an opportunity to spend a half day with the team. SeaLink would pay for your time at the pro-rated salaried rate for the position. It’s as much an opportunity for you to discover what we do at SeaLink as it is for us to learn about you.

As mentioned, before we move to interview stage we have a small code test:

Steps to Complete.

  1. Follow this link to a GIST: https://gist.github.com/firecall/6ba366002f891f66ad28
  2. Take the HTML4 code snippet in the GIST and refactor it into a modern full HTML5 document with associated CSS/JS.
  3. Focus on good coding standards and document structure. We like nice design, but that’s not the main objective.
  4. Submit the completed project to a free public Github repository
  5. Email the link to the completed repository to ***

We don’t expect this task to take more than a couple of hours.

This is an open question and up to you to decide how you complete it. You may use CSS/JS frameworks such as Bootstrap, jQuery or similar but we’d really like to see you show off your own coding capabilities and ability to make a page from scratch.

Once we’ve reviewed your completed submission we’ll let you know if you’ve made it through to interview stage.

Good luck! Thanks, ***.

Raw
html5.css
/*! https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
/*! Tom Thorogood <[email protected]> */
html {
height: 100%;
font-size: 16px;
line-height: 25px;
}
body {
margin: 2rem auto;
padding: 0 0.8rem;
min-height: 100%;
max-width: 50rem;
color: #444;
}
h1, h2, h3 {
line-height: 1.2;
}
a {
word-wrap: break-word;
text-decoration: underline;
}
figure {
text-align: center;
}
figure table {
margin: 0 auto;
}
figcaption {
font-style: italic;
}
img {
max-width: 100%;
height: auto;
}
.page-header {
margin: 0 0.4rem;
border-bottom: thin solid #bbb;
}
.page-nav ul {
list-style: none;
padding: 0 0.4rem;
}
.page-nav li {
display: inline-block;
}
.page-nav li::after {
content: ">";
margin: 0 0.3em;
}
.page-nav li:last-child::after {
content: "";
margin: 0;
}
.site-footer {
border-top: thin solid #bbb;
text-align: center;
}
Raw
html5.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=Content-Security-Policy content="default-src 'none'; style-src 'self' https://cdnjs.cloudflare.com; img-src 'self' data: https://tafttest.com">
<title>Heading — Example Site</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css>
<link rel=stylesheet href=html5.css>
<!--[if lt IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js></script><![endif]-->
</head>
<body>
<header class=site-header>
<h1>Example Site</h1>
</header>
<main class=site-body>
<header class=page-header>
<h2>Heading</h2>
<nav class=page-nav>
<ul>
<li><a href=#>Paragraph</a></li
><li><a href=#>Table</a></li
><li><a href=#>Image</a></li>
</ul>
</nav>
</header>
<p>HTML 4.0 is becoming the standard. As of the writing of this tutorial, Microsoft Explorer version 5.0 is out with full HTML 4.0 support. <a href=#>Netscape Navigator 5.0</a> is not far behind, and soon the commands below will start to become mainstream.</p>
<p>Here's a quick look at how HTML 4.01 affects tables. You are already familiar with some of the tags and attributes. For example, <a href=#>BORDERCOLOR has been</a> in use for a while as a proprietary Internet Explorer tag. It has just now been written into the HTML 4.01 code.</p>
<p>I have offered as many examples as possible. Many will simply not work because you don't yet have the browser version that supports it. Don't worry, neither did I when <a href=#>I wrote this tutorial</a>. Hopefully you'll be able to visit this tutorial in the future to test what your new browser will and will not do. I am only going to hit the tags and attributes new through HTML 4.01 in this tutorial. If you'd like to get into the basics of table creation, start with my table tutorials.</p>
<figure>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
</table>
<figcaption>A table of data.</figcaption>
</figure>
<figure>
<img width=800 height=600 src=https://tafttest.com/800x600.png>
<figcaption>William Howard Taft, the 27th President of the United States.</figcaption>
</figure>
</main>
<footer class=site-footer>
<p>© 2016 Tom Thorogood. All rights reserved.</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment