html, css básicos

Community feedback

• 

  Bernardo Poggioni•6,770

  @R3ygoski

  Posted about 1 month ago

  Olá Ryan, parabéns pela conclusão do projeto, ele ficou muito bom.

  Sobre o CSS no seu projeto há um detalhe na parte de responsividade, começa a haver uma quebra do layout a partir da largura de 375px, sendo que é importante que o seu site seja responsivo até no mínimo 320px. Para evitar isso você pode utilizar a função clamp() no seu card, dessa forma:

  width: clamp(320px, 90%, 400px);
  

  Isso define a largura mínima para 320px, a largura base para 90% do elemento pai e largura máxima para 400px.

  Também recomendo remover o width: 50vh;. Pois isso significa que a largura do card é de 50% da altura da viewport, ou seja, ele se baseia no tamanho vertical para definir um tamanho horizontal, e isso pode causar alguns problemas, pois se a viewport não tiver muita altura, o card vai ficar desajustado.

  Agora sobre o HTML, tem alguns trechos que poderiam ficar mais semânticos, assim trazendo mais acessibilidade e SEO para a página. Trechos que poderiam ficar mais semânticos e porque:

  • div.conteiner poderia ser alterada para uma <article> pois é autoexplicativa, ou seja, faz sentido por si só. Tanto que já vai uma dica, geralmente quando se tem um card e ele possui um título e uma descrição, ele será uma <article>.
  • div.profile poderia ser alterada para uma <section> pois está servindo para agrupar conteúdo tematicamente semelhante que nesse caso seria sobre você.
  • h2.nome poderia ser alterada para uma <h1> pois sempre devemos ter pelo menos uma <h1> antes de termos um <h2>, <h3> e por aí vai.
  • p.localizacao poderia ser alterada para uma <address> devido a ser relacionado a um endereço.

  E uma pequena observação, quando clica no Portfólio, ele direciona para o seu Github, o que pode soar confuso, talvez o mais interessante seja nomear como "Github" ao invés de "Portifólio".

  E é isso! Novamente parabéns pela conclusão do desafio, ele ficou muito bom, e parabéns por ter feito ele de uma forma única, se baseando em um card para você. E caso tenha ficado qualquer dúvida por favor comente abaixo que tentarei ajudar da melhor forma possível.

  00