Responsive Newsletter Sign-Up form

Hi everybody! 👋 this is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor.

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 Repository: Github Repository
• Solution Page: Github Page

Built with 🛠️

• Semantic HTML5 markup.
• CSS custom properties.
• Flexbox.
• Mobile-first workflow.
• Javascript.
• Regular Expresions (js).
• Font Awesome - For icons.

What I learned 📚

In this first challenge of the junior class I focus on cosolidar the knowledge acquired in previous challenges

Continued development 🔨

In the following challenges I would like to consolidate my javascript management, which remains my weakest point when it comes to giving dynamism and functionality to my designs.

Useful resources 📂

• Image Color Picker - This page helps me to determine exactly the color to use in each element of the pages I design.
• Regexr - This page provided me with a regular expression to validate the emails in my code.
• Font Awesome - This page provides good free icons for projects.
• Cssmatic - This section inside the cssmatic page is very useful to design and see in real time a box shadow.

Author 🙋🏻‍♂️

• Twitter/X - @agus_firpo
• Frontend Mentor - @Arfirpo
• Linkedin - Agustín Rodrigo Firpo