Newsletter sign-up form with success message

Community feedback

• 

  JoshBolu•170

  @JoshBoluPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  • try adding another media query to take care of the display between media query width: 768px(max-width) and 540px(min-width)

  Above all, the solution you submitted is great! Happy coding!

  Marked as helpful

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on finishing your project! 🌟 It's quite an accomplishment to complete a responsive newsletter sign-up form, and you've done a fantastic job integrating both design and functionality.

  Here are some best practices and recommendations to further enhance your project:

  • Separate Concerns: Keep your CSS, HTML, and JavaScript separate. It's a good practice to link to external stylesheets and scripts rather than including them in your HTML file. This not only makes your code cleaner but also improves page load times because browsers can cache separate files more efficiently. 👓

  • Use Semantic HTML: Aim to use more semantic tags in your HTML. For instance, <main> should encapsulate the primary content of your webpage. Consider using <section> for the different parts of your content and <footer> for the attribution. 📄

  • Responsive Images: Instead of hiding and showing different images for mobile and desktop, you can use the srcset attribute in the <img> tag to load the appropriate image size based on the screen width. This improves the loading time for your images. 🖼️

  • CSS Variables: Great job on using CSS variables; they make it much easier to maintain and change the styles. However, ensure that you use them consistently throughout your CSS. 🎨

  • Email Validation: Move your email validation logic into a separate function. This will make your code more readable and the function can be reused elsewhere if needed. 📧

  • Button Accessibility: Use a <button> tag instead of styling a <div> to look like a button. This ensures that your page is accessible to users who rely on screen readers and those who navigate using a keyboard. 🔘

  • Error Handling: Provide real-time feedback when users are typing their email. You can use the input event to validate the email as the user types and show the error message accordingly. ⚠️

  • Code Formatting: Consider using a linter or a code formatter like Prettier to automatically format your code according to a consistent style guide. This makes your code easier to read and maintain. 🧹

  References for further learning:

  • For semantic HTML: MDN Web Docs
  • For responsive images: Responsive Images on MDN
  • For email validation: Email Validation on regex101
  • For accessibility best practices: WebAIM
  • For using Prettier: Prettier Documentation

  Keep coding and refining your skills. Every project you build takes you one step closer to mastering web development. Keep up the great work and happy coding! 💻🚀

  0