Skip to content
Submitted 3 months ago

CSS, HTML

P
Yonerfy•210
@Yonerfy
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    I have some notes for your code which may help improve your code:

    HTML

    • For single-component pages, use a minimal semantic structure:
    <body>
  <main>...</main>
</body>

    This provides proper document outline while keeping markup minimal. Remember the main tag is necessary.

    • Image descriptions should be meaningful and descriptive:

      • Use alt text that explains the purpose: alt="QR code to Frontend Mentor website"
    • Follow proper heading hierarchy:
      • Each page should have one <h1>
      • For components that are part of a larger page, use <h2> instead
      • This maintains proper document structure while reflecting component hierarchy

    CSS

    • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)
    • This ensures consistent styling across browsers
    • You don't need min-width on body. Also no need for max-width on #root. You only need a max-width on .card with rem unit.
    • Keep image styling minimal and responsive:
    img {
  max-width: 100%;
  display: block;
}

    This ensures:

    • Images scale properly
    • No unwanted whitespace below images
    • Content adapts to different screen sizes

    CSS Units Best Practices

    • Use relative units for better accessibility and scaling:
      • Convert font-size and max-width values from px to rem
      • This allows text and layout to scale with user preferences
      • Read more about unit best practices here

    This improves:

    • Accessibility for users who adjust browser text size
    • Consistent scaling across devices and zoom levels
    • Code maintainability and flexibility

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