Run
Render a simulated preview from the current lesson snippet.
Selectors, color, spacing, typography, borders, and reusable classes.
Build element selectors inside the persistent Accessible recipe: Element selectors starter project.
Core 02 CSS basics CSS basics: Class selectorsBuild class selectors inside the persistent Reading list: Class selectors starter project.
Core 03 CSS basics CSS basics: Color tokensBuild color tokens inside the persistent Support center: Color tokens starter project.
Core 04 CSS basics CSS basics: Readable typographyBuild readable typography inside the persistent Team directory: Readable typography starter project.
Core 05 CSS basics CSS basics: Spacing with paddingBuild spacing with padding inside the persistent Field notes: Spacing with padding starter project.
Core 06 CSS basics CSS basics: Spacing with marginBuild spacing with margin inside the persistent Civic calendar: Spacing with margin starter project.
Core 07 CSS basics CSS basics: BordersBuild borders inside the persistent Learning journal: Borders starter project.
Core 08 CSS basics CSS basics: Background surfacesBuild background surfaces inside the persistent Product changelog: Background surfaces starter project.
Core 09 CSS basics CSS basics: Reusable utility classesBuild reusable utility classes inside the persistent Workshop signup: Reusable utility classes starter project.
Core 10 CSS basics CSS basics: Hover statesBuild hover states inside the persistent Incident summary: Hover states starter project.
Core Checkpoint 11 CSS basics CSS basics: Focus-visible statesBuild focus-visible states inside the persistent Community workshop: Focus-visible states starter project.
Core 12 CSS basics CSS basics: Cascade reviewBuild cascade review inside the persistent Neighborhood library: Cascade review starter project.
CoreCreate 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.
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.