What specific areas of your project would you like help with?
i'll be glad to receive feedback.
@SvitlanaSuslenkova
Posted
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
Marked as helpful
@kewuyemi1
Posted
@SvitlanaSuslenkova thanks so much, I appreciate
@MohammedOnGit
Posted
Hello kewuyemi1!!!
Your code is well-structured, but there are a few improvements you can make regarding accessibility, SEO, performance, and best practices. Below are my detailed recommendations:
General HTML Best Practices Semantic HTML:
It's best to use more semantic HTML elements to improve the document's structure and make it more accessible to screen readers. For example: Replace <section> with <main> or <article> since the content is the main part of the page. Add a <footer> if there is more content (even if not visible, it improves document flow). Updated example:
<main>
<div class="center">
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor">
<div class="content">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.</p>
</div>
</div>
</main>
Accessibility (WCAG Compliance) Alt Text for Images:
The alt attribute is empty. Always provide descriptive alt text to make the content accessible to screen readers:
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor">
Headings Hierarchy:
If there are no other headings on the page, using <h1> is fine. However, ensure there is a clear hierarchy if more sections are added later. Color Contrast:
Ensure there is sufficient color contrast between text and background colors. For example, you are using hsl(216, 15%, 48%) for the paragraph text. Double-check this in your stylesheet to meet contrast guidelines. Tools like WebAIM Contrast Checker can help. SEO (Search Engine Optimization) Title and Meta Description:
Your <title> tag is good, but consider adding a more descriptive and keyword-rich title:
<title>QR Code Component | Frontend Mentor Challenge</title>
Add a meta description to improve SEO:
<meta name="description" content="Scan the QR code to visit Frontend Mentor and improve your front-end development skills with hands-on challenges." />
Performance Font Loading Optimization:
Currently, the font is being loaded using the @import statement, which can delay rendering. It's better to use <link> in the <head> for faster loading:
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet" />
Image Optimization:
Optimize your image by using modern formats like WebP for better performance. You can use a fallback for browsers that don’t support it:
<picture>
<source srcset="images/image-qr-code.webp" type="image/webp">
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor">
</picture>
Lazy Loading for Images:
Implement lazy loading for your image to improve performance, especially on mobile devices:
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor" loading="lazy">
Mobile Responsiveness Flexbox Optimization: Your layout is using Flexbox, which is good for responsiveness. Make sure that it scales correctly on smaller screens (e.g., test on mobile viewports).
Consider setting a max-width for the .center container to ensure it doesn’t stretch too much on large screens:
.center {
width: 100%;
max-width: 350px;
}
Additional Recommendations Use External Stylesheets:
Although you are using inline styles here for simplicity, it’s better to move these styles to an external stylesheet (styles.css) for maintainability. HTML Validation:
Conclusion With these adjustments, your code will follow best practices for accessibility, SEO, and performance while maintaining clean and maintainable structure. You did great!!! keep it up
Marked as helpful
@kewuyemi1
Posted
@Aggressive-Mohammed Thanks 🙏 so much, I really appreciate, I'll implement your corrections.
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
