@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!
@ClemenceTafforeau
Posted
Thank you very much for your feedback! 🙏 @itush