Skip to content
Submitted 6 months ago

Responsive QR Code Component using CSS Flexbox

accessibility, web-components, styled-components
Sania Saleem•110
@codeBloom361
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud of aligning content using Flexbox and I'll try to write CSS more neatly next time.

What challenges did you encounter, and how did you overcome them?

Aligning content was a challenge for me and Flexbox helped me overcome it.

What specific areas of your project would you like help with?

I appreciate your feedback and advice. I like to get feedback on CSS. How can I write it more neatly and efficiently?

Code

Please log in to post a comment

Log in

Community feedback

  • Bhuvnesh Upadhayay•2,120
    @bhuvi819381

    Overview

    1. Favicon Path Correction

    • Ensure the favicon path is correct in the <head> section.
    • Example: 
      <link rel="icon" href="/path-to-your-favicon.ico" type="image/x-icon">
    • Use the browser's developer tools to check if the favicon is loading correctly.

    2. Use Semantic HTML

    • Wrap everything inside a <main> tag to improve structure and accessibility.
    • Example: 
      <main>
  <!-- Your content here -->
</main>

    3. Utilize CSS Variables

    • Define reusable CSS variables for consistency and easier maintenance.
    • Example: 
      :root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

    4. Avoid Fixed Pixel (px) Units

    • Use rem or em for scalable and accessible design.
    • Example: 
      body {
  font-size: 1rem; /* 16px default */
}

    5. Mobile-First Approach

    • Start designing for smaller screens first, then enhance for larger screens.
    • Example: 
      .card {
  width: 100%;
}

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}
    • For simple card layouts, avoid unnecessary media queries.

    6. Validate Your Code Before Submitting

    • After uploading on Frontend Mentor:
      • Check for accessibility issues.
      • Validate your HTML for errors using W3C Validator.
      • Review reports and fix any issues found.

    By following these guidelines, your frontend projects will be more maintainable, accessible, and professional.

    Marked as helpful

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