Unit02 Form Page

Overview

In this module, you will build a checkout web form for a fictious company using tailwind CSS Play CDN. You will also blend some traditional CSS to speed up the process of building buttons.

Objectives

At the end of this module, you should be able to...

• Build a web form with straight line eye tracking
• Appropriately use labels and various html input tags
• Add some traditional CSS to tailwind classes
• Use VS Code to replace multiple items at once. (right click > Change All Occurrence)
• Change the background color on focus
• Limit the form tag width using tailwind breakpoints
• Use tailwind transition and duration
• Use tailwind hover classes
• Use tailwind Grid

AI Assist

Use AI to build a select with all 50 U.S. states

PROMPT: Please give me an HTML select tag with options for all 50 us states

Tasks

• Reference for CSS transitions
• Reference for Cursor changes
• Reference for transition duration
• Reference for Forms

Watch

• Building the Assignment
• Watch 2620_01a Video
• Watch 2620_01b Video
• Watch 2620_01c Video

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit02 Form Page (10 pts)

html head tag

The head tag should contain the following

• Link to a favorite icon
• script cdn link to tailwind
• viewport meta tag
• page title

Header

The header tag should contain the following

• Styling done using only Tailwind classes
• SVG Logo built in a tool like Adobe Illustrator
• SVG icon representing the account
• SVG icon representing the shopping cart
• Displayed to match the proivided assignment examples

Main

The main tag should contain the following

• Styling done using only Tailwind classes
• h1 styled as the page title
• Delivery section with text, select, tel and number inputs.
• Styled Radio button set
• Styles payment button set based on mixing traditional css and tailwind classes
• Order button styled with tailwind

Footer

The footer tag should contain the following

• Styling done using only Tailwind classes
• copyright symbol
• Student's name
• Class Name

Design Principle Requirements

Your page needs to meet these requirements

• Passes the HTML W3C HTML validator
• Passes the WAVE Accessibility test with no contrast errors
• Does not contain any Visual Tangent errors (items touching the screen edge)
• Page is responsive from 320px to 1600px
• Page does not have horizontal scrolling at any page width

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail