Lesson 9 · about 45 minutes

🏗️ The Big Build: Your Landing Page

Today you put EVERYTHING from lessons 1–8 together into one real landing page for your product. Walls, paint, AND electricity — the whole house, built by you.

🎬 Watch first (90 seconds)

The secret skeleton of every landing page

Here is something wild: almost every landing page on the internet — for games, sneakers, apps, everything — has the SAME skeleton. Once you see it, you can never unsee it:

+--------------------------------------+
|              HERO 🦸                 |
|   BIG HEADLINE (your product name)   |
|   one sentence: why it's awesome     |
|          [ Buy button ]              |
+--------------------------------------+
|             FEATURES ⭐              |
|  +--------+ +--------+ +--------+    |
|  | card 1 | | card 2 | | card 3 |    |
|  +--------+ +--------+ +--------+    |
+--------------------------------------+
|              FOOTER 🦶               |
|      tiny print · a small link       |
+--------------------------------------+
💡 The one idea of this lesson Landing pages are LEGO sets that all use the same instructions: Hero → Features → Footer. When an AI generates a landing page for you (next lesson!), it builds THIS exact skeleton. Because you built it with your own hands today, you'll be able to read the AI's code, spot its pieces, and change anything you want. That's the whole point of this course.

Level-up: tags with real names

So far we mostly used <div> — a plain cardboard box with no label. HTML also has boxes with names printed on them:

They work exactly like <div> boxes — same behavior, same styling. The only difference is the label. Humans can read the structure faster, and AIs love them: AI-generated code is FULL of these tags. Today you start using them like a pro.

🛠️ Build it (the BIG one)

🧪 Your mission Build the complete landing page for YOUR product: hero + 3 feature cards + footer, with style and a working button. Take your time — this is the boss level before the final boss.
  1. In the practice folder, create a new file called landing.html. (Making files — Lesson 1!)
  2. Type the full skeleton, with YOUR product name in the title (Lesson 2!): 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Robo Sneakers</title>
</head>
<body>

</body>
</html>
  3. Inside <body>, build the hero. Headlines and paragraphs — Lesson 1! 
    <header class="hero">
  <h1>Robo Sneakers</h1>
  <p>The first shoes in the world that tie themselves.</p>
  <button id="buy">Buy now 🚀</button>
</header>
  4. Under the header, add <main> with a features section holding a row of three cards (boxes inside boxes — Lesson 6!): 
    <main>
  <section class="features">
    <div class="row">
      <div class="card">
        <h3>⚡ Fast</h3>
        <p>Ties itself in one second.</p>
      </div>
      <div class="card">
        <h3>🔋 Long battery</h3>
        <p>Runs for a whole month.</p>
      </div>
      <div class="card">
        <h3>🌈 Cool colors</h3>
        <p>Lights up when you jump.</p>
      </div>
    </div>
  </section>
</main>
    Write your OWN three features — what makes your product amazing?
  5. Under </main>, add the footer with small print and a link (links — Lesson 4!): 
    <footer>
  <p>© 2026 Robo Sneakers. Made by a real web developer (you).</p>
  <a href="about.html">About us</a>
</footer>
  6. Save and look! Double-click landing.html. Everything is there... but it's a house with no paint. Time for CSS.
  7. In the <head>, add a <style> block and paint the basics (fonts and colors — Lesson 5!): 
    <style>
  body {
    font-family: sans-serif;
    margin: 0;
  }
  .hero {
    text-align: center;
    background-color: gold;
    padding: 60px;
  }
</style>
  8. Now the star move: put the cards in a row and dress them up (flex row — Lesson 7!, padding and border-radius — Lesson 6!). Add this inside the same <style> block: 
      .row {
    display: flex;
    gap: 20px;
    justify-content: center;
  }
  .card {
    padding: 20px;
    border-radius: 12px;
    background-color: lavender;
  }
  footer {
    text-align: center;
    font-size: 14px;
    color: gray;
    padding: 20px;
  }
    Save and refresh — WHOA. Three cards, side by side, like a real website.
  9. Electricity time! ⚡ Just before </body>, wire up the buy button (clicks and messages — Lesson 8!): 
    <p id="message"></p>

<script>
  var buyButton = document.getElementById("buy");
  buyButton.addEventListener("click", function () {
    document.getElementById("message").textContent =
      "🎉 Order received! Your Robo Sneakers are on the way!";
  });
</script>
    (Move the <p id="message"></p> inside the hero, right under the button, if you want the message to appear there.)
  10. Save. Refresh. Click the button. If a message pops up — you just built a complete landing page from nothing. Walls, paint, electricity. 🏠✨

🕹️ Try it right here — the lesson checks your code!

Build a mini version of the landing page in the box below. One heads-up: for safety, scripts don't run in the preview box (it's a sandbox — a padded playroom). So skip the button wiring here, and test your button in your REAL landing.html instead.

🏆 Finish line checklist

Open your real landing.html in the browser and check each one yourself:

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Structuring documents — the official guide to <header>, <main>, <section>, <footer> and friends. Reading it counts as a lesson block!