Design comparison
Solution retrospective
I'm a Newbie here feel free to comment so I can be better Thanks in advance!!
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @vij6 π, good job completing this challenge! π
I have some suggestions you might consider to improve your code:
- In my opinion, the div with the
main_container
class is unnecessary, because you can place all its styles directly in the body element and have the same result. Besides that, it would make more sense to place the background color in the body element.
- Use the
<main>
tag to wrap all the main content in your solution instead of using<div class="container">
to improve the accessibility of the website.
- Since the entire component refers to scanning the QR code, the QR code image is considered important content. It is therefore necessary to add an alt attribute to the image to provide additional context. The alt attribute of the QR image should include descriptive text to explain the purpose of the QR image. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.
- Even though this challenge is a single component and not a full page, it is recommended that you use semantic tags and title tags in your solution. You can create an 'h1' inside 'main' that is not displayed visually, but that is visible to screen-readers and provides more information about the content.
<h1 class="sr-only">QR Card Component</h1>
The
sr-only
class is a class that you can add to hide content visually. The styles of this class can be copied here.- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.
- Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 320px or 20rem instead of using
width: 25vw;
Please don't worry if your suggestions are long, they are just details. In the end, the project is well done π. Hope you find those tips helpful! π
Good job, and happy coding! π
Marked as helpful1@vij6Posted about 2 years ago@MelvinAguilar Thank you so much for your valuable time and suggestions. Surely I will work on this.π
1 - In my opinion, the div with the
- @denieldenPosted about 2 years ago
Hello Vijay, You have done a good work! π
Some little tips to improve your code:
- add
main
tag and wrap the card for improve the Accessibility - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - to make it look as close to the design as possible add
width: 22rem
tocontainer
class img
element must have analt
attribute, it's very important!- add descriptive text in the
alt
attribute of the images - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of qr image - remove
main_container
div because superfluous - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body instead ofheight
because Flexbox aligns child items to the size of the parent container and with only height the content is cut off when the browser height is less than the content - instead of using
px
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help π and Happy coding!
1 - add
- @AtulKumar0001Posted about 2 years ago
Hey @vij6 The first thing I want to say is that you should learn about some media queries so that you can create responsive pages. And if there is only one heading on your page, rather than using h2, use h1 first, and then you can use other heading levels.
0@vij6Posted about 2 years ago@AtulKumar0001 Sure, i will work on media queries, thanks for your valuable suggestion.
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