Submitted over 1 year ago

Product preview card component (SCSS, BEM)

Super Oleksandr• 320

@super-simon

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

Layout of the product preview card

Did it using SCSS and was trying to follow BEM.

I didn't separate the styles and images into subfolders because it doesn't make sense for such a mini project.

CSS file was also not minimized specifically for readability.

I would appreciate your feedback.

Community feedback

Alan Lopez Reyna• 300

@AlanLopRey

Posted over 1 year ago

EXCELLENT WORK BRO I can give you a few tips

Star to use semantic tags in the HTML to improve accessibility
Use the semantic tags in the HTML gives you a better way to name the classes with BEM only using the name of the tag, for example if you have a main element you can name it with the same name in the css, for small projects like this work very well

beside that you do a excellent work

Marked as helpful

Super Oleksandr• 320

@super-simon

Posted over 1 year ago

@AlanLopRey

Thanks a lot for the feedback.

Added to my TODO list to deal with semantic.

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