Ad – 728×90
🛠️ Projects

HTML Landing Page Project – Product Landing Page Tutorial

A product landing page is one of the most common web pages you will build professionally. This project builds "LearnPro" — an imaginary online learning platform — with all the sections a real marketing page needs: sticky navigation, hero, features, how it works, pricing, testimonials, CTA, and footer.

⏱️ 35 min read🎯 Beginner📅 Updated 2026

What We Build

The LearnPro landing page includes:

  • Sticky navigation with anchor links for smooth scrolling
  • Hero section with headline, subheading, and two CTA buttons
  • Features section — 3 cards using a description list (<dl>)
  • How it works — 3 numbered steps
  • Pricing table — 3 tiers using an HTML <table>
  • Testimonials — using <blockquote> and <cite>
  • Final CTA banner
  • Footer with <address> and navigation

The nav is a <header> with <nav> inside. CSS will make it sticky; for now we focus on the correct HTML structure. Each link uses an in-page anchor (#features, etc.) for smooth scrolling (CSS scroll-behavior: smooth handles the animation).

HTML
<header class="lp-header">
  <a href="#hero" class="brand">
    <img src="images/learnpro-logo.svg" alt="LearnPro">
  </a>
  <nav aria-label="Page sections">
    <ul>
      <li><a href="#features">Features</a></li>
      <li><a href="#how-it-works">How It Works</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#testimonials">Reviews</a></li>
    </ul>
  </nav>
  <a href="#pricing" class="btn-nav-cta">Start free trial</a>
</header>

Hero Section

HTML
<section id="hero" aria-label="Hero">
  <div class="hero-content">
    <h1>Learn to Code at Your Own Pace — and Actually Get Hired</h1>
    <p>
      LearnPro gives you structured courses, live mentoring, and a portfolio
      review — everything you need to land your first dev job in under 6 months.
    </p>
    <div class="hero-actions">
      <a href="#pricing">Start free 14-day trial</a>
      <a href="#how-it-works">See how it works</a>
    </div>
    <p class="hero-social-proof">
      Trusted by <strong>12,000+</strong> learners · No credit card required
    </p>
  </div>
  <figure>
    <img src="images/hero-dashboard.png"
         alt="Screenshot of LearnPro dashboard showing a student's progress through the HTML course with 7 of 12 lessons complete"
         width="600" height="400">
    <figcaption>The LearnPro learning dashboard</figcaption>
  </figure>
</section>

Features Section Using dl

A description list (<dl>) is the correct semantic element for name/value pairs — including feature names and their descriptions.

HTML
<section id="features" aria-labelledby="features-heading">
  <h2 id="features-heading">Everything You Need to Succeed</h2>
  <p>LearnPro isn't just video tutorials — it's a complete learning system.</p>

  <dl class="features-grid">
    <div class="feature-card">
      <dt>
        <img src="icons/courses.svg" alt="" aria-hidden="true">
        Structured Courses
      </dt>
      <dd>
        200+ hours of video content across 12 courses, from HTML basics to
        full-stack React. Every course has projects, quizzes, and code challenges.
      </dd>
    </div>

    <div class="feature-card">
      <dt>
        <img src="icons/mentor.svg" alt="" aria-hidden="true">
        Live Mentoring
      </dt>
      <dd>
        Book 1-on-1 video sessions with senior developers. Ask questions,
        get your code reviewed, and build real-world confidence.
      </dd>
    </div>

    <div class="feature-card">
      <dt>
        <img src="icons/portfolio.svg" alt="" aria-hidden="true">
        Portfolio Review
      </dt>
      <dd>
        Our career team reviews your GitHub portfolio and gives written feedback
        before you start job applications — so you put your best foot forward.
      </dd>
    </div>
  </dl>
</section>

How It Works – Ordered Steps

HTML
<section id="how-it-works" aria-labelledby="hiw-heading">
  <h2 id="hiw-heading">How LearnPro Works</h2>

  <ol class="steps">
    <li>
      <h3>Choose your learning path</h3>
      <p>
        Pick from Front-End, Back-End, or Full-Stack. Our placement quiz
        recommends the right starting point based on your experience.
      </p>
    </li>
    <li>
      <h3>Learn with structured projects</h3>
      <p>
        Every lesson ends with a real mini-project you add to your portfolio.
        No passive watching — you build while you learn.
      </p>
    </li>
    <li>
      <h3>Land your first developer job</h3>
      <p>
        When you complete your path, our career team helps with CV review,
        mock interviews, and introductions to hiring partners.
      </p>
    </li>
  </ol>
</section>

Pricing Table

A pricing comparison is genuine tabular data — three tiers across multiple comparable features. Use a proper <table> with scope="col" headers.

HTML
<section id="pricing" aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Simple, Transparent Pricing</h2>
  <p>All plans include a 14-day free trial. No credit card required.</p>

  <table>
    <caption>LearnPro pricing plans comparison</caption>
    <thead>
      <tr>
        <th scope="col">Feature</th>
        <th scope="col">Starter — £9/mo</th>
        <th scope="col">Pro — £19/mo</th>
        <th scope="col">Team — £49/mo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Courses included</th>
        <td>3 courses</td>
        <td>All 12 courses</td>
        <td>All 12 courses</td>
      </tr>
      <tr>
        <th scope="row">Live mentoring sessions</th>
        <td>—</td>
        <td>2 per month</td>
        <td>Unlimited</td>
      </tr>
      <tr>
        <th scope="row">Portfolio review</th>
        <td>—</td>
        <td>Yes</td>
        <td>Yes (priority)</td>
      </tr>
      <tr>
        <th scope="row">Career support</th>
        <td>—</td>
        <td>—</td>
        <td>Dedicated career coach</td>
      </tr>
      <tr>
        <th scope="row">Team seats</th>
        <td>1</td>
        <td>1</td>
        <td>Up to 10</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td><a href="/signup?plan=starter">Start free trial</a></td>
        <td><a href="/signup?plan=pro">Start free trial</a></td>
        <td><a href="/signup?plan=team">Start free trial</a></td>
      </tr>
    </tfoot>
  </table>
</section>

Testimonials with blockquote

Customer quotes are classic use-cases for <blockquote>. Always include a <cite> element for attribution. In HTML5, <cite> refers to a work or a person, not spoken words — best wrapped in a <footer> inside the blockquote.

HTML
<section id="testimonials" aria-labelledby="testimonials-heading">
  <h2 id="testimonials-heading">What Our Learners Say</h2>

  <figure>
    <blockquote>
      <p>
        "I went from zero coding knowledge to landing a junior front-end role
        in 5 months. The mentoring sessions were the turning point — having
        someone review my actual code made all the difference."
      </p>
    </blockquote>
    <figcaption>
      <cite>Priya Sharma</cite> —
      Junior Front-End Developer at Monzo, joined LearnPro January 2026
    </figcaption>
  </figure>

  <figure>
    <blockquote>
      <p>
        "I'd tried other coding platforms but kept giving up. LearnPro's
        project-based approach kept me engaged. The portfolio review alone
        was worth the subscription price."
      </p>
    </blockquote>
    <figcaption>
      <cite>Marcus Webb</cite> —
      Career-changer from marketing to full-stack development, joined March 2026
    </figcaption>
  </figure>

  <figure>
    <blockquote>
      <p>
        "I enrolled my entire team of 6 on the Team plan. Within two months,
        everyone was contributing to our company's front-end codebase.
        Incredible ROI."
      </p>
    </blockquote>
    <figcaption>
      <cite>Ayesha Okonkwo</cite> —
      CTO at DevStart, enrolled April 2026
    </figcaption>
  </figure>
</section>
HTML
<!-- Final CTA Banner -->
<section id="cta" aria-label="Final call to action">
  <h2>Ready to Start Your Coding Journey?</h2>
  <p>Join 12,000+ learners. Start your free 14-day trial today — no credit card needed.</p>
  <a href="/signup">Create your free account</a>
</section>

<!-- Footer with address element -->
<footer>
  <div class="footer-grid">
    <div>
      <h3>LearnPro</h3>
      <address>
        LearnPro Ltd<br>
        42 Code Street<br>
        London, EC1A 1AA<br>
        United Kingdom<br>
        <a href="mailto:hello@learnpro.io">hello@learnpro.io</a>
      </address>
    </div>

    <nav aria-label="Product links">
      <h3>Product</h3>
      <ul>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="/courses">All Courses</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>

    <nav aria-label="Company links">
      <h3>Company</h3>
      <ul>
        <li><a href="/about">About</a></li>
        <li><a href="/careers">Careers</a></li>
        <li><a href="/press">Press</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>

    <nav aria-label="Legal links">
      <h3>Legal</h3>
      <ul>
        <li><a href="/privacy">Privacy Policy</a></li>
        <li><a href="/terms">Terms of Service</a></li>
        <li><a href="/cookies">Cookie Policy</a></li>
      </ul>
    </nav>
  </div>
  <p class="copyright">&copy; 2026 LearnPro Ltd. All rights reserved.</p>
</footer>
Ad – 336×280

📋 Summary

  • Use <header> with <nav> for the sticky navigation; anchor links (href="#section-id") enable smooth in-page scrolling.
  • A description list (<dl>) is the semantic choice for feature name/description pairs.
  • An ordered list (<ol>) with nested <h3> elements communicates numbered steps.
  • Pricing comparisons are genuine tabular data — use <table> with scope="col" and scope="row" headers.
  • Wrap testimonials in <blockquote> inside a <figure>, with attribution in <figcaption> and <cite>.
  • Use <address> in the footer for company contact information.
  • Multiple <nav> elements are fine — give each a distinct aria-label so screen reader users can distinguish them.
Portfolio Project Registration Form Accessibility Meta Tags & SEO

FAQ

When should I use a table vs a div-based grid for pricing?

Use a <table> whenever the data is genuinely tabular — meaning rows and columns have meaningful header relationships. A pricing comparison table where you compare features across plans is classic tabular data. A purely visual card layout where the "cells" are not semantically related (e.g. three independent marketing cards) is better built with CSS Grid or Flexbox on divs. The test: would removing a column/row from the markup break the meaning? If yes, it is a table.

What is the address element for?

The <address> element marks up contact information for the nearest ancestor <article> or the whole <body> if placed outside an article. It is not for arbitrary postal addresses — it is for the contact information of the document's author or the organisation. Correct uses: company address in a footer, author email in a blog post header. Do not use it for customer shipping addresses in an e-commerce site — a plain <p> or <div> is more appropriate there.

How do I add smooth scrolling to anchor links?

Add one CSS rule: html { scroll-behavior: smooth; }. That is all — no JavaScript required. When a user clicks an anchor link like <a href="#pricing">, the browser smoothly scrolls to the element with id="pricing". Respect the user's preference for reduced motion by wrapping this in a media query: @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }.

Ad – 728×90