QR Code Card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi Thiago Souza, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor

  Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:

  Ao invés de usar <h3> pro bloco contendo o título principal, ao invés use <h1>, porque cada página precisa de um h1 pro título principal e siga a sequência se você adicionar outro título como h1, h2 , h3…

  Use <main> ao invés de usar uma <div> para conter todo conteúdo do componente. Desse jeito você melhora a semântica e indica qual é o bloco mais importante de conteúdo da página. Lembre-se que div é só um bloco de conteúdo sem significado e que cada página precisa do <main> para mostrar qual o bloco mais importante.

  Use unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Para fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

  👋 Espero que essas dicas te ajudem e que você continue no foco!

  Marked as helpful

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @thirraz, good job for completing this challenge! 👋

  Here are some suggestions to improve your code:

  • Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

  Solution:

  <h1>Improve your front-end skills by building projects</h1>
  

  • The main container is not center. You can use flexbox to center things

  body {
    background: hsl(212, 45%, 89%);
  
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  Remove margin: 10% auto; in the .container selector

  More information: A Complete Guide to Flexbox (CSS-Tricks) | https://www.w3schools.com/howto/howto_css_center-vertical.asp

  I hope those tips will help you.

  A very good solution for this challenge, good job !

  Marked as helpful

  0

  ---

  

  Thiago Morais•420

  @thirrazPosted about 2 years ago

  @MelvinAguilar thanks! i'll update my code with these suggestions😎👍

  1