@josh76543210
Posted
Great job on your solution! Looks Good!
Here are some recommendations for improving your code:
HTML: Use semantic elements such as <main> and <footer> to improve the accessibility and organization of your page.
Alt text: Images must have alternate text. For example: <img src="images/image-qr-code.png" alt="QR code to frontendmentor.io"/>
CSS: Use relative units like em or rem for the font-size instead of using pixels. The font-size in absolute units like pixels does not scale with the user's browser settings.
I hope you find these useful!
Happy coding!
Marked as helpful
@joeterlecki
Posted
@josh76543210 Thanks for the feedback. I'm aware of the semantic elements but thought they were overkill for a component like this.
I guess maybe it makes sense to use <header> for the card header.
Good call on the ALT text, I forgot about that.
DO you have a preference to em vs rem? I feel like rem is the better choice based on videos and documentation I have read but I do not have the real word experience to back that up.
Thanks, a lot for your feedback. Ill make sure to incorporate it into my next project here.
@josh76543210
Posted
@joeterlecki There’s no better unit really, and it all depends on your personal preferences.
Some people like to design everything in rem units for consistency and predictability, while others like to also use em units in places where the influence of nearby parent elements would make sense.
Using rem units allows you to avoid the compounding effect of em units. With rem things are always and consistently based on the font-size of the root element.
That's why I personally prefer to use rem.
