Project brief – HTML Assignment
For this project, your task is to take the content for the homepage of a bird watching website and
add structural elements to it so it can have a page layout applied to it. It needs to have:
• A header spanning the full width of the site containing the main title for the page, the site
logo, and the navigation menu. The title and logo appear side by side once styling is applied,
and the navigation appears below those two items.
• A main content area containing two columns — a main block to contain the welcome text,
and a sidebar to contain image thumbnails.
• A footer containing copyright information and credits.
You need to add a suitable wrapper for:
• The header
• The navigation menu
• The main content
• The welcome text
• The image sidebar
• The footer
You should also:
• Apply the provided CSS (at the end of the document) to the page by adding
another <link> element just below the existing one provided at the start.
Hints and tips
• You don't need to know any CSS to do this assessment; you just need to put the provided
CSS inside an HTML element.
• The provided CSS is designed so that when the correct structural elements are added to the
markup, they will appear green in the rendered page.
• If you are getting stuck and can't envisage what elements to put where, draw out a simple
block diagram of the page layout, and write on the elements you think should wrap each
block. This is extremely helpful.
Example
The following screenshot shows an example of what the homepage might look like after being
marked up.
CSS for above Web Site Design
/* || General setup */
html, body {
margin: 0;
padding: 0;
html {
font-size: 10px;
background-color: #a9a9a9;
body {
width: 100%;
min-width: 800px;
margin: 0 auto;
/* || typography */
h1, h2, h3 {
font-family: 'Cinzel Decorative', cursive;
color: #2a2a2a;
p, input, li {
font-family: 'Roboto Condensed', sans-serif;
color: #2a2a2a;
h1 {
font-size: 4rem;
text-align: center;
text-shadow: 2px 2px 10px black;
h2 {
font-size: 3rem;
text-align: center;
h3 {
font-size: 2.2rem;
p, li {
font-size: 1.6rem;
line-height: 1.5;
/* || header layout */
header {
margin-bottom: 10px;
display: flex;
flex-flow: row wrap;
body > * {
background-color: red;
padding: 1%;
main, header, nav, article, aside, footer, section {
background-color: rgba(0,255,0,0.5);
padding: 1%;
}
h1 {
flex: 5;
text-transform: uppercase;
header img {
display: block;
height: 60px;
padding-top: 20.15px;
nav {
height: 50px;
flex: 100%;
display: flex;
nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
nav li {
display: inline;
text-align: center;
flex: 1;
nav a, nav span {
display: inline-block;
font-size: 2rem;
height: 3rem;
line-height: 1.7;
text-transform: uppercase;
text-decoration: none;
color: black;
}
/* || main layout */
main {
display: flex;
article, section {
flex: 4;
aside {
flex: 1;
margin-left: 10px;
padding: 1%;
aside a {
display: block;
float: left;
width: 50%;
aside img {
max-width: 100%;
footer {
margin-top: 10px;
