Building the site

I have successfully arranged my html and css to place my divs in the right places, navigation is the next thing I need to think about. To keep my navigation from getting in the way of my design or from it being unreachable I have decided that I would like to fix it to the left hand side of the page.


To start my navigation I create an unordered list in my html in a div called navigation.

Once I have given each list item the right name I go into my css and add the following code 

I need to float my navigation left so that it can not be seen by any of the other divs, preventing them from all moving out of place and also so that it moves to the left hand side of the page, to keep the navigation fixed in the same position so that when I scroll it doesn't move with the page I use the fixed position option , after this the only things that are left to add are a background colour and text-align to make my text line up down the left of the div.

Here is how my navigation looked after it had been styled.

Linking the navigation to the sections of my website was slightly more difficult. To link my navigation up and add the smooth scroll I needed this code which was placed just before the end of my body tag.

All I needed to do after this was make sections on my site it attach my navigation to, I kept this simple by using divs named "page1" up to "page5" these divs were simply placed around the divs that were holding content on my page, for example "page5" was placed around my header div as you can see below.

To then link this in the navigation I simply typed "#page5" into the href in my navigation list as you can see below.

Now that all of the links have been filled my navigation will smoothly scroll down to the sections specified by each button in my navigation making my one page website look a lot closer to being finished.