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
