Part II: Cascading Style Sheets: CSS3

Overview

Remember, in order to meet the "creativity and problem-solving skills" objective, the student is required to produce programming project solutions from given problem descriptions. Note that this objective is not met if a student is able to produce solutions only by pasting together given code fragments. Although pasting code fragments together is sometimes appropriate, it does not enforce the development of creativity and problem-solving skills. Therefore, the homework directions and grading will be tightly aligned to these course learning outcomes.

Demonstrate creativity and problem-solving skills.

Analyze web programs in order to test, debug, and improve them. (Discussions)

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Please review the general directions from week 1.

This week you will have a lighter week. You will be using what you learned with CSS and CSS3 to further enhance your web site and add content.

Remember your site this term is a Rummage Sale site.

NOTE: Anytime you work with HTML, CSS and JavaScript, you have the potential of having differences across devices, platforms and browsers. Browser and security settings can also impact running code on the web pages. JavaScripts that run external scripts, create and read cookies, or pop-up windows may need to be configured to allow them in your browser settings.

Problem 1

Your boss has asked you to create multiple pages of individual products.

Learning Outcomes

Demonstrate creativity and problem-solving skills.

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall structure

Create and save your Word document in the homework folder. Add this to your web site in the homework folder after you have completed both problems.

Gather your data and create your basic page navigation structure.

Edit the week4-1.html, home.html pages to have the same layout as in template.html and the link to the same style sheet: homework.css. Copy the code from template.html to these two pages.

Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Dont copy off of other web sites!

Make sure there is some place on the home page that has links to all of the other pages. You can do this in the main menu if you chose the first page layout from week 2. If you chose the Jumbotron, just create a link to at least to the first page for each week.

Step 2. Create content and enhance the home page with CSS and CSS3 styles

Customize your web page with CSS and CSS3

Add a full page of content (text and images) to your home.html page if you dont currently have content.

Enhance your web page with CSS style sheets and CSS3 rules including shadows, transformations, animations, cursor, etc.

Step 3. Use JavaScript to modify the style rules dynamically

Change the values of the html elements using CSS3

Configure the program so that when the home.html page loads, the styles the page styles will change. Refer to the section on changing styles dynamically in the textbook and readings.

Problem 2:

Your boss has asked you to display one product on a web page.

Learning Outcomes:

Analyze web programs in order to test, debug, and improve them. (Discussions)

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Demonstrate creativity and problem-solving skills.

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Step 4. Create your web site form

Create the content and configure the HTML tags and attributes

Modify the page week4-1.html to show one of the products.

Add the content, including images and text.

Make sure to add details and pictures of the product. You want at least a full page of content and a variety of html tags to work with.

Step 5. Configure the style of the form

Style the form with CSS

Using CSS configure the page content and appearance.

Use CSS rules such as columns to create multiple columns of text.

Use multiple methods to modify the style rules such as pseudo-classes and pseudo-elements, attribute selectors, element selectors, universal selector, etc.

Use combinators to combine selectors.

Above each combinator, insert a comment indicating what the combinatory does.

Step 6. Create a JavaScript program to modify the style rules dynamically

Change the values of the html elements using CSS3

Insert a button on the page.

Create a JavaScript function that when the users click on the button, the styles In the page will change. Refer to the section on changing styles dynamically in the textbook and readings.