Design comparison
Solution retrospective
Hi guys! I finished the 'QR Code Component'. I found it to be rather straight forward. I incorporated the fonts in a seperate stylesheet and as an additional resource for GDPR reasons.
I'd be happy if you could comment on below points:
-
In this case I didn't use any semantic HTML, since there was no good use for them imho.
-
Do you see any possibility to write shorter/more concise/leaner code in my css?
Many thanks in advance! All feedback is greatly welcomed!
Community feedback
- @GrzywNPosted over 2 years ago
Hey @LipAlex1!
Great job on the challenge!
Looking at your code I have some recommendations what you could possibly learn and apply in your future projects:
-
You can try using relative units (EM / REM). They are based on
html
font size (normally 16px) and are really helpful in building responsive and accessible layouts later on. Using percentages is not that bad tho, but using em and rem units for font-sizes, margins and paddings is a good practice. You can watch videos about it here and here. -
Also I would recommend you to avoid using html tag for setting background and font-sizes. It's the best not to use this tag and use body tag instead. But you can use it for setting up CSS custom properties or
:root
selector (which is the same ashtml
).
Hope this helps! Keep up the great work. Have a nice day and happy coding too!
Marked as helpful1 -
- @AlexuvaPosted over 2 years ago
Hi @LipAlex1 !
Overall it's a nice solution! Just a few things about your code:
- Make sure you have at least an h1 text in the web, that helps SEO and it's pretty much mandatory.
- Use classes instead of id for the elements in the HTML for better reuse of code
CSS tends to be a caotic file with all the elements you have to write in it, if you want to have a cleaner and prettier code, try SaSS! It's easy and makes your CSS look much better
Happy coding!
Marked as helpful1@LipAlex1Posted over 2 years ago@Alexuva Many thanks for the feedback! Much obliged! I incorporated the changes and the report is also clear now. Many thanks again!
1
Please log in to post a comment
Log in with GitHubJoin 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