Assignment: HTML5 and CSS3

Overview: This assignment will test your understanding of CSS, HTML, and, specifically,
HTML 5 and CSS 3.
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:

 Google Chrome
 Mozilla Firefox
 Microsoft Edge & IE 11
 Opera
 Safari

You can use CanIUse.com to determine which features of your design are supported by
which browser. In a perfect world, designers will test browser compatibility by installing
each browser on their computer. You are NOT expected to do so. That said, you should
consider the principles of progressive enhancement and graceful degradation when creating
your designs. Features that are not supported on older browsers should NOT be a
foundational part of your design. For example, if your design includes a dark linear-
gradient behind white text, you should also specify a dark background-colorfor the same
element. Modern browsers will display the linear gradient while older browsers will ignore
the unsupported CSS property and will display the background-color instead.
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. 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:

 Your design should have horizontal navigation across the top of the page (since this is
just a mock-up, all links can simply link to "#"). Additionally, your menu must meet
the following specifications:
o The menu should be created using an HTML list and should be styled
accordingly.
 Each item should look like a tab with rounded corners on the top
 There should be a small arrow at the top of each tab (see screenshots
below)
o When hovered over, the small arrow at the top of the given tab should
disappear immediately.
o When hovered over, each menu item should display a background image. On
browsers that support it, there should also be a linear gradient on the menu
item when hovered over. When hovered over, the height of the given menu
item should increase, making the tab look like it "popped up".
o On browsers that support it, menu items should look animated when hovered
over, with the "pop up" effect taking place over .5 seconds.
 Your design should use a solid background color for the body element.
  For browsers that support it, you should also add some texture to your page by
including a background-image that shows slightly through your background color.
You are free to choose any background image from this set. Keep in mind that some
of these images may work better for the design than others!
 All text on the website should be formatted using best practices with regards to
typography. Titles, headings, and other similar elements should be styled with
legibility and readability in mind.
 The logo for the website must display the Oceanic Airlines logo. Additionally, you
must display the text "Oceanic Airlines" in a non-standard font for browsers that
support it.
 When selecting a color scheme for your web site, be sure to apply your understanding
of color theory.
 Your website should be designed with accessibility in mind, make sure that users can
view and interact with the content regardless of their abilities or web-browsing
device.

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:

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

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 still be functional on older 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:

 All HTML validates correctly as HTML 5 via W3C on-line HTML Validation
Service
 Appropriate use of CSS selectors to target specific elements
  Appropriate use of relevant CSS properties to style page elements as specified in the
assignment write-up
 Appropriate use of colors based on your understanding of color theory
 Appropriate use of size units for modifying element properties such as margin,
padding, border size
 Demonstrated understanding of typographical concepts.
 Demonstrated understanding of accessibility concepts and best practices.
 Demonstrated understanding of HTML 5 and its uses.
 Demonstrated understanding of CSS 3 and its uses.
 Appropriate use of absolute and relative URLs for related images, CSS files, and
hyperlinks.
 All links work as expected.
 All images display properly and as specified in the assignment handout.
 Appropriate use of folders to organize files on the web server.
 Appropriate file names (based on best practices as described in class).
 Appropriate use of HTML and CSS comments.

Sample Output: