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

Product Preview Card Component using HTML/CSS/Flexbox

muda4444 20

@muda4444

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


Feedback welcome

Community feedback

P

@ghintema

Posted

Hi, I've just had a glance at your code and these are the things that rose my interest:

  • You should put your prices in an extra <p>-tag. It's more semantical.

  • there is an empty <div class="card-img"></div>. Supose you did that to give it a background-image. I think (and I'd suggest) its better standard to put an <img>-tag here. Espacially because it's a product-presentation and therefore semantical - and not only pure design. For desktop you can still exchange it anyway via css by setting the .card-img { content: url("") }. But this way you can add <img alt="description of picture"> wich improves accessibility...

Marked as helpful

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