QR code component

Community feedback

• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted over 3 years ago

  Hey,

  It's hard to set general rules, when to embed images in your html and when to apply them as backgrounds. Every image though that adds extra meaning to the content or has a distinct purpose (like being a QR code that needs to be scanned) should be included in the html.

  Just think about it. How will a user who can't see the image will know there is an image there, if you set it as a background? There's no alt text, no aria-label, nothing, just an empty div (not sure how that gets announced - if it gets announced - by a screen reader but I'm fairly sure it's not sufficient).

  This is something that is easy to forget about so I thought I'd mention. :) I'd definitely include this image in the html. If you struggle to make it responsive, use this code snippet on the image:

  display: block;
  max-width: 100%;
  height: auto;
  

  Apart from this, your solution looks great btw!

  32

  Marked as helpful
• 

  Roberto Yukio Miyamoto Arita•320

  @RyukioMiyamoto

  Posted over 3 years ago

  Impecable work Andrii! I would just adjust the color on the <p> that's differing from the proposed design.

  As for the image, what I follow when solving the challenges is considering if the image would be something static or dynamic in a real project, maybe coming from the backend. For hero sections for example, I'd use the background solution as it won't likely change or have variations.

  For this QR Code challenge, in my conception, there could be another card with a different QR Code somewhere down the line, so I chose to make it a <img>.
  This is my personal take on this by the way, I have no idea if it's a common/good practice, I'll have to look it up later.

  Keep it up!

  11

  Marked as helpful