Lesson 6: Final Project

No new concepts this time — this lesson is about combining everything from the last five lessons into one real, finished page: semantic structure, the box model, Flexbox, and Grid, all working together.

What you're building

A simple one-page site for a fictional small business: a sticky navigation bar, a hero section, a 3-column features section, and a footer. This exact structure — nav, hero, features, footer — is one of the most common patterns on the web, so it's worth building it once by hand.

Structure the skeleton

Start with semantic tags: <header> for your nav, <main> wrapping a hero <section> and a features <section>, and <footer> at the end.

Build the nav with Flexbox

display: flex; justify-content: space-between; align-items: center; on the header — logo on the left, links on the right, all vertically centered.

Center the hero content

Give the hero display: flex; flex-direction: column; align-items: center; text-align: center; with generous padding, so the heading and button sit centered with breathing room.

Grid the features section

display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; — three feature cards that automatically reflow on smaller screens.

Apply box-sizing everywhere

Add * { box-sizing: border-box; } at the top of your stylesheet so every width and padding behaves predictably.

Constrain and center the page

Wrap your content sections in a container with max-width: 1000px; margin: 0 auto; so the layout doesn't stretch uncomfortably wide on large screens.

<header class="nav">
  <div class="logo">YourBrand</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">Features</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>Build something great</h1>
    <p>A one-line pitch for your product goes here.</p>
    <button>Get started</button>
  </section>

  <section class="features">
    <div class="card"><h3>Fast</h3><p>...</p></div>
    <div class="card"><h3>Simple</h3><p>...</p></div>
    <div class="card"><h3>Reliable</h3><p>...</p></div>
  </section>
</main>

<footer>© 2026 YourBrand</footer>

* { box-sizing: border-box; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.card {
  padding: 24px;
  border-radius: 8px;
}

Try it yourself

the project

Build this page start to finish in your own index.html and <style> block. Don't just copy-paste the code above — type it out, and make it your own: change the colors, the copy, the fonts. Resize your browser at every step to confirm the nav, hero, and grid all stay responsive.

Where to go from here

You've now built real structure, styled it, understood exactly how sizing works, and laid out a page two different ways. That's genuinely the foundation every web developer builds on — from here, JavaScript is what turns this static page into something interactive, which is exactly where the JavaScript Basics course picks up.