Design comparison
Solution retrospective
Hello guys. This is a QR scanner component made with only HTML and CSS. Feedback are welcome, thanks.
Community feedback
- @HassiaiPosted almost 2 years ago
There is no need to give the body a width value. To center a content on a page, add min-height:100vh; to the body, instead of giving the body height a value.
Give .container img a width of 100% instead of width: 400px;
Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful
Well done for completing this challenge. You did a good job. Happy Coding
Marked as helpful1@Cristhyam-AugustoPosted almost 2 years ago@Hassiai Thanks for the feedback, this its really good. I will make this change, thank.
0 - @Nadine-GreenPosted almost 2 years ago
HEY CRISTHYAM!
WOW, YOUR SOLUTION IS AN EXACT REPLICA OF THE DESIGN, REALLY IMPRESSED
I noticed something though, the color of your
h1
element does not match the required color of the design, check your style guide, the color should be included there, I've done this challenge before the variable should be the --dark-blue one.IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)
HAPPY CODING!
Marked as helpful1 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The
alt tag
description for the “QR image” needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.
- Change
width
tomax-width
in your component’s container to make it responsive.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0@Cristhyam-AugustoPosted almost 2 years ago@vcarames Hello. Thanks for the feedback, this is very important to me.
1 - 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