Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

Social proof section - HTML, CSS, Flexbox, Grid

P
Roy 195

@royschrauwen

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 had a hard time with the positioning of all the objects, but in the end I made something that looks somewhat like the design.

I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is very welcome. 😊

Community feedback

P
j5 2,290

@jmnyarega

Posted

This is an amazing start @royschrauwen. I am happy for you.

I have a few recommendations:

  • Avoid setting solid heights and widths, use min-height, max-height, min-width & max-width instead. For example on the container you can have something like this:

       min-height: 100vh;
       max-width: 50rem;
       margin: 0 auto;
    
  • On the example above I have used margin: 0 auto to centre content, it only works if you have set the width.

  • You don't need to set margin-top / margin-bottom on when using flex or grid layout, just use the gap property.

Cheers.

Marked as helpful

1

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