QR-code component solution using flexbox

Community feedback

• 

  

  Gwenaël Magnenat•1,520

  @gmagnenatPosted about 2 months ago

  Hi, great job on your project! Here are some key areas where you can improve accessibility, maintainability, and best practices.

  Semantic HTML & Accessibility

  • Missing <main> landmark: This is essential for screen reader users to navigate the primary content of the page. Wrap your component inside <main>.
  • Avoid unnecessary <section> elements: Since this is a single component rather than a distinct section of a document, a simple <div> with a class is more appropriate.
  • Heading level should be <h2>: As this component is part of a larger page, an <h1> would be used for the main page title, and this should be a subheading.
  • Missing alt text for images: Without an alt attribute, screen readers will ignore the image. Ensure all meaningful images have descriptive alt text.

  CSS Best Practices

  • Use a modern CSS reset: A reset (like Andy Bell’s or Josh Comeau’s) ensures better consistency across browsers and should be included at the top of your stylesheet.
  • Avoid styling HTML elements directly (e.g., p, h1, section): Instead, use classes. Styling elements directly makes it harder to maintain and update your CSS if the HTML structure changes. Adding classes keeps the styles modular and reusable.
  • Use rem instead of pixels (px) for max-width of your card: This makes your layout more flexible and accessible for users who adjust their browser’s default font size.
  • Avoid fixed max-width on images: Modern CSS resets typically include img { max-width: 100% }, so you don’t need to redefine this unless necessary.

  These improvements will make your project more accessible and maintainable.

  Keep up the great work, and happy coding! 🚀

  Let me know if you need further clarification.

  Marked as helpful

  1

  ---

  

  pabjunior•10

  @pabjuniorPosted about 2 months ago

  @gmagnenat thank you very much, I needed this...I will update it soon

  0
• 

  P

  Marcelo Colodetti Filho•90

  @MarceloColodettiPosted about 2 months ago

  The solution appears to be a different size than the presented design, but other than that, it's great!

  Marked as helpful

  0

  ---

  

  pabjunior•10

  @pabjuniorPosted about 2 months ago

  @MarceloColodetti thank you, I will update it soon to fit the size as it is

  0