Project: A Complete Page Layout

The brief

Build a complete, responsive landing-page layout using what you have learned. No new properties — just assembly.

The structure

Below is a full landing page in one block: a navbar, a hero banner, a row of cards and a footer. Nothing here is new — it is the box model, Flexbox and Grid you already know, put together. Read the whole thing, then the breakdown underneath names which tool does which job.

<style>
  * { box-sizing: border-box; margin: 0; }
  body { font-family: sans-serif; color:#1f2333; }
  .nav { display:flex; justify-content:space-between; align-items:center;
         background:#4338ca; color:#fff; padding:14px 22px; }
  .nav a { color:#fff; text-decoration:none; margin-left:18px; }
  .hero { text-align:center; padding:50px 20px; background:#eef2ff; }
  .hero h1 { font-size:36px; color:#4338ca; }
  .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
           gap:16px; padding:30px; max-width:900px; margin:0 auto; }
  .card { border:1px solid #e6e8f0; border-radius:12px; padding:20px; }
  footer { background:#1f2333; color:#fff; text-align:center; padding:20px; }
</style>

<nav class="nav"><b>CodingClave</b><div><a href="#">Home</a><a href="#">Courses</a><a href="#">Contact</a></div></nav>
<section class="hero"><h1>Learn to Code</h1><p>Job-ready web development training.</p></section>
<section class="cards">
  <div class="card"><h3>HTML</h3><p>Structure.</p></div>
  <div class="card"><h3>CSS</h3><p>Style.</p></div>
  <div class="card"><h3>JavaScript</h3><p>Behaviour.</p></div>
</section>
<footer>&copy; 2026 CodingClave</footer>

No new properties here — this is everything you have learned, assembled top to bottom:

• * { box-sizing: border-box; margin: 0; } — the global reset so widths are predictable and there is no surprise default spacing.
• .nav — a flexbox row with justify-content: space-between to push the logo left and the links right.
• .hero — a centred banner using text-align: center and generous padding on a soft background.
• .cards — a responsive grid using the repeat(auto-fit, minmax(...)) trick, capped with max-width and centred with margin: 0 auto.
• .card and footer — the box model (border, radius, padding) plus colours to finish the look.

That is the real-world pattern: flexbox for rows (the navbar), grid for 2-D sections (the cards), and the box model for spacing everywhere. Change the colours and text and you have your own landing page.