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

@Louisterryn

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 know that everything isn't perfect and I didn't do the mobile part yet. I don't really know how to do everything with the same sizes as in the design images. If you have any tips don't hesitate !

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Louis, nice work on this challenge! Don't worry too much about matching up the sizes exactly, especially when working with the JPG design files. Typically, you'd have the design files which show the values in them.

Here are some thoughts after taking a look at your code:

  • You're loading in Google Fonts 3 separate times at the moment. It would help to remove two of them so that you're only loading it in a single time.
  • As you said, you haven't done the mobile part yet. I'd recommend spending time doing it. I'd also recommend trying to build your future projects mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users when using min-width media queries, which can be a nice performance gain.
  • Avoid using br tags to force line breaks. Instead, let the width of the containing element dictate when the line breaks. This will be especially useful when you make your site responsive.
  • You don't need alt attributes for the stars, as they add no extra context to those individual reviews. Instead, you can leave the value blank, so that screen readers skip over them.
  • You've jumped from a h1 element straight to h3 elements for the people's names in the testimonials. I'd recommend avoiding skipping heading levels unnecessarily. This can cause accessibility issues in the content hierarchy for screen reader users. So for this, the people's names would be h2 elements instead.

I hope these tips help. Let me know if you have any questions 🙂

0

@Louisterryn

Posted

@mattstuddert Thank you very much for you feedback ! I'll work on the mobile version this evening and try to apply what you said.

Have a great day !

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@Louisterryn you're welcome!

0

@Louisterryn

Posted

Hello @mattstuddert, I've done the mobile version ad updated my code. Would it be possible for you to check it ? Thanks in advance !

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@Louisterryn nice work updating your code! I'd recommend using min-width media queries instead of max-width for the reasons I mentioned above. Keep it up! As you build more projects, you'll see significant improvements in your code and how accurate you are vs the design 👍

0

@Louisterryn

Posted

Thank you again @mattstuddert ! I hope to you see again in the comment section of my newt projects. Have a great evening !

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