Building a Responsive Website with HTML and CSS: A Step-by-Step Guide

In today’s digital era, having a responsive website is very important. A responsive website means its appearance and features can adjust to any screen size, whether on a computer, tablet, or smartphone. With HTML and CSS, you can build a website that looks good and is easy to access on any device. This article will guide you step by step on how to create a responsive website using HTML and CSS.

1. Initial Preparation

Before you start building your website, make sure you have a text editor like VSCode, Sublime Text, or Notepad++. Create a new project folder to store all your website files.

2. Create the Basic HTML Structure

First, create a file named index.html. Here’s an example of a basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Responsive Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My 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>Section Title</h2>
      <p>This is an example of a responsive website content.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

Explanation:

• The <meta name="viewport"...> tag is important so the website adjusts to the device screen.

• The CSS file is linked using <link rel="stylesheet"...>.

3. Create the CSS File

Next, create a style.css file in the same folder. Here’s a basic example:

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

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

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

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

nav ul li {
  margin: 0 15px;
}

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

main {
  margin: 20px 0;
}

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

4. Add Responsiveness with Media Queries

To make the website truly responsive, you need to add media queries. Media queries are CSS rules that adjust the layout based on screen size.

Example for adjusting navigation:

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

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

Explanation:

• If the screen width is below 768px (typical for tablets and smartphones), the navigation menu will stack vertically to make it easier to read.

5. Test the Website on Different Screen Sizes

After writing the HTML and CSS, test your website on different screen sizes. You can resize your browser window or use the Developer Tools feature to simulate other devices.

6. Extra Tips

• Use flexible images (set max-width: 100% in CSS).

• Avoid fixed widths on elements.

• Use relative units like em or % for more flexible sizing.

Conclusion

Building a responsive website is not difficult if you understand the basics of HTML and CSS. With regular practice, you can create a website that looks good on any device. Keep experimenting and improve your coding skills.