Learn CSS Media Queries by Building 3 Projects – Full Course

Wordpress sites

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:

35 thoughts on “Learn CSS Media Queries by Building 3 Projects – Full Course”

  1. Quincy Larson

    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.

    1. Ritam Chatterjee

      @Joy Shaheb dada tomar accent ta sunei bojha jachhe bangla vasa vashi❤️❣️,love from WB

    2. Akshay Karthick

      @Preet Sharmagenerally , if your channel has 100 k subs , you get a verified tick , in this case , I dunno …

    3. @Preet Sharma Dude that’s the person who started FreeCodeCamp organisation. Be polite to him, he’s our saviour.😂

  2. 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 ❤ 🌹

    1. Melvin Nuslah D Tuah

      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

  3. 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”;
    }

    1. You need to provoke the function

      At the bottom of javascript code, write this

      screen();

      Thank me later 🌹

    2. @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();
      }

    3. @Jimmy Ekisa write screen() outside the function.

      Function screen (){
      // your code here
      ………..
      }

      Screen()

    4. @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!!!

  4. 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)

  5. Nii Laryea Quartey-Papafio

    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

  6. Nii Laryea Quartey-Papafio

    I hope all the videos he promised will be released though. Especially the various units of measurement

  7. 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👌👌👌.

  8. 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

  9. 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!

  10. 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 ❤️

  11. 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

  12. Marcelo Morais

    Thank you very much for this content Joy, i wish you the best man, cheers from Brazil.

Comments are closed.