Qr-code

Português

Ei! 👋 Aqui estão algumas sugestões para ajudar a melhorar seu código:

Parabéns por completar seu primeiro desafio! 🙌

Tenho 6 sugestões para você:

1. O componente é muito pequeno na tela maior. Acho que você deve basear seu design em vh (altura da visão) para que o componente seja dimensionado corretamente para outro tipo de tela.
2. Use a tag <h1> para título em vez de <p>.
3. Você não precisa fazer uma réplica perfeita da imagem do design. Acho que você deveria usar <p>Scan the QR code to visit … </p> em vez de

<span>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</span>

1. h1 { font-weight: bold; font-size: 2em; } para destacar o texto do título.
2. Para combinar a cor do texto na imagem de design.

h1 { color: hsl(218, 44%, 22%); }
p { color: hsl(218, 44%, 22%); }

1. Acho que você deveria colocar um atributo alt mais descritivo como "QR code to redirect you to Frontend Mentor" porque as pessoas com deficiência têm muita dificuldade para navegar pela web. Cada pedaço ajuda.
2. Substitua <div id="centralizar"> pela tag <main> para corrigir o problema de acessibilidade.
3. footer { text-align: center; } ficará melhor.

Se você tiver alguma dúvida ou precisar de mais esclarecimentos, sinta-se à vontade para entrar em contato comigo.

Codificação feliz! <3 😊

Portanto, a página da Web será dimensionada proporcionalmente ao tamanho da tela, em vez de depender de um formulário de largura fixa #centralizar

English

Hey there! 👋 Here are some suggestions to help improve your code:

Congrats on completing your first challenge! 🙌

I have 6 suggestions for you:

1. The component is too small on larger screen. I think you should base your design on vh (view height) so the component scale correctly for other screen type.
2. Use <h1> tag for title instead of <p>.
3. You don't need to make a perfect replica of the design image. I think you should use <p>Scan the QR code to visit … </p> instead of

<span>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</span>

1. h1 { font-weight: bold; font-size: 2em; } to make your title text stand out.
2. To match the text color in design image.

h1 { color: hsl(218, 44%, 22%); } 
p { color: hsl(218, 44%, 22%); } 

1. I think you should put a more descriptive alt attribute like "QR code to redirect you to Frontend Mentor" because disabled people have a really hard time to navigate around the web. Every bit helps.
2. Replace <div id="centralizar"> with the <main> tag to fix the accessibility issue.
3. footer { text-align: center; } will look better.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! <3 😊

So the webpage will scale propotionately to screen size instead of relying on fixed width form #centralizar