Building a Responsive Website

Learn how to build a responsive website with HTML and CSS

Step 1: Set Up Your Folder Structure and Code Editor

Before we start coding, let’s set up a clean folder structure for your project and configure a code editor. This will help you keep everything organized.

  1. Create a Project Folder: Start by creating a new folder on your computer. Name it something like `ResponsiveWebsite`. Inside this folder, create three subfolders:
    • `images/` for any images you may use in your website
    • `css/` for your CSS file
    • `js/` for any JavaScript files (optional for now)
  2. Set Up HTML, CSS, and JS Files: Open Notepad++ (or any code editor you prefer). Create a new file for your HTML code, and save it as `index.html` inside the main project folder (`ResponsiveWebsite`). Create another file for your CSS, saving it as `styles.css` inside the `css/` folder.
  3. Link Your Files Together: In your `index.html` file, link the CSS file like this: 
    <link rel="stylesheet" href="css/styles.css">
    If you have a JavaScript file, link it just before the closing `` tag: 
    <script src="js/script.js"></script>
  4. Adding Images: Place any images you want to use in the `images/` folder. You can reference them in your HTML like this: 
    <img src="images/your-image.jpg" alt="Your Image Description">

Now that your project structure is set up, we can start building our responsive website!

Screenshot folder structure for website

Step 2: Create Your HTML Structure

Let’s start by building the basic HTML structure for the page. In the `index.html` file, add the following HTML skeleton: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/styles.css">
        <title>Responsive Website</title>
    </head>
    <body>
        <header>
            <h1>Welcome to My Responsive Website</h1>
        </header>

        <main>
            <section>
                <h2>About Us</h2>
                <p>This is a responsive website built with HTML and CSS.</p>
            </section>
        </main>

        <footer>
            <p>© 2025 Responsive Website</p>
        </footer>
    </body>
</html>

This structure contains a header, main content section, and footer, all wrapped in appropriate HTML tags.

Step 3: Add Basic Styling with CSS

Now let’s make the website look good by adding some basic styles. Open your `styles.css` file and add the following: 

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

h1 {
    margin: 0;
}

section {
    padding: 20px;
    margin: 20px 0;
    background-color: white;
    border-radius: 5px;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: white;
}

This CSS will style your header, sections, and footer, giving the page a clean, minimalistic design.

Step 4: Make It Responsive

To ensure your website looks good on all screen sizes, let’s add media queries to make it responsive. Add the following to your `styles.css`: 

@media only screen and (max-width: 600px) {
    header {
        font-size: 18px;
    }
    section {
        padding: 15px;
    }
}

This media query will adjust the font size and padding when the screen width is 600px or less (typically on mobile devices).

Step 5: Test and Refine

Now, open your `index.html` file in a browser and check how it looks. Resize the browser window to see how the layout adjusts for different screen sizes. If you notice any issues, tweak your styles until everything looks great.

different views of website at different zoom levels
Back to Tutorials