Melvin Aguilar 🧑🏻💻• 61,220
@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some feedback for you if you want to improve your code.
HTML 📄:
- Use the
<main>
tag to wrap all the main content of the page instead of the<div class="box">
tag. With this semantic element you can improve the accessibility of your page.
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS 🎨:
- To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.
body {
background-color: hsl(212, 45%, 89%);
min-height: 100vh;
display: grid;
place-content: center;
}
.box {
/* margin-top: 100px; */
. . .
}
-
You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.
Popular CSS resets:
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
0
André• 40
@zeppelisama
Posted
@MelvinAguilar Thank you, Melvin!
1