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

Four card feature section with Flexbox and CSS GRID

@VitorEmanoelNogueira

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm proud of finally using CSS GRID on a project for the first time and of making a good use of the pseudo-class :nth-child.

Community feedback

@TedJenkler

Posted

Hi @VitorEmanoelNogueira,

Nice project and good job with the grid layout! I noticed a couple of areas for improvement:

Section Structure: You’re using two <section> elements. Consider adding a <header> to one of them or removing unnecessary containers. Styling the <body> with Flexbox can help streamline your layout.

Reducing Containers: Always try to minimize the number of containers. Use Flexbox to stack elements on top of each other for cleaner code. For example, the parent of the cards could be a <main> element, and the cards themselves could be within <section> or <article> tags. This approach not only makes your code cleaner but also improves accessibility.

Keep up the great work!

Best, Teodor

Marked as helpful

1
P
Jan 290

@Jan-Dev0

Posted

That looks great! The only thing I would mention is that it's not necessary to use the tag name along with the class name, like div.card. .card alone is sufficient.

Marked as helpful

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