QR Code Component using Vanilla HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,040

  @MelvinAguilarPosted over 2 years ago

  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!

  Marked as helpful

  1
• 

  Alamin•1,980

  @CodeWithAlaminPosted over 2 years ago

  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! 😊❤️

  0