Responsive Card using CSS Grid and Flexbox

Solution retrospective
Hello guys, I would like to know some specific points and I hope you can help me.
Did I correctly implement the BEM methodology? Is there any way to improve or optimize my code? Thank you for your time and best wishes to you.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @codedforfree
Look pretty good indeed. Some things i would change, besides the points of @DavidMorgade
First off all when i see your code on github. All html is above the opening body ;). Next to that i would try to turn the images in your card__header into a picture element with srcset and give then. both the same class.
I would probably also get rid of the card__body div in HTML and in CSS. There is no need to add flexbox to get the content inside this div stacked. This is standard behaviour.
But some thing are also just a personal preference ;) So keep up the good work and enjoy your projects!
Marked as helpful - @DavidMorgade
Hello Freddy congrats on finishing the challenge!
Yes!, you did a pretty good job using the BEM methodology, but you need to take advantage of modifiers, in this project you have a pretty good example: the prize inside the card.
Instead of defining two classes,
card__actual-prize
andcard__previous-prize
try to use a modifier here, for example, you could havecard__prize
andcard__prize--discounted
, this is a minor change but for larger projects it can help you a lot organizing your classes!Also don't forget to add a
cursor: pointer
to your add to cartbutton
for a better user experience.Hope my feedback helped you!, good job!
Marked as helpful
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