` CS 5610/4550

Web Development Home


This page updated on

The purpose of this page is to suggest guidelines for student sites that will make them significantly easier to view and grade. This will allow each student the opportunity to present his/her work in the best light.

The Home Page


One thing that would be really helpful on each home page would be a small photo of yourself such as I have done on this page.

This will enable me to connect names with faces.

The home page of your site should not be the main page of your final project. The purpose of the home page is primarily navigation, that is, you should have links to important information. Such links should use the idiom:

<a href="..." target="_blank">link text</a>

Using this idiom means that the home page remains available even when the user clicks one of the links.

Here is a list of some links that should definitely be provided on the home page:

  • Source Server
  • Statistics Server
  • Site Statistics Server
  • Search Server
  • FileList
  • AutoFile
  • Images
  • Blog
  • Experiments
  • Documentation
  • Resources
  • Final Project

Note that the last 4 links are not built into the starter site in the Essential Files. You must create them when you have created the areas to which these links will point.

If I need a “secret” such as a username and password that information should either be on the site or should be sent to me in an e-mail with your name as the subject line.

The Story Utility

You will find that the Story Utility is extremely helpful for organizing both experiments and documentation.

As of 2013, it is mandatory to use the Story Utility to organize your experiments and documentation. With so many students in the course, it will be impossible to grade experiments and examine documentation unless these items are presented using the Story Utility.


The code on your site must primarily be your own code.

If you use or adapt code of others then this must be credited in:

  • The code itself
  • The blog
  • The documentation

Your code should be elegant, beautiful, and correct.

If you see that your code is a mess either in individual files or in terms of overall structure then consult with me! Do this with time to spare.

By consult, I mean send an e-mail explaining the problem and listing the files involved. If I can help by e-mail, I will. If not, I will arrange a meeting with you.

You may use the following Javascript libraries:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us

jQuery is by far the most important library.

If you find another useful library, let me know and also blog it.

Cascading Style Sheets

The look-and-feel of your site must be your own design.

I absolutely do not want you to go to a “template farm” where you can download an entire template for a site!

It is fine to use the style sheets on my site since these define useful building blocks and not an entire site design.

If you use jQuery UI or script.aculo.us then you will get a substantial amount of CSS for free. I will permit this since these libraries are industry standards.


As far as possible, each individual experiment page should be self-documenting. I should not need to go very far to find any of the following:

  • Explanations of what the experiment tests
  • Links to source of any kind (.aspx, .cs, .js, .css).

Make the explanations and links available on the page and keep in mind the idiom:

<a href="..." target="_blank">link text</a>

I have attempted to model this in the recent experiments that I have posted.

Experiments in CSS

See: Experiments in CSS

This suite of experiments is organized as a story.

Each experiment is given first and then its source follows in subsequent slides.

The very first experiment in the suite is quite interesting in its structure and is found here.

This page uses a repeated pattern:

  • discussion
  • experiment
  • possibly further discussion

You might find this pattern useful for some of your experiments, especially, if the experiments are related and if the presence of one experiment does not impact another experiment.

Fluid Layout Experiments

See: Fluid Layout Experiments

This suite of experiments is also organized as a story but it starts with a brief introductory page that provides an overview and a link to the story.

These experiments use the following pattern:

  • experiment
  • discussion
  • links to view source
  • possibly links to view related files

Each experiment is in a separate page because one experiment will interfere with another experiment.

Here are some excellent guidelines to draw from the Fluid Layout experiments.

You will see the following features. Please imitate these features.

  • A suite of experiments should be reached through a simple HTML page that provides a brief explanation and a link to the actual experiments as organized by the Story Utility.
  • The first page in the experiment story should be a “What is Next?” page that outlines the rest of the story.
  • The “What is Next?” page is generated from the same text file used to define the story. You do not need to do extra work.
  • The “What is Next?” page is important for the grading process because we can simply copy the page into the text file used to accumulate grading notes. If the “What is Next?” page is missing, your grade will go down.
  • Thereafter, each page in the story is an experiment except the last page which shows the text file for the story.
  • Each experiment should consist of at least 3 parts that are separated by horizontal rules.
    • Part 1: The experiment itself
    • Part 2: An explanation of the experiment
    • Part 3: Links to all relevant source files. These files must open in a new tab.
    It is important to see the experiment and its explanation on the same page so we may grade efficiently. Avoid putting the explanation on a different web page.
  • As mentioned, the final page in the story is the story file itself. This allows us to see the links to the assorted experiments in a single place.

These examples show that the Story Utility is quite useful in organizing experiments.


Documentation is essential for your site. This documentation must be beautifully written and complete.

Your blog is part of your documentation but by no means is it all of your documentation.

Given the number of students in Web Development, you must use the documentation to explain what you have done and why it is wonderful.

If you do good things but your documentation is poor or even missing then you will get a poor grade. What else can I do? Of course, if you don't do much, expect a poor grade also.

Finally, you are not doing this web work just for the course. Many student use their sites in future job interviews to show the quality of their thinking and their work. This course is the place to build your job portfolio.

Note that the Story Utility is quite useful in organizing documentation.


If you use resources from other sites, you must document and give credit for these resources. This includes:

  • Documents and prose
  • Data including:
    • text data
    • XML data
  • Photos
  • Videos
  • Music
  • Sound

Anything that you use you must credit.

I need to know where everything that you have not created is coming from.

It is especially irritating to see media resources (photos, videos, music, sound) on a student site that were clearly not created by the student but for which there is no documented credit. Failing to give proper credit is a sure way to get a lower grade.

For copyright reasons, it is far better to provide links to external resources instead of downloading them to your site. This avoids legal complaints.

Final Project

Your final project should be interesting and be a pleasure to use. I should not have to do significant data entry just to test your site. I should not have to search the web for related resources just to test your site. Put everything I need at my fingertips.