/sign-up-form

Primary LanguageCSS

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.

Table of contents

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

My process

  • I used a simple flex layout with just 2 sections so that the layout could easily be changed for desktop view
  • Once I had the structure and the basic styling in place I then tackled the functionality of the form validation.

Built with

  • Semantic HTML5 markup
  • CSS
  • Flexbox
  • Mobile-first workflow

What I learned

I learned that you can't use the css position property on input elements. I also learnt that a good README should be written alongside the development process - rather than after - something I will try to implement better next time!

Useful resources

  • Javascript form tutorial - This really helped me sort out the structure and logic of the form validation. I'd recommend it to anyone still learning this concept.

Author