justin-john/layout.html

## layout.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Test Frontend</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/main.js"></script>
</head>

<body>
    <header>
        <h1 id="header">Company name</h1>
    </header>

	<nav id="menu">
		<ul>
			<li><a href="#item1">Menu item 1</a></li>
			<li><a href="http://www.google.com">Menu item 2</a></li>
			<li><a href="http://www.bing.com">Menu item 3</a></li>
			<li><a href="#item4">Menu item 4</a></li>
			<li><a href="#item5">Menu item 5</a></li>
		</ul>
	</nav>

    <section id="content">
		<article id="article">
			<header>
				<h2 id="title">Title of the article</h2>
			</header>
			<div id="body">
				First paragraph.
				<br><br>
				Second paragraph.
				<br><br>
				Third paragraph, when she said:
				<br>
				"Every time a developer writes non semantic markup
				a panda is murdered." - Jane Doe
				<br><br>
				Written by John Doe at 07/12/2015 19:01
			</div>
		</article>

        <aside id="other">
			<ul>
				<li><a href="#article1" data-article="1">Link to another article 1</a></li>
				<li><a href="#article2" data-article="2">Link to another article 2</a></li>
				<li><a href="#article3" data-article="3">Link to another article 3</a></li>
				<li><a href="#article4" data-article="4">Link to another article 4</a></li>
				<li><a href="#article5" data-article="5">Link to another article 5</a></li>
			</ul>
        </aside>
    </section>

    <footer id="footer">
        <address id="address">
            Foobar GmbH.<br>
            Musterstr 57<br>
            12000 Berlin<br>
        </address>
    </footer>

</body>

</html>

## main.css
* {
	font-size: 16px;
	font-family: Arial;
    margin: 0;
    padding: 0;
}
body {
	width: 960px;
	margin: 0 auto;
}
#header {
    font-size: 32px;
    background: red;
    color: white;
    text-align: center;
	padding: 30px;
}
#menu {
    margin: 15px 0;
    height: 15px;
}
#menu ul {
	margin: 0;
	padding: 0;
}
#menu  li{
	list-style: none;
	float: left;
	width:  20%;
	text-align: center;
	border-right: 1px solid grey;
}
#menu li:last-child {
	border: 0;
	width: 19.5%;
}
#menu li a {
	text-decoration: none;
    color: green;
}
#content {
    margin: 10px 0;
    width: 100%;
    float: left;
}
#article, #other {
	float: left;
}
#article {
	width: 75%;
	background: grey;
	color: white;
	position: relative;
	clear: both;
}
#article  > * {
	margin: 10px;
}
#other {
	width: 25%;
}
#other ul {
	text-align: center;
}
#other li {
	list-style: none;
	text-decoration: none;
	margin: 5px 0;
}
#other li a {
	text-decoration: none;
	color: green;
}
.visitors {
    position: absolute;
    top: 0;
    right: 0;
}
#footer {
   clear: both;
}

