QR Code Component using CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Felipe, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the picture container of image and source because the img is sufficient: you can use picture tag when you need to change the image by resolution -> read here
  • to make it look as close to the design as possible add border-radius: .5rem to qrcode class
  • use min-height: 100vh instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey, some suggestions to improve you code:

  • Add a border-radius to your QR image.

  • There is no need for so many QR images. You only need one.

  • The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.

  • Move the following code to your **Body Element, delete the width and change the height to min-height.

  .container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
  }
  

  • Delete the height from .box its not needed. Your content will create the height.

  Happy Coding!

  0