Capstone Project

Course 3 · Ch 12 · Final Chapter · Capstone

Capstone — A Multi-Feature Page

Combining web components, canvas, lazy-loaded media, accessibility patterns, and internationalization into one realistic page

This final chapter of the entire HTML series doesn't introduce anything new — it builds one page genuinely combining everything from this Advanced course, on top of everything from Fundamentals and Intermediate before it.

The Page

<!DOCTYPE html>
<html lang="en"> // Advanced Ch11
<head>
  <meta charset="UTF-8"> // must be early — Ch11
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Project Showcase</title>
  <link rel="manifest" href="/manifest.json"> // Ch7
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin> // Ch9
</head>
<body>

  <header>
    <h1>Project Showcase</h1>
  </header>

  <main>
    // Accessible tabs — Ch8's full ARIA pattern with roving tabindex
    <div role="tablist" aria-label="Project views">
      <button role="tab" aria-selected="true" aria-controls="panel-canvas">Live Drawing</button>
      <button role="tab" aria-selected="false" aria-controls="panel-gallery" tabindex="-1">Gallery</button>
    </div>

    <div role="tabpanel" id="panel-canvas">
      // Canvas — Ch2's animation loop
      <canvas id="drawing" width="400" height="200"></canvas>
    </div>

    <div role="tabpanel" id="panel-gallery" hidden>
      // Lazy-loaded images — Ch9, never on the visible-by-default tab
      <img src="project1.jpg" loading="lazy" alt="Screenshot of project 1">
    </div>

    // Web component — Ch1's custom element with shadow DOM and a real slot
    <rating-stars value="4">
      <span slot="label">Reader rating</span>
    </rating-stars>

    // Foreign-language phrase — Ch11's inline lang attribute
    <p>Built with <span lang="fr">savoir-faire</span>.</p>
  </main>

  <script src="app.js" defer></script> // Ch9 — defer, not blocking

</body>
</html>

What Each Decision Connects Back To

Tabs with roving tabindex — Chapter 8's full ARIA pattern, not a native element, since custom panel content (canvas, gallery) genuinely needs this level of control.
Canvas only inside the active tab's panel — no point running an animation loop the user can't see; pairs naturally with starting/stopping the requestAnimationFrame loop based on which tab is active.
loading="lazy" on gallery images — Chapter 9's rule applied correctly: these are in a hidden panel, genuinely not needed until the user switches tabs.
<rating-stars> web component with a named slot — Chapter 1's pattern, letting the page supply its own label text while the component handles the star rendering internally.
defer on the script — Chapter 9, ensures the DOM (including the custom element registration) is ready before app.js runs.

Final Series-Wide Checklist

✅

Valid, semantic document structure throughout

Doctype, lang, semantic landmarks, no div soup where a real element would fit.

Fundamentals Ch1, 8, 9

✅

Every interactive widget is keyboard-operable and correctly announced

Roving tabindex on tabs, real button/label elements, no click-only divs.

Intermediate Ch6, Advanced Ch8

✅

Off-screen/hidden content is lazy-loaded; nothing above-the-fold is delayed

Advanced Ch9

✅

Validated against the W3C validator before considering it done

Fundamentals Ch10

✅

Tested with an actual screen reader, not just automated tools

Advanced Ch8

This is the same lesson the series has returned to repeatedly: meaning before appearance

Every chapter across all three courses, in one way or another, came back to the same underlying idea — choose the element, attribute, or pattern that genuinely describes what something is and what it does, and the browser, search engines, and assistive technology all reward that choice automatically. Appearance is CSS's job; HTML's job, done well, is meaning.

Chapter 12 Quick Reference — and Series Wrap-Up

Course 3 recap: web components in depth (Ch1) → canvas (Ch2) → SVG (Ch3) → drag-and-drop (Ch4) → File API (Ch5) → storage/offline (Ch6) → PWAs (Ch7) → accessibility deep dive (Ch8) → performance (Ch9) → APIs grab-bag (Ch10) → internationalization (Ch11) → capstone (Ch12)
Full HTML series complete: 36 chapters across Fundamentals, Intermediate, and Advanced
The series-wide thread: semantic meaning first — every advanced technique still rests on Fundamentals' core principle
What's next for this content area: the CSS courses (already complete) cover appearance; a JavaScript-focused course would be the natural remaining gap if Philip wants to continue this line further