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

QR code component with HTML and CSS

@HLIFT

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hey!

Congrats with your first challenge! Well, first here at least, as I can see you have some exp already =) It's cool!

Here is a few tips.

  • It's better to use rem values at least for font sizes. It's a relative values which depends on browsers font settings, so users could change them.
  • font-optical-sizing: auto; and font-style: normal; are default values so you doesn't have to specify them.
  • Also as the whole page share one font family, you can apply it once. For example on the container element. All content elements inherited it and you doesn't have to repeat it so much.

Hope that helps =)

By the by, I love emoji in commit messages =)

Marked as helpful

2

@HLIFT

Posted

@Alex-Archer-I

Thank you so much for your feedback!

You’re right, using rem values would be more appropriate, especially for accessibility. And I agree, I did overuse the font-family declaration. 😅

I’ll update my project with these changes, as they seem very relevant. Thanks again! 🙂

PS: For the emojis in commit messages, I use the Gitmoji convention, which I find helpful for quickly understanding the type of changes made.

1
Alex 3,130

@Alex-Archer-I

Posted

@HLIFT

Hey, you're welcome! 😄 Your comments about github (both of them 🙂) are very cool and helpful too =)

1

@dev-italoregis

Posted

Your repo' is so organized and your solution is exactly the same as the design. Any tips how I can organize my repos? I saw that you didn't used semantic HTML. Is probably better to get used to use semantics tags. The CSS is very organized but I believe that has some extra code that didn't need to be used, tho.

Marked as helpful

1

@HLIFT

Posted

@dev-italoregis

Thank you so much for your feedback!

To organize your repo, I recommend structuring your files into specific folders rather than placing everything at the root. For example, all images should go into an ‘images’ folder, and if you have multiple style sheets, they could be grouped in a ‘css’ folder. This helps make your repository more readable and makes it easier to understand where everything is located. Additionally, it simplifies finding specific files. If you’re using frameworks, they typically come with an organized structure that you can follow 🙂.

Regarding commits, it’s important that each commit focuses on a single task. For example, you shouldn’t group multiple new features into a single commit. And most importantly, commit messages should be clear, so that the nature of the changes is immediately understandable. For instance, if you’re fixing a typo, your message should be something like ‘Fix typo’ rather than just ‘Fix’. Personally, I also use the Gitmoji convention, which I find helpful for quickly understanding what was done and adds a bit of visual flair to commits. But that’s just a bonus, not a necessity—the first two points are the most important.

As for your feedback, you’re absolutely right. I’ll update my code to implement semantic HTML, as it’s definitely better for accessibility! Thanks again! 🙂

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