Solution retrospective
I am pleased with the likeness to the original design I achieved and it was good to get some experience using CSS variables as it was the first time for me to use them.
What challenges did you encounter, and how did you overcome them?I struggled a little with getting the correct spacing and think there are still some slight differences between my version and the original design. I overcame this problem by checking the Figma design for more details.
What specific areas of your project would you like help with?How to handle variables in CSS, good practices, when to use variables and when not to, etc.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @KapteynUniverse
Hey, good job. It doesn't have to be pixel perfect but the closer is better ofc.
Use variables all the time for good practice. For the challenges here, you don't need them but they may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s.
Use also a modern css reset before every project.
Imgs need to have meaningful alt text, except for the decorative imgs. You already wrote something but i think it needs a little bit more context. Like "QR Code of Frontendmentor.io"
This component is for to use in a web page and every page should only have one h1(mostly). This is a simple product card, it would never be used to serve the main heading on a page, using a h2 for h1 would be better. But on the future challenges doing this will give you a warning on the HTML report when you submit a solution. If it bugs you, you can create a h1 with some text and make it for screen readers only.
Instead of pixels, em/rem units are better for responsiveness. I recommend you to check Kevin Powell's this video for better understanding.
Marked as helpful - @RoxySash
I like it its so close to the original.
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