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-compenent-front-end-mentor

@codekesh

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback are welcome.

Community feedback

stenito 80

@stenito

Posted

Hi there, well done!

I would try to respect the sizes of the design, which is what you would have to do in a professional situation ;-)

On the report issues:

  • Icon tag

The icon tag should have type="image/png"and not type="png". A small thing but the browser uses type to know what type of file it is rendering. It might handle this small mistake, but you should not depend on the browser handling errors ;-).

  • Semantic elements A document should have a <main> tag. The <section> tag can only be part of a <main> tag it should not be used outside of it.
<main id="section">
  <div class="QrCode">
    <img src="image-qr-code.png" alt="frontendmentor">
  </div>
  <h2 class="firstpara center">Improve your front-end skills by building projects</h2>
  <div class="secondpara center">Scan the QR code to visit Frontend Mentor and take your coding to the next level
  </div>
</main>

If you want to code your component so you can use it afterwards, just add a <main> element to your page to avoid the Accessibility (semantic) issues.

Marked as helpful

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