CSS - Responsive Design

Jun 19, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Review Quiz Certification project

Instructors: Jess, Carmen, and Eda

Responsive Design

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Best Practices for Responsive Design: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?

There are three main components to a responsive design:

Some CSS features we can use for creating responsive designs are:

Best Practices for Responsive Design: How Do Media Queries Work, and What Are Some Common Media Types and Features?

A media query consists of a media type and one or more media features that check for specific conditions to apply the styles.

Commonly used media types are:

(There are some old types such as handheld and tv that are now deprecated!)

Commonly used media features are:

1@media screen and (min-width: 768px) {
2  /* Styles for screens at least 768px wide */
3}
1@media screen and (aspect-ratio: 16/9) {
2  /* Styles for screens with a 16:9 aspect ratio */
3}
1@media screen and (orientation: landscape) {
2  /* Styles for landscape orientation */
3}
1@media screen and (min-resolution: 300dpi) {
2  /* Styles for high-resolution screens */
3}
1@media (hover: hover) {
2  /* Styles for devices that support hover */
3}
1@media (prefers-color-scheme: dark) {
2  /* Styles for dark mode */
3}

Different media features can be combined and we can use not keyword to negate, and only keyword to isolate media queries:

1@media screen and (min-width: 768px) and (orientation: landscape) {
2  /* Styles for landscape screens at least 768px wide */
3}

To target multiple media queries, we can separate them with commas:

1@media screen and (min-width: 768px), print {
2  /* Styles for screens at least 768px wide OR for print */
3}

Within each media query, the normal rules of the CSS cascade still apply.

The “mobile-first” responsive design is creating a base style for mobile devices first, then using media queries to improve layout for larger screens. We’ll see it more in its own lesson below.

Best Practices for Responsive Design: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?

Using media queries, we can define media breakpoints to apply different styles based on, usually, the device’s viewport width.

Commonly used values for media breakpoints are:

Another approach is:

There’s even another one:

These are not strictly defined values, but they are just commonly used practices.

Best Practices for Responsive Design: What Is the Mobile First Approach in Responsive Web Design?

The mobile-first approach is about designing for mobile devices first as a base, then defining designs for larger screens. It’s different from the traditional approach where we first design for larger screen devices and then consider mobile devices.

Many users around the globe nowadays access the Internet through mobile devices, so this is a good approach to designing and developing websites.

Another concern is performance optimization. Mobile devices have less processing power and may be connected to slower networks.

Mobile-first approach makes us think about deciding the absolutely essential content for our websites. Since Google uses mobile-first indexing, this approach is also good for SEO and potentially improves the website’s visibility.

One example of a mobile-first design may look like this:

1<div class="container">
2  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
3  <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
4  <p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
5</div>
 1/* Base styles for mobile */
 2.container {
 3  width: 100%;
 4  padding: 15px;
 5}
 6
 7/* Styles for tablets */
 8@media screen and (min-width: 768px) {
 9  .container {
10    width: 750px;
11    margin: 0 auto;
12  }
13}
14
15/* Styles for desktops */
16@media screen and (min-width: 1024px) {
17  .container {
18    width: 960px;
19  }
20}

Design a Piano

In this fun exercise, we’ll practice what we’ve learned so far and create a responsive piano design!

Responsive Web Design Review

In this unit, we’ve explored:

Build a Technical Documentation Page

This exercise goes over some HTML and CSS concepts that we’ve learned so far!