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

Semantic HTML5 markup, CSS3, CSS GRID, Flexbox, SASS,

@Babajide777

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 further improved my skills with CSS Grid and SASS. I will like your comments on what I could have done better. Regards.

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks great though the site is not responsive at the moment. Before submitting or just coding in general, first, as I would prefer start from mobile first approach and after coding the mobile of a section, change the screen-width and work your way up to desktop layout. That way, you will be able to see on how your site looks when the screen-size changes. Mobile layout breakpoint is too late, you are using 375px which is too small for other phones, using mobile first approach you will fix issues like this.

Other suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .entire-component should be using the main instead of div.
  • The bold text on the left side should be using h1. Remember that a page must have a single h1 .
  • Don't use figure on the stars since they are just purely decoration and doesn't really have a figcaption. What I would do is that, use them as background-image remember that you can put any amount of images on the background prop, this way , you avoided using extra html tags.
  • Also figcaption must be inside figure .
  • Person's img should be using the person's name as the alt like alt=" Colton Smith". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Since you are using figure on the testimonial, the person's name could use figcaption.
  • The person's name as well should be a heading tag since they are the main point for each testimonial. You can use blockquote as well.
  • Lastly, making the site more responsive and the mobile breakpoint to be adjusted.

Aside from those, great work again on this one.

Marked as helpful

1

@Babajide777

Posted

@pikamart Thanks for your in-depth feedback. I did use a mobile-first approach, but I want to work with only 2 breakpoints for now. I will increase the first breakpoint to about 475px for other projects as you advised. I plan to use 3, 4, or 5 breakpoints when I get to more complex projects like landing pages. I really appreciate you taking the time to look at my work. Regards.

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