Responsive Web Design

By | 18th September 2017
Responsive Web Design

Get the Code Here : http://goo.gl/ixFYz2
Best Responsive Web Design Book : http://amzn.to/1L6amHO

Support me on Patreon : https://www.patreon.com/derekbanas

Responsive web design is used to make sure a site is optimized for any device. In this tutorial I’ll create 3 optimized sites in one video and walk you through my process the whole way through.
Video Rating: / 5

19 thoughts on “Responsive Web Design

  1. Hank Lambert

    Derek, Just like the other videos, this one is awesome. I have 2 questions if you don't mind. First, is this the latest video you have on responsive design, and if so, is it still good for today? Second, how did you get the grid layout on your completed site? I am trying to figure out how to come up with some type of grid layout like this to plan out the site from the beginning. I am very new at web design, but I am much better thanks to your videos.

    Reply
  2. Linkin Pаrk

    I perfere using JS to see if (this.innerWidth > 600px && his.innerWidth < 800px){change the href attribute of the link using the .setAttribute() function}
    Is that a good practice? I have been told it is a bad practice a few times by other people cause they think it is not practicle to use more stylesheets when we have bootstrap and other frameworks but i personally perfere being in control on the product i build and not being limited by given propotions like 4×2 or something like that…

    Reply
  3. Jonathan Payne

    Your videos are brilliant. You are such a huge help and a great teacher.

    I haven't looked into your YouTube too deeply, I am a new subscriber, but is there anywhere I can look to see you explain that grid layout you use in this video?

    Reply
  4. Stream Conscious

    Hey Derek, thanks for all of the tutorials I've watch by you so far… in regards to this one (Responsive Web Design) you are basically saying, if I want a responsive web design I must make it responsive for all devices by having "a separate" — <link rel="stylesheet" type="text/css" href="theme.css"> and CSS file– assigned separately in a different size for similar devices, computer, Ipad, mobile phone devices etc…. thanks..

    Reply
  5. Amit kumar

    where is article class in html for which you have this css code
    .article {
    display: inline-block;
    width: 166px;
    margin-right: 16px;
    }
    i am not getting this plz help me

    Reply
  6. Gary

    What did you use to draw the grid layout that you kept referring to whilst doing the stylesheets?

    Reply
  7. Achyuth Royal

    I can do layouts but I cannot do responsive layouts. please prefer a book to learn responsive web designing

    Reply
  8. Mark

    thumbs down for not having the pictures on the site and not having a zip file to download.

    Reply
  9. Wade Morris

    Well I have a problem. I have 3 different stylesheets.

    First style "layout.css" works fine. Then when I have second stylesheet "tablet.css" still connects to layout.css

    When I change "tablet.css" it automatically changes "layout.css" so these wouldn't work.

    Reply

Leave a Reply