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

Product-preview-card-component

TPpseudoβ€’ 60

@TPpseudo

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


Overall feedback is always appreciated, especially regarding CSS variables, reset and Grid as it is the first time I have used these.

Specific question:

Using grid I could not change the positioning of the image unless I also gave the picture-element a display property of grid. Does grid only function with direct parents?

Community feedback

visualdennisβ€’ 8,255

@visualdenniss

Posted

Congrats on completing the challenge successfully! Everything looks great and it is responsive as well.

I'd have a small suggestion regarding the user experience, it looks like on button hover, the background is changing, but the cursor doesn't. You could add also cursor:pointer; to the button to make it clearer to the users that it is a clickable button, which is a common practice.

Grid only has a full-control over its direct children, similar to flexbox.

Hope you find this feedback helpful!

Marked as helpful

0

TPpseudoβ€’ 60

@TPpseudo

Posted

@visualdenniss

Thank you for the feedback. Good spot on the cursor.

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