Solução de componente de código QR usando Flexbox.

Community feedback

• 

  Arber Lisaj•340

  @arberlisajPosted over 1 year ago

  1. You need to replace <div class="content__qrcode"> with the <main> tag. Semantic HTML is better for website validation and search engine optimization
  2. Each main Header should start with an h1 so the following <h3>Melhore suas habilidades de front-end criando projetos</h3> should be replaced with <h1>Melhore suas habilidades de front-end criando projetos</h1>

  Marked as helpful

  1

  ---

  

  DrielySantos•80

  @DrielySantosPosted over 1 year ago

  Muito obrigada pela dica :) @arberLisaj

  1
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  In order to fix the accessibility issues:

  • You need to replace <div class="content__qrcode"> with the <main class="content__qrcode"> tag and <div class="attribution"> with the <footer class="content__qrcode"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a <h1> element in the <main> tag instead of using <h3>. You can replace your <h3>Melhore suas habilidades de front-end criando projetos</h3> element with the <h1>Melhore suas habilidades de front-end criando projetos</h1> element.

  CSS

  • If you want to center it easily, you can update body in CSS in this way and remove .container because you don't need it anymore:

  body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • you don't need to use margin in .content__qrcodeanymore because flexbox is used in the body

  .content__qrcode {
      background-color: hsl(0, 0%, 100%);
      max-width: 250px;  // max-width makes it responsive
      padding: 20px;
      border-radius: 10px;
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  DrielySantos•80

  @DrielySantosPosted over 1 year ago

  Muito útil, muito obrigada pela dica :) @ecemgo

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @DrielySantos I'm happy to help! :)

  1