A 120-lesson web foundations track for HTML, CSS, JavaScript habits, accessibility, SEO, and capstone builds.
Choose your Web mission path.
A 120-lesson web foundations track for HTML, CSS, JavaScript habits, accessibility, SEO, and capstone builds.
Build one layer at a time.
Follow the course order for a steady progression, or open any course when you need a focused refresher. Nothing is locked.
- 01 HTML basics 12 lessons
- 02 Semantic structure 10 lessons
- 03 Links and media 8 lessons
- 04 CSS basics 12 lessons
- 05 Layout and responsive 14 lessons
- 06 Visual polish 8 lessons
- 07 JavaScript basics 12 lessons
- 08 DOM and events 10 lessons
- 09 Forms and validation 10 lessons
- 10 Accessibility 8 lessons
- 11 SEO, performance, and hosting 8 lessons
- 12 Capstone builds 8 lessons
Documents, headings, paragraphs, lists, attributes, and readable markup.
12 short lessons 0/10 Semantic structureLandmarks, sections, articles, navigation, and content hierarchy.
10 short lessons · 1 checkpoint 0/8 Links and mediaAnchors, images, captions, downloadable resources, and media context.
8 short lessons · 1 checkpoint 0/12 CSS basicsSelectors, color, spacing, typography, borders, and reusable classes.
12 short lessons · 1 checkpoint 0/14 Layout and responsiveFlex, grid, responsive constraints, media queries, and wrapping.
14 short lessons · 1 checkpoint 0/8 Visual polishButtons, focus states, hierarchy, rhythm, and professional restraint.
8 short lessons · 1 checkpoint 0/12 JavaScript basicsVariables, functions, conditions, arrays, and readable behavior patterns.
12 short lessons · 1 checkpoint 0/10 DOM and eventsSelectors, event listeners, class changes, text updates, and UI behavior.
10 short lessons · 1 checkpoint 0/10 Forms and validationLabels, inputs, validation hints, form states, and confirmation messages.
10 short lessons 0/8 AccessibilityLandmarks, names, keyboard flow, focus, alternatives, and contrast habits.
8 short lessons · 1 checkpoint 0/8 SEO, performance, and hostingTitles, descriptions, canonical paths, lightweight assets, and static hosting checks.
8 short lessons 0/8 Capstone buildsProject-shaped builds combining structure, style, behavior, accessibility, and launch checks.
8 short lessons · 8 checkpointsKeep learning across sessions.
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.
Short missions for Web confidence.
Build document shell inside the persistent Community workshop: Document shell starter project.
Beginner 02 HTML basics HTML basics: Page title and languageBuild page title and language inside the persistent Neighborhood library: Page title and language starter project.
Beginner 03 HTML basics HTML basics: Heading hierarchyBuild heading hierarchy inside the persistent Volunteer check-in: Heading hierarchy starter project.
Beginner 04 HTML basics HTML basics: Readable paragraphsBuild readable paragraphs inside the persistent Local event guide: Readable paragraphs starter project.
Beginner 05 HTML basics HTML basics: Ordered task listsBuild ordered task lists inside the persistent Study group board: Ordered task lists starter project.
Beginner 06 HTML basics HTML basics: Unordered feature listsBuild unordered feature lists inside the persistent Public resource hub: Unordered feature lists starter project.
Beginner 07 HTML basics HTML basics: Description listsBuild description lists inside the persistent Creative portfolio: Description lists starter project.
Beginner 08 HTML basics HTML basics: Emphasis and importanceBuild emphasis and importance inside the persistent Course dashboard: Emphasis and importance starter project.
Beginner 09 HTML basics HTML basics: Quoted contentBuild quoted content inside the persistent Service status page: Quoted content starter project.
Beginner 10 HTML basics HTML basics: Dates and machine-readable timeBuild dates and machine-readable time inside the persistent Project launch page: Dates and machine-readable time starter project.
Beginner 11 HTML basics HTML basics: Data attributesBuild data attributes inside the persistent Accessible recipe: Data attributes starter project.
Beginner 12 HTML basics HTML basics: Reusable class namesBuild reusable class names inside the persistent Reading list: Reusable class names starter project.
Beginner 13 Semantic structure Semantic structure: Site headerBuild site header inside the persistent Support center: Site header starter project.
Beginner 14 Semantic structure Semantic structure: Primary navigationBuild primary navigation inside the persistent Team directory: Primary navigation starter project.
Beginner 15 Semantic structure Semantic structure: Main landmarkBuild main landmark inside the persistent Field notes: Main landmark starter project.
Beginner 16 Semantic structure Semantic structure: Named sectionsBuild named sections inside the persistent Civic calendar: Named sections starter project.
Beginner 17 Semantic structure Semantic structure: Independent articlesBuild independent articles inside the persistent Learning journal: Independent articles starter project.
Beginner 18 Semantic structure Semantic structure: Supporting asidesBuild supporting asides inside the persistent Product changelog: Supporting asides starter project.
Beginner 19 Semantic structure Semantic structure: Page footerBuild page footer inside the persistent Workshop signup: Page footer starter project.
Beginner 20 Semantic structure Semantic structure: Contact informationBuild contact information inside the persistent Incident summary: Contact information starter project.
Beginner Checkpoint 21 Semantic structure Semantic structure: Nested heading orderBuild nested heading order inside the persistent Community workshop: Nested heading order starter project.
Beginner 22 Semantic structure Semantic structure: Complete page outlineBuild complete page outline inside the persistent Neighborhood library: Complete page outline starter project.
Beginner 23 Links and media Links and media: Relative navigation linksBuild relative navigation links inside the persistent Volunteer check-in: Relative navigation links starter project.
Beginner 24 Links and media Links and media: Descriptive link textBuild descriptive link text inside the persistent Local event guide: Descriptive link text starter project.
Beginner 25 Links and media Links and media: Current-page navigationBuild current-page navigation inside the persistent Study group board: Current-page navigation starter project.
Beginner Checkpoint 26 Links and media Links and media: Images with useful alt textBuild images with useful alt text inside the persistent Public resource hub: Images with useful alt text starter project.
Beginner 27 Links and media Links and media: Figures and captionsBuild figures and captions inside the persistent Creative portfolio: Figures and captions starter project.
Beginner 28 Links and media Links and media: Responsive image dimensionsBuild responsive image dimensions inside the persistent Course dashboard: Responsive image dimensions starter project.
Beginner 29 Links and media Links and media: Downloadable resourcesBuild downloadable resources inside the persistent Service status page: Downloadable resources starter project.
Beginner 30 Links and media Links and media: Media fallback copyBuild media fallback copy inside the persistent Project launch page: Media fallback copy starter project.
Beginner 31 CSS basics CSS basics: Element selectorsBuild element selectors inside the persistent Accessible recipe: Element selectors starter project.
Core 32 CSS basics CSS basics: Class selectorsBuild class selectors inside the persistent Reading list: Class selectors starter project.
Core 33 CSS basics CSS basics: Color tokensBuild color tokens inside the persistent Support center: Color tokens starter project.
Core 34 CSS basics CSS basics: Readable typographyBuild readable typography inside the persistent Team directory: Readable typography starter project.
Core 35 CSS basics CSS basics: Spacing with paddingBuild spacing with padding inside the persistent Field notes: Spacing with padding starter project.
Core 36 CSS basics CSS basics: Spacing with marginBuild spacing with margin inside the persistent Civic calendar: Spacing with margin starter project.
Core 37 CSS basics CSS basics: BordersBuild borders inside the persistent Learning journal: Borders starter project.
Core 38 CSS basics CSS basics: Background surfacesBuild background surfaces inside the persistent Product changelog: Background surfaces starter project.
Core 39 CSS basics CSS basics: Reusable utility classesBuild reusable utility classes inside the persistent Workshop signup: Reusable utility classes starter project.
Core 40 CSS basics CSS basics: Hover statesBuild hover states inside the persistent Incident summary: Hover states starter project.
Core Checkpoint 41 CSS basics CSS basics: Focus-visible statesBuild focus-visible states inside the persistent Community workshop: Focus-visible states starter project.
Core 42 CSS basics CSS basics: Cascade reviewBuild cascade review inside the persistent Neighborhood library: Cascade review starter project.
Core 43 Layout and responsive Layout and responsive: Flexible rowsBuild flexible rows inside the persistent Volunteer check-in: Flexible rows starter project.
Core 44 Layout and responsive Layout and responsive: Wrapping navigationBuild wrapping navigation inside the persistent Local event guide: Wrapping navigation starter project.
Core 45 Layout and responsive Layout and responsive: Two-column gridBuild two-column grid inside the persistent Study group board: Two-column grid starter project.
Core 46 Layout and responsive Layout and responsive: Repeatable card gridBuild repeatable card grid inside the persistent Public resource hub: Repeatable card grid starter project.
Core 47 Layout and responsive Layout and responsive: Minmax tracksBuild minmax tracks inside the persistent Creative portfolio: Minmax tracks starter project.
Core 48 Layout and responsive Layout and responsive: Stable gapsBuild stable gaps inside the persistent Course dashboard: Stable gaps starter project.
Core 49 Layout and responsive Layout and responsive: Intrinsic sizingBuild intrinsic sizing inside the persistent Service status page: Intrinsic sizing starter project.
Core 50 Layout and responsive Layout and responsive: Content-width constraintsBuild content-width constraints inside the persistent Project launch page: Content-width constraints starter project.
Core Checkpoint 51 Layout and responsive Layout and responsive: Responsive imagesBuild responsive images inside the persistent Accessible recipe: Responsive images starter project.
Core 52 Layout and responsive Layout and responsive: Mobile media queryBuild mobile media query inside the persistent Reading list: Mobile media query starter project.
Core 53 Layout and responsive Layout and responsive: Desktop media queryBuild desktop media query inside the persistent Support center: Desktop media query starter project.
Core 54 Layout and responsive Layout and responsive: Source orderBuild source order inside the persistent Team directory: Source order starter project.
Core 55 Layout and responsive Layout and responsive: Overflow preventionBuild overflow prevention inside the persistent Field notes: Overflow prevention starter project.
Core 56 Layout and responsive Layout and responsive: Responsive layout checkpointBuild responsive layout checkpoint inside the persistent Civic calendar: Responsive layout checkpoint starter project.
Core 57 Visual polish Visual polish: Button hierarchyBuild button hierarchy inside the persistent Learning journal: Button hierarchy starter project.
Core 58 Visual polish Visual polish: Focus ringsBuild focus rings inside the persistent Product changelog: Focus rings starter project.
Core 59 Visual polish Visual polish: Card rhythmBuild card rhythm inside the persistent Workshop signup: Card rhythm starter project.
Core 60 Visual polish Visual polish: Readable contrastBuild readable contrast inside the persistent Incident summary: Readable contrast starter project.
Core Checkpoint 61 Visual polish Visual polish: Status colorsBuild status colors inside the persistent Community workshop: Status colors starter project.
Core 62 Visual polish Visual polish: Subtle shadowsBuild subtle shadows inside the persistent Neighborhood library: Subtle shadows starter project.
Core 63 Visual polish Visual polish: Consistent radiiBuild consistent radii inside the persistent Volunteer check-in: Consistent radii starter project.
Core 64 Visual polish Visual polish: Visual polish checkpointBuild visual polish checkpoint inside the persistent Local event guide: Visual polish checkpoint starter project.
Core 65 JavaScript basics JavaScript basics: ConstantsBuild constants inside the persistent Study group board: Constants starter project.
Core 66 JavaScript basics JavaScript basics: Mutable valuesBuild mutable values inside the persistent Public resource hub: Mutable values starter project.
Core 67 JavaScript basics JavaScript basics: Readable stringsBuild readable strings inside the persistent Creative portfolio: Readable strings starter project.
Core 68 JavaScript basics JavaScript basics: Number calculationsBuild number calculations inside the persistent Course dashboard: Number calculations starter project.
Core 69 JavaScript basics JavaScript basics: Boolean decisionsBuild boolean decisions inside the persistent Service status page: Boolean decisions starter project.
Core 70 JavaScript basics JavaScript basics: Conditional branchesBuild conditional branches inside the persistent Project launch page: Conditional branches starter project.
Core 71 JavaScript basics JavaScript basics: ArraysBuild arrays inside the persistent Accessible recipe: Arrays starter project.
Core 72 JavaScript basics JavaScript basics: Array lengthBuild array length inside the persistent Reading list: Array length starter project.
Core 73 JavaScript basics JavaScript basics: Named functionsBuild named functions inside the persistent Support center: Named functions starter project.
Core 74 JavaScript basics JavaScript basics: Function parametersBuild function parameters inside the persistent Team directory: Function parameters starter project.
Core 75 JavaScript basics JavaScript basics: Return valuesBuild return values inside the persistent Field notes: Return values starter project.
Core Checkpoint 76 JavaScript basics JavaScript basics: Template stringsBuild template strings inside the persistent Civic calendar: Template strings starter project.
Core 77 DOM and events DOM and events: Query one elementBuild query one element inside the persistent Learning journal: Query one element starter project.
Admin 78 DOM and events DOM and events: Query a buttonBuild query a button inside the persistent Product changelog: Query a button starter project.
Admin 79 DOM and events DOM and events: Click listenersBuild click listeners inside the persistent Workshop signup: Click listeners starter project.
Admin 80 DOM and events DOM and events: Text updatesBuild text updates inside the persistent Incident summary: Text updates starter project.
Admin Checkpoint 81 DOM and events DOM and events: Class additionsBuild class additions inside the persistent Community workshop: Class additions starter project.
Admin 82 DOM and events DOM and events: Class togglesBuild class toggles inside the persistent Neighborhood library: Class toggles starter project.
Admin 83 DOM and events DOM and events: Data attributesBuild data attributes inside the persistent Volunteer check-in: Data attributes starter project.
Admin 84 DOM and events DOM and events: Keyboard-friendly buttonsBuild keyboard-friendly buttons inside the persistent Local event guide: Keyboard-friendly buttons starter project.
Admin 85 DOM and events DOM and events: Status announcementsBuild status announcements inside the persistent Study group board: Status announcements starter project.
Admin 86 DOM and events DOM and events: DOM behavior checkpointBuild dom behavior checkpoint inside the persistent Public resource hub: DOM behavior checkpoint starter project.
Admin 87 Forms and validation Forms and validation: Form structureBuild form structure inside the persistent Creative portfolio: Form structure starter project.
Admin 88 Forms and validation Forms and validation: Explicit labelsBuild explicit labels inside the persistent Course dashboard: Explicit labels starter project.
Admin 89 Forms and validation Forms and validation: Email input typesBuild email input types inside the persistent Service status page: Email input types starter project.
Admin 90 Forms and validation Forms and validation: Required fieldsBuild required fields inside the persistent Project launch page: Required fields starter project.
Admin 91 Forms and validation Forms and validation: Help text relationshipsBuild help text relationships inside the persistent Accessible recipe: Help text relationships starter project.
Admin 92 Forms and validation Forms and validation: Error messagesBuild error messages inside the persistent Reading list: Error messages starter project.
Admin 93 Forms and validation Forms and validation: Input descriptionsBuild input descriptions inside the persistent Support center: Input descriptions starter project.
Admin 94 Forms and validation Forms and validation: Grouped choicesBuild grouped choices inside the persistent Team directory: Grouped choices starter project.
Admin 95 Forms and validation Forms and validation: Confirmation statesBuild confirmation states inside the persistent Field notes: Confirmation states starter project.
Admin 96 Forms and validation Forms and validation: Validation checkpointBuild validation checkpoint inside the persistent Civic calendar: Validation checkpoint starter project.
Admin 97 Accessibility Accessibility: Accessible namesBuild accessible names inside the persistent Learning journal: Accessible names starter project.
Admin 98 Accessibility Accessibility: Image alternativesBuild image alternatives inside the persistent Product changelog: Image alternatives starter project.
Admin 99 Accessibility Accessibility: Landmark labelsBuild landmark labels inside the persistent Workshop signup: Landmark labels starter project.
Admin 100 Accessibility Accessibility: Keyboard orderBuild keyboard order inside the persistent Incident summary: Keyboard order starter project.
Admin Checkpoint 101 Accessibility Accessibility: Visible focusBuild visible focus inside the persistent Community workshop: Visible focus starter project.
Admin 102 Accessibility Accessibility: Status announcementsBuild status announcements inside the persistent Neighborhood library: Status announcements starter project.
Admin 103 Accessibility Accessibility: Heading structureBuild heading structure inside the persistent Volunteer check-in: Heading structure starter project.
Admin 104 Accessibility Accessibility: Accessibility checkpointBuild accessibility checkpoint inside the persistent Local event guide: Accessibility checkpoint starter project.
Admin 105 SEO, performance, and hosting SEO, performance, and hosting: Unique page titlesBuild unique page titles inside the persistent Study group board: Unique page titles starter project.
Advanced 106 SEO, performance, and hosting SEO, performance, and hosting: Meta descriptionsBuild meta descriptions inside the persistent Public resource hub: Meta descriptions starter project.
Advanced 107 SEO, performance, and hosting SEO, performance, and hosting: Canonical pathsBuild canonical paths inside the persistent Creative portfolio: Canonical paths starter project.
Advanced 108 SEO, performance, and hosting SEO, performance, and hosting: Viewport metadataBuild viewport metadata inside the persistent Course dashboard: Viewport metadata starter project.
Advanced 109 SEO, performance, and hosting SEO, performance, and hosting: Asset dimensionsBuild asset dimensions inside the persistent Service status page: Asset dimensions starter project.
Advanced 110 SEO, performance, and hosting SEO, performance, and hosting: Robots guidanceBuild robots guidance inside the persistent Project launch page: Robots guidance starter project.
Advanced 111 SEO, performance, and hosting SEO, performance, and hosting: Helpful 404 pagesBuild helpful 404 pages inside the persistent Accessible recipe: Helpful 404 pages starter project.
Advanced 112 SEO, performance, and hosting SEO, performance, and hosting: Launch checklistBuild launch checklist inside the persistent Reading list: Launch checklist starter project.
Advanced 113 Capstone builds Capstone builds: Personal profileBuild personal profile inside the persistent Support center: Personal profile starter project.
Capstone Checkpoint 114 Capstone builds Capstone builds: Event landing pageBuild event landing page inside the persistent Team directory: Event landing page starter project.
Capstone Checkpoint 115 Capstone builds Capstone builds: Accessible signup flowBuild accessible signup flow inside the persistent Field notes: Accessible signup flow starter project.
Capstone Checkpoint 116 Capstone builds Capstone builds: Course dashboardBuild course dashboard inside the persistent Civic calendar: Course dashboard starter project.
Capstone Checkpoint 117 Capstone builds Capstone builds: Service status pageBuild service status page inside the persistent Learning journal: Service status page starter project.
Capstone Checkpoint 118 Capstone builds Capstone builds: Resource directoryBuild resource directory inside the persistent Product changelog: Resource directory starter project.
Capstone Checkpoint 119 Capstone builds Capstone builds: Portfolio case studyBuild portfolio case study inside the persistent Workshop signup: Portfolio case study starter project.
Capstone Checkpoint 120 Capstone builds Capstone builds: Web foundations finaleBuild web foundations finale inside the persistent Incident summary: Web foundations finale starter project.
Capstone Checkpoint