Individual Project Part 2

Purpose

The purpose of this project is to use the HTML5 and CSS3 skills you have learned this semester. You will be adding HTML elements, styling, layout and creativity to the web site you created for Part 1 of the Individual Project.

In Phase 2, you will utilize the skills you have learn in Chapters 1 though Chapter 14.

Layout

You may continue to use the layout you created for Part 1 of the project, or you can choose to update the layout using some of the advance techniques you have learned.

Just make sure you use the HTML5 structure elements you learned about in chapter 2 and chapter 6 to structure your page. Make sure you wrap your elements in a

You will use the box model in the design and layout. Remember in CSS Box Model, all block HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content

Color Scheme

Continue with the color scheme you selected for Part 1 of the project or change it if you wish.

Grading

This project is worth 100 points.

90 points - Development of website per specification

10 points - Originality & Creativity

Project Specifications:

1. Basic Specifications (10 points)

Part 2 of the individual project must satisfy all the requirement of part 1 of the individual project

Property coded html elements

Properly code CSS selectors

CSS and HTML must validate:

i.https://validator.w3.org/

ii.https://jigsaw.w3.org/css-validator/

Create a folder on your computer and name it yourname_individual_project (example: maryellen_demaret_individual_project).

All your website documents must be in this folder. All .html files, .css files and images.

2. From Chapter 7 Links, Layout and Mobile (20 points)

Include a telephone link in your footer

Include a print style sheet

Optimize layout for mobile web

Add viewport meta tag and media queries to your .css file

User responsive images for your mobile design

3. From Chapter 8 - Tables CSS (15 points)

a. Include at least one table in your website.

The table should use:

Table caption,

Table headers

Table body

Table footer (if needed)

Zebra stripping using pseudo-classes

Style the header, body and footer (if you have one) should be styled differently

4. From Chapter 9 - Forms (20 points)

Create a HTML form document. You choose, some examples are contact, ratings, comments, review, etc. Name the file appropriately.

Add the html form document to your navigation

Include in the form:

Input elements text, submit, radio, checked, etc

A textarea element

A select element

A field set and legend element

Several of the HTML5 form controls such as email text box, phone number text box, etc

5. From Chapter 11 Web Multimedia and Interactivity (15 points)

Add a video to your website

Add a date to your site using JavaScript

Add either horizontal or vertical drop down menu to your site.

6. From Chapter 14 JavaScript and jQuery (10 points)

Add a JavaScript Alert Message box to your index.html page.

Add a jQuery Alert Message box to a page in your site other than the index.html page