- 1 Class Schedule
- 2 Student portfolio sites
- 3 Contact the instructor
- 4 Course Deliverables
- 4.1 In-Class Work
- 4.2 Assignments
- 4.3 Projects
- 4.4 Extra Credit
- 5 Course Resources
- 7 Suggested reading
- Class 01 (2011-09-06): Introduction
- Class 02 (2011-09-13): Programming Syntax and Concepts
- Class 03 (2011-09-20): DOM Scripting, Basic Functions and Events
- Class 04 (2011-09-27): Objects, Arrays, & Loops
- Class 05 (2011-10-04): Libraries, jQuery
- Class 06 (2011-10-11): Core Methods & jQuery examples
- Class 07 (2011-10-18): Project 1 Critique
- Class 08 (2011-10-25): Midterm Exam
- Class 09 (2011-11-01): AJAX and JSON
- Class 10 (2011-11-08): Client Storage, location hash
- Class 11 (2011-11-15): Object Oriented Programming
- Class 12 (2011-11-22): Scripting the Canvas
- Class 13 (2011-11-29): Best Practices
- Class 14 (2011-12-06): Project 2 Critique
- Class 15 (2011-12-13): Final Exam
Student portfolio sites
Contact the instructor
10 points each
Course Portfolio Site:
Make a default.htm or index.htm file in that folder.
With that htm file, make a simple one page website in HTML5 to list all of your work for this class.
I should be able to find your portfolio by going to:
I recommend putting in place holder links for assignments so you know what how much text will be there when it's full. It's going to be full, right? Everyone is going to do ALL their homework?
Get the structure done first, then spice it up with some CSS3.
Make some variables.
Preform some operations on those variables (addition, multiplication, concatenation)
Output those variables to the console at various points in the operations
Conditional Code Testing:
Take user input from a form field.
Compare that input to a variable
Display different output based on the condition
Feel good bonus: do it again with a switch statement
Events and functions:
Create an element (of your choice on the page) that changes it's appearance based on onMouseOver and onMouseOut events
Objects, arrays and loops:
Think of a collection of things that can be organized into an array of objects.
Create the array of objects, and include at least one property that differentiates the objects
Create a for loop to go though the array, and make a list item for each item in the array.
Have the loop check the differentiating property of the current item, and append the list item to an appropriate list on the page.
Feel good bonus: attach an event handler to the list items, that will display additional information about the list item when clicked.
Create an element (of your choice) on the page that changes it's appearance based on jQuery mouse events.
Use jQuery code for selecting the element, and for applying it's appearance changes too.
Using the in class example, make a twitter feed.
Find an interesting user to pull data in from.
Experiment and see if you can pull in by a hashtag instead of by username
Do something using browser cookies
Display a box and some text in the canvas tag.
40 points each
Make an HTML page that has no content.
- Your legal name (what I'll see on the class roster)
- The name you prefer to be called (if you don't like your legal name, or if it's long or confusing for me)
- Any prior programming classes or experience you have (remember, html/css is not programing
- Any prior Web Development or Web Design experience you have
Conditional Statements: Choose your own adventure
Create a webpage that displays some options to the user.
Give the user AT LEAST 3 opportunities to make a selection.
Every opportunity to select an option, must include AT LEAST two options to pick from.
I would do this one of two ways:
- Make all the display elements with HTML and put in the default content.
- On form submission, run the selected value through a switch statement
- Have the switch statement overwrite the default values for the display elements based on what option was selected
- Make a div for each branch of the adventure
- Hide each all divs except the first branch by default
- Use the switch to hide all divs and show the appropriate one
Functions, Events, and the DOM: Visually compelling experimental experience
Create a webpage with at least 5 elements (but up to as many as you want)
(also, I think using absolute positioning and z-index to overlap the elements on top of each-other will make this a cooler experience)
The elements could have images in them, or they could just be colored blocks on the page.
Have the elements respond to events by altering their appearance (or even the appearance of other elements on the page instead of their own)
Experiment with different DOM elements to see what visual effects you can create.
If moving elements around and manipulating their basic CSS properties isn't exciting enough, then go read up on CSS3 visual effects, transitions, and transforms. Have the events add additional classes to elements that implement some CSS3 eye candy or animation.
find at least 5 images, and create thumbnails for each.
Create an array of objects, where each array item has properties for the path to both the thumbnail image, and the full-size image.
Make a for loop that goes though each item in the array. The loop should do the following on each iteration:
- make a list item
- make an anchor
- make an image
- set the image src attribute to the image path of the thumbnail image
- set anchor href attribute to the image path of the full-sized image
- append the image into the anchor
- append the anchor into the list item
- append the list item into a pre-existing list on the page
- add an onclick even listener to the anchor
Have the event triggered by the onclick event for each list item prevent the default behavior.
Instead, have it modify the src value of an image tag on the page, and replace it with the href value from the anchor.
jQuery: Visually compelling experimental experience
Re-create something similar to Assignment 3 from scratch.
Use loops now if appropriate
More importantly, use jQuery everywhere you can.
If you already used CSS3 transitions, try creating the same effects in jQuery. (not nearly as clean, but now it will work in browsers all the way back to IE6!)
See how much better you can make the experience, and how much less code you can do it in.
AJAX and JSON: flikr API project
Get the flikr example working and expand on it.
Look at all the other information returned by the API and think of something interesting to do with it.
Pull in from a mix of tags, make a gallery, allow the user to enter keywords. Mix and match user selected keywords and your own preselected keywords.
History management: adding state
Go back to your assignment for the non-linear narrative or for the photo gallery.
Make a new copy of this assignment (don't overwrite your old one) and add location.has code to make it so you can skip to a specific image with the URL string.
Bonus points for making the browsers back/forward buttons work with the experience.
Graphics: 2D drawing
Pick a demo of the canvas tag from Josh Marinacci's page and build it.
Alternatively, explore resources for doing similar things with SVG. My favorite tool is Raphaël
125 points each
Progressive Enhancement / Graceful Degradation:
Proposal due: 2011-09-27
Finished Project Due: 2011-10-18
Build a fully functional website in HTML & CSS on a subject that you find interesting.
Any (classroom appropriate) subject you like. Games, Music, TV shows, Power tools, Stamps, Useless USB peripherals, etc.
You must either use original content, or provide written permission to use content you did not create.
Where would it be a better experience to display additional content with out a page refresh?
AJAX and WebServices: working with data
Deliverable 1 due: 2011-11-01
- Collect a list of apis
Deliverable 2 due: 2011-11-08
- see which APIs from your list you can successfully get data back from. Either log the data to the console, or write it to the page
Deliverable 3 due: 2011-11-15
- Now that you are successfully collecting data from an API, write a full proposal on the project you want to build using that data
Deliverable 4 due: 2011-11-15
- Finish as much as the hard/unknown parts of the code as possible. You can work on making things look nice and display right later, but get the core functionality done first.
- Next week is Thanksgiving, and as much as you tell yourself you're going to catch up on stuff then, you know you're not actually going to get anything done, so the more you can get done now the better.
Finished Project Due: 2011-12-06
Build a web page that pulls in data to the page asynchronously.
I imagine most students will want to pull data from a public API, and will have to pull in JSONP to accomplish this.
Alternatively, you can write your own web service if you have the php / asp.net chops
As long as you pull in data with out refreshing the page, you will fulfill the project requirements, but if you want to make a really cool project, pull in data from multiple sources, and create a mash-up
If you need extra credit I will allow you to update Project 1, and up to one of the Assignments.
The amount of points you are actually awarded will reflect the amount of effort you put into the improvements.
Make a copy of your original experience to update, do not overwrite the current experience in your portfolio.
Update Project 1
possible points: 75
Update any one of the 8 assignments
possible points: 20
- Aptana (free, built on top of eclipse)
For OS X
Tools for Firefox
References and Tutorials
- Dive Into HTML5 (an online book about HTML5)
Web Development Toolbox
Class 01 (2011-09-06): Introduction
Class 02 (2011-09-13): Programming Syntax and Concepts
- DOM Scripting: Chapter 2
- the Definitive Guide: Chapters 2, 3, 4, & 5.4
Class 03 (2011-09-20): Functions and Events
- the Definitive Guide: Chapters 15, 16, 16
- DOM properties and methods
- adding and removing classes from an element
- css3 for web designers