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 four card feature section using css grid

@konraddissake1808

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?

Being a non css grid usual, it was fun to experiment with it after a while of not using it. And it turned out okay-ish.

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

The spacing between the grid areas gave me a hard time. I used the grid-gap property and the content kept overflowing the grid container. Using percentages and fine tuning helped achieve sort of the desired result.

What specific areas of your project would you like help with?

Have a better understanding of all of the css grid good practices.

Community feedback

@karthikganesanTR

Posted

Congratulations on completing the challenge. Few suggestions on your solutions

  • Try to use sematic HTML and site will be more accessible via screen readers
  • There is additional space created for p tags in the html. try to use css-resets, you can have better control in spacing elements.

Marked as helpful

0

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