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

Responsive QR Code Component

@0xkiichiro

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

@Paul21777

Posted

Hi !

Congratulations for this ! Your design looks really great ! To improve it, I suggest you to look at the accessibility issues FrontEndMentor gives you :

First accessibility issue :

You should have at least one landmark of "Content sectioning". Check the MDN documentation for more info : https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning

In order to fix it, you can replace your <div id="container"> by a <main> element. You should only use <div> when their is no semantic options available for his purpose.

Second accessibility issue :

Your page should at least have one <h1> for the search engine optimization (SEO). I suggest you too replace your <h2> by a <h1>.

Finally, you can try to stick as far as possible the layout given by frontendmentor (padding, font-size, width and height, text color...).

Hope that helps, keep the good work !

1

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