Pagina com QRCODE feito com html e css

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Fala @Michaelrodriguesds!

  Seu projeto está excelente!

  Tenho duas sugestões:

  • Primeira: Pra tornar seu código HTML mais semântico, use <main> pro conteúdo principal ao invés de <section>.

  📌 A tag <section> faria mais sentido se o card fosse parte de um site maior (e com certeza seria no mundo real) mas aqui ele é o principal elemento da tela.

  • Segunda: Também por questões semânticas, e por ser o título principal da tela, você pode substituir o <p> por <h1>. Ao contrário do que a maioria das pessoas pensa, a diferença entre os HTML headings não é só sobre o tamanho e peso do texto.

  📌 As tags <h1> a <h6> são usadas para definir títulos em HTML.

  📌 <h1> define o título mais importante.

  📌 <h6> define o título menos importante.

  📌 Use apenas um <h1> por página - isso deve representar o título principal de toda a página. Além disso, não pule os níveis de título - comece com <h1>, depois use <h2> e assim por diante.

  Essas mudanças tem pouco ou nenhum efeito visual, mas tornam seu código HTML mais semântico, melhorando a otimização de SEO e também a acessibilidade do seu projeto.

  Espero que ajude!

  Fora isso, ótimo trabalho!

  Marked as helpful

  0

  ---

  

  Michael Rodrigues dos Santos•30

  @MichaelrodriguesdsPosted 10 months ago

  Valeu obrigado!!! @danielmrz-dev

  0
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some suggestions

  • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • You can apply max-width: 320px to your section so that the container does not extend as much
  • Don't use br to arrange the text as in the layout. Instead, use padding-inline and adjust the font-size if necessary
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
  }
  

  Marked as helpful

  0

  ---

  

  Michael Rodrigues dos Santos•30

  @MichaelrodriguesdsPosted 10 months ago

  Valeu pela dica .. tmj@Blackpachamame

  1