the link to my Github with my type history project:

https://github.com/Bethixd/typehistory

In this project we were asked to create a webpage about typography designers throughout history. We had to mark up the text with HTML5 and then style it using CSS and add images.

These are my 4 stages of how the webpage was created:

Version 1

Version 1 consisted of me marking up the type history text using HTML5:

This was the outcome:

Version 2

Version 2 consisted of adding CSS styling to the text as well as adding navigation and links in using HTML5.

HTML5

First I added the CSS linking file:

I then added the navigation:

I then adjusted each heading throughout the page to match up with the navigation:

Right before the footer I added in the link to take you up to the top of the webpage again:

CSS

I added CSS styling for the navigation, typography, and footer.

This was the outcome:

Version 3

Adding google fonts on HTML5:

Adding google fonts on CSS:

This was the outcome:

However for some reason the margins of my paragraphs widened. I searched the code to figure out why this might be although I couldn’t find any differences.

Version 4

Adding images on HTML5

After playing around with the images for a while- I found that the “img” bit of this code is the name of the folder the image is kept in and the bit after the / is the name of the image file.