Not Found
Not Found
Request path contains unescaped characters
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 Section using Flexbox

@rontoyhacao

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 one really had me thinking of which one to use between flexbox and grid. i'm not really sure if the two methods are valid to use in this design. i wasn't able to make it close to the design as it wraps and not consistent but it's all i got. i would really appreciate any honest feedback and suggestion if there is a better approach for this challenge.

Community feedback

@AgataLiberska

Posted

Hi Ron :) I think grid is best for this challenge. For the desktop version, you can set up 3 columns and 4 rows and then tell where you want each card to start and end or use grid template areas. Hope this helps!

0

@rontoyhacao

Posted

@AgataLiberska thank you for the suggestion but i actually tried grid and it didn't work. maybe i just haven't explored it that much. grid was also the first thing that came to my mind for this design.

0

@AgataLiberska

Posted

@rontoyhacao if you want to learn more about grid, Jessica Chan (coder coder on youtube) has a video series where she builds a responsive website - she uses grid template areas for the footer section, I found that very helpful. Wes Bos also has a free course all about CSS grid, I haven't gone through the whole thing yet but the part I have been through is really well explained. I personally used grid template areas for this challenge because you can easily assign what space you want to be left empty, but it's probably not the only approach :) good luck :)

0

@rontoyhacao

Posted

@AgataLiberska i'll check it out, i appreciate the feedback thank youu.

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