Melvin Aguilar π§π»βπ»β’ 61,220
@MelvinAguilar
Posted
Hello there π. Congratulations on completing your first challenge! You have done a great job and I can see you are on the right track.
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.
- Use the
<footer>
tag to wrap the footer of the page instead of the<div class="attribution">
. The<footer>
element contains information about the author of the page, the copyright, and other legal information.
- Since this component involves scanning the QR code, the image is not a decoration. You must not use the background-image property to add the QR code image. Instead, use the
<img>
tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.
CSS π¨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. 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 π.
- Centering an element with
position: absolute
would make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here π.
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
1
Sujood Qureshiβ’ 190
@Sujood-Qureshi
Posted
@MelvinAguilar Thank you so much for your suggestion. I appreciate your observation of my code. I will work on these mistakes from now on. ππ
0