You will create a compelling single-page design that features a sign-up process
ID: 3888365 • Letter: Y
Question
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 you’re 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 <label> 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 <label> 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
Explanation / Answer
HTML FILE.
<!DOCTYPE HTML>
<html>
<head><title>LOGIN PAGE</title></head>
<body>
<h2 id="heading1">SIGN UP</h2><br/>
<h4 id="heading2" align="left">Personal Details</h4><br/>
<form method="GET"/>
<input type="text" value="Name"/>NAME<br/>
<input type="digits" value="contact number"/>CONTACT NO.<br/>
<input type="text" value="mail id"/>MAIL ID<br/>
<input type="radio" value="male"/>MALE<br/>
<input type="radio" value="female"/>FEMALE<br/>
</form>
<select><option>Email list</option> <option>Software Beta Test</option> <option>Open Source Community</option></select><br/>
<input type="chechbox"/>Agree to terms and conditions<br/>
</body>
</html>
CSS FILE.
ONLY USED FOR FORMATTING THE HTML DESIGNED STRUCTURE.'
#heading1{
text-align:"center" ;
font-color:"rgb(120,235,88)";
font-weight:"bold";
}
#heading2{
text-align:`"center" ;
font-color:"rgb(88,235,120)";
font-weight:"bold";
}
body{
padding: 10px;
border:5px solid green;
min-width:300px;
min-height:100px;
}
body{
background-image: url("any image.png");
background-color:#e9e9e9;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.