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

vanilla css QR code component

Zorah 20

@ZorahScope

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


Any feedback is welcome.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Eli, good job! I took some time to look at your code and have some ideas for improving it:

  • add main tag and wrap the card for Accessibility
  • remove all margin from .card class
  • you can remove height from img because it is superfluous
  • try to use flexbox to the body for center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px try to use relative units of measurement -> read here

Overall you did well 😉

Hope this help and happy coding!

Marked as helpful

1

Zorah 20

@ZorahScope

Posted

@denielden

Thanks for being so in-depth with the feedback. I'll go through and apply all the suggestions when I get the chance.

Much Appreciated 😊

1
Zorah 20

@ZorahScope

Posted

@denielden

Thanks again for your feedback. After applying those fixes I pushed it further doing the following

  • Cleaned up my html by removing unneeded elements and internal css
  • Applied best practices with accessibility by using both HTML5 and ARIA markup
  • Pushed the attribution to the bottom

I learned a lot from this

1
Travolgi 🍕 31,420

@denielden

Posted

@elixy You are welcome! Well done, Now it's much better :) Keep it up

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