Unit07 University Admissions

Overview

In this module, you will build a page for a fictitious that allows students to apply for admissions to your university. You will be following web form creation best practices.

Vocabulary

Web Form

A web form is a place where users enter information that is then stored n a server. Forms allow the user to communicate back to the website owner.

CSS Attribute Selectors

Allows selection and styling of HTML elements that have specific attributes or attribute values.

Objectives

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

• Build and style a responsive web form using type selectors.
• Use CSS pseudo elements to visually identify required form areas.
• Add appropriate linked data to describe a web page.
• Implement CSS Grid Named Areas

AI Assist

How to autocomplete data in a form input.

PROMPT: What is the best way to get a web form input to autocomplete?

Tasks

• Read about Web Form Best Practices: The Complete Guide
• Reference HTML attribute: autocomplete on MDN
• Read about Checking if an input is empty with CSS
• Read about Form Validation UX in HTML and CSS

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_07a-Overview
• Watch 2610_nav_07b-Navigation
• Page Content Tutorials
• Watch 2610_07a University Admissions Overview
• Watch 2610_07b Purpose of Web Forms
• Watch 2610_07c Form Best Practices
• Watch 2610_07d Common Mistakes
• Watch 2610_07e Auto Fill
• Watch 2610_07f Structure of an Input
• Watch 2610_07g Styling and Validation
• Watch 2610_07h Build the Form
• Watch 2610_07i First Input
• Watch 2610_07j More Inputs
• Watch 2610_07k Build a Select with Options
• Watch 2610_07l Checkbox and Radio Review
• Watch 2610_07m Controlling the Data Entered
• Watch 2610_07n Styling the Form

Assignment Example

• View the small screen open navigation
• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit07 University Admissions (10 pts)

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Header

The header of your page should contain the following:

• A 1x, 2x, 3x version of an appropiate University site logo.
• Company Name

Navigation

The navigation should feature:

• SMALL – Skip to page bottom navigation
• MEDIUM – spread evenly horizontally across screen
• LARGE - justify, right [FLEX]
• Activate the current page

Main

The form page should contain the following:

• Required contact inputs (First Name, Last Name, Cell Phone, Email)
• Optional contact inputs (Address, City, State, Zip)
• Communication preferences Radio Buttons
• Previous School drop down list
• High School graduation date
• Education Completed check boxes
• Username with pattern for 5-10 upper or lowercase letters
• A password allowing any characters that is at least 6 long
• An appropriately named and styled submission button

Footer

The footer tag of your page should contain the following:

• Use a copyright entity and bullet entity
• Display the year and your name
• Center align the text

Hosting this Assignment

• Create a new GitHub public repository
• Make your repository into a GitHub pages site
• Submit a link to the GitHub page

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Grade

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

• Pass
• Fail