Skip to content
Submitted over 1 year ago

QR code component

Ola135•60
@Ola135
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

All feedback is welcome

Community feedback

  • Jenna•230
    @NandiniCooppenPosted over 1 year ago

    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
    1
    Ola135•60
    @Ola135Posted over 1 year ago

    Hello Nandini!

    Thank you for your feedback and all suggestions. These will definitely help.

    Happy coding to you too! ^^

    1
  • Alexander Bobykin•90
    @abobykinPosted over 1 year ago

    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
    1
    Ola135•60
    @Ola135Posted over 1 year ago

    Hello Alexander!

    Thank you kindly for your feedback. I am at the beginning of my adventure with html so every hint is valuable to me.

    Good luck to you too and happy coding! :)

    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