HTML Project #2

Project Overview

The purpose of this project is to build on what we did in HTML Project #1. Now that everyone has a firm grasp of HTML coding and folder structure, we want to make use of External CSS files, class names, ids, and some basic scripting shortcuts. This second project will also introduce Javascript via jQuery so that we can start exploring some very basic Object Oriented Programming.

As with the first project, this second project is meant to be expanded upon later. In the third project, we will introduce the concept of servers, remote file management, and some basic PHP coding.

Example Site #2
** note: the only difference between this example and the first one will be in the code **

File Structure

  • Create a new folder for this second project (this should be a separate folder from Project #1)
  • Copy everything from your first project folder into this new folder
  • Create two new subfolders: "css" and "js"
  • Under the "css" subfolder:
    • Create a new text file called "main.css"
  • Under the "js" subfolder:

index.html

Requirements:

  • Replace all in-line CSS with External CSS

about.html

Requirements:

  • Replace all in-line CSS with External CSS

contact.html

Requirements:

  • Replace all in-line CSS with External CSS
  • Add jQuery to detect form submissions
  • Add jQuery to prevent submissions with invalid email addresses
  • Add jQuery to replace form with a "thank you" message on successful submission

Grading

Unsatisfactory

You will receive a failing grade. You will have to redo parts of your project to bring it up to standard.

 

  • Work not submitted
  • Work submitted after deadline
  • Work not complete (missing any of the above requirements)
  • A site that does not work (broken CSS link, broken jQuery code)

Pass

You will receive a 60% - 75% depending on the number of mistakes you have in your code.

 

  • Duplicate CSS IDs on the same page
  • jQuery doesn't work properly
  • Lack of content on the site
  • Lack of creativity (my example site shows poor creativity)

Complete

You will receive 75% and up depending on how clean your code is and how nice your site looks.

 

  • All jQuery is working as expected (use inspector on Chrome to verify this)
  • jQuery properly detects invalid email addresses
  • jQuery replaces the form with "thank you" message on successful submission

Deadline / Submission

Due Date: February 15th, 2016

Late submissions will be penalized 2% per day late

 

Process

  • Compress your project folder into a single .zip file
  • Name the .zip file [last name].[first name].webdev.02
  • Submit .zip file via Edmodo