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

news letter signup form

@MikhelRhyz

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


feedback is welcome

Community feedback

P

@Thodoris-Diamantidis

Posted

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 helpful

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