How to Build a Responsive Website Using HTML and CSS: A Step-by-Step Guide

Med Ali Jerbi

Creating a responsive website is essential in 2025, as users access content from various devices. This guide will walk you through the basics of building a fully responsive site using HTML and CSS.

1. Setting Up the Basic HTML Structure

Start by creating an index.html file with the essential structure:

<!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</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Welcome!</h2>
        <p>This is a responsive website.</p>
      </section>
    </main>
  </body>
</html>

2. Applying Basic CSS for Layout

Create a styles.css file and define a responsive layout using flexbox and media queries:

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

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

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

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

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

main {
  padding: 20px;
  text-align: center;
}

3. Making the Website Responsive

Use media queries to ensure the website adapts to different screen sizes:

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

4. Using Flexbox for Better Layout Control

Flexbox allows for easy alignment and spacing:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

5. Adding Responsive Images

Ensure images scale correctly:

img {
  max-width: 100%;
  height: auto;
}

6. Testing the Responsive Design

Use browser developer tools (F12 or Cmd + Opt + I on Mac) to test responsiveness on different screen sizes.

Building a responsive website with HTML and CSS is essential for modern web development. By using media queries, flexbox, and responsive images, you can create an adaptable design that works across all devices. 🚀