Skip to content
Submitted over 2 years ago

QR code page using HTML Grid and CSS

Clea Carty•20
@CNash23
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I have implemented the suggested improvements and I think this project is an improvement from my last attempt. However, I did have some issues with getting the paragraph text to display exactly as the design specified. It would only seem to work if the text was smaller then what the design required. Thank you in advance for any additional helpful guidance going forward.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Atif Iqbal•3,320
    @atif-dev

    Hi Clea, congrats🎉 on completing the challenge. Better take care about following points.

    • Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

    (why main matters? Read here)

    • For proper centering the container(whole card) vertically and horizontally you can use code as:
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    Or you can learn centering from here. (In your code after applying above block of code, remove margin-top: 6.25rem; from .attribution for proper centering)

    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    Hope you will find this Feedback Helpful.

    Marked as helpful
  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HTML 🏷️:

    • This solution generates accessibility error reports due to non-semantic markup, which lack landmark for a webpage
    • So fix it by replacing the element <div class="main"> the with semantic element <main> in your index.html file to improve accessibility and organization of your page.
    • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>
    • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful

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