After creating a box grid layout, I began to understand the foundations and framework of my design layout. However 1 element that I changed a series of times was the width of the document. Starting at 960px <-> fullwidth <-> 1200px. This resulted in tedious process of changing and realigning elements. Here is the code below:
I found that understanding the code was vital in developing and changing elements of my website. The div container provided a class in order to create a successful grid. Although the skeleton provided the foundations of this, I broke down the necessary elements that I needed. One element I am particularly proud of is my use on the nth-of-type. After following a tutorial on how to target a single item in a list, I came across the nth term. The nth of type/child allows you to control the hover selection on the header. For example the first 1 (logo) has no hover colour whilst 2-3 has. Although this was complicated at first, I understood the rule and utilised it in another manner.