Design comparison
SolutionDesign
Solution retrospective
feedback is welcome
Community feedback
- @Thodoris-DiamantidisPosted about 1 year ago
Congratulations on finishing this challenge!
I would suggest you centering the main content-form using either grid or flex layout instead of using margin
example (grid):
body { background-color: hsl(234, 29%, 20%); font-family: "Roboto", sans-serif; min-height: 100dvh; display: grid; place-content: center; }
this way you will center the main container-form to the body.
I would also suggest for improved maintainability and efficiency in your styling, consider incorporating a custom CSS reset and custom variables.
- Custom CSS Reset: It might be beneficial to include a custom CSS reset at the beginning of your stylesheet. A CSS reset helps establish consistent default styles across different browsers, providing a clean slate for your styles. This practice can save you time and effort when styling elements.
- Custom Variables (CSS Custom Properties): Custom variables (CSS custom properties) are a powerful tool for making your code more reusable and maintainable. By defining variables for commonly used values, such as colors, fonts, or spacing, you can easily update styles across your entire project by modifying just a few variable values. This not only simplifies maintenance but also ensures a consistent look and feel throughout your application. Incorporating these practices can enhance the efficiency and maintainability of your CSS code, making it easier to work on both small and large projects.
If you found this comment helpful please feal free to upvote! :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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