Skip to content
Submitted 21 days ago

Responsive Four Card Feature Section with CSS Grid

Siyam Ahmed•130
@Siyam1888
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am happy that I could use some modern responsive css techniques with grid, RAM(Repeat, Autofit, Minmax) and make use of clamp to make the fonts responsive. However, I am yet to get a strong hold of these features and I have a long way to go on the path of building responsive web designs. Nex time I would like to achieve the same features with flexbox or with more efficient grid techniques. k

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

As I was new to grid, I faced some difficulty in preparing the layout. Howeve, a simple google search made my life easier.

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

It would be really helpful if you suggest me some more efficient ways to build the same layout and more suggestions on design principles. Thanks in advance.

Code

Please log in to post a comment

Log in

Community feedback

  • hitmorecode•7,540
    @hitmorecode

    Nice well done. Just a few tips

    • For the coming challenges make it a habit writing semantic html.
    • Add a min-height on the body
    • For the border on top of the card, don't user border-top, make use of pseudo elements and style it to make it look like the design file.

    I hope you find this helpful. Keep it up 👍

    Marked as helpful
  • Duy Tran•110
    @DuyTM0508

    Oke good

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