Courses

Choose your Web mission path.

A 120-lesson web foundations track for HTML, CSS, JavaScript habits, accessibility, SEO, and capstone builds.

Track progress 0/120 lessons 0/18 missions 12 courses
0%
Continue View profile
Active track
Web fundamentals

A 120-lesson web foundations track for HTML, CSS, JavaScript habits, accessibility, SEO, and capstone builds.

120 lessons 12 categories 16 checkpoints
All lessons

Short missions for Web confidence.

01 HTML basics HTML basics: Document shell

Build document shell inside the persistent Community workshop: Document shell starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
02 HTML basics HTML basics: Page title and language

Build page title and language inside the persistent Neighborhood library: Page title and language starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
03 HTML basics HTML basics: Heading hierarchy

Build heading hierarchy inside the persistent Volunteer check-in: Heading hierarchy starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
04 HTML basics HTML basics: Readable paragraphs

Build readable paragraphs inside the persistent Local event guide: Readable paragraphs starter project.

Beginner 10 minutes · html, body, h1, p, ul, class
05 HTML basics HTML basics: Ordered task lists

Build ordered task lists inside the persistent Study group board: Ordered task lists starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
06 HTML basics HTML basics: Unordered feature lists

Build unordered feature lists inside the persistent Public resource hub: Unordered feature lists starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
07 HTML basics HTML basics: Description lists

Build description lists inside the persistent Creative portfolio: Description lists starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
08 HTML basics HTML basics: Emphasis and importance

Build emphasis and importance inside the persistent Course dashboard: Emphasis and importance starter project.

Beginner 10 minutes · html, body, h1, p, ul, class
09 HTML basics HTML basics: Quoted content

Build quoted content inside the persistent Service status page: Quoted content starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
10 HTML basics HTML basics: Dates and machine-readable time

Build dates and machine-readable time inside the persistent Project launch page: Dates and machine-readable time starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
11 HTML basics HTML basics: Data attributes

Build data attributes inside the persistent Accessible recipe: Data attributes starter project.

Beginner 7 minutes · html, body, h1, p, ul, class
12 HTML basics HTML basics: Reusable class names

Build reusable class names inside the persistent Reading list: Reusable class names starter project.

Beginner 10 minutes · html, body, h1, p, ul, class
13 Semantic structure Semantic structure: Site header

Build site header inside the persistent Support center: Site header starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
14 Semantic structure Semantic structure: Primary navigation

Build primary navigation inside the persistent Team directory: Primary navigation starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
15 Semantic structure Semantic structure: Main landmark

Build main landmark inside the persistent Field notes: Main landmark starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
16 Semantic structure Semantic structure: Named sections

Build named sections inside the persistent Civic calendar: Named sections starter project.

Beginner 10 minutes · header, nav, main, section, article, footer
17 Semantic structure Semantic structure: Independent articles

Build independent articles inside the persistent Learning journal: Independent articles starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
18 Semantic structure Semantic structure: Supporting asides

Build supporting asides inside the persistent Product changelog: Supporting asides starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
19 Semantic structure Semantic structure: Page footer

Build page footer inside the persistent Workshop signup: Page footer starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
20 Semantic structure Semantic structure: Contact information

Build contact information inside the persistent Incident summary: Contact information starter project.

Beginner Checkpoint 10 minutes · header, nav, main, section, article, footer
21 Semantic structure Semantic structure: Nested heading order

Build nested heading order inside the persistent Community workshop: Nested heading order starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
22 Semantic structure Semantic structure: Complete page outline

Build complete page outline inside the persistent Neighborhood library: Complete page outline starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
23 Links and media Links and media: Relative navigation links

Build relative navigation links inside the persistent Volunteer check-in: Relative navigation links starter project.

Beginner 7 minutes · a, href, img, alt, figure, figcaption
24 Links and media Links and media: Descriptive link text

Build descriptive link text inside the persistent Local event guide: Descriptive link text starter project.

Beginner 7 minutes · a, href, img, alt, figure, figcaption
25 Links and media Links and media: Current-page navigation

Build current-page navigation inside the persistent Study group board: Current-page navigation starter project.

Beginner Checkpoint 7 minutes · a, href, img, alt, figure, figcaption
26 Links and media Links and media: Images with useful alt text

Build images with useful alt text inside the persistent Public resource hub: Images with useful alt text starter project.

