Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Building QR code component with flexbox

#fresh
Shiash• 100

@kloprop

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

@rostyslav-nazarenko

Posted

Hi! Excellent solution! 🙂

  • HTML (accessibility problems)
    • wrap your code in main tag or change div class="card" to main class="card"
    • change div class="attribution" to footer class="attribution"
    • alt should describe an image or its function and be empty only if it is only decorative, read more about alternative text here. In this challenge alt can be QR code to frontendmentor.io so you can show the image function in this case
  • CSS
    • it is not recommended to set font-size: 62.5%; read about it here
    • use min-height: 100vh; on body element so that in case of overflow it will allow scrolling
    • change the background color to match to the design

Have a nice day👋!

Marked as helpful

1

Shiash• 100

@kloprop

Posted

@rostyslav-nazarenko Thanks for your feedbacks

I always forget to add tags like main and footer , thanks for the reminder

I see the point of using min-height but for the font size of 62.5%, I need time to digest and understand.

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