Responsive Website — Making Websites Look Good on All Screen Sizes

Hi everyone!

Today we are going to explore something essential in web development, especially for those of us who want our websites to look great across every kind of screen. That topic is responsiveness. Once we understand the basics of CSS layout, the next important step is learning how to ensure our design adapts beautifully across a wide range of screen sizes — from large desktop monitors to compact mobile phones.

Let us try something fun together. Open any website, then slowly reduce the width of your browser window. Do you notice how the layout adjusts? Perhaps a wide navigation bar becomes a small button, or a row of images stacks vertically. That kind of transformation is exactly what responsive design is all about. It is the practice of making sure that a website remains functional, user-friendly, and visually pleasing, no matter the device used to view it.

To make this happen, CSS gives us some powerful tools and techniques. Let us go through them one by one and see how they work in practice.

Media Queries

Media queries are one of the main features in CSS that help us adapt the design based on screen size. They allow us to apply specific styles only when certain conditions are met. These conditions usually relate to the width of the screen, often called breakpoints.

Here is a basic example:

@media (max-width: 600px) {
  .navbar {
    display: none;
  }
}

This rule hides the navigation bar when the screen is 600 pixels wide or smaller. We can create multiple breakpoints for different devices such as tablets, phones, and desktops. Media queries give us precise control over how our layout behaves on each device.

CSS Grid

If we need a structured layout with rows and columns, CSS Grid is a great solution. It provides complete control over two-dimensional layout design. Here is an example of how we can create two columns and three rows:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px 200px;
  gap: 30px;
}

We can even make certain elements span across multiple rows or columns. This is perfect for organizing headers, main content areas, sidebars, and footers in a clean and structured way. Grid is extremely powerful when we want precision in layout alignment.

Flexbox

When the layout goes in a single direction — either horizontal or vertical — Flexbox shines. It is easy to use and helps us build flexible designs that adjust automatically based on space.

Suppose we have a row of boxes and want them to share space equally. Here is how we can do it:

.container {
  display: flex;
}
.card {
  flex: 1;
}

This gives each card equal space. We can also change the proportions:

.card:first-child {
  flex: 2;
}
.card:nth-child(2) {
  flex: 0.5;
}

Flexbox is great for distributing space, aligning content, and adjusting to different screen sizes without too much code.

Bootstrap

Sometimes we want to move faster without writing all the CSS ourselves. That is where Bootstrap becomes useful. It is a powerful CSS framework that provides pre-designed classes for layout, typography, buttons, and more. Bootstrap is based on Flexbox and comes with built-in responsiveness.

For example, here is how we can define columns:

<div class="col-6"></div>
<div class="col-2"></div>
<div class="col-4"></div>

Bootstrap uses a 12-column system. So a col-6 takes half the width of the container. We can also use responsive classes like col-md-6 or col-lg-4 to define how things should appear on medium or large screens. This makes it easy to design layouts that work well everywhere.

Final Thoughts

So friends, those are the four main tools for creating responsive websites:

• Media Queries

• CSS Grid

• Flexbox

• Bootstrap

Each has its own strengths. In many cases, combining them gives the best result. Think of them as tools in a toolbox — use whichever fits the job.

In our upcoming lessons, we will take a closer look at each technique, beginning with media queries, so we can learn how to use them effectively.

While waiting, feel free to open the practice project called 8.2 Responsiveness in VS Code. Try resizing the browser window, adjusting layout styles, and applying different breakpoints. Play with media queries, flexbox rules, and even try a bit of grid.

Let us keep exploring and building amazing things together. See you in the next session!

Baca juga