Putting It All Together

Course 1 · Ch 12 · Final Chapter · Project

Building a real, simple multi-page site structure using everything covered across this Fundamentals course

This final chapter doesn't introduce anything new — it's a worked, end-to-end example combining every element from Chapters 1–11 into a genuine, if small, multi-page website structure, exactly as a real project would actually be organised.

Planning the File Structure

my-site/
├── index.html ← homepage
├── about.html
├── contact.html
└── images/
└── logo.png

index.html is the conventional name for a folder's default page — most web servers serve it automatically when a visitor requests just the folder itself (/ or /about/), without needing the filename in the URL.

A Complete, Realistic Page

This single example deliberately uses something from nearly every chapter in this course:

<!DOCTYPE html> // Ch1
<html lang="en"> // Ch1
<head>
  <meta charset="UTF-8">
  <title>About &amp; Contact — My Site</title> // Ch1, Ch11
</head>
<body>

  <header> // Ch8
    <h1>My Site</h1> // Ch2
    <nav> // Ch8
      <ul> // Ch3
        <li><a href="/">Home</a></li> // Ch4
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main> // Ch8
    <article> // Ch8
      <h2>About Us</h2>
      <img src="images/logo.png" alt="Our company logo"> // Ch5
      <p>We are a <strong>small team</strong> building things.</p> // Ch2
    </article>
  </main>

  <footer> // Ch8
    <p>&copy; 2026 My Site</p> // Ch11
  </footer>

</body>
</html>

Sharing Structure Across Pages

A real multi-page site repeats the same header/nav/footer on every page — at this stage in pure HTML, that means copying the same markup into each file. The repetition this creates is real, and it's exactly the motivation for templating systems and components covered in the website rebuild courses (FastAPI+Jinja2, Next.js) — this Fundamentals course intentionally stops short of that, since the goal here is understanding the raw building blocks first.

Keeping navigation links consistent across copied files is a genuine maintenance challenge

With three pages, manually keeping the <nav> identical everywhere is manageable. With thirty pages, it becomes a real liability — exactly the problem templating and component systems exist to solve, beyond the scope of pure HTML alone.

Final Review Checklist

✅

Doctype, html lang, head, body all present

The complete skeleton from Chapter 1, on every page.

Chapter 1

✅

Heading levels form a logical outline, never skipped for sizing

Chapter 2

✅

Internal links are relative, not hardcoded absolute URLs

Chapter 4

✅

Every image has meaningful alt text (or an explicit empty alt for decorative images)

Chapter 5

✅

Page structure uses semantic landmarks, not div soup

Chapters 8-9

✅

Special characters are properly escaped, especially anywhere user content might appear

Chapter 11

✅

Run through the W3C validator before considering it genuinely done

Chapter 10

Chapter 12 Quick Reference — and Course Wrap-Up

index.html — conventional default filename, served automatically for a bare folder URL
A real multi-page site repeats header/nav/footer across files — manageable at small scale, a real problem at large scale
Templating/components (covered in the website rebuild courses) exist specifically to solve that repetition — intentionally out of scope here
Final checklist: doctype/skeleton, logical headings, relative internal links, meaningful alt text, semantic landmarks, escaped special characters, validated markup
Course 1 recap: document structure (Ch1) → text (Ch2) → lists (Ch3) → links (Ch4) → media (Ch5) → tables (Ch6) → forms (Ch7) → semantic HTML (Ch8) → divs/spans (Ch9) → comments/validation (Ch10) → entities (Ch11) → real project (Ch12)
Next: Course 2 — HTML Intermediate (forms in depth, accessibility, meta tags, web components intro, and more)