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
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Four card feature section using CSS Grid

Abhinav 240

@IamAbhiDev

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


This is the second solution I am submitting for this challenge! Instead of specifying margin and padding for every element, I used CSS Grid to improve the layout and make it more responsive. It was a little challenging for me while making the responsive layout of the site as I am not used to making such layouts using CSS Grid but I tried my best. I would love to hear your feedback on this and help me improve my code as much as possible. Thank you for your time!

Note - I had to darken the light text due to accessibility issues (contrast error)

Community feedback

Vanza Setia 27,835

@vanzasetia

Posted

Hi, Abhinav! 👋

Here are a few suggestions for improvements:

  • Remove the visually hidden heading: You do not need to add more content to the page. If it needs to be added, a visible heading should be preferred.
  • Invalid BEM: If you are following the BEM methodology for your class naming convention, section__card__content is BEE (Block Element Element). I recommend creating a new block (card) and then having an element for the new block (card__content).

Great job on fixing the contrast issues! That is a good initiative.

Nice work on the CSS. You are using clamp() for fluid typography and rem unit for font sizes. The grid layout works well too.

I hope this helps. Happy coding! 😄

Marked as helpful

1

Abhinav 240

@IamAbhiDev

Posted

@vanzasetia Thanks a lot for your feedback! I'll make sure to apply this as soon as possible and improve my code. Thank you for your time! 😃

0
Vanza Setia 27,835

@vanzasetia

Posted

@IamAbhiDev You are welcome! 👍

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