Login - Jit4All

Build a Complete Website Page

Bring every skill from this course together into one real, production-quality page.

When you look at a professional webpage, what is the correct order of landmark regions from top to bottom, and what goes inside each one?

A complete page runs: skip link → <header> (logo, primary <nav>) → <main> (breadcrumb nav, one <h1>, content in <article> and/or <section> elements, optionally an <aside> for supplementary content) → <footer> (footer <nav>, copyright). The <head> holds title, meta description, charset, viewport, and canonical link — none of that is visible content.

Every lecture in this course taught you one piece of a larger structure. You learned how to name page regions semantically, collect data with forms, present tabular information, embed media, make pages accessible and findable, build navigation systems, embed external content safely, and use modern HTML elements. This final lecture assembles all of those skills into a single page — the way they appear together in every professional website you will ever build or work on.

The jump from "I understand each concept" to "I can assemble a real page" is where most beginners stall. They know what a form looks like and what a nav looks like, but are unsure how they fit together — which wraps which, what order things go in, what to put in <head> versus <body>, and when to use <section> versus <article> versus <div>. This lecture answers all of those questions with a working example.

A production-quality HTML page is not longer or more complicated than a tutorial example — it is more deliberate. Every element is chosen for a reason. Every attribute earns its place. The <title> is keyword-first and under 60 characters. Every image has a real alt description. Every input has a linked label. Every navigation is in a <nav> with an aria-label. The heading hierarchy is unbroken. That level of deliberateness is what you are building towards.

After this lecture you will not just know HTML — you will understand the reasoning behind each decision. That understanding is what lets you look at any website, view its source code, and immediately see what it is doing well, what it is doing poorly, and how you would build it better. That is the skill this course has been building toward from the first lecture.

A complete, production-quality HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Web Design Services – Acme Creative Agency</title>
  <meta name="description"
        content="Professional web design for small businesses.
        Mobile-first, accessible, and built to rank on Google.">
  <link rel="canonical"
        href="https://acme.com/services/web-design">
  <link rel="stylesheet" href="/css/main.css">
</head>

<body>

  <!-- Skip link -->
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>

  <!-- Site header -->
  <header>
    <a href="/" aria-label="Acme Creative Agency — home">
      <img src="/img/logo.svg"
           alt="Acme Creative Agency"
           width="160" height="48">
    </a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/services"
                aria-current="page">Services</a></li>
        <li><a href="/portfolio">Portfolio</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content -->
  <main id="main-content">

    <!-- Breadcrumb -->
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="/">Home</a></li>
        <li aria-current="page">Services</li>
      </ol>
    </nav>

    <!-- Hero section -->
    <section aria-labelledby="hero-heading">
      <h1 id="hero-heading">Web Design Services</h1>
      <p>We build fast, accessible, mobile-first websites
         for small businesses across Western Canada.</p>
      <a href="/contact">Start your project</a>
    </section>

    <!-- Services grid -->
    <section aria-labelledby="services-heading">
      <h2 id="services-heading">What we offer</h2>
      <article>
        <h3>Responsive design</h3>
        <p>Your site looks great on every screen size.</p>
      </article>
      <article>
        <h3>Accessibility audits</h3>
        <p>We ensure your site meets WCAG 2.1 AA standards.</p>
      </article>
      <article>
        <h3>SEO-ready structure</h3>
        <p>Semantic HTML built to rank from day one.</p>
      </article>
    </section>

    <!-- Pricing table -->
    <section aria-labelledby="pricing-heading">
      <h2 id="pricing-heading">Pricing</h2>
      <table>
        <caption>Service tiers and monthly pricing</caption>
        <thead>
          <tr>
            <th scope="col">Tier</th>
            <th scope="col">Pages</th>
            <th scope="col">Monthly</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Starter</th>
            <td>5</td>
            <td>$499</td>
          </tr>
          <tr>
            <th scope="row">Business</th>
            <td>15</td>
            <td>$899</td>
          </tr>
        </tbody>
      </table>
    </section>

    <!-- FAQ using modern HTML -->
    <section aria-labelledby="faq-heading">
      <h2 id="faq-heading">Frequently asked questions</h2>
      <details>
        <summary>How long does a project take?</summary>
        <p>Most projects are complete within 4–6 weeks.</p>
      </details>
      <details>
        <summary>Do you offer ongoing support?</summary>
        <p>Yes — all plans include monthly maintenance.</p>
      </details>
    </section>

    <!-- Contact form -->
    <section aria-labelledby="contact-heading">
      <h2 id="contact-heading">Get in touch</h2>
      <form action="/contact" method="post">
        <label for="name">Full name</label>
        <input type="text" id="name"
               name="name" required>

        <label for="email">Email address</label>
        <input type="email" id="email"
               name="email" required>

        <label for="message">Message</label>
        <textarea id="message" name="message"
                  rows="5" required></textarea>

        <button type="submit">Send message</button>
      </form>
    </section>

    <!-- Embedded map -->
    <aside aria-label="Our location">
      <h2>Find us</h2>
      <iframe
        src="https://www.openstreetmap.org/export/embed.html"
        width="600" height="400"
        title="Acme Creative Agency — Calgary office"
        loading="lazy">
      </iframe>
    </aside>

  </main>

  <!-- Site footer -->
  <footer>
    <nav aria-label="Footer">
      <ul>
        <li><a href="/privacy">Privacy policy</a></li>
        <li><a href="/terms">Terms of service</a></li>
        <li><a href="/sitemap">Sitemap</a></li>
      </ul>
    </nav>
    <p>&copy; 2025 Acme Creative Agency</p>
  </footer>

