ProTech Professional Technical Services, Inc.

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for

informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

Cours

e O

utlin

e

HTML5/CSS3/JavaScript Programming Course Summary

Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets Version 3, JavaScript and jQuery. Objectives After taking this course, students will be able to:

Use HTML5 to create the user interface for Web applications that run in modern browsers, including using HTML5 form elements and semantic elements

Use CSS and CSS3 to style pages including effects such as transitions and animations

Use CSS3 media queries to create responsive Web applications

Write JavaScript programs that manipulate the Document Object Model (DOM)

Write jQuery programs that work with the DOM and Ajax

Write programs that use the jQuery UI and Angular.js libraries Topics

Introduction to the Course

HTML Concepts

Introduction to HTML5

CSS Fundamentals

The CSS Box Model and Layouts

Introduction to CSS3

Designing Responsive Web Applications

Introduction to JavaScript

Data Types and Assignment

Operators

Flow Control

JavaScript Objects

JavaScript Arrays

The JavaScript window and document Objects

JavaScript and CSS

Introduction to jQuery

Introduction to jQuery UI

jQuery and Ajax

Introduction to AngularJS

Audience This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jQuery. Prerequisites Students should have basic HTML experience. Duration Five days

ProTech Professional Technical Services, Inc.

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for

informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

Cours

e O

utlin

e

HTML5/CSS3/JavaScript Programming

Course Outline I. Introduction to the Course

A. HTML5, CSS3 and JavaScript Programming

B. Legal Information C. HTML5, CSS3 and JavaScript

Programming D. Introductions E. Course Description F. Course Objectives G. Sample Agenda H. Course Logistics

II. HTML Concepts

A. HTML Concepts B. HTML and HTTP C. HTML Forms D. Writing an HTML Form E. Form Input Widgets F. Sample HTML Form G. HTTP Request Headers H. HTTP Response Headers I. GET versus POST J. Javascript Fundamentals K. Sample JavaScript L. JavaScript Objects M. Writing JavaScript Functions N. JavaScript Variables O. JavaScript Events P. JavaScript Events Example Q. Using Javascript to Validate a Form R. Validating a Form, cont'd S. What are Cascading Style Sheets? T. Defining Styles U. Basic Style Syntax V. Style Classes W. Using Document-Level Styles X. Using External Style Sheets Y. Text Properties Z. Font Properties AA. Margin Properties BB. Border Properties CC. Background Properties DD. Other CSS Properties EE. Maintaining State Across Requests FF. Cookies GG. Headers for Cookies HH. Chapter Summary

III. Introduction to HTML5 A. HTML Version History at the W3C B. What’s New in HTML5 C. HTML5 Specifications D. What About XHTML? E. The DOCTYPE F. The Root Element G. The Head Element H. Semantic Elements I. Semantic Elements, cont'd J. HTML5 Form Widgets K. HTML5 Form Widgets Example L. HTML5 Input Types M. Other HTML5 Features N. Other Related Technologies O. Browser Support P. Supporting Older Browsers Q. Using Modernizr R. Sample Page Source S. Sample Page CSS T. Sample Page in Modern Chrome U. Sample Page in IE6, No Modernizr V. Sample Page in IE6, With Modernizr W. Chapter Summary

IV. CSS Fundamentals

A. CSS Fundamentals B. What are Cascading Style Sheets? C. CSS History D. Guidelines for Writing HTML for CSS E. Defining Styles F. Basic Style Syntax G. Using Document-Level Styles H. Using External Style Sheets I. Using Inline Styles J. Specifying Colors K. Selectors L. The Universal Selector M. Type Selectors N. Attribute Selectors O. Class Selectors P. ID Selectors Q. Pseudo-Class and Psuedo-Element

Selectors R. Grouping Selectors S. The Document Tree T. Using Child Selectors U. Descendent Selectors

ProTech Professional Technical Services, Inc.

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for

informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

Cours

e O

utlin

e

V. Style Inheritance W. The Cascade X. The Cascade Example Y. Text Properties Z. Font Properties AA. Background Properties BB. Using a CSS Validator CC. Using a Reset Stylesheet DD. Using a CSS Preprocessor and/or

Framework EE. Chapter Summary

V. The CSS Box Model and Layouts

A. The CSS Box Model and Layouts B. What is the Box Model? C. Borders D. Padding E. Margins F. Inline vs Block Styles G. Floating Elements H. Left Floating Elements I. Right Floating Elements J. Floating Elements and Backgrounds K. Clearing the Float L. Clearing the Float Example M. Web Page Layouts N. Fixed-Width Layouts O. Fluid Layouts P. Creating a Two-Column, Fluid Layout Q. Two Column Recipe R. Two Column Example S. Chapter Summary

VI. Introduction to CSS3

A. Introduction to CSS3 B. What’s New in CSS3? C. Browser Support D. Rounded Corners E. Text Shadows F. Box Shadows G. Transforms H. Transitions I. Animations J. Animation Keyframes K. Applying the Animation L. Multiple Keyframes M. Complete Animation Example N. Introduction to Media Queries O. Chapter Summary

VII. Designing Responsive Web Applications

A. Designing Responsive Web Applications B. What is Responsive Design?

C. Principles of Responsive Designs D. Strategies for Responsive Designs E. Alternatives to Responsive Designs F. Using Relative Measurements G. A Simple Calculation H. Applying the Formula: Font Size I. Applying the Formula: Block Elements J. Additional Responsive Concepts K. What are Media Queries? L. What Can You Query? M. Viewport vs Screen Size N. Defeating Mobile Device Scaling O. Media Query Breakpoints P. Minimizing Image Size Q. Chapter Summary

VIII. Introduction to JavaScript

A. Introduction to JavaScript B. What is JavaScript? C. Where Does JavaScript Run? D. JavaScript vs Java E. History of JavaScript F. ECMAScript Versions G. Browser Support for ECMAScript

Versions H. JavaScript is Typically Interpreted I. Four Categories of JavaScript

Functionality J. Try it Now! K. What is an Object? L. Object Terminology M. Objects Exercise N. Objects in JavaScript O. Client-Side JavaScript Objects P. Embedding JavaScript in HTML Q. Using the script Tag R. Using an External File S. Defining Functions T. Chapter Summary

IX. Data Types and Assignment

A. Data Types and Assignment B. JavaScript Comments C. JavaScript Basics D. Variables E. Rules for Identifiers F. Reserved Words G. Numbers H. Booleans I. Truthy and Falsy J. Strings K. String Literal Escape Codes L. Dates and Times M. Scope of Variables

ProTech Professional Technical Services, Inc.

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for

informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

Cours

e O

utlin

e

N. Quick Practice O. Chapter Summary

X. Operators

A. Math Operators B. Other Math Operations C. Quick Practice D. Compound Assignment Operators E. Increment and Decrement Operators F. Equality Operators G. Comparison Operators H. Boolean Logical Operators I. Conditional Operator J. String Concatenation K. Bitwise Operators L. Shift Operators M. Type Conversion N. Quiz O. Other Operators P. Chapter Summary

XI. Flow Control

A. Flow Control B. Defining Blocks C. Conditional Statements D. The if Statement E. The if else Statement F. Quick Practice G. The while Loop H. The for Loop I. Breaking Out of a Loop J. The switch-case Statement K. Quick Practice L. Chapter Summary

XII. JavaScript Objects

A. JavaScript Objects B. What is an Object? C. JavaScript Objects D. Categories of Objects E. What Are Properties? F. Creating Objects G. Using Object Literal Syntax H. Using the new Operator I. Objects Are Reference Types J. Prototype Inheritance K. Working with Properties L. The for-in Lop M. The Global Object N. Deleting Properties O. Determining if a Property Exists P. Enumerating Properties Q. Methods R. Defining Methods with Literal Syntax

