Product Preview Card Component built with HTML, CSS & BEM
Design comparison
Solution retrospective
I used a mobile first design approach with the styling in this challenge.
Tried to make this as semantically correct as possible. I used the article tag as this was recommended by the MDN docs for a product card component. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
The other challenge was making a button darkening effect on hover that didn't rely on manually set background colours (in case you want to change the theme from CSS variables in the future). I achieved this by wrapping the button in a div, and making the button transparent, altering the button alpha value for it's background colour on hover to create the darkening effect, without altering the brightness of the text in the process as well. I made a code pen to demonstrate this: https://codepen.io/hewhodevs/pen/oNqJmVr
BEM naming of CSS classes was used to keep styles structured and organised.
Any tips and feedback for further improve the solution are always welcome :)
Community feedback
- @elaineleungPosted over 2 years ago
Great work, Joshua, will bookmark this so that I can check out the CodePen later! 🙂
You can try a smaller breakpoint for this, which is probably what I'd do just so the card won't be in mobile mode all the way until 1440px. I might try something like 700px or 800px. Also, the Fraunces font family here isn't matching the screenshot because of the optical view version, so if you want to have your screenshot looking like the design's, you can grab the non-optical view font faces instead. That's all for now, awesome job here!
Marked as helpful2@hewhodevsPosted over 2 years ago@elaineleung Ah, that explains the font issue in the screenshot there, was trying to figure that out just now but you've saved me time, thanks!
Agreed on the smaller breakpoint, ill change it to the 768px breakpoint instead.
I'm considering redoing the margins / paddings as well to make them better organised / clearer to understand design wise, but they are working for now at least.
Thanks for the feedback Elaine!
1 - @AdrianoEscarabotePosted over 2 years ago
Hello everything is fine?
You did a good job on this challenge, but I have a tip I think you'll like:
You made a good responsiveness and without a doubt your code is very good. There's only one thing I recommend you do, which is to activate the media query only when the resolution is really small, so you don't have too much screen space.
The rest is really good! Hope it helps...👍
Marked as helpful1@hewhodevsPosted over 2 years ago@AdrianoEscarabote Thanks for the feedback Adriano! Agreed on the breakpoint, I'll be updating it to break at 768px, instead of waiting until 1440px.
0
Please log in to post a comment
Log in with GitHub
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