Project: HTML Forms

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 rebuld 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!

Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 30.10.2020

Forms for collecting data

Introduction

Forms are one of the most important parts of your site. They are your user’s gateway into your back end — the user provides data in a form and you do stuff with it.

Forms are important to get right not just because you want the correct data getting sent to your back end but also because you want the experience of interacting with the form to be as dead-stupid-simple as humanly possible so you don’t lose users while they are doing it. You need to specify the proper types of inputs for each possible data item, since there are often multiple ways to collect a piece of data but only one way which is easiest for your user and eliminates the chances of that user inputting erroneous data.

Learning Objectives

  • Why are forms probably the most important part of your site?
  • How do you construct a basic form?
  • How do you specify which path the form gets submitted to?
  • When would you want to submit using GET vs POST requests?
  • What are all the possible form element types?
  • When should you use checkboxes instead of radio buttons?
  • When should you use a combobox/dropdown instead of a text field?
  • How do you make a very large text field?
  • How do you link elements with their labels?
  • How do you link element selections together (e.g. check boxes) so they are nicely formatted when your server receives them?
  • What should your "submit" button probably say instead of "submit"?

Study

  1. Study Shay Howe on Forms

  2. Browse through Form Basics from MDN to see if you’ve missed anything.

  3. Go through this interactive screencast by Scrimba: HTML Forms and Input

MUST READ

  1. Read the What is accessibility? section from Google’s page on Accessiblity which contains important notes about form accessibility.

MUST READ

  1. Carefully study and bookmark this Forms Accessiblity Checklist and always ensure that your forms are created with these rules in mind

Additional Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

Ordered and Unordered Lists

Introduction

Ordered and unordered lists are heavily used in most websites. It’s not just for bullet-points and numbers… they are also used in creating horizontal navbars and long collections of objects (like a list of pictures of items for sale). They often take the place of tables as the method of choice for displaying structured content.

Learning Objectives

  • What is the basic list syntax?
  • How do you nest lists inside each other?

Study

  1. Read Shay Howe on Lists (including CSS)
  2. Browse HTMLGoodies’ rapid fire guide to different list types
  3. Glance over the HTML docs on lists… you’ll probably see them again when you’re Googling for a problem!

Additional Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 22.03.2021

CONTRIBUTORS:

Tables in HTML

Introduction

Tables used to be pretty much the only game in town — when you had data of any sort, you pretty much had to use one to display it. You also had to use tables to wrangle the layout of your page into some semblance of order. Thankfully, those days are behind us (thanks to CSS) and now tables can often be more of a hindrance than a benefit for any but the core use cases. That said, they are still the go-to way to get structured data onto the page.

Learning Objectives

  • When should you use tables?
  • What is the structure of a table?
  • What are the special tags that dictate certain parts of a table, e.g. headers or captions?
  • How can you combine cells in a table?
  • Why do you need to be careful about your padding and borders in tables?
  • How do you align text within cells in a table?

Study

  1. Get a quick look at HTML Tables through this short introductory article by Flavio Copes: Styling HTML Tables with CSS

  2. Follow these 2 interactive screencasts on tables at Scrimba:

  1. Take a 15 minutes break, grab yourself a cup of coffe, set your chair at a comfortable position, fire up VSCode and study this extensive chapter on HTML Tables by Shay Howe

MUST READ

  1. Take another short break and carefully study the following MDN article that talks about advanced table features as well as how to create web accessible tables: HTML table advanced features and accessibility

  2. Glance over the HTML Docs on Tables, which you’ll no doubt see again.

Additional Resources


Material based on Erik Trautman | The Odin Project
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? Search for: Kostas Minaidis (kostasx)

UPDATED: 25.10.2020