Build readable contrast inside the persistent Incident summary: Readable contrast starter project.
Visual polish
buttonfocusradiusshadowcontraststates
In styles.css, replace the empty rule with the exact readable contrast declaration block.
Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.
Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.
In styles.css, replace the empty rule with the exact readable contrast declaration block.
Target styles.css · Inside .action-card. Evidence .action-card contains the lesson's primary declaration. Snippet.action-card {
min-height: 44px;
padding: 0.75rem 1rem;
}
Next up
Add the exact gap and max-width declarations without removing the first rule.
Target styles.css · At the end of .action-card. Evidence The component has a stable gap and bounded width. Snippetgap: 0.75rem;
max-width: 42rem;
Next up
Add the exact focus-visible rule, then Run and Check.
Target styles.css · After the component rule. Evidence Keyboard focus is visible. Snippet.action-card button:focus-visible {
outline: 3px solid #5eead4;
outline-offset: 3px;
}
Next up
Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.
Checking account status...
Progress sync is idle.
Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.
Complete a project-shaped readable contrast build while preserving each passing edit.
Start with the Current task. Open styles.css, use Show exact edit when needed, Run, then follow the highlighted next task.
Visual polish becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.
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.