Module 5: Adding Pages & Navigation

A one-page site works for some businesses, but most of the time you need more. An About page tells your story. A Contact page makes it easy for people to reach you. Let's add them.

Why Multi-Page?

Separate pages let you:

Keep things organized and easy to find
Give each topic room to breathe
Look more professional and established
Rank better in search engines (each page can target different keywords)

Creating the About Page

Create an about.html page that matches the exact same design style as index.html — same fonts, colors, header, and footer. Include a hero banner, a history section, a team section with 3 members, and a values section.

Claude will create about.html using the same styles.css. If it creates a separate CSS file, tell it to use the existing one.

Creating the Contact Page

Create a contact.html page matching the same design as index.html. Include a contact form, business address with Google Maps embed, phone, email, hours, and social media links.

Note: The form won't actually send emails yet — it's just HTML. We'll wire it up in a later module.

Adding Navigation to All Pages

Add a navigation bar to the top of all three pages (index.html, about.html, contact.html) with links to Home, About, and Contact. The nav should highlight the current page, be sticky, and collapse to a hamburger menu on mobile. Make it look the same on all pages.

After Claude makes the changes, test every link from every page. Make sure the active state changes correctly.

Keeping the Design Consistent

Use one stylesheet. All pages should link to the same styles.css.

Always say "match the same design as index.html" when creating new pages.

Check side by side. Open all pages in different tabs and compare.

Adding a Footer to All Pages

Add a footer to all pages with: business name and tagline, quick links, address, phone, email, social media icons, copyright, and a back-to-top button. Dark background, light text.

Your File Structure

my-website/
  index.html
  about.html
  contact.html
  styles.css
  images/

That's your entire website. A few HTML files, one CSS file, and your images. Clean and simple.

Adding More Pages

The process is identical for any new page. The formula: one prompt to create the page, one prompt to update the nav on ALL pages. Don't forget that second step.

You now have a multi-page, professionally designed, mobile-responsive website built entirely with plain English descriptions.