@correlucas
Posted
๐พHi @TuanLinh02, congratulations on your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
1.Add the alt text
to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a 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">
2.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.
3.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for 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 helpful