Skip to content
Submitted over 2 years ago

Product Preview Card | HTML and CSS Only

P
Cloud Custodian•80
@joeterlecki
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Here is my second solution and I incorporated the feedback from my first challenge.

My question would be, how would you change the dynamic photo for responsive design? In this case, a second image was provided and the only way to do it with an img src tag was to use srcset and put the media queries in HTML. To me, this seems like an anti-pattern as those breakpoints and image changes should be in the CSS styling. But that brings another issue to me. If you define an image in background styles in a div, then what's the appropriate way to apply alt values for accessibility?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    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!

  • José Alfredo Mário Dos Santos•160
    @Josemario17

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord