Building a Landing Page

Put everything together: hero, features, and a call-to-action section.

0 / 31 lessons completed0%

YouTube video lessonYouTube

Lesson Content

This is where everything comes together. A landing page is a single-purpose webpage designed to convert visitors — to sign up, buy, or learn more. It's the most common project in web design.

The anatomy of a landing page:

1. Navigation — logo + links + CTA button 2. Hero section — headline, subheadline, primary CTA, supporting visual 3. Social proof — logos, stats, or testimonials 4. Features/Benefits — what makes this valuable 5. Secondary CTA — a final push to convert

The Hero Section is the most important part. It must answer three questions in under 5 seconds: What is this? Who is it for? What should I do next?

Writing the headline: Be specific and benefit-focused. "Learn web design in 30 days" beats "Welcome to our platform".

The CTA button: Use action verbs. "Start Learning Free" beats "Submit". Make it visually prominent — high contrast, generous padding.

Layout approach: Use CSS Grid for the features section. Use Flexbox for the navigation and hero content alignment.

code example

<!-- Landing page structure -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Landing Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <nav class="navbar">
    <div class="logo">MyBrand</div>
    <ul class="nav-links">
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
    <a href="#signup" class="btn-primary">Get Started</a>
  </nav>

  <section class="hero">
    <h1>Build beautiful websites,&lt;br/&gt;faster than ever.</h1>
    <p>The all-in-one toolkit for modern web designers.</p>
    <a href="#signup" class="btn-primary btn-large">
      Start for Free →
    </a>
  </section>

  <section class="features" id="features">
    <div class="features-grid">
      <div class="feature-card">
        <h3>Fast Setup</h3>
        <p>Go from zero to live in minutes.</p>
      </div>
      <!-- more cards -->
    </div>
  </section>

</body>
</html>

Finished this lesson?

Mark it complete to track your progress through the course.

The Color Wheel

Learning Objectives

1Structure a complete landing page with semantic HTML
2Build a hero section with headline and CTA button
3Create a features section using CSS Grid
4Add a call-to-action section at the bottom

Your Progress0%

0 of 31 lessons done

All Lessons