Week 1: Introductions

Install necessary software

Web hosting space setup

Upload an introductory page about yourself - post to class wiki

Week 2-4: Project 1 - "jQuery Powered Dictionary List"

Dictionary terms from chapters 1-3 of jQuery Novice to Ninja

  • definte all terms provided
  • copying and pasting acceptable - remember to cite the source

Code must validate

jQuery to enhance the asthetics and functionality of the page

Extra Credit

  • Using CSS, get the mouse pointer to change to a finger when you hover over the H2 chapter headers
  • Make the dictionary list page look good in IE 7 and above
  • Get a text shadow effect to work in IE


  • HTML dictionary list markup
  • CSS text-shadow function
  • basic jQuery syntax
  • targeting DOM elements with jQuery
  • CSS Reset
  • Web font legibility topics
  • extending jQuery's functionality with 3rd party plugins and XHTML 1.0 Strict Considerations

Week 5: Project 2 - "Picture Viewer Widget" - Widget 1

Week 6: Project 2 - "Picture Viewer Widget" - Widget 2

jQuery implementation of a picture viewer

Create a series of div containers each with a unique background

jQuery will be used to show and hide the div containers according to the visitor's selection


  • using jQuery's animation function
  • chaining jQuery functions
  • using the .display() and .hide() functions to mimic slideshow behavior
  • utilizing a jQuery CDN
  • extending jQuery's functionality with 3rd party plugins
  • implementing randomized effects on your page


  • Widget 1 will have randomized color links
  • Widget 2 will utilize the realistic hover effect technique for its graphic links
  • one widget per page

Extra Credit

  • Get ride of the outline on links in certain browsers (CSS-only solution)
  • Make shadow graphic look good in IE (use Photoshop)
  • Make sure the buttons levitate over the image, not behind it (CSS-only solution, DO NOT use an IE conditional statement)
  • Get the shadows underneath the buttons to perfectly align after the over state has been activated (look at the jQuery code you pasted in to your script)
  • Randomize the image that loads on the main page (do a Goggle search that does not require an extra plugin)

Project 2B - Special Assignment "Picture Viewer Widget Remix" - Link not allowed

Create a widget that utilizes the z-index CSS attribute to mimic slideshow behavior

Provided with an incomplete HTML document

  • required to fill in the missing code to complete the assignment

Special requirements and restrictions apply


  • CSS z-index attribute
  • HTML stacking orders and contexts
  • unique Web design problem solving skills
  • manipulating HTML content with jQuery
  • implementing 3rd party jQuery plugins with unique restrictions

Project Challenge

  • You cannot directly edit the HTML
  • Additional CSS needed, then you must include comments in your CSS stating it is for project challenge
  • Cannot C&P the plugin code into the HTML. Upload the plugin file(s) to your web hosting space and link them to your page via absolute links.

Week 9-12: Project 3 -"TDI Project" (Loading Dynamic Content with jQuery)

Utilize jQuery's getJSON function to aggregate data from various external providers

  • Result will be a "mashup" page featuring the latest data on a travel destination of your choice


  • intro to getJSON function
  • cross-domain security issues and JSON padding
  • intro to 3rd party APIs
  • using Firefox Web developer plugin to style dynamic content
  • creating a banner slideshow utilizing the jQuery Cycle plugin

Required Content

  • #container - holds all of the contents of the page
  • #header - holds the banner slideshow of locally stored images
  • #photos - photo thumbnails of related images
  • #weather - the current weather of your travel destination
  • #information - this contain will be populated with content from Wikipedia
  • #footer - links to your "Terms of Service" and "Privacy Policy"
  • jQuery

Extra Credit

  • easy - get functional Facebook "Like" icon on the page (hint: This is the official button provided by Facebook.com)
  • easy - Add DOM Monster (http://miraculo.us/dom-monster/) to your page. Based on the results it gives you, write a sentence or two on what is causing the most problems on the site.
  • easy - Add a weather widget that provides more than a single day's weather report.
  • easy/medium - Add a contact form to the footer and have it open in Thickbox
  • easy/medium - In the style sheet you created, use CSS shorthand for the following properties: font, list background, border, outline
  • medium - Minify the CSS and JS files you created and write how you did it
  • medium - Get the H1 text in the header to be visible when the slideshow is cycling through the pictures in ALL browsers
  • medium/hard - Get the thumbnails from jFlickrFeed to open up with Colorbox pop-up.