Project: Small Static Site

Introduction

A real website usually has more than one page. This project combines everything from earlier chapters into a small static site with index.html, about.html, and contact.html, shared navigation, relative paths, image assets, and a simple deployment mindset.

Prerequisites

Project Goal

Build a three-page static site:

  • Home page: intro and featured content
  • About page: story and image
  • Contact page: accessible contact form
  • Shared navigation on every page
  • Correct relative paths
  • Organized assets
  • Ready for static hosting later

Suggested folder:

text
small-static-site/
├── index.html
├── about.html
├── contact.html
└── images/
    ├── logo.svg
    └── team.jpg

Shared Navigation

Each page should have the same navigation, but aria-current="page" moves to the active page.

On index.html:

On about.html, move aria-current:

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

Home Page

About Page

Contact Page

On a purely static host, /contact needs a backend service, form provider, or JavaScript API. The HTML structure is still correct.

Relative Path Checklist

Because all pages are in the same folder:

html
<a href="about.html">About</a>
<img src="images/team.jpg" alt="...">

If you later move pages into subfolders, update paths:

text
pages/about.html -> ../images/team.jpg

Use DevTools Network to catch 404s after reorganizing files.

Site-Wide Checklist

  • Every page has a unique <title>
  • Every page has a useful meta description
  • Navigation appears consistently
  • aria-current="page" marks the active page
  • All links work locally
  • Images load and have good alt
  • Contact form has labels and required fields
  • Footer appears on every page
  • No duplicate IDs across a single page

Deployment Mindset

Static hosts usually need:

  • an index.html at the site root
  • correct relative paths
  • all assets uploaded
  • lowercase file names
  • a custom 404 page (optional)

You can later deploy static files with GitHub Pages, Netlify, Vercel, or Nginx on Linux. The HTML does not need to change much.

Mini Exercise

Build the three pages, then:

  1. Open index.html with Live Server.
  2. Click every nav link.
  3. Open DevTools Network and reload each page.
  4. Fix any 404s.
  5. Run Lighthouse on the home page.
  6. Validate one page with the W3C validator.

FAQ

Should I copy the same header into every page?

For plain HTML practice, yes. In real projects, templates or static site generators remove duplication.

Does every page need its own meta description?

Important public pages should have unique descriptions. Small internal pages can be simpler.

Can the contact form work on a static host?

Only with a form backend, serverless function, third-party form service, or client-side API. HTML alone cannot send email.

Should assets be in one images/ folder?

For small sites, yes. Larger sites may group assets by page or feature.

What comes next?

HTML project structure and formatting — organize static projects, name files, and keep markup consistent.