Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Using BEM Methodology

@karthikganesanTR

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • 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 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

T
Grace 29,310

@grace-snow

Posted

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

Log in with GitHub
Discord logo

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