@R3ygoski
Posted
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
