Skip to content
Submitted 2 months ago

Blog preview card

Kelvin Magalhaes•20
@Sonecacps
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 2 months ago

    Olá Kelvin, parabéns pela conclusão do seu projeto.

    Uma dica, sempre quando for fazer um projeto faça um reset antes, que dessa forma você remove algumas estilizações por padrão. Tanto que seu projeto está com overflow, isso é, ele está passando do tamanho da tela, por isso tem um scroll horizontal e vertical. Para corrigir isso você pode utilizar esse trecho no seu CSS:

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

    Outra dica, dentro da pasta de Design, quando você baixa o desafio, tem uma imagem que geralmente vem com o nome "state", por exemplo, "card-state", essas imagens mostram o que deve acontecer por exemplo quando você passar o mouse sobre um elemento. E digo isso porque faltou fazer essa parte do :hover no h1 e no p.nome, ambos ficam amarelo ao passar o mouse em cima, e também a sombra do card aumenta quando o mouse entra dentro dele.

    Sobre o HTML, a estrutura está correta, mas ele está pouco semântico, e a semântica é importante para trazer mais acessibilidade a sua página, vou mostrar algumas tags que podem ser alteradas para ficar mais semântico:

    • <div> essa tag está logo após a <body>, geralmente após a <body> nós utilizamos a <main>, pois é ali que estará contido o conteúdo principal da página.
    • <div class="container"> pode ser alterado para um <article> pois o conteúdo presente dentro do container é autoexplicativo e independente do resto da página.
    • <div class="img-quadro"> pode ser alterado para um <figure> pois é a imagem principal do componente.
    • <div class="imagem"> pode ser alterado para um <footer> pois faz o papel de rodapé do card, e também porque é ali que finaliza todo o conteúdo anterior do card.

    Notei também que nas imagens, você utilizou um alt="" pouco descritivo. Na primeira imagem, você poderia utilizar um alt que se assemelha ao título da página, como por exemplo: alt="HTML & CSS foundations". e na alt="cara" você poderia escrever algo como: alt="Avatar of Greg Hooper". É sempre importante manter um texto mais descritivo nos alt, isso porque se a imagem não for carregada, ou se o usuário tiver alguma deficiência visual, ele ainda conseguira saber o que aquela área representa.

    E é isso, parabéns pela conclusão do projeto, ele ficou muito bem-feito, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.

    0
  • David Antonio Ty•20
    @Davidty143Posted 2 months ago

    Don't have feedback as of the moment, might edit soon :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord