How to Build a Responsive Website from Scratch

Building a responsive website is an essential skill for any web developer in today’s mobile-first world. A responsive website automatically adjusts its layout and content based on the size of the screen it’s being viewed on, providing an optimal experience on desktop, tablet, and mobile devices.

This guide will walk you through the steps of building a simple, responsive website from scratch, using HTML, CSS, and some basic JavaScript.

1. Set Up Your Development Environment

Before you start building your website, you need to set up your development environment.

Code Editor: Install a code editor like Visual Studio Code, Sublime Text, or Atom.
Browser: Make sure you have a modern web browser like Google Chrome or Firefox for testing your website’s responsiveness.
Version Control (Optional): If you want to track changes to your code, consider using Git and GitHub.

2. Create Your Project Folder

Create a folder structure for your project. Here’s a basic structure:

/my-responsive-site
  /index.html
  /styles.css
  /scripts.js
  /images

This will help you organize your HTML, CSS, JavaScript, and assets (like images).

3. Set Up the HTML Structure

Start by creating the basic structure of your webpage in the index.html file. Here’s a simple HTML template:

<!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>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Welcome to My Responsive Website</h1>
      <p>Building websites that work on all devices</p>
    </section>

    <section class="content">
      <h2>About Us</h2>
      <p>This is a sample responsive website.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 My Responsive Site</p>
  </footer>

  <script src="scripts.js"></script>
</body>
</html>

Meta Viewport Tag: This is crucial for responsiveness. It ensures that the website scales properly on different devices.
Basic Sections: The page has a navigation bar, a hero section, content section, and a footer.

4. Write the CSS for Styling

Next, style your website using CSS. Open your styles.css file and write the basic styles.

/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

main {
  padding: 20px;
}

.hero {
  text-align: center;
  padding: 50px 20px;
  background-color: #f4f4f4;
}

.hero h1 {
  font-size: 2.5em;
}

.content {
  margin: 30px 0;
}

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

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

  .hero h1 {
    font-size: 2em;
  }

  .content {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5em;
  }

  .content h2 {
    font-size: 1.5em;
  }
}

Key Concepts:

Mobile-first Design: The default styles are designed for mobile, and then we use media queries to adjust for larger screens (tablets and desktops).
Flexbox: Used for the navigation bar (nav ul) to create a flexible layout that can easily switch between horizontal and vertical alignment.

Media Queries:

The @media queries adjust the layout for different screen sizes:
- max-width: 768px targets tablets.
- max-width: 480px targets smaller mobile devices.

5. Make the Website Responsive

The responsive part of the website is handled mainly through CSS and the meta viewport tag in HTML. As you saw in the CSS file, the media queries ensure that the layout adjusts to different screen sizes.

Mobile-first: By default, the website is designed for mobile screens. Then, as the screen width increases, the layout is adjusted to accommodate tablets and desktop screens.
Navigation Bar: On mobile devices, the navigation bar items will stack vertically, making the menu easier to tap. On larger screens, the navigation will appear horizontally.
Hero Section: The size of the text and padding in the hero section adjusts based on the screen size, ensuring it remains visually appealing on any device.

6. Add Interactivity with JavaScript (Optional)

While basic websites don’t always require JavaScript, you might want to add interactivity such as a hamburger menu for mobile devices.

Here’s an example of how you might create a simple hamburger menu for mobile screens:

<button class="hamburger" onclick="toggleMenu()">☰</button>

Add this to your index.html where you want the hamburger icon to appear (usually above the navigation).

Then, in styles.css, hide the menu on smaller screens and display it when the button is clicked:

/* Hide menu on small screens */
nav ul {
  display: none;
}

.hamburger {
  font-size: 30px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

@media (max-width: 768px) {
  nav ul {
    display: block;
  }
}

Finally, in scripts.js, create a function to toggle the menu visibility when the hamburger button is clicked:

function toggleMenu() {
  const nav = document.querySelector('nav ul');
  nav.style.display = nav.style.display === 'block' ? 'none' : 'block';
}

7. Test and Debug

Testing your website is crucial. Check how it performs across various devices and screen sizes:

Resize the Browser Window: Use the browser’s built-in developer tools to simulate different screen sizes and ensure the layout looks good on all devices.
Test on Real Devices: Check how your website looks on actual mobile phones, tablets, and desktops.

8. Launch Your Website

Once you’re satisfied with your responsive website, it’s time to launch it. You can host it using various platforms like:

GitHub Pages (for static websites)
Netlify
Vercel
AWS, DigitalOcean, or other web hosts (for dynamic websites)

Simply upload your files to the server or hosting platform of your choice and share the URL with your audience!