Design comparison
Solution retrospective
i'm proud to have completed this challenge
What challenges did you encounter, and how did you overcome them?I did not encounter any special difficulties except using CART icon
What specific areas of your project would you like help with?I encountered a problem using the CART icon. i hope someone can guide me where the problem is.
Community feedback
- @danielmrz-devPosted 6 months ago
Hello there!
Congrats on completing the challenge! ✅
Your project looks great!
I have a suggestion about your code that might interest you:
📌 You can use the
<picture>
tag when you have different versions of the same image.Using the
<picture>
tag will help load the correct image to the user's device, saving bandwidth and improving performance.Example:
<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>
I hope this helps!
Other than that, excellent work!
Marked as helpful0 - @gmagnenatPosted 6 months ago
Hi, congrats on completing this challenge ! For the cart icon I see you tried to use fontawesome. In case fontawesome is optional for you, you have an svg cart icon in the asset folder that you can use on your button. There are different ways to do it. I like using a pseudo element as the cart icon is just decorative.
Something like this can work
button::before { content: ""; display: block; width: 0.875rem; height: 1rem; background: url("../assets/images/icon-cart.svg") no-repeat; }
Other part of the code that could be improved.
- striked through price should be placed in a
del
tag del element - Depending on the ending behaviour your button can be of type "submit" maybe?
- you can use css variables in your stylesheet for value you are using at different places.
- the media query target very small screen below 375px wide. Maybe increase this value a bit?
I hope this helps you for your next challenge or to improve and update this one.
Happy coding !
Marked as helpful0 - striked through price should be placed in a
Please log in to post a comment
Log in with GitHubJoin 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