Building Your First Responsive Website with HTML and CSS

Creating a responsive website is an essential skill for any front-end developer. A responsive website adjusts its layout and content based on the device and screen size, ensuring a great user experience across all devices. In this article, we’ll walk y…


This content originally appeared on DEV Community and was authored by Egbo Michael

Creating a responsive website is an essential skill for any front-end developer. A responsive website adjusts its layout and content based on the device and screen size, ensuring a great user experience across all devices. In this article, we'll walk you through the process of building a basic responsive website using HTML and CSS.

Prerequisites

Before you begin, you should have a basic understanding of HTML and CSS. Familiarity with CSS Flexbox and media queries will also be beneficial.

Step 1: Setting Up Your Project

Start by creating a new project folder and adding the following files:

  • index.html: The main HTML file.
  • styles.css: The CSS file for styling the website.

Step 2: Structuring Your HTML

Open index.html and add the basic HTML structure that you want it can be anything:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Responsive Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Welcome to My Website</h2>
            <p>This is a simple responsive website built with HTML and CSS.</p>
        </section>
        <section id="about">
            <h2>About Us</h2>
            <p>We provide excellent web development services.</p>
        </section>
        <section id="services">
            <h2>Our Services</h2>
            <p>We offer a wide range of web development services.</p>
        </section>
        <section id="contact">
            <h2>Contact Us</h2>
            <p>Feel free to reach out to us for any inquiries.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Responsive Website</p>
    </footer>
</body>
</html>

Step 3: Styling Your Website

Next, open file styles.css and start by adding some basic styles:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
}

header h1 {
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 0 1rem;
}

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

main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Step 4: Making It Responsive

To make the website responsive, we'll use media queries. These allow us to apply different styles based on the screen size. Add the following media Queries to styles.css:

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    main {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }

    nav ul li {
        margin: 0.25rem 0;
    }

    main {
        padding: 0.5rem;
    }
}

Step 5: Testing Your Website

Open index.html in a web browser and resize the browser window to see how the layout adjusts for different screen sizes. You should see the navigation menu stack vertically and the padding around the content decrease as the screen width decreases.

Finally

You've now built a simple responsive website using HTML and CSS! This example covers the basics of structuring a web page and using media queries to create a responsive design. As you gain more experience, you can explore advanced techniques such as CSS Grid, Flexbox, and responsive images to create more complex and dynamic layouts.

Stay tuned!!!


This content originally appeared on DEV Community and was authored by Egbo Michael


Print Share Comment Cite Upload Translate Updates
APA

Egbo Michael | Sciencx (2024-07-30T13:25:31+00:00) Building Your First Responsive Website with HTML and CSS. Retrieved from https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/

MLA
" » Building Your First Responsive Website with HTML and CSS." Egbo Michael | Sciencx - Tuesday July 30, 2024, https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/
HARVARD
Egbo Michael | Sciencx Tuesday July 30, 2024 » Building Your First Responsive Website with HTML and CSS., viewed ,<https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/>
VANCOUVER
Egbo Michael | Sciencx - » Building Your First Responsive Website with HTML and CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/
CHICAGO
" » Building Your First Responsive Website with HTML and CSS." Egbo Michael | Sciencx - Accessed . https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/
IEEE
" » Building Your First Responsive Website with HTML and CSS." Egbo Michael | Sciencx [Online]. Available: https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/. [Accessed: ]
rf:citation
» Building Your First Responsive Website with HTML and CSS | Egbo Michael | Sciencx | https://www.scien.cx/2024/07/30/building-your-first-responsive-website-with-html-and-css-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.