Design comparison
Solution retrospective
All reviews are welcomed. Thanks so much
Community feedback
- @AkoToSiJeromeEhPosted over 1 year ago
Hi there! Great work out there! I just noticed that the Qr code component is not vertically aligned in the center. To align it in the center, I recommend adding CSS properties to the body, such as display:flex, along with other related properties like justify-content and align-items. Additionally, adding a min-height property can help achieve the desired alignment. By incorporating these properties, the component will be aligned in the center.(the bold text is the one i modify in your source code) I hope this suggestion helps and works for you.
body {
background-color: rgb(205, 206, 255);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
1@abubakr01Posted over 1 year agoThank you very much @AkoToSiJeromeEh
I really appreciate. I will start putting that into practice
0 - @petritnurediniPosted 10 months ago
Congratulations on completing the QR Code challenge! 🎉 Your commitment to learning front-end development is commendable. Here are a few tips to enhance your project:
-
Semantic HTML:
- Use more semantic tags like
<main>
,<section>
, or<article>
for better structure and SEO.
- Use more semantic tags like
-
CSS Best Practices:
- Consider using CSS variables for colors to make your code more maintainable.
- Ensure your CSS selectors are specific and concise.
-
Responsiveness:
- Test your layout on different devices to ensure it's fully responsive.
- Use relative units like
em
orrem
for better scalability.
-
Accessibility:
- Add meaningful
alt
text to your images for better accessibility. - Ensure adequate contrast between text and background colors.
- Add meaningful
-
Learning Resources:
- For semantic HTML: MDN Web Docs
- For CSS best practices: CSS Guidelines
Keep pushing your limits and exploring new challenges. Your progress is impressive, and each project brings you one step closer to mastering front-end development! 👍
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord