Skip to content
Submitted over 1 year ago

Product preview card component

Mel•90
@devmelody
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @cieslukPosted 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
    0
    Mel•90
    @devmelodyPosted 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.

    1
  • visualdennis•8,375
    @visualdennissPosted 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!

    1

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