QR Code Component using Vanilla HTML and CSS

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 📄:

• Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

• Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the <h4> tag with <h1>

Alt text 📷:

• The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

  If you want to learn more about the alt attribute, you can read this article. 📘.

CSS 🎨:

• The width: 100vw property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

• Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Hi tizerk👋 Great job on completing this challenge! 🥳

I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

• The .card-container class has a fixed width of 92% and a fixed height of 88%. This could cause issues with responsiveness on different screen sizes. Instead, it could be improved by using a more flexible layout such as using max-width and max-height with a percentage value, or using CSS Grid or Flexbox layout.

    .card-container {
        max-width: 80%;
        max-height: 80%;
        margin: 0 auto;
        border-radius: 10px;
    }

• The .cart-btn class has a fixed padding value of 0.875rem for both the top and bottom. This could cause issues with responsiveness on different screen sizes. Instead, it could be improved by using a more flexible layout such as using padding with a percentage value.

    .cart-btn {
        padding: 1% 0%;
    }

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️