Melvin Aguilar 🧑🏻💻• 61,380
@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML 📄:
- Use the
<main>tag to wrap all the main content of the page instead of the<div>tag. With this semantic element you can improve the accessibility of your page.
Alt text 📷:
-
The
altattribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a betteraltattribute would beQR code to frontendmentor.ioIf you want to learn more about the
altattribute, you can read this article. 📘.
CSS 🎨:
- Remove the width and height of the body element, let it occupy 100% of the screen width. When you set a fixed width to the <body> element, it will only work well when the viewport has the same width, this means that the website will not adapt to the different screen sizes, and will look bad when it is accessed on a smaller device.
- Instead of using pixels in font-size, use relative units like
emorrem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.
- Use
min-height: 100vhinstead ofheight: 90vh. Theheightproperty will not work if the content of the page grows beyond the height of the viewport.
-
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
