The real project starts: Bright Leaf Coffee's actual homepage
Every part so far covered one piece in isolation. This part combines all of them into one real, complete file — Bright Leaf Coffee's actual homepage, index.html, the foundation every later part in this series adds to directly.
The complete homepage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bright Leaf Coffee — Small-batch, roasted weekly</title>
</head>
<body>
<header>
<img src="/images/logo.svg" alt="Bright Leaf Coffee" width="140" height="40" />
<nav>
<a href="/">Home</a>
<a href="/subscriptions">Subscriptions</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<section>
<h1>Small-batch coffee, roasted weekly</h1>
<p>
Every bag ships within 24 hours of roasting — not from a
warehouse, from the roaster.
</p>
<a href="/subscriptions">See our subscriptions</a>
</section>
<section>
<h2>Our Subscriptions</h2>
<article>
<img
src="/images/gift-box-400.jpg"
alt="Bright Leaf Coffee gift box with a 12oz bag and a handwritten note"
width="400"
height="300"
/>
<h3>Gift Subscription</h3>
<p>One bag a month, with a handwritten note on the first shipment.</p>
</article>
<article>
<img
src="/images/ethiopian-light-roast-400.jpg"
alt="A bag of Ethiopian Light Roast coffee beans"
width="400"
height="300"
/>
<h3>Ethiopian Light Roast</h3>
<p>Notable blueberry and floral tones — this month's roaster's pick.</p>
</article>
</section>
<aside>
<h2>Roaster's Note</h2>
<p>This week's Ethiopian batch has notable blueberry and floral tones.</p>
</aside>
<section>
<h2>What people ask before subscribing</h2>
<dl>
<dt>How fresh is "fresh"?</dt>
<dd>Every bag ships within 24 hours of roasting.</dd>
<dt>Can I change my roast each month?</dt>
<dd>Yes — swap your selection anytime before the next billing cycle.</dd>
</dl>
</section>
</main>
<footer>
<nav>
<a href="/privacy">Privacy</a>
<a href="/contact">Contact</a>
</nav>
<p>© 2026 Bright Leaf Coffee</p>
</footer>
</body>
</html>Why every choice above maps back to an earlier part
<!DOCTYPE html>, lang="en" → part 2, the document skeleton
One real <h1>, correct <h2>/<h3> → part 3, headings as a real outline
<dl>/<dt>/<dd> for the real FAQ → part 4, description lists
Relative hrefs throughout → part 5, links and navigation
alt text + width/height on images → part 6, images done correctly
header/nav/main/section/article/
aside/footer → part 7, semantic layoutNothing in this file is new — it's a direct, real application of seven parts' worth of individual concepts, combined the way an actual production page combines them. This is also the honest reason this series builds one real project instead of disconnected examples: a subscription card in isolation doesn't reveal that it needs to be an <article> nested inside a <section>, nested inside <main> — that only becomes clear once real content is assembled into a real, complete page.
Notice there's still no CSS anywhere in this file, and the page is already fully readable, navigable, and correctly structured without it — every heading is in the right place, every link works, every image has real alt text. This is deliberate: getting the HTML right first, entirely independent of how it will eventually look, is what keeps a real site's markup genuinely semantic instead of styling-driven <div> soup with classes bolted on to fake structure CSS can't actually provide.
What's still missing from a real, production-ready page
This homepage is structurally complete but not yet SEO-ready — the <head> only has a title, with no meta description, no Open Graph tags, no structured data. That's deliberate: those additions are substantial enough to deserve their own parts (14 through 16), once the real page they're describing already exists to describe accurately.
Next: tables — real tabular data, using a genuine comparison table for Bright Leaf Coffee's subscription plans as the example.