Skip to content
Submitted about 3 years ago

Responsive QR scanner page

Etinhandy•30
@Etinhandy
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

trying to figure out the color without checking the stylesheet lol

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Etinhandy! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    That's an interesting approach to figuring out the color code by yourself. Also, do you mean the style-guide.md instead of the stylesheet (CSS file)? All the color code is provided in the style-guide.md.

    Some suggestions.

    • The alternative text for the QR code should not contain the word "image". The semantic meaning of the img element will make the screenreaders pronounce it as an image.
    • I recommend improving the alternative text to "QR code to frontendmentor.io" to give the users more information about the QR code.
    • I recommend adding width and height attributes to each image element. This way, the browser knows how much space the image requires before it can be fully loaded. As a result, it would optimize CLS (Cumulative Layout Shift).

    Hope this helps. 🙂

    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