Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Agustín Ramunno• 80

    @RamunnoAJ

    Posted

    𝗛𝗲𝘆 𝗧𝗼𝗸𝗲𝗹𝗼! Congratulations on completing this challenge. Your solution is almost done! I have some tips to share with you.

    Use the 𝗧𝗛𝗘 𝗣𝗜𝗖𝗧𝗨𝗥𝗘 𝗧𝗔𝗚 that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for 𝗦𝗘𝗢 / 𝘀𝗲𝗮𝗿𝗰𝗵 𝗲𝗻𝗴𝗶𝗻𝗲 reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device 𝗱𝗲𝘀𝗸𝘁𝗼𝗽 + 𝗺𝗼𝗯𝗶𝗹𝗲.

    Check the link for the 𝗼𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗱𝗼𝗰𝘂𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 for <picture> in 𝗪𝟯 𝗦𝗖𝗛𝗢𝗢𝗟𝗦: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:90em)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-mobile.jpg" alt="Gabrielle Parfum">
</picture>

    • The 𝗔𝗹𝘁 𝗧𝗮𝗴 𝗗𝗲𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻 for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

    • The old price is not being announced properly to screen readers. You want to wrap it in a <del> element instead of a <p> and include a sr-only text explaining that this is the old price.

    👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/responsive-card-component-html-css-sOnpd3gyk0

    𝗛𝗮𝗽𝗽𝘆 𝗰𝗼𝗱𝗶𝗻𝗴!

    Marked as helpful

    0