| summary | time | deliverables |
|---|---|---|
Style all the form inputs that will be needed for the eCommerce website. |
3 hours |
Pattern library |
- Continue work on your
ecommerce-pattern-library - We’re not styling the form page this week—we’re styling the individual form inputs and fields.
- Figure out all the different form fields needed for your checkout form and style them individually—each form field in its own HTML file:
- Text inputs?
- Labels?
- Email inputs?
- Date pickers?
- Text areas?
- Checkboxes? Should they be custom designed?
- Radio buttons? Should they be custom designed?
- Are there questions with large chunks of text? How do those look?
- Fieldsets?
- Different sizes?
- You can group some inputs together, if their association is special, to show how they should be designed, like username/password fields—but remember you’re not making the page, so you won’t likely need too many of these.
- Style the error messages & validation states too for when the form wasn’t filled in properly.
- Don’t use the
<form>tag at all—we’ll be combining each field piece together into a<form>later when we build pages.
- How many patterns?: It’s completely up to you—it’s your website design. Call the teacher over if you want confirmation.
- Multi-file: Each different type and functional form field should have its own HTML file—we’re designing components not pages.
- Do I need to design every possible form input: Yes.
- When & why: In the
config.ymlfiles describe when to use each new pattern you create.
Show teacher for marks during next class.