0%
Illustration of three mountain peaks with flags and a climber on the middle one

Challenge · hard

Build a Landing Page in HTML: Full Page Challenge

About 35 minhard

By HTML6 (opens in a new tab) · Updated · How we write and check content

Goal: Build a whole landing page, from the doctype down to the footer.

Learn

Visitors arrive on a landing page (opens in a new tab) first, and building one uses nearly everything from this course. Begin with a complete document: the doctype, <html lang>, and a head with the character set, the viewport tag and a title that says what the page is.

Split the body into landmarks, the regions listed in the WAI-ARIA landmark regions guide (opens in a new tab). The logo and the main <nav> go in the <header>. One <main> holds the sections. First comes a hero with the page's only <h1> and a call-to-action link, then sections headed by <h2>. Feature cards and other repeated blocks suit <article> elements with <h3> headings. The fine print goes in the <footer> at the bottom.

The short version

  • A complete document has a doctype, lang, charset, viewport and a title that describes the page.
  • The body splits into landmarks: a header, a single main and a footer.
  • The heading outline runs from one <h1> in the hero to <h2> sections and <h3> cards.
  • Repeated cards go in <article>; fine print goes in <small> with &copy;.

Example

<section id="features">
  <h2>Why join?</h2>
  <article>
    <h3>New recipes</h3>
    <p>Try something new every week.</p>
  </article>
</section>

Your task

The Pancake Club wants a landing page. Build it:

  1. Give the html element a lang. In the head, add <meta charset>, the viewport meta tag and a title that is not empty.
  2. Add a <header> holding the logo (logo.svg, with alt text) and a <nav> with a list of 3 or more links.
  3. Add one <main> containing 3 or more <section> elements.
  4. Put exactly one <h1> in the first section, along with a call-to-action link.
  5. Start at least 2 sections with an <h2>.
  6. Add a features section with 3 <article> cards, each headed by an <h3>.
  7. Give every link in main an href.
  8. Close with a <footer> whose copyright line sits in <small> and uses the &copy; entity.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Frequently asked questions

How do I make a landing page with HTML?

Write the full document skeleton first, with a clear <title>. The body gets a <header> with the logo and <nav>, then one <main>. Inside main, put a hero with the only <h1> and a call-to-action link, a features section and a sign-up section. A <footer> closes the page, and CSS handles the styling. Prefer a finished layout to start from? Free minimalist HTML5 templates (opens in a new tab) give you a responsive skeleton to adapt.

Should a call-to-action be a link or a button?

It depends on what it does. If it takes the visitor somewhere (another page, a section such as #join, an email address), use a link. If it does something on the page, such as submitting a form, use a button. CSS can make a link look like a button, and it stays a link.

Tags in this lesson

<article>Self-contained content that makes sense alone, such as a post, card or comment.<footer>Closing content for a page or section, like copyright, contacts and related links.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<header>Introductory content: the site logo and navigation, or the top of an article.<html>The root element. Every page's head and body sit inside it.<main>The page's unique, central content. One per page.<meta>Page metadata such as the charset, viewport and description.<nav>Wraps the major navigation links.<section>A themed group of content, normally with its own heading.<small>Side comments and fine print, like copyright lines or legal notes.<title>Names the page in the browser tab, in bookmarks and in search results.