HTML/CSS - 30

HTML/CSS - 30: Final Capstone Project

You have reached the final HTML/CSS project. This capstone brings together the skills from all 30 lessons into one larger website.

Your goal is to build the main page of a fictional multi-page website using semantic HTML, responsive layouts, reusable components, design tokens, accessibility, performance-friendly images, and organized CSS.

The Live Output displays one HTML document at a time, so you will build the homepage here. In a real multi-page project, you could reuse the same header, navigation, design system, and footer on additional pages such as about.html, projects.html, and contact.html.

Your challenge: Build a complete responsive homepage that feels like one part of a larger website.

✦ HTML Editor

▶ Live Output

How should you approach a capstone project?

Do not try to build everything at once. A larger website is easier to manage when you divide it into smaller stages.

Stage 1: Plan the structure

Start with the major areas of the page: <header>, <nav>, <main>, <section>, and <footer>.

Think about what information belongs in each section before spending time on colors and animations.

Stage 2: Create your design tokens

The starter code already contains reusable variables for colors, spacing, border radius, and content width.

Try to use these values throughout the project instead of inventing unrelated values for every component.

For example: padding: var(--space-large); keeps spacing connected to your design system.

Stage 3: Build the hero

Create an introductory section that explains what the fictional website is about.

A hero could contain a heading, short paragraph, and a link that jumps to another section: <a href="#discoveries">Explore Discoveries</a>

Give the link a reusable class such as btn so it can share styles with other action links.

Stage 4: Build reusable cards

Create a Grid containing at least three fictional discoveries or projects.

Each card could use the same structure: a heading, short description, and link.

Instead of styling every card separately, create one reusable .card component.

Stage 5: Make the layout responsive

Begin with one card per row. Then use a media query to create additional columns when more horizontal space becomes available.

For example: grid-template-columns: repeat(3, 1fr); can create three equal columns on a wider screen.

Stage 6: Add an optimized image

Use the existing space-waffles.webp image somewhere in the fictional field guide.

Give it meaningful alt text and appropriate dimensions. If the image appears well below the top of the page, you can also use loading="lazy".

Stage 7: Check interaction states

Links, buttons, and cards can have subtle hover effects, but do not forget keyboard users.

You can provide a visible focus style with: :focus-visible.

For example: outline: 3px solid var(--color-accent); can make the currently focused control easier to identify.

Stage 8: Review accessibility

Check your heading order, navigation labels, image alt text, link wording, color contrast, and keyboard focus.

Ask whether someone could understand the page structure even without the visual design.

Stage 9: Review performance

Make sure images are not unnecessarily large, dimensions are provided where appropriate, and the page does not include scripts, fonts, or other resources that it does not need.

Stage 10: Imagine the additional pages

The editor previews one document, but this homepage can become the foundation of a real multi-page site.

For example, a project folder could eventually contain: index.html, about.html, discoveries.html, and contact.html.

Those pages could share the same navigation, CSS variables, components, and footer. That consistency is one of the reasons reusable design systems are valuable.

Capstone checklist:

Before opening the example, see whether your project includes semantic HTML, a useful page title and description, one clear <h1>, navigation, reusable CSS variables, at least one reusable component, Grid or Flexbox, responsive behavior, accessible interaction states, and organized readable code.

You do not need to include every technique from all 30 lessons. A strong project uses the techniques that actually help the design rather than adding features simply because they exist.

👀 Show Example Solution

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

  <meta
    name="description"
    content="A fictional field guide website created as an HTML and CSS capstone project.">

  <title>Signal Atlas | Field Guide</title>

  <style>

    :root {
      --color-bg: #000000;
      --color-surface: #111111;
      --color-text: #dddddd;
      --color-muted: #8A8A8A;
      --color-accent: #ffffff;

      --space-small: 8px;
      --space-medium: 16px;
      --space-large: 32px;
      --space-section: 64px;

      --radius-small: 6px;
      --radius-large: 12px;

      --content-width: 1000px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: var(--color-text);
    }

    .container {
      width: calc(100% - 40px);
      max-width: var(--content-width);
      margin: 0 auto;
    }

    .site-header {
      padding: var(--space-large) 0;
      border-bottom: 1px solid var(--color-muted);
    }

    .site-header .container {
      display: flex;
      flex-direction: column;
      gap: var(--space-medium);
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-medium);
    }

    nav a {
      text-decoration: none;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .hero {
      padding: var(--space-section) 0;
    }

    .hero h2 {
      font-size: clamp(2rem, 7vw, 4rem);
      margin-bottom: var(--space-medium);
    }

    .btn {
      display: inline-block;

      margin-top: var(--space-medium);

      padding:
        10px
        var(--space-medium);

      background-color: var(--color-accent);
      color: var(--color-bg);

      border: 2px solid var(--color-accent);
      border-radius: var(--radius-small);

      font-weight: bold;
      text-decoration: none;

      transition:
        transform 0.2s ease,
        background-color 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      background-color: var(--color-text);
    }

    .btn:focus-visible,
    nav a:focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 4px;
    }

    section {
      padding: var(--space-section) 0;
    }

    .projects-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-medium);
    }

    .card {
      padding: var(--space-large);

      background-color: var(--color-surface);

      border: 2px solid var(--color-muted);
      border-radius: var(--radius-large);

      transition:
        transform 0.2s ease,
        border-color 0.2s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: var(--color-accent);
    }

    .field-note {
      display: grid;
      gap: var(--space-large);
      align-items: center;
    }

    .field-note img {
      border: 2px solid var(--color-muted);
      border-radius: var(--radius-large);
    }

    .contact-box {
      padding: var(--space-large);
      background-color: var(--color-surface);
      border-radius: var(--radius-large);
    }

    .site-footer {
      padding: var(--space-large) 0;
      border-top: 1px solid var(--color-muted);
      color: var(--color-muted);
    }

    @media (min-width: 700px) {

      .site-header .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .projects-grid {
        grid-template-columns:
          repeat(3, 1fr);
      }

      .field-note {
        grid-template-columns:
          1fr 1fr;
      }

    }

    @media (prefers-reduced-motion: reduce) {

      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition: none;
      }

    }

  </style>

