Skip to content
Submitted about 2 years ago

Responsive Product Preview Card Page

Nicholas Albuquerqueā€¢270
@nicoams
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello guys!

I had some doubts while working on this project and I hope you could help me with them:

  1. About the nesting on HTML: I only used divs to contain the elements, including the ones that work as background and as the box to hold the major information about the product ("image" and "infos"). Is there any other feature that works best for this purpose and let the divs only for minor elements (paragraphs and links)?

  2. About the CSS: I tried to rearrange the position of the image and text inside the button, but it did not work as I planned. Maybe because it is a link <a></a>. Is there any way to improve that?

That is it. If you have any other tips or observations, please, feel free to share.

Thank you!

Community feedback

  • Fabā€¢50
    @tdreamsPosted about 2 years ago

    Hi @nicoams šŸ‘‹, good job completing this challenge, and welcome to the Frontend Mentor Community! šŸŽ‰

    1. Here are some suggestions you might consider: You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.

    2. In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.

    Example:

    <picture>
   <source media="(max-width: 1046px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="your_alt_text">
</picture>

    You could use the <del> tag to display the old price:

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

    Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about.

    Good job, and happy coding!

    1
    Nicholas Albuquerqueā€¢270
    @nicoamsPosted about 2 years ago

    @tdreams Thank you for poiting out those tags and observations about accessibility. I did not know about them. I appreciate the feedback.

    0

Please log in to post a comment

Log in with GitHub

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