Design comparison
SolutionDesign
Community feedback
- @0xabdulkhaliqPosted over 1 year 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
withimage-qr-code
is not even explaining for what the QR image need to be used.
- So update the
alt
with meaningful text which explains likeQR 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 helpful0@AdrianeSantosDevPosted over 1 year agoHello @0xAbdulKhalid I will improve the image alt text. Thank you for providing feedback; I appreciate it!
0 - @rohitd99Posted over 1 year ago
Hi Adriane
Congrats on completing the challenge.
I have a few suggestions for you.
- Look into semantic elements like
main
,section
,article
and others , try to use them instead ofdiv
. In this case you can replace thediv class="block"
withmain
since the card is the only content or you can have the div inside main. - Add a little bit of padding to your body like
padding: 1rem;
or so on mobile sizes the content doesn't span the entire screen and there is a bit of space left on the sides. - Inside the text div the title should be a
h1
heading instead ofspan
. Also each page must have a singleh1
heading signifying the title of the page for accessibility and SEO reasons. Headings must always be fromh1
throughh6
in order. - On body you have
height: 100vh;
instead keepmin-height: 100vh
so that content expands as per need. - On the block you have
height
andwidth
properties , but these properties will not scale down if the screens are smaller so I'd suggest usingmax-width
only and let the height adjust as per content. This will ensure that on smaller screens the width adjusts itself. Theimg
must also havewidth : 100%
, this ensures it covers the entire card. Addpadding : 1rem
to the block to have some space.
Hope it helps
Marked as helpful0@AdrianeSantosDevPosted over 1 year agoHello @rohitd99 Thank you for the tips! I was a bit confused when it came to setting the font size and widths, but your feedback has been really helpful. I appreciate it!
0 - Look into semantic elements like
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