DEV Community

Learn responsive web design in 5 minutes

Per on August 20, 2019

In this article, I'll teach you as many responsive design techniques as I possibly can in five minutes. This obviously isn't enough to learn it pro...

Read full post

Ben Halpern • Aug 20 '19

%
em
rem
vw
vh

I feel like the fact that so much of this didn't exist when I first got into webdev hinders my capacity to reach for the good stuff these days. Stuck in my ways. I feel good for the new crop of devs that gets to grow up with all these options.

Josh • Aug 21 '19

It's never too late to learn!

No, seriously. That "old dog new tricks" stuff is all kinds of wrong 😐

Ken Bellows • Aug 20 '19

Great stuff! Responsiveness is so critical in the mobile era, but still so many sites, even for major corporations, are complete trash on mobile...

If I may shamelessly self-promote for a moment, I wrote an article a while back about how CSS Grid's named areas combined with media query breakpoints are an absolute dream for creating responsive layouts:

CSS Grid Areas are amazing

Ken Bellows ・ Dec 31 '18 ・ 8 min read

#css #grid #web #tutorial

Vitaly Kiselev • Dec 1 '19

Thanks a lot, great and very interesting article! I met its russian translation with the link to this original page, read your original article and signed up here at dev.to for posting my first coment :)

Are there a couple of a small typos?

Using media queries to improve the mobile experience

@media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}

Should class name be myImg instead of myImage?

Responsive typography: rem

@media (max-width: 768px) {
    html {
        font-size: 14px
    }
}

Font-size already has been defined by 14 pixels for the whole document therefore should it be better to set font-size in the last listing, for example, by 10px for demonstrating purposes?

Maneesh Kumar 🇮🇳 • Aug 21 '19

This is great article for responsive web pages. Now days all websites are responsive. On adding to that we can also use CSS grid for responsiveness. It has also very nice features for different size screens.

Raunak Hajela • Aug 20 '19

You have a great skill of teaching things. It would be awesome if you had covered other units but no issues will check on that bootcamp. This is wonderful article, you are unicorn 😃