Learn how to use CSS Media Queries, which are essential to creating websites responsive to different screen sizes. After learning the basics, you will learn how to use media queries to create three practical projects.
📄 Article version:
✏️ This course was created by Joy Shaheb. Check out his channel:
💻 GitHub Repository:
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:44) Setup
⌨️ (0:21:08) Project-1
⌨️ (0:21:10) @ media rule
⌨️ (0:22:35) And operator
⌨️ (0:24:06) Media Type
⌨️ (0:24:39) Max-Width
⌨️ (0:27:01) Min-Width
⌨️ (0:33:56) Project-2 Desktop
⌨️ (1:05:55) Project-2 Mobile
⌨️ (1:14:58) Project-3 Desktop
⌨️ (1:23:07) Project-3 Mobile
⌨️ (1:25:53) Conclusion
🎉 Thanks to our Champion supporters:
👾 Otis Morgan
👾 DeezMaster
👾 Katia Moran
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
I really like his methodology to teaching. Slow is smooth, smooth is fast
Joy is so fun and charismatic. I hope to meet him some day at a future developer conference once we’ve vanquished this terrible pandemic. Joy, if you’re reading this, thank you for everything you’re doing for the developer community through your thoughtful teaching.
@Joy Shaheb dada tomar accent ta sunei bojha jachhe bangla vasa vashi❤️❣️,love from WB
@Ritam Chatterjee thank you soo much for the well wishes 🌹
@Preet Sharmagenerally , if your channel has 100 k subs , you get a verified tick , in this case , I dunno …
@Preet Sharma Dude that’s the person who started FreeCodeCamp organisation. Be polite to him, he’s our saviour.😂
@Joy Shaheb just awesome.
Thank you Mr. Beau and FreeCodeCamp for posting my tutorial. I hope it helps those who are learning Web dev w/ some practice projects.
Thank you everyone for all the love and support ❤ 🌹
Thank you bhai
are u from india
You are such a wonderful instructor… Love your in depth explanation and presentation… But next time please adjust your image, at some time it covered the codes… Once more #StayBlessed
Awesome tutorial thank you very much!
@nadir ali He is from Bangladesh look at 1:33
Really great enthusiasm, style, charisma, and cadence.
Thanks for the nice tutorial. I am trying to follow along, however I can’t get my screen to display the text “Width : 360px” (I have used 360px as an example) below is my code from the main .js file. Help guide me if there’s anywhere I’ve made an error.
window.onresize = screen;
window.onload = screen;
function screen (){
myWidth = window.innerWidth;
document.getElementById(“size”).innerHTML
= “Width : ” + myWidth + “px”;
}
You need to provoke the function
At the bottom of javascript code, write this
screen();
Thank me later 🌹
@Joy Shaheb thanks for the response. I did try what you suggested, but I still can’t get the output to show the “Width: 360px”… all I can see in my final output so far is Hello Screen!! My modified js code indicating the correction you suggested is below:
window.onresize = screen;
window.onload = screen;
function screen (){
myWidth = window.innerWidth;
document.getElementById(“size”).innerHTML
= “Width : ” + myWidth + “px”;
screen();
}
@Jimmy Ekisa write screen() outside the function.
Function screen (){
// your code here
………..
}
Screen()
@Joy Shaheb Thanks a lot. So, apparently, I had set my div using “class” instead of “id” in the index.html file, and so, I wasn’t targeting the right id in the javascript code. All fine now. I can now carry on to the end, wish me luck!!!
Great tutorial! Keep it up!
Hello everyone! I have a question for anyone who know the answer 🙂
Recently, i saw the node.js and express.js tutorial, the instructor was talking about data persistance, but the tutorial ended in a weird way like it was cut. Then, i see this video (havent started it yet) and they talk about trhee projects, but i only see two. Am I missing something? Are these tutorials somewhere else?
Great job and thank you!! (Sorry if my english isnt very good)
there is three projects, check the description 🙂
Now is just great. You won’t get a content soo much explained as this anywhere. I think i was actually learning sass, instead though😂. Still great content. Awesome delivery
I hope all the videos he promised will be released though. Especially the various units of measurement
This is a very good course. Thanks Joy!
Man, you are awesome man! Your method of relating any CSS property with a real-world example really makes the lesson fun; eg: for min-width: when I am in Bangladesh, I won’t get StarBucks, but when I go out of Bangladesh to America, I get StarBucks👌👌👌.
I’ve only watched the first 20 minutes and I have learnt so many things I wasn’t expecting to! I like this guy’s way of teaching
Joy is legit. Thanks for introducing him to the rest of the world.
What an amazing tutorial… learnt so much. Thank you
Hi Joy. Thank you so much for sharing your knowledge with us! Appreciate it. This was time well spent this afternoon. I am a newbie in development and web and this course helped me a lot. Starting to get an idea of this responsive thing. 🙂 Of course I subscribed to your personal channel and I will be glad and thankful to be able to learn from you. You fit very well into the team at fCC. I will now try to apply what I learned to my personal profile page. Have a good time and be well. Thank you!
Joy is a great instructor everytime I learn something new, he makes it so easy to understand
I really like the content , you are a good teacher , you explain everything deeply but I laughed when you made the same mistake 😂😂 I often make , using the display grid property but working with flex elements 😂 , but I really like really like the content , God bless you great teacher ❤️
I hardly comment on videos but this is an exception.
This guy is extremely good and also knows how to explain stuffs in layman way.
Thanks.
Kudos
very good tutorial and well explained
Thank you very much for this content Joy, i wish you the best man, cheers from Brazil.