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

Basic HTML, CSS

Felix 60

@Farrukh997

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


Feedbacks appreciated

Community feedback

@amalkarim

Posted

Hi Felix,

Congratulations for completing the challenge. It's a great solution especially since you're using rem and % unit for margin and whatnot. They makes web page more adaptive to screen width change. However, there are some things that you can change to improve the page.

  • For the main image, instead of using alt="perfume", you can optimize it by giving a more descriptive alternative text, for example alt="A bottle of Gabrielle Essence Eau De Parfum". Read more about descriptive text for images in this W3 Schools article.
  • The more semantic way to write price that's no longer accurate (price before discount) is by using <s> tag. Try this: <s class="previous-price"><s>$169.99</s>. By default, browser will give style text-decoration: line-through; for <s> tag. But you can customize it of course.

That's it. I really like your solution. Happy coding!

Marked as helpful

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