Submitted 7 months ago

Four Card Feature - Mobile first, Flexbox, SCSS

John• 410

@MiyaoCat

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Setting up my SCSS without having to look up any reference material.

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

Setting up the cards took a tiny bit of finessing. It wasn't hard, but not sure if my solution is best. I kept the cards in display: flex; flex-direction: row; and I just transformed the two middle cards up on the Y axis. I also kept the cards container tight so they would stay in the "diamond" shape.

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

I could really use some help with naming conventions. I'm not sure what to name the divs that would make the most sense. I don't want to think about it for too long so I end up going with something that may not be intuitive in the long run or for other devs.

Community feedback

Michael• 80

@vonsacker

Posted 7 months ago

Nice job! You're obviously way more skilled then me, I had issues with the fluidness of the grid, but you nailed it. Aside from some minor layout details i have no comment.

Are you using SASS? Is it helpful? I might try to learn it too.

John• 410

@MiyaoCat

Posted 7 months ago

Thanks @vonsacker !

I am using SASS now. I do like it. I haven't used it to it's full advantage, but I'm slowly adding things like mixins. I like the nesting. I also learned to use REM for basically everything and SASS allows me to create a little function to automatically convert px to REM.

Please log in to post a comment

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