Yo gang, in this responsive web design tutorial, I’ll introduce you to media queries, which are at the heart of any responsive design. Media queries allow us to target specific CSS rules based on device parameters such as it’s width or orientation, or it’s device type.

Link to source files on github –

Link to PSD to WordPress tutorial series –


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. How do you get the browser to display the pixel ruler and device options is it an extension of brackets or chrome or what. The tool in the developer mode isn't as helpful. It just gives some widths of some devices.

  2. I find that my text inside a bootstrap container oftens overflowsin small screen size. To fix that should i use media queries? Also what unit of the font-size should i use-vh, vw or simply px?

  3. Great tutorial. It helped me a lot. When I go to the Inspect section, whatever I insert to the code is not saved. How can I save those alterations? It's really handy to look at the features of the webpage while making the alterations.

  4. you better than every one
    your evey video is very helpfull easy to understand
    thank you so much you should more than 2 lack subscribers

  5. Really great tutorial, I understood the topic well. 🙂
    I have a question though, would you prefer to use media queries over bootstrap? cause bootstrap handles screen size changes pretty well.

  6. every thing is Awesome .. even the sound track you are using closing each video.. can u please provide it here … thanks for everything 😀


Please enter your comment!
Please enter your name here