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

@Anjali550

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Better5afe 850

@better5afe

Posted

Hi Anjali!

Firstly, congrats on completing this project! 🎉 It turned out really nice and I bet you had a lot of fun while doing it.

Below you can find some tips from my side on how you can improve it:

  • Line height - you can slightly increase line height inside the left-section container and inside the comments.
  • Layout - as of now, the entire section sticks to the left side, on mobile as well as desktop viewports, it would look better if you tried to center it, for example using flexbox.
  • Colors - you can add a root variable at the beginning of your CSS files that will store custom properties, usually colors. They provide many benefits, such as reusability and allow dynamic updates.
  • Comments - I see that you left some comments in your HTML and CSS files. Make sure to delete them before deploying the application to avoid uneccessary code clutter
  • Breakpoints - I recommend checking out Bootstrap documentation for available breakpoints as their ranges provide a good foundation to build an app for almost any device.
  • This one is a little bit out of scope, but you can try implementing BEM methodology while naming the classes, it makes them more clear and easy to understand for an another developer.

I hope you will find those tips helpful. Overall, the project looks solid and once again - congrats!

Happy Coding! 👻🎃

Marked as helpful

0

@Anjali550

Posted

Thank you so much for your thoughtful feedback and congratulations! 🎉 I really appreciate your insights and suggestions, and I'm glad you liked the project. 🙌 It means a lot to me that you took the time to review my project. I definitely had a lot of fun working on it!

Increasing the line height and centering the layout sound like great ideas. I'll give those a try to make the design even better. And you're absolutely right about using custom properties for colors - it'll make things more organized and flexible.

I'll also make sure to clean up those comments before deploying the application - it's a good practice to keep the codebase clean and tidy.

Bootstrap breakpoints are a great suggestion, and I'll definitely explore using them to ensure a responsive design.

BEM methodology is something I've been meaning to dive into, so your reminder is much appreciated. It can make the code more maintainable, which is always a plus.

Thanks again for your support and Happy Coding to you too! 🚀👻🎃

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