@MelvinAguilar
Posted
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 helpful
@vij6
Posted
@MelvinAguilar Thank you so much for your valuable time and suggestions. Surely I will work on this.π