Submitted 6 months ago

Product Preview Using BEM Methodology

karthikganesanTR•130

@karthikganesanTR

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I have written CSS in BEM methodology. I m still learning it. I also implemented style in grid system.

I also learned...

... that applying box-radius in container of image doesn't apply the box-radius to image. image will override style from parent. To make images inherit the styles, i used box-radius: inherit in image
... about .visually-hidden, how it helps screen-headers to read content, yet content is hidden from displaying

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

Writing CSS in BEM some what tricky at first. I need to explore and try other projects to fully understand it.

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

Please provide suggestions on using BEM methodology. How to improve my code in Accessibility

Community feedback

Grace•31,090
@grace-snowPosted 6 months ago
This project looks great and you've used BEM correctly throughout so no feedback to give there!

Your padding on the text side of the card looks a little smaller than the design on desktop that's the only very very minor thing I noticed.

And be careful with code indentation in html. The closing button tag should be on a new line so it's easy to read where that element begins and ends. (Again a very very minor note!!)

On the border radius question you don't need to do what you are currently doing. Just set border radius on the component itself instead of on the child elements, but include overflow: hidden so it crops out the overflowing child corners. Then you can remove all border radius from individual corners and have shorter css.
Marked as helpful
0

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