DEV Community

Cover image for The best way for practicing responsive web development

The best way for practicing responsive web development

leviathanprogramming profile image 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming ・1 min read

If you didn't get a good look at the GIF above, you can view it here:
me using the browser inspector

Before you use the inspector, make sure you have a <meta> html tag in the <head> that sets the initial scale to 1.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next, if you couldn't see the GIF, open up your inspector. You should then see a button with a phone/computer icon on it. Click that and you are set to go.

Some beginner tips:

  • Use Media Queries to make your website responsive
  • Use CSS Flexbox & Grid to keep everything smooth, flexy and griddy
  • Use percentages in CSS instead of pixels for managing bigger things. Things like Margin and Padding are usually done in pixels.

I hope this short post helped you.
Have fun and keep your websites responsive.

Discussion (1)

Editor guide
asmaahhaqq profile image

This was really helpful! I had a solo project this year for school that stressed me out to no end but it was a great learning curve. While figuring how to build my website a lot of inspiration came from inspecting website code.