Social Links

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá novamente Kauê, parabéns, seu projeto ficou extremamente semelhante ao design proposto.

  Uma dica, utilize uma extensão de navegador chamada PerfectPixel, porque ela ajuda bastante a deixar o projeto semelhante ao design.

  Uma coisa que notei no seu CSS foi esse trehco: .attribution > p, esse operador > serve para selecionar o filho direto do elemento, assim evitando de selecionar os netos. Mas no seu <footer class="attribution"> tem apenas uma tag <p>, então esse operador acaba sendo redundante.

  Outra dica, agora a respeito de HTML, notei que faltou algumas partes de semântica, na sua <div class="social-links"> você poderia trocar essa <div> por <nav>, isso porque essa <div> está armazenando um conteúdo relacionado a navegação. Também <div class="profile"> que poderia ser tanto uma <section>, quanto <article>, isso devido a ser uma informação que está relacionada entre si.

  Agora uma coisa que notei que faltou. Quando passa o mouse sobre os botões (as tags <li>), ele não muda o cursor, para fazer com que o cursor altere e fique aparecendo aquele cursor de click, você pode adicionar esse propriedade nas suas <li>: cursor: pointer;

  E sobre o attribution, ele está muito pequeno, eu mal havia conseguido ver ele de primeira quando abri o site, isso pode até mesmo ser um problema de acessibilidade pra quem tivesse algum problema de visão. Para corrigir isso você pode colocar direto 1rem no font-size, ou utilizar um clamp() para deixar mais dinâmico, eu utilizei um clamp(0.8325rem, 2vw, 1rem) e deixou mais visível.

  Novamente, parabéns, seu projeto ficou muito bom mesmo, continue praticando e se aprimorando. Caso algo que eu tenha dito, não tenha ficado claro, por favor, comente abaixo, que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Kauê Alves Vecchia•80

  @kauevecchiaPosted 7 months ago

  @R3ygoski Olá Bernardo, muito obrigado pelas dicas, eu tinha percebido que faltou um cursor: pointer no <li>, porém eu tinha tentado colocar no li:hover e não deu certo, agora que coloquei só no li como você disse, deu certo. Em relação ao font size do .attribution, eu vi que precisava mudar porém tinha esquecido, mas já corrigi. E obrigado pelas outras dicas, vou tentar melhorar isso nos próximos projetos.

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE LINKS:

  • The links like Github, Frontend Mentor are needed to be actual <a> elements. But currently a elements are empty without any actual values in it.

  ---

  • This is the current markup,

  <ul>
      <li>
         <a href="#"></a>
          GitHub
       </li>
      <li>
         <a href="#"></a>
          Frontend Mentor
       </li>
       .....
  </ul>
  

  ---

  • In order to make this solution accessible, we need to utilize <a> elements. Here's the example

  <ul>
       <li>
           <a href="#">GitHub</a>
       </li>
       <li>
            <a href="#">Frontend Mentor</a>
       </li>
       .....
  </ul>
  

  • In the above example, we wrapped the links with actual a elements. We moved the text like Github from li to a because after refactoring the code with a we need to style them instead of li elements.

  ---

  • As i said you need to style a elements instead of styling li, so that we could achieve an accessible solution.

  ---

  • If you have any questions or need further clarification feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0