Latest Update: 20 April 2021

Learn CSS Media Queries (mobile-first vs desktop-first) through practical tasks

Media Queries are a key when it comes to building responsive layouts, it allows you to show different layouts based on different screen sizes. But how to use it correctly?

In this tutorial, we will learn by solving different practical task according to 4 topics:

  • Mobile-first approach

  • Desktop-first approach

  • Orientation

  • More complex media queries

Resources

To follow along, download the sources or access the design here.