HCDE Week 03

Homework review

Due today at 9 am: Assignment 2: creating your first web page

Take a few minutes and look at fellow student implementation of the three code snippets!

  1. Aastha | https://staff.washington.edu/aastha11/ | https://staff.washington.edu/aastha11/hcde532/ (empty, homework missing)
  2. Alice | https://students.washington.edu/uwalice/hcde532/
  3. Chun-Fang (Jenni) | https://students.washington.edu/jennicf/hcde532 (404)
  4. David | https://students.washington.edu/molinero/hcde532/
  5. Jake | https://students.washington.edu/grhodes/hcde532/
  6. Jihoon |  http://students.washington.edu/jihoons/hcd532/
  7. Julie |  https://students.washington.edu/jstu2/hcde532/ (homework up one level)
  8. Laura | https://students.washington.edu/lmeise/hcde532/
  9. Pierre | https://staff.washington.edu/pdelcour/hcde532/
  10. Putri | http://staff.washington.edu/putrih/hcde532/
  11. Rachel | https://students.washington.edu/xukun/hcde532/
  12. Thana-On  | https://students.washington.edu/thanaon/hcde532/
  13. Tucker |  https://students.washington.edu/tstandle/hcde532/
  14. Yaonan (Natalie) | https://students.washington.edu/yaonah/hcde532/
  15. Ziyan |  https://students.washington.edu/ziyan053/hcde532/


My demo page with code below




Review CSS rule

There are four main parts to a style rule:

  1. Selector: which tag the rule affects
  2. Declaration: what happens when the rule is applied; composed of property/value pairs
  3. Property: what will be affected
  4. Value: how it is affected



We’ll cover classes and IDs next week.


Lecture: Using Images, Box Model

  • Box Model
    • Important to understand the “air” around any type of content
  • Using Images
    • Best practices, how to reference
    • Sourcing: creative commons licensing (Flickr, CC.org, Google, etc).

Exercise: Page layout / adding images

1. Create an images folder on the server

Images should live in their own folder (or folders).

  1. Open Filezilla
  2. Create a new folder, images, at the same level as your hcde532 folder (note case)
    image folder


2. Find a photo you like


3. Upload the photo to the images directory


4. Copy this code, put it between the body tags on your index.html page, change the name to class-demo.html and upload the page into your hcde532 directory. Do the images work?



Comments are closed.