Skip to content
Submitted 3 months ago

Responsive four card feature section using CSS Grid

jdrodriguez2707ā€¢40
@jdrodriguez2707
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 could finished this project quickly and organize all the elements properly to make the layout responsive. Next time, I would decide better between using flexbox or grid to avoid problems.

What challenges did you encounter, and how did you overcome them?

It was difficult to make the layout responsive using CSS Grid, because I wanted to avoid using media queries, but in the end I had to use them and could finished the responsive design.

Community feedback

  • Natali Grimmā€¢830
    @Grimm-NPosted about 2 months ago

    Hi, first off ā€” major props! šŸŽ‰ That code is slick! Clean, organized, and I love how you separated out your CSS. Gonna steal that trick for sure. šŸ˜Ž

    Now, just a lil' tip: when writing HTML, if the line is short, no need to break it into three pieces. Makes it kinda tricky to follow, you know? Keep it tight, keep it smooth! šŸ˜Ž

    Oh, and about those long, fancy class names like "card-container__card-title" ā€” no need to go all out like that. You can just go with two separate classes, like "card-container card-title". Way easier to handle.

    For that sweet responsiveness, try using %, em, rem, vh, vw and the gang. That way your design can vibe with different screen sizes all by itself. šŸ–„ļøšŸ“±

    But seriously, overall ā€” killer job! Iā€™m a fan! šŸ”„ Keep it up! šŸ‘

    Marked as helpful
    1
    jdrodriguez2707ā€¢40
    @jdrodriguez2707Posted about 2 months ago

    Hey @Grimm-N šŸ‘‹šŸ», thank you so much for the feedback. I really appreciate it. I'll take into account all the tips you gave me. Regarding the class names, I used that approach to practice the BEM metodology for naming classes, but I realize it's more suitable for bigger projects. Again, thanks so much for your feeback, and I wish you the best with your projects.

    1

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