Newsletter Sign Up with Success Message

Community feedback

• 

  Erick Rodrigues•660

  @SortJakke

  Posted 5 months ago

  Hello, here is some feedback on your project:

  Visual issues:

  • The image overflows the div, which can compromise responsive design and cause visual disorganization. I suggest adjusting it with properties like max-width or max-height.
  • There is no spacing between paragraphs, which makes the text harder to read and the layout less pleasant. Adding margins or padding would solve this issue.
  • The border-radius is smaller than specified in the design, which affects the visual fidelity to the original concept.

  HTML:

  • I recommend replacing the "wrapper" div with a <main> element and the "-half" divisions with <section> elements. This would make the code more semantic and aligned with best practices.
  • The HTML already uses the <picture> element, which is excellent for swapping images based on device size. This is a modern and effective approach.
  • For lists, it would be a good idea to use <ul> and <li>, styled in CSS with list-style-image on the <ul> or a pseudo-element ::before on the <li>. Both options are great and allow flexibility in the design.
  • In the input section, placing the label, input, and button inside a <form> would make the code more organized and simplify event handling with JavaScript.
  • To display the error message, I suggest placing it inside a <span> and moving it using position: absolute. This would allow you to remove the "label-validation-box" div and the "email-label" paragraph, simplifying the code.

  CSS:

  • Limiting the wrapper's height to 65vh can distort the layout on some devices. I recommend revisiting this value or opting for a more flexible height.
  • Adjusting the main-image with max-width or max-height prevents overflow issues and keeps the design consistent.
  • To remove the button's borders, use border: none instead of border: transparent, ensuring the button looks cleaner.
  • On mobile, the button is outside the wrapper because you applied height: 100vh. This causes the div to exceed the screen size. Removing this property or using height: fit-content may resolve the problem.

  00

  Marked as helpful
• 

  Marzia Jalili•9,670

  @MarziaJalili

  Posted 4 months ago

  A tiny suggestion:

  I am kinda planning to create a study group on Google Chats let me know if you're interensted to be added there. Let's beat Elon Musk together.

  😂😂😂

  02