First Attempt at CSS and HTMl with the QR code component

Hello @ZephaW!

Your project looks great!

I noticed that you used padding to place the card in the middle of the page. Here's a very efficient way to center the card:

• Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Hello 👋zeph_w, Congratulations on completing this challenge 🎉.

I have some suggestions you might find useful.

1 In order to make your html more semantic replace <div class="container"> With <main class="container">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

SEO

And

accessibility

You can find out more about the main tag in this article 📰.

2 Since the qr code image is not decorative fill it's alt attribute with text describing where it leads to i.e ```alt="qr code leading to frontend mentor.io"

3 I noticed you used many media queries but this could have been much simpler if you used

    .container {
        max-width: min(90%,21rem);
}

This is a summary of all the media queries. I hope this helps

Your solution is nice

Happy coding ✌️

Hi, When working with media queries, prioritize a mobile-first approach, test incrementally at key breakpoints, use relative units, optimize images, consider both orientations, and leverage Flexbox and Grid for responsive layouts. Consistency and testing on real devices are crucial for a seamless user experience.

Enjoy Coding Journey :)