Product Preview Card | HTML and CSS Only

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing your first challenge! 🎉

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

  HTML 🏷️:

  • "If you define an image in background styles in a div, then what's the appropriate way to apply alt values for accessibility". The images applied for div are only for decorative purposes.

  • "how would you change the dynamic photo for responsive design?" the answer is you can try out <picture>

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

  ---

  Example:

  <picture>
      <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg">
      <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}">
  

  ---

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1
• 

  José Alfredo Mário Dos Santos•160

  @Josemario17Posted over 1 year ago

  you can change it by screen size using the picture tag incorporated with the source tag and then the img tag, see this at: https://www.w3schools.com/tags/tag_picture.asp

  keep on

  0

  ---

  

  P

  Cloud Custodian•80

  @joeterleckiPosted over 1 year ago

  @Josemario17 sorry if I wasn't clear. I did that for my solution but I wasn't sure if that was the best approach because of the media breakpoints in the HTML and CSS.

  Thanks for the feedback

  1

  

  José Alfredo Mário Dos Santos•160

  @Josemario17Posted over 1 year ago

  @joeterlecki no matter, waht is important is that you gonna make better in next time, if my comment usuful give-me upvote please.

  0