@kanishkasubash
Posted
Hi, GABI👋. Congratulations on successfully completing the challenge! 🎉
Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better that might interest you:
HTML:
- The
<main>element should wrap around the entire component. Using the<header>,<main>,<footer>elements provide structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages. - Starting with
<h1>and working your way down the heading levels<h2>, <h3>etc. helps ensure that your document has a clear and consistent hierarchy. Source
<body>
<main class="container">
<div class="card">
<img class="card-image" src="images/image-qr-code.png" alt="QR Code for frontendmentor.io">
<h1 class="card-heading">Improve your front-end skills by building projects</h1>
<p class="card-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the
next level</p>
</div>
</main>
<footer><div class="attribution">...</div></footer>
</body>
CSS:
- If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link
- You can use the
max-width,marginandpaddingto control the width and position of your elements. - Percentages are often used to define widths, heights, and margins. They are relative to the parent element's size. For example,
width: 50%would make an element half the width of its parent. For example:
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card {
max-width: 20rem;
background-color: hsl(0, 0%, 100%);
border-radius: 0.938rem;
text-align: center;
}
.card-image {
width: 90%;
border-radius: 0.625rem;
margin: 5%;
}
.card-heading {
margin: 2% 5%;
padding: 0 5%;
}
.card-description {
margin: 5% 5% 12%;
padding: 0 5%;
}
I hope you find this helpful! 😄 Keep up the great work! 👍
🖥️Happy coding!
Marked as helpful
0
GABI• 30
@gabsvitorio
Posted
@kanishkasubash It was helpful! Thank you very much! 😊👍🏼
0
@kanishkasubash
Posted
@gabsvitorio
Estou muito feliz em saber que meus esforços foram impactantes. São pessoas como você que me inspiram a continuar dando o meu melhor. Obrigado😊
Continue com o ótimo trabalho! 👍
🖥️Boa codificação!
1
