Skip to content
Submitted about 1 year ago

QR Code using flex

Paweł Świercz•80
@Pawel-Swiercz02
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

Community feedback

  • Mennatallah Hesham•1,490
    @Mennatallah-HishamPosted about 1 year ago

    Hi Paweł,

    Congratulations on completing your first challenge👏

    You did great 👍

    Here are some suggestions to improve your code:

    Semantic HTML

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • wrap your card in <article>
    <main>
<article>
</article>
</main>
<footer>
</footer>

    Headings

    • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
     <h1>Improving your front-end skills by building projects</h1>

    here are some helpful articles:

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
  • Raphael Bröderbauer•790
    @DigitaleWeltLibraryPosted about 1 year ago

    Hey, good solution.

    Small improvement:

    • Remove from the class #qr-container margin and display: flex;
    • Use max-width instead of width
    • use grid or flex on the main tag
    • use class instead of ID

    improved CSS:

    main{
     /* Center the card in the middle and make space to the border */
     display: grid;
    min-height: 100dvh;
    place-items: center;
    margin-inline: 1rem;
}

#qr-container {
    /* makes the card responsive */
    max-width: 300px;

     /* you don't need this: */
     margin: 25vh auto; 
     display: flex; 
     flex-direction: column;
}

    Happy coding 😉

    Marked as helpful
    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