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 feature section

@HeewonSeo1

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?

Pretty happy with my understanding of grid now. I was a bit lazy and completely disregarded how text wrapping was for the header section of the problem. I'll definitely convert the px values to relative units for future solutions.

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

The little color border-top thing was a bit difficult to think of. I tried using pseudo elements for this, but I don't know if this approach is the most efficient. CSS was also a bit messy.

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

I think my use of media queries for responsive design still needs work. I need to practice media queries for a larger range of sizes for projects outside FEM.

Any critiques would be greatly appreciated as well!

Community feedback

@ebubz-dev

Posted

I think you forgot to add the dark grayish blue color to the Powered By Technology header and also the headers for Supervisor, Team Builder, Karma and Calculator section.

I hope you find this comment helpful.

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