Capstone: Build Your Own Website — HTML5 for Beginners: Build Your First Web Pages

Scenario

You're going to build your own small website, about you, a hobby, a club or a local business, and put it online. It's the first project in your portfolio, and you can keep improving it as you learn CSS and JavaScript.

Requirements

Build three pages that link to each other:

index.html (Home): a <header> with the site name and a <nav> linking to all three pages; a <main> with an <h1>, a short introduction, a photo with good alt text, width and height, and a list (for example "Things I enjoy").
projects.html (Projects or Hobbies): at least two <article>s, each with an <h2>, a paragraph and an image or link; one table (for example a reading list or a training log) with a <caption> and header cells.
contact.html (Contact): a form with labelled name, email and message fields, at least one validation rule (required or type="email"), a radio group or checkbox in a <fieldset> with a <legend>, and a submit button.
Every page: <!DOCTYPE html>, lang, charset, viewport, a unique <title> and meta description, the same header and navigation, and a <footer>.

Constraints

HTML only, plus at most one small <style> block if you want borders or spacing.
All files in one folder (images in an images subfolder), with relative links between pages.

Deliverables

The three HTML files and your images.
A clean result in the W3C validator for every page.
A keyboard-only check: every link, field and button can be reached with Tab.
Optional: publish the site for free with GitHub Pages, Netlify or Cloudflare Pages, and share the link.

Hints

Build index.html first, then copy it to make the other pages, so the header, navigation and footer stay identical.
Draw your pages on paper first: what goes in the header, the main area and the footer?
The form can't send messages yet; that needs a server. Some free form services can receive form posts for static sites.

Deliverables

What should every page of your site include in its head?

Model answer

<!DOCTYPE html> before it, lang on html, meta charset utf-8, the viewport meta tag, a unique title and a meta description.

Rubric

Look for all of the basics and a unique title per page, not a copied one.

How did you make the contact form accessible and helpful?

Model answer

Every field has a label linked with for/id, related choices are grouped in a fieldset with a legend, input types such as email bring the right keyboard, and required fields are checked by the browser (and would be checked again on a server).

Rubric

Strong answers mention labels, grouping, input types and that server-side validation is still needed.

How did you check your site before publishing it?

Model answer

Validated every page with the W3C validator, opened each page in a browser and on a phone, followed every link, and tabbed through every page with only the keyboard.

Rubric

Look for both automated (validator) and manual (keyboard, phone, links) checks.