Hello Ola135,
Congrats on completing the QR- code challenge 👏
Here are some improvements that I would like to suggest :
Improve accessibility
1. Alternative text
Adding a meaningful description to the 'alt'.
For example alt="QR code for Frontend Mentor website"
2. Semantic structure
Using the semantic HTML5 in your structure.To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable.
For example :
<main>
<article class="card-section">
<div class="container">
<div class="card">
<img src="images/image-qr-code.png" alt="">
<div class="text">
<h2>Improve your front-end skills by building projects</h2>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</div>
</article>
</main>
It is also important to always have an h1 heading in a document before a h2 tag.
Read more about accessibility here
Read more about semantics here
Using CSS variables
For example, using the style guide provided, you may create your CSS colors variables as follow :
root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
}
Read more about CSS custom properties here
Centering using Flexbox
You have already applied CSS flexbox to the body to center the card. To center both horizontally and vertically, just add justify-content: center;
You may then remove the margin: 0 auto; from .container.
body {
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
I hope these will be helpful to you 😉
Good luck going forward and happy coding 🙂
Marked as helpful
@Ola135
Posted
Hello Nandini!
Thank you for your feedback and all suggestions. These will definitely help.
Happy coding to you too! ^^
