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

Responsive product preview card using BEM convention

Csaba Hell 110

@hellcsaba

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?

This is my first project where I used Block Element Modifier (BEM) convention and Mobile-first workflow. In my opinion, the project was too small for experience the benefits of BEM but it was a good opportunity to get familiar with the concept.

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

In desktop view at the bottom of the image I could see 4pixels of the background. After some research I managed to resolve it by setting the display to block. Moreover, previously I followed desktop-workflow and now it was more difficult to do the other way around, especially the alignment of the screen sizes.

Community feedback

Sagi 120

@ratsagi

Posted

Hello there,

Congrats on completing this chellenge!

I have some suggestions to improve your solution:

  • I noticed that you named main landmark as a product actually it is not correct because product card is a small part of it. this main landmark might have multiple of them so the correct way to use article or just a div therefore it should be h2 not h1 more details you can find here
  • Vertical alignment doesn't work on mobile version because you have forgotten to provide the min-height: 100svh for the body.

Overall solution is good!

Hope you find this feedback helpful!

Good luck!

Marked as helpful

1

Csaba Hell 110

@hellcsaba

Posted

Hi Sagi,

Thank you very much for your feedback. I will take a look on my code and review it according to your suggestions.

Good luck too!

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