This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.

Transcription

1 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 JavaScript Arrays The JavaScript window and document 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 informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of to use any of these

2 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 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 informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of to use any of these

3 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 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. Exercise N. in JavaScript O. Client-Side JavaScript 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 informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of to use any of these

4 N. Quick Practice 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 A. JavaScript B. What is an Object? C. JavaScript D. Categories of E. What Are Properties? F. Creating G. Using Object Literal Syntax H. Using the new Operator I. 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 N. Treating Strings as Arrays XIV. The JavaScript window and document A. The JavaScript window and document B. The JavaScript window Object C. Timers D. URLs and Navigation E. The navigator and screen 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 informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of to use any of these

5 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 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 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 informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of to use any of these