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

Bimme Audrey Zβ€’ 100

@Bimme2audrey

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


Feedbacks are welcomed please. Thank you

Community feedback

Better5afeβ€’ 850

@better5afe

Posted

Hi there!

Firstly, congrats on completing the project! πŸŽ‰ I hope you had a lot of fun while making it.

Please find some feedback from my side below:

  • Font - it seems that you forgot to add the project's font. You can open its link directly through a README file with styling instructions.
  • Layout - I noticed that you are using flexbox in your project, and you do it correctly. Try wrapping the entire app in a container (div or a section tag are the most suited for it) and adding some flexbox to it, so that the app is centered on a desktop viewport.
  • Viewports - speaking of desktop and mobile viewport, the app is unfortunately not responsive. Try using media queries to implement layouts suited for different screen resolutions. My advice is to start from mobile viewport and then building your way up to the desktop resolution. When it comes to breakpoints, I recommend those specified in Bootstrap (CSS library) documentation. To check the layout on different screen sizes, you can switch through many devices using DevTools.
  • Responsiveness - I noticed that you are using a lot of pixels to define paddings and margins. Try using more em and rem units. They are scalable and make the spacing more responsive to different screen sizes.
  • Shorthand properties - instead of using multiple margin or padding properties for a single element, you can use a shorthand property, for example: margin: 1em 2em. Remember, that those values are read clockwise - top, right, bottom, left. If there are only two values as in my example, the first one stands for top & bottom and the second one for right & left margin values.
  • Alternative text - I agree that the star icon does not require a complicated alt text, however user's avatars should have more descriptive text, something like user's headshot, profile picture or user's avatar.
  • Linking styles - inside your project, you are linking an external stylesheed and use a `` element. I would recommend moving the footer styles to the CSS file and not mix those two approaches.
  • Comments - remember to delete unneccessary comments before deploying the app.
  • Color variables - you assign color values to a variables inside a :root selector and then just use their names to specify the element's color. It keeps all of the colors in one place, makes them reusable and easy to change.

Overall, the project looks good and I can see that you spent a lot of time on it. Keep going!

Happy Coding! πŸŽƒ πŸ‘»

Marked as helpful

0

Bimme Audrey Zβ€’ 100

@Bimme2audrey

Posted

Thank you 😊@better5afe

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