Skip to content
Submitted about 1 month ago

solução desktop-mobile usando CSS Grid

Emileny•10
@EmilenyRochaLeal
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

Solution retrospective

What are you most proud of, and what would you do differently next time?

Me orgulho de completar a tarefa, tornando a minha solução o mais parecido possível. Para os próximos desafios, diferente desse, pensaria mais na estrutura html.

What challenges did you encounter, and how did you overcome them?

Desafios : saber o que fazer primeiro, qual a melhor estrutura HTML e qual a melhor abordagem CSS. Superei : Fazendo pesquisas e estudando sobre CSS

What specific areas of your project would you like help with?

CSS

Community feedback

  • Bernardo Poggioni•5,390
    @R3ygoskiPosted about 1 month ago

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

    A imagem não está sendo carregada, pois você utilizou o path errado, o certo seria utilizar dessa forma

    "./assets/images/illustration-article.svg"

    Com esse ponto no início do caminho. O mesmo vale para a imagem de avatar que aparece na parte inferior do card.

    Sobre seu CSS, ele está muito bem-feito, mas tenho algumas sugestões que podem te ajudar um pouco mais. Você tem alguns seletores que estão aninhados, como por exemplo:

    .card .card-image{
    /*Propriedades*/
}

    Você não precisa fazer dessa forma, você pode pular o .card, e isso vale para outros seletores, como .card .card-detalhes, .card .author e .card .author .image-author.

    Ainda sobre o CSS, notei que você não fez alguns efeitos de Hover que tem, como o do título mudar de cor, e da sombra do card aumentar de tamanho, para fazer isso você pode utilizar o pseudo-classe :hover, exemplo:

    .card .card-detalhes h2:hover{
    color: var(--clr-yellow);
}

    Obs.: Esse trecho está abaixo do .card .card-detalhes h2.

    Edit: Havia esquecido de dizer que você pode encontrar sobre a pseudo-classe :hover aqui W3School - Pseudo-class Hover.

    Agora algumas dicas quanto ao seu HTML, a estrutura não está ruim, mas está um pouco redundante, por exemplo, essa div.container não era necessária, você poderia ter começado diretamente já pelo div.card. Também tem alguns problemas relacionados a semântica do seu HTML, e manter o HTML semântico é importante para questões de SEO e acessibilidade, vou mostrar algumas tags que podem ser alteradas para ficarem mais semânticas, veja:

    • div.card poderia ser alterado para uma tag <main>, pois dessa forma você estaria dizendo que é ali onde está o conteúdo principal da página, e também geralmente após uma tag <body> deve vir uma <main>.
    • div.card-image poderia ser alterado para uma tag <figure>, pois é ali onde está contido a figura principal da página.
    • div.card-detalhes poderia ser alterado tanto para <section> quanto para <article>, porque o conteúdo presente nessa parte é autoexplicativo e é correlacionado entre si.
    • div.author poderia ser alterado para <footer>, pois representa rodapé do card, mas também o fim do conteúdo presente no card.

    Você pode ver mais sobre tags semânticas aqui W3School - HTML Semantic.

    Também notei que você utilizou as tags de heading de forma não hierarquica, que no caso foi: h5, h2, h3, o mais correto é seguir uma hierarquia, começando sempre pelo h1 e ir descendo de heading em heading. Você pode ver mais sobre isso aqui W3School - Heading Tag.

    E é isso, parabéns novamente, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    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