Web foundations lab

CSS basics

Selectors, color, spacing, typography, borders, and reusable classes.

Track progress 0/120 lessons 0/18 missions 12 courses
0%
Continue View profile
01 CSS basics CSS basics: Element selectors

Build element selectors inside the persistent Accessible recipe: Element selectors starter project.

Core 7 minutes · selector, color, padding, margin, font, border
02 CSS basics CSS basics: Class selectors

Build class selectors inside the persistent Reading list: Class selectors starter project.

Core 7 minutes · selector, color, padding, margin, font, border
03 CSS basics CSS basics: Color tokens

Build color tokens inside the persistent Support center: Color tokens starter project.

Core 7 minutes · selector, color, padding, margin, font, border
04 CSS basics CSS basics: Readable typography

Build readable typography inside the persistent Team directory: Readable typography starter project.

Core 10 minutes · selector, color, padding, margin, font, border
05 CSS basics CSS basics: Spacing with padding

Build spacing with padding inside the persistent Field notes: Spacing with padding starter project.

Core 7 minutes · selector, color, padding, margin, font, border
06 CSS basics CSS basics: Spacing with margin

Build spacing with margin inside the persistent Civic calendar: Spacing with margin starter project.

Core 7 minutes · selector, color, padding, margin, font, border
07 CSS basics CSS basics: Borders

Build borders inside the persistent Learning journal: Borders starter project.

Core 7 minutes · selector, color, padding, margin, font, border
08 CSS basics CSS basics: Background surfaces

Build background surfaces inside the persistent Product changelog: Background surfaces starter project.

Core 10 minutes · selector, color, padding, margin, font, border
09 CSS basics CSS basics: Reusable utility classes

Build reusable utility classes inside the persistent Workshop signup: Reusable utility classes starter project.

Core 7 minutes · selector, color, padding, margin, font, border
10 CSS basics CSS basics: Hover states

Build hover states inside the persistent Incident summary: Hover states starter project.

Core Checkpoint 7 minutes · selector, color, padding, margin, font, border
11 CSS basics CSS basics: Focus-visible states

Build focus-visible states inside the persistent Community workshop: Focus-visible states starter project.

Core 7 minutes · selector, color, padding, margin, font, border
12 CSS basics CSS basics: Cascade review

Build cascade review inside the persistent Neighborhood library: Cascade review starter project.

Core 10 minutes · selector, color, padding, margin, font, border
Snippet coverage

Patterns you will practice here.

Run

Render a simulated preview from the current lesson snippet.

Check

Save the lesson after the required task snippets are complete.

Hint

Show the lesson hint without changing progress.

Reset

Clear local Web lab scratch state for this browser.

<!doctype html>

Start an HTML document with an explicit standards-mode marker.

<header> <main> <section> <footer>

Use semantic landmarks so pages have structure.