HTML course
Understand the idea. Try the code. Take one small step forward.
01—03 · Documents & content
Build a sound model of documents, links, paths and images.
04—06 · Semantics & data
Build forms, landmarks and understandable tables.
07—08 · Media & release
Handle media fallbacks, metadata and release checks.
09—14 · Applied document topics
Explore image selection, form submission, dialogs, templates and acceptance.
Study the mechanism, run the example, then attempt the challenge before opening the solution. Every chapter includes verification and common boundaries.
01 · Documents, the DOM and your first page
Create an HTML document, distinguish source text from the parsed DOM and rendered page, and diagnose why an edit is not visible.
02 · Headings, semantics and links
Choose elements by information structure, distinguish navigation from actions, and write link text that makes sense on its own.
03 · Paths, images and alternative text
Resolve a relative path from the document location, reduce layout movement during image loading, and write alternative text for the image purpose.
04 · Form semantics, submission and validation
Explain the different roles of label, id and name, distinguish validity from trust, and inspect the data that a form submits.
05 · Page regions and accessible structure
Organize page regions with semantic elements and verify that primary content is reachable by keyboard.
06 · Data tables and header relationships
Build a table with a caption and row and column headers, and decide when tabular data is more appropriate than cards.
07 · Media, embedding and progressive enhancement
Configure controllable media, understand captions and file formats, and preserve essential information when a feature is unavailable.
08 · Metadata, loading and release checks
Configure language, title, encoding and viewport, distinguish markup errors from failed requests, and perform an evidence-based release check.
09 · Encoding, entities and displaying code
Distinguish encoding, parsing and display to diagnose garbled text and render code as text.
10 · Responsive images: srcset, sizes and selection
Separate resolution selection from art direction and explain which image the browser selects.
11 · Form data, constraints and submission paths
Trace controls into submitted data and separate browser validation, business rules and network requests.
12 · Native dialogs: open, cancel and focus return
Build a deliberate confirmation flow with dialog and distinguish modal behavior from simple visibility.
13 · Templates, data attributes and repeated content
Separate repeated structure from data while preventing duplicate IDs and markup injection.
14 · Page acceptance: keyboard, naming and errors
Use repeatable checks to find usability defects that screenshots cannot reveal.