Response QR Code reader with Flex

I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 600px;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Hi @alittlebroken,

Nice project! To improve it, here are a few suggestions:

I would recommend purging as many divs as possible and replacing them with semantic tags. This project could easily be done with a single <main> tag with a flex column layout. (Would make your design more clean and improve SEO)

While you should have a maximum of one h1, it’s important to use h2, h3, and so on in descending order of importance. Since h1 is typically used for the page header, in this case, the first heading should actually be an h2.

Because of the shareability of this project, you should add meta OG (Open Graph) tags to create beautiful link previews and improve SEO.

Consider making the QR codes clickable, which can help older people by allowing them to use it as a link instead of scanning it.

As an extra challenge, I would suggest learning how to create custom QR codes—it’s a really fun topic!

Keep up the good work!

Best, Teodor