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

Completed using BEM method, Flex and SASS

@abhisheksinghwork7

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi this looks OK, but I think you can tweak and get it closer to the design. Just keep going a bit more, and pay attention to all the small details. You can do it!

With the html, semantically it's great. I would onky change one thing and that is to empty out those alt attributes so they are all alt="" instead. These are not important / meaningful content so it's best to do that and then screenreaders and search bots will know to ignore those images.

0

T
Grace 29,310

@grace-snow

Posted

Ideally, once you've fixed all the small design inconsistencies I would recommend you try to refractor this to use css grid instead of flexbox. This challenge is so perfect for css grid and is a great practice ground. It would only need a small change to html - making all 4 cards direct children of the grid instead of placing the middle 2 in their own column

0

@abhisheksinghwork7

Posted

@grace-snow Thanks for the feedback. I had recently studied flex and wanted to test my knowledge of it. But now coming to think of it, CSS grid would have been the perfect solution for such a design.

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