Starting with Media Queries

By the end of this section you will know the basics of media queries and will know how to create custom layouts based on the output type.

Duration: 24:41

Created with

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

Starting with Media Queries Overview

What you'll learn

Media queries are at the heart of responsive design and more. While our core topic of this course is responsive design, this first section is going to be dedicated exclusively to media queries. In this section we will focus on the core building blocks that help us recognize and identify features of the users output device. By the end of this section you will know the basics of media queries and will know how to create custom layouts based on the output type (for example print vs. screen)

What are media Queries?

In this course we will learn how to control these parameters to create sites that look fantastic no matter how they are consumed.

04:17

Media Queries Hello World

By the end of this lesson, we will know how to define media type per CSS file.

07:18

Media Queries within a CSS file with the @media rule

By the end of this lesson you will know the two ways to define media query rules.

04:09

Media Query rule combination

In this lecture we will learn to create more advanced media rules with the help of %u201Cand%u201D.

08:57

Download Source Files