Submitted 4 months ago

Four card feature section using CSS Grid

Srijan Manandhar• 450

@srijanss

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I had a chance to learn about CSS Grid in detail,
I learned about grid-template-areas in this project.
I also learnt how to use grid-column and grid-row for the same layout.
But use of grid-template-areas was clean and easy to understand.

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

I had some difficulties to show the top border on each section.

It was not matching with the design. I used border-top, it was rounding as per the border-radius CSS Then I used ::before pseudo element to add the top colored bar, now the pseudo element was covering the border-radius Then I found out that I have to set "overflow: hidden" to clip the child elements to fit within parent's border radius

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

Feedbacks are welcome.

Community feedback

Jim Barnett• 260

@jamesbarnett

Posted 2 months ago

Hello Srijan! Your solution is very well done. I just finished this challenge myself, and I immediately liked your usage of CSS custom properties for styling each card/section. I liked your usage of PostCSS, too. My favorite part is your use of grid-template-area. It resized and displayed correctly when resized. Your accuracy for reproducing the design is really great.

As far as accessibility is concerned, the only issue is see is using pixels for font sizes. I think you had a couple of other places where pixel was used when a better unit could be chosen.

I liked your use of BEM for naming your classes, and the names are good and logical, too. You also made good use of HTML5 semantic tags. I was recently pointed to an article on HTML5 tags that I think you might also find interesting: https://www.smashingmagazine.com/2020/01/html5-article-section/

Happy coding!

Marked as helpful

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