Product Preview Card

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted 3 months ago

  Hello @Gehad28. Congratulations on completing this challenge!!!🎉

  To change the product image you can do it in index.html file using the <picture> tag

  Example:

  <picture>
    <source media="(min-width:650px)" srcset="images/image-product-desktop.jpg">
    <img src="images/image-product-mobile.jpg">
  </picture> 
  

  Be sure to add descriptive alt text improves accessibility and screen readers will say the alt text below in the example for people who blind and or visually impaired.

  Example: alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it">

  More info📚:

  • HTML picture tag

  To improve your index.html file, make sure you use HTML Semantic Tags

  Add to cart text should be wrapped in <button> because users are clicking on the <button> to trigger an action to do something

  Using a <div> on the website does not explain any of the content

  Here is my solution to this challenge: Product preview card component

  I hope you find this useful and don't hesitate to reach out if you have any questions

  Marked as helpful

  1

  ---

  

  جهاد أحمد•280

  @Gehad28Posted 3 months ago

  @bccpadge

  Thank you so much. This is really helpful.

  0
• 

  geomydas•1,440

  @geomydasPosted 3 months ago

  Don't use background images for things like this. You can use display: none to change but it is much more better to use the <picture> tag. The thing I said here is the same as what Rebecca said

  Marked as helpful

  0