Skip to content
Submitted 20 days ago

Four card feature section

P
socratesioa•280
@socratesioa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I knew how to code it using flexbox but I wanted to try CSS Grid which turned out easier and cleaner.

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

I had to brush up on my CSS Grid knowledge mainly grid areas. Great practice.

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

Is the responsiveness fine? I had a bit of a hard time deciding the break points.

Community feedback

  • Adán Maidana•270
    @AdanMaidanaPosted 19 days ago

    I would also recommend using the <img/> tag for SVG, the code is much more readable that way because otherwise you have the full SVG and since it is so long it can be confusing to maintain the code, especially in larger projects.

    Marked as helpful
    1
    P
    socratesioa•280
    @socratesioaPosted 19 days ago

    @AdanMaidana Thank you for taking the time to comment. Very helpful tips! I appreciate them :)

    0
  • Adán Maidana•270
    @AdanMaidanaPosted 19 days ago

    I would recommend you to put the breakpoints with a little more space since the content looks very tight, for example 1024px and also consider using the max-inline-size property for the paragraph below the h1/h2, keep coding and improving!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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