Skip to content
Submitted 26 days ago

Four card feature section using CSS Grid and Flexbox

#accessibility#cube-css#sass/scss
P
KonradJam•430
@KonradJam
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'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 :)

Community feedback

  • Andrey•2,510
    @dar-juPosted 25 days ago

    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
    0
    P
    KonradJam•430
    @KonradJamPosted 24 days ago

    @dar-ju thanks for reviewing my code!

    I go with your suggestions and change:

    • block-size to min-block-size.
    • remove alt description for icons.

    In this project, I use CUBE CSS methodology. I know that it is hard to recognize it, in so small project.

    1
  • Muhammad Siddiq•1,610
    @MS-80Posted 19 days ago

    "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! 🚀"

    1
  • Salah Al-Din Kaki•140
    @FilostkanaPosted 25 days ago

    nice job konrad :

    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