Skip to content
Submitted 21 days ago

Responsive Four Card Feature Section

stephany247•170
@stephany247
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 proud of the responsive design and interactive hover effects that enhance user engagement.

Next time, I would prioritize accessibility features and consider using a JavaScript framework for better component management.

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

This was my first time using CSS Grid, so I had to read up on it from W3Schools to understand its properties and functionalities. I overcame initial layout challenges by experimenting with different grid settings until I achieved the desired responsiveness.

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

I would appreciate feedback on enhancing accessibility features and optimizing the responsive layout further for different screen sizes. Additionally, guidance on best practices for organizing CSS and using a JavaScript framework like React would be helpful.

Community feedback

  • espringer21•130
    @espringer21Posted 21 days ago

    Good Job!, your solution closely matches the design.

    I personally use flexbox instead of grid. I prefer to use rows and columns and adjusting the gap as needed. I feel it's faster and easier to manage and if you want to write less css.

    0
    stephany247•170
    @stephany247Posted 21 days ago

    This is my first time using grid, I absolutely agree with you, flexbox is easier to manage@espringer21

    0

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