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

Four card feature using sass and flexbox

@c-tregunna

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


Reall enjoyed this and used it as a refresh for the @each loop in sass. Would love feedback on the html structure, use of flexbox, and my sass structure.

Thanks, on to the next one

Community feedback

P
Grace 27,710

@grace-snow

Posted

I really like this, well done!

Only things I would change are the 2 h2s at the start - I'd place in one tag if I wanted them both to be h2s as that makes more sense for document structure

And I'd use grid instead of flexbox to lay out the cards. If you did that you'd have less layout/structural markup. Flex is a perfectly good way to do this so no need to change it now. Just saying this is an ideal design to practice css grid ☺

Keep up the great work, I'm bookmarking this one for sure 👍

1

@c-tregunna

Posted

@grace-snow Thank you for your kind feedback. Agreed, grid would have been a better solution, I just need to refresh on grid and then I may look at building this again using grid.

When you mention using just one h2 tag, I guess I could utilise a span tag to style the 2 lines differently. I will look at that.

Again, thanks for your kind feedback and advice.

0
P
Grace 27,710

@grace-snow

Posted

@c-tregunna exactly, spans would work, or one h2 and one paragraph forming a sort of subtitle. Either would be fine.

Good job

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