Beginner 10 minutes · a, href, img, alt, figure, figcaption
27 Links and media Links and media: Figures and captions

Build figures and captions inside the persistent Creative portfolio: Figures and captions starter project.

Beginner 7 minutes · a, href, img, alt, figure, figcaption
28 Links and media Links and media: Responsive image dimensions

Build responsive image dimensions inside the persistent Course dashboard: Responsive image dimensions starter project.

Beginner 7 minutes · a, href, img, alt, figure, figcaption
29 Links and media Links and media: Downloadable resources

Build downloadable resources inside the persistent Service status page: Downloadable resources starter project.

Beginner 7 minutes · a, href, img, alt, figure, figcaption
30 Links and media Links and media: Media fallback copy

Build media fallback copy inside the persistent Project launch page: Media fallback copy starter project.

Beginner 10 minutes · a, href, img, alt, figure, figcaption
31 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
32 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
33 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
34 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
35 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
36 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
37 CSS basics CSS basics: Borders

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

Core 7 minutes · selector, color, padding, margin, font, border
38 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
39 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
40 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
41 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
42 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
43 Layout and responsive Layout and responsive: Flexible rows

Build flexible rows inside the persistent Volunteer check-in: Flexible rows starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
44 Layout and responsive Layout and responsive: Wrapping navigation

Build wrapping navigation inside the persistent Local event guide: Wrapping navigation starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
45 Layout and responsive Layout and responsive: Two-column grid

Build two-column grid inside the persistent Study group board: Two-column grid starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
46 Layout and responsive Layout and responsive: Repeatable card grid

Build repeatable card grid inside the persistent Public resource hub: Repeatable card grid starter project.

Core 10 minutes · flex, grid, gap, minmax, @media, wrap
47 Layout and responsive Layout and responsive: Minmax tracks

Build minmax tracks inside the persistent Creative portfolio: Minmax tracks starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
48 Layout and responsive Layout and responsive: Stable gaps

Build stable gaps inside the persistent Course dashboard: Stable gaps starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
49 Layout and responsive Layout and responsive: Intrinsic sizing

Build intrinsic sizing inside the persistent Service status page: Intrinsic sizing starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
50 Layout and responsive Layout and responsive: Content-width constraints

Build content-width constraints inside the persistent Project launch page: Content-width constraints starter project.

Core Checkpoint 10 minutes · flex, grid, gap, minmax, @media, wrap
51 Layout and responsive Layout and responsive: Responsive images

Build responsive images inside the persistent Accessible recipe: Responsive images starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
52 Layout and responsive Layout and responsive: Mobile media query

Build mobile media query inside the persistent Reading list: Mobile media query starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
53 Layout and responsive Layout and responsive: Desktop media query

Build desktop media query inside the persistent Support center: Desktop media query starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
54 Layout and responsive Layout and responsive: Source order

Build source order inside the persistent Team directory: Source order starter project.

Core 10 minutes · flex, grid, gap, minmax, @media, wrap
55 Layout and responsive Layout and responsive: Overflow prevention

Build overflow prevention inside the persistent Field notes: Overflow prevention starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
56 Layout and responsive Layout and responsive: Responsive layout checkpoint

Build responsive layout checkpoint inside the persistent Civic calendar: Responsive layout checkpoint starter project.

Core 7 minutes · flex, grid, gap, minmax, @media, wrap
57 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
58 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
59 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
60 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
61 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
62 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
63 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
64 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
65 JavaScript basics JavaScript basics: Constants

Build constants inside the persistent Study group board: Constants starter project.

Core 7 minutes · const, let, function, if, array, return
66 JavaScript basics JavaScript basics: Mutable values

Build mutable values inside the persistent Public resource hub: Mutable values starter project.

Core 7 minutes · const, let, function, if, array, return
67 JavaScript basics JavaScript basics: Readable strings

Build readable strings inside the persistent Creative portfolio: Readable strings starter project.

Core 7 minutes · const, let, function, if, array, return
68 JavaScript basics JavaScript basics: Number calculations

Build number calculations inside the persistent Course dashboard: Number calculations starter project.

Core 10 minutes · const, let, function, if, array, return
69 JavaScript basics JavaScript basics: Boolean decisions

Build boolean decisions inside the persistent Service status page: Boolean decisions starter project.

Core 7 minutes · const, let, function, if, array, return
70 JavaScript basics JavaScript basics: Conditional branches

