Multi-Page Sites

Until now, you've been building single pages. One HTML file, one screen, one scroll. But real websites have multiple pages — a home page, an about page, a menu, a contact page. Each one is its own file, and they're all connected by links.

In this lesson, you'll build a 3-page recipe collection site and learn how pages connect to each other. It's simpler than you think — and once you understand it, you'll be able to build sites of any size.

The Recipe Site Plan

We're going to build a small recipe website for a home cook. Three pages, each with a distinct purpose:

This is a project anyone can personalize. Swap recipes for travel destinations, book reviews, or workout routines. The structure stays the same: a landing page, a collection page, and a personal page. Once you build it once, the pattern clicks.

Asking Claude for Multiple Files

The key to getting a multi-page site from Claude is describing all the pages in a single request. This way, Claude can make sure the navigation, styling, and structure are consistent from the start.

Three files, created together, already wired up. Open index.html in your browser and you'll see a working site with clickable navigation between all three pages.

How Pages Connect

This is the most important concept in this lesson. When you click a link on a website, your browser opens a different file. That's all navigation is — links between files. Here's the navigation bar Claude created, shared across all three pages:

Let's break down the important part. When a browser sees href="recipes.html", it means: "when clicked, open the file called recipes.html in the same folder." That's it. Links are just filenames.

Every page in your site has the same <nav> block. When you click "Recipes" on the home page, the browser opens recipes.html. Click "Home" on the recipes page, and it opens index.html. The pages don't "know about" each other in any magical way — they just point to filenames.

Folder Structure

Every multi-page site has an organized folder. Here's what your recipe site looks like on disk:

Why is the home page called index.html instead of home.html? Convention. When you visit a website, your browser automatically looks for a file called index.html in the folder. It's the default starting point — like the front door of a house. You can name it something else, but index.html is what the web expects.

The images/ folder keeps things tidy. Instead of mixing image files with HTML files, you put them in their own subfolder. To reference an image from any of your HTML pages, you'd write images/pasta.jpg — the folder name, a slash, and the filename.

Keeping Design Consistent

When Claude creates multiple pages, it repeats the same navigation bar, color scheme, and typography across all of them. But what happens when you want to make a change? If you ask Claude to tweak the nav, it might only change one file unless you tell it otherwise.

The phrase "apply this to all three pages" is what makes this work. Without it, Claude might reasonably assume you only want to change the file you were just discussing. When you're working with multiple files, always specify the scope of your change.

Key Takeaways

• Multi-page sites are just multiple HTML files in the same folder, connected by links.
• The <a href="filename.html"> tag creates a link. The href is the filename of the page to open.
• index.html is the conventional home page name — browsers look for it by default.
• Describe all pages in your initial request so Claude builds them with consistent navigation and styling.
• When asking for changes, always specify the scope — "update all three pages" keeps your site consistent.