Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive component with CSS Grid and mobile-first media queries

@JulioCinquina

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Lucas 👾 104,560

@correlucas

Posted

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 helpful

1

@JulioCinquina

Posted

Obrigado, 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 GitHub
Discord logo

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