How is a landing page different from a normal web page?

A normal page might do many things and link off in lots of directions. A landing page is deliberately focused: it has one goal — sign up, download, buy, register — and everything on the page supports that single action, usually with minimal distracting links. People often arrive on a landing page from an advert or a shared link.

Do I need JavaScript to build one?

No. A great landing page can be pure HTML and CSS. JavaScript is only needed when you want interactivity, like a form that validates input or a menu that opens. Build the structure and style first; add behaviour later if the page needs it.

Building a Landing Page from Scratch | Coding

What is a landing page?

A landing page is a single web page with one job: to persuade a visitor to take one specific action. That action might be signing up for a newsletter, downloading an app, or buying a product. Because the goal is focused, the design is focused too — there are usually few distracting links, one clear message, and one obvious button.

In this lesson you will build a complete, responsive landing page from scratch using HTML and CSS. It pulls together skills from Semantic HTML Elements for structure and CSS Flexbox Basics for layout. By the end you will have a real page you can adapt for any project.

The anatomy of a landing page

Almost every landing page is built from the same four sections, top to bottom:

Section	Purpose
Hero	Big headline, one sentence of value, and the main button
Features	A few cards explaining the benefits
Call-to-action (CTA)	A final nudge to act, repeating the button
Footer	Copyright and small links

We will build each in turn, then assemble them into one runnable file.

Step 1: the skeleton

Start with a semantic structure. The whole page lives inside <main>, with each region as a <section>:

<main>
  <section class="hero"> ... </section>
  <section class="features"> ... </section>
  <section class="cta"> ... </section>
</main>
<footer> ... </footer>

Using real semantic tags rather than a pile of <div>s makes the page easier to read, more accessible, and better for search engines.

Step 2: the hero

The hero is the first thing visitors see, so it carries the most important words. It needs a strong headline, a short supporting line, and a prominent call-to-action button:

<section class="hero">
  <h1>Learn to Code, One Lesson at a Time</h1>
  <p>Friendly, hands-on lessons that take you from zero to confident.</p>
  <a class="button" href="#signup">Start learning free</a>
</section>

Notice the button is just a styled <a> link. Keep the headline short and benefit-focused: tell the visitor what they get, not what you do.

Step 3: feature cards with Flexbox

Below the hero, three cards explain the benefits. A flex container lays them out in an even row that wraps onto separate lines on small screens:

<section class="features">
  <article class="card">
    <h2>📚 Clear lessons</h2>
    <p>Every topic explained simply, with worked examples.</p>
  </article>
  <article class="card">
    <h2>🎯 Practice quizzes</h2>
    <p>Check your understanding and earn XP as you go.</p>
  </article>
  <article class="card">
    <h2>🚀 Real projects</h2>
    <p>Build things you can actually use and share.</p>
  </article>
</section>

.features { display: flex; gap: 24px; flex-wrap: wrap; }
.card { flex: 1; min-width: 220px; }

flex: 1 makes the cards share the width equally; flex-wrap: wrap and min-width let them stack on a narrow phone instead of squashing.

Step 4: the closing call-to-action

Repeat the invitation near the bottom, after the visitor has read the benefits. This catches people who scrolled past the first button:

<section class="cta" id="signup">
  <h2>Ready to start?</h2>
  <a class="button" href="#">Create your free account</a>
</section>

A complete worked example

Save this as landing.html and open it in your browser. It is the full page — hero, features, CTA and footer — styled and responsive.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CodeStart — Learn to Code</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; margin: 0; line-height: 1.6; color: #1e293b; }

    .button {
      display: inline-block;
      background: #2563eb; color: white;
      padding: 14px 28px; border-radius: 8px;
      text-decoration: none; font-weight: 600;
    }
    .button:hover { background: #1d4ed8; }

    .hero {
      text-align: center; padding: 80px 24px;
      background: linear-gradient(135deg, #dbeafe, #ede9fe);
    }
    .hero h1 { font-size: 2.5rem; margin: 0 0 12px; }
    .hero p  { font-size: 1.2rem; color: #475569; margin: 0 0 28px; }

    .features {
      display: flex; gap: 24px; flex-wrap: wrap;
      max-width: 960px; margin: 0 auto; padding: 64px 24px;
    }
    .card {
      flex: 1; min-width: 220px;
      background: #f8fafc; border: 1px solid #e2e8f0;
      border-radius: 12px; padding: 24px;
    }
    .card h2 { margin-top: 0; }

    .cta {
      text-align: center; padding: 64px 24px;
      background: #0f172a; color: white;
    }

    footer {
      text-align: center; padding: 24px;
      background: #1e293b; color: #94a3b8; font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <h1>Learn to Code, One Lesson at a Time</h1>
      <p>Friendly, hands-on lessons that take you from zero to confident.</p>
      <a class="button" href="#signup">Start learning free</a>
    </section>

    <section class="features">
      <article class="card">
        <h2>📚 Clear lessons</h2>
        <p>Every topic explained simply, with worked examples you can run.</p>
      </article>
      <article class="card">
        <h2>🎯 Practice quizzes</h2>
        <p>Check your understanding and earn XP as you go.</p>
      </article>
      <article class="card">
        <h2>🚀 Real projects</h2>
        <p>Build things you can actually use and share with friends.</p>
      </article>
    </section>

    <section class="cta" id="signup">
      <h2>Ready to start?</h2>
      <p>Join thousands of learners building real skills.</p>
      <a class="button" href="#">Create your free account</a>
    </section>
  </main>

  <footer>
    <p>© 2026 CodeStart · Built with HTML and CSS</p>
  </footer>
</body>
</html>

Reading the result: the hero uses a soft gradient background and centres a bold headline with the main button. The .features flex row holds three equal cards that wrap on small screens. The dark .cta section repeats the call-to-action, and the footer closes the page. The box-sizing: border-box rule and max-width keep everything tidy at any screen size, so it already works on a phone.

Try it yourself

Make it yours. Change the headline, the three card titles and the button text to advertise something you care about — a club, a game, a band.
Add a fourth card. Copy one <article class="card"> block. Watch Flexbox automatically re-share the width across four cards.
Tune the colours. Swap the hero gradient and button colour. Try matching them to a brand you like, using hex codes from CSS Colours and Fonts.

Challenge: Add a sticky navigation bar at the very top, above the hero, containing a logo on the left and two links on the right, laid out with Flexbox (justify-content: space-between). Make one link jump down to the #signup section. Then test the whole page on a phone-sized window and adjust any spacing that feels cramped.

Building a Landing Page from Scratch

Key takeaways