Frontend Mentor | QR code component using html and css
Design comparison
Solution retrospective
I am proud that as a beginner, I was able to complete this project without seeking any help
What challenges did you encounter, and how did you overcome them?I had difficulty providing the perfect size, but I resolved it by offering various sizes and then fixing it with one.
What specific areas of your project would you like help with?While I was working on my project, I used media queries and everything looked perfect. However, when I compared my project with the sample, the screenshot was different. I am unsure why this happened and I don't know how to prevent this type of error in the future.
Community feedback
- @rayaattaPosted 10 months ago
helloMonika-2509👋, congratulations on completing your first FED challenge 🎉
I have some suggestions you might find useful.
1 Try to make your html more Semantic by wrapping the main page content inside a
<main>
tag . Replace<div class="container">
With<main class="container">
. This changes nothing visually but Using it makes all the difference. Using semantic markup improvesSEO
And user experience (accessibility) for people using assistive technology such as screen readers.
2 I noticed that you used
h2
.since it is the only heading in the document you should replace it with<h1>
.Here's a quick guide on how to use them:
The
<h1>
to<h6>
tags are used to define HTML headings.<h1>
defines the most important heading.<h6>
defines the least important heading. Only use one<h1>
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with<h1>
, then use<h2>
, and so on. You can then style them in you css.Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document
3 In order to make the solution look closer to the design replace
#DCF2F1
withhsl(212, 45%, 89%)
as the body`s background4 The qr code's alt attribute should not just have info that it is a qr code rather it should state where the qr leads i.e
alt="qr code leading to frontendmentor.io
I hope this helps 🙃 Your solution looks awesome 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