<div id=”navigation”>

<div id=”navigation-inside”>

<ul>

<li><a href=”index.html” class=”active”>Home</a></li>

<li><a href=”html.html”>HTML</a></li>

<li><a href=”css.html”>CSS</a></li>

<li><a href=”javascript.html”>JavaScript</a></li>

</ul>

</div>

</div>

Note: you should be checking your index.html file in your browser to see how it’s taking shape. If you haven’t done so already, please do check it out now. Not looking pretty, is it? Well, let’s sort that out now with some images and then some styling to make it a bit easier on the eye.

Images

Let’s now create a nice header image for our website to add a little more stimulation for our users. Header images are a great way to start off a webpage – they instantly add colour and softly ease your users into the actual content of the page without overwhelming them.

The steps:

• . Inside your main folder create a new folder called ‘img’.
• If you haven’t already, download the source files from the link at the start of the book.
• Copy the ‘header-image.jpg’ and ‘headshot.png’ files and paste them into your ‘img’ folder.
• Back in Sublime Text add a div between the ‘navigation’ and the ‘content’ divs and give it an id of ‘header’.
• Inside the ‘header’ div add the image ‘header-image.jpg’ to the site.
• Add a new div below the image and give it an id of ‘profile’.
• Inside this div add another div with the id of ‘profile-image’.
• Inside this div add the ‘headshot.png’ image
• Below the image add an tag and enter the text ‘by “your name”’ inside the tags, replacing ‘your name’ with your actual name.

Expected result: after performing the above steps we should now have a nice header image and a profile icon on our website along with your name all rendering to our webpage.

Expected code: