Social links profile challenge

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Fala, Pedro!

  Parabéns por completar o desafio! ✅

  Sua solução está ótima!

  📌 É recomendado usar elementos HTML semânticos como <ul> e <li> para criar listas. Isso garante que seu código seja mais acessível, mais fácil de manter e semanticamente significativo.

  Aqui está um exemplo de como você pode refatorar seu código:

  Após a Refatoração

  <ul class="list-container">
      <li><a href="#">Github</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      ...
  </ul>
  

  Ao usar <ul> e <li>, você transmite a estrutura do seu conteúdo de forma mais clara, facilitando para leitores de tela e mecanismos de busca entenderem. Além disso, isso está alinhado com as melhores práticas para semântica HTML.

  Espero que você ache isso útil!

  Continue com o excelente trabalho!

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 5 months ago

  Olá Pedro, parabéns pela conclusão do projeto e por ter feito ele ficar próximo do design proposto.

  Gostaria de dar algumas dicas quanto ao seu projeto. Evite de usar o seu CSS dentro dos arquivos HTML, pois usar o CSS dessa forma pode dificultar na manutenção do seu código. Claro, em projetos pequenos não dá pra notar uma real diferença, mas isso em projetos grandes pode ser bem problemático. Então minha recomendação é utilizar CSS External.

  Sobre a dificuldade de fazer semelhante devido a falta do Figma, recomendo que utilize uma extensão de navegador chamada PerfectPixel, que dessa forma não será necessário utilizar o Figma, e essa extensão ajuda muito.

  Sobre as tags semânticas, estão corretas, com exceção de uma, que seria a <nav>. Nós utilizamos <nav> para navegação interna, como por exemplo um link para uma rota de Sobre, Contato, Login, e por aí vai. Já nesse caso, o link direciona para uma rota externa do nosso site, então o mais correto para isso é utilizar mesmo a <ul> sem utilizar a <nav>.

  Edit: Havia esquecido de mencionar, quando utilizar o font-size, é mais recomendável utilizar a unidade de medida rem ao invés de px, isso devido a rem ser capaz de se adaptar ao tamanho de fonte escolhida pelo usuário, o que aumenta a acessibilidade da sua página.

  E novamente parabéns pela conclusão do projeto, caso tenha ficado alguma duvida, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  0