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

Submitted

Responsive product preview card

P

@cacesasa

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm happy that I was able to finish this challange with no mayor hurdles.

What challenges did you encounter, and how did you overcome them?

Nothing that I can think of this time.

What specific areas of your project would you like help with?

I'm open to comments and suggestion that will help me to improved as a developer. Thanks

Community feedback

P

@raswonders

Posted

I like your solution, namely how you solved image responsiveness with bg. I was just wondering was there particular reason you went with span instead of div in here?

 <div class="image-container">
        <span class="background-image" role="img" aria-label="Gabrielle Essence Eau De Parfum image"></span>
 </div>
1

P

@cacesasa

Posted

@raswonders Thank you, the reason I used span is because is an inline tag instead of blog, since I'm using a background image, I needed a way to described the image for accessibility purpose. The span does not hold the image itself, just the accessibility information, the image is hold by the div image-container. I hope that explanation help.

1
P

@raswonders

Posted

@cacesasa that's cool, thanks for clarifying.

1

@btlmaldonado530

Posted

Nice solution. I really don't have any advice on how to improve your design. It looks more like the solution than mine did.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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