Master Media Queries And Responsive CSS Web Design Like a Chameleon!
Ғылым және технология
🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
You might be wondering why there’s a Chameleon in the thumbnail of this video.
A Chameleon can change it’s color and pattern - adapting it’s appearance to match it’s environment.
The chameleon's ability to quickly and seamlessly change its appearance is a skill to be admired - and what I’m suggesting is that we ought to be more like the chameleon when creating our responsive layouts.
The mobile-first pre-defined media queries:
/* xs */
/* @media (min-width: 475px) {} */
/* sm */
/* @media (min-width: 640px) {} */
/* md */
/* @media (min-width: 768px) {} */
/* lg */
/* @media (min-width: 1024px) {} */
/* xl */
/* @media (min-width: 1280px) {} */
/* 2xl */
/* @media (min-width: 1536px) {} */
The desktop-first pre-defined media queries:
/* 2xl */
@media (max-width: 1536px) {}
/* xl */
@media (max-width: 1280px) {}
/* lg */
@media (max-width: 1024px) {}
/* md */
@media (max-width: 768px) {}
/* sm */
@media (max-width: 640px) {}
/* xs */
@media (max-width: 475px) {}
Mobile container utility class:
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* xs */
@media (min-width: 475px) {
.container {
max-width: 475px;
}
}
/* sm */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
/* md */
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
/* lg */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
/* xl */
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
/* 2xl */
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
Desktop container utility class:
.container {
max-width: 1536px;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* 2xl */
@media (max-width: 1536px) {
.container {
max-width: 1280px;
}
}
/* xl */
@media (max-width: 1280px) {
.container {
max-width: 1024px;
}
}
/* lg */
@media (max-width: 1024px) {
.container {
max-width: 768px;
}
}
/* md */
@media (max-width: 768px) {
.container {
max-width: 640px;
}
}
/* sm */
@media (max-width: 640px) {
.container {
max-width: 475px;
}
}
/* xs */
@media (max-width: 475px) {
.container {
width: 100%;
}
}
Пікірлер: 329
🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨
@Psyzenn
8 ай бұрын
:OOOOOOO I really love that idea. Can you tell me if you use both dekstop and mobile containers in one css file or you select based on which design you start first like mobile -> dekstop or dekstop->mobile ? P.S. Nevermind you just mentioned at the end + I remembered you mentioned only 6 media queries and if I used both that would be 12.
@EtimDavid-rn2o
2 ай бұрын
Nice job man, thanks a lot, How did your browser show the screen size, please I need to know?
@slayingthedragon
2 ай бұрын
@@EtimDavid-rn2o open the chrome dev tools, toggle on the device toolbar, on the top right corners there's 3 dots, click them and select show media queries
@officialmoai3107
Ай бұрын
Thanks. ❤️
@ThirdEyePsychology
Ай бұрын
@@slayingthedragon thank you so much!!
One of the absolute greatest videos I’ve seen in regards to medía queries. One of the best CSS videos I’ve seen in general
Not only your solution is more elegant, but way easier to understand, I did always struggle with this concept, thank you for such an informative video!!!
So for a long time I've avoided learning media queries and someone taught me how easy they were but they were still complicated the way that I was taught. I have a web page and it looks horrible on phone and I just thought it was a lost cause. Before sleeping tn I watched this video and realize I don't got to recode the whole thing I just gotta fix my breaking points tmrw morning it's what I'm gunna do and I'm excited thank you for this video.
The way you explain and show things with examples is sooooooo goooood! Congratulations for your hard work on educating us, it’s highly appreciated!
you explain things very understandable. it would be really great to see some bootstrap or tailwind or some js framework videos from you.
I have looked at many different youtubers in regards to web development and you sir , make the best videos. Explaining the very basic concepts which build up a website in a simple to understand manner!
I'm so glad I found your channel! your videos are so engaging and to the point. Thank you so much!
The best on CSS I have seen so far, I also bought the course 3 months ago, help me a lot with my websites, waiting to purchase the other courses when released, thanks bro
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
just purchased your course as a refresher for CSS. excited!
Wow, what a great teacher - I learned what I wanted to know in minutes...I'm going to watch the rest of the tutorial and see what else I can learn. Thanks a lot!
i love you bro i was searching for a tutorial which is to the point and i struck gold on this one
Found you!!! I've been looking everywhere on how to arrange the elements if I have to view them in mobile and this video helps me so much! Thanks!
Damn! Incredible content. Definitely, changing the width of 90% in the project I am currently working on!
I'm glad i found this channel. keep up the great work!!
I just learned how to use media queries thanks to you!!! THANK YOU!😁
finally someone who knows how to explain , without using fancy language. - all others "beginner" tutorials just gave me a headache. Hats down to you.
Your explanation is great in a very short time. Best on KZread.
man you are awesome please make content often.... we can learn a lot and sure... your going to make it a million subs.
Pure CSS and HTML. I LOVE THIS!
oh my god thank you so much for this, other videos were just complicating things so much
your videos are amazing! thank you for making such high quality content!
Those break points have helped me so much! Thank you for another great video!
Oh my god, this video that was i need to see. Thank you from Brazil, bro
Informative, helpful and aesthetic 5/5 tutorial. Earned me as a subscriber.
This is exactly what I was looking for, life saver thanks man
Fantastic video! could you make a video too how to use using %, px, em, vh and where to use it on perspective div, parent/children?
@relja_
Жыл бұрын
this is also confusing to me, i cant find a video that explains it well, all they do is explain what are these units and categories them but not when to use which one.
@withacc
Жыл бұрын
He talked a little about these measurement units in another video titled 'CSS Units: A Deep Dive'
@relja_
Жыл бұрын
@@withacc yea i watched that video its good but if i remember correctly he only covered the theory part of units but not how there are used in a real project. Not only him i never found any video that covers that part.
You are really always slaying the dragon....keep it up, man
thank youuuuuuu I've been struggling with my lesson lately and now i understand it
chameleon analogy is 🔥
impressed by your videos extremely smooth and deep explanation...... keep it up!
Very nice video as usually, explaining with practical work is very effective... your videos are the most understandable front-end tutorials on youtube in my opinion... I wonder if you do some videos about javascript concepts you would help us because are a little confusing.
thank you for making this video, I have been struggling with media queries.
i loved your videos bro it was short and simple and most of all it was really helpful
nice video! This help me a lot. You're doing great man. Thank you
Your presentation skills are second to none! Thank you very much for your very professional work.
@matthewnjoroge4759
Жыл бұрын
How do i get my browser to show me pixel dimensions?
@casperdrums
9 ай бұрын
@@matthewnjoroge4759 see my comment
You are the best keep this way you will have millions of views so easy to learn with you
Keep pushing out these contents and you're heading for 1M subs
Love your videos! keep them coming.
great illustration.Keep it up for the wonderful tutorial
You really make coding looks so easy and fun! definitely worth watching every videos of yours! so educational and good for beginners :)) I hope you upload more content
This is good and effective, explain something with good visual, i like it
Thanks for sharing your knowledge! Looking forward to your next video :P
You're awesome 🎉 Please make more videos and teach the hard parts of CSS.
I have been trying to understand the mobile design first concept for a while. How the heck do you do that? Yu have just shown me the way. Total brilliant. I go to a lot of instructors to get sorted, without success on this problem, but you were the best teaching the method. The only that took time to explain the difference between Max and MIn and how it relates t mobile first responsive desive. Well done. Now. if you just get the Javascript course done.
Very cool and so adaptable for all builds. Mobile first all the way 😊 Thanks 👍
I love this man. Thank you!!!!
Thank you. Your contents are really helpful.
Your video concept is awesome. It very helps full for m. Take love from Bangladesh💖💖, Love you brother. Create this type of video regularly
God! The Way you explain things....... It just so mind blowing. You have a gift bro, I would seriouly want to learn or have a teacher with even half of your teaching skills. You just got yourself a faithful Subscriber. Keep it up bro!!!1
@slayingthedragon
Жыл бұрын
Thank you much love ❤️
Wow, excellent, thanks again for sharing your knowledge.
Great video as usual! :) I was wondering if you would be interested in creating a video about those "pop in" animations when scrolling down while the elements get visible. That'd be dope, feels like every portfolio piece has them.
@slayingthedragon
Жыл бұрын
Sure great suggestion thanks ☺️❤️
@roronoazoro3163
11 ай бұрын
@@slayingthedragoncan you please tell me which website are you using to shrink those size of websites without shrinking the actual chrome page
@tuffilaro1565
9 ай бұрын
@@roronoazoro3163 it's a feature of the chrome dev tools. Google: "chrome devtools device mode" to find how to do it. Fyi Firefox also has that feature and it works better there in my opinion because you can also zoom in and out in it by just using ctrl + mouse wheel.
@simba---
8 ай бұрын
@@roronoazoro3163 Its not a website but dev tools in your browser. Right click, inspect and click on mobile icon on the top. I assume you already found an answer but in case you did not I hope this will help.
There are many solution to a single problem. You have the clarity to choose the best fit. What are the problems are you facing?
Que buen video amigo!!! M gustan tus videos y como los explicas.
you are doing great bro keep going
thanks a lot! It helps me a lot
thank you deeply from my soul for this video
I wasnt understand how to responsive container on desktop first however you help me to do that thanks ❤
Best video on media query
thank you. very good explained
another awesome guide STD!! please make more !! HTML and CSS!!
amazing work bro really learned everything clearly💯💯
This guy is actually good
your voice is like daily dose of internet.
I've never seen this many chameleons within the first 20 seconds of a video All jokes aside tho, amazing video like always.
Exceptional video! Could you please make an in depth video about margins, paddings and borders, and in that video also go in depth about nitty gritty stuff like the consequence you've talked about at 8:10? There are many videos about this out there, but none go in depth about the relations and consequences of these properties.
@slayingthedragon
Жыл бұрын
Good suggestion ❤️
Thanks for the video ❤
You're back!
this is perfection.
Very nice approach
Salute to you sir, helped a ton
Waiting for this!❤❤
wow! this lesson is just too good and easy to understand. I am grateful for this lesson
@marco7838
Күн бұрын
When I create a p tag and double click on it, in the browser. It takes up a lot of space than it should. Maybe because it is a block level element that when I double click the blue space is quite big. How can I contain this and minimise the amount of space an element takes up?
Thanks !! :) amazing video :)
very useful video, thank you.
I love your teaching your good. Other mentors just type the code you can't even know how. It functions
Best video about media queries my friend ...you should upload more content
@slayingthedragon
Жыл бұрын
Thank you !!
I subscribe your channel right now I love the way that's you teaching Please make separate playlists of all HTML5 CSS3 and JAVASCRIPT and it's frame works and it's different small projects
hello my friend as a jr front end developer you're save my life with your stunningly beautiful video ❤
you make great videos bro
Could you make a video talking about the differences between normal CSS and tailwind , as well as how much of a difference using JavaScript can make
Love this❤
Earned a subscriber today...❤❤❤
You are a CSS magician
just AMAZING.
I love the intro 😂
Superv explanation!
nice video, thks for sharing ! 😘
A Damn good video... this is a damn good video
This guy is good explaining css properties. Now my prob' is how i am going to use it properly. I have to understand how css relative measurements works. Specially the pixels and viewports. They're quite confusing.
You could use clamp for responsive sizing .. saves a lot of lines of code
@izuchukwupromise4071
8 ай бұрын
How does clamp work?
thank you so much
Easy to understand
Great video
Bro please make a full css course with all animations and all please
YOU'RE SO BASED
Waiting for more videos ☺️☺️
Display grid or flex with a bit of clamp() will cover most things you are talked about. I am not saying the media query is completely out of the picture though. You then have @container queries which are way better than @media, but not 100% supported till about September of this year. Yes, stuff like bootstrap and tailwind have to go with @media since they have to be for almost any site out there. They generally are not custom sites though.
Great explanation as always! btw do you use any extension when you apply media query your dev tools use colors to specify it?
@slayingthedragon
4 ай бұрын
Thanks! No I'm not using any extensions, it's all features you can activate on Chrome's dev tools