Skip to main content

How to Create a Responsive Website Using CSS - A Step-by-Step Guide.

Introduction

Creating a responsive website is not an option, It's number one priority for a developer to make a website responsive. A responsive website adjusts according to different screen sizes, providing an optimal user experience on desktops, tablets, and mobile devices.

For creating a responsive website, You don't need JavaScript to make your website responsive, HTML and CSS are enough. In this guide, we will walk through the key techniques to build a fully responsive web page from scratch.

Why is Responsiveness Important?

A responsive website offers several benefits, including:
  • Better User Experience - Ensures your content is readable on all devices.
  • Improved SEO Ranking - Mobile-friendly websites rank higher in search results.
  • Faster Loading Times - Optimized layouts prevent unnecessary resource consumption.
  • Increased Engagement - Users stay longer on a site that adapts well to their screen.
Now, let's dive into the essential techniques to create a responsive web page.

 1. Implement a Responsive Layout with CSS

Creating a responsive web page you should use CSS Flexbox and Grid. It structures your web page efficiently and rendered it properly. Using CSS Flexbox or Grid allows you to create a flexible layout that adjust based on screen size. Flexbox is used to arrange elements in a single direction. It is perfect for sidebars, buttons and navigation bars.

Grid, in contrast, offers a two-dimensional layout system, making it ideal for building complex and fully responsive designs. By leveraging these features, you can make your web page dynamically adjust to various screen sizes, improving the overall user experience.

HTML Code:

  <div>
    <header>
      <h1>Responsive Web Page</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Tutorial</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section class="container">
      <div class="item">Demo Block 1</div>
      <div class="item">Demo Block 2</div>
      <div class="item">Demo Block 3</div>
    </section>
    <footer>
      <p>&copy; 2025 Codelearner.in All Rights Reserved.</p>
    </footer>
  </div>

CSS Code :

 
/* Header */
  header {
    background-color: #333;
    color: white;
    padding: 20px;
  }

  /* Navigation Bar */
  nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #444;
    margin: 0;
  }

  nav ul li {
    padding: 15px;
  }

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

  /* Responsive Flexbox Layout */
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
  }

  .item {
    flex: 1;
    padding: 20px;
    background-color: #f4f4f4;
    margin: 10px;
  }

  /* Responsive Grid Layout */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
  }

  /* Footer */
  footer {
    background-color: #333;
    color: white;
    padding: 15px;
    margin-top: 20px;
  }

2. Use Media Queries for Responsive Breakpoints

CSS media queries enable developers to adjust styles dynamically according to different screen sizes, ensuring a fully responsive design. By defining breakpoints, you can adjust the layout, font sizes, spacing, and other design elements to enhance user experience across different devices. This ensures your web page remains visually appealing and functional, whether viewed on desktop, tablet, or smartphone.

HTML Code:

    <header>
        <h1>Responsive Web Page</h1>
    </header>
    <main>
        <section class="container">
            <div class="box">Demo Box 1</div>
            <div class="box">Demo Box 2</div>
            <div class="box">Demo Box 3</div>
        </section>
   </main>

CSS Code :


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

  /* Default Layout (Desktop View) */
  .container {
      display: flex;
      justify-content: space-around;
      padding: 20px;
  }

  .box {
      width: 30%;
      padding: 20px;
      background-color: lightblue;
      margin: 10px;
  }

  /* Responsive Design for Tablets */
  @media (max-width: 768px) {
      .container {
          flex-direction: column;
          align-items: center;
      }
      .box {
          width: 70%;
      }
  }

  /* Responsive Design for Mobile */
  @media (max-width: 480px) {
      .box {
          width: 100%;
          padding: 13px;
      }
  }

3. Use Relative CSS Units

Instead of using absolute units like px, cm or mm, it's better to use relative units like %, em, rem, vw, and vh to create a more flexible and responsive design. Absolute units do not adapt to different screen sizes, while relative units adjust dynamically based on different screen size. These units allow elements to adapt to the screen size, that maintain websites layout on various devices.

