QR Code Component React TypeScript

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Artiom Kalugin!

  Your challenge is quite good, personally I think you could improve it a bit more by giving less margin to the left and right for the title and paragraph for example:

  .h1 {
    font-size: 22px;
    color: rgb(31, 49, 79);
    margin: 24px 10px;
  }
  

  .p{
    font-size: 15px;
    color: rgb(125, 136, 158);
    margin: 0px 10px 24px 24px;
  }
  

  And give the title less width.

  .card {
    padding: 16px;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 280px;
  }
  

  And I would reduce the border-radius to 12px of the QR image.

  Finally you have two accessibility errors and both are generated by not placing the main tag inside your body.

  To do this just change <div id="app"> to <main id="app"> or place a main tag inside it. The main reason is that semantically you should always have one that encompasses all the main content of the page.

  I hope my comments are helpful :D!

  Good Coding!

  Marked as helpful

  1

  ---

  

  Artiom Kalugin•60

  @YiaomaPosted over 2 years ago

  @Sdann26 Thank you for your feedback! Its weird that dimensions on figma differs from HTML ones. Now I see that my card looks a bit chucky at the bottom :D

  Good point on main element, I did not know that.

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @Yiaoma Hehehehehe, the Figma is referential, although you should always look for it to be as the final design, personally I feel you have done well :D. If you want to download the browser extension, AxeDevTools. It works by scanning your whole page and finding possible accessibility errors, so when you publish the developed challenge there is less chance of accessibility errors. By the way don't forget to update the report after correcting the errors so you don't get any errors.

  Marked as helpful

  1