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

Responsive Four Card Feature Section

@Devs-advocate

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?

I'm happy that I've got a fair idea of what I'm doing and how to methodically style elements. I also like that I'm using more semantic HTML, instead of divs all over the place.

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

In making the site responsive, I've learnt about clamp(), display and grid. I used a combination of flexbox and grid for alignment. Box-shadow was new to me and took time to work out, as I never knew what the effect was even called.

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

I still create spacing between an element and the element below it by using margin-bottom. It works, but I'm not sure if I should use a different method to accomplish the spacing. I'm also trying to use em and rem units more, instead of px; and I'm still not sure if I'm using them properly.

Community feedback

Fatih 170

@fthkrt

Posted

Good understanding HTML && CSS. Also you should study little bit more for box-shadow it'll be helpful for other projects.

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