Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML/CSS QR Component Solution - Personal Touch

@JeysonFR

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I add folders to the repository on Github? Like image folder.

I 'm considering my CSS code is not really clean, I trayed so many thinks and forgot delete some lines, please if there is any advice to get better on CSS is welcome.

Try to give my personal touch to the task adding a different background. Please, let me know if this was a correct desition or not .

Community feedback

P
Fluffy Kas• 7,735

@FluffyKas

Posted

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

@JeysonFR

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord