Submitted over 1 year ago

Product preview card component

Mel• 90

@devmelody

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I mainly had issues with the sizing. I tried different widths and later had to depend on "inspect" by checking if both sides corresponded. I didn't know how to add fonts or icons at first but I learnt it. It's my first time working with a site like this or doing something like this in general and I plan on improving.

Community feedback

Tom Cieslukowski• 130

@ciesluk

Posted over 1 year ago

Hi, good job! Looks great! Few things, don't forget the alt in your image tag. Also, it might have been a bit easier to use the picture tag. https://www.w3schools.com/tags/tag_picture.asp

Lastly, your design isn't responsive for mobile so practice making media queries and using CSS Grid to style the card. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Marked as helpful

Mel• 90

@devmelody

Posted over 1 year ago

@ciesluk Thank you very much Tom, for your input and the links. It is totally appreciated. I'd do well to practice with them.

visualdennis• 8,375

@visualdenniss

Posted over 1 year ago

Great job in completing the challenge successfully! Your solution looks great overall, the design implementation is simple neat.

Regarding responsiveness: You can add flex-direction: column; to the container to make it responsive on mobile.

Hope you find this helpful!

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