tmthrgd/description.md

## description.md

      
    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.

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

  
## 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 <me@tomthorogood.co.uk> */
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;
}

## 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>
	/! https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ /
	html {
	box-sizing: border-box;
	}

	, ::before, *::after {
	box-sizing: inherit;
	}

	/! Tom Thorogood <me@tomthorogood.co.uk> /
	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;
	}
	<!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>