Responsive product preview using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 🏷️:

  • Yes, you can employ the <picture> tag when dealing with various versions of the same image 🖼. Utilizing the <picture> tag allows you to dynamically load the appropriate image based on the user's device, which not only conserves bandwidth but also enhances overall performance. You can find further information on this topic 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}">
    </picture>
    

  • Wrap the footer of the page with the <footer> tag instead of using <div class="attribution">. The <footer> element is ideal for author information, copyright, and legal details.

  • You can employ the <del> tag to show the original price before the discount and apply a sr-only class to provide a screen reader description of the discount, enhancing accessibility.

    Example: <del><span class="sr-only">Old price: </span>$169.99</del>

  • The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

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

  Happy coding!

  Marked as helpful

  2

  ---

  

  2trill2code•70

  @2trill2codePosted about 1 year ago

  @MelvinAguilar Thank you so much for reviewing my solution and for this detailed feedback, I appreciate it. I will definitely check out those links.

  0