It feels amazing when it works, but incredibly annoying when it doesn't.
This article isn't a "how-to" because I'm by no-means an expert. (Although, I will provide resources.) The purpose of this article is to encourage you (and myself) to make responsive design a priority, no matter how frustrating CSS can be.
It's cheesy, I know. 😂
When I first started building projects, responsiveness wasn't even a thought of mine. I would just create a project and call it day, without considering what it looked like on devices other than desktop. My mentality was "It may be ugly, but it works. 🤷🏾♀️"
In 2018, 58% of site visits came from a mobile device. 🤯 With this in mind, I realized that my projects had to look good no matter what device they were being viewed on. The only problem was that I didn't really know how to approach responsiveness. I had been exposed to media queries, etc. in tutorials, but didn't really know how to implement them in my projects.
A few months ago I stumbled upon Bootstrap and initially wanted to just use it to avoid having to learn responsiveness with pure CSS. After some contemplation, I decided that it was in my best interest to get better at pure CSS before moving on to Bootstrap.
Don't get me wrong, Bootstrap is an amazing tool, but I believe that if you're going to use it, you should know why the code is presented the way it is, rather than just blindly copying and pasting it.
This past week, I've spent countless hours making the projects on my portfolio site responsive. Is there a better/easier way to accomplish some of the issues I encountered? Probably. Do my projects look a lot better than they did a week ago? Absolutely!
As stated earlier, I'm not a CSS expert. Even when I was working on the final project on my current iteration of my portfolio site, it still took me forever and a day to make it responsive. But the point is I made an honest effort and finally got it to work. I know that in time, and with more practice, it will get easier.
I guess the main takeaway here is to put in the time to learn responsive design and use it in your current projects.
Thanks for reading! 😉