Design comparison
SolutionDesign
Community feedback
- @0xabdulkhaliqPosted 11 months ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
QR iMAGE ALT TEXT πΈ:
- The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute which should explain the purpose of theimage
.
- The
alt
with"imagem de um QRcode"
is not even explaining for what the QR image need to be used. So hereafter don't include βimage ofβ or βphoto ofβ foralt
- So update the
alt
with meaningful text, In this case the QR needs to be scanned. To make this happen we need to add alt ofQR code to frontendmentor.io
.
Example
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @MelvinAguilarPosted 11 months ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
Alt text π·:
- The
alt
attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
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. Resource π.
- The
width: 100%
property in thebody
tag is not necessary. Thebody
tag is a block element and it will take the full width of the page by default.
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1 - The
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