Skip to content
Submitted about 2 years ago

QR code component

Ola135•60
@Ola135
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

All feedback is welcome

Code

Please log in to post a comment

Log in

Community feedback

  • Jenna•230
    @NandiniCooppen

    Hello Ola135,

    Congrats on completing the QR- code challenge 👏

    Here are some improvements that I would like to suggest :

    Improve accessibility

    1. Alternative text

    Adding a meaningful description to the 'alt'.

    For example alt="QR code for Frontend Mentor website"

    2. Semantic structure

    Using the semantic HTML5 in your structure.To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable.

    For example :

    <main>
<article class="card-section">
<div class="container">
<div class="card">
<img src="images/image-qr-code.png" alt="">
<div class="text">
<h2>Improve your front-end skills by building projects</h2>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</div>
</article> 
</main>

    It is also important to always have an h1 heading in a document before a h2 tag.

    Read more about accessibility here

    Read more about semantics here

    Read more about headings here

    Using CSS variables

    For example, using the style guide provided, you may create your CSS colors variables as follow :

    root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
}

    Read more about CSS custom properties here

    Centering using Flexbox

    You have already applied CSS flexbox to the body to center the card. To center both horizontally and vertically, just add justify-content: center;

    You may then remove the margin: 0 auto; from .container.

    body {
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    I hope these will be helpful to you 😉

    Good luck going forward and happy coding 🙂

    Marked as helpful
  • Alexander Bobykin•90
    @abobykin

    Hello Ola! You did it well. Good.

    Couple things coming to head to improve for you, cause I'm pretty sure that HTML validator is unhappy )))

    • Could you please add <main> Your main code }} </main>

    This wrapper is needed inside <body> here </body>

    ===

    • It's also needed (According to https://www.w3.org/WAI/tutorials/page-structure/headings/) one <h1></h1> tag with a main heading on a page

    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