Skip to main content
← 📄 HTML & the platform·Module A8 · Lesson 7
TaskBuild the ship-ready landing page combining EVERYTHING. <head>: full SEO+OG+Twitter+JSON-LD Organization+hreflang en+x-default+preconnect+preload hero font+preload hero image with fetchpriority='high'. <body>: skip link + header (h1 + primary nav labeled) + main (h2 + form with labeled email input + submit) + aside (h2 + ul) + footer (footer nav labeled + p copyright). Image: src='/hero.webp' alt='Hero' width='1200' height='630' fetchpriority='high'. Below-fold img: src='/screenshot.jpg' alt='Product screenshot' width='800' height='600' loading='lazy'. Script /app.js with defer.

Capstone 7: the full ship-ready document

300 XP20 min
Theory

The final test

Build a single HTML document that's READY to deploy as a real product landing page. It MUST satisfy every A1-A7 concept simultaneously:

A1: doctype, lang, charset, viewport, title, meta description.

A2: semantic structure — header + main + footer + aside + nav.

A3: at least one form with proper labels.

A4: images with width/height/alt.

A5: skip link + ARIA + visible focus.

A6: canonical + OG 5-tag set + Twitter + JSON-LD Organization + hreflang.

A7: defer scripts + preload + lazy below-fold + fetchpriority.

If you can build this from memory, you've mastered the HTML track. CSS and JavaScript tracks pick up from here.

🔒

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.

Sign up — free trial →

First 15 lessons in each track are free. No card needed for those.

← Previous✓ Module complete

Get one Python or web tip a day — by email

Short, hand-written, no spam. Unsubscribe in one click.