</body>
</html>

The <head> in order — The first element in <head> is always <meta charset="UTF-8"> — it must come before anything the browser might render. Then viewport, title, description, canonical, then CSS. This order is not arbitrary: the browser parses <head> top to bottom and decisions made early (like character encoding) affect how everything that follows is interpreted.

<section> vs <article> vs <div> — Use <article> when the content could stand alone and still make sense — a service card, a blog post, a product. Use <section> to group related content that belongs together within the page but would not stand alone — a hero area, a pricing block, an FAQ group. Use <div> when you need a container purely for CSS layout and the content has no inherent semantic grouping. In the example above, the services are <article> elements inside a <section> — each service card is self-contained, but they are grouped as a section of the page.

Every section is labelled — Each <section> has either aria-labelledby pointing to its heading, or aria-label when there is no visible heading. This is how screen reader users see a list of all sections on the page and jump directly to the one they want — the same way sighted users scan visually. A section without a label is an unlabelled region in the landmarks list.

The heading hierarchy in this page — There is one <h1> ("Web Design Services"). Every major section gets an <h2> ("What we offer", "Pricing", "FAQ", "Get in touch", "Find us"). The individual service cards inside "What we offer" get <h3>. No levels are skipped. If you printed just the headings, you would have a perfect outline of the page — that is the test.

Everything earns its place — Look back at each element in this page and trace it to a lecture: the skip link from Accessibility (L5), the canonical link from SEO (L6), the breadcrumb nav with aria-label from Navigation (L7), the iframe from Embedded Content (L8), the <details> FAQ from Modern HTML (L9). A production page is not a collection of random HTML — it is each concept from each lecture applied in the right place for the right reason.

Integration is the real skill

Understanding each HTML concept individually is necessary but not sufficient. Knowing exactly where on a page each element belongs, why it goes there, and how it interacts with the elements around it — that is the professional skill. This page demonstrates that integration.

Audits reveal quality

A complete page built correctly should score 90+ on both the Lighthouse Accessibility and Lighthouse SEO audits. Those scores are not grading opinions — they are checking specific, measurable HTML qualities that real users depend on.

View source is your education

Now that you know every element in this course, viewing the source of any professional website reveals their decisions — good and bad. You will notice missing alt text, unlabelled forms, broken heading hierarchies, and placeholder links on well-known sites. Your eye for quality has fundamentally changed.

This is the foundation

