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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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: name@host.tld). The message for this error should say "Looks like this is not an email"

Screenshot

Links

• Solution URL: URL
• Live Site URL: URL

My process

Built with

• Semantic HTML5 markup
• CSS/Sass
• Flexbox
• Mobile-first workflow
• Vanilla Javascript

What I learned

For this project, I focused on using Sass for the first time and form validation with Javascript. I learned a lot about validating the form with Javascript, such as removing the default styles and adding little messages at the bottom to alert people of why their entries aren't being validated, and using Javascript to alter the borders.

Continued development

I want to continue to learn how to use Sass, but I want to use NPM to watch and build my projects versus this one where I used a VSCode extension. It ended up getting really messy. I also want to learn how to properly code media queries in Sass as well.

Useful resources

• Javascript Validation Video, CodePen - This video helped me a lot with Javascript and served as the backbone for the coding of mine

Author

• Frontend Mentor - @akajfes
• GitHub - @akajfes