Week 8 – IXD101 – History of Type project

the link to my Github with my type history project:



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.


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:


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.

I then centred the images using CSS

I added a table in in HTML too:

Adding CSS styling to table:

This was the outcome:



Leave a Reply

Your email address will not be published. Required fields are marked *