QR-code-component using basic HTLM/CSS

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá Andressa, seu projeto ficou muito bem feito, estando muito semelhante ao design proposto.

  Tenho algumas dicas quanto ao seu projeto, a primeira está relacionada a parte de semântica do seu HTML, notei que você utilizou muitas <div> o que não está errado se formos olhar pelo lado estrutural do HTML, mas isso faz com que ele fique sem semântica, então é recomendável que você utilize tags semânticas como <article> para o .card e <figure> para o .imagem.

  Outra coisa seria a respeito da acessibilidade, você utilizou a <h2>, acredito que você utilizou ela devido a se parecer mais com o design, mas o correto era se ter usado uma <h1>, pois no html existe uma hierarquia dos headings, sempre começamos pelo <h1>.

  Outra dica seria relacionado ao seu CSS, notei que você utilizou no font-size valores em px, o que também não está errado, mas é mais recomendável utilizar rem para fontes, pois o rem se adapta ao tamanho de fonte escolhida pelo usuário nas configurações do navegador. Outra coisa, que é apenas um pequeno detalhe, seria no seu .texto p, que possui uma redundância, que seria o font-weight: 400; por padrão o font-weight já é 400.

  Abaixo alguns links a respeito do que foi mencionado:

  • W3School - Semantic HTML
  • W3School - Heading Levels
  • Austingil - px X rem

  E novamente, parabéns pelo seu projeto, pelo que entendi esse foi o primeiro projeto que você realizou de todos, correto? Se sim, parabéns você iniciou muito bem, continue se aprimorando cada vez mais. Caso algo que eu tenha dito não tenha ficado claro, por favor, comente aqui embaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Andressa Karen•100

  @andressakarenPosted 7 months ago

  Oi, @R3ygoski !! Espero que esteja tudo bem com você. Eu li seu comentário e fiquei muito feliz por estar me ajudando. Entendi de imediato a questão da hierarquia para usar o <h1>.

  Sobre os outros pontos, vou estar lendo a documentação que me mandou para entender melhor sobre semântica. Além de procurar saber mais sobre essas duas tags <article> e <figure>, pois conhecia elas mas não pensei em usar. Muito obrigada pelo comentário, incentiva bastante para que eu continue me aprimorando.

  1
• 

  Matheus Fernandes•340

  @xtirianPosted 7 months ago

  Parabéns, Andressa, seu código beirando a perfeição. Parabéns. continue assim

  0

  ---

  

  Andressa Karen•100

  @andressakarenPosted 7 months ago

  Muito obrigada pelo incentivo, @xtirian. Fiquei bastante feliz com seu comentário.

  0