Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Вставка
- Опубліковано 26 чер 2024
- Start creating responsive layouts with confidence with my free responsive layouts course: courses.kevinpowell.co/conque...
Quickly learn how to using CSS media queries. In this video, I explore what media queries are and how you can start using them right away.
If you know how to write your own CSS, you'll be able to figure out media queries pretty quickly! All you need to do is assign new CSS rules at specific screen sizes.
This is just a brief introduction, but it should be enough to get started in the world of responsive web development.
If you're after a little bit of extra reading about CSS Media Queries, here you go:
@media - CSS | MDN - developer.mozilla.org/en-US/d...
Using Media Queries - MDN - developer.mozilla.org/en-US/d...
CSS Media Queries & Using Available Space | CSS Tricks - css-tricks.com/css-media-quer...
--
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
--
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell/
5 MINUTES, 5 MINUTES . HE DID IT IN 5 MINUTES AND EVERYONE GOT THE POINT, DUDE YOU'RE COOL
Wow, awesome. The effectiveness of these four minutes is many times greater than the effectiveness of hourly vids of the same subject. Thank you kindly.
holy crap i have been on a 4h course about this and you explain it in 5 minutes, and better! thx
Haha, hopefully it just helped things from that 4 hour course click, lol. Glad it helped you out!
That’s because Kevin clearly cares about his audience and the content he articulates. A lot of other instructors just want to make $$ or draw lessons out to appear more valuable, imho
Thanks Kevin, I honestly think I'm learning more from you than my instructor in my full stack class. I appreciate it!!
As soon as the video reached 3 minutes I hit the subscribed button. I was thinking media query is something very huge and monsterous but hey.....you explained it in simple simple words. It's actually people like you who make programming fun. Kudos Kevin!!
same, still a great video!
aah, you're brilliant for this! im in college taking a course for css and have been learning abt media queries, but it wasn't really sticking for me until I found your video.
I literally spent hours watching the college course video but I learned more from your quick 5 min video. for some reason I learn better when it's quick & to the point. thanks again:)
I spent a whole Saturday trying to understand media queries. Thank you for this video! I am not feeling overwhelmed anymore! Following!
I'm so glad the video helped!
that is exactly what i'm going through right now... had a long period of intense frustration today (saturday lol) trying to understand this but now i am starting to grasp it!
It is totally worth it.
5 min videos saves my frustrations and hour of time
Thank you
I have been looking at my assignment for weeks now not knowing where I was going wrong. Amazing how a 5 minute video can clear things up so quickly. Cheers bud!
I am just starting to learn how to code and this was extremely helpful. Please please please keep posting short tutorials like this - very helpful!!
This is great! A 5-minute intro/blast is all I need..and with a couple of your curated links below, it is perfect to get me up and running! Note: a "series" of 5 minute videos, each covering a specific topic within the main topic (in a playlist format) would be the best of all worlds! Thanks so much Kevin!
I have trouble staying under 5 minutes, lol. That was the plan when I created this video, and I do have a coding quickies series, but things tend to drag out most of the time.
The one line that changes everything "the last rule always wins" Untill I heard this I spent hours getting nowhere Thanks great tutorial !! and nice a sucsinct.
It's so hard to code most of the time, I don't even know why I'm doing it at this point.
@@scriptonly8728 the thing is you bang your head on the wall for a week, then it all falls into place and you wonder why it ever seemed so difficult! Thats why you can keep going the successes get you there 😂😂
This is exactly what I was thinking.. I almost gave up until I found this video and comment. 🤣🤣
@@seantivenan9593 that was me learning traversals in JavaScript.
Thanks for the quick rundown, exactly what I needed~
Glad to hear that! Glad it helped.
Media queries almost seem "simple' now! After hours in class, I should have known it was so easy!
Thank you
I'm glad the video helped to make it easier to understand!
This was amazingly helpful! It’s always the mark of a good teacher who can break down these subjects quickly and easily, and this was exactly the primer I needed.
Glad that it helped you out, and thanks for the kind words!
Your speed of content delivery is just so right. Thanks a lot.
Hi Kevin, always the best tutorials. I feel 10-15 mins is the best for someone who wants to learn something new.
Loved this '5-minute' format! Although I have been following your other tutorials for responsive webdesign, I had a 'quick question' and got the 'quick-answer'.
That is so what I was looking for. Fast concepts to better grasp CSS. Thank you so much.
The only CSS refresher Video Series I watch .
What I love is how these are great quick reminders for beginners and devs who have been writing/editing code but occasionally forget certain things
Great video! The topics were covered so quickly and now I feel more confident in designing responsive websites.
I was struggeling with media queries, but this video explains them perfect. Thanks man
Awesome video. Short, precise and super informative. Covered everything I needed to know about media queries without being verbose. Thanks!
GREAT 5 min intro that pointed out the basics!
Just recently started learning about responsive design and this video although covering a relatively basic concept still helps tremendously! Thank you!
No problem at all, glad you liked it :)
The best media query tutorial on UA-cam 😍
love this 5 minute format. as an experienced coder i don't need the long version. ty
I appriciated it a lot with just 5 mins. As you say if you just need a quick info to move on in the project, it's a hell to watch 25 mins to be sure not to miss anything important :)
Awesome :) thank you. - I was stuck for 4 hours during an online course. and you explained it flawlessly in 5 minutes. - Thank you.
No problem Robert, I'm happy that I was able to help :)
Awesome video!!! Exactly what I needed and totally understandable! Thanks Kevin!
Wonderful tutorial short, and to the point, thank you!
Short, sweet and to the point. I love it...
I really appreciate how you cut out the fluff and get to the point! Very helpful video.
No problem! I tend to add lots of fluff to my videos (I go waaay to indepth sometimes, lol), but am happy with how this one turned out and have plans for more short ones like this going forward!
Love this video! I just wanted my media query skills to be refreshed and this video is perfect for that. Thank you 😀
I liked the video. It's straight to the point. You should do more of these.
Great video, straight to the point and clear content. Thanks Kevin
This changed everything. Thank you.
Until your consice and logical explanation I struggled with media queries. Good job. Looming forward to more from your channel.
Fantastic! I just came over from your tutorial to build a portfolio site. I love the idea for 5-minute tutorial series! Thank you!
wow,,,,,for the first time learned about using landscape and portrait within media query... very informative video. thanks...
Thank you - right to the point and you focused in on the code so we could actually see what you were doing.
Brevity and concise! Clear and awesome thank you!
hi, I like these 5min videos, straight to the point ! thank you
Kevin Thank you so very much, so concise and easy !!
Love every bit of this video, Keep up the Great Work !!
It works really well, your explanation is straight to the point. Many thanks
bravo! I love this 5 min concept. Well done and right on point!
Concise and clear, thank you!
Simple and straight forward
5 mins and you know enough to start getting your hands dirty. Perfect approach. Thanks a lot..
It was really helpful. Thanks Kevin!
Very efficient and helpful !
Thank you
Kevin, you really are the best.
thanks, exactly what was looking for! skipped half of the video, understood in just few words, very nicely done!
Nicely done!! Please make more such videos!
Awesome ... This was the fastest I've ever got a question answered and was able to put it to use right away. Great job.
Super happy to hear that Terry!
Thank you for the great instruction Kevin.
AWESOME! This helped so much now I know where I'm going wrong thank you. Yes, the long videos are too much for idk.
Thanks a lot. Very concise yet informative.
Awesome video thank you for making it super fast and to the point of what media queries are I totally understood the concept and now I can move on lord willing from a problem I've been stuck on for a project for the pass 2 weeks. 😅
yo dude, i'm normaly a bit more of a backend guy. But i had to do frontend for this project that we have atm. This explained everything i need. tnx and the best to you :D
Short and useful. Good job, thank you.
This has been very helpful... thank you!
How did i just find this channel now.. this is what i want in a tutorial channel for sure.
Hi, @Kevin Powell very helpful quick tutorial
Perfect! Thank you for saving my time
Everthing was wonderfull and full informative.
thanks bro....In just 5 minutes i got media-query.u r cool
Literally a life saver!!!!!
Thanks a lot for this video! Much appreciated
love your instruction videos, super helpful man.
Thank you so much!!! Helped me!!! you really made my day. Keep it up bud and stay safe and healthy!!!
Thank you so this concept was giving me so much trouble but your video explained it so clearly. Excited to build some landing pages using mobile first development after learning this!
Great video. Informative and to the point. Thank you!
Hey Kevin, you are just awesome man.. Good Work.. Keep doing. Thanks for the video.
Hey kev keep the others up as well as this format please. Love from DR
Just amazing got to know much than required. Thanks
wow, this is fast and easy to understand!
This was amazing. It cleared up some silly questions I had about media queries. Thank you!
Great to hear that it helped!
U r an amazing instructor man..... Thanks..... Subscribed ❤️.....
great explanation of why to use max-width over min-width and vice versa. I never understood why to use min-width, but designing mobile first makes sense.
Thank you. Straight to the point.
I'm a huge fan, thanks so much.
Thank you so much. It helped alot. very straight forward, clear and short.
-IT student
This helped heaps, thanks!
Great video as always.
I love you style my friend i wish there were more people like you who just cut straight to the point genuinely wanting to help when i get better in this business i will hope to do the same
Glad you liked it :D - Not all my videos are this to the point, I tend to drag things out at times! Word of warning if you start watching more of my stuff :P
I love complete details and maybe also others, so please make big videos and then cover every single detail about that topics. Thank you so much Kevin : )
For me, it depends on the topic. For something like media queries, I figured I could cover the basic concept really fast, and that through practice people would understand it more. With others, as you've seen, I do go more in depth :).
Thanks Kevin
For all details about media queries you can checkout developer.mozilla.org they have a very detailed documentation here the link developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. @kevin good job 👍🏻
Concise and to the point, awesome!
I'm glad you liked it Brian!
Thanks buddy, you saved me a lot of time, such a good explanation in short time.
Kevin our MVP! :)
Thanks a lot!
You're welcome, glad you liked it!
Helped a bunch, thank you!
Thank you. I like this video. Very clear explanation. Duration time is good.
This was totally awesome and exactly what I needed. Thank you!!!
Awesome to hear Clark, glad it helped!!
Great video; brilliant idea to do informative videos at that length.
For some topics it can be hard, but I'm happy I pulled it off for this!
Dude you are amazing!
Thank you! Great post exactly what I needed!
Glad it helped Chelsea!
Great overview, thanks!
Keep it up i love your tut videos thank you and stay safe
Dude, this is AWESOME :D