Product preview card component solution

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Zdenman 👋,

  Congratulations for completing the challenge. You've done a great job! Overall, your design is awesome, and I think your solution is better than mine in some aspects. However, there are some things that could be improved. These are things that I've learned quite recently myself, and I'm not really good at this. Let me try to share them with you.

  • Using height: 100vh; will hide parts of the page when the browser height is shorter than the page content. And it's unscrollable. Simply change it to min-height: 100vh; will solve the problem.
  • In my opinion, adding some paddings to the body could drastically improve the overall design.
  • In terms of image accessibility, generally there are two types of images. One that is important and has meaning, and one that is only decorative. For example in this page, the perfume photo is a meaningful image, whereas the cart image inside Add to Cart button is a decorative image. Adding image description to the alt attribute of meaningful image, and adding aria-hidden="true" attribute to a decorative image could make screen reader user's life easier.

  You could read more about image accessibility in this w3schools article.

  Hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  zdenman•140

  @zdenmanPosted about 2 years ago

  @amalkarim Hey Amal. Thanks for constructive comment. I have added all things to the solution that you mention. I know about importance of alt descriptions but for this challenge I simple didn't bother. But I didn't know part with screen readers. That link to the W3C article was really helpful. Thanks a lot! I have learn something new! Happy coding!

  0