Skip to main content
Donate
All projects
Web project

Landing page for a cause

A landing page has one job: explain an idea quickly and ask people to act. You'll build a page for a made-up neighbourhood tree-planting club (or any cause you choose), with a welcoming header, three short reasons to care and a clear call to action.

Skills you'll practise

  • Semantic HTML
  • Flexbox
  • Media queries
  • Colour and type
Open starter in playgroundSee the steps

Steps

  1. Step 1: Sketch the sections

    Use <header>, <main> with a few <section> elements, and a <footer>, so the page has a clear structure before any styling.

    Show a hint

    Semantic tags help screen readers and search engines understand the page, and they look the same as a <div> until you style them.

  2. Step 2: Write a strong headline

    Give the header a short headline, one sentence explaining the cause, and a button-style link.

  3. Step 3: Add three reasons

    Make a section with three small blocks, each with a heading and one or two sentences.

  4. Step 4: Lay the reasons out side by side

    Use flexbox so the three blocks sit in a row on wide screens and stack on narrow ones.

    Show a hint

    display: flex; flex-wrap: wrap; gap: 16px; on the parent, and flex: 1 1 220px; on each block.

  5. Step 5: Finish with a call to action

    End with a section that repeats the main ask, and a small footer. Check it at phone width.

    Show a hint

    A media query like @media (max-width: 600px) { ... } can shrink the headline on small screens.

Starter code

It already shows something on the page. The TODO comments mark where to start.

Open in playground
index.html
<header class="hero">
  <h1>Green Streets Club</h1>
  <p>TODO: one sentence about your cause.</p>
  <a class="button" href="#join">Join us</a>
</header>

<main>
  <!-- TODO: a section with three reasons, then a call to action with id="join" -->
</main>

<footer>
  <p>Made by a student who cares.</p>
</footer>
style.css
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #fcf4e8;
  color: #15120c;
}

.hero {
  padding: 48px 16px;
  text-align: center;
  /* TODO: give the header a background colour */
}

.button {
  /* TODO: make this link look like a button */
}

Example solution

One way to finish it. Have a go first; yours doesn't need to match.

Reveal the solution
index.html
<header class="hero">
  <h1>Green Streets Club</h1>
  <p>We plant and care for trees on the streets around our school, one weekend at a time.</p>
  <a class="button" href="#join">Join us</a>
</header>

<main>
  <section class="reasons" aria-labelledby="why">
    <h2 id="why">Why trees?</h2>
    <div class="reason-list">
      <article class="reason">
        <h3>Shade</h3>
        <p>Trees cool the pavement on hot days and make walking to school more pleasant.</p>
      </article>
      <article class="reason">
        <h3>Wildlife</h3>
        <p>Birds and insects use street trees for food and shelter.</p>
      </article>
      <article class="reason">
        <h3>Community</h3>
        <p>Planting days are a simple way to meet neighbours and do something together.</p>
      </article>
    </div>
  </section>

  <section id="join" class="cta">
    <h2>Come to our next planting day</h2>
    <p>No experience needed. Bring gloves and a friend.</p>
    <a class="button" href="#">Sign up</a>
  </section>
</main>

<footer>
  <p>Made by a student who cares.</p>
</footer>
style.css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background: #fcf4e8;
  color: #15120c;
}

.hero {
  padding: 64px 16px;
  text-align: center;
  background: #dbefdb;
}

.hero h1 {
  margin: 0 0 12px;
  font-size: 44px;
  color: #1e3c2c;
}

.hero p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: #4f483d;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: #1e3c2c;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  background: #3e7f5c;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 16px;
}

h2 {
  margin-top: 0;
  color: #1e3c2c;
}

.reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.reason {
  flex: 1 1 220px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  border-top: 4px solid #3e7f5c;
}

.reason h3 {
  margin: 0 0 6px;
}

.reason p {
  margin: 0;
  color: #4f483d;
}

.cta {
  margin-top: 48px;
  padding: 32px 20px;
  text-align: center;
  background: #ffffff;
  border-radius: 12px;
}

footer {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #6b6255;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 32px;
  }
}
Open solution in playground

Stretch goal

Add a simple sign-up form in the call-to-action section with a labelled name field, an email field and a submit button, styled to match.

Chapters that help