HTML
Languages and web fundamentals · 4 stages · 28 units in the full series · 28 published in English
Series goal
Express document meaning and input contracts in markup, and check them with keyboard use, resource failure, and zoom.
Prerequisites
Browsers and file paths
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Document Meaning and Content
- 01. Meaning and Document Structure — Editable example
- 02. Document Skeleton and Character Encoding — Editable example
- 03. Metadata and Document Titles — Editable example
- 04. Paragraphs and Text Semantics — Editable example
- 05. Lists and Term Descriptions — Editable example
- 06. Link Paths and In-page Navigation — Editable example
- 07. Images and Alternative Text — Editable example
Stage 2 · Tables and Form Inputs
- 08. figure and Combined Descriptions — Editable example
- 09. Table Row and Column Relationships — Editable example
- 10. Quotations and Machine-readable Dates — Editable example
- 11. The Form Submission Contract — Editable example
- 12. Input Types and Autocomplete — Editable example
- 13. Grouped Inputs and Selection Semantics — Editable example
- 14. Forms and the Keyboard — Editable example
Stage 3 · Native UI and Media
- 15. The Difference Between disabled and readonly — Editable example
- 16. A Collapsible Table of Contents with details — Editable example
- 17. dialog and Modal Flow — Editable example
- 18. Media Captions and Alternatives — External example · preview instructions
- 19. Responsive Image Selection — Editable example
- 20. picture and Format Fallbacks — Editable example
- 21. iframe and Embedded Content Boundaries — External example · preview instructions
Stage 4 · Accessibility Review and Card Integration
- 22. template and Repeated Content — Editable example
- 23. Script Loading and Document Parsing — External example · preview instructions
- 24. Accessible Names and Descriptions — Editable example
- 25. Reading Order and Skip Links — Editable example
- 26. HTML Errors and Browser Recovery — Editable example
- 27. Checking Image Failure and Zoom — Editable example
- 28. Accessible Learning Cards — Editable example
Capstone project and deliverables
An accessible learning-card document with headings, a table of contents, image alternatives, and forms
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.