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

Jacek 50

@Jacekhacking

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


first challenge on here just thought I'd dip my feet in. I'd love any feedback anyone might have.

Community feedback

David 8,000

@DavidMorgade

Posted

Hello, welcome to the comunity and congrats on solving your first challenge!

Your component looks pretty good for me, but there a few things that are missing and can maybe help in improving your component.

You are using the property word-spacing in some classes, but if you want space between your letters (like the "perfume"), you need to use letter-spacing, for this property, each unit of distance that you assign to it, it would be the space between each letter.

Also would be nice if your add to cart button have a cursor: pointer to specify that is a clickable.

In terms of responsive try to remove the ´padding-left´ global flex container because it moves your components and brokes it at mobile version. I would also add some space between the texts, for example with some margin (for the mobile version, your desktop version seems to have the proper spaces).

Hope this helps you in future projects!

Marked as helpful

0

Jacek 50

@Jacekhacking

Posted

@DavidMorgade

Hey, thanks David! I appreciate you taking the time to look at my component. Thank you for the catch on the word vs letter -spacing. And yep you're right totally forgot the cursor pointer and forgot to remove my padding left. Great catch on the margins on the mobile didn't even notice it. I'm going through now and updating all of that. I appreciate you and your response! :D

1

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