Submitted 6 months ago

Four Card Feature Section (CSS GRID, SCSS)

Gwenaël Magnenat•1,290

@gmagnenat

Preview site View code

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 refreshed what I knew about CSS grid and was able to achieve the expected result using CSS grid only for the cards layout on desktop.

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

Using CSS Grid. The layout seemed easy to do by adding a wrapping div on the center column and using flexbox but I wanted to find a solution with CSS Grid without touching the html only for a display purpose.

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

SCSS mixins and functions. I'm sure there's a trick to simplify the code and use some mixins to generate some part of the code. Some part of the code seem to have to much repetition.

Community feedback

Grace•31,270
@grace-snowPosted 6 months ago
I wouldnt say there's a lot of code repetition in this, looks fine.

But there is a problem in the html. This design should all be inside the main landmark. You shouldn't put the page heading in a header landmark. Headers have a banner role. They are meant to hold repeating content across every page of a site, they're not meant to contain page-specific content. This design doesn't include a header.
Marked as helpful
3
Gwenaël Magnenat•1,290
@gmagnenatPosted 6 months ago
Thank you @grace-snow for reviewing my solution. I’ll update that html and check on my other submission if I have the same issue.
0
Gwenaël Magnenat•1,290
@gmagnenatPosted 6 months ago
@grace-snow I pushed some update to my solution where I reworked the html based on your review.

I placed everything in a main landmark

Removed the unnecessary header landmark

Added a section landmark assuming this would be a section on a landing page for example

Refactored classes with more meaningful names

If you have a minute to check the changes it would be great ! :)

Thank you again for the feedback.
0
Grace•31,270
@grace-snowPosted 6 months ago
@gmagnenat looks good. The only thing if question is that you've counted those icons as meaningful whereas I would Consider them decorative. But that's down to personal choice I think.
2
Gwenaël Magnenat•1,290
@gmagnenatPosted 6 months ago
@grace-snow true. I guess these could be added as pseudo elements to the card.
0
Grace•31,270
@grace-snowPosted 6 months ago
@gmagnenat no it's fine using images they just don't need alt values
1

Please log in to post a comment

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