10 Alternatives To Media Queries I Use A Lot

Media queries are so easy to use, that we tend to use them for every situation we can think of. In today's video I want to talk you through ten alternative ways you can write your CSS, so you can skip on the media query.
Don't get me wrong, there's nothing wrong with media queries! But I strongly believe knowing how to write styles that need less media queries, makes you a better frontend developer. In many cases it will also result in less code to maintain in the future, making your project easier to maintain.
〉 About the course
This video is a lesson that's directly taking from my Framer Motion course. In this lesson we didn't teach any Framer Motion, but rather focussed on CSS basics to become a stronger developer in general. If you want to learn more about that course head over to www.frontend.fyi/course/frame...
〉Frontend FYI Pro
The Framer Motion course is part of Frontend FYI Pro. A one time payment that gives you access to this course, and way more courses in the future, as well as a fun Discord community! Learn more at www.frontend.fyi/pro
〉🔗 Links
Read the article belonging to this lesson for free: www.frontend.fyi/course/frame...
Frontend FYI Pro: www.frontend.fyi/pro
My Framer Motion Course: www.frontend.fyi/course/frame...
〉Timestamps
00:00 - Intro
01:48 - Intro of course lesson
02:20 - Min/max width/height
05:30 - CSS Grid tricks
08:40 - Flexbox tricks
10:45 - Container queries
16:05 - CSS Math functions
18:53 - Outro
#css #frontend #webdevelopment

[@afzalnomani7561]

Thanks Jeroen, please keep uploading videos on this topic.

[@frontendfyi]

Thank you 🙏

[@hameeeed5992]

Criminally underrated channel

[@frontendfyi]

Thank you!! So kind!

[@caiohplima3918]

wtf is this quality, you should have way more subs / views

[@frontendfyi]

Thank you so much! Really appreciate it! 🙏

[@kamill34]

I would add to this list margin: mx-auto, ml-auto, mr-auto Sometimes, that's all it takes :)

[@frontendfyi]

Yesss!! Great suggestions ❤️ We often tend to make it so much more complicated than it needs to be 😁

[@sujayxaradhya]

Can we do display: none; with max-width 768px without media queries?

[@frontendfyi]

Hiding something on mobile and making it visible on desktop is not possible no. Definitely still pick a media query for that