Skip to content
Submitted 24 days ago

Qr Code Component made by html css flexbox

Zahra•40
@Z3ra33
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • P
    Kamran Kiani•2,700
    @kaamiikPosted 24 days ago

    Hi. I have some notes for your code which may improve it.

    GitHub

    • Use one repo for each project. Adding all in one repo consider as a bad practice.

    HTML

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

    This provides proper document outline while keeping markup minimal.

    • 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
    • For img use max-width: 100%;

    This ensures:

    • Images scale properly
    • 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
    • Use min-height instead of fixed height for viewport-height elements
    • You do not need media query for this challenge and also remember in most of the times It's better to code mobile first.
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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