WBG310 Course Project
General Introduction
There are three parts to our Course Project, each of which will call upon knowledge and skills you have gleaned from lessons, Labs, and skill-builder exercises each week. The three parts of the ongoing project are due at the end of Weeks 2, 4, and 6. At the end of the term (starting in Week 7), a Final Project is assigned that represents your application of the collective body of knowledge you obtained in the course, applied to your theme, and used in your template.
Course Project Part 1
Objectives
The first objective is to choose a theme for your project and build a template that you will use throughout the course.
Due
This project part is due at the end of Week 2. Submit your assignment.
Goals
Goal 1: Choose a theme. If you like computer games, you may choose a gaming theme. If you like floral designs, choosing a floral theme makes sense. Choose a theme that allows you plenty of depth to include images, menus, navigation schemes, and similar items.
Goal 2: Don’t use the theme provided by the text. You may want to emulate some style characteristics from the text author, but make sure that your colors and fonts are different and that you will be able to apply your theme to the template you build.
Goal 3: Keep a simple, open format. Include your name as the brand near the very top of the page, and then use lesser headers to describe individual page contents, such as a page/topic heading. Keep all of the main body of content away from the top, right, and left edges of the browser so that you can include some of the items that will occupy those spaces.
Goal 4: Save the styled, mostly blank page as a template for all of your project submissions.
Milestones
1. Build a template file that includes your name as the main heading and a page content heading.
o Include styles for positioning the elements that will keep the sides and top open.
o Include styles that control fonts and background (color or images).
o Save this file as a template and then use the template file to do the following.
2. Create a contact page that includes the following.
o Form
o Text boxes
o Radio button group
o Buttons to trigger events
o Messaging areas to display page status
3. Collect form information and validate the following.
o Each text box has an entry.
o A radio button was selected.
4. Display the radio button value of the selection.
5. Display appropriate messages in the messaging area for correct and incorrect form action.
Grading Rubric
Course Project Part 1
Category Points Description
Form elements created 20 The form will include form tag sets, text boxes, radio button group, and button(s).
Function to collect all form data 20 Data collection and assignment is to internal variables.
All form elements validated 20 All collected form data is validated for required fields, including a radio button selection.
Messaging displayed in separate area of the page 20 Messages should be sent to a special area of the page. Messages should reflect appropriate information for valid and invalid entries.
Custom style of theme applied 8 The page is styled according to modern design guidelines set down earlier in this document.
Total 88 A quality project submission will meet or exceed all of the above requirements.
Course Project Part 2
Objectives
Using the theme created in the prior project part, apply the lessons learned in the last few chapters to your site theme. Collect images and content appropriate for your theme and topic, and apply interactive JavaScript to modify page behavior.
Due
This project part is due at the end of Week 4. Submit your assignment.
Goals
• Use your previously designed theme as a template to add a page to the collection of pages in your project.
• Adapt styles and lessons to your own galleries and themes. Don’t use the text author’s styles or images in your project.
• Use some creativity when adapting a project assignment to your pages.
Milestones
1. Create a page that has several container elements.
2. Add styles to give the container elements substance and presence on the page (background colors, width, borders, and content).
3. Add libraries and styles to cause page behaviors to respond to events.
Grading Rubric
Course Project Part 2
Category Points Description
At least three container elements created 20 The containers should be substantive (visible with content) on the page and delineated from other page content.
Add styles and content 10 Container elements should have content and be styled so as to be recognizable as separate parts of the page.
Add jQuery library and CSS files as needed 20 Include all of the files that are needed for your project to work as expected.
Three page elements hide or display depending on events, three types of animation, and two types of easing 30 Events: Mouseover, Mouseout (hover), click, and so forth Animations: slideUp/Down, fadeIn, toggleSlide
Easing: easeInSine, easeOutBounce, and so forth
Custom style of theme applied 8 The page is styled according to modern design guidelines set down earlier in this document. The style is consistent with previous theme or explanation present.
Total 88 A quality paper will meet or exceed all of the above requirements.
Course Project Part 3
Objectives
Using the theme created in the prior project part, apply the lessons learned in the last few chapters to your site theme. Collect images and content appropriate for your theme and topic, and apply interactive JavaScript and jQuery to modify page behavior.
Due
This project part is due at the end of Week 6. Submit your assignment.
Goals
Use your previously designed theme as a template to add a page to the collection of pages in your project.
Adapt styles and lessons to your own galleries and themes; don’t use the text author’s styles or images in your project.
Use some creativity when adapting a project assignment to your pages.
Milestones
1. Collect images and create a gallery of thumbnails that can be applied to a gallery. Link the smaller thumbnail images to the larger version of the image and display it in a page overlay.
2. Create a navigation bar of your own selections where submenus can be hidden until a mouse event occurs, and then control the display of those submenus using jQuery.
a. Add at least one form element (with form tags) and apply jQuery validation object literals to the page.
b. Create a page of links to some of your favorite sites. Use jQuery to have the linked pages open in a page overlay, such as the image gallery above.
You only need three of the four above; numbers 1 and 2 are mandatory. Choose either 3a or 3b for your third selection.
Grading Rubric
Course Project Part 3
Category Points Description
Image gallery with linked overlay 30 Three to five thumbnail images that link to larger versions of each thumbnail that display in a page overlay. The images should, when one is displayed in the overlay, allow the user to cycle through the larger images.
Drop-style navigation bar 30 The navigation menu should include Home, About Us, Contact Us, and a Product, Service, or Information link that is at least three levels deep from the main menu. The styles should allow that when a menu item gains a hover, at least a background color change is affected. Use jQuery to control the menu display and hide.
Linked sites display in overlay 20** A page that shows three to five links to outside websites that when clicked will display the pages in a page overlay.
jQuery form validation 20** Revisit the earlier form page and apply jQuery validation to the form, or create a form with at least one text box and one button.
Use at least two object literal parameters to validate the form input (required and pattern match).
Custom style of theme applied 8 The page is styled according to modern design guidelines set down earlier in this document. The style is consistent with a previous theme or explanation present.
NOTE: ** Students can choose either of these options to fulfill project requirements. No extra points will be assessed if both parts are included.
Total 88 A quality project submission will meet or exceed all of the above requirements.