Mini project: rebuild a multi-page brochure site with clean semantics

This is the mini project for Going further with HTML. You will rebuild a small multi-page brochure site using the structure, forms, media, and auditing habits from the tutorials so far. No framework, no WordPress required – plain HTML files (or your own includes if you prefer) are fine.

The brief is deliberately ordinary. Real client sites look like this: a handful of pages, repeated components, one contact form, and markup that should still make sense in six months.

The scenario

Northvale Heating Ltd is a fictional local business. They service and install boilers, offer emergency call-outs, and employ a small team. They need a simple brochure site: enough to look credible, explain services, introduce the team, and capture contact enquiries.

You are not designing a brand from scratch unless you want to. Plain, readable layout is the point. CSS can be minimal. HTML structure is what we are marking.

Required pages

Build these six HTML pages (filenames are suggestions):

index.html – Home. Hero summary, three service teasers linking to detail pages, testimonial or trust signal, clear link to contact.
about.html – Company story, values or accreditations, team section (at least two staff members with photos or placeholders).
services.html – Overview listing all services. Each service is a card or section linking to its detail page.
service-boiler-servicing.html – One service detail page (repeat the pattern mentally for a second service if you want extra practice).
contact.html – Contact form, phone/email/address, maybe a note about emergency cover hours.
thank-you.html – Confirmation page linked from the form’s action (static is fine; no backend needed).

Every page shares the same site header (logo text and primary nav) and footer (secondary links, copyright). Navigation highlights the current section where it makes sense.

Required components

Reuse consistent HTML for these chunks across the site:

Site header – <header> with site name/logo and <nav aria-label="Primary">.
Site footer – <footer> with at least one <nav aria-label="Footer">.
Service card – used on home and services listing (same markup both times).
Team member – figure or article block with name, role, short bio.
Contact form – proper labels, field types, validation attributes where appropriate.

If you use includes or template partials, document which files hold each component. Copy-paste is acceptable for six pages; just keep structure identical.

Semantics and accessibility requirements

<html lang="en-GB"> on every page.
Exactly one <main id="main"> per page.
One <h1> per page; heading levels do not skip.
Skip link to main content on at least the home page (<a href="#main" class="skip-link">Skip to content</a>).
All images have appropriate alt text (or alt="" if decorative).
Contact form: every input has a visible <label>; use fieldset/legend if grouping related fields.
At least one <time datetime> element (e.g. “Est. 2004” on About, or office hours on Contact).
Internal links use meaningful text (no “click here” without context).

Contact form specification

Minimum fields:

Name (required text)
Email (required, type email)
Phone (optional, type tel)
Enquiry type (select: Servicing / Repair / Installation / Other)
Message (required textarea)
Submit button

Point the form at thank-you.html with method="get" or method="post" – either is fine for a static demo. Add HTML5 validation attributes (required, minlength) and a short note near the form explaining what happens after submit.

<form action="thank-you.html" method="get">
  <!-- labelled fields -->
</form>

Optional stretch goals

Second service detail page using the same template structure.
<picture> or responsive image on the home hero.
Simple structured data (LocalBusiness JSON-LD) on the contact page.
PHP or SSI includes for header/footer instead of duplication.
Run the Nu HTML checker and fix all errors before you call it done.

Delivery checklist

Before you consider the project finished, tick these off:

All six pages exist and link together with no broken internal links.
Shared header/footer markup matches on every page.
Document outline (heading map) reads sensibly on home, services, and contact.
Validator reports no errors on at least three different page types.
Tab through the contact form and submit with keyboard only.
View one page with CSS disabled – content order still makes sense.
File names and folder structure are tidy (assets/css/, assets/img/ if you use images).

What you are proving

Not that you can memorise every HTML attribute. That you can take a mundane brief, plan landmarks and components, write markup a colleague could maintain, and catch obvious problems before shipping. That is the bar for intermediate HTML.

Build it, audit it, then keep the folder as a reference for the advanced tutorials or your portfolio.