Project 2

Students will ideate and design a multi-page website.

Project 2A | Project 2B | Project 2C | Project 2D | Project 2E

Requirements

Evaluation Criteria

Project 2 is a continuation of the design of the website in project 1.

Students will create a fully functional website with HTML and CSS that is based on the design of the site created in project 1.

All code should be validated (HTML Validator and CSS Validator) before submission.

Project 2A

HTML (8%)

Due week 8: February 27

Use your knowledge of HTML to format 3 of your site pages (home page plus 2 other key pages) content from project 1.

The evaluation criteria for this part of project 2 is based on:

  • Proper usage of HTML tags (e.g. proper ordering of <h1>, <h2>, <h3>, etc.)
  • How much further you have extended your knowledge of HTML and explored and employed additional tags and attributes and their proper values
  • Overall look and applied visual qualities such as hierarchy of information
  • Error free syntax/code – always validate your code before submission

Deliverables

  • Individual, validated HTML documents for 3 pages of your site

Submit according to the class work submission process.

Project 2B

CSS (8%)

Due week 9: March 6

Continuing from project 2A (make a copy of project 2A as your starting point), use your knowledge of CSS to style the typography and colors of the 3 site pages from project 2A.

The evaluation criteria for this part of project 2 is based on:

  • How closely the visual styles of typography align with the design of project 1
  • How much further you have extended your knowledge of CSS and explored and employed additional selectors, properties and values
  • Error free syntax/code – always validate your code (HTML and CSS) before submission

Deliverables

  • Individual, validated HTML documents for 3 pages of your site (same pages as Project 2A)
  • Single, validated CSS file for all pages of your site

Submit according to the class work submission process.

Project 2C

Box Model (8%)

Due week 10: March 13

Continuing from project 2B (make a copy of project 2B as your starting point), use your knowledge of CSS box model to add grids, margins, padding, borders, and dimensions to elements of the 3 site pages from project 2B.

The evaluation criteria for this part of project 2 is based on:

  • How closely the visual styles align with the design of project 1
  • How much further you have extended your knowledge of CSS and explored and employed additional selectors, properties and values
  • Error free syntax/code – always validate your code (HTML and CSS) before submission

Deliverables

  • Individual, validated HTML documents for 3 pages of your site (same pages as Project 2B - send a link for each HTML file to your instructor)
  • Single, validated CSS file for all pages of your site, linked in the <head> of each HTML file

Submit according to the class work submission process.

Project 2D

Images and Links (8%)

Due week 11: March 20

Continuing from project 2C (make a copy of project 2C as your starting point), add images, including background images, to 3 site pages. Use links to connect the 3 site pages together.

The evaluation criteria for this part of project 2 is based on:

  • Images are sized appropriately
  • Images use appropriate formats (JPG, PNG, SVG, GIF)
  • Your site folder structure is appropriately organized with CSS, images, and sub pages in their own folders
  • There are no broken images on any of your pages (this includes 403 Forbidden errors)
  • There are no broken links on any of your pages
  • How much further you have extended your knowledge of CSS and explored and employed additional selectors, properties and values as well as your ability to combine properties in new and unique ways to achieve your design
  • Error free syntax/code – always validate your code (HTML and CSS) before submission

Deliverables

  • Individual, validated HTML documents for 3 pages of your site (same pages as Project 2C - send a single link for just your home page to your instructor)
  • Single, validated CSS file for all pages of your site, linked in the <head> of each HTML file
  • All images and background images in proper file format, size appropriately and linked in HTML or CSS

Submit according to the class work submission process.

Project 2E

Final Site (8%)

Due week 13: April 3

NOTE: Although this project is due the last week of class (week 13), students are encouraged to complete as much as possible by week 12. We will be conducting a user testing and feedback exercise that will require a mostly complete website. This will also allow your instructor to provide as much feedback as possible before the site is due.

Continuing from project 2D (make a copy of project 2D as your starting point), add all remaining pages of your site and any final elements (e.g. CSS positioning, hovers, custom fonts, etc.) to ensure it matches the final design of the site created in project 1.

The evaluation criteria for this part of project 2 is based on:

Deliverables

  • Individual, validated HTML documents for each page of your site, linked together
  • Single, validated CSS file for all pages of your site
  • CSS structure and code reuse (e.g. are you duplicating large blocks of CSS or writing generic, shared classes and applying specific overrides)
  • Images are sized appropriately
  • Images use appropriate formats (JPG, PNG, SVG, GIF)
  • Your site folder structure is appropriately organized with CSS, images, and sub pages in their own folders
  • There are no broken images on any of your pages (this includes 403 Forbidden errors)
  • There are no broken links on any of your pages
  • How well the site matches the final design of the site created in project 1

Submit according to the class work submission process.