Responsive component with CSS Grid and mobile-first media queries
Design comparison
Solution retrospective
Hi, everyone! 👋🏻
I've started Wes Bos's free CSS Grid course, and I have applied what I've learned so far in this challenge.
Regarding semantic HTML: It's unclear to me if I should have used the <article>
element for this component, as I'm not entirely sure how much "independent" and "self-contained" it is. What do you think?
Any feedback and comments that you might have will be much appreciated. Thank you!
Community feedback
- @correlucasPosted about 2 years ago
Fala Júlio, parabéns pelo seu novo desafio!
Como sempre uma solução brilhante e bem feita. Honra ao mérito pelo pixel perfect, isso é em difícil de alcançar.
Eu fiz um curso onde o autor explicava a diferença de section e article. Pelo o que eu entendi section se usa pra grades blocos horizontais onde as informações funcionam juntas como um todo e article pode ser usado em blocos menores que não precisam do conjunto pra se entender do que se trata, como esses cards.
Enfim, ótima solução, parabéns bro!
Marked as helpful1@JulioCinquinaPosted about 2 years agoObrigado, Lucas!
Conseguir o pixel perfect está virando uma obsessão! Hahaha
Em desafios pequenos como esse, é até viável comparar as screenshots e ajustar, mas, nos desafios maiores, vou acabar tendo que fazer a assinatura PRO se quiser deixar igualzinho.
Foi isso mesmo o que eu li sobre o
<article>
: é uma tag que identifica um bloco de conteúdo que faz sentido por si só. O que me deixou em dúvida foi o "Join our community": o componente parece meio fora de contexto quando não aparece o nome da comunidade, mas ainda acho que caberia usar o<article>
.Valeu pelo comentário!
1
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