S. Method and Function Arguments T. The this Keyword U. Constructor Functions V. User-Defined Constructor Functions W. Chapter Summary

XIII. JavaScript Arrays

A. JavaScript Arrays B. What is an Array? C. Creating an Array D. Array Indexes E. Iterating Arrays F. Appending Elements G. Inserting Elements at the Beginning H. Deleting Array Elements I. The splice() Method J. Using splice() to Insert K. Sparse Arrays L. Other Useful Array Methods M. Array-Like Objects N. Treating Strings as Arrays O. Chapter Summary

XIV. The JavaScript window and document Objects

A. The JavaScript window and document Objects

B. The JavaScript window Object C. Timers D. URLs and Navigation E. The navigator and screen Objects F. Functions for Dialog Boxes G. Opening and Closing Windows H. The JavaScript document Object I. The DOM Tree J. Accessing Nodes K. Finding HTML Elements by ID L. Finding Elements by Tag Name M. Finding Elements by CSS Class N. Finding Elements using CSS Selectors O. Element Content P. Inserting Nodes Q. Replacing or Deleting Nodes R. Chapter Summary

XV. JavaScript and CSS

A. JavaScript and CSS B. What are Cascading Style Sheets? C. Defining Styles D. Basic Style Syntax E. JavaScript and CSS F. Changing an Element's CSS Class G. Changing CSS Class Example H. The CSSStyleDeclaration Object

ProTech Professional Technical Services, Inc.

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for

informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

Cours

e O

utlin

e

I. Changing an Element's Style Example J. Scripting Element Visibility and Display K. Changing the Visibility L. Changing the Visibility Example M. Changing the Display Style N. Chapter Summary

XVI. Introduction to jQuery

A. Introduction to jQuery B. Why Do We Need a JavaScript Library? C. Introduction to jQuery D. jQuery Features E. More Features F. Getting Started with jQuery G. Basic jQuery Syntax H. Traversing Results of a Query I. The jQuery ready() Function J. Using an Anonymous ready() Function K. jQuery Methods L. jQuery Getters and Setters: Attributes M. jQuery Getters and Setters: CSS

Properties N. jQuery Getters and Setters: Element

Content O. Inserting or Deleting Elements P. jQuery Event Handlers Q. Chapter Summary

XVII. Introduction to jQuery UI

A. Introduction to jQuery UI B. What is jQuery UI? C. jQuery UI vs HTML5 D. Getting Started with jQuery UI E. jQuery UI Animations F. jQuery UI Widgets G. jQuery UI Themes H. Using jQuery UI and Modernizr.js I. Chapter Summary

XVIII. jQuery and Ajax

A. jQuery and Ajax B. What is AJAX? C. Traditional Web Processing D. AJAX Processing E. AJAX Applications F. The XMLHttpRequest Object G. XMLHttpRequest: Raw JavaScript H. Sending a Request: Raw JavaScript I. Updating the Document: Raw

JavaScript J. What is JSON? K. Basic JSON Syntax L. Using JSON in Raw JavaScript M. jQuery and Ajax

N. Processing JSON O. Complete JSON Example P. jQuery and XML Q. Complete XML Example R. Monitoring Ajax Requests S. Handling Errors T. Chapter Summary

XIX. Introduction to AngularJS

A. What is AngularJS? B. AngularJS vs jQuery C. AngularJS Features D. What is the MVC Architecture? E. A Typical AngularJS Architecture F. AngularJS Hello, World G. The View in AngularJS H. What is a Scope? I. What is a Directive? J. Using a Repeater K. Two-Way Data Binding L. What is a Controller? M. Controllers Define a Scope N. What is a Module? O. AngularJS and Forms P. AngularJS and Ajax Q. Complete Ajax Example R. Chapter Summary