Course outline
Full-Stack course / Tools and the web

A semantic page skeleton

Project

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/07-01-semantic-page-skeleton
cd 07-01-semantic-page-skeleton
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

Goal

Build index.html for your personal site using real landmark elements — <header>, <nav>, <main>, <section>, <footer> — instead of generic <div>s, with no CSS yet.

Example

A one-page bakery site (not what you're building, just the shape to copy) uses one of each landmark, with the nav inside the header and two labeled sections inside main:

<header>
  <h1>Corner Bakery</h1>
  <nav>
    <a href="#menu">Menu</a>
    <a href="#hours">Hours</a>
  </nav>
</header>
<main>
  <section id="menu">
    <h2>Today's menu</h2>
    <p>Sourdough, cinnamon rolls, and a rotating soup.</p>
  </section>
  <section id="hours">
    <h2>Hours</h2>
    <p>Tuesday through Sunday, 7am to 2pm.</p>
  </section>
</main>
<footer>
  <p>&copy; 2026 Corner Bakery.</p>
</footer>

Rules

  • Exactly one <header>, containing exactly one <h1> (your name or the site's title) and one <nav> with at least two links.
  • Exactly one <main>, containing at least two <section> elements — pick your own topics (About and Projects are a natural fit, but any two real sections work).
  • Every <section> needs its own heading (an <h2> is the natural choice) as its first piece of content — a section with no heading has no name a screen reader can announce.
  • Exactly one <footer>.
  • The whole page has exactly one <h1> total — don't repeat it inside a section.
  • No <div> standing in for any of these five elements. A <div> is fine for a purely visual wrapper that isn't one of these landmarks, but don't use one in place of <header>, <nav>, <main>, a <section>, or <footer>.

What you'll practice

Structuring a real page out of landmark elements that announce what each region is for, instead of a pile of anonymous <div>s.

Run it

gonomicon fetch fs-week-1/07-01-semantic-page-skeleton
cd 07-01-semantic-page-skeleton
gonomicon test
gonomicon submit

Hints

  1. A page should have exactly one <header>, one <main>, and one <footer> — each used once, each used for real. The <nav> with your links goes inside the <header>, not next to it.
  2. Every <section> needs its own heading as the first thing inside it (an <h2> works well) so it has a name of its own — and the whole page should still only have one <h1>, the one in the header.
  3. <header><h1>...</h1><nav><a href="#about">About</a><a href="#projects">Projects</a></nav></header><main><section id="about"><h2>About</h2>...</section><section id="projects"><h2>Projects</h2>...</section></main><footer>...</footer> — fill in real content, keep that shape.
PreviousNext lesson