Product Preview Card with responsive image

Community feedback

• 

  P

  Carlos Samuel•100

  @CrtykwodPosted 3 months ago

  Olá, meu mano David, tudo bem? Olha, eu não sou lá aquele desenvolvedores front-end, mas há alguns pontos que pessoas mais experientes já corrigiram em meus códigos e espero que lhe venha a calhar.

  • "Perfume" não é um <h4>, lembre-se sempre de respeitar a hierarquia de título, você não pode inseri-lo sem antes ter um <h3> presente no documento e nem o <h3> antes de ter um <h2>. Existem exceções, mas por via de regra, siga a ordem.
  • Sua media query está com a width muito grande, fazendo o card flex ficar muito grande e pouco prático em telas de tablets, que são menores que 1200px, por exemplo. Prefira usar uma largura mais próxima do tamanho disposto nas instruções do desafio, eu costumo usar 1px a mais que os 375px, dando exatamente 23.5rem, o que torna o design mais responsivo e acessível.
  • O <footer> está sobrepondo seu .card, não use position: absolute;, ao invés disso, prefira algo como:

  body {
   display: grid;
   grid-template-rows: 1fr 2em;
  }
  

  Assim, seu footer terá um espaço de 2em no final da página, não interferindo nos outros elementos.

  No mais, foi isso que percebi, espero te ajudar de alguma forma e pode ter certeza que o código está muito bem estruturado em sua maioria. Parabéns!!

  0