Project 1

From Cmsc434_f11
Jump to: navigation, search

Project 1. Personal Website

With the first homework, we want you to learn / refresh basic HTML and CSS knowledge. If you don't, start reading tutorials listed in the resource page and also introductory presentation.


  1. You can choose any contents to put in, however, we have a list of required components below.
    • First column
      • Name and your picture
    • Pick two categories of additional contents in the list below and put them into your second and third column.
      • professional skills and experiences
      • hobby, interests
      • family
      • pet
      • friends
      • anything else you feel comfortable to show
  2. We also have technical requirements
    • You cannot use any commercial service or automated framework such as WordPress or Google blog. However, it is fine to use javascript plug-in (e.g. JQuery, dojo, image gallery, Youtube API, twitter feed etc) or downloaded (or copy-pasted) css and js files.
    • Use JavaScript and CSS to enable font size changes from small to medium to large (you can design the interface for this as you like). Make sure that your title or other non-content text sizes should not change. (hint. px is absolute size, while em is relative)
      • The first tutorial could not cover JavaScript basic for the time limit. But changing font size is a relatively simple task, thus you can use a JavaScript snippet available on the internet. I googled with 'javascript font size change' and found a lot of examples. For example, [1] [2]. But notice that our requirement is to enable user to choose one of three static font sizes, not increase / decrease font size infinitely.
    • Use CSS to make your layout automatically adjust itself for any browser width (from 600px to 1600px). Keeping the margin of x(your design choice) pixels on left and right, however, your text width should dynamically adjust for different window widths. (Hint. this layout technique is called three column liquid/fluid layout which is a holy grail of CSS technique)
    • Use image pattern on background. You can find one or create own tile image at
    • TA will test your website on Internet Explorer 8, Firefox(6) and Chrome(13). Minor differences are okay, but significant flaws will lower your score. (for IE8, setting minimum width of the browser is difficult. I would not cut your point for that.)


  • Here is a few screenshots of TA's example website - Tak Project1


Before 12:00pm 9/26/2011,

  • send a zip file of the entire folder to TA email( __ you don't need to host your web page.
  • Post a wiki page that contains screenshots of your website on Project_1_gallery  : Your wiki page title is same as the critique (e.g TY Project1)

Evaluation Criteria

The grading for this assignment will be based on: (total 10pts)

  • Is your website completely working and polished? 0(Not working), 1(Serious flaw), 3(Working but small flaws), 6pts(Complete)
  • Does your website have all the required contents? 0(No) ~ 2pts(Yes)
  • Does your website satisfy the technical requirements? 0(No) ~ 2pts(Yes)