Sekonso/Newsletter_signup_and_success_message

Personal solution of beginner challenge project from FrontEnd Mentor about a Sign up page that will display a success message if valid

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Add their email and submit the form
• See a success message with their email after successfully submitting the form
• See form validation messages if:
• The field is left empty
• The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Links

• Solution URL: Github repo
• Live Site URL: Github page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript DOM
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS

What I learned

• Changing display
• Mobile-first workflow
• Email validation
• Responsive website
• Image adjustment
• Window object in JS

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

• Responsive design

Author

• Frontend Mentor - @Seconds-bit
• Twitter - @ancaadri9

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.

• Email validation tutorial - Helped me figures how to make an email input validation
• Responsive layout tips - Helped me figures what to prirotize and how to make responsive web page