Product Preview Card Component using HTML5, CSS and JS

Community feedback

• 

  Chisom Ogbonna•380

  @MavreonPosted over 2 years ago

  Hello Fricis, congratulations completing this challenge🎉. Based on your concerns, Yes! it's okay to use the background-image property, I also used it when I executed this challenge so no worries on that end. Also, I noticed your text $169.99 is not centered, so I looked into your code and found out you set align-items: flex-start instead of align-items: center. I think you nailed the rest of the design for the most part. Happy coding 🚀

  Marked as helpful

  2

  ---

  

  P

  Gustavs Fricis Jankavs•180

  @GFJankavsPosted over 2 years ago

  @Mavreon Thanks for the tip!

  1
• 

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  Using background-image is fine, but you should consider using the <img> element for semantics (i.e. because the image is part of the actual content), accessibility, so it can have an alt attribute and arguably use the <picture> element for load time and bandwidth. Anyhow, good job! Don't let these considerations or perfectionism stun you. First get it done, then get it right, then get it optimized. :)

  Marked as helpful

  1

  ---

  

  P

  Gustavs Fricis Jankavs•180

  @GFJankavsPosted over 2 years ago

  @joaojgabriel Nice tip regarding <picture> tag! Just recently read about it in W3Schools HTML lessons and now will have an actual use case for it. Thank you!

  1