ISTA 230 Introduction to Web Design (Spring 2017)

Assignment 7: HTML5 and CSS3

Due Date: March 30, 2017 before 11:59pm

Overview: This assignment will test your understanding of CSS, HTML, and, specifically, HTML 5 and CSS 3.

If you have any questions or concerns regarding this assignment, please don't hesitate to contact your instructor at jmspargu@email.arizona.edu or at 520-276-6433.

Assignment: For this assignment, you will be creating a mock-up for the homepage of the Oceanic Airlines website. The mock-up should work in the following browsers:

The best way to test browser compatibility is to install each browser on your computer and interact with the website in each. If you are unable to do the above, you can use the various computer labs on campus, many of which have multiple browsers installed on their computers. More recent versions of Internet Explorer also have a developer mode (which can be accessed by pressing F12) that will allow you to use the rendering engines of other versions of IE. For example, you can tell IE 11 to display using the rendering engine from IE 8.

You have been provided with a plain-text version of the textual content and some associated images but will need to create all HTML and CSS files for the assignment.

Your job is to create a mock-up homepage based on the specifications listed below. Using your ISTA 230 web account, you will be required to log in to the ISTA 230 server and create a directory named "assignment7" in your root directory. All files for the assignment should be uploaded to this directory. You are responsible for creating all HTML and CSS files for this assignment.

Using what we have learned in class, you are to create a homepage with the following characteristics:

The navigation for this assignment is one of the more challenging tasks you'll be asked to complete this semester. To provide you with a better understanding of what is expected, here is a short clip of the completed navigation in use:

Navigation

Here is an additional set of screen captures of the navigation in use, taken at different points during the effect:

Navigation

As you may have guessed, the navigation effects rely on some of the new CSS 3 properties that we've recently covered in class. Please keep in mind that you are expected to build a page that would be functional on Internet Explorer 8 and 9 as well as more modern browsers. Please consider the principles of progressive enhancement and graceful degradation as you move forward.

Grading:

Your work will be graded on the following criteria:

To check if your HTML and CSS validate properly, use the ISTA 230 HTML and CSS Validators:

To evaluate the accessibility of your web pages, use the Accessibility Developer Tools extension for Google Chrome:

Turn In: All of your files for this assignment must have been uploaded to your user account on the ISTA 230 web server by 11:59p on March 30, 2017. Any files uploaded after that will be considered late and your grade will be adjusted accordingly.

Homepage Content

Below is the text for the Oceanic Airlines homepage. Any content in [square brackets] represents instructions.

[Image of an island and/or travel destination]

Welcome!

Looking to lose yourself? Take a trip with Oceanic Airlines!

Experience the fun and adventure of a destination unlike any other! Regardless of what you have in mind, we promise you a trip you'll never forget. Enjoy it all with (at least) two extra nights free!

For Standard Travelers
  • Standard seating chart [link]
  • Find out why our flights are so unique [link]
  • Read our insurance policy [link]
  • Join our frequent flyer club [link]
  • More Travel Resources... [link]
For "Others"
  • Effect of electromagnetism on travelers [link]
  • Flying with animals [link]
  • Non-Smoking policy [link]
  • More Travel Resources... [link]

Sample Output:

Sample Homepage Sample Homepage