Skip to content
Submitted almost 2 years ago

Displaying QR-code using HTML and CSS

Phyu Sin Lin•60
@oliviaphyu
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my first challenge from a Frontend mentor. I did my best to imply HTML and CSS. I'm willing to receive any feedback from this community.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Oluwalolope Adeleye•600
    @Oluwalolope

    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 example you used <div class="attribution"> for the ending of your page. It would have been better to use the Footer tag instead. 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

Join 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