Skip to content
Submitted 5 months ago

Four card feature section using CSS Grid and Flexbox

accessibility, cube-css, sass/scss
P
KonradJam•1,140
@KonradJam
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'm most proud of making my project responsive using CSS Grid.

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

The biggest challenge was that the design in Figma has a lot of different sizes. I think this is unnecessary. So this time my solution is not pixel perfect.

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

It's my solution with a use of CSS Grit was a most efficient? Is there a better solution for this challenge? But all suggestions are welcome :)

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,580
    @dar-ju

    Hi KonradJam!

    You have done a great job, probably the best I've seen here. The semantics are well thought out, the responsiveness and mobile version are excellent.

    Don't worry about PerfectPixel, your work matches it, you just need to reduce the top padding.

    There are a few things that can be fixed:

    • note that the sections in the middle are responsive, but the ones on the sides are not. If you add more text to the side sections, the text will go beyond the boundaries of the blocks. Study the need for the code block-size: 15.625rem; it is better to change it to min-height
    • you have a .tool class, you put it separately from .products, this violates the BEM principle
    • I doubt that the images on this page have any content value, they are just decoration for the blocks, it is better to leave the alt empty

    The rest is great, good luck with the development!

    Marked as helpful
  • Muhammad Siddiq•1,590
    @MS-80

    "Great job on this challenge! 🎉 I really like how clean and responsive your design is. The typography and spacing make everything look well-balanced. One small suggestion would be to tweak the hover effects for better interactivity. Overall, awesome work! Keep it up! 🚀"

  • Salah Al-Din Kaki•140
    @Filostkana

    nice job konrad :

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