After watching a 19-minute video on Sass, I decided to dive into practicing it with this project. I'm most proud of using Sass, as it was my first time working with it. It's surprisingly easy to learn and implement! For anyone interested, here’s a link to the video I watched: https://youtu.be/Zz6eOVaaelI?si=Q23S6J6XDviAOM-m
I'm also proud of building a mobile-first component for the first time. This project really helped me solidify that practice.
Lastly, even though the project was challenging, it gave me a chance to revisit some fundamental CSS principles, media queries, and responsiveness techniques, which significantly boosted my understanding.
What challenges did you encounter, and how did you overcome them?I encountered several challenges during this project, including syntax issues and the learning curve of using Sass for the first time.
One particular challenge was deciding on the width of the container. I went back and forth with various responsive values until I trained my eye to get it right. Being a perfectionist, this delayed me a bit as I wanted every detail to be spot on.
Another challenge was with media queries, especially when using them in Sass. I initially tried using flexbox for the desktop version, only to run into issues like images not fitting properly in their wrapper, leaving white spaces around the rounded edges, and one layout being narrower than the other. Switching to CSS grid resolved the issue.
The most challenging aspect, however, was figuring out how to use two different images for the mobile and desktop versions. I found three possible solutions: the <source> tag, using two <img> tags & hiding one with display: none; and finally using background-image: url(). I initially tried the <source> tag, but it introduced a bug that caused the responsiveness transition to glitch for a moment upon refresh. Ultimately, I defaulted to using the two <img> tags, which fixed the issue.
What specific areas of your project would you like help with?While I’m enjoying using Sass, I’m wondering if I could combine Sass with Tailwind CSS for future projects, or if it’s better to stick purely with Tailwind. I’d like to know how efficient it would be to use both together.