## main.js
window.onload = function() {

	var visitCount
	, articles
	, articleSelectors
	, template
	, articleArrIndex
	, i = 0;

	sessionStorage.articleCounter++ || (sessionStorage.articleCounter = 1);
	visitCount = document.createElement('div');
	visitCount.className =  'visitors';
	visitCount.innerHTML =  'Number of visitors: ' + sessionStorage.articleCounter;
	document.getElementById('article').appendChild(visitCount);

	/**
	 * A sample JSON to change the article on click of article links
	 */
	articles = [
		{ title: 'Title of the article', content: 'First paragraph. <br><br> Second paragraph. <br><br> Third paragraph, when she said: <br> "Every time a developer writes non semantic markup a panda is murdered." - Jane Doe <br><br> Written by John Doe at 07/12/2015 19:01'},
		{ title: 'Article 2', content: 'Content of Article 2 <br><br> Written by Jenny Shown at 07/12/2015 18:01'},
		{ title: 'Article 3', content: 'Content of Article 3 <br><br> Written by Ericka Davis at 07/12/2015 17:26'},
		{ title: 'Article 4', content: 'Content of Article 4 <br><br> Written by Shran Doe at 07/11/2015 16:44'},
		{ title: 'Article 5', content: 'Content of Article 5 <br><br> Written by Jo Elet at 07/11/2015 15:37'}
	];

	articleSelectors = document.querySelectorAll('#other a');
	template = document.querySelector('#article');
	for (; i < articleSelectors.length; i++) {
		articleSelectors[i].addEventListener('click', function(e) {
			articleArrIndex = this.dataset.article - 1;
			template.querySelector('#title').innerText = articles[articleArrIndex].title;
			template.querySelector('#body').innerHTML = articles[articleArrIndex].content;
		});
	}

};
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">

	<title>Test Frontend</title>

	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="js/main.js"></script>
	</head>

	<body>
	<header>
	<h1 id="header">Company name</h1>
	</header>

	<nav id="menu">
	<ul>
	<li><a href="#item1">Menu item 1</a></li>
	<li><a href="http://www.google.com">Menu item 2</a></li>
	<li><a href="http://www.bing.com">Menu item 3</a></li>
	<li><a href="#item4">Menu item 4</a></li>
	<li><a href="#item5">Menu item 5</a></li>
	</ul>
	</nav>

	<section id="content">
	<article id="article">
	<header>
	<h2 id="title">Title of the article</h2>
	</header>
	<div id="body">
	First paragraph.
	<br><br>
	Second paragraph.
	<br><br>
	Third paragraph, when she said:
	<br>
	"Every time a developer writes non semantic markup
	a panda is murdered." - Jane Doe
	<br><br>
	Written by John Doe at 07/12/2015 19:01
	</div>
	</article>

	<aside id="other">
	<ul>
	<li><a href="#article1" data-article="1">Link to another article 1</a></li>
	<li><a href="#article2" data-article="2">Link to another article 2</a></li>
	<li><a href="#article3" data-article="3">Link to another article 3</a></li>
	<li><a href="#article4" data-article="4">Link to another article 4</a></li>
	<li><a href="#article5" data-article="5">Link to another article 5</a></li>
	</ul>
	</aside>
	</section>

	<footer id="footer">
	<address id="address">
	Foobar GmbH.<br>
	Musterstr 57<br>
	12000 Berlin<br>
	</address>
	</footer>

	</body>

	</html>
	* {
	font-size: 16px;
	font-family: Arial;
	margin: 0;
	padding: 0;
	}
	body {
	width: 960px;
	margin: 0 auto;
	}
	#header {
	font-size: 32px;
	background: red;
	color: white;
	text-align: center;
	padding: 30px;
	}
	#menu {
	margin: 15px 0;
	height: 15px;
	}
	#menu ul {
	margin: 0;
	padding: 0;
	}
	#menu li{
	list-style: none;
	float: left;
	width: 20%;
	text-align: center;
	border-right: 1px solid grey;
	}
	#menu li:last-child {
	border: 0;
	width: 19.5%;
	}
	#menu li a {
	text-decoration: none;
	color: green;
	}
	#content {
	margin: 10px 0;
	width: 100%;
	float: left;
	}
	#article, #other {
	float: left;
	}
	#article {
	width: 75%;
	background: grey;
	color: white;
	position: relative;
	clear: both;
	}
	#article > * {
	margin: 10px;
	}
	#other {
	width: 25%;
	}
	#other ul {
	text-align: center;
	}
	#other li {
	list-style: none;
	text-decoration: none;
	margin: 5px 0;
	}
	#other li a {
	text-decoration: none;
	color: green;
	}
	.visitors {
	position: absolute;
	top: 0;
	right: 0;
	}
	#footer {
	clear: both;
	}
	window.onload = function() {

	var visitCount
	, articles
	, articleSelectors
	, template
	, articleArrIndex
	, i = 0;

	sessionStorage.articleCounter++ \|\| (sessionStorage.articleCounter = 1);
	visitCount = document.createElement('div');
	visitCount.className = 'visitors';
	visitCount.innerHTML = 'Number of visitors: ' + sessionStorage.articleCounter;
	document.getElementById('article').appendChild(visitCount);

	/**
	* A sample JSON to change the article on click of article links
	*/
	articles = [
	{ title: 'Title of the article', content: 'First paragraph. <br><br> Second paragraph. <br><br> Third paragraph, when she said: <br> "Every time a developer writes non semantic markup a panda is murdered." - Jane Doe <br><br> Written by John Doe at 07/12/2015 19:01'},
	{ title: 'Article 2', content: 'Content of Article 2 <br><br> Written by Jenny Shown at 07/12/2015 18:01'},
	{ title: 'Article 3', content: 'Content of Article 3 <br><br> Written by Ericka Davis at 07/12/2015 17:26'},
	{ title: 'Article 4', content: 'Content of Article 4 <br><br> Written by Shran Doe at 07/11/2015 16:44'},
	{ title: 'Article 5', content: 'Content of Article 5 <br><br> Written by Jo Elet at 07/11/2015 15:37'}
	];

	articleSelectors = document.querySelectorAll('#other a');
	template = document.querySelector('#article');
	for (; i < articleSelectors.length; i++) {
	articleSelectors[i].addEventListener('click', function(e) {
	articleArrIndex = this.dataset.article - 1;
	template.querySelector('#title').innerText = articles[articleArrIndex].title;
	template.querySelector('#body').innerHTML = articles[articleArrIndex].content;
	});
	}

	};