Skip to content
Submitted 5 months ago

Responsive Product Preview Card Compnent - Mobile First Approach

accessibility, sass/scss, parcel
P
Jamie DreamCoder (Pseudonym)•140
@Vinit1234
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of successfully implementing SASS using Parcel.

What challenges did you encounter, and how did you overcome them?

  • Making image responsive with predefined attributes (width, height, srcset) on HTML and adjusting via CSS it to maintain responsiveness was a bit challenging. With the correct use of aspect-ratio, block-size, object-fit and object-postion, the issue got solved.

  • It it took a bit time figure out how to install Parcel and implement SASS in it. Once the enviroment was establish, rest of development got smooth.

What specific areas of your project would you like help with?

  • Can my SASS file be optimized more? If yes, I would like to know specifically how?

  • Should one skip learning SASS due to Modern CSS and inclination towards Tailwind and Lightning CSS? I would like to know your thoughts on it.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    M Kerr•2,130
    @mkerr-github

    My thoughts are that most of all Mastering the basics of HTML, CSS, and JavaScript first will make learning any framework or preprocessor much easier and far more meaningful.

    Regarding learning SASS, it's still valuable for understanding CSS architecture, but with the rise of utility-first frameworks like Tailwind and tools like Lightning CSS, it's beneficial to learn those as well. They offer speed and scalability—just depends on your project's needs. Whatever company/team you work on will largely determine what framework you'll be using.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord