Web Typography

This session we'll re-visit the idea of visual hierarchy and apply the concept to web typography. Along the way we'll introduce the Box Model.

Housekeeping

1. Group Activity: Google Doc Triad

In groups of 3 or 4, decide which part of the triad controls the following features commonly found in document editors.

Slides: UI Triad Quiz

2. Review: Visual hierarchy

Watch party

A few example websites

3. Demo: Wikipedia Markup

To follow along (this is your daily achievement for today):

  1. Pick a hobby or interest that you could build a webpage around;
  2. Find open source content on Wikipedia that contains examples of:
    • Headings
    • Paragraphs
    • Links
    • Bold and italicized text
    • Bullet and/or numbered lists
  3. Create an index.html file in your workspace
    • Pro-tip: type ! and then the Tab key inside an empty .html file to create an empty page!
  4. Copy and paste the Wikipedia content inside the <body> element of your .html page;
  5. Wrap the text in the appropriate html element
    • <h1>-<h6> for headings
    • <p> for paragraphs
    • <a> for links
    • <strong> for bold text
    • <em> for italic text
    • <ul> and <li> for bullet lists
    • <ol> and <li> for numbered lists
    • etc, etc

4. Introduction to CSS

Slides: CSS Introduction

Materials

5. Web Typography

Web typography

Materials

Sample code

Tools

Today's Achievement

Styling Text

Feel free to play around and experiment with different properties and HTML elements. You will be marked based on honest effort (i.e. try something from each of the categories below).

If you have trouble thinking of styles to apply, try the following:

  1. Customize headings: Use one or more of the following properties to customize the appearance of your headings (<h1>, <h2>, etc):
  2. Limit body text to a readable line length:
    • Use the max-width property to limit the line length of your text to 650px (or similar);
      • Hint: you can apply this to a container (i.e. <body> or <main>) to affect all text inside the container.
    • Italicize the first paragraph using font-style and a class selector;
  3. Center body text on the page:
    • Use margin: auto to add equal spacing to the sides of a container of body text;
    • Note: this will only work if the container width is less than 100%;
  4. Customize list styles:

Submission Instructions

Push and deploy your code to GH Pages. Submit the following links to Brightspace:

  • GH repo
    • Example: github.com/[username]/[repo-name]
  • GH Pages live site
    • Example: [username].github.io/[repo-name]

Prep

Reading list

This is a great intro to the Box Model by Shay Howe, from his course (Learn to Code HTML & CSS)(https://learn.shayhowe.com/html-css/) (which is not required reading for this course).

Mozilla Developer Network:

Watch list

Kevin Powell is one of the most popular CSS Youtubers that has some of the best videos on beginner and advanced topics. We’ll start with this 26 min video from his course HTML and CSS for Beginners: