Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

Alex 110

@aadler91

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Ola White 160

@whitesoftx

Posted

Good work and well laid. But you need a quick fix to clean up your accessibly issue.

It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like main, header, nav, and footer.

For example:

  <body>
<main>
  <div class="card">
    <img src="images/image-qr-code.png" alt="QR code image, which links to frontendmentor">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  </main>

<footer>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/aadler91">Alexander Adler</a>.
  </div>
</footer>
</body>

Let's keep learning... one step at a time.

Marked as helpful

0

Alex 110

@aadler91

Posted

@whitesoftx Thank you for this hint! I included the landmarks in all my projects to be consent with the HTML5 and ARIA rules :-)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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