Submitted 10 months ago

QR Code using flex

Paweł Świercz• 80

@Pawel-Swiercz02

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Mennatallah Hesham• 1,490

@Mennatallah-Hisham

Posted 10 months 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

Raphael Bröderbauer• 720

@DigitaleWeltLibrary

Posted 10 months 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

Please log in to post a comment

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