QR code component challenge from frontendmentor.io
Design comparison
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello π. Congratulation on successfully completing your first challenge π ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
Metadata ποΈ:
-
The
viewport
meta tag is missing. theviewport
meta tag is used to control the layout of the page on mobile devices. Add theviewport
meta tag to the<head>
tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can check your solution on a mobile device to see how your solution is distorted by not using this tag. β οΈ
- The
<link rel="stylesheet" href="./assets/css/style.css">
tag should be inside the<head>
tag.
HTML π:
- Wrap the page's whole main content in the
<main>
tag.
Alt text π·:
-
The
alt
attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a betteralt
attribute would beQR code to frontendmentor.io
If you want to learn more about the
alt
attribute, you can read this article. π.
I hope you find it useful! π
Happy coding!
Marked as helpful0 -
- @HassiaiPosted over 1 year ago
Replace <div class="card"> with the main tag and <h2> with <h1> to fix the accessibilty issues. click here for more on web-accessibility and semantic html
There is no need to give .card a height value.
Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.
To center .card on the page using flexbox instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.
To center .card on the page using flexbox: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
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
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