Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Features - Solution

P

@thibault-deverge

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Nothing really proud but let say of successfully implementing CSS Grid for the first time. Additionally, using SCSS streamlined my styling process and improved the maintainability of my code. Next time, I would explore more advanced CSS Grid features and further refine my SCSS structure to enhance scalability and efficiency.

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

The main challenge was organizing the grid with media queries to ensure that the grid items were properly placed while maintaining precise spacing and padding to match the original design. Achieving pixel-perfect alignment required careful attention to detail. I overcame this by dedicating ample time to tweaking the layout and ensuring consistency, often fueled by a steady supply of espresso!

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

I would appreciate feedback on optimizing my SCSS organization and improving my use of CSS Grid. Specifically, tips on best practices for structuring SCSS files and making grid layouts more efficient would be very helpful.

Thank you for taking the time to review my project!

Community feedback

P

@Fable54321

Posted

Really good job, I can see you have quite a few project under your belt.

I wish I took the same approach as you for the box-shadow, but the figma file was saying it was black with low opacity, it clearly wasn't, but by the time I realized, I had already spent too much time on it.

Anyways, goob job, your code looks very professional !

1

P

@thibault-deverge

Posted

@Fable54321 Thank you for the nice feedback ! I feel too like the Figma are less detailed than the first projects and is more a pain now to get all the value. Thank you again, wish you the best for your next one !

1
P

@Fable54321

Posted

@thibault-deverge yes, and I'm a perfectionist so sometimes I get crazy trying to get exactly the right spacing ahah ! Thank you !

1

Please log in to post a comment

Log in with GitHub
Discord logo

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