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

Responsive Product Preview Card

#accessibility#sass/scss

@C-ZLTV

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


I really enjoyed working on this project since it really help me tackled some things I was unsure about and didn't get to implement into a project just yet. Some of these things include the picture tag with different source images and the image inside a button.

I also tried to work with relative units, such as rem and em, and percentages as much as possible.

Regarding accessibility I tried providing useful alt text for all images and avoided divs when possible.

Would really appreciate some feedback!

Community feedback

Adriano 34,020

@AdrianoEscarabote

Posted

Hi Cristina Zlatov, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

I noticed that you used an anchor tag, in my opinion the element that makes the most sense is the button since that button would not have a functionality to take the user to another page, but rather to have a functionality to add the item to the cart!

<button><img class="cart-icon" src="images/icon-cart.svg" alt="stylized cart icon" /> Add to Cart</button>

The rest is great!

I hope it helps... 👍

Marked as helpful

1

@NabilWasir

Posted

Great work 👏

I think the font-size of the sub heading is a little bit large on the mobile, maybe make it slightly smaller. And you can use letter-spacing for the PERFUME text to make it look like the actual design.

Overall great work, you have done well.

if my solution has helped you do not forget to mark this as helpful!

Marked as helpful

0

@C-ZLTV

Posted

@NabilWasir Thank you so much, really appreciate the feedback! This is exactly what I was missing.

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