Learn CSS: Media Queries for Beginners - CSS Tutorial

Learn how to write a media query in this step by step CSS tutorial for beginners, including how min-width and max-width work, how to choose your breakpoints, why you might want to write your media queries inline instead of grouping them at the end of your stylesheet, and other tips and tricks for mobile-first web design and development.

Chapters in this video:
[00:00] What is responsive CSS?
[00:23] What are media queries in CSS?
[01:38] How to write a media query rule in CSS
[02:43] Put a CSS rule inside the media query and test that it works
[03:25] Add a media query to the second box
[04:27] How to choose breakpoints (minimum width values)
[06:06] Writing media queries as a group instead of inline
[07:41] Why I prefer to write media queries inline
[09:21] Writing mobile-first media queries
[10:54] When and how to use max-width for media queries
[12:29] Closing remarks