HTML/CSS QR Component Solution - Personal Touch

Community feedback

• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted over 1 year ago

  Heyo,

  So there's a few things to cover here:

  1. Adding a folder: this is something you need to do in your code editor and not in Github. Usually you can just right-click on the project's folder to add a new folder or file inside.
  2. You image doesn't show up in the live site because the source path you defined is slightly incorrect: it should be "./image-qr-code.png" instead of "/image-qr-code.png"
  3. If you'd like to use a certain font family, you first you need to import it (which you did) and then apply it (this you forgot). Usually you can apply this to the body itself unless the challenge has multiple font families. Google Fonts even gives you a code snippet for this, but it should be something like this: font-family: Outfit, sans-serif.
  4. The alt text of images should be human-readable. This is what gets displayed when your image doesn't show up or if someone's using a screen reader. Since the challenge is in English, it should be like this: "QR code" or "Frontend Mentor's QR code".
  5. You can add a custom background but if you add an image, download it and add it to your images folder, the performance might be better that way. The effect you're going for here can be achieved through other means, it looks like a gradient. You can read more on how to do this on MDN.
  6. For the body, instead of a fixed height, it's better to use a min-height: 100vh, it's more responsive that way.

  I hope this helped you a bit. Good luck!

  01

  Marked as helpful