Design comparison
Solution retrospective
Tried my Best, as I'm starting to do project on my frontend skills.Any suggestions on how I can improve?
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi @Durga-Jaiswal, how are you? Welcome to the front-end mentor community. I really liked the result of your project, but I have some tips that I think you will like.
1- Document should have one main landmark, you could have put all the content inside the
main
tag click here2- Page should contain a level-one heading, you could have changed
h3
toh1
[click here to read about it](https://dequeuniversity.com/rules/axe/4.3/page-has- heading-one?application=axeAPI)The rest is really good!
Hope it helps... π
Marked as helpful1 - @correlucasPosted about 2 years ago
πΎHello @Durga-Jaiswal,, congratulations for your new solution!
Here's some tips to improve your solution:
1.Think about using relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.2.Replace the
div
with<main>
(every page should have a main landmark and also a main h1 heading) so replace the h3 to with<h1>
and follow the sequence if you add another heading as h1, h2, h3...3.Reduce your html structure by deleting unnecessary divs and keep everything inside a single div. See your code reduced below:
<div class="container"> <img src="./images/image-qr-code.png" alt="QR code to scan"> <h3>Improve your front-end skills by building projects</h3> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div>
βοΈ I hope this helps you and happy coding!
Marked as helpful0
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