QR code component using Flexbox

Community feedback

• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="qr-code-box"> instead of <div class="qr-code-box">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  1

  ---

  

  maciejfedor•90

  @maciejfedorPosted over 2 years ago

  @Samadeen Thanks for feedback, much appreciated, it is indeed useful!

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Congratulations maciejfedor for finishing this challenge!

  Regarding the centering, there are several ways to do it, in CSS there is no correct way, just different ways, some more complex, others simpler. For example instead of using flex to center a single element I usually use:

  .qr-code-box{
    min-height: 100vh;
    display: grid;
    place-content: center;
  }
  

  This is just an example, it is not necessary to apply it, but it is less lines in theory. I always recommend to use the min-height in case at some point what goes inside is bigger than the height.

  By the way eliminate the errors that you always get in the frontend mentor report in your case you get it because you have not used the <main> tag because there should always be one in your code that covers the main content of your code. For them change <div class="qr-code-box"> to <main class="qr-code-box">.

  Something similar happens with the title, your page currently has no title and that also shows in the report so change <h2>Improve your front-end skills by building projects</h2> to <h1>Improve your front-end skills by building projects</h1>.

  And lastly regarding the question about the classes, it is true that we use them to be able to reuse them in the future but there is no problem if you only use them once, if you can use BEM methodology to name your classes also because it is widely used in the industry you will see that your code will be more orderly.

  And nothing I hope my comments are helpful.

  Marked as helpful

  0

  ---

  

  maciejfedor•90

  @maciejfedorPosted over 2 years ago

  @Sdann26 Thank You for thorough feedback, that helps a lot, I'll definitely keep those tips in mind !

  0