Skip to content
Submitted 5 months ago

Four Card Feature Section

sass/scss, node
P
Gabe•320
@gabei
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 most proud of the outline animation that I added for desktop users, as well as the ability to tab to the different cards. It's not entirely necessary, but it was a fun challenge to try and make it work the way I imagined.

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

I am not experience with grid at all. I am more of a flexbox user, so I had to break out of the mold a bit to figure out how to arrange things properly. I can see the power in the grid, and I know that I've only scratched the surface.

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

I would like some critique on my usage of grid. I am pretty new to css grid and I haven't delved into best practices yet.

Code

Please log in to post a comment

Log in

Community feedback

  • Adesh Katiya•420
    @adeysh

    Hi @gabe, I saw your code and I think your html markup with bem classes is pretty good. The animation is amazing! I also like how you have made the page responsive using simple code. I think that the code for the grid layout could be simplified by using grid-template-areas since you're adjusting the card length to different sizes according to the screen sizes but it will be really easy to use grid-template-areas in your code. Take a look at it and you can try to refactor and clean the code. Other-wise It looks really good and sharp. Good job 🎉

    Marked as helpful

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