Web Project Assignment 2

<head>
  <style>
    var { text-decoration: underline; }
    ol ol { list-style-type: lower-alpha; }
  </style>
</head>
<p>
<center>
  <h1> Web Project Assignment 2 </h1>
  <h2> CSS Design</h2>
</center>

<b>You may not use any toolkit, IDE, or framework for completing this assignment</b>. I want you to learn how to code html, css, and php without the benefit of a crutch. 
<hr>
<h2> Mock-up Of Your Web Interface </h2>  

In this homework assignment you will create a mock-up of your web interface by

creating .html and .css files to implement several portions of your ABET data
collection web-site. The web pages you create should look roughly like mine--I
have not given you exact dimensions because the idea is to approximate my
layout and appearance, not duplicate it down to the last pixel. The names of
the .html and .css files I want you to create are in parentheses. Finally
the trashcan, person, and caret-down icons that you need for this assignment
can be found in /home/bvanderz/cs465/web_project/img. By playing with the CSS filter and background-color attributes you can pretty much match the color of the trash icon in my screenshots. 
<p></p>
  <ol>
    <li> Login page (login.html, login.css): Create an html file and
      css stylesheet that approximates the web page shown in this
      <a href="login.jpg">image</a>. It is acceptable for you to use
      the login.html file I gave you in class. You should move the css
      commands from the file you submitted to a separate login.css file.
      <p></p>
    <li> Data collection page (abet.html, abet.css): Create an html file
      and css stylesheet that approximates the web page shown in these
      three images: <a href="Results.jpg">results section</a>,
      <a href="AssessmentPlan.jpg">assessment plan section</a>, and
      <a href="NarrativeSummary.jpg">narrative summary section</a>. You can use either the flex or grid
      container layout that you started in class. The three images are all
      part of the same web page, with the results section first, then the
      assessment plan section, and finally the narrative summary section. I
      have slightly overlapped the images so you can get an idea of how the
      whole page flows. Here are a few requirements for your widgets:
      <ol>
	<li> The number widgets being used in the results and assessment
	  plan section are an input html widget of type "number". The
	  ones in the assessment plan section should have a min value of 1
	  and a max value of 100. The ones in the results section should have
	  a min value of 0 and no max value.
	<li> The description of each assessment should be limited to 400
	  characters.
	<li> The strengths, weaknesses, and recommended actions in the
	  narrative summary should each be limited to 2000 characters.
	<li> We are not concerned with users being able to interact with your
	  forms in this assignment. They can press on buttons but nothing will
	  happen. You will tie together the web interface with the php
	  backend in your final project assignment.
      </ol>
      <p> Here are the instructions for each of the three sections in case
	you wish to copy-and-paste them into your html files:
	<ol>
	<li> Results Section: For each outcome please enter the number of students who do not meet expectations, meet expectations, and exceed expectations. You can type directly into the boxes--you do not need to use the arrows. 
	<li> Assessment Plan Section: 
	   <ol style="list-style-type: numeric">
	   <li> Please enter your assessment plan for each outcome. The weights are percentages from 0-100 and the weights should add up to 100%. 
	   <li> Always press "Save Assessments" when finished, even if you removed an assessment. The trash can only removes an assessment from this screen-it does not remove it from the database until you press "Save Assessments". 
	   </ol>
	<li> Narrative Summary Section: Please enter your narrative for each outcome, including the student strengths for the outcome, student weaknesses for the outcomes, and suggested actions for improving student attainment of each outcome. 
	</ol>
      <p>
    <li> Password page (password.html, password.css): Create an html file
      and css stylesheet that approximates the web page shown in this
      image: <a href="password.jpg">password page</a>.
      Limit the password to 20 characters.
  </ol>
<hr>
<h2> Hints </h2>
<p>
<ol>
<li> The Sections menu needs to have a downward pointing arrow on the right
side. You should be able to accomplish this by embedding the &lt;select&gt;
tag in a div and setting the div's background color to white. From there you
can play with sizes to get the sizing correct.
<li> You can hard-code a few options with the Sections menu so that the TA
can see what it looks like when the menu is selected.
<li> You can hard-code a few assessment plans so the TA can see what they
look like.
</ol>
  <hr>
<h2> What To Submit </h2>
<p>
<ol>
	<li> Submit a zipped file with the .html and .css files specified in this
assignment, as well as the image files that you used (either mine or other
	  ones that you designed). When we unzip your file and display your .html pages,
	  your images, such as the trash can, person, and downward facing
	  caret, must appear. We will not edit your links to make them appear.
        <li> Your submission must work without us having to edit
any files or provide any files. 
        <li> If you are working with someone, please make only one submission
and list the name of the other person in the submission comments.
</ol>