How should I organize a small website?

URLs are part of the web's design.

A URL identifies a resource. When a visitor follows a link to lessons/grid.html, the browser requests that document and gives it a navigation history entry. Refresh works. Back works. Copying the address works. Search engines and assistive technologies understand normal links. No client-side routing library is required.

The oldest useful architecture for a small educational site remains wonderfully capable: separate HTML documents, a shared stylesheet, and a little JavaScript loaded only on pages that need it. It's a real multipage application (MPA), not a toy.

This revived site is built that way on purpose. You can inspect the source of each lesson and see the same structure being taught.

Follow a real route.

Open the Grid lab and look at the address bar. Use Back to return here. Open the archive in another tab. Both are ordinary document requests. The pages do not depend on a script to invent or interpret their URLs.

<a href="grid.html">CSS Grid lesson</a>
<a href="../archive.html">Original experiments</a>
<a href="#why">Jump to a section</a>
<!-- A real href works before any JavaScript loads. -->

An annotated project structure.

Here's the actual organization used by this prototype. A shared design system handles common layout and typography. Lesson-specific CSS and a module script only load on routes that use a live experiment.

HTMLCSS/
├── index.html                 # Discovery and links
├── accessibility.html         # Dedicated guide
├── archive.html               # Origins studio
├── lessons/
│   ├── browser.html           # Real standalone document
│   ├── structure.html
│   ├── grid.html              # Interactive lab
│   ├── toolkit.html           # Choosing libraries
│   ├── growing.html           # Beyond static pages
│   └── ...                    # More lesson documents
├── styles/
│   ├── site.css               # Shared, browser-cached
│   ├── labs.css               # Only on lab pages
│   └── exhibits.css           # Only on origins exhibits
├── scripts/
│   ├── site.js                # Tiny shared enhancement
│   ├── catalogue.js           # Only the homepage
│   └── labs.js                # Only interactive labs
└── pages/                     # Reimagined exhibits at stable URLs

The browser resolves ../ relative to the current document. A link on lessons/grid.html to ../index.html climbs one directory. A link to flex.html stays inside the lessons folder.

What is code splitting, really?

In larger applications, code splitting often means bundling JavaScript into chunks loaded on demand. Here, splitting is simpler and explicit: the homepage loads catalogue.js; interactive lessons load labs.js and labs.css; purely editorial pages do not. A module script is deferred by default. Small sites don't always need a bundler to load less code.

<!-- On every page -->
<link rel="stylesheet" href="../styles/site.css">
<script type="module" src="../scripts/site.js"></script>

<!-- Only on pages with experiments -->
<link rel="stylesheet" href="../styles/labs.css">
<script type="module" src="../scripts/labs.js"></script>

When does a framework make sense?

Choose static documents when content is independent, navigation is straightforward, and a build step would add more maintenance than value. A framework or static site generator such as Astro can help later when dozens of pages share elaborate templates, content needs localization, or the site requires a content pipeline.

Be careful about the word “faster.” Multiple small CSS files can add requests; one large shared CSS file can ship unused rules. The best split depends on caching, repetition, compression and page traffic. Measure on real devices rather than assuming either extreme wins.

The resilient default.

Ordinary anchors provide keyboard navigation and expected browser behavior. A well-structured HTML document can render useful text before scripts finish. Shared CSS focuses on reflow, focus states and color preferences; optional enhancements should never block the main learning content.

On this site, search filters the already-rendered lesson cards rather than fetching a catalogue that might fail to load. If JavaScript is disabled, the links remain visible.

Create a three-page mini-site.

Break it

Change href="../index.html" to href="index.html" from inside lessons/. What does the browser try to open, and why does that path fail?

Build it

Create index.html, about.html, and contact.html. Add navigation to each page. Extract shared styles into site.css, then add a single contact.css used only on the contact page. Confirm refresh, deep links, Back and offline file viewing as appropriate. Finally inspect the Network panel to see which assets load on each route.

Go a little deeper.

• MDN — Creating hyperlinks
• MDN — JavaScript modules
• web.dev — Code splitting with dynamic import
• GitHub Pages — Site publishing