Learn CSS Media Query In 7 Minutes

Рет қаралды 798,388

Күн бұрын

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
Responsive design is one of the most important parts of CSS in the modern web, but it is often overlooked. In this video I will be covering CSS media queries which are the easiest and most common way to create a mobile responsive web site. I will be covering absolutely everything you need to know about media queries so you can start working with them immediately.
🧠 Concepts Covered:
- What CSS media queries are
- The syntax for CSS media queries
- How to create responsive designs with media queries
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#CSSMediaQuery #WDS #CSS

Пікірлер: 583

@endlesspixels9980 2 жыл бұрын

Took me a few min of researching, but if anyone is curious on how he got that tool on his live server browser, he opened up the console and clicked on Device Mode button on the top left. It's like a button with the symbol of 2 rectangles overlapping each other. From there you can choose your device list to test as well as manually move your screen around. Very useful! Thanks a lot for this very well, quickly explained video, Kyle!

@ssanith 2 жыл бұрын

Thank you, but the first comment is the same thing

@thirddrone Жыл бұрын

does firefox have this?

@Aman_Ak47 Жыл бұрын

@@thirddroneyes bt i relied on chrome for this. Responsive design in dev tools. More tools in Firefox.

@tristanwhite5419 10 ай бұрын

I can not find the device mode button, I am on chrome. Any suggestions ?

@derealninetynine 6 ай бұрын

LoL you have to install live server extension on your vs code

@puwned 4 жыл бұрын

You might put this code in the html head section: Without this code (or similar to this;) ) media query will not execute properly. Thank me later :D

@WebDevSimplified 4 жыл бұрын

Great point. I am so uses to using Emmet for setting up my html and it does that for me

@amyp.575 4 жыл бұрын

@@WebDevSimplified How do you get Emmet to layout an HTML skeleton? From what I have seen, you have to type meta:vp at the very least. Am I missing something?

@WebDevSimplified 4 жыл бұрын

@@amyp.575 If you have a blank HTML document and type ! and then hit enter it will generate the boilerplate HTML shell with this meta tag.

@kingundfaker 4 жыл бұрын

@@WebDevSimplified why don't you pin this though? 😅

@BehruzbekOtayev 4 жыл бұрын

Emmet does it automatically. But it's good to know.

@BorgMater 4 жыл бұрын

Dude, short and concise, simply beautiful! Subscribing was never this easy and needed :D

@EduardKaresli 4 жыл бұрын

Simple and straight to the point ,as always. Thanks Kyle!

@liveyourdreamsdotbe 4 жыл бұрын

Thx for all the tutorials so far. I keep coming back to your channel because your tutorials outshine all the others in every aspect. They're to the point, not too fast or too slow, very understandable, not too long or too short, ... One tutorial I would appreciate to see is how to animate a popup div with zoom/fade in (already found that one with animate in css after display is set to block), but also how to zoom/fade out when you close the popup div before the display is set to none I have already been searching the internet, but I haven't found the answer yet.

@likepeppermint 3 жыл бұрын

This video is exactly what I’ve wanted !! Simple, easy to understand, concise, essential... Thanks Kyle! I’m really happy to find your videos

@PhyFlame 4 жыл бұрын

I somehow enjoy watching your videos just briefly covering some topics with which I'm familiar with. For this one I would however like to mention that it is extremely common to use *min-width* in media queries. This goes alongside the design philosophy called mobile first. There is less performance overhead for small screen devices which usually just happen to have less performance. Make sure to stay all the way on top. Your increasing channel size is a proof that more and more people will come into contact with such topics through you, therefore it is your responsibility to give it all your best :) Bye ~

@Fubbel42 3 жыл бұрын

Oh man finally someone who explained it in less than like 45 minutes, THANK YOU and I'm subbed 👍

@alanvallis882 4 жыл бұрын

I was having great difficulty comprehending piece of css. This Brilliant video, very concise well explained, good clear sound and good quality image has help tremendously. Excellent Many Thanks

@guillaumedupont2902 3 жыл бұрын

Dude, your course is so clear. Thanks so much. Keep on going!

@jorge88824 4 жыл бұрын

Straight explanaition. A lot of videos on youtube can't handle this, but you're a master. Watched 2-3 of your videos, but for sure those won't be the last one. Thanks!

@WebDevSimplified 4 жыл бұрын

Thank you. I'm glad my videos are able to help!

@yadday5153 Жыл бұрын

@@WebDevSimplified You're understating it, right?

@Yogesh-kr7bo 6 ай бұрын

Or press Ctrl shift m

@mikebuchanan1119 3 жыл бұрын

Your videos are really helpful. Clear, to the point, no assumed knowledge. Keep it up.

@richnimbu 2 жыл бұрын

You've got a real talent for clearly explaining things. Always enjoy your content!

@user-yh6zz3wr1e Жыл бұрын

I started coding a few months ago on my own and now I'm doing a certificate program through Mimo for front end development. You made this much easier to understand than other videos I've been trying to learn from. THANK YOU!!

@DevlogBill Жыл бұрын

Excellent video!! I was under the impression media queries was going to be a painful experience. But you proved that it was actually simple, thank you.

@vegeta4122 Жыл бұрын

I saw you have one with advanced css without mediaqueries and thought id check this watchlisted one too. Absolutely love your content, And you!! Thanks for making the web dev easy for us!!

@nikolasavic5917 2 жыл бұрын

I have been struggling with the problem of one part of my website not being well-sizeable for way too long and I found this video as perfect solution. Thank you!

@Aisha........ 2 жыл бұрын

Thank you very much! Your videos always help when ever I have a problem. Short, simple and straightforward.

@virtualworld601 Жыл бұрын

Very crisp and explained a lot of context in very minimal time. Appreciate your effort.

@BehruzbekOtayev 4 жыл бұрын

This video earned my subscription. Thank you very much. Precise and clear explanation, no bullshit talking. 👍👍👍👍Keep growing.

@robinkartik6356 3 жыл бұрын

You saved my life in just 7 minutes. Wonderful job brother.

@quatrefinance4946 2 жыл бұрын

We actually subscribed today to your channel since over 5 of your videos we have watched. Thanks for the good work.

@tarcisiomateus1506 2 жыл бұрын

I'm impressed with the amount of information and diferent scenarios that you were able to cover in only 7 minutes

@JM-jk9vz 2 жыл бұрын

Great video as always. I recently made the switch from game dev to web development and your videos have always been very helpful. Would be nice if you included a link to the code for the web page.

@nonsolovita 4 жыл бұрын

You deserve al lot more subscribers, i am gonna always say this. Thank you for the content.

@salemkittenkat 3 жыл бұрын

I've used @media query before and I did understand it...but I was always confused and search for explanations and tutorials. This video is the first and last video I'll look at because, well as expected, your explanation was super simple. lol. Subscribed!

@davmarius4h Жыл бұрын

Thank you so much for this simple quick and easy tutorial! I learned exactly what I needed to know.

@scodemy1976 4 жыл бұрын

Thanks a lot... Your channel has made me a better developer and has really improved my coding skills. Got motivated last month and I started my own web development KZfaq channel. Am grateful

@sebastianlozano7707 Жыл бұрын

This is how all videos should be, straight to the point! Thanks hero!

@angelolicettifans 3 жыл бұрын

Thank you really much bro!!! I do find your content extremely useful to learn new dev stuff, thank you!

@glxxmy 2 жыл бұрын

So, so easy to understand. Trying to learn this as something to put on my resume. thank you, brother!

@iamtharunraj 11 ай бұрын

Learned Media queries. Thanks to Kyle for explaining everything in the best way possible. Kyle simplifies!

@seta16 Жыл бұрын

I will give a shout out to this channel, im trying to improve my frontend skills and i have taken bootcamps and the meta course in course and I find myself coming back each time to his videos. He explain it clear and with good examples.

@ayl247 3 жыл бұрын

Happily subbed. Thank you so much!

@andrewayad 3 жыл бұрын

Really clear, quick, and useful tutorial. Thank you

@xivus11 3 жыл бұрын

omg you're so good-looking and smart. Thx for the simple and explicit tutorial!!

@kumar_prabhat 4 ай бұрын

i loved this video. finally made me understand how simple media queries really are. to the point. no unnecessary complications.

@chideraachinike7619 3 жыл бұрын

You're awesome, man! Thanks for making my life a lot better!

@AIGlobalbiz 7 ай бұрын

I've been learning how to code and not long ago, I felt confident and ready to do a project for a customer. I'm nearly finished with it, but I just realized I have no clue how to adjust the website so it works well on phones and tablets too. That's what landed me here😫. I'm about to incorporate your tips, thank you so much for this video!

@pedrosilva4342 2 жыл бұрын

thanks bro, really simple to understand and straight to the point!

@nitinmistry6280 3 жыл бұрын

Great short video. Very helpful. Thank you!!

@edgarchavez6882 2 жыл бұрын

Great freakin job dude. Simple, yet very informative.

@edwinvarghese 2 жыл бұрын

As always, brilliant tut. Thanks so much!

@HansjeVdTillaert 4 жыл бұрын

Clear explanation! Thank you Kyle!

@priyankadeshpande8315 4 жыл бұрын

Thanks Kyle, it was real quick and easy to understand...!!!

@bama2619 9 ай бұрын

Thank you, Kyle! Great stuff for a short period of time.

@RameenFallschirmjager 4 жыл бұрын

