Social Links Challenge

Community feedback

• 

  P

  Daniel 🛸•44,750

  @danielmrz-devPosted about 1 year ago

  Fala @marlonszm!

  Seu projeto ficou ótimo!

  Notei que você utilizou margin pra centralizar o card. Usar margens 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; /*  também funciona com grid  */
      justify-content: center;
      align-items: center;
  }
  

  Espero que ajude!

  Fora isso, você fez um excelente trabalho!

  Marked as helpful

  2

  ---

  

  Marlon Melo•20

  @marlonszmPosted about 1 year ago

  Opa, @danielmrz-dev, tudo certo?

  Muito obrigado pelas dicas oferecidas, estou dando meus primeiros passos no mundo do front-end (sou dev back-end) e elas vão me ajudar muito.

  Ainda tenho dificuldades em relação ao posicionamento de divs, então orbigado pelo feedback!

  1
• 

  George Asiedu•780

  @george5-starPosted about 1 year ago

  First of all, I would like to congratulate you on completing the challenge; your solution looks neat and clean. However, there is still some improvement.

  First, about your question ( Why you cannot add the black color on hover )

  This is how your html is structured

  <div class="links>
     <a href="#">Github</a>
  <div>
  

  And this is how you styled your css

  .links:hover{
  color: black;
  }
  

  Reason it does not work. Your .links selector is a container for your a tag so the color black isn't applying on the a tag but rather on the .links which is the div.

  How to make it work. So there are probably many ways of solving this, but one solution is to add an hover pseudo-class to your .links with a child selector as the a tag and add the color:black declaration. So what this means is look at any a tag inside the parent of the .links selector and when the .links is on hover, apply the styles. Like what I have done below:

  .links:hover > a {
  color: black;
  }
  

  Other improvements

  I noticed your favicon did not show, and I think it has to do with the path.

  Change your favicon path from 
  Before
  /images/favicon-32x32.png
  After
  ./images/favicon-32x32.png
  

  Marked as helpful

  1

  ---

  

  Marlon Melo•20

  @marlonszmPosted about 1 year ago

  Hey @george5-star !

  Thank you so much for your feedback, it helps me a lot to start improving in my first steps in web development.

  Your tips helped me to fix the code and now it seems better and close to what the challenge looks like.

  1

  

  George Asiedu•780

  @george5-starPosted about 1 year ago

  Hey @marlonszm!

  I am glad you found it helpful.

  1