Product preview card component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 11 months 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>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 text Perfume

  ---

  • 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.

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  P

  mhykah•220

  @mhykah-webdevPosted 11 months ago

  @0xAbdulKhalid This was incredibly helpful. I didn't know about the del element and I can see how in a bigger project this would make it a lot more reusable. Thank you so much!

  0
• 

  Maria Valentinova Ivanova•220

  @MariaValentinovaPosted 11 months ago

  Great job! Did you do this with access to figma? It's just excellent 👌 I think you could merge this part: /*

  1. Use a more-intuitive box-sizing model. */ *, *::before, *::after { box-sizing: border-box; }

  /* 2. Remove default margin */

  • { margin: 0; } or you didn't want to get margin: 0 to after and before? If you adjust the margin you have in the card and the button "Add to card" it will be exactly the same as the design.

  1

  ---

  

  P

  mhykah•220

  @mhykah-webdevPosted 11 months ago

  @MariaValentinova Thanks for your comment! I actually got those lines from this reset: https://www.joshwcomeau.com/css/custom-css-reset/

  1