HTML + CSS (Flexbox) positioning of elements.

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 7 months ago

  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!

  Marked as helpful

  1
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 7 months ago

  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!

  Marked as helpful

  0