Coding

I started coding my website in my own time as I had some experience with HTML so some aspects of the code were easy to do without the tutorials. 

Starting off using the colour I used when creating my mockups, I applied it to the background to make sure the colour was applied throughout my design to make it continuous.

body {

background-color: #2986C4;

} 

This is the colour code which applies the specific blue that I have in my colour scheme.  

It was easy to apply my coding to the homepage as I had each aspect of the design saved and ready to use. Creating my design in illustrator allowed me to export certain aspects of my design and create a folder including all parts of the main page. 

I had some problems when aligning my design on screen, for some reason, the alignment was off on screen however when testing it in google chrome, the design was off and placed to the left. 

After changing the code and aligning it to the centre so the bars stay in place, I needed to fix the problem that the bars actually scroll down when the page is moved, meaning the bars are moved and can no longer be used accessed as navigation.

as you can see the bars scroll away from their original place causing them to be hidden and not as displayed at the top of the page. 

I found a way of stopping this by locking the whole screen so the user has no other form of navigation when accessing the page, so the user has no other means of leaving the page apart from going back or clicking one of the sections. Therefor making my navigation the most important aspect on that page. 

Linking the Style sheet together to the pages allows a simple way to apply code to each page. 

using the hover code allows each navigation bar to highlight when the cursor is placed on the bar. It is a simple way to effectively show which section the user has selected. 

This is a test that shows how the navigation works, and how the coding above works: 

I am quite pleased with how this looks but as we didn't have any more tutorial sessions, I couldn't finish the website as I needed more information about grids and actually placing my content into my sub pages. So I left the coding with the main page then hyperlinking up the other pages. I believe this was good enough as I had no tutorials on it and managed to create my required

I organised my folders to make my coding process easier as I know where everything I need will be, I know which page is which easily and will not get confused when coding for each individual section, the CSS will be used throughout each page so leaving it outside the pages allows it to be used in each section.

The Root folder contains all the files for the website and allows an easy way to copy and back up all my work. The root file contains everything. 

I also started to produce the elements of navigation for the other web pages, including the logo that would take the user back to the homepage, then the other tabs that take the user to each section.