QR Code Component

Community feedback

• 

  Cyuzuzo Bienvenu•220

  @bienvenudevPosted 7 months ago

  Hi there!

  This is looking good overall! Here are a few suggestions that might make things even better:

  • For non-decorative images, consider adding descriptive alt text like "Front-End Mentor QR Code" to improve accessibility for screen readers.
  • Instead of pixels, using REM units for font sizes ensures better responsiveness across different screen sizes. Here's a helpful article: (https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5)
  • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
  • Instead of setting a fixed width on your card, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
  • Similar to width, avoid setting a fixed height on your card. If you need extra space around the text, use padding instead. This ensures the content can adjust to different content lengths.

  And I also saw your question asking 'Is using :root and creating variables considered good practice?'.

  The answer: Yes, using :root and creating variables is a fantastic practice called CSS Variables. It makes your CSS more organized, maintainable, and easier to update. Here's a helpful article for further exploration (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

  CSS variables video(https://www.youtube.com/watch?v=PHO6TBq_auI)

  I hope these tips are helpful! Feel free to ask any questions you might have.

  Marked as helpful

  0