Skip to content
Submitted about 2 months ago

QR-card-component

Yusuf Jamal•240
@Jamal-Digital
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

i'll be glad to receive feedback.

Community feedback

  • Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted about 2 months ago

    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
    1
    Yusuf Jamal•240
    @Jamal-DigitalPosted about 2 months ago

    @SvitlanaSuslenkova thanks so much, I appreciate

    0
  • Ibrahim Mohammed•640
    @MohammedOnGitPosted about 2 months ago

    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
    0
    Yusuf Jamal•240
    @Jamal-DigitalPosted about 2 months ago

    @Aggressive-Mohammed Thanks 🙏 so much, I really appreciate, I'll implement your corrections.

    0

Please log in to post a comment

Log in with GitHub

Join 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