Web Site Project (/90)
This project is the major project for the Web Design Unit of Information Technology 9/10.
It incorporates portions of the multimedia and electronic communications divisions of the ICT curriculum.
Assignment Description
Select a topic that is of interest to you. For example, a type of car, a sports team, a company, a musician, a product, a hobby or sport - these are just a few possibilities. Check out Student Examples for more ideas. Gather information and content for your site. Plan the structure of the site using a flow chart. Design and build
the site. You will be given about 3 weeks to complete this assignment.
Steps to Designing a Website
- Pick a topic. Sign up.
- Pick the subtopics
- Flow chart it. Get a checkmark from Ms. Wear.
- Pick a design.
- Pick a color scheme.
- Create a template. Show it to Ms. Wear.
- Validate code
- Write your content.
- Get your pictures.
- Put into site.
- Validate code
Requirements
The requirements are fairly flexible. You should put about 20 hours into the design and creation of the site. (This does NOT include time spent creating images and writing content for your
site). The project is to create a web "site", not a "page." I suggest your page include at least six pages (this is very flexible) which might include a home page, a credits page, and a minimum of 4
content pages. You may also choose to include an "about me" page.
Milestones (/15)
Milestones are a common tactic used in development environments, inluding and especially large software development environments, to ensure and monitor steady development of a product
and accountability.
Milestone 1 (/5) Due in class Friday Dec 15 .
Given the large and graphical nature of this project, the following must be presented discussed with the teacher for Milestone 1:
- Flow Chart or Story Board (get a check mark from Ms. Wear)

- 300 words, written by you, for content, organized into
subtopics.
- 4 images you plan on using for your website, (include a link to each source, and a link to terms of use (for the credits page))
Sample Image for Horse Site
Milestone 2 (/5) Due at beginning of Thursday Dec 21.
Students must present and hand in the following for Milestone 2:
- Template layout completed using CSS and div tags with borders. It might look something like one of these:
- Template has the following additions:
- beautified with some CSS
- colour scheme is mostly applied
- logo/banner/dominant image with text (actual content or lorem ipsum) is in the template
- Color Scheme (screen shot and color codes). Places to find color schemes:

- 900 words, written by you, for content, organized into
four subtopics.
- 8 images you plan on using for your website, (include a link to each source, and a link to terms of use (for the credits page))
Sample Image for Horse Site
Milestone 3 (/5) Due at the beginning of class Wednesday January 10.
Students must present and hand in the following for Milestone 3:
- Home page template is complete and named index.html
- Content Template is complete
- beautified with CSS
- colour scheme is applied
- banner is in the template
- unwanted borders are deleted
- Lorem Ipsum 'dummy text' where appropriate to show how text looks in page
- the navigation bar has all links working to other original content pages
- HTML and CSS validate
- 1200 words, written by you, for content, organized into
four subtopics.
- at least 1 of the content pages is complete with all images and text (this does not include the home page or the credits page)
Final Project Due Monday Jan 15.
Evaluation (/75)
Copyright Rules (20)
- no copyrights are broken. All images and text are original, in the public domain, released under a licensce that
allows you to use it on your website or are acquired with
permission from the copyright owner.
You must include a credits page which contains:
- If you created all the content on the website yourself, your credits page will NailArt credits or Skippers credits.
- If you used images that you did not take, your credits page must contain
the following for EACH IMAGE:
- A working link to the html page that displays the image
- AND a working link to the image license OR proof of permission (like an email from the photographer granting your permission).
and your credits page might look like Dance credit
or Joker's credits.
For free images, check out:
You may wish to declare the "terms of use" for original material on your website. Go to
Creative Commons Canada to
create a Terms Of Use License.
Content and Organization (20)
A great website has great content. It should be interesting, applicable to the topic of the site, well organized, well written. Content is usually a combination of words and applicable images.
- It must be organized in a manner that is easy to navigate and has a natural flow.
- Always use a flow chart to design your site. Write your own content in your own words unless you are quoting another source, in which case, the source must be provided with the quote.
- No spelling or grammatical errors.
- Use a spell checker and a grammar checker (copy your text into Word if you must!).
- A minimum of 4 pages of significant content is required. Significant content is at least 300 words and 2 or more related images.
Navigation, Byte Size and Functionality(10)
- Navigation:
- All sites should be easy for the user to navigate through.
- Has a consistent navigation bar on all pages.
- Include the use of: "home" links, "back to top" links, local anchors etc.
- Main page must be called index.html.
- Byte Size:
- Images should be as compressed as possible, try to keep all small images under 50 kB, large images under 120 kB
- The total site under 2 MB (exceptions will be made for art and photography portfolios).
- Functionality:
- All links and images must work.
- Sites must work and function in multiple browsers, window sizes and resolutions.
Code(10)
Although browsers can be very forgiving when tags are out of order or forgotten, a quality site has clean, accurate, complete, and
easy-to-read code.
- The quality of your HTML and CSS.
- There is only 1 CSS file shared by all the HTML pages.
- All HTML code should be in lower case letters and validate at the HTML5 validator
- All CSS must validate at CSS validator
Graphical Design and Appearance(10)
Create a design template that is used as the basis for all the pages in your website.
For this project, no design applications (such as DreamWeaver or online website generators), or templates designed by someone else, may be used.
- use of CSS to control layout
- use of CSS to beautify
- color choices
- use of original and borrowed graphics
- overall theme and feel of site (is it appropriate to the content?)
- organization of graphics, scrolling, font size etc.
- look good in multiple browsers, window sizes and resolutions
Personal Effort(5)
- how much care, energy and planning was put into the site?