Responsive Product preview card component using CSS Grid/Flexbox
Design comparison
Solution retrospective
I found this project fairly straight-forward using a mix of CSS Grid and Flexbox, although the hurdle I did get stuck with for a small amount of time was the button and the SVG icon. I found from research you can use the data-icon attribute to implement the icon which worked for me but is that a good way to do it? Could I have done it differently?
Overall feedback and/or suggestions of code changes would be greatly appreciated for me to take into my next projects. :)
Community feedback
- @josh76543210Posted over 1 year ago
Hey There! Good job on your solution!
You could also use the img tag: For example: <img src="images/icon-cart.svg" alt="Cart Icon" />
Another option would be to copy the svg code directly into your html using the svg tags: <svg ... ></svg>
I hope you find this useful!
Happy coding!
Marked as helpful1@TanDevvPosted over 1 year ago@josh76543210 Hi Josh, thanks for the feedback!
Would your method be more preferred in a business practice than mine, or is there not really a preferred way of implementing SVGs and its more personal preference? :)
0@josh76543210Posted over 1 year ago@YorkieLT Check out this link describing the pros and cons of the different ways of implementing SVGs:
1
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