When I started to learn to make websites with HTML and CSS, I was concentrating just on the desktop view. When it was time to make the website responsive, things would get really messy and I would get frustrated with CSS, and that’s normal. But then I decided to actually learn the basics of making a website responsive and I took this free course by Kevin Powell called Conquering responsive layouts. This was a 21-day challenge and was really easy to complete. The one important thing that I learned was to build the mobile UI first.

WHY MOBILE-FIRST?

Trust me, it is really easy to build the mobile UI, actually, it is easier than building the desktop UI. When building the mobile UI, as the width of the screen is less, the only way to show the content is vertical. You can build the mobile UI without even using a flexbox or a grid. When it’s time to make the website responsive, you can use the min-width property to set the width and apply the styles for desktop view.

Building the mobile UI first is practical. When I first tried the mobile-first approach, I was surprised at how quickly I could finish styling a page. You get a basic layout and from there you can quickly make the desktop view and not worry about responsiveness as it is already responsive.

It saves so much of your time and effort. I remember when I was doing the desktop view first and then trying to make it responsive, I would just re-write so much of CSS and google stuff and make it over-complicated just to align something in the mobile view. Building the mobile UI first will make you more confident and you can concentrate on the desktop view later.

Conclusion

If you are still wondering if mobile-first is the right approach, then I suggest you try it in your next project and I’m sure that you will love it and actually enjoy CSS more.