Design comparison
SolutionDesign
Solution retrospective
Hi! My name is Sowaiba. I have just started my journey on FrontEnd. This is my first practice. I would love to hear any suggestions. Thanks.
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.
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.
- 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
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.
- You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies.
Popular reset style sheets:
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding! ๐
Marked as helpful1@Sowaiba-01Posted almost 2 years ago@MelvinAguilar Thanks a lot. I will definitely take all your suggestions into consideration in the future.
1 - Use 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