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 Challenge

@carlosecosmesilva

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


Hi everyone, I would like feedback on what I can improve on this challenge and also on future challenges.

I'm still studying about the frontend world but all tips are welcome!

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Layout looks fine in desktop and the mobile state is good as well. Though on responsiveness, you may need to sort that out. Always inspect your layout in dev tools before finalizing all things and submitting, change screen sizes, make sure things are looking good and fitting well.

Suresh already gave great feedbacks, just going to add some and explain things:

  • This text 10,000+ of our users love our products. could have been the h1 element. Always have at least 1 h1 per webpage. Now, to get it good looking, when you use h1, you don't need to use br on it to make other words wrapped in another row. Instead, you could use max-width so that it will be limited and the words will be wrapped in another row, the value of that, well, it is up to you.
  • On the testimonial section, the img of each person could have used their name as the alt value, like alt="Colton Smith".
  • The name of the person per testimonial could have been wrapped inside a heading tag, like h2.

Aside from those, great job. But keep in mind about the responsiveness part, that is really important.

Marked as helpful

0

@coderSuresh

Posted

Hey sir, nice work. I would like to give some feedback.

The first thing I have noticed is, your site is working fine on desktop and mobile but in a device with a width of 1000px, it doesn't fit.

Maybe you can modify the code to fit on that device too. (Which is an easy task.)

Also, I have noticed 2 HTML issues and 1 Accessibility issue recognized by the frontend mentor.

To solve "Page should contain a level-one heading" you can replace <div class="title"> with <h1 class="title"> since it is a title.

It also solves the first HTML validations issue.

Keep learning, keep coding.

Note: I am a beginner.

Marked as helpful

0

@carlosecosmesilva

Posted

Thank’s for tips!!

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