Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHi @ziaddzamel, congratulations for your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and great start! By what I saw youโre on the right track. Iโve few suggestions to you that you can consider to add to your code:
1.Use
<main>
instead of<div>
to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.2.Add the
alt text
to improve the accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). ---><img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">
3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0
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