Social links profile solução, usando flex

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 6 months ago

  Olá novamente Isabela, mais uma vez, parabéns pela conclusão de mais um projeto.

  Eu gostaria de puxar um gancho do comentário acima (ou abaixo), pois ele aborda alguns temas que eu notei quando analisei o seu projeto.

  Vou começar pela parte do HTML, o seu HTML tem um erro, onde está sua lista <ul> ela tem <a> como filha e o correto é que sempre tenha <li> como filho, então o correto seria <ul> -> <li> -> <a>. E esse a seguir, não é um erro, mas a sua <div class="redes-sociais"> poderia ser direto a <ul>, pois a <ul> tem um comportamento bem semelhante ao de uma <div>.

  Outra coisa que é interessante, é de utilizar :root, no início do seu CSS, que dessa forma você é capaz de criar variáveis. Para fazer isso, basta fazer da seguinte forma no topo do seu CSS, mas abaixo do @import, colocar dessa forma:

  :root {
    --vermelho: hsl(0,100%,100%);
    --vermelho-escuro: #a00;
    --azul: rgb(0,0,255);
    /* Note que você pode utilizar qualquer valor dentro dessas variáveis */
  }
  

  E para usa-la basta fazer isso:

  .minha-classe: {
      background: var(--vermelho);
      color: var(--azul);
      border: 1px solid var(--vermelho-escuro);
  }
  

  E por último sobre as medidas, eu recomendo que realmente se use a unidade de medida rem, mas tem que tomar cuidado, por que utilizar ela em padding e margin, pode causar algumas quebras no seu design. A unidade de medida rem é boa pra acessibilidade, quando se é utilizada nas fontes, isso porque ela se adapta ao tamanho de fonte escolhido pelo usuário, assim, se o usuário usar fonte grande, ela aumenta de tamanho.

  E é isso, acho que respondi todas partes importantes do outro comentário, e novamente, parabéns pelo seu projeto, você está indo bem, continue praticando e se aprimorando. Caso tenha tido qualquer duvida quanto ao que eu disse, já sabe, só perguntar que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0
• 

  JmsLpz•80

  @JmsLpzPosted 6 months ago

  Wow, keep up the good work!

  0
• 

  P

  Aaron Smith•280

  @medic-codePosted 6 months ago

  Good HTML structure

  1. Use a decent reset for margins
  2. Configure box-sizing for border-box
  3. use root to use CSS variables for consistency in your font-sizing, padding, border radiuses etc.. and what your colours are.
  4. Use REM for margins, padding and font-sizes for better responsiveness
  5. Be careful there are some slight differences in full view and mobile view, check the design, a small media query will help.

  0