Submitted 5 months ago

Responsive Product Card Preview

Eugen• 200

@psdesignro

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I used SASS for the first time, even if I consider this project is too small to check all its benefits. I will consider using it in my following projects to practice it more.

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

At some point I got stuck, because none of my styling updates were being applied to the HTML, even if everithing was setup correctly. After hours of researching and test I found the issue, and I would be thankfull if someone can confirm this: it seems like (by mistake) I edited manualy the compiled .css file instead of the .scss, and from that point, all my new styling were not applied.

I learnt it the hard way, but I will be more carefull in the future

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

As it is my first time I used SASS, maybe there are some improvements I can make in the .scss file

Community feedback

Patricio Zarauz• 140

@PatricioZarauz

Posted 3 months ago

Great work on completing the challenge!!

There are 2 main suggestions that I have for you to improve your code.

In order to use the 2 images provided, you could have used the picture tag and use the source tag, so you can specify which image you want to use, regarding of the display size, article
You could have used background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0); for the hover selector, instead of having defined a custom color, this is helpful so you can reuse it in various buttons.

Other than that, great work!

Marked as helpful

Please log in to post a comment

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