Chapter 4.4☕ 18 min read

Hyderabad Food Stories Blog

Build a multi-page Hyderabad food blog — your first website with multiple HTML files linked together

01What is a Multi-Page Website?

So far you've built single-page websites — landing page, portfolio, menu. But real websites have multiple pages. Think about Swiggy: there's a homepage, a restaurant page, a cart page, a checkout page. Each is a separate HTML file, and they're all linked together with <a> tags. That's a multi-page website.

A food blog is the perfect first multi-page project. You'll have a homepage (latest posts), individual recipe pages (Hyderabadi Biryani, Haleem, etc.), an About page, and a Contact page. Each page is its own .html file. The nav bar on every page links to all other pages. This is how 90% of websites on the internet work.

💡

Every website you use — YouTube, Amazon, Wikipedia — is a multi-page website. Understanding how pages link together is the foundation of web development.

02Food Blog Pages

Pages for your food blog:

index.html (Homepage) — Blog name, tagline, grid of latest food posts with thumbnails, "Read More" links to each recipe.
biryani.html (Recipe Page) — Full Hyderabadi Biryani recipe: ingredients list, step-by-step cooking instructions, photo, tips section.
haleem.html (Recipe Page) — Full Haleem recipe: same structure as biryani page but different content.
irani-chai.html (Recipe Page) — Irani Chai recipe: shorter recipe, different vibe.
about.html (About Page) — Who runs the blog, why Hyderabad food, photo, social links.
contact.html (Contact Page) — Contact form (HTML only, no backend), email/phone links, Google Maps embed.

food-blog/
├── index.html        ← Homepage
├── biryani.html      ← Hyderabadi Biryani
├── haleem.html       ← Haleem recipe
├── irani-chai.html   ← Irani Chai
├── about.html        ← About page
├── contact.html      ← Contact form
└── images/
    ├── biryani.jpg
    ├── haleem.jpg
    └── chai.jpg

index.htmlALWAYS the homepage — default file in a folder

<a href="biryani.html">Link to another HTML file in same folder

Copy-paste nav bar to all pages

<ul> ingredientsUnordered list for ingredients

<ol> stepsOrdered list for cooking steps

form action="#"Contact form without backend

03Single-Page vs Multi-Page

When to use which approach:

Approach Best For

📄 Single-Page Portfolio, landing page, menu — one focused page Learn → 📚 Multi-Page Blog, e-commerce, documentation — many pages Learn →

04Building Step by Step

Create Folder Structurefood-blog/ with 6 .html files + images/ folder

→

Build Nav ComponentSame nav on EVERY page — copy-paste

→

Build index.htmlHero section + 3 recipe cards linking to pages

→

Build Recipe PagesBuild one FULLY, then copy-modify for others

→

About & ContactSimple layouts. Form with action="#".

→

Same Footer & CSSCopy same footer and style block to ALL pages

All 6 files must be in the SAME folder. If biryani.html is in a subfolder, links will break. Keep it flat: food-blog/index.html, food-blog/biryani.html, etc. Only images/ as subfolder.

05Exercise — Hyderabad Food Stories Blog

Build a complete 6-page food blog about Hyderabad's iconic dishes. Your first MULTI-PAGE website.

Create food-blog folder with 6 files + images/ subfolder.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hyderabad Food Stories | Biryani, Haleem & More</title>
</head>
<body>
  <!-- Same nav on ALL pages -->
  <header>
    <nav>
      <a href="index.html">Home</a>
      <a href="biryani.html">Biryani</a>
      <a href="haleem.html">Haleem</a>
      <a href="irani-chai.html">Irani Chai</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>

  <!-- Hero -->
  <h1>Hyderabad Food Stories</h1>

  <!-- Recipe cards linking to pages -->
  <a href="biryani.html">Read Recipe →</a>
  <a href="haleem.html">Read Recipe →</a>
  <a href="irani-chai.html">Read Recipe →</a>
</body>
</html>

Build all 6 pages:

index.html — Hero + 3 recipe cards in a grid, linking to pages biryani.html — Full recipe: ul ingredients, ol steps, tips callout haleem.html — Same structure, different content irani-chai.html — Shorter recipe, different vibe about.html — Blog story, photo, social links contact.html — Form (action="#"), phone/email links, Google Maps SAME nav on ALL 6 pages — every link works SAME footer and CSS on ALL 6 pages Open index.html and click EVERY link to verify

💡

Pro tip: Build index.html and biryani.html COMPLETELY first. Then copy biryani.html to make haleem.html and irani-chai.html — just change content. "Build once, reuse" is how professionals work.

Done — Key Points:

✅ Multi-page website = multiple .html files linked with a tags
✅ index.html is ALWAYS the homepage — default when opening folder
✅ Same nav bar on EVERY page — copy-paste is fine for now
✅ Link between pages: <a href="biryani.html">
✅ Build one recipe page FULLY, then copy for others
✅ Every page needs its own title and meta description
✅ Same footer on every page = consistency
✅ Contact form without backend: form action="#"
✅ Test EVERY link on every page
✅ All files in one folder — no subfolders except images/

Previous4.3 — IT Portfolio Page 📋 All Chapters Next Chapter →