Day 63: Portfolio page development

This slideshow requires JavaScript.

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:

screen-shot-2017-02-09-at-21-40-15Screen Shot 2017-02-09 at 21.45.18.pngscreen-shot-2017-02-09-at-21-40-01

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.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s