Web foundations lab

Visual polish

Buttons, focus states, hierarchy, rhythm, and professional restraint.

Track progress 0/120 lessons 0/18 missions 12 courses
0%
Continue View profile
01 Visual polish Visual polish: Button hierarchy

Build button hierarchy inside the persistent Learning journal: Button hierarchy starter project.

Core 7 minutes · button, focus, radius, shadow, contrast, states
02 Visual polish Visual polish: Focus rings

Build focus rings inside the persistent Product changelog: Focus rings starter project.

Core 7 minutes · button, focus, radius, shadow, contrast, states
03 Visual polish Visual polish: Card rhythm

Build card rhythm inside the persistent Workshop signup: Card rhythm starter project.

Core 7 minutes · button, focus, radius, shadow, contrast, states
04 Visual polish Visual polish: Readable contrast

Build readable contrast inside the persistent Incident summary: Readable contrast starter project.

Core Checkpoint 10 minutes · button, focus, radius, shadow, contrast, states
05 Visual polish Visual polish: Status colors

Build status colors inside the persistent Community workshop: Status colors starter project.

Core 7 minutes · button, focus, radius, shadow, contrast, states
06 Visual polish Visual polish: Subtle shadows

Build subtle shadows inside the persistent Neighborhood library: Subtle shadows starter project.

Core 7 minutes · button, focus, radius, shadow, contrast, states
07 Visual polish Visual polish: Consistent radii

Build consistent radii inside the persistent Volunteer check-in: Consistent radii starter project.

Core 7 minutes · button, focus, radius, shadow, contrast, states
08 Visual polish Visual polish: Visual polish checkpoint

Build visual polish checkpoint inside the persistent Local event guide: Visual polish checkpoint starter project.

Core 10 minutes · button, focus, radius, shadow, contrast, states
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.