Frontend Mentor - Intro component with sign up form solution

This is a solution to the Intro component with sign up form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • Any input field is empty. The message for this error should say "[Field Name] cannot be empty"
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: [email protected]). The message for this error should say "Looks like this is not an email"

Links

• Solution URL: GitHub repo
• Live Site URL: GitHub pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vainilla JS for Form Validation
• SCSS - For styles

Continued development

This challenge definitely tested my layout skills so perhaps lots of my code (specially SCSS) is not particularly DRY right now. Also, while I'm proud with the JS validation method, perhaps is not as interactive as I originally thought so thats definitely a point to improve.

Useful resources

• Better form submissions by Stephen C. Weiss - This helped me a lot to understand a way to stop the default behaviour of the form and properly run the validation function. Thanks!
• How to get type of input field - This is an amazing discussion that helped to get the type of an input field so I can run the proper validation function.

Author

• Website - Hollman A. Barahona
• Frontend Mentor - @habarahonaa
• Twitter - @habarahonaa

Acknowledgments

Massive thanks to the Frontend Mentor team for the marvelous challenges that they constantly post and thanks to my mom who was always there to help me with the overall look and feel of the site.