🌐 Project 2: Multi-Page Website

Build a Complete Website with Multiple Pages and Consistent Navigation

🕐 Estimated Time: 1-2 weeks 🔴 Advanced Level 📚 Uses: Navigation, Links, Structure, Forms

🚀 What You'll Build

Your Multi-Page Website will include:

Homepage: Welcome visitors and overview of your site
About Page: Detailed information about you or your business
Services/Products Page: Showcase what you offer
Contact Page: Working contact form and information
Consistent Navigation: Same menu on every page
Footer: Links and information on every page
Responsive Design: Works perfectly on all devices

Real-World Application: This is the type of website businesses, freelancers, and organizations use every day. You'll learn to plan site structure, create reusable components, and maintain design consistency across multiple pages.

📁 Project File Structure

your-website/
├── index.html (Homepage)
├── about.html (About Page)
├── services.html (Services Page)
├── contact.html (Contact Page)
├── assets/
│   ├── css/
│   │   └── styles.css
│   └── images/
│       ├── logo.png
│       ├── hero-image.jpg
│       └── service-1.jpg
└── README.md

🛠️ Step-by-Step Project Guide

1Plan Your Website Structure

Before coding, plan what your website will be about and how visitors will navigate it.

Planning Questions:

What is the main purpose of your website?
Who is your target audience?
What pages do you need?
How will visitors move between pages?
What content will be on each page?
What should happen on each page?

Site Map Example:

Home (index.html)
├── About (about.html)
├── Services (services.html)
└── Contact (contact.html)

Content Planning:

Homepage: Hero section, brief intro, call-to-action
About: Your story, mission, team info
Services: What you offer, benefits, pricing
Contact: Form, address, phone, email, map

2Create Reusable Components

Build navigation and footer that you'll use on every page.

Navigation Component:

<nav class="main-nav">
    <div class="nav-container">
        <a href="index.html" class="logo">Your Website</a>
        <ul class="nav-menu">
            <li><a href="index.html" class="nav-link">Home</a></li>
            <li><a href="about.html" class="nav-link">About</a></li>
            <li><a href="services.html" class="nav-link">Services</a></li>
            <li><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>
    </div>
</nav>

Footer Component:

<footer class="main-footer">
    <div class="footer-container">
        <div class="footer-section">
            <h3>Your Website</h3>
            <p>Your tagline or mission statement.</p>
        </div>
        <div class="footer-section">
            <h3>Quick Links</h3>
            <ul>
                <li><a href="about.html">About Us</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>Contact Info</h3>
            <p>Email: info@yourwebsite.com</p>
            <p>Phone: (555) 123-4567</p>
        </div>
    <div class="footer-bottom">
        <p>© 2024 Your Website. All rights reserved.</p>
    </div>
</footer>

3Build the Homepage (index.html)

Create an engaging homepage that welcomes visitors and guides them to other pages.

📄 Homepage Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website - Homepage</title>
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <!-- Navigation -->
    [Navigation Component Here]

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>Welcome to Your Website</h1>
            <p>We provide amazing services to help you succeed.</p>
            <a href="contact.html" class="btn btn-primary">Get Started</a>
        </div>
    </section>

    <!-- Main Content -->
    <main>
        <section class="features">
            <h2>What We Offer</h2>
            <div class="feature-grid">
                <div class="feature">
                    <h3>Service 1</h3>
                    <p>Description of your first service.</p>
                    <a href="services.html">Learn More</a>
                </div>
                <div class="feature">
                    <h3>Service 2</h3>
                    <p>Description of your second service.</p>
                    <a href="services.html">Learn More</a>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    [Footer Component Here]

    <script src="assets/js/main.js"></script>
</body>
</html>

4Create the About Page (about.html)

Build a page that tells your story and builds trust with visitors.

📄 About Page Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Your Website</title>
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <!-- Navigation -->
    [Navigation Component Here]

    <main>
        <section class="page-header">
            <div class="container">
                <h1>About Us</h1>
                <p>Learn more about our story and mission.</p>
            </div>
        </section>

        <section class="about-content">
            <div class="container">
                <div class="about-grid">
                    <div class="about-text">
                        <h2>Our Story</h2>
                        <p>Tell your story here. How did you start? What drives you?</p>
                        <p>Share your mission, values, and what makes you unique.</p>
                    </div>
                    <div class="about-image">
                        <img src="assets/images/about-us.jpg" alt="About Our Team">
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    [Footer Component Here]
</body>
</html>

5Build the Services Page (services.html)

Create a page that showcases what you offer in detail.

📄 Services Page Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Services - Your Website</title>
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <!-- Navigation -->
    [Navigation Component Here]

    <main>
        <section class="page-header">
            <h1>Our Services</h1>
            <p>Professional services tailored to your needs.</p>
        </section>

        <section class="services">
            <div class="container">
                <div class="service-item">
                    <img src="assets/images/service-1.jpg" alt="Service 1">
                    <h3>Service One</h3>
                    <p>Detailed description of your first service.</p>
                    <ul>
                        <li>Feature 1</li>
                        <li>Feature 2</li>
                        <li>Feature 3</li>
                    </ul>
                    <a href="contact.html" class="btn">Get Quote</a>
                </div>

                <div class="service-item">
                    <img src="assets/images/service-2.jpg" alt="Service 2">
                    <h3>Service Two</h3>
                    <p>Detailed description of your second service.</p>
                    <ul>
                        <li>Feature 1</li>
                        <li>Feature 2</li>
                        <li>Feature 3</li>
                    </ul>
                    <a href="contact.html" class="btn">Get Quote</a>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    [Footer Component Here]
</body>
</html>

6Create the Contact Page (contact.html)

Build a contact page with a working form and your contact information.

📄 Contact Page Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Your Website</title>
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <!-- Navigation -->
    [Navigation Component Here]

    <main>
        <section class="page-header">
            <h1>Contact Us</h1>
            <p>Get in touch with us today.</p>
        </section>

        <section class="contact">
            <div class="container">
                <div class="contact-grid">
                    <div class="contact-form">
                        <h2>Send us a Message</h2>
                        <form action="#" method="post">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="message">Message</label>
                                <textarea id="message" name="message" required>

Get In Touch

Address: 123 Main Street, City, State 12345

Phone: (55) 123-4567

Email: [email protected]

Business Hours

Monday - Friday: 9:00 AM - 5:00 PM

Saturday: 10:00 AM - 2:00 PM

Sunday: Closed