Skip to content
Submitted 2 months ago

Four card feature section with Flexbox and CSS GRID

Vitor Emanoel da Silva Nogueira•170
@VitorEmanoelNogueira
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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

  • Teodor Jenkler•3,740
    @TedJenklerPosted 2 months ago

    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
  • Jan•290
    @Jan-Dev0Posted 2 months ago

    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
    Vitor Emanoel da Silva Nogueira•170
    @VitorEmanoelNogueiraPosted 2 months ago

    @Jan-Dev0 Thank you for the tip!

    0

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