Build conditional branches inside the persistent Project launch page: Conditional branches starter project.

Core 7 minutes · const, let, function, if, array, return
71 JavaScript basics JavaScript basics: Arrays

Build arrays inside the persistent Accessible recipe: Arrays starter project.

Core 7 minutes · const, let, function, if, array, return
72 JavaScript basics JavaScript basics: Array length

Build array length inside the persistent Reading list: Array length starter project.

Core 10 minutes · const, let, function, if, array, return
73 JavaScript basics JavaScript basics: Named functions

Build named functions inside the persistent Support center: Named functions starter project.

Core 7 minutes · const, let, function, if, array, return
74 JavaScript basics JavaScript basics: Function parameters

Build function parameters inside the persistent Team directory: Function parameters starter project.

Core 7 minutes · const, let, function, if, array, return
75 JavaScript basics JavaScript basics: Return values

Build return values inside the persistent Field notes: Return values starter project.

Core Checkpoint 7 minutes · const, let, function, if, array, return
76 JavaScript basics JavaScript basics: Template strings

Build template strings inside the persistent Civic calendar: Template strings starter project.

Core 10 minutes · const, let, function, if, array, return
77 DOM and events DOM and events: Query one element

Build query one element inside the persistent Learning journal: Query one element starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
78 DOM and events DOM and events: Query a button

Build query a button inside the persistent Product changelog: Query a button starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
79 DOM and events DOM and events: Click listeners

Build click listeners inside the persistent Workshop signup: Click listeners starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
80 DOM and events DOM and events: Text updates

Build text updates inside the persistent Incident summary: Text updates starter project.

Admin Checkpoint 10 minutes · querySelector, addEventListener, classList, textContent
81 DOM and events DOM and events: Class additions

Build class additions inside the persistent Community workshop: Class additions starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
82 DOM and events DOM and events: Class toggles

Build class toggles inside the persistent Neighborhood library: Class toggles starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
83 DOM and events DOM and events: Data attributes

Build data attributes inside the persistent Volunteer check-in: Data attributes starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
84 DOM and events DOM and events: Keyboard-friendly buttons

Build keyboard-friendly buttons inside the persistent Local event guide: Keyboard-friendly buttons starter project.

Admin 10 minutes · querySelector, addEventListener, classList, textContent
85 DOM and events DOM and events: Status announcements

Build status announcements inside the persistent Study group board: Status announcements starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
86 DOM and events DOM and events: DOM behavior checkpoint

Build dom behavior checkpoint inside the persistent Public resource hub: DOM behavior checkpoint starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent
87 Forms and validation Forms and validation: Form structure

Build form structure inside the persistent Creative portfolio: Form structure starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
88 Forms and validation Forms and validation: Explicit labels

Build explicit labels inside the persistent Course dashboard: Explicit labels starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
89 Forms and validation Forms and validation: Email input types

Build email input types inside the persistent Service status page: Email input types starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
90 Forms and validation Forms and validation: Required fields

Build required fields inside the persistent Project launch page: Required fields starter project.

Admin 10 minutes · form, label, input, required, aria-describedby
91 Forms and validation Forms and validation: Help text relationships

Build help text relationships inside the persistent Accessible recipe: Help text relationships starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
92 Forms and validation Forms and validation: Error messages

Build error messages inside the persistent Reading list: Error messages starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
93 Forms and validation Forms and validation: Input descriptions

Build input descriptions inside the persistent Support center: Input descriptions starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
94 Forms and validation Forms and validation: Grouped choices

Build grouped choices inside the persistent Team directory: Grouped choices starter project.

Admin 10 minutes · form, label, input, required, aria-describedby
95 Forms and validation Forms and validation: Confirmation states

Build confirmation states inside the persistent Field notes: Confirmation states starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
96 Forms and validation Forms and validation: Validation checkpoint

Build validation checkpoint inside the persistent Civic calendar: Validation checkpoint starter project.

Admin 7 minutes · form, label, input, required, aria-describedby
97 Accessibility Accessibility: Accessible names

Build accessible names inside the persistent Learning journal: Accessible names starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
98 Accessibility Accessibility: Image alternatives

Build image alternatives inside the persistent Product changelog: Image alternatives starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
99 Accessibility Accessibility: Landmark labels

Build landmark labels inside the persistent Workshop signup: Landmark labels starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
100 Accessibility Accessibility: Keyboard order

