projetos-stats-preview-card-component-mai

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 6 months ago

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

  Gostaria de fazer algumas observações e também dar algumas dicas, primeiro vou começar pelas observações. Notei que no seu Github você colocou dois links no Readme, na área de "Projeto", mas esses dois links levam para o seu portfólio, mas parece que um deles era pra levar pro live server desse projeto atual. Também você mencionou que o projeto está sob licença do MIT, mas o projeto é do FEM, e o FEM não pede pra que coloque algum tipo de licença. E por mais que isso possa soar algo banal ou de baixa prioridade, acredito eu que isso possa ser problemático para uma pessoa de RH que fosse ver esse projeto.

  Outra coisa que observei, foi que aqui, ao postar seu projeto, você mencionou ter usado essas tecnologias: #cypress #d3 #deno #editor-x #django, mas sinceramente, não parece que elas foram usadas. Esse trecho de Which tools... serve para você mencionar tecnologias diferente de HTML, CSS e JS que você utilizou, como React, Django, Flask, Angular, Vue e por aí vai, caso você não tenha usado alguma outra tecnologia, o correto é deixar vazio, pois HTML, CSS e JS é considerado o padrão já.

  Agora as dicas, quanto ao seu CSS, no seu seletor body, considere colocar esse trecho:

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  

  Dessa forma você não precisará alinhar o card utilizando o margin no seletor .container.

  E agora sobre o HTML, notei que seu HTML não está utilizando muitas tags semânticas. Usar tags semânticas é importante para garantir não só um bom SEO mas também para garantir que seu site fique mais acessível. Mostrarei 3 trechos que poderiam ser alterados para tags mais semânticas:

  • <div class="main-text">, poderia substituir essa <div> por <article>, pois ela representa o card, e o card é autoexplicativo e independente do resto da página.
  • <div class="highlight-text">, poderia ser substituído por <ul> e <li>, pois esse trecho representa uma lista, já que o conteúdo dele é semelhante entre si.
  • <div class="show-image">, poderia ser substituído por uma <figure>, isso porque essa <div> apenas contem uma imagem, e essa imagem é a principal da página.

  E novamente parabéns pela conclusão do seu projeto, ele ficou muito bem feito, continue praticando e se aprimorando. Caso algo que eu tenha dito tenha soado confuso, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  0