HTML5, CSS3 & jQuery for Experienced Web Developers Course ISI-1309B

5 Days

Instructor-led, Hands on

Introduction Students will learn how to implement the powerful new multimedia and interactive capabilities offered by HTML5 and CSS3. The course begins with the fundamentals of HTML5 along with the essentials of styling text and creating page layouts using XHTML/HTML and CSS. Then, the course covers the fundamentals of HTML5 and CSS3 syntax, along with HTML5 techniques involving JavaScript and the jQuery JavaScript library. While HTML5 and related technologies such as CSS3 and JavaScript are still undergoing revision, this course helps you understand the underlying concepts for organizing, creating and delivering web content effectively using best practices. jQuery is a popular JavaScript library that simplifies event handling, animating, and Ajax interactions for rapid web development. Even casual web designers, who create web pages for fun, want to add the latest cool effects to their sites, and jQuery--the fast, flexible JavaScript library--is a tool of choice. Just as CSS separates "display" characteristics from the HTML structure, jQuery separates the "behavior" characteristics from the HTML structure. Students will learn visual effects, special controls and AJAX (DoJo).

At Course Completion Upon successful completion of this course, students will be able to:         

Learn how to code cutting edge web pagers using new HTML5 tags Discover HTML5 web forms and how to use them Add multimedia content that doesn’t rely on browser plugins and is mobile friendly Use the Canvas element to create shapes complete with fills, color, strokes, gradients and more Combine the powerful styling and animation capabilities of CSS3 to enhance your web pages jQuery, what is it and why you should use it How jQuery reduces the amount of code that you have to write to add rich functionality to both existing and new web pages How jQuery makes Ajax programming easier Best practices for using jQuery so that it works and performs well

Prerequisites Contact ISInc for more information at 916.920.1700 or by visiting our website at http://www.isinc.com

This is a fast paced course that is appropriate for students who have some background in web design. Students should have experience with JavaScript.

Course Outline Module 1: Defining HTML5    

Needs fulfilled by HTML5 The scope of HTML5 An overview of HTML5 syntax An overview of HTML5 APIs and supporting technologies

Module 2: Fundamentals of HTML, XHTML and CSS   

The structure of HTML The difference between HTML and XHTML The fundamentals of CSS

Module 3: Formatting Text with CSS     

Using the font-family property Setting text size Working with the em measurement Changing text properties Using HTML lists

Module 4: Introduction to CSS Layout    

Understanding CSS reset files An overview of CSS layout options How to use margins and padding to add space to your pages Working with the float and clear properties

Module 5: Advanced CSS Layout    

Using comments in cascading style sheets Using background images Creating navigation styles Working with absolute positioning

Module 6: Using HTML5 Markup   

How to define the different HTML5 content categories How to replace div elements with new HTML5 elements Understanding sectioning content and HTML5 outlines

Module 7: Creating HTML5 Forms Contact ISInc for more information at 916.920.1700 or by visiting our website at http://www.isinc.com

  

Backwards compatibility for HTML5 forms An overview of the new form elements in HTML5 How to create a form using the new elements

Module 8: Introduction to JavaScript and jQuery  

An overview of how to use JavaScript How to us the jQuery JavaScript library

Module 9: Working with Video and Audio Elements    

Adding video with the element Adding audio with the element Providing fallbacks for browsers Controlling a video with JavaScript

Module 10: Working with Canvas    

Understanding the Canvas element Drawing shapes and paths Applying colors and gradient brushes Animating compositions

Module 11: Styling with CSS3     

Working with the border-radius and border-image properties Using vendor-specific prefixes Adding multiple background images Creating CSS gradients Creating CSS animations targeted for WebKit browsers, such as Mobile Safari for the iPhone and iPad

Module 12: CSS3 Media Queries and the Future of CSS3   

How to use Css3 media queries Using the CSS3 grid property Understanding CSS3 multi-columns and flexboxes

Module 13: Offline Storage in HTML5    

Learn Learn Learn Learn

about the Application Cache API and how to cache files with HTML5 about the manifest file and how web pages are stored for offline use how to create your first offline web application how to manage offline files using HTML5 storage

Module 14: HTML5 Geolocation  

Understanding Geolocation API and its limitations Detecting the user’s geographic location

Contact ISInc for more information at 916.920.1700 or by visiting our website at http://www.isinc.com

  

Displaying the user’s location on a mapUtilizing fallbacks for varying devices Understanding JavaScript callbacks and how to use them Creating a “mash-up: geolocation applications

Module 15: HTML5 Drag and Drop   

Working with the drag-and-drop interface The differences in browser APIs and how to account for them Showing visual indicators for drag-and-drop operations

Module 16: jQuery     

What’s so good about jQuery? What’s the downside? Downloading and including jQuery Anatomy of a jQuery script Bits of HTML aka “The DOM”

Module 17: Selecting, Decorating and Enhancing     

Making sure the page is ready The core of jQuery CSS with jQuery Adding effects with jQuery A few tricks

Module 18: Animating, Scrolling and Resizing  

Animating Resizing

Module 19: Images and Slideshows  

Image Management Simple Slideshow

Module 20: Menus, Tabs, Tooltips and Panels     

Menus Accordion Menus Tabs Panels and panes Tooltips

Module 21: Construction, Ajax (Dojo) and Interactivity  

Construction and best practices Ajax crash course

Module 22: Forms, Controls and Dialogs   

Forms Controls Dialogs and notifications

Contact ISInc for more information at 916.920.1700 or by visiting our website at http://www.isinc.com

Module 23: Lists, Trees and Tables  

Lists Tables

Module 24: Plugins, Themes and Advanced Topics   

Plugins Themes Advanced topics

Contact ISInc for more information at 916.920.1700 or by visiting our website at http://www.isinc.com