Frontend Mentor | Four Card Feature Section coding challenge solution

Solution retrospective

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

Got to grips with using the auto-fit value in the grid, which reorganises the cards as the viewport size increases.

Was able to figure out the layout of the cards on the large viewport sizes and implement it using grid-template-areas.

Community feedback

Darrick Fauvel• 490

@DarrickFauvel

Posted 2 months ago

Hi @erratic-enigma, 👋

Your solution looks great! Responsive with three layouts. Very nice!

I don't think I have anything substantive to really add. I did this project in 2022 with Vite and Vanilla CSS. If I were to redo this project, I would use Tailwind CSS as I do now with all my projects. I also use the React framework, Next.js, quite a bit now and use its built-in Tailwind support. It can make your html elements look a bit weird when utilizing the additional Tailwind classes, but it makes it easier to make components with their own stylings attached to the class attribute.

I have also used SASS in other projects, but I think Tailwind is winning me over for its ease-of-use and customization.

If you haven't tried Tailwind CSS, you may want to give it a try at some point in your journey. https://tailwindcss.com

I hope this personal perspective is a little helpful. Keep up the great work! 👍

Four Card Feature Section

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community