QR code component

Community feedback

• 

  jdrodriguez2707•170

  @jdrodriguez2707

  Posted 4 months ago

  Hi, @oLucasstein. Hope you're doing very well. Your solution is very good, congratulations! 🎉

  Here are a few things I think could improve it even further:

  • Semantic HTML: Since we’re building a reusable component, wrapping all the content inside an <article> tag would be a great choice. This tag is meant for self-contained content, making the card more adaptable. Plus, you could replace the <h1> with an <h2>, assuming the card will be used within a page that already has an <h1>. This is just my perspective, thinking about how the component might be integrated into a larger project, but feel free to keep the <h1> if it makes more sense in your case.

  • Accesibility: You could try testing your site with different browser font sizes to see if anything breaks. I’d recommend using 'rem' instead of 'px' for those elements that need to adapt to user preferences, especially text. This helps ensure that your design remains accessible and adjusts properly to different user settings.

  • Code structure: You should use classes instead of ids so you can reuse styles when necessary. Maybe in this small project we can't see a difference but we'll do in larger projects. So it's good to get used to it, in my opinion. And last but not least, you could also use CSS custom properties to store those repeated values like colors, font sizes, spacing, etc. This makes your styles more maintainable and flexible. For example:

  :root {
    /* Colors */
    --slate-300: hsl(212, 45%, 89%);
    --slate-500: hsl(216, 15%, 48%);
    --slate-900: hsl(218, 44%, 22%);
    --white: hsl(0, 0%, 100%);
  
    /* Typography */
    --primary-font-family: 'Outfit', serif;
    --primary-font-size: 2.2rem;
    --secondary-font-size: 1.5rem;
  }
  

  Overall, you did it very well and solved the challenge, that's the most important thing. This is just my personal opinion and recommendations that I can give you based on my own experience. Keep up the great work and happy coding! 🚀

  12

  Marked as helpful
• 

  Carrinson•10

  @Carrinson

  Posted 4 months ago

  it looks really good and has good responsiveness

  00