Current course:

  [Exercise 1]  [Exercise 2]  [Exercise 3]  [Exercise 4]  [Exercise 5]  [Exercise 6]  [Exercise 7]  [Exercise 8]

Exercise 1:


DUE:
Section 1:
Wed. Jan 13th
Section 3: Thurs. Jan 14th

Find 5 websites with well designed interfaces that were created using HTML and CSS and email the URLs to the teacher so we can make a compilation of them for a critique.


Do not submit sites designed in Flash. Flash sites are quite different in that they can be fully animated and have more flexibility in the design.


Check to see if the site was created using Flash by going to the Browser menu: View - View Source. Then do a CTL - F and type .swf and see if there are any SWF (Flash files) attached to the HTML page.


Results of Exercise 1:

Section 1:

Marsha Kyle
http://www.consumerist.com http://www.thepeachdesign.com/
Assoc. of Medical illustrators http://www.ami.org/ http://www.icreondesignstudio.com/
http://www.time.com http://2ammedia.co.uk/
http://www.realclearpolitics.com http://tavshan.com/
https://www.timeclockonline.com/ http://www.canyoncreekonline.com/
   
Jesse Dominique
http://nerdfighters.ning.com/ http://www.emotionslive.co.uk/index.html
http://www.questionablecontent.net/ http://www.dadan.net/
http://joecartoon.atom.com/ http://www.ndesign-studio.com/
http://www.pvponline.com/ http://tnvacation.com/trails/
http://www.newgrounds.com/ http://www.centrum-sofie.cz/
   
Nathan Chris
http://svitart.n-tek.ca/home.php http://ae.tutsplus.com/
http://designforfun.com/site/portfolio.php http://www.cgw.com/
http://tekken.namco.com/game/ http://www.worth1000.com/
(Flash) http://www.daybreakersmovie.com/site/index.html http://www.behance.net
http://www.concepthue.com/index.html http://www.videocopilot.net
   
Olivia Rachael
http://catprog.org/Story/ChapterView/1/1/Any/NoForm/NoFull.html http://www.culinariafoodandwine.com/index.html
http://tjerngren.net/cgi-tjerngren/floppzcg/CGI?english?0 http://www.drewwohlberg.com/
http://www.users.globalnet.co.uk/~loxias/odchoice.htm http://www.testlab2.com/en/
http://www.suspicion-of-murder.com/crime/e/book11.htm http://www.getmefast.com/
http://www.namelessforest.com/ http://pixelbot.ro/
  http://www.bradcolbow.com/
   
Matt Michelle
http://www.uxmag.com/ http://www.martinmurphy.ca/
http://dojotoolkit.org/ http://aegis-strife.net/
http://www.ibuildings.co.uk/ http://personal.bgsu.edu/~sburns/index.html
http://patterntap.com/ http://www.narfstuff.co.uk/
http://squaredeye.com/ http://www.klinkov.com/
   
Colleen Dan
http://www.playalterego.com/alterego (Flash) http://na.finalfantasyxiv.com/
http://www.eddidit.com/ (Flash) http://www.befunky.com/create/#/create
http://dresdencodak.com/ http://melissahie.com/
http://www.spoongraphics.co.uk/ (Flash) http://zoomquilt2.madmindworx.com/zoomquilt2.swf
http://www.dawghousedesignstudio.com/ (Flash) http://www.feedthehead.net/
   
Trevor Tim
http://www.archann.net/ (Flash) http://www.theircircularlife.it/
http://www.luigibormioli.com/ (Flash) http://www.themixhead.com/
http://www.barackobama.com/ (Flash) http://www.bioshockgame.com/
http://www.yoshimotobanana.com/index_e.html (Flash) http://www.meomi.com/
http://99designs.com/ (Flash) http://www.themixhead.com/
   
Tina  
   
   
   
   
   


[TOP]


Exercise 2:


DUE:
Section 1: Wed. Jan 27th
Section 3: Thurs. Jan 21


Create the following Mondrian image using the TABLE tags. Use embedded CSS to color the cells. For a more advanced challenge, make the black lines actual rows and columns in the table rather than relying on the table border.

Exercise 2 image

[TOP]


Exercise 3:


DUE:
Section 1: Mon. Feb 1
Section 3: Thurs. Jan 28

Slice up the image of the design of your interface. Create a table to contain the pieces. Make sure all your table cells have the correct height and width. DO NOT put an image in the table cell unless it is necessary (don't chop up blank space in your design and put that in a table).

All images need height, width and ALT information.

Use CSS to adjust the margins, background image of the page, and font style.

Requirements:
1 page of your story created using CSS and HTML.

[TOP]


Exercise 4:


DUE:
TBA

[TOP]


Exercise 5:


DUE:
TBA

[TOP]


Exercise 6:


DUE:
TBA

[TOP]


Exercise 7:


DUE:
TBA

[TOP]


Exercise 8:


DUE:
TBA

[TOP]