Design comparison
Solution retrospective
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
- I have used a
h2
in the article topic, which comes before theh1
, my main question is if it have impacts in accessibility. - Is correct to have a header with only a image and have the
h2
andh1
in amain
element.
Community feedback
- @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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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