@KapteynUniverse
Posted
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
@KapteynUniverse Thank you for the feedback! I was considering using a <h2> rather than a <h1> but wasn't too sure. From now on when building a component I'll opt for a <h2> instead.
I have dabbled in using em/rem units but it's definitely something I need to refresh myself on. I'll take a look at the video you linked.
Thanks again for the feedback 👍
