Responsive product preview using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 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!

  21

  Marked as helpful