Challenge 1a: Style Guide

This challenge is a little different than all of the others. Here we set the base styling that we will use for the rest of the challenges. Do not add classes to the HTML. You don’t need to change the markup provided.

Instructions & Hints

Complete the following:

• Using the provided CSS variables and the HTML specified above, write CSS to style headings, text, links, images, figures, etc.
• Colors will be displayed in small boxes. The boxes displayed are 5rem wide and 4rem tall.
• The link’s underline should disappear when hovered.
• Write a font scale to control our font sizes. See an example if you are not familiar with this concept.
  • A font scale may be obtained from TypeScale.com
  • Base font size: 1.2rem, using the Open Sans font (already linked in the CodePen)
  • Scale: 1.25
• Headings should use the Montserrat font (linked in CodePen)
• Create styles for h1, h2, h3, and body. Create a font size calculation, but no classes or element styles, for headings h4-h6 plus a “small” size (one size smaller than h6).
• Create both a heading style and a class for these sizes and styles (h1, .h1)
• Article describing the low highlight on the words “Style Guide”

Beginning CodePen

Challenge 1b: Columns and Cover

This challenge involves a longer piece of text plus an image. The markup remains the same, while the layout changes significantly through the breakpoints.

Questions to consider

• When many developers see columns, they think about Flexbox or Grid. Is that the best approach here?
• The image remains the same, in the same location in the code, so how do we get it to change sizes so radically?

Beginning CodePen