HTML is the foundation under CSS, JavaScript, every frontend framework, and every content management system. Developers who understand HTML deeply write better CSS (because they choose the right elements to style), better JavaScript (because they manipulate a well-structured DOM), and better React or Vue components (because they know what the output HTML should look like).

Common final-page mistakes — all in one place

<title>Home</title>
<!-- no description, no canonical, no viewport -->

<div class="header">
  <div class="nav">
    <span onclick="go('/about')">About</span>
  </div>
</div>

<div class="main">
  <h1>Welcome</h1>
  <h1>Our Services</h1>
  <h4>Design</h4>
  <img src="hero.jpg">
  <input type="text" placeholder="Your name">
</div>

Every lecture applied correctly — use this

<title>Web Design Services – Acme Agency</title>
<meta name="description" content="...">
<link rel="canonical" href="https://acme.com/services">

<header>
  <nav aria-label="Primary">
    <ul><li><a href="/about">About</a></li></ul>
  </nav>
</header>

<main id="main-content">
  <h1>Web Design Services</h1>
  <h2>Design</h2>
  <img src="hero.jpg"
       alt="Designer at work on a brand identity project"
       width="1200" height="600">
  <label for="name">Your name</label>
  <input type="text" id="name" name="name">
</main>

Paste your complete page HTML into ChatGPT and ask: "Review this page for semantic structure, accessibility, SEO, heading hierarchy, form labels, image alt text, and navigation — list every issue you find." Use the result as a checklist, not gospel. Fix every issue it identifies and verify each fix in Chrome DevTools. Then run Lighthouse Accessibility and SEO audits independently — they will confirm what the AI found and likely flag a few more things.

Build a complete page from scratch — no copying from the example, just use it as a reference. Choose a real topic (a restaurant, a portfolio, a small business, a school club). Write a real <title> and <meta name="description"> specific to that topic. Include every <head> element in the correct order.

Build the full landmark structure: skip link, labelled <header> with primary nav, breadcrumb inside <main>, at least three labelled <section> elements with <h2> headings, and a <footer> with footer nav. One section must contain at least two <article> elements.

Include a contact form with at least three fields (all labelled, all with correct types), a data table with caption and scope attributes, an image with real alt text and dimensions, and one <details> FAQ item.

Run a Lighthouse Accessibility audit. Achieve a score of 90 or above before moving on. For every flagged item, read the "Learn more" link and implement the fix. Run it again until you pass.

Right-click your finished page → View Page Source. Read through the entire source from top to bottom — not in DevTools, in the raw source. At every element, ask: "Why is this here? What would break if I removed it?" If you can answer every question, you have finished this course.

Building the page in sections over multiple days and not testing the whole thing together until the end. Issues with heading hierarchy, duplicate landmark labels, and broken nav links only appear when the whole page is assembled. Build and audit the complete page early, not just when you think you are finished.

Using <section> as a generic wrapper instead of a semantic grouping. A <section> without an aria-labelledby or aria-label is not a proper landmark — it is essentially a <div> with pretensions. Every <section> must have a heading or an aria-label.

Forgetting the skip link because the navigation looks small. Visual design has nothing to do with it. A navigation with three links still requires Tab presses through all three before reaching content — on every single page load. The skip link costs one line and saves keyboard users real frustration.

Assuming the page is correct because it looks right in a browser. A visually perfect page can have zero alt text, missing form labels, broken heading hierarchy, and unlabelled iframes — none of which are visible. Always validate with Lighthouse, the Accessibility panel, and (ideally) a screen reader.

Stopping after this course without continuing to read real source code. The best HTML education after this course is reading the source of production websites — government sites for accessibility, major news sites for semantic structure, documentation sites for navigation patterns. Every page you read teaches you something the course could not.

Build a complete, production-quality HTML page from scratch — with a fully optimised <head>, semantic landmark structure, a skip link, labelled navigation, correct heading hierarchy, accessible form, data table, media, embedded content, and modern HTML elements — and audit it to 90+ in Lighthouse Accessibility and SEO.