I like your face expression when you're explaining things. You are obviously enjoying yourself, and it's definitely contagious! keep on the good work.

@codiumyt 3 жыл бұрын

can't tell if this is ironic

@harikarthi5139 3 жыл бұрын

the bottom selector is preferred if many selectors have the same specificity .that was a very nice and helpful thing that i din know earlier .thanks for that : )

@ultraego1892 3 жыл бұрын

thanks! this helped me out a lot with the place I was stuck.

@muzammilahmadullah887 4 жыл бұрын

Hey Kyle, I m glad that I found your channel and subscribed

@sherifsamir6888 Жыл бұрын

quick, simple and to the point, thank you

@robinkartik6356 3 жыл бұрын

I have no words to say thank you Man. You are amazing.

@kamilap3404 2 жыл бұрын

Exactly what I needed, thank you !!!

@programmatech6303 3 жыл бұрын

Thanks for the tutorial! It was really clear!

@neighborhoodboilermanofnyc1500 Ай бұрын

you did a great job here. Deeply appreciate this KYLE

@Mdroudian Жыл бұрын

Seems to me that "Media queries" are just CSS "If" statements; like any other "if" statement you would learn in any other programming language. If you look at it that way... it makes this much easier to understand.

@meliyomollameles Ай бұрын

Well said man.

@danialchoudary312 10 күн бұрын

Absolutely

@foryouandme8644 2 жыл бұрын

Thank you so much. I have figured out after watch your video. Great work Simplified!

@carlosjoserodriguezlorenzo8628 4 жыл бұрын

Thank you ! Finally I could understand this, now I can finish my project !

@HypnotixzK 4 жыл бұрын

Awesome video Kyle! Not sure if you've done it before, but any chance you can talk about keyword 'this'?

@spejr879 Ай бұрын

I love the way you explained this. Easy to understand, and straight to the point. Thanks for your Intel.........

@TheYoyofunbun 3 жыл бұрын

Great videos. You do a great job at explaining things.

@billbyrd9845 2 жыл бұрын

Well, I was going to praise your brevity, but I see from the comments that I would be piling on. Thank you very much. I'm hooked. Subbed and liked and rang that bell.

@nichoanton05 2 жыл бұрын

Dude, you making my life alot easier. Thank you!

@Rianxa 2 жыл бұрын

Thanks! You help me a lot! Don't understand ever, but now it's clear

@Miguelskytwins Жыл бұрын

You are amazing man, genuinely. Thank you for this channel.

@getvivekjoshi 4 жыл бұрын

Hey Kyle please make video on how improve JavaScript skills and steps. Tons of tutorials on internet but still gaps in knowlede and also challenges to learn react and angular. Thanks for your tutorials.

@zarasferoz9644 3 жыл бұрын

awesome explanation and so easy to understand. Thank you!

@jeydawellness 3 жыл бұрын

You are really good at simplifying dev concepts. Subscribed!

@WebDevSimplified 3 жыл бұрын

Thank you so much!

@file4318 2 жыл бұрын

great video, concise and contained all the information i needed

@nikkoalpha2 4 жыл бұрын

Simple, clear, and concise video tutorial. Very appreciated.

@thstudio007 4 жыл бұрын

Very impressive! You're great, Kyle!

@peroquecoincidencia9991 3 жыл бұрын

i was searching for somebody to explain this, thanks!

@DomTheTA 2 жыл бұрын

brilliant insight, I watch your videos to fill in the gaps of my cheap courses

@d-landjs 3 жыл бұрын

Thanks man! Short and concise!

@noir371 2 жыл бұрын

Exactly what I needed. Thanks!

@codingsenju4189 3 жыл бұрын

Had no idea that orientation was a factor with media queries. But it makes perfect sense.

@benjaminmella2407 2 жыл бұрын

thanks for the quick teaching, u did a gob job, no matter the ones who criticizes and doesn't contribute a thing or making their own videos

@sophiawilton3307 Жыл бұрын

thank you so much for this. Very easy to follow very well said :)

@chinmaygaikwad7690 Жыл бұрын

Thank you so much KYEL😇. You really made it simple.

@SanaAli-fy8ho 4 жыл бұрын

Please also elaborate on what screen sizes should be definitely covered to get perfect layout on all screen sizes

@HansjeVdTillaert 2 жыл бұрын

That was a very clear explanation. Thanks for sharing.

@fraserlock-macardy9633 2 жыл бұрын

Thanks Your explaination was perfect. Have a very Prosperous 2022

@niloofar--- 3 ай бұрын

short and simple! thank u so much.

@ssanith 2 жыл бұрын

Thank you so much, you're the only one who taught what these @media mean... thank you 😊

@reisezone4574 2 жыл бұрын

i have learning for almost 3 weeks about media querries and couldnt really understand, but this video in just 5 minutes i have understood everything with a very little energy used...