Responsive Web Design Tutorial #5 - Media Queries

Responsive Net Design Tutorial #5 – Media Queries

by



Yo gang, on this responsive internet design tutorial, I will introduce you to media queries, that are on the coronary heart of any responsive design. Media queries enable us to focus on particular CSS guidelines primarily based on machine parameters such because it’s width or orientation, or it is machine kind.

Hyperlink to supply recordsdata on github – https://github.com/iamshaunjp/psd-to-wp

Hyperlink to PSD to WordPress tutorial sequence – https://www.youtube.com/playlist?record=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Newcomers Playlist ==========

https://www.youtube.com/playlist?record=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Newcomers Playlist ==========

https://www.youtube.com/playlist?record=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Newcomers Playlist ==========

https://www.youtube.com/playlist?record=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Internet Ninja ============

For extra front-end growth tutorials & to black-belt your coding abilities, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Hyperlinks ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

source

31 thoughts on “Responsive Net Design Tutorial #5 – Media Queries”

  1. Great series!! One note to anyone just starting this tutorial series. The responsive layout was not reacting the same way in dev tools until I added this to the github source index.html file: <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Reply

  2. this is how i want my professors to explain to me because I'm too dumb to just follow them when they are teaching something that i saw for the first time and they are going too fast too HAHHAAH

    Reply

  11. Thank you for all your tutorials. So helpful. I am in learning mode, so I hoping you would be willing to let us know the following. I believe this is a Media Query question. I have 4 different full screen videos one for each breakpoint. How do add each one to the assigned breakpoint?

    Reply

  13. LOL I found it difficult, to understand: Max & Min. I´m so lost in contradictions, like, one day I was driving a car, and I really thought, I had pushed, the break pedal, LOL, I pushed the gaz, happy wise, I did´nt die 😂😂😂 I´m still struggeling, with understanding, wich width, is min or max. Thanks for the explenation! You´re awesome. Cheers from Sweden/evita la loquita 😅

    Reply

  21. THANK YOU. You saved me bruh, for my HTML/CSS lab this week our instructor told us to add "@media queries" to our projects with hardly any explanation of what they are. I understand now after watching this video, cheers!

    Reply

  24. Pretty good
    But like most video tutorials it never works first time (for me)
    Eg you forgot add the required meta tag in the HTML
    And to add the fact that media querries must go at the bottom of the css file
    Cheers

    Reply

  25. Are ypu using any extension? I don t see the pixels on the top as per teh screen size, and my screen does not go below 520 px if i start minimizing it manually> is there something wrong with my chrome?

    Reply

  27. Are there any conventions, like to put media-queries for smaller screens at the top, so that the pages will load faster on mobile phones? Or does the order not really matter?

    Reply

  29. Thank you for your efforts to create this great tutorials and put them for every one to watch.
    Looking at the source I would to ask you – The purpose of putting inside the header section <h1 class="logo">Resto</h1> and h2 inside nav menu and both sending them away with text-indent: -10000px; is for the search engines, right ??
    I could see no other reason to have h1 instead of image and h2 … for nothing.

    Reply

Leave a Comment