Build a multi-page site

Plan the file tree first

A small site can use one HTML file per stable page and share CSS, scripts, and images.

site/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── site.css
└── images/
    └── workshop.webp

Each document needs its own title, main heading, and relevant content. Repeated navigation should link to real files with the same labels and order.

<nav aria-label="Primary">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

Test from more than the home page

Open and reload each page directly. Broken relative paths often hide when you only navigate from the root. Test at narrow widths and with JavaScript disabled before publishing.

Exercise

Create a three-page project. Add one shared stylesheet and confirm every page loads it when opened directly.