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 - HTML and CSS

@ClemenceTafforeau

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


As always, I encountered many difficulties trying to make the page responsive. What are the best practises regarding media queries ? Is it better to place them under the class they're attached to or put everything in one big media query ?

Community feedback

Tushar Biswas 4,080

@itush

Posted

Congratulations on completing the challenge! 🎉

📱 Start with mobile-first approach: Design and implement styles for smaller screens first, and then progressively enhance for larger screens.

🖥️ Use breakpoints: Define breakpoints at specific screen widths where the layout or design needs to change. This helps to ensure a smooth transition between different screen sizes.

📐 Keep it modular: Organize your CSS code into reusable and modular components to maintain a scalable and maintainable code-base.

💡 Use min-width for media queries: By using min-width, you can target specific screen sizes and up, allowing your styles to be applied to larger screens while still maintaining the smaller screen styles.

⚡ Optimize performance: Optimize your media queries to minimize unnecessary CSS code and reduce file sizes for faster loading times.

Remember, these are just some general best practices, and the specific implementation of media queries may vary depending on your project requirements and design goals.

  • I prefer to start with mobile-first approach and define all the media queries at the end for larger break points.You may checkout 12 important CSS topics where I discuss about Media Queries, Mobile-First Workflow etc. in a simple way.

  • Using section and article elements was a better choice. Try to use at least one main element for a page and avoid divs as much as possible.

Once again you have done a wonderful job.🚀

Hope this helps.

Keep at it...💻 Happy hacking!

1

@ClemenceTafforeau

Posted

Thank you very much for your feedback! 🙏 @itush

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