Product preview card on perfume

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution contains some minor semantic issues which may cause lack accessibility

  ---

  • The <p class="product__category">PERFUME</p>, must want to be changed to normal case like Perfume

  ---

  • Providing uppercase letter to them is not a good practice and the screen reader will read it as letter by letter like P, E, R etc.

  ---

  • Don't worry we can use text-transform: uppercase to transform the letter with css property

  ---

  • And another thing that the old price is not being properly announced, you have used p element for that.

  ---

  • Actually there's a native html element which comes handy in these situations. it is del element

  ---

  • So you can use like this <del>$169.99</del>

  ---

  • These are the tips which improves the accessibility in real world situations.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0

  ---

  

  Okemwa-mokaya•350

  @Okemwa-mokayaPosted over 1 year ago

  thank you for the corrections and feedback,@0xAbdulKhalid

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @Okemwa-mokaya Glad you found it helpful ! 🤠

  0