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

Social-proof-section-challenge

Doc 100

@GodILoveTequila

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


Hello, i have a felling that my code is messy, can someone please tell me if it is so? And if it is, who can i improve it? Also an overall feedback of the challenge will be very welcome and appreciated!

Community feedback

@pikapikamart

Posted

Hey, really nice work on this one. Just saw the site and the desktop layout looks great, it is responsive as well and the mobile state looks really nice as well. Just a suggestion about breakpoint, currently you are showing the mobile state at 0px - 1100px which is too big for the whole mobile view to occupy since desktop layout could use more of those screen time.

For some other suggestion on the site, here are some:

  • First, the 2 background-blobs are missing on the site. I think you forgot to add them or didn't see the blob on the design:>
  • For the h2, you don't need to use br to make those words be wrap on another row. What you can do is that, use max-width on the h2 so that it will limit the size and makes the text be wrapped.
  • Witty on that star parts, I tried nvda to test it out and it doesn't read it out and I was thinking that it instead announce some gibberish but it doesn't, how cool is that!
  • For each of the testimonial, you could use this markup so that user can navigate your site much easier using blockquote:
<figure>
  <img src="" alt={person name}>
  <blockquote>
    <p> {qoute in here}</p>
  </blockquote>
  <figcaption>
    person name
    <p>
      person role
    </p>
  </figcaption>
</figure>

Though you will need to use display: grid on the figure so that you could place each element properly like on the design.

  • Also, you could use the person's name as the person's img tag alt since the testimonial is all about the person so making their image visible will be meaningful on the site. Plus when a person's info is already present, use them as value for images of the person.
  • Lastly, just the breakpoint of the site to be adjusted.

Aside from those, great job again on this one.

Marked as helpful

1

Doc 100

@GodILoveTequila

Posted

@pikapikamart Thank you once again! I don`t know how much time you put into reviewing something like this but you're great! Keep on the good work! Thanks a lot!

1

@pikapikamart

Posted

@GodILoveTequila Thank you :>>

Keep up as well on submitting challenges here at FEM and always make sure that for every challenge you take in here, the next challenge to be submitted will be be better than the previous one^^

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