HTML Project

Create your own website by writing HTML / CSS code.

HTML Requirements:

  • Site has a purpose / theme; it’s not a bunch of random junk
  • At least 3 HTML pages, and all three are linked together using <a> tags
  • All three pages include some form of content that fits the theme of the site
  • Include images using <img> tags
  • Include list(s) or table(s) or both.
  • Include CSS style sheet(s) to modify the styles of each page.

Possible purposes / themes: 

    • Portfolio of your CSP work
    • Provide content specific to one of your interests
    • Blog (must choose a topic and create blog posts in this case)
    • Info site for an organization or team
    • Online store website (appropriately simplified)

Two standards will be assessed:
Computational Artifact: website quality
Web: ability to write HTML pages

Computational Artifact Grading

L4:
Site is useful, informative, interesting.
Contains enough content to be worth a visit.
The styles look quite good. Good choice of colors, fonts, borders, layouts, images, etc
The site content and layout and styles are creative.
Site contains some interesting features that make the page interactive, such as buttons that run JavaScript code.

L3:
Site looks nice.
Site has adequate content.
The theme of the content is appropriate and has a use. It should be appropriate for polite company.
Site includes a nice selection of CSS style settings that look decent together.

L2:
Lacking in content.
Visual appeal of the site needs work.

L1:
HTML file(s) created.
HTML tags used to layout some content.
Some CSS settings have been set.

Web Standard Proficiency Scale

Level 4:
Continued working and adding content and improvements after basic requirements were met.
Includes everything required for level 3.
Some possibilities to keep going:
Has the same menu in every page, and it looks good and functions properly.
Code arranged sensibly. All styles are separated into an external CSS stylesheet.
Use classes to define styles for different contexts.
One stylesheet works well for multiple pages.
Uses HTML tags other than the ones used in class, and uses them in an appropriate context.
Uses div tags to separate the document into functional sections
Formats a table or list to look nice.
Add an input <form> with some interesting input elements. It will not be able to do anything with the entered data yet, but it can at least look good.

Include <div> and <span> tags.
Attributes (options) set in some tags

L3:
Includes all of the following types of tags:
Types of HTML tags included:
<doctype>
<html>
<head>
<body>
<p> (paragraph)
<a> (hyperlink)
One or both of table (<table>, <tr>, <td>) and/or list(<ol>, <ul>, <li>)
<img> (image)

Includes several different style modifications.
Possible examples:
Color of background / paragraph / border / table heading / etc
Text color / font / size / alignment
Size of element: width, height, margin size, padding size
Add borders

Site has multiple pages
Pages are all linked to each other – has at least a simple list of links to function as a menu
Includes doctype, head, and body sections

L2:
Uses some of the required tags but is missing some others
Has at least minor styles defined.
Page does not necessarily look good.
Uses a few different HTML tags.

L1:
Includes some of the Level 3 requirements but very significant chunks are missing.