Skip to content
Submitted 9 months ago

Newsletter sign-up form with success message with Mobile First Design

amersfoort3232•150
@amersfoort3232
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

It is worth mentioning that using mobile-first approach is way easier than building normal web view first.

Has been updated after Grace provided some comments. will update the remaining js such as "toggle classes or attributes in js but not change inline styles", and "Make sure focus is managed approximately".

Community feedback

  • Petrit Nuredini•2,860
    @petritnurediniPosted 9 months ago

    Congratulations on completing your Newsletter sign-up form project! This is a great achievement and demonstrates your growing skills in web development. Here are some best practices and recommendations to consider for your future projects:

    1. HTML Best Practices:

      • Semantic HTML: Great job using semantic tags like <section> and <main>. This improves readability and accessibility.
      • Alt Text for Images: Make sure to provide descriptive alt text for all images. This is crucial for accessibility and helps users who rely on screen readers.
      • Form Accessibility: Enhance the accessibility of your form by associating <label> elements with form controls using the for attribute.

    2. CSS Styling:

      • Responsive Design: Ensure that your website is responsive on various devices. Use media queries effectively to adapt the layout to different screen sizes.
      • Consistent Styling: Ensure consistency in styling across different elements and states (like hover effects).

    3. JavaScript Interactivity:

      • Form Validation: Consider adding client-side validation for the email input. This provides immediate feedback to users.
      • Unobtrusive JavaScript: Keep the functionality working even if JavaScript is disabled by ensuring that the form can be submitted traditionally.

    4. Performance Optimization:

      • Image Optimization: Optimize images to reduce load times, especially important for users on slower internet connections.

    5. SEO and Accessibility:

      • Meta Tags: Include descriptive meta tags in the <head> for better SEO.
      • Language Attribute: Good use of the lang attribute in your HTML tag, enhancing accessibility.

    6. Code Quality:

      • CSS Organization: Organize your CSS to make it more maintainable. Consider grouping similar styles and using comments to separate sections.
      • Code Comments: Use comments in your HTML and JavaScript to describe what different sections of your code do.

    7. Learning Resources:

      • For HTML and CSS best practices, MDN Web Docs is an excellent resource.
      • To enhance your JavaScript skills, JavaScript.info offers in-depth guides and tutorials.

    Keep up the fantastic work! Every project is a step forward in your journey as a developer. Remember, the community is always here to provide support and feedback. Your dedication to learning and improving is truly inspiring! Keep pushing your limits and exploring new technologies! 🚀💻🌟

    0

Please log in to post a comment

Log in with GitHub

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