Skip to content

Latest commit

 

History

History
40 lines (23 loc) · 2.25 KB

README.md

File metadata and controls

40 lines (23 loc) · 2.25 KB

sign-up-form

View live site on GitHub Pages

About

This project is intended to give you a chance to flex some of the new items you’ve been absorbing over the past few lessons. This time it’s a sign-up form for an imaginary service.

sign-up-form-desktop sign-up-form-mobile

In this The Odin Project assignment we are tasked with building a web form for an imaginary service or company of our choosing.

Features

  • Inputs for entering requested information
  • Client-side validation for all inputs of each type
  • Responsive design
  • CSS eye-candy in place of default browser form behavior (eg. :focus)

Technologies

  • Javascript
  • CSS
  • HTML

What I Learned

I was pretty excited about this exercise after all the information I was learning about forms in the previous lessons. Being a detailed oriented person, checking off the "form to-do's" was right up my alley. And since I enjoy taking photos with my Canon SureShot Max point-and-shoot camera, I decided to create a fictitious social media photo sharing site, specifically for film based photos.

While building this form I realized the sheer amount of HTML markup that goes into a typical sign-up form, not to mention more complicated forms across the internet. Like I mentioned earlier, the key to this exercise was all in the details and making sure each form element had the correct attributes.

I also had a little fun over-riding the default browser styling for each form element (:focus, :valid, & :invalid states), aside from the validation pop-ups. Based on my research, I discovered this wasn't possible without JavaScript. Since that specific task wasn't required in the brief, I decided to limit my JS to validating the passwords. I may return later to add new features, like custom validation, but I feel like my time would be best used moving on with the course. Plus, from what I've learned, there is a fine line between (really cool) custom JS and accessibility.

Onward!

Additional Links

The Odin Project