Learn CSS Media Queries (mobile-first vs desktop-first) through 4 Practical tasks - CSS tutorial

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?

__________ 🔖 Tutorial Structure __________

- Intro --
[00:00] - Introduction
[00:45] - Setup walkthrough

-- Main --
[01:15] - Task 1 - Mobile-first approach
[04:52] - Task 2 - Desktop-first approach
[08:33] - Task 3 - Orientation
[10:54] - Task 4 - More complex media queries

-- Ending --
[13:58] - Summary
[15:10] - Happy Coding

__________ 🐣 About me __________

[ThuongNguyen-kmvg]

It helps me so much. Thanks a lot from Vietnam.

[mardocheemeyi]

this video was so helpful, I directly found out was I was doing wrong .
thank you sir.

[markanthonylabajo]

Thank you! I am learning media queries and mobile 1st design atm. Your video helped me a lot!

[KING]

This was awesome, clear, and concise.

[somynameisabid]

This is exactly what I needed, thank you.

[agrawalhimanshu]

I have confusion of min-width and max-width in media query...thanks for resolving that confussion...LOVE FROM INDIA

[Vanilthas]

I'm watching your tutorials at devchallenges, pls continue!!! You're making great things <3

[TheGoonkid]

Very nice job, it was super helpful and very straightforward, keep it up.

[kymjones]

While I'm new to coding, I'm wondering if all of this extra coding for each device is really neccessary, when VSCode automatically gives 'content="width=device-width, initial-scale=1.0' in the boilerplate, while a manual setting of max-width at 480px @media-queries at the bottom of the style sheet *should* accomodate the rest. But as I'm new to this, perhaps I've missed something. So I would really appreciate it, if someone could set me straight on this.

[danycompservisracunara]

Dev. doctor, "CSS Grid" @media q doesn't need a break gaps, that's why it's a "Grid" CSS. Come on doctor, show to youn developers a web page combined with CSS Grid and CSS Flex