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 - with explanation

Joachim 840

@Thewatcher13

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


This is a solution with a little more explanation for beginners like I was when i'm start my journey on frontendmentor.

I'm still learning every day more and more and I think this kind of solution with a little bit of explanation could be helpfull to new people. I'm every day more familliar with the basics of html and css with thanks to frontendmentor!

Please give feedback if I things say that not right or make sense.

Community feedback

@thomashertog

Posted

visually very similar to design so kudos for that

few small improvements can be made though

  • you choose a <span> in the button to have extra styling options available, yet you didn't make use of it (because all styling was already done on the button itself), you can remove the <span> since you don't need it
  • the button has no type attribute (type=button will do)
  • there is still a value in px for a gap somewhere in your CSS, which might not scale as well, you may want to replace this with em/rem

Marked as helpful

0

Joachim 840

@Thewatcher13

Posted

@thomashertog

  • I can remove the span element indeed! Is it right, my "add to cart" is a label for the button so it doesn't need a tag?

  • I implement your feedback!

0

@thomashertog

Posted

@Thewatcher13 you can include a <span> if you want to, but in this case you don't need to. It also doesn't add any semantics, so it's pretty useless at this point

0
Joachim 840

@Thewatcher13

Posted

@thomashertog Yeah I knew it, but I mean it doesn't need a tag at all bcs it is the label for my button, right?

0

@thomashertog

Posted

@Thewatcher13 exactly!

0

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