Project 2: Landing Section

Relax. We'll talk through this in plain words — no textbook voice.

Project 2 — Landing Section. We'll build a hero section for a product or service page. Since it's the very first thing a visitor sees on a real website, the heading, value proposition, and CTA link all need to be crystal clear.

Requirement: it needs a header, nav, hero heading, short description, primary CTA, and feature list. Before you worry about making it "look nice," use the HTML to make it clear "what exactly are you selling or explaining."

html

<header>
  <nav aria-label="Main navigation">
    <a href="#features">Features</a>
    <a href="#pricing">Pricing</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>Build AI-powered workflows faster</h1>
    <p>Create, automate, and manage your content workflow from one simple dashboard.</p>
    <a href="#start">Start building</a>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    <ul>
      <li>AI writing assistant</li>
      <li>Automation workflow builder</li>
      <li>Project dashboard</li>
    </ul>
  </section>
</main>

You should see

You'll end up with a basic structure for a landing page's hero and feature section.