Submitted 3 months ago

Product Preview Card

accessibility

Aria Rouzegar•150

@Ariarzg

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I started to use em for some font sizes and padding and margins to make it more responsive. And I am proud of that.

What challenges did you encounter, and how did you overcome them?

I had some troubles to calculate the clamp(). and I used This Website to calculate it and it turned out very good.

What specific areas of your project would you like help with?

I am open to any suggestions.

Code

Please log in to post a comment

Community feedback

P
Øystein Håberg•13,260
@Islandstone89
Posted 3 months ago
Hello, excellent job!

Here are a few tips. I also recommend this guide on how to approach the HTML for this challenge.

HTML:
- <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside the <main> element.
- I recommend using the <picture> element to change the image based on the screen size.
- "Perfume" is not a heading, so change it to a <p>.
- As the cart icon is decorative, I would hide it for screen readers using aria-hidden : <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
CSS:
- For accessibility, it's better to use border: transparent instead of border: none.
- Media queries should be in rem or em instead of px.
Marked as helpful
Michael Okorie•150
@Michael-Okorie
Posted 3 months ago
Hii Aria. I love your work. It looks totally awesome and the responsiveness is amazing as well. Keep up the good job, Aria. You're amazing.
Marked as helpful

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