HTML/CSS QR Component Solution - Personal Touch

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted 12 months 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!

  Marked as helpful

  0

  ---

  

  Jeyson Fernández•40

  @JeysonFRPosted 12 months ago

  @FluffyKas thanks a lot for the observations! I already applied some of the corrections and took some notes for the rest of them.

  My error with the Github folders was that I created the entire project on my Pc, then uploaded the files to the repository (Sorry my first time creating one), so all files were uploaded but not the folders. :) thanks again for the feedback.

  0