Skip to content
Submitted about 1 month ago

qr code component

x-147•240
@x-147
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

Solution retrospective

What are you most proud of, and what would you do differently next time?

any feedback on css appreciated, thanks!

Community feedback

  • P
    Kamran Kiani•2,740
    @kaamiikPosted about 1 month ago

    Your HTML structure is good. Congrats! Some notes to improve your code:

    HTML Structure & Semantics

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

    This provides proper document outline while keeping markup minimal.

    • Image descriptions should be meaningful and descriptive:

      • Use alt text that explains the purpose: alt="QR code to Frontend Mentor website"
      • Avoid generic descriptions like "image" or "picture"

    • 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 Best Practices

    Reset & Base Styles

    • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)
    • This ensures consistent styling across browsers

    Modern Layout Techniques

    • Center content using modern flexbox:
    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

    Container Sizing

    • Avoid fixed dimensions for text containers:
    /* Instead of: */
.container {
  width: 280px;
  height: 390px;
}

/* Use: */
.container {
  max-width: 18.75rem; /* or appropriate rem value */
}

    Image Handling

    • 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
    Marked as helpful
    1
  • x-147•240
    @x-147Posted about 1 month ago

    hi, any feedback welcome! i am not sure how to get the dimensions from the png, so made assumptions of card, image size etc.

    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