Skip to content
Submitted over 1 year ago

My Solution for the QR Component Challenge

R Hayes•240
@ryanthayes
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 was able to practice using CSS Custom Properties and the GitHub workflow. Thanks to initial feedback I was able to improve my HTML semantically and come up with a proper solution to vertically align content.

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hello Developer well congratulations on successfully completing the QR code component A Some suggestions for improve your code !

    • IN HTML 📃 :
    • LANDMARK 🚀
    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
/html code goes here : 📃
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>
    • IN CSS 🎨 :
    • your qr code card component is not center align it shows bottom of the web page so fix the problem
    • Good Example :
    body {
display:grid;
place-items:center;
margin:0;
height:100vh;
}
    • use the code in case for center aligning 🎯
    • I Hope you find the solution and it's useful comment for you your QR Code component project is Awesome Finnally Happy Coding Developer 😊
    Marked as helpful
    0
  • R Hayes•240
    @ryanthayesPosted over 1 year ago

    Thank you @0xAbdul I updated my HTML so that my generic div container is now semantically correct as <main>. I was also able to center the main content properly using flex box by adding your CSS suggestions below to .container:

    margin:0; height:100vh;

    0
    C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    @ryanthayes 😊 thanks

    0
  • Alam•30
    @abdullahalam123Posted over 1 year ago

    You just need to set body { display: flex; min-height : 100vh; } This would allow your content to be aligned at the center. Hope this helps (:

    0
  • AliTheCoder123•70
    @AliTheCoder123Posted over 1 year ago

    add a <main> element in your solution

    change the div container to main element container

    0
  • AliTheCoder123•70
    @AliTheCoder123Posted over 1 year ago

    it is already center what do you want to center

    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