GreatStack Watch on YouTube

How To Make Website Using HTML & CSS | Full Responsive Multi Page Website Design Step by Step

3 min read 5 hours ago

Published on Dec 18, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a fully responsive multi-page website using HTML and CSS. This step-by-step guide will cover the design of five distinct pages: Home, About, Courses, a Single Blog Post, and a Contact page with a functional contact form. By the end, you will have a solid foundation to design your own websites.

Step 1: Set Up Your Project

Create a project folder on your computer for organizing your files.
Inside this folder, create the following subfolders:
- css for your CSS files
- images for the images used on your website
- js for any JavaScript files (if needed)
Download images from this link and save them in the images folder.

Step 2: Create the HTML Files

Create the following HTML files in your project folder:
- index.html (Home Page)
- about.html (About Page)
- courses.html (Courses Page)
- blog.html (Single Blog Post Page)
- contact.html (Contact Page)

Step 3: Structure the HTML for Each Page

Open index.html and add the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Home Page</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- Page content goes here -->
    </main>
    <footer>
        <p>&copy; 2023 Your Website</p>
    </footer>
</body>
</html>

Repeat this structure for the other HTML files, adjusting the <title> and  as needed.

Step 4: Add CSS Styling

Create a file named styles.css in the css folder.
Link this CSS file in all HTML files as shown above in Step 3.
Add basic styles to styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background: #333;
    color: white;
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

Step 5: Create Page Content

For each HTML file, add specific content to the <main> section. For example:
- Home Page: Introduce your website and its purpose.
- About Page: Provide information about you or your organization.
- Courses Page: List the courses offered.
- Blog Page: Include a sample blog post.
- Contact Page: Add a contact form:

<form action="submit_form.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">Send</button>
</form>

Step 6: Make Your Website Responsive

Use CSS media queries to ensure your website looks good on different screen sizes. Add the following to your styles.css:

@media (max-width: 600px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }
}

Conclusion

You have successfully created a responsive multi-page website using HTML and CSS. You can further enhance your website by adding more styles, JavaScript functionality, or even integrating frameworks like Bootstrap for advanced designs. Experiment with different layouts and styles to make your website unique. Happy coding!

Table of Contents

Recent