You will create a compelling single-page design that features a sign-up process to get new users to join some type of project, such as an email list, a software beta test, or an open-source community. Focus on designing for an effortless, engaging entry of personal information; and friendly, frictionless client-side tests and alerts for malformed, missing, or incomplete information. The goal of this project is to experiment with patterns of interaction that persuade someone to sign up for whatever it is youre offering, which is not at all an easy task.

Project must be built with only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.

All source files in UTF-8/Unicode character encoding.

Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks)

HTML, CSS, and JavaScript files should both be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries

HTML requirements:

Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout.

At least three HTML form elements, written in conjunction with tags and the for attribute

Semantically structured text-based HTML content to accompany any media elements (image, audio, video)

CSS requirements:

CSS file should open with a set of reset styles.

Use at least two min-width media queries to enhance your mobile-first styles for larger screens

JavaScript requirements:

JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction)

JavaScript that uses function closures and other techniques to avoid polluting the global window namespace

JavaScript that uses only asynchronous methods and callbacks

Create a touch-friendly, mobile-first responsive web design

Experiment with design and interaction patterns for pleasing user experience

Design and execute a progressively enhanced page focused on system users and tasks

Apply design principles including typography, color, and material design

Engage in agile, iterative web design and development, supported by version control

Project must be built with only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.

All source files in UTF-8/Unicode character encoding.

Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks)

HTML, CSS, and JavaScript files should both be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries

HTML requirements:

Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout.

At least three HTML form elements, written in conjunction with tags and the for attribute

Semantically structured text-based HTML content to accompany any media elements (image, audio, video)

CSS requirements:

CSS file should open with a set of reset styles.

Use at least two min-width media queries to enhance your mobile-first styles for larger screens

JavaScript requirements:

JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction)

JavaScript that uses function closures and other techniques to avoid polluting the global window namespace

JavaScript that uses only asynchronous methods and callbacks