Skip to content
Submitted over 1 year ago

QR code page using HTML Grid and CSS

Clea Carty•20
@CNash23
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

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.

Community feedback

  • Atif Iqbal•3,200
    @atif-devPosted over 1 year ago

    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
    1
    Clea Carty•20
    @CNash23Posted over 1 year ago

    @atif-dev Thank you I have updated the code.

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    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
    1
    Clea Carty•20
    @CNash23Posted over 1 year ago

    @0xAbdulKhalid Thank you I have updated the code.

    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