Design comparison
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hi there ๐. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
- 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.
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">QR Card Component</h1>
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
If you want to learn more about the
alt
attribute, you can read this article.- 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.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding! ๐
Marked as helpful0 - Use the
- @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use the colors that were given in the styleguide.md
To center .container on the page, add min-height:100vh; align-items: center; to the body instead of giving it a margin top value.
For a more responsive content use max-width instead of width.
Give the img a max width of 100% instead of a fixed width value.
Hope am helpful. Happy coding.
Marked as helpful0@EMA-WolfPosted almost 2 years ago@Hassiai thank you, but how do I access the styleguide.md cause my zip file didn't come with it?
0
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