Design comparison
SolutionDesign
Solution retrospective
solution for qr code component challenge
Community feedback
- @Pedro-CelestePosted almost 2 years ago
Hey @@tjg1093! 😎👍🏻
Congratulations on finishing your first frontend mentor challenge!
Here are some things you could change to make your code even better:
HTML:
- Every page should be contained in at least one semantic element. This is really important stuff when it comes to accessiblity. Instead of using
<div class="container">
as your main parent element you should use<main>
. See more about semantic HTML here.
CSS:
- It's generally a good idea to use
border-box
as the box model of your web page. This can save a lot of time in more complex projects since it simplify the way you calculate padding, borders and margins. You could achieve it like this:
*, *::before, *::after { box-sizing: border-box; }
You can learn more about the box model and border box here.
Hope to see more of your code here soon! Have a nice day :)
Marked as helpful0 - Every page should be contained in at least one semantic element. This is really important stuff when it comes to accessiblity. Instead of using
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