HTML Project #1

Project Overview

The purpose of this project is to make sure that everyone has a basic understanding of HTML elements. The reason I want everyone to write the code by hand is so that you gain a more intimate understanding of the code that dives deeper that simply using a pre-existing library.

This first project is meant to be easy and simple so that you can use this code as a base for the next two projects. In the next project, we will start replacing in-line style tags with proper CSS classes and ids. The last step is to use external libraries such as Bootstrap and jQuery.

Example Site

Submissions

File Structure

  • Create a folder for your project (this will be referred to as the root folder)
  • Create a file called "index.html"
  • Create two subfolders: "images" and "subpages"
  • Under the "images" subfolder:
    • Save a long image that you will use as a banner (jpg format)
    • Save a square image that you will use on your "about" page (jpg format)
    • Save a square image that you will use on your "contact" page (jpg format)
  • Under the "subpages" subfolder:
    • Create a new text file called "about.html"
    • Create a new text file called "contact.html"

index.html

Requirements:

  • Navigation Menu
  • Image banner
  • Main title
  • Content blocks (3)
  • "Read More" button for each block
  • Footer

about.html

Requirements:

  • Navigation Menu
  • Image (float left)
  • Text
  • Footer

contact.html

Requirements:

  • Navigation Menu
  • Image (float left)
  • Contact form
  • Footer

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 (none of the links work, no images load)

Pass

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

 

  • One of the menu items on one of the pages does not link properly but all other links work
  • Messy code that works but is difficult to read
  • 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.

 

  • Consistent menu bar
  • Consistent footer bar
  • Clear, clean code that is well structured (proper use of containers)
  • All elements on site working properly across all pages
  • A clear indication of creativity and design

Deadline / Submission

Due Date: January 29th, 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.01
  • Submit .zip file via Edmodo