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.
I then centred the images using CSS
I added a table in in HTML too:
Adding CSS styling to table:
This was the outcome: