Social Links

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.

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!