Project: HTML Forms & Validation Copy

In this project you will rebuild the form used by Mint.com for signing up new users. This site has a very nice design and it is quite simple. In addition their signup process is very clean. Alternatively, you can also try to rebuild the Mailchimp.com sign up form.

Intuit

MailChimp

As you see can see from the images above, the page is very straightforward. So even if your CSS skills aren’t perfect yet you should be able to clone it. Once again don’t worry about any of the dynamic functionality on the page. You shouldn’t worry about icons and having the form actually submit. Once again the goal is to make the page look like the real one.

Assignment

  1. Take a close look at the screenshots above (Mint.com and Mailchimp.com), study the structure and try to figure out the HTML and CSS code behind it.

  2. Create a blank HTML document

  3. Plan out how the elements on the page need to be grouped together.

  4. Lay out the empty semantic HTML elements for the major sections (form, sidebar, footer…). Then make them the proper size and alignment. A useful tip is to make their backgrounds different colors while you’re positioning them on the page. As always don’t forget to use your browser’s developer tools (right click on the page, click "inspect element")!

  5. Fill in those elements with the content you want to include.

  6. Now style them to look like the real webpage.

  7. Take a minute to think about how you would set up the different form elements and their accompanying validators. In other words think the objects and functions that you will need.

  8. Add the JavaScript code that checks validation as the user progresses through the form. Keep in mind that when a user leaves a form field it should automatically validate that field.

  9. Test out all possible cases.

  10. Push your solution, create the pull request and submit its URL.

Leave a Reply