Homework #2

This homework is just to get you thinking about how various web sites look. It's simple and there is no right or wrong answer to anything.


But that doesn't mean that it'll be easy. So don't get your hopes up :-P


The purpose of this homework is to make you consciously aware of what it exactly is that websites do right. That way, when you make your own websites you will be able to emulate some of these features to make your own site better/cooler.

What to Do

Think about 5 web sites that you visit often or have seen before. Specifically, think about web sites which look "cool" or "interesting" or "modern" etc. Don't worry about which websites have good/decent content, only focus on how they look and how well they display the information that they do have.


A good website might be one which lets the user quickly and easily access what they want. A good website might also be one which just looks really nice (and not like a standard boring website).


Focus (view the HTML code and the page) on how they do what they do. Things to think about might include:

  1. the site's use of color
  2. the site's display of navigation links
  3. the site's use of white space to help separate content
  4. the site's use of images to draw attention to various areas or to simply add 'texture' to it
  5. little touches (like its favicon or having a little miniature PDF icon beside links to PDF files)
  6. etc.


What to Turn In

You should turn into me a document with a listing of 5 websites that you particularly like. This may be on pen & paper, or in an electronic document. Regardless of how you choose to submit it, it must be in full sentence form (exceptions may be made in special cases, like a broken arm).

Under each listing, in at least 3 full sentences explain what you like about the site (each sentence should be at least 1 thing you like about it). Here's an example for 1 entry:


http://consumerist.com/ This site's postings have large, creative pictures associated with them which draw in my attention. The use of grey on the sidebars blends in with the mostly black and white content and doesn't distract the viewer from the content. Comments on each posting can even include embedded Youtube videos, so that related videos can be viewed immediately without having to navigate to another site.


Then, for three of the sites, look at the HTML and/or CSS and briefly explain how they achieve an effect that you like. If the CSS is not stored inside of the page like the pages we've worked on, then look for a <link rel="stylesheet" … /> tag. You should see it reference a file with a .css extension. Combine that URL with the URL of the current page. For example, if the page you are viewing is http://www.domain.ext/folder/otherfolder/file.html and the link tag makes reference to ../../blah.css then type http://www.domain.ext/folder/otherfolder/../../blah.css into your browser to view the CSS. Some pages will give the full path to the CSS that they use (e.g., the link tag will mention http://www.domain.ext/blah.css). In that case, just copy and paste that into your browser to see the CSS.

If you're having trouble viewing the CSS of a certain page, ask me for help. Or, you can go to the CSS Validator page and paste in the link to the website you are viewing. Assuming that the site mostly follows XHTML and CSS standards, you should be able to see a listing of the CSS that the page uses (look for the section titled, "Valid CSS information").

Not all effects will require looking at the CSS to understand.


The following are websites that you may not use:


Due Date

Due on Thursday, October 8th by the beginning of class. These don't really have a right/wrong answer to them, but I do expect some serious thought on your part. They'll be graded as follows:

Grading: Criteria:
100% credit Full sentence thoughtful analysis (on 5 different sites) and 3 explanations of how 3 different sites do a specific effect/look
50% credit Decently thoughtful analysis, hastily done (lack of full sentences).
0% credit No attempt.