QR Code component

Community feedback

• 

  Mirza Monirul Alam•680

  @WebDevMirzaPosted almost 2 years ago

  Hi,

  I found an area where you can improve your code.

  HTML:

  • Wrap everything inside <main></main> to solve accessibility WARNING that you have now. main is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School
  • Give a <h1></h1> with small font size to solve Page should contain a level-one heading warning.
  • Provide an alt text for image to solve Images must have alternate text error.

  CSS

  .qr-img {
        height: 250px;
        width: 100%;
        border: 1px #000 solid;
        border-radius: 0.625rem;
      }
  

  • No need to use border: 1px #000 solid; since the provided design has no border.
  • You can use shadow in .card for good appearance:

  .card {
         box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  }
  

  Apart from this, the rest of the part is great.👍👍

  1