Melvin Aguilar 🧑🏻💻• 61,440
@MelvinAguilar
Posted
Hi @abilioassis 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉
I like this solution for the challenge. I have some suggestions you might consider to improve your code:
- Instead of using pixels in font size, use relative units of measure like
remorem. 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.
- To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. 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.
- As far as I am concerned, you have used the article tag well. However, it is also possible to remove your current main element and place all its styles directly in the body element. This would be better in terms of a component, since the background be applied directly to the body element.
<body>
<main class="component">
<img />
<h1> . . . </h1>
<p> . . . </p>
</main>
<body>
And:
body {
background: var(--bg-color);
min-height: 100vh; /* Use min-height instead of `height`. This property lets you set a height and let the element grow even more if necessary.*/
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
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
1
Abilio de Assis• 40
@abilioassis
Posted
Hi @MelvinAguilar, thanks so much for the suggestions. I'm impressed with the quality of your comments and I'm glad to be part of this community of learners.
For the use of rem it is easier to define 1rem = 10px, which I did in the code below:
html {
/* 1rem = 10px */
font-size: 10px;
}
0
