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 using CSS flexbox

@Oluwabusayomi11

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


Please any feedback would be highly appreciated

Community feedback

@AgusSaMac

Posted

Hello! Congratulations for finishing your challenge! Here's some feedback:

  • The attribution should be moved at the end of the html just before the closing </body> tag, and change it to <footer>. Atributions and legal disclaimers are usually part of the footer.
  • Try to always link the attribution to your profile. This is a good practice for the future, so potential employers and/or clients may have a way to contact you.
  • Change the <section> tag for <main>.
  • use a <h1> tag instead of <h4>.
  • You have an html issue in the image source, change \ for /.

Now on the css part.

  • You were going great when you applied the box sizing as border box, just add a box-sizing: inherit, check: https://www.paulirish.com/2012/box-sizing-border-box-ftw/.
  • Also to the html tag add a font-size: 62.5% this is to make 1rem = 10px.
  • I would recommend against using static units like px, cm and such, because screen sizes vary continously, if you leave them static, it may cause problems with some screens.

I hope it helps.

Happy coding!

Have a great day!

Marked as helpful

0

@Oluwabusayomi11

Posted

@AgusSaMac Thank you very much for your feedback.

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