For instance % adjusts an element's size relative to its parent container, rem is based on the root font size, and vw/vh adjust according to the viewport dimensions. This makes your design more flexible and user-friendly.

HTML Code:

    <header>
        <h1>Responsive Web Page</h1>
    </header>
   
    <section class="container">
        <div class="box">Demo Box 1</div>
        <div class="box">Demo Box 2</div>
        <div class="box">Demo Box 3</div>
    </section>

CSS Code :

  /* Header with relative font size */
  header {
    background-color: #333;
    color: white;
    padding: 2vh; /* 2% of viewport height */
  }

  h1 {
    font-size: 3rem; /* 3 times the root element's font size */
  }

  /* Responsive Container */
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw; /* 2% of viewport width */
    padding: 5%;
  }

  /* Boxes with Relative Sizing */
  .box {
    width: 30%; /* 30% of the parent container */
    padding: 2em; /* 2 times the parent element's font size */
    background-color: #f4f4f4;
    margin: 1vw; /* 1% of the viewport width */
    border-radius: 1rem; /* 1 times the root element's font size */
  }


4. Optimize Images for Responsiveness

Its good practice to use image optimization for responsive design. It can easily resize according to different screen sizes and does not overflow from its parent container, which helps enhance the user experience and improve rankings.

HTML Code:

    <div class="image-container">
        <h2>Responsive Image Example</h2>
        <!-- put image on the src attribute -->
        <img src="image.jpeg" alt="Example Image">
    </div>

CSS Code:

    /* Making the image responsive */
    img {
        max-width: 100%; /* Ensures the image does not exceed its container */
        height: auto; /* takes height according to width */
        display: block;
        margin: 0 auto; /* Center the image horizontally*/
    }

    /* Responsive container */
    .image-container {
        width: 80%; /* Adjusts based on screen size */
        max-width: 600px; /* Prevents image from getting too large */
        margin: auto;
        padding: 20px;
        text-align: center;
    }

Conclusion

In this blog, we explored how to create a responsive website and understood how flexible layouts work. We also covered media queries for breakpoints, relative units, and responsive images, which help in creating a fully responsive website that looks great on any device.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Leetcode SQL 50 interview questions with solution: A Guide for Coders

Introduction Hi coders, In this blog, we will tackle SQL questions from LeetCode. If you're a coder, a computer science student, or simply interested in coding, you may be familiar with LeetCode. It's a platform where coding enthusiasts practice problems to enhance their critical thinking and problem-solving skills. Most of us practice programming questions on leetcode so here we practice SQL questions which is taken from leetcode. We'll start with basic SQL questions focused on SELECT , joins, and aggregate functions. Once we've covered these foundational topics, we'll transition to more advanced concepts. Before diving into the questions, ensure you have a basic understanding of SQL syntax and statements, including SELECT , various joins (self join, left join, right join, outer join), and basic aggregate functions. Here are some SQL interview questions with solution: Q1 1757. Recyclable and Low Fat Products SELECT product_id FROM Products WHERE low_fats ...
Post a Comment
Read more

What is Git and GitHub. Difference Between Git and GitHub. Workflow of Git.

Introduction In this blog, we will dive into a Git and GitHub, understand their differences, and go over the typical workflow when using GitHub. Whether you are new to version control or simply curious about how these tools work together, this guide will walk you through the essential concepts and processes you need to know. What is Git? Git is a Distributed Version Control System (DVCS) that efficiently manages code changes across multiple contributors. It helps developers to monitor and manage changes in their code efficiently. Git was created by Linus Torvalds on April 7, 2005. It is widely used in developer community for its collaborative features, allowing developers to work on the same project, whether the project is small or large. You can efficiently monitor code modifications and preserve a detailed history of changes. Git is free and open-source, designed to handle everything from individual projects to complex ones. Developers can track every modification, create branches fo...
Post a Comment
Read more