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 Cards Using HTML And CSS

@Shahzaib-ur-Rehman

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?

Through this experience, I've gained the understanding of effectively utilizing both flexbox and grid layouts in combination. Now, I'm filled with confidence in my ability to construct various layouts.

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

Initially, I found myself puzzled about constructing the layout. However, I'm grateful to my seniors who provided guidance, enabling me to overcome this challenge.

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

please provides fonts for headings and some tips in spacing

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi

I had a quick glance at the html code and it's a real shame you've gone for flexbox on such a perfect fit css grid challenge. I recommend you refactor this to try and use grid only for the page layout. It's the perfect practice project for grid and you're missing that opportunity.

Also, note there is no header in this design. The header landmark has a very specific purpose and must nit contain any headings or page-specific content. It is designed only to hold primary repeating content that sits on every page of a site (like logo and navigation).

Marked as helpful

1

@Shahzaib-ur-Rehman

Posted

Thank you so much for investing your valuable time and offering your insightful suggestions. I've incorporated them into the code by transitioning from flex to grid layout. Much appreciation to @grace-snow for the guidance!

0

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