Week 8 Main Demo

One page to teach all core CSS for text, colors, and backgrounds

Use this page from top to bottom in class. Each section highlights a different CSS group, and students can type the HTML first, then add the CSS rules in the same order.

Start from the first section

Teaching Order

Show the page in this sequence

  1. Page foundation: body, .page, section cards
  2. Typography: font family, size, weight, style, line height, letter spacing, word spacing, alignment
  3. Color systems: hex, rgb, hsl, contrast, muted text, accent links
  4. Backgrounds: solid color, image, gradient, repeat, size, position, shorthand
  5. Final component: combine everything in one realistic content area

Typography Lab

Text styling changes hierarchy before layout becomes complex

This paragraph demonstrates readable body text with balanced font-size and line-height. Students should see how calm typography already improves the page.

Font Family

Serif headings can feel more editorial

The body keeps a sans-serif font while the heading changes tone with a serif family.

Weight and Style

Bold text creates emphasis and italic text adds a softer voice.

Too much bold weakens hierarchy.

Spacing and Alignment

UPPERCASE LABEL WITH LETTER SPACING

Word spacing can create a lighter reading rhythm in short lines.

Centered text works better for short content, not long paragraphs.

Color Lab

Hex, RGB, HSL, contrast, and text roles

HEX

#1d4ed8

Useful for many beginner projects because it is short and common.

RGB

rgb(29, 78, 216)

Helpful when showing exact red, green, and blue channel values.

HSL

hsl(24, 95%, 53%)

Useful when you want to talk about hue, saturation, and lightness.

Contrast and Hierarchy

Dark heading, softer paragraph, muted meta, visible link

Strong contrast should come first. The paragraph uses a softer color, the metadata stays muted, and the link still stands out clearly.

Updated for classroom demonstration

Readable action link

Background Lab

Solid color, image, gradient, repeat, size, position, and shorthand

Background Color

Soft surfaces help content stand out

Use a lighter section background when you want to separate one block from another.

Background Image

Image + repeat + size + position

This box uses a repeating SVG pattern with controlled size and center focus.

Gradient

Gradients create energy without extra files

Use a simple two-color gradient when you want a stronger hero or callout area.

Background Shorthand

One line can control image, position, size, repeat, and color feeling together

This banner uses the shorthand approach so students can see the compressed version after learning the long property names.

Final Combined Demo

One realistic component that uses the week together

Front-end Lab

Readable pages begin with stronger text hierarchy

Week 8 | Classroom example

This article card mixes serif headings, muted metadata, comfortable paragraph spacing, a calm card background, and a clear action link.

Continue reading

Guest Speaker

Elif Demir

Warm colors can still look professional when the page keeps strong contrast, consistent spacing, and disciplined typography.

View session notes