@MelvinAguilar
Posted
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.
HTML π·οΈ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS π¨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource π.
- For a responsive and resizable component, consider using
max-width
for the width. Also, setwidth: 100%
for the image to fit the size of the component.
- To center an element vertically, you should use a height to its container and use ``. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.:
.biggest-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.qr-container {
padding: 15px; /* NOTE: Instead of creating a white border, you can use padding to create the space inside the component. */
/* border: medium solid white; */
/* border-width: 20px; */
border-radius: 25px;
/* position: relative; */
/* bottom: -150px; */
/* display: flex; */ /* NOTE: Using flexbox here is not strictly necessary*/
/* flex-direction: column; */
/* width: 400px; */
max-width: 400px; /* NOTE: Use max-width instead of width */
text-align: center;
background-color: white;
.qr-image {
width: 100%; /* NOTE: Update the image selector to make responsive images */
border-radius: 25px;
}
.attribution {
text-align: center;
position: relative;
/* bottom: -370px; */
}
CSS Reset π:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!