HTML + CSS (Flexbox) positioning of elements.

Olá Robert,

Parabéns pelo seu projeto, ficou muito bom!

Sobre a sugestão de alterar a div do learning para um button, embora não seja incorreto, pelo que me lembro do design, aquela área não era destinada a ser clicável, então manter a div ainda seria a abordagem correta.

Quanto ao @Import, ao contrário do que mencionou, está funcionando corretamente no seu projeto. Após analisar, constatei que todos elementos estão usando a fonte Figtree, como deveriam.

Gostaria de dar algumas dicas adicionais relacionadas à acessibilidade e semântica do HTML. Percebi que seu projeto utiliza as tags <h5> e <h3>, possivelmente devido à semelhança com o tamanho no design. No entanto, o uso correto dessas tags é hierárquico, começando com <h1> e sem pular nenhuma tag intermediária.

Aqui no site do W3School explica como se deve usar essas tags.

Quanto à semântica HTML, notei o uso excessivo de divs. Embora não seja incorreto, o ideal seria utilizar tags semânticas como <main>, <article>, <header>, entre outras. Elas desempenham o mesmo papel que as divs, mas com a vantagem de serem semanticamente mais corretas.

Aqui no site do W3School também fala sobre essa parte de semântica.

Outro ponto é o uso de IDs. Exceto pelo ID "learning", que parece terem sido utilizados para estilização, eles poderiam ser substituídos por classes. É uma prática comum usar classes para estilização, reservando IDs principalmente para referências em JavaScript.

Percebi que faltaram os estados de alguns elementos, como no <h3>, que no design apresenta um efeito de hover. Seria interessante incluir esses estados para uma melhor fidelidade ao design.

Quanto à tag `` de learning utilizando JavaScript, mas não era necessário, pois ela já está correta sem esse trecho. Removendo o script, o funcionamento seria o mesmo.

Novamente, parabéns pelo seu projeto. Ele está muito bem feito e se assemelha bastante ao design proposto. Continue praticando e aprimorando suas habilidades! Caso tenha ficado alguma duvida, estou disposto a respondê-las!

Fala @robertdouglasaimon!

Seu projeto ficou ótimo!

Usar margin e/ou padding não é a melhor opção pra centralizar elementos.

📌 Existe uma forma melhor e mais eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):

• Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):

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

Espero que ajude!

Fora isso, você fez um excelente trabalho!