019 min
Document structure
Give every page a clear skeleton
MINI BUILDCreate a valid page skeleton with language, title, header, main and footer.
Checking saved progress…
🧱 DOCUMENT ARCHITECTURE LAB
HTML, taught through useful outcomes.
Learn to structure web content with semantic HTML that is readable, accessible and ready for CSS and JavaScript.
10 guided lessons≈ 113 guided minutesLearn → Try → Test → Build✓ Full journey + boss live
GUIDED ROADMAP
One concept at a time. One useful build each time.
Lessons unlock in order so the next step stays obvious. Completed lessons remain available for review, and the boss project unlocks only after the full journey.
YOUR GUIDED JOURNEYRestoring saved progress…
029 min
Headings & paragraphs
Create readable content hierarchy
MINI BUILDBuild a short article with one h1, two h2 sections and useful paragraphs.
Checking saved progress…
0310 min
Links & navigation
Connect pages with meaningful destinations
MINI BUILDCreate a three-link site navigation plus one external reference link.
Checking saved progress…
0411 min
Images & alt text
Make visuals informative without excluding people
MINI BUILDCreate a small figure with an image, useful alt text and a figcaption.
Checking saved progress…
0511 min
Lists & tables
Match structure to the shape of information
MINI BUILDBuild a three-row plan comparison table and a separate unordered feature list.
Checking saved progress…
0612 min
Forms & labels
Collect input with explicit meaning
MINI BUILDBuild a compact signup form with name, email, label connections and required fields.
Checking saved progress…
0712 min
Semantic layout
Use elements that describe page regions
MINI BUILDBuild a semantic article page using header, nav, main, article, aside and footer where appropriate.
Checking saved progress…
0811 min
Metadata & sharing
Describe the page outside the viewport
MINI BUILDAdd charset, viewport, title and a concise description to your page.
Checking saved progress…
0913 min
Accessibility basics
Make structure usable without a mouse or perfect vision
MINI BUILDAudit one page and replace at least two generic interactive elements with native HTML controls.
Checking saved progress…
1015 min
Compose a complete page
Combine semantics into one useful document
MINI BUILDBuild a complete one-page product guide with navigation, article structure, list, image, form and footer.
Checking saved progress…
FINAL BOSS
Checking your lesson progress…Accessible Product Guide Boss
Turn semantic HTML into a complete, navigable document.
JOURNEY + BOSS LIVE
HTML has a complete guided arc.
The journey includes 10 sequenced lessons, local mastery and a final project that checks whether the major ideas were combined.
Begin HTML →