Part 1

Info

In this lesson, you'll learn how to make websites look great on any device. Responsive design is one of the most important skills in modern web development. We'll cover media queries, flexible grids, and mobile-first design strategies.

Before we begin, make sure you've completed the previous chapters on HTML and CSS fundamentals. This lesson builds directly on the box model concepts from Chapter 3.

More

A media query lets you apply CSS rules only when certain conditions are met, like the viewport being a specific width. Here's the basic syntax:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 16px;
  }
  .sidebar {
    display: none;
  }
}

The max-width: 768px condition targets screens narrower than 768 pixels. Inside the block, you can override any CSS property. The video above demonstrates building a responsive navigation component step by step.

Flexible Grid Example

Instead of fixed pixel widths, use relative units like percentages or fr units with CSS Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

This creates a grid that automatically adjusts the number of columns based on available space. Each column is at least 280px wide and expands to fill remaining space equally.

Mobile-First Approach

Start with styles for the smallest screens, then use min-width queries to add complexity for larger screens. This results in simpler CSS and better performance on mobile devices.

/* Base styles: mobile */
.nav { display: none; }

/* Tablet and up */
@media (min-width: 768px) {
  .nav { display: flex; }
}

/* Desktop */
@media (min-width: 1024px) {
  .nav { gap: 32px; }
}