First challenge of web page using gradient

Community feedback

• 

  Bernardo Poggioni•6,130

  @R3ygoskiPosted about 1 month ago

  Olá Ana, parabéns pela conclusão do desafio, ele ficou bem feito.

  Tenho algumas sugestões. Começando sobre o projeto, você disse não ter feito o projeto responsivo devido à precisar praticar algumas habilidades, caso queira praticar com projetos que não precisam fazer a parte responsiva, tem esses: Blog Preview Card, Social Links Profile e QR Code Component.

  Já sobre o HTML, ele está bem estruturado, só tem um pequeno problema semântico nele, que seria a parte do sumário, ao invés de utilizar uma <div> com várias <div> dentro, você poderia considerar utilizar uma <ul> e substituir as <div> internas por <li>. E na parte de div.attribution também poderia ser alterado para uma <footer> pois nela contêm uma metainformação.

  Agora sobre o CSS, a parte de atribuição está quebrando o card, para corrigir isso você pode colocar ela fora do <main>, note que se você fizer isso, você terá que adicionar as seguintes propriedades ao .attribution:

  .attribution {
      /* Outras Props */
      position: absolute;
      bottom: 0;
  }
  

  Ainda sobre o CSS, quando for utilizar a font-size, as vezes é mais interessante utilizar a unidade de medida rem, que dessa forma você deixa o texto mais dinâmico, já que rem se adapta baseado no tamanho de fonte utilizado no navegador do usuário, assim trazendo um pouco mais de acessibilidade. Já o px é um valor absoluto, então ele não é afetado pelo tamanho de fonte definido pelo usuário no navegador.

  Outra coisa ainda sobre o CSS é a especificidade dos seletores que você utilizou, por exemplo: .summary .summary-spaces .spaces isso não era necessário, você poderia colocar apenas .spaces que isso já seria o suficiente, e deixaria mais legível. A forma que você fez só seria útil em um caso em que está sendo utilizada uma classe .spaces fora de .summary-spaces e .summary.

  E uma pequena coisa que notei, é que no seu seletor .horizontal você utiliza flex-direction: row; isso acaba sendo redundante, pois o valor inicial de display: flex; já é com flex-direction: row;

  Agora duas pequenas sugestões sobre as suas classes do CSS, talvez possa ser mais interessante utilizar nomes mais descritivos, por exemplo, ao invés de summary-spaces poderia ser summary-list, e talvez possa também ser interessante manter em apenas um idioma. Mas claro, isso que você fez não está errado.

  E é isso! Novamente parabéns pela conclusão desse desafio, ele ficou muito bem feito e você utilizou bem a ideia de reaproveitamento de classes no CSS. 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

  ---

  

  Ana Tereza Suzana•20

  @ana-suzanaPosted 19 days ago

  @R3ygoski Muito obrigada pelo feedback, Bernardo! Lendo seu comentário percebi que algumas coisas poderiam ter sido feitas diferentes mesmo. Vou tentar corrigi-las e atualizar no GitHub.

  Gostei bastante de sua sugestão para utilizar lista através da tag <li> ao invés de utilizar várias tags <div> dentro de outra <div>. Não tinha pensado nessa possibilidade.

  Ainda, sobre a parte responsiva, agradeço as sugestões. No entanto, depois que terminei o desafio, procurei aprender como tornar as páginas web responsivas e como fazer layouts diferentes para tamanhos variados de tela e estou conseguindo praticar isso.

  Novamente, muito obrigada!

  1