9.10. CSS fonts and a button assignment

9.10.1. Assignment

Exercise 9.5

Learn how to use CSS stylesheets. Add web fonts to your website, create a button class to style links to appear as “web buttons,” and adjust whitespace to keep your pages from looking crowded. Style your footer.

Concepts covered: CSS resets, box-model, CSS variables, pseudo-classes, simple transitions.

Before beginning this assignment, watch the following videos by Kevin Powell:

• Block, Inline, and Inline-Block explained [14:18 minutes]

• Web design tips for developers [21:11 minutes] - I prefer em over ch for font sizing, but you can use either, although em seems to used more than ch online

And review CSS Trick’s:

• almanac entry on transition

• Styling Links Like a Boss - if you prefer to watch a video on this, here’s a video about link pseudo classes I made for class during Covid

Tip

Other helpful resources for the assignment:

9.10.2. Rubric

Rubric

Requirement	Points
Repo passes all automated tests Validator and a proofer test 2 points each (4 points total) See assignment README for a description of the pretests. The last 7 CSS pretests are 2 points each (14 points total) The remaining pretests are 1 point each (27 points total)	45
General Any issues not covered by the pretests or other rubric entries (see feedback for details if you miss points here)	20
Whitespace Appropriate use of white space (site is not crowded)	10
GitHub About info Include a description and link to your web page in the About section of your repo.	5