Skip to content
Submitted over 2 years ago

QR code component solution

João Marcos Teixeira Ribeiro•230
@JimaLoko
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Do you think the structure and design are good? What would you improve about my code?

All feedbacks and suggestions are welcome !!

Community feedback

  • Purnima Kumar•390
    @purnimakumarrPosted over 2 years ago

    Hi Joao,

    I would suggest these changes:

    • There is 1 accessibility issue. You can remove that by replacing the <h2></h2> tag with an <h1></h1> tag. It is a good practice to put the first heading of your site in an <h1></h1> tag. It makes your site more accessible.

    • Also, I would suggest to put the <footer></footer> outside of the <main></main>. Footer is not a part of the main content of the website. So, your code would look something like this:-

    <body>
    <main>
           main content goes here...
    </main>
    <footer>
         attribution goes here...
    </footer>
</body>

    • And I see you are using a <div></div> tag for the QR code image. The issue is that it makes the code hard to read as one cannot know what the div is for unless they observe the CSS file, and also it is not an accessible option because screen readers see this as just an empty div and therefore, people using screen readers can't know that there is a QR code image there. The fix for this would be to use role and aria-label attributes. <div role="img" aria-label="A QR code to frontendmentor.io"></div> The role="img" specifies that the div is being used to render an image and aria-label attribute works as alt-text for the image in this case.

    • Lastly, you can put the CSS in the index.html file in the CSS file. It is good practice to put all the styles in a seperate CSS file.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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