Lab Assignment

This lab’s assignment is to begin a real-world project so that you can get started making web pages with purposeful layouts and style. Below are project ideas along with suggestions about how to get started. The first step should be to take out a sheet of paper and begin drawing what you want your first web page to look like. From there you can begin to think about what CSS techniques you might apply to achieve this effect. Please also remember to use HTML that means what you intend, not HTML that necessarily provides you with an easy way to produce your desired end-product.

Project Ideas

Sell a product or service

• Make up a product or service that you think would be useful to others. Plan a website that would advertise this product or service and provide details about the features and possibly pricing.
• Notes
  • Remember your audience. Decide to whom you might market your product— does your layout effectively engage that audience?
  • Think carefully about what you want your front page to look like. Have it capture attention while also being informative.
• Example sites
  • ZenDesk
  • BaseCamp
  • AWP Express
  • Analog
  • Yellow Bird Project

Advertise for an event

• Make up an event (or think of a real one) that might need advertising. Plan a website that would attract potential visitors.
• Notes
  • As with the previous example, consider your audience and which aspects of the event (or descriptions) might appeal to them
  • Consider what color schemes or layouts might best fit your event and its content.
• Example sites
  • Vegas Uncorked

Design a blog

• Plan a layout for a personal or business blog that you might actually end up using (or one that you actually do!).
• Notes
  • Consider your audience. It is perfectly acceptable for a blog to appeal to a certain sector of the mainstream populations, especially if it is a personal blog.
  • With a blog, content is king. Consider ways to effectively present the text of your entries and collect feedback from users.
• Example sites
  • A List Apart
  • Engadget
  • Ruby on Rails weblog
  • Web Inspire

Redesign Facebook

• As you may already know, Facebook is a very popular destination online, used by several hundred million users. Facebook has gone through several changes to alter the presentation of data. What would you change about the site to make it more user-friendly?
• Notes
  • To begin, you might want to prototype a design with Firebug and become familiar with the HTML that Facebook uses. From there you can write CSS that might alter the layout.
  • It will likely be best to focus on one aspect of the site, learn how it works, and go from there.