Capstone Project

Overview

This is a competency based class which means that if you have successfully passed all the units to this point you have earned a "B".

If you want to get an "B+", "A-", or "A", then you can complete the capstone activities which include building a vacation website, taking final exam in Canvas and completing a reflection.

For the capstone project, you will take everything that you have learned thus far and apply that knowledge to creating a professional, responsive, website for a vacation company.

Objectives

• Demonstrate all the skills you have learned this semester in a new website.

Tasks

• Review the wireframes for this assignment to help you understand what is expected.
• Build a awesome responsive website for a vacation company.

Reflection Questions

• Was this your first CBE course?
• What is one thing you really liked about this class?
• What is one thing we can change for next semester?

Assignment Checklist

Capstone Project (40 pts)

Imagine that you have just met with the CEO of a "Budget Vacations" and they want a new website that works on mobile phones and desktop computers. They have asked you to build their new site. Before they hire you, they want to see what you are capable of doing so they have asked to see a sample vacation site which represents your best work.

For this project you will build an entirely new website to promote vacation destinations of your choice. Place all the files and sub-folders in a folder called "vacation". This project will contain several beautifully designed pages and include everything on this checklist. The rules include:

• You will build this site from scratch using only a text editor and graphics program.
• You must do all the work yourself (no copying others work).
• No filler text allowed! You must have authentic content.
• When your finished, you must put a link in Canvas so it can be graded.
• You may NOT include code that you have not written. This assignment is about what you can do NOT what you can copy.

Overall Design5

All pages must share the look and feel of the home page.

• Appropriately use drop shadows and rounded corners
• Appropriately use of a readable Google fonts
• Appropriately use CSS gradients
• Web site design is attractive. The design should not be cumbersome to the user
• Use one external CSS to control the entire site

Home Page5

Build a homepage for your site.

• Description about the travel agency history, targeted clients, popular destinations, testimonials, etc. You can get copy from other sites and tweak it for yours
• Add an image to the home page

Destination Page (gallery) 5

The Destination Gallery page should include a minimum of 6 destinations displayed in multiple columns. Each photograph should have a description with it.

• A minimum of six destinations listed. (DO NOT USE TABLES)
• Displayed in multiple columns
• Each is labeled with the destination name BELOW the image
• Each has a border separating it from the others
• Photographs are all the same format and size! *(consistency)*
• Appropriate use of figure and figure caption tags

Video Clip Page5

Please make a new page for a video.

• Use an iFrame to embed a YouTube or Vimeo video related to your destination
• Make sure the video is 100% width so it is responsive

Packages 5

This page will contain 3 vacation packages complete with a description, destination, hotel name, cost, and rental car company. Use the built in h1, h2, p to layout these pages. (DO NOT USE TABLES)

• At least three vacation packages listed with a short description
• Each package has a photo (use a real photo of this place)
• Hotel accommodations for all three (href links to the real hotel that open in a new window)
• Rental car/truck type and company included (href links to the rental company that open in a new window)
• Cost of the package
• Ths may be a good place to explore the use of borders! 

Contact Page5

Request additional information page complete with fieldsets, ledged and labels. This form must forward to a thanks page.

• Include at least three text fields
• Include a dropdown with at least 3 options
• Include at least three radio buttons
• Include one comment box (large box for comments)
• Include a styled submit button
• Style inputs so they match your color scheme
• Insure eye tracking is in a straight line.
• Include a thank you page that forwards automatically to the home page
• Style the inputs so the user instructions are above the input fields
• Using HTML5 "required" attribute to prevent the form from processing until the required fields have been filled out

Media Queries for Navigation5

Create CSS navigation for the phone so it works differently than the desktop.

• Set the phone to be rounded buttons nicely styled and separated
• Set the desktop to be a horizontal menu
• The menu must visually show the current page .
• Navigation is consistent across all the pages
• Navigation items are coded using an unordered list

Validation5

• All pages are under 500kB in size.
• All pages pass the HTML validator.
• All pages pass the CSS validator.

Grade

Unlike previous assignments you will NOT have a chance to redo this assignment. You only get one shot at success and the points you earn will be entered in Canvas.