Objective:

This will build upon your experience with jQuery and CSS Animations to create a complete and interactive website. This will test your ability to properly use selectors, apply styles, load data via AJAX, use basic effects, CSS, CSS3 animations, as well as using a variety of jQuery UI Widgets like datepicker, dialog, accordion and more..

Directions:

You’ll need to create a basic layout for a website. The topic of the website is of your own choosing. You must style your website in a flat design theme. Make sure you modify your jQuery UI theme to also be flat in nature, as well as it being used to properly color your layout.

NOTE: I urge you to look to your previous assignments, at how you can use some of that information into this project.

NOTE: Make sure you use the correct method of styling elements. i.e. if CSS works better than jQuery, use CSS. If jQuery is better – then use jQuery.

You will need to create a simple 4 page site. The content of the site must be real and logical (i.e. no “ipsum” text of any kind).

Points will be deducted for not following the directions.

  • Include a main navigation with at least 4 “pages”
  • Include a FAQ page – use accordion to hide unnecessary date from the users. Have at least 5 questions/answers. Start with all closed.
  • No blurry/pixilated images
  • Include images and “real” text – no ipsum of any kind
  • Include one page with a table of information that is to be styled with zebra striping and hover rows
  • Load a “current news” section on one or more pages via AJAX
  • Include a fully styled web form using at least 3 jQuery UI widgets
  • Use CSS3 Animations to change colors on hover effects

Turn In:

Zip up file and submit via Sakai.

Be ready to demo in front of the class.

Grading Info:

___ Website about a single topic, with meaningful data (10 pts)

___ Incorporate proper design technique (15 pts)

___ Proper Selectors (CSS & jQuery) (15 pts)

___ Create Navigation with CSS3 Animations for hover transitions (15 pts)

___ Load External Data for News (15 pts)

___ Accordion for FAQ (15 pts)

___ Styled table with jQuery/CSS by applying classes – zebra stripe, header row/column, row hover, and table cell clicking (15 pts)

___ Form with Widgets  – prevent from being sent anywhere, but let dialog box know that it was sent. (25pts)

TOTAL – 125 pts