Blog Preview Card Challenge

Community feedback

• 

  Bernardo Poggioni•6,490

  @R3ygoski

  Posted 5 months ago

  Olá Lucas, parabéns pela conclusão do projeto, ele ficou muito bem-feito e bem próximo do design proposto, parabéns.

  Notei que nele está faltando algumas coisas, como o estado de :hover, que você pode encontrar ao baixar o projeto, na pasta design, ele vai ter o nome como desktop-active.png, se não me engano. Mas bom, esse estado está presente no Título e no Card apenas se não me engano. Quando passamos o mouse no título, ele muda de cor, indo para o Amarelo, e quando o mouse entra no card ele faz a sombra aumentar. Você pode fazer isso dessa forma:

  .card-container:hover {
      box-shadow: 14px 14px hsl(0, 0%, 7%);
  }
  
  .card-title:hover {
      cursor: pointer;
      color: hsl(47, 88%, 63%);
  }
  

  Ainda sobre o CSS, não é necessário usar toda essa especificidade como você utilizou, como nesse caso: .card-container .card-date, utilizar apenas um .card-date já seria o suficiente para selecionar o elemento que você queria. Usar toda essa especificidade pode deixar seu CSS menos legível, mais verboso e com uma manutenção um pouco mais difícil.

  Sobre o HTML, ele está bem estruturado, mas está pouco semântico, e manter uma boa semântica é importante para garantir uma boa acessibilidade na página. Alguns elementos que podem ser alterados para ficarem mais semântico são:

  • div.card-container poderia ser alterada para uma <article> pois o conteúdo é autoexplicativo e independente.
  • div.card-credits poderia ser alterada para uma <footer> pois é o fim do conteúdo do card.
  • div.attribution poder ser alterada para uma <footer> também, e pelo motivo que esse simboliza o fim do conteúdo da página.

  E é isso, novamente parabéns pela conclusão do projeto, caso algo que eu tenha dito não tenha ficado claro, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  11

  Marked as helpful