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

Chanel Perfume Solution

kathrryn1 40

@kathrryn1

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


Feedback will be highly appreciated

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
  • The only heading ⚠️ in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.
  • The prices are not a list ❌ but instead individual prices.
  • Currently, the old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚

Del Element

  • The article element is being used incorrectly ❌ and not needed for this challenge.
  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
  • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Marked as helpful

0
Nelson 2,390

@nelsonleone

Posted

**HELLO......congrats on completing this challenge, well done ** 🎉 🎉

Here's just one thing i noticed , hope this comment was helpful and made meaning to you

Firstly, please don't forget to add alt= to your images, It helps user to know what the image is when (e.g page doesn't load well because of network....etc) , and also helps screen-readers(AT) to not stress much on the image.

If the image is just for design , you can use an empty alt="" and set aria-hidden="true"

Else,give it a good descriptive alt, if the image sends a message(not just for design)

**Hope you understood, have fun coding🎉 🎉 **

Marked as helpful

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