Solução responsiva usando FlexBox.

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 7 months ago

  Olá Kaio, parabéns pela conclusão do seu projeto, ele ficou muito bem feito e semelhante ao design proposto.

  Sobre a parte de centralização de blocos, existem várias opções, com a forma mais comum sendo com essa sequência: display:flex;, justify-content:center e align-items:center;, semelhante ao que você usou no seu seletor body. Outras formas seriam usar padding no elemento pai e assim tentar "empurrar" o elemento para uma área desejada e também o margin: 0 auto;, que faria com que um elemento ficasse alinhado horizontalmente. W3Schools - Horizontal & Vertical Align.

  Gostaria de oferecer algumas outras dicas.

  Vou começar pela parte de HTML, a estruturação do HTML está correta, ela não possui nenhum erro, mas é importante ressaltar a importância da semântica HTML, por exemplo, na sua div.container_qr, você poderia ter utilizado uma tag <main> ou <article>, caso queira ver mais sobre semântica HTML, deixarei aqui um link útil: W3Schools - Semantic HTML.

  Em relação ao SEO e acessibilidade, é recomendável que você tenha pelo menos uma tag <h1> em suas páginas. Se possível, considere trocar a tag de cabeçalho <h2> por <h1> para otimizar o SEO. Deixarei aqui dois links: W3Schools - Headings e W3Schools - Headings Heading Levels.

  Agora sobre CSS, ao definir tamanhos de fonte, é preferível usar a unidade de medida rem, que dessa forma o tamanho da fonte se adapta as configurações de fonte do navegador do usuário, já px é um valor fixo que não se altera.

  E para finalizar, uma dica que é mais uma questão de gosto, geralmente não precisa utilizar o html como seletor no CSS, geralmente apenas estilização com o body já seria o suficiente, por exemplo a sua estilização que foi essa:

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

  Poderia ser removido esse html, e no lugar de heigth colocar 100vh ao invés de 100%.

  E de resto seu projeto está muito bem feito. Se tiver ficado alguma duvida, basta comentar aqui embaixo e tentarei responder da melhor forma possível! E parabéns por ter conseguido concluir seu primeiro projeto de forma independente.

  Marked as helpful

  0