cyberangles guide

How to Build a Multi-Page Website Using HTML & CSS

Creating a multi-page website is a foundational skill for web developers. Unlike single-page sites (which load all content at once), multi-page websites organize content into separate, interconnected pages (e.g., Home, About, Contact) for better scalability, user experience, and SEO. In this guide, we’ll walk through building a fully functional multi-page website from scratch using only HTML and CSS. No prior experience? No problem—we’ll break it down step by step.

Table of Contents

  1. Planning Your Website
  2. Setting Up the Project Structure
  3. Creating the HTML Foundation
  4. Styling with CSS
  5. Building Navigation (Critical for Multi-Page Sites)
  6. Designing Individual Pages
  7. Adding Images & Media
  8. Testing & Debugging
  9. Hosting & Deployment
  10. References

1. Planning Your Website

Before writing code, planning saves time and avoids rework. A clear plan ensures your site is organized, user-friendly, and meets its goals.

1.1 Define Goals & Audience

Start by asking:

  • What is the purpose of the site? (e.g., portfolio, business, blog)
  • Who is the target audience? (e.g., customers, employers, readers)
  • What pages are essential? (Common: Home, About, Services, Contact)

1.2 Create a Sitemap

A sitemap outlines your site’s structure and how pages connect. For example:

MyWebsite/  
├── Home  
├── About  
├── Services  
│   ├── Web Design  
│   └── SEO  
└── Contact

Pro Tip: Use tools like Lucidchart or pen-and-paper to sketch your sitemap.

1.3 Design Wireframes

Wireframes are simple sketches of each page’s layout (no colors or fonts—just structure). For a Home page, you might include:

  • Header (logo + navigation)
  • Hero section (headline + call-to-action button)
  • Featured content (3 columns)
  • Footer (links + copyright)

Tools: Figma (free), Balsamiq (paid), or even Google Drawings.

2. Setting Up the Project Structure

Organizing files properly makes your project easier to maintain. Create this folder structure on your computer:

my-multi-page-site/          # Main project folder  
├── index.html               # Home page (required for hosting)  
├── about.html               # About page  
├── services.html            # Services page  
├── contact.html             # Contact page  
├── css/                     # Folder for CSS files  
│   └── style.css            # Main stylesheet (shared across all pages)  
├── images/                  # Folder for images  
│   ├── logo.png  
│   ├── hero.jpg  
│   └── team.jpg  
└── favicon.ico              # Small icon in browser tab (optional)

3. Creating the HTML Foundation

All pages will share a core HTML structure (header, navigation, footer). We’ll use semantic HTML (e.g., <header>, <nav>, <main>) to improve accessibility and SEO.

3.1 Basic HTML Boilerplate

Start with this template for index.html (Home page). We’ll reuse this structure for other pages, updating only the content:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Website | Home</title> <!-- Page title (appears in browser tab) -->  
    <link rel="stylesheet" href="css/style.css"> <!-- Link to shared CSS -->  
    <link rel="icon" href="favicon.ico"> <!-- Favicon (optional) -->  
</head>  
<body>  
    <!-- Header: Contains logo and navigation -->  
    <header>  
        <div class="logo">  
            <h1>MyWebsite</h1>  
        </div>  
        <nav>  
            <!-- Navigation links will go here -->  
        </nav>  
    </header>  

    <!-- Main Content: Unique to each page -->  
    <main>  
        <!-- Home page content (e.g., hero section) -->  
    </main>  

    <!-- Footer: Shared across all pages -->  
    <footer>  
        <p>&copy; 2024 MyWebsite. All rights reserved.</p>  
    </footer>  
</body>  
</html>

3.2 Key HTML Tags Explained

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html lang="en">: Root element, with language attribute for accessibility.
  • <meta name="viewport">: Ensures proper scaling on mobile devices.
  • <title>: Tab title (critical for SEO).
  • <link rel="stylesheet">: Connects the CSS file to style the page.

4. Styling with CSS

CSS will make your site look professional and consistent. We’ll use a single style.css file shared across all pages.

Browsers add default styles (e.g., margins, padding) that can cause inconsistencies. Add this at the top of style.css to “reset” styles:

/* Reset CSS */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box; /* Ensures padding/margin don't break layouts */  
}

4.2 Global Styles

Define styles for elements used across all pages (e.g., fonts, colors, body background):

