DEV Community

Cover image for Mastering responsive Web Design

Posted on • Updated on

Mastering responsive Web Design

I haven't posted anything from the last somedays. Though I have written 12 articles related to JavaScript, React and CSS.

I still struggle with making the website responsive. I know beginners surf on the web(i had done this earlier) to make the website responsive but what they get is just an explanation of small concepts.

Here in this post, I am gonna clear everything about how to master Responsive Web Design.

600+ Free Design resources

Image description

Resources. Freebies. Learn.
We're making things easier on Internet.

Visit - 600+ free design resources

Know Responsive vs Adaptive Design

  • Dynamic changes to the appearance of the website.
  • Depend on the screen size and orientation of the device.
  • Adaptive design uses a few fixed layouts and then selects the best layout for the current screen sizes.

Use relative units

Instead of using an absolute unit start using relative units.

Absolute units => Don't use {cm, mm, in, pc, px, pt}

Relative unit => Use {em, rem, lh, vw, vh}

Divide design into Breakpoints

Breakpoints are predefined areas of measurement that allow you to re-arrange your web layout dependent on the size of the browser or device.

Bootstrap responsive breakpoints

  • Small device = @media (min-width:576px) {...}
  • Medium device = @media (min-width:768px) {...}
  • Large device = @media (min-width:992px) {...}
  • Extra large device = @media (min-width:1200px) {...}

Understand Max and Min values

Understand when to use Max and Min values.

  • It will work when the device width is greater than or equal to 1024px.
@media (min-width: 1024px){
    h1 {
      font-size: 1rem;
Enter fullscreen mode Exit fullscreen mode
  • It will work when the device is less than or equal to 1024px
@media (max-width: 1024px){
    h1 {
      font-size: 0.5rem;
Enter fullscreen mode Exit fullscreen mode

Use nested objects

Nested objects or container are the objects that are inside another object.

It allows controlling the nested element instead of constantly having to control each element.

<div class="parent">
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>

<!-- STYLE -->
  .parent span {
    color: black;
  .parent p {
    color: blue;
Enter fullscreen mode Exit fullscreen mode

Mobile or Desktop first

When Desktop First is Appropriate
  • When the sales are high on desktop
  • User interfaces are rich
  • Focusing on complex and enhanced visuals
  • Website which has productivity tools or business-related service
  • Highly refined user experience
When Mobile First is Appropriate
  • Simple and minimalistic websites
  • User experience is optimized for mobile
  • Website like entertainment, news or another on-the-go category.

Understand Web VS System Fonts

Every piece of typography or font that is loaded up on your website is going out to a server and make a request and come back.

  • System fonts are default fonts and they are fast to load
  • Web fonts slow down your load times for the user who are browsing your site


Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New.

Bitmap vs vector images

Bitmap images are stored as a series of tiny dots called pixels,

A vector image is an artwork made up of points, lines and curves that are based upon mathematical equations, rather than solid coloured square pixels.

What to use?

VECTOR IMAGE: More scalable than bitmap, Ability to increase the size of the graphic without pixelation and Better Quality.

😎Thanks For Reading | Happy Coding🤓

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Top comments (12)

steelwolf180 profile image
Max Ong Zong Bao

I think learning either CSS 3 or flexbox helps a lot to build responsive design. I learnt alot on building a web page without relying on a front-end framework. This becomes more useful as you transit into multiple different front-end web framework.

woet profile image

You've got an unclosed string in this snippet:

<div class="parent>
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>
Enter fullscreen mode Exit fullscreen mode
rahxuls profile image

Whoops. I'm sorry. Thanks For Noting.

marcellahaller profile image

How many useful codes as well as tips, many thanks to the author! Here I found a solution to the problem that I could not solve for a long time related to the adaptation of the design for a mobile device, by the way, if you are a beginner and want to understand this in more detail, here everything is very easily explained I advise you to read.

rahxuls profile image

Thank you❤️

cchana profile image
Charanjit Chana

Happy to see your examples include min-width, for years I used max-width because that’s what all the examples showed. It took a single conversation to open my mind to doing it the opposite way and truly do things mobile-first!

rahxuls profile image

I agree. I too have struggled with that at start till learning web design for 4 months.

dnjosh10 profile image
Dumte Nwidoobee Joshua

I am so glad you have given me a full understanding of what min-width and max-width are. I have been confusing myself over the two terms.
Though I have so ask this, what is the fate of going into bootstrap if someone has fully understood responsiveness through media queries?
Thanks in advance to anyone who can explain this in a clear way for me.

rahxuls profile image
Rahul • Edited

First of all thank you so much.

Actually using bootstrap it's pretty fast and is easier to develop a website.

gathsarah profile image

Good Article For Me.
Thank You..!

i2know profile image

Thanks for this! Now I understand clearly what max and min-width is all about

iamsunil25 profile image
Sunil joshi

thank you rahul for awaring me about responsiveness tips and tricks. these will be very helpful for me