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

Mobile first social proof

inan brunelliโ€ข 120

@inanbruneli

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 am current working in improve my CSS skills, so I would be happy to hear what I could do different/better than this. So, feel free to put your feedback ๐Ÿš€๐Ÿš€

Community feedback

Raymart Pamplonaโ€ข 16,090

@pikapikamart

Posted

Hey, awesome work on this one. Though I had to zoom out to see the desktop layout since you are using media (min-width: 1440px), for the desktop layout, this is too big for users like me who uses a traditional 1366x768 resolution. Lowering it down would be really great, though the mobile layout looks good.

Some suggestions would be:

  • Always have a main element on a webpage, this will wrap the main content of the page, for this one, you should use a main element after the body tag, then the rest of the elements are inside the main.
  • The text after the h1 should just only p tag and not h3.
  • The rating text as well shouldn't be a heading tag, just a regular p tag would be better.
  • On the body tag, do not use overflow: hidden, try inspecting your layout in dev tools at the bottom, you will notice that you can't scroll, it is because of that styling.
  • The alt values for each of the testimonial images should be using their names like alt="Colton Smith".
  • The name of each person should be using a heading tag like h2. Also, do not just use a single div tag to wrap a text, use p tag on them. Always wrap content in a meaningful element.
  • The testimonial content text shouldn't be a heading, just use p tag on is, since it is just a regular text/testimonial.

Aside from those, great work again on this one.

Marked as helpful

1

inan brunelliโ€ข 120

@inanbruneli

Posted

@pikamart I really appreciate you for taking time for helping me!! All the information you gave me war helfull, and I will apply the changes on my project and think better on the next one. Thank you again!

1
P
The Burrito Doggieโ€ข 1,260

@BurritoDoggie

Posted

Hi!

Great job on the challenge! I can tell you a lot of effort into it, and you did just fine on your CSS! I usually give feedback on a mobile device and your project fit perfectly! If you want you can look at the 'report' above to help with your code. But overall I think you did wonderful!

Keep Coding!

(โ—โ™กโˆ€โ™ก)

1

inan brunelliโ€ข 120

@inanbruneli

Posted

@BurritoDoggie thanks for the feedback :)

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