</head>

<body>

  <header class="site-header">

    <div class="container">

      <div>
        <h1>Signal Atlas</h1>
        <p>A fictional field guide.</p>
      </div>

      <nav aria-label="Main navigation">
        <a href="#about">About</a>
        <a href="#discoveries">Discoveries</a>
        <a href="#field-note">Field Note</a>
        <a href="#contact">Contact</a>
      </nav>

    </div>

  </header>

  <main>

    <section class="hero">

      <div class="container">

        <h2>
          Curious places deserve good notes.
        </h2>

        <p>
          Signal Atlas is a fictional collection
          of unusual locations, observations,
          and imaginary discoveries.
        </p>

        <a
          class="btn"
          href="#discoveries">
          Explore Discoveries
        </a>

      </div>

    </section>

    <section id="about">

      <div class="container">

        <h2>About the Atlas</h2>

        <p>
          This fictional field guide demonstrates
          semantic HTML, reusable CSS, responsive
          layouts, accessibility, and consistent
          design choices.
        </p>

      </div>

    </section>

    <section id="discoveries">

      <div class="container">

        <h2>Recent Discoveries</h2>

        <div class="projects-grid">

          <article class="card">

            <h3>Echo Ridge</h3>

            <p>
              A fictional ridge where every
              sound seems to return twice.
            </p>

            <a href="https://example.com">
              Read Field Note
            </a>

          </article>

          <article class="card">

            <h3>Lantern Marsh</h3>

            <p>
              A misty fictional wetland dotted
              with mysterious evening lights.
            </p>

            <a href="https://example.org">
              Read Field Note
            </a>

          </article>

          <article class="card">

            <h3>Quiet Crater</h3>

            <p>
              An imaginary crater where even
              strong winds seem strangely calm.
            </p>

            <a href="https://example.net">
              Read Field Note
            </a>

          </article>

        </div>

      </div>

    </section>

    <section id="field-note">

      <div class="container field-note">

        <div>

          <h2>Featured Field Note</h2>

          <p>
            Not every discovery needs to make
            perfect sense. Sometimes the best
            field notes simply record what was
            observed.
          </p>

        </div>

        <img
          src="space-waffles.webp"
          alt="Waffles floating against a starry background"
          width="700"
          height="450"
          loading="lazy">

      </div>

    </section>

    <section id="contact">

      <div class="container">

        <div class="contact-box">

          <h2>Send a Signal</h2>

          <p>
            Have a fictional discovery to share?
          </p>

          <a
            class="btn"
            href="mailto:[email protected]">
            Send a Message
          </a>

        </div>

      </div>

    </section>

  </main>

  <footer class="site-footer">

    <div class="container">

      <p>
        Signal Atlas — HTML/CSS Capstone Project
      </p>

    </div>

  </footer>

</body>

</html>

This example combines ideas from throughout the course: semantic HTML, navigation, design tokens, reusable components, Flexbox, Grid, media queries, responsive images, hover and focus states, reduced-motion support, accessibility, SEO metadata, and performance-conscious image loading.

It also keeps every example fictional and uses reserved example domains rather than depending on real companies or websites.

Most importantly, the example does not try to use every CSS feature simply because it was taught. The techniques are chosen because they serve the page.

Final challenge: Do not stop with the example solution. Change the fictional website topic, rewrite the content, adjust the design tokens, reorganize the cards, and make the finished project feel like your own creation.