Product preview card w/ Tailwind CSS & Svelte
Design comparison
Solution retrospective
I decided to try giving myself an estimate of how long it would take to build this component, and even with extra distractions and a few segues, it took me less than 2 hours to complete. Which was my initial estimate before starting this project.
What challenges did you encounter, and how did you overcome them?I wanted to use modern methods for changing the image at different screen sizes, so I researched responsive images on mdn's website. Eventually found this tutorial and learned the best method for including different images for the sake of art direction.
Community feedback
- P@AnonymousCoder323Posted about 2 months ago
Great job! Responsiveness is good. I really like the hover transition on the button. Is there a reason you used an
<a>element instead of a<button>element for the button? Also, it seems like you're missing the cart icon on the button.0P@SuiteMelPosted about 2 months ago@AnonymousCoder323 Thanks for point out the missing icon. I have updated my solution accordingly. As for why I use the
<a>element instead of a<button>I think both can be used depending on the scenario. I guess in my case I used a link since it could theoretically link to a cart page after a click.0
Please log in to post a comment
Log in with GitHub
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