Frontend Mentor - QR code component HTML and CSS

Community feedback

• 

  JustAsteri•90

  @justasteriPosted about 1 month ago

  HTML:

  • Semantic elements: Consider using a more semantic element for the .image container. Since it holds an image, a <figure> element might be more appropriate.
  • Redundant srcset attribute: The img tag doesn't have a srcset defined, so you can remove the empty srcset="" attribute.

  CSS:

  • Specificity: You can improve the specificity of your selectors to avoid potential conflicts with other styles. Consider using class names instead of tags whenever possible (e.g., .container instead of #container).
  • Responsiveness: The code currently uses fixed widths and margins. Implementing responsive design techniques like media queries would ensure the component adapts to different screen sizes.

  Additional points:

  • Font loading: Importing the font from Google Fonts is a good practice. However, consider using a font-loading strategy (like font-display) to optimize performance.
  • QR code accessibility: For improved accessibility, consider adding a descriptive text block (besides the visual QR code) explaining its purpose and providing a link to the target website.

  1