Submitted about 1 month ago

Product preview card | By Mike Wilson

Michael Wilson• 100

@mikewil245

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?

What i was most proud of was getting as close as the design as I can.

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

I encountered challenges in understanding BEM and SCSS, as it was my first time using both. It took me a while to grasp how nesting works in Sass, especially with the &__ syntax. Additionally, the BEM methodology was entirely new to me, particularly the naming conventions and the use of underscores for class names.

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

Just getting use to using SASS and Bem in my projects , I like how organize and easy to read

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted about 1 month ago

Hi!

Cool work! It looks neat and your code is clean =)

By the way, you can omit the source with desktop image in the picture tag - it will be loaded through img. Also there is no need for aria-lable for this button - it has a text which will be recognized by screen readers.

As for BEM - it's really hard to see and fell the advantages of this methodology on such small projects. It seems to me that you did it well (the product-category class looks like it miss a pattern, but that is not a big deal =)).

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