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 with basic HTML and CSS

zanfa97 100

@zanfa97

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

Boris 2,870

@mkboris

Posted

Hi zanfa97 great job on completing your first challenge, here are some suggestions to make it better

  • All content should be wrapped within landmarks. Wrap a main tag around the card and a footer for the attribution.
  • To get the card properly centered add this on your body
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh; 
  • Font-size should be defined in rem.
  • Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.

Hope this helps

Marked as helpful

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