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

Overview

Hi! This is my attempt at the Intro component with signup form challenge. This challenge was fairly straightforward. I attempted it in order of markup, styling all the components (including responsiveness), then scripting the form validation.

Screenshot

Desktop

Mobile

Links

• Solution URL: Here!
• Live Site URL: Here!

My process

1. I restructured all of the markup before moving on to styling.
2. I modularised my SASS files for better structuring and readability, then worked on them in order (declaring variables based on the style guide, resets, the page and its elements, then media queries).
3. After fine-tuning the styling to match the design document as much as possible (including responsive styling), I then worked on the Javascript form validation.
4. I then tweaked some final touches on the form itself.

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• Grid
• Javascript form validation (Event listeners)

What I learned

I learned about how to handle validation for multiple input elements individually.

Author

• Github - sheronimo
• Frontend Mentor - @sheronimo