P
@mickoymouse
Posted
It looks okay. Couple of things though:
- 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.
- Card is not centered on mobile design and looks a bit tall and thin compare to the design.
- 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.
- 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.
- 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.
- 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
