@Oluwalolope
Posted
Hey👋. Congratulations on completing the challenge. Here are a few suggestions for you😄
-
Use Semantic HTML tags instead of assigning classes to divs: I noticed that in your solution. You had a lot of divs that were not semantic. It is considered best practice to use semantic html as much as possible becomes it is more accessible than non-semantic html. For more insights on this kindly click this Semantic Tags
-
Put meaningful descriptions in your alt text: In your code I discovered you wrote this
<img class="qr-img" src="images/image-qr-code.png" alt="QR code image">and it is good but the problem with the alt text is that it is too vague. It can be interpreted in various ways. Is it a QR for E-Payment? Is it a QR for a file? What does the QR do exactly? These are questions that people may ask when seeing the alt description. I advice you use something like this instead<img class="qr-img" src="images/image-qr-code.png" alt="QR code image that takes you to frontend mentor.io">. It may not look much of a difference but it will improve your ARIA (Accessible Rich Internet Application) which is basically how well your website helps those with disabilities. -
Use rems and ems for sizing and not pixels: While there is no syntactic problem with using Pixels. Pixels are too static, they don't change. If your user tries to increase the text size from the browser settings, it won't increase since px are absolute values. Instead use rems which are Relative units to improve user experience. By default 1px = 0.0625rem. So instead of using 15px use
15*0.0625 = 0.9375rems
Once again I want to congratulate🎊 you on completing your first frontend mentor challenge. Looking forward to see your next challenge submission 😄.
I really hope I was able to help you. Feel free to ask any questions for further clarification. This community is designed to help.
Happy Coding 👨💻👋
Marked as helpful
