Responsive Web Design Guide

💡Guide #1

— — -> Set the viewport

The viewport is the user’s visible area of a web page.

💡Guide #2

— — -> Use Media Queries

Media quires are a CSS feature that allows content on the webpage to adapt to different screen sizes and resolutions.

💡Guide #3

— — -> Design for mobile-first

When we build a website, we must start with the mobile design first.

If you use chrome Try this extension Responsive Web Design Tester

💡Guide #4

— — -> Use SVG for icons

SVG PROS

🎯 Faster loading times

🎯 Better rendering quality

🎯 Scalable without using image editors

🎯 SVG can be indexed by Google

🎯 Developers can edit using the code

🎯 Graphics can be animated

💡Guide #5

— — -> Use Relative Units

Don’t use fixed units like px, pt, cm, and so on. Use % instead

👎 Not Recommended

👍 Recommended

💡Guide #6

— — -> Understand the patterns

You also have to understand how “display” property works.

Know the difference

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D