When I started coding websites, I would always go for desktop layout first and then mobile later.

The desktop layout looks perfect, and I pat myself on the back for doing a good job, but when it comes to adding media queries for mobile, it's a pain the ass for me.

I would struggle to resize to fit the mobile screen, and sometimes I would leave it as it is, to magically sort it by itself (I wish it did).

Until I found an article that talks about the mobile-first approach. Then it got me thinking about it for a while.

Later, I decided to give the mobile-first approach a try, and to my amusement, it is so much easier to go from smaller screens to big screens than vice-versa.

It saved me a lot of time, effort, and mental stamina.

The lessons I learned from coding responsive websites are:

1. Start small. Start with a mobile-first approach.

2. Use media queries for different breakpoints - Mobile, iPad & Tablets, Laptops, Desktops, and Large screen devices. It makes a website very responsive for all devices and widths.

3. Use rem instead of pixels - rem makes scaling the objects on the website better.

4. If you finish a section, add the media queries to all breakpoints before proceeding to the next one. It saves you time by not searching up or down through the long list of code.

It is my first post on Hash node as a developer. I'm glad to have a community to share and learn from other developers.

Currently, I'm learning and applying the concepts of JavaScript and ReactJS.

I would love to connect with fellow developers. If you are here, comment and we will connect and talk about web development.