Project 2

Students will develop the HTML and CSS for a multi-page website based on the design of project 1.

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 (9%)

Due week 8: February 28

Use your knowledge of HTML to format all of your site 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 each page of your site (send a link for each HTML file to your instructor)

Submit according to the class work submission process.

Project 2B: CSS (9%)

Due week 9: March 7

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 your 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 each page of your site (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 2C: Box Model (9%)

Continuing from project 2B (make a copy of project 2B as your starting point), use your knowledge of CSS box model to add margins, padding, borders and dimensions to elements. Use floats to position key elements next to each other.

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 each page of your site (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 (9%)

Continuing from project 2C (make a copy of project 2C as your starting point), add images, including background images, to all pages. Use links to connect all the pages of your site 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)
  • 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
  • There are no broken images on any of your pages
  • There are no broken links on any of your pages
  • Error free syntax/code – always validate your code (HTML and CSS) before submission

Deliverables

  • Individual, validated HTML documents for each page of your site, linked together
  • 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 (9%)

Continuing from project 2D (make a copy of project 2D as your starting point), add any final elements to your site (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
  • All images in proper file format, size appropriately
  • Proper folder structure and hierarchy
  • Feedback received from instructor and exercise B considered and responded to
  • How well the site matches the final design of the site created in project 1

Submit according to the class work submission process.