Course outline
Full-Stack course / Tools and the web

A type scale in relative units

Lab

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/05-03-docs-type-scale
cd 05-03-docs-type-scale
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

A type scale in relative units

Build a documentation page whose paragraph and heading sizes follow a fixed relative scale, with different colors for body text and its link.

Worked example: At a 16px root size, a paragraph computes to 16px, an h2 to 32px, and an h1 to 48px; the link has a different computed color from the body text.

Rules and constraints

  • Edit index.html and styles.css; no JavaScript is needed.
  • Keep one h1, one h2, and two paragraphs inside <main id="doc">.
  • Link styles.css from the HTML document.
  • Use relative font sizes and set the root font-size baseline.
  • Set body text and link colors with hex or hsl values; their computed RGB colors must be distinct.

What you'll practice

  • Linking an external stylesheet.
  • Using rem to create a consistent type scale.
  • Checking computed font sizes and colors in the browser.

Run it

gonomicon fetch fs-week-1/05-03-docs-type-scale
cd 05-03-docs-type-scale
gonomicon test
gonomicon submit

Hints

  1. Compare each text size with the root size, not with its nearest parent.
  2. Use the paragraph as the base and keep the heading sizes at fixed multiples of it.
  3. At a 16px root, the paragraph, h2, and h1 sizes are 1rem, 2rem, and 3rem.
PreviousNext lesson