product-preview-card-component

Community feedback

• 

  P

  Judge Micko S. Silvestre•395

  @mickoymousePosted 7 months ago

  It looks okay. Couple of things though:

  1. It looks like you didn't use the other font family for some elements so the live site looks a bit different from the design.
  2. Card is not centered on mobile design and looks a bit tall and thin compare to the design.
  3. In my solution, I used data attribute in adding the image for the button. Maybe you can try and implement that as well instead of adding an image tag.
  4. I just recently learned this as well, the picture element is a great html element that we can use for different image sizes! This challenge is a good place to implement that.
  5. Aside from that, some correct usage of html semantics I think like for the button you use a div instead of an actual button. Visually should look the same but semantically It wont be right.
  6. This might also be a great chance for you to explore accessibility (not too in depth). Example is for the price, visually it's clear that we have a sale price and original price. However, for screen readers, they would read it as $149.99 $169.99, which doesn't make sense since they would be read two price for a single product.

  Some of the suggestions I provided can be found on my solution as well and some links on the repo for some useful resources.

  Good luck in future challenges!

  1