Steps for Assignment 4, DGMD E-20 Section 1 (26270)
- Use an external style sheet ✓
- Use a Google font ✓
- Use an external font ✓
- Size the text so that there is visual hierarchy for the header, subheader and body text ✓
- Change the colors and apply other styles to the font as you see appropriate for readability and visual appeal ✓
- Use hex codes for the colors ✓
- Use a solid background for the pages ✓
- Graduate Credit:
- Use a background image for one page - tiny images that tile ✓
- Write a short paragraph or two of what you did - and link explanation to home page ✓
For this assignment, I used an external style sheet css/style.css and linked to it from all the pages, including this one, with a link tag ❮link rel="stylesheet" type="text/css" href="./css/style.css" /❯ within the ❮head❯ tag of the HTML. I used a Google font (Roboto) as well as an external font (LEMON MILK); for the external font I first converted it (using transfonter.org) into WOFF and WOFF2 formats. I placed the font folder in the general CSS folder in the site directory, and linked to its own CSS file css/lemonmilk/lemonmilk.css from within the root CSS file using @import.
I resized the header styles ❮h1❯, ❮h2❯, ❮h3❯ using the "em" sizing protocol so they looked better on the page, and applied a limited color palette using hex codes. I changed the weight of the body font and adjusted the line heights of both the paragraphs ❮p❯ and the list elements ❮li❯ for better readability.
I added a background color FAF0E6 to all the pages on the site. Then I added a fun tiled image to the background of the contact page using the CSS class contact. I also added a small tiled background to the ❮aside❯ elements on the future.html and information.html pages, and set it to tile only vertically repeat-y.
Finally, I summarized my changes here on this standalone HTML page assignment4.html, and linked it from the home page using target="_blank" so it would open in a new tab, and not interfere with site navigation.