Learning path
Build a business site
Combine structure, content, forms, responsive layout, and release checks around one practical result.
Outcome
Produce a small business site whose claims, keyboard behavior, mobile layout, and launch state can be verified.
01
lesson
HTML document structure
Understand how the root element, metadata, and visible document content form a predictable HTML page.
02
lesson
Links and site navigation
Create descriptive links and ordinary multi-page navigation that remain usable, crawlable, and understandable.
03
lesson
Images and alternative text
Add useful images with dimensions, truthful alternative text, and responsive source choices that avoid layout shift.
04
lesson
Accessible HTML forms
Build a form with persistent labels, sensible input types, grouped controls, instructions, and honest submission behavior.
05
lesson
Semantic page layout
Choose landmarks and sectioning elements by their role so navigation and content remain understandable without visual styling.
06
lesson
Add CSS to an HTML page
Connect a stylesheet, select elements deliberately, and preserve meaningful HTML while changing presentation.
07
lesson
Understand the cascade and inheritance
Predict which CSS declaration wins, trace inherited values, and structure layers so fixes do not depend on selector escalation.
08
lesson
Understand the CSS box model
Control content, padding, borders, margins, intrinsic size, and overflow without relying on fixed dimensions or accidental layout.
09
lesson
CSS selectors and specificity
Select elements by stable roles and resolve cascade conflicts without escalating to brittle selectors or unnecessary important declarations.
10
lesson
Build one-dimensional layouts with flexbox
Use flexbox for rows and columns whose items share one primary axis, while preserving source order, reflow, intrinsic sizing, and focus visibility.
11
lesson
Build two-dimensional layouts with CSS Grid
Use CSS Grid when rows and columns must coordinate, with explicit tracks, intrinsic minimums, responsive repetition, and meaningful source order.
12
lesson
Responsive layout foundations
Build fluid layouts that reflow from narrow phones to wide screens without fixed-width assumptions or horizontal overflow.
13
lesson
DOM basics with JavaScript
Query existing semantic elements, respond to events, update text and state, and preserve focus, security, and a useful no-script baseline.
14
lesson
Enhance forms with JavaScript validation
Add timely client feedback while preserving native controls, server authority, accessible errors, safe values, and honest submission states.
15
lesson
Handle browser events without breaking native behavior
Register event listeners, understand propagation and defaults, and connect behavior to native controls without duplicating handlers or input assumptions.
16
lesson
Fetch data and handle every response state
Use Fetch with explicit request contracts, abortable lifetimes, status handling, safe output, and honest loading, success, empty, and failure states.
17
lesson
Keyboard access and visible focus
Make interactive controls reachable, operable, ordered, and visibly focused without recreating native keyboard behavior.
18
example
Multi-page local-business starter
An original small-business structure with honest placeholders, crawlable navigation, and a clear path to real contact information.
19
guide
Audit a form for accessibility and reliable delivery
Review labels, groups, keyboard behavior, errors, privacy, server validation, and live delivery as one complete form journey.
20
guide
Publish and verify a static website
Move a tested local site through preview and production while preserving one artifact, correct configuration, rollback, and real-service checks.