This is the link to my GitHub:

https://github.com/LaurenGilmoreIXD

John Baskerville

Our first task was to write up some basic HTML for a piece of text on the typographer John Baskerville. I had never had experience with coding so, to begin with, it was quite daunting but I was eager to learn. This is the results of version one:

Version 2 involved adding CSS to make the website more visually appealing. I added navigation to the top which brought the user to each section and chose colours for the text and background, these remained consistent throughout the website. I also added a block-quote. I made this text bigger than the rest so it would stand out. The block-quote cite is the same colour as the headings for consistency and so it ties in.

I think at this stage, the most difficult part was adding links as I had never done this before. I learnt how to add a link to email me, see other students work and for a website so the user could learn more about the person mentioned . I also added some descriptive text in the code so that, when hovered over, it would tell the user what would happen if they clicked on the link. I think this is an important habit to get into for accessibility purposes.

I enjoyed seeing it all come together and begin to look like a proper website.

 

Version 3 involved adding Google Fonts. For this I used Libre Baskerville.

For this version I also made some other improvements. I brought the width of the text from 65% to 50% as I felt this made it much easier to read. I also managed to fix my navigation so that, when hovered over, the text changed colour. I think that all of these little details make for a better website.

 

Version 4 was the final version of the John Baskerville website.

For this, we learnt how to add images to each section of our website. This took a while to get my head wrapped around as there was a lot of little things to remember to do or else it wouldn’t work. For example, I had to make sure I had an images folder so the computer knew where to look for the chosen image. I also added some alternative text so that, if the image didn’t load, the user knew what was supposed to be there. This was also important for accessibility, for example, if someone using a screen reader this would describe the image to them.

We also added a table displaying foundries that offer versions of Baskerville. I made the table header backgrounds the same colour as the titles for consistency.

 

A Brief History of Type

We then did the same thing but this time, the website was about the history of type.

Version 1

Version 2

This is the colour pallet I chose from color.adobe.com. I think these colours compliment each-other well and I like the pop of colour the orange brings.

 

Version 3

For this version, I added my own Google Fonts. For this I chose “Petrona” for the main body and “Raleway” for the headings. I matched san serif for the headings and serif for the paragraphs as it is easier for the eye to follow. I also added a margin to the top of heading one so it was spaced out better.

When the navigation is hovered over, the font colour changes.

 

Version 4

The last step was to add images to each section and a table. I think that having images on the website provides a “visual pause” so the user doesn’t get bored reading large pieces of text. I also added a horizontal rule after each section as I felt this broke up the text, making it easier to follow.

 

CSS Exercise

For this task, we were given 3 versions of John Baskerville and we had to recreate them as closely as possible. This meant changing the fonts, colours, block-quotes etc. I found this enjoyable and it taught me a lot as I had to learn how to do some coding I hadn’t done before. For example, I used this code to make the first letter of a paragraph bigger:

 

Overall, I have enjoyed learning more about HTML and CSS and I feel I have gained a lot of knowledge that I can use in the future. It also gave me the chance to put the design principles I have learnt into action and explore my creativity.