Skip to content
Submitted 7 months ago

Responsive Blog Preview Card

David Dutra•230
@dvdgd
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?

I am proud to achieve the closest design as possible, also I have applied a animation when the user hover the card.

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

Definitely the border style, I don't think I could match it without extracting the figma css code for it.

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

I would like help with the semantic HTML

  1. I have used a h2 in the article topic, which comes before the h1, my main question is if it have impacts in accessibility.
  2. Is correct to have a header with only a image and have the h2 and h1 in a main element.

Community feedback

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

    Olá David, parabéns pelo seu projeto, ele ficou perfeitamente idêntico ao design.

    Sobre sua primeira pergunta, não, não traz impacto na acessibilidade, o que ocorreria nesse caso, seria que um leitor de tela leria primeiro a <h1> e logo depois a <h2>, o errado seria você pular a ordem das tags, por exemplo, começar pela <h3> e do nada pular para <h5>.

    Sobre a sua segunda pergunta, sim é correto, mas no caso do seu exemplo, o mais correto seria uma tag <figure> no lugar de <header>, usamos o figure para imagens principais ou que possuem uma descrição. Já o header é geralmente associado ao cabeçalho da página, mas pode sim ser usado em subseções.

    E novamente, parabéns, não só por ter deixado se projeto semelhante ao proposto mas também por ter arquivos impecáveis, seu CSS está muito bom e seu HTML também, parabéns. Caso algo que eu tenha dito tenha ficado confuso, por favor, comente aqui embaixo.

    Marked as helpful
    1

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