/* Global Styles */  
body {  
    font-family: 'Arial', sans-serif; /* Use a web-safe font */  
    line-height: 1.6; /* Improves readability */  
    color: #333; /* Dark gray text (easier on eyes than black) */  
    background-color: #f4f4f4; /* Light gray background */  
}  

a {  
    text-decoration: none; /* Remove default underline from links */  
    color: #333;  
}  

/* Container to center content (optional but common) */  
.container {  
    max-width: 1200px; /* Limits content width on large screens */  
    margin: 0 auto; /* Centers content horizontally */  
    padding: 0 20px; /* Adds space on left/right for small screens */  
}

4.3 Responsive Design Basics

Ensure your site works on mobile, tablet, and desktop with media queries. Add this to style.css to adjust layouts on small screens:

/* Responsive Design: Mobile-first approach */  
@media (max-width: 768px) {  
    /* Styles for screens smaller than 768px (e.g., phones) */  
    .logo h1 {  
        font-size: 1.5rem; /* Smaller logo text on mobile */  
    }  
}

5. Building Navigation (Critical for Multi-Page Sites)

Navigation lets users jump between pages. We’ll add a <nav> section inside the <header> and style it to look like a menu bar.

5.1 HTML for Navigation

Update the <nav> section in index.html (and all other pages) with links to your pages:

<nav>  
    <ul>  
        <li><a href="index.html" class="active">Home</a></li>  
        <li><a href="about.html">About</a></li>  
        <li><a href="services.html">Services</a></li>  
        <li><a href="contact.html">Contact</a></li>  
    </ul>  
</nav>

5.2 CSS for Navigation

Style the navigation to look clean and responsive. Add this to style.css:

/* Header Styles */  
header {  
    background: #35424a; /* Dark blue-gray background */  
    color: white;  
    padding: 1rem 0; /* Vertical padding */  
}  

/* Navigation Menu */  
nav ul {  
    list-style: none; /* Remove bullet points */  
    display: flex; /* Arrange links horizontally (flexbox) */  
    gap: 2rem; /* Space between links */  
}  

nav a {  
    color: white;  
    font-weight: bold;  
    padding: 0.5rem 0; /* Vertical padding for hover effect */  
}  

/* Highlight active page */  
nav a.active {  
    border-bottom: 3px solid #e8491d; /* Orange underline */  
}  

nav a:hover {  
    color: #e8491d; /* Orange color on hover */  
}  

/* Responsive Navigation (Mobile) */  
@media (max-width: 768px) {  
    nav ul {  
        flex-direction: column; /* Stack links vertically on mobile */  
        gap: 1rem;  
        text-align: center;  
    }  
}

6. Designing Individual Pages

Now let’s add unique content to each page.

6.1 Home Page (index.html)

Focus on a strong first impression with a hero section (large banner) and featured content:

<main>  
    <!-- Hero Section -->  
    <section class="hero">  
        <div class="container">  
            <h2>Welcome to MyWebsite</h2>  
            <p>We build beautiful, functional websites for businesses like yours.</p>  
            <a href="contact.html" class="btn">Get a Quote</a>  
        </div>  
    </section>  

    <!-- Featured Services -->  
    <section class="services">  
        <div class="container">  
            <h3>Our Services</h3>  
            <div class="service-cards">  
                <div class="card">  
                    <h4>Web Design</h4>  
                    <p>Custom websites tailored to your brand.</p>  
                </div>  
                <div class="card">  
                    <h4>SEO</h4>  
                    <p>Get found on Google with our SEO strategies.</p>  
                </div>  
                <div class="card">  
                    <h4>Maintenance</h4>  
                    <p>Keep your site updated and secure.</p>  
                </div>  
            </div>  
        </div>  
    </section>  
</main>

Add CSS for the hero and cards in style.css:

/* Hero Section */  
.hero {  
    background: url('../images/hero.jpg') no-repeat center center/cover; /* Full-width background image */  
    color: white;  
    text-align: center;  
    padding: 5rem 0;  
}  

.hero h2 {  
    font-size: 2.5rem;  
    margin-bottom: 1rem;  
}  

.btn {  
    display: inline-block;  
    background: #e8491d;  
    color: white;  
    padding: 0.7rem 2rem;  
    border: none;  
    cursor: pointer;  
    border-radius: 5px;  
}  

.btn:hover {  
    background: #d44115;  
}  

/* Service Cards */  
.services {  
    padding: 3rem 0;  
}  

.service-cards {  
    display: grid;  
    grid-template-columns: repeat(3, 1fr); /* 3 columns */  
    gap: 2rem;  
}  

.card {  
    background: white;  
    padding: 2rem;  
    border-radius: 5px;  
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */  
}  

/* Responsive Cards (Mobile) */  
@media (max-width: 768px) {  
    .service-cards {  
        grid-template-columns: 1fr; /* 1 column on mobile */  
    }  
}

6.2 About Page (about.html)

Tell your story with an “About Us” section and team photos:

<main>  
    <div class="container">  
        <section class="about">  
            <h2>About Us</h2>  
            <p>Founded in 2020, MyWebsite began with a mission to make web design accessible to small businesses.</p>  

            <h3>Our Team</h3>  
            <div class="team">  
                <img src="images/team.jpg" alt="Our team working together" class="team-img">  
                <p>We’re a group of designers, developers, and marketers passionate about creating digital experiences that drive results.</p>  
            </div>  
        </section>  
    </div>  
</main>

6.3 Services Page (services.html)

List your services with details and prices:

<main>  
    <div class="container">  
        <h2>Our Services</h2>  
        <div class="service-list">  
            <div class="service-item">  
                <h3>Web Design</h3>  
                <p>Custom website design with mobile responsiveness.</p>  
                <p class="price">$1,000 – $5,000</p>  
            </div>  
            <div class="service-item">  
                <h3>SEO Optimization</h3>  
                <p>Improve your search engine ranking and drive traffic.</p>  
                <p class="price">$500 / month</p>  
            </div>  
        </div>  
    </div>  
</main>

6.4 Contact Page (contact.html)

Include a contact form and business info (address, phone, email):

<main>  
    <div class="container">  
        <section class="contact">  
            <h2>Contact Us</h2>  
            <div class="contact-info">  
                <p>Email: [email protected]</p>  
                <p>Phone: (555) 123-4567</p>  
                <p>Address: 123 Main St, City, Country</p>  
            </div>  

            <!-- Contact Form -->  
            <form class="contact-form">  
                <div class="form-group">  
                    <label for="name">Name:</label>  
                    <input type="text" id="name" required>  
                </div>  
                <div class="form-group">  
                    <label for="email">Email:</label>  
                    <input type="email" id="email" required>  
                </div>  
                <div class="form-group">  
                    <label for="message">Message:</label>  
                    <textarea id="message" rows="5" required></textarea>  
                </div>  
                <button type="submit" class="btn">Send Message</button>  
            </form>  
        </section>  
    </div>  
</main>

Note: This form won’t send emails yet (you’ll need backend code like PHP or a service like Formspree for that).

7. Adding Images & Media

Images make your site engaging. Follow these best practices:

  • Use relative paths: src="images/hero.jpg" (works across all pages).
  • Add alt text: alt="Team working together" (improves accessibility and SEO).
  • Optimize images: Compress files with tools like TinyPNG to speed up loading.
  • Responsive images: Add this CSS to ensure images scale on mobile:
img {  
    max-width: 100%; /* Image never exceeds parent container width */  
    height: auto; /* Maintain aspect ratio */  
}

8. Testing & Debugging

Before launching, test your site thoroughly:

8.1 Validate HTML/CSS

8.2 Check Responsiveness

Use Chrome DevTools (F12) to test mobile/tablet views:

  • Click the “Toggle device toolbar” icon (Ctrl+Shift+M).
  • Select device presets (e.g., iPhone SE, iPad) to ensure layouts adapt.

8.3 Test Links & Forms

  • Click all navigation links to ensure they work.
  • Test form required fields (try submitting without filling them out).

9. Hosting & Deployment

To make your site public, upload it to a hosting provider. Popular free options:

  • GitHub Pages: Host for free if you know Git. Push your project to a GitHub repo, then enable Pages in Settings.
  • Netlify: Drag-and-drop your project folder for instant hosting (and free HTTPS).
  • Vercel: Similar to Netlify, with seamless Git integration.

Pro Tip: Buy a custom domain (e.g., mywebsite.com) from Namecheap or GoDaddy for ~$10/year.

10. References

Final Note: Building a multi-page site takes practice, but this foundation will serve you for years. Experiment with colors, layouts, and content to make it your own. Happy coding! 🚀