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

Great layout challenges solved with Flex, Grid, CSS pseudo-elements

@climb512

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I chose to create the staggered boxes using grid-areas. I was very happy with the results, but I could have used Flexbox as well and have seen some fine examples that others have done using Flex.

I was having difficulty placing the background images using familiar methods until I found examples of using CSS pseudo-elements for this. Very clever I think. One of the code examples that helped me the most here was from <a href="https://github.com/Rock-n-Roll-CRC/social-proof-section/blob/master/index.html">Rock-n-Roll-CRC</a>

I got to 95% on this one in about 4 hours, but several more hours were spent on tiny tweeks. As always, any feedback is very welcome.

Community feedback

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