Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
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.
- 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
- To center the content horizontally, use
justify-content: center;
to thebody
. Also, you can update themargin: 0 auto;
in the .container selector.
- Use
margin: 0.938rem
ormargin: 15px
in the.container
selector to add some space for the container card and the screen edge on mobile devices.
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<div class="container"> with the main tag and <h2> with <h1> to fix the accessibility issue. [**click here for more on web-accessibility**](https://uxdesign.cc/semantic-html-the-foundation-of-web-accessibility-e5bbecad7c17) and [semantic html](https://web.dev/learn/html/semantic-html/)
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0
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