Build keyboard order inside the persistent Incident summary: Keyboard order starter project.

Admin Checkpoint 10 minutes · alt, aria-label, role, focus, contrast
101 Accessibility Accessibility: Visible focus

Build visible focus inside the persistent Community workshop: Visible focus starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
102 Accessibility Accessibility: Status announcements

Build status announcements inside the persistent Neighborhood library: Status announcements starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
103 Accessibility Accessibility: Heading structure

Build heading structure inside the persistent Volunteer check-in: Heading structure starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
104 Accessibility Accessibility: Accessibility checkpoint

Build accessibility checkpoint inside the persistent Local event guide: Accessibility checkpoint starter project.

Admin 10 minutes · alt, aria-label, role, focus, contrast
105 SEO, performance, and hosting SEO, performance, and hosting: Unique page titles

Build unique page titles inside the persistent Study group board: Unique page titles starter project.

Advanced 7 minutes · title, meta, canonical, viewport, robots, 404
106 SEO, performance, and hosting SEO, performance, and hosting: Meta descriptions

Build meta descriptions inside the persistent Public resource hub: Meta descriptions starter project.

Advanced 7 minutes · title, meta, canonical, viewport, robots, 404
107 SEO, performance, and hosting SEO, performance, and hosting: Canonical paths

Build canonical paths inside the persistent Creative portfolio: Canonical paths starter project.

Advanced 7 minutes · title, meta, canonical, viewport, robots, 404
108 SEO, performance, and hosting SEO, performance, and hosting: Viewport metadata

Build viewport metadata inside the persistent Course dashboard: Viewport metadata starter project.

Advanced 10 minutes · title, meta, canonical, viewport, robots, 404
109 SEO, performance, and hosting SEO, performance, and hosting: Asset dimensions

Build asset dimensions inside the persistent Service status page: Asset dimensions starter project.

Advanced 7 minutes · title, meta, canonical, viewport, robots, 404
110 SEO, performance, and hosting SEO, performance, and hosting: Robots guidance

Build robots guidance inside the persistent Project launch page: Robots guidance starter project.

Advanced 7 minutes · title, meta, canonical, viewport, robots, 404
111 SEO, performance, and hosting SEO, performance, and hosting: Helpful 404 pages

Build helpful 404 pages inside the persistent Accessible recipe: Helpful 404 pages starter project.

Advanced 7 minutes · title, meta, canonical, viewport, robots, 404
112 SEO, performance, and hosting SEO, performance, and hosting: Launch checklist

Build launch checklist inside the persistent Reading list: Launch checklist starter project.

Advanced 10 minutes · title, meta, canonical, viewport, robots, 404
113 Capstone builds Capstone builds: Personal profile

Build personal profile inside the persistent Support center: Personal profile starter project.

Capstone Checkpoint 7 minutes · html, css, js, a11y, seo, check
114 Capstone builds Capstone builds: Event landing page

Build event landing page inside the persistent Team directory: Event landing page starter project.

Capstone Checkpoint 7 minutes · html, css, js, a11y, seo, check
115 Capstone builds Capstone builds: Accessible signup flow

Build accessible signup flow inside the persistent Field notes: Accessible signup flow starter project.

Capstone Checkpoint 7 minutes · html, css, js, a11y, seo, check
116 Capstone builds Capstone builds: Course dashboard

Build course dashboard inside the persistent Civic calendar: Course dashboard starter project.

Capstone Checkpoint 10 minutes · html, css, js, a11y, seo, check
117 Capstone builds Capstone builds: Service status page

Build service status page inside the persistent Learning journal: Service status page starter project.

Capstone Checkpoint 7 minutes · html, css, js, a11y, seo, check
118 Capstone builds Capstone builds: Resource directory

Build resource directory inside the persistent Product changelog: Resource directory starter project.

Capstone Checkpoint 7 minutes · html, css, js, a11y, seo, check
119 Capstone builds Capstone builds: Portfolio case study

Build portfolio case study inside the persistent Workshop signup: Portfolio case study starter project.

Capstone Checkpoint 7 minutes · html, css, js, a11y, seo, check
120 Capstone builds Capstone builds: Web foundations finale

Build web foundations finale inside the persistent Incident summary: Web foundations finale starter project.

Capstone Checkpoint 10 minutes · html, css, js, a11y, seo, check