Project: HTML Forms (v1)

Introduction

In this project, you’ll get a chance to rebuild the form used by Mint.com for signing up new users. They have been highly praised for the design and simplicity of their site, and their signup process is very clean. Alternatively, you can also try to rebuild the Mailchimp.com sign up form.

Intuit

MailChimp

The page is very straightforward, so you should be able to clone it even if your CSS skills aren’t perfect. As usual, don’t worry about any of the dynamic functionality on the page or finding the specific icons they use or having the form actually submit. The point is to make it look like the real page as much as you reasonably can.

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…) and make them the proper size and alignment. It may be helpful to change their background colors while you’re positioning them on the page. 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. Push your solution up to a private Github repo and submit the URL on the Quiz below.

Additional Resources

  • Feel free to suggest some!
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 30.10.2020