Design comparison
Solution retrospective
All feedback is welcomed thank you in advance.
Community feedback
- @ChamuMutezvaPosted 11 months ago
Hi ANLPERR
Congratulation for taking your first challenge and well done, here are a few things that you can take a look at:
- landmark elements provides a powerful way to structure and orgarnise the structure of a web page. Such elements includes
header, main, footer
, this challenge should have the main element - it provides the primary content of a web site. - the image alt value in this particular case should be present , in my opinion it carries a message that is helpful if the image fails to load or to assistive technology. Probably something like
QR code for Frontend mentor
- keep specificity as low as possible by using classes instead of id - do not use id for styling. -it is important to have a reset stylesheet to normalise your css, one common is andy bell reset stylesheet
2 - landmark elements provides a powerful way to structure and orgarnise the structure of a web page. Such elements includes
- @danielmrz-devPosted 11 months ago
Hello @Anlperr!
Your project looks great!
I just have one suggestion:
- For semantic purposes, use
main#qr-container
instead ofdiv#qr-container
.
This tag change have no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
1 - For semantic purposes, use
- @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 📸:
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute.
- The
alt
attribute should explain the purpose of theimage
.
- E.g.
alt="QR code to frontendmentor.io"
<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!
1
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