Social Links Profile

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted about 1 month ago

  Olá Erika, parabéns pela conclusão do projeto, ele ficou muito bom e quase semelhante ao design proposto.

  Tenho algumas pequenas sugestões quanto ao seu HTML. Ele está bem estruturado, mas está com alguns pequenos erros de semântica, por exemplo.

  • <article> aqui o mais correto seria utilizar uma <figure>, pois é uma imagem autocontida, ou seja, é autoexplicativa sem depender do contexto da página.
  • <nav> aqui o mais correto seria utilizar uma <ul> com <li>, isso porque a <nav> é utilizada para navegação interna dentro da página e/ou site, como por exemplo em um cabeçalho que tem alguns links que ao ser clicado leva para uma secção da página atual ou abre e vai para outra rota mas ainda dentro do mesmo site.

  Agora uma outra pequena coisa que notei foi que em telas de 320px, o card acaba ocupando todo o eixo horizontal da tela, isso não está errado, mas pode causar uma estranheza, para evitar de utilizar uma @media, você pode alterar o valor de largura do card, assim removendo o valor absoluto de 332px e colocando um limite, como por exemplo clamp(300px, 90%, 332px), que assim deixaria um espaçamento entre as bordas da tela e o card.

  Obs.: Esses valores que passei no clamp() são hipotéticos, você pode experimentar outros valores. Pode ver mais sobre o clamp aqui MDN - CSS Clamp.

  E novamente parabéns, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Erika Miyuki Sugawara•50

  @ErikaestudarPosted about 1 month ago

  Olá @R3ygoski muitíssimo obrigada pelo feedback, você conseguiu esclarecer essa minha dúvida sobre semântica no HTML, não entedia muito bem quando usar <nav>, <menu>, <ul> <li> para os links.

  Obrigada pela dica sobre a função clamp(), confesso que é a primeira vez que vejo. Engatinhando ainda nas aulas do Guanabara.

  1