20480 Programming in HTML5 with JavaScript and CSS3
This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students
gain basic HTML5/CSS3/JavaScript programming skills.
Length Days: 5 | Length Hours: 40
Target Audience
This course is intended for professional developers who have 6-12 months of programming
experience and who are interested in developing applications using HTML5 with JavaScript and
CSS3 (either Windows Store apps for Windows 8 or web applications).
Course Objectives
After completing this course, students will be able to:
• Explain how to use Visual Studio 2012 to create and run a Web application.
• Describe the new features of HTML5, and create and style HTML5 pages.
• Add interactivity to an HTML5 page by using JavaScript.
• Create HTML5 forms by using different input types, and validate user input by using
HTML5 attributes and JavaScript code.
• Send and receive data to and from a remote data source by using XMLHTTPRequest
objects and jQuery AJAX operations.
• Style HTML5 pages by using CSS3.
• Create well-structured and easily-maintainable JavaScript code.
• Use common HTML5 APIs in interactive Web applications.
• Create Web applications that support offline operations.
• Create HTML5 Web pages that can adapt to different devices and form factors.
• Add advanced graphics to an HTML5 page by using Canvas elements, and by using and
Scalable Vector Graphics.
• Enhance the user experience by adding animations to an HTML5 page.
• Use Web Sockets to send and receive data between a Web application and a server.
• Improve the responsiveness of a Web application that performs long-running operations
by using Web Worker processes.
Course Outline
1 - Overview of HTML and CSS
• Overview of HTML
• Overview of CSS
• Creating a Web Application by Using Visual Studio 2012
• Lab : Exploring the Contoso Conference Application
2 - Creating and Styling HTML5 Pages
• Creating an HTML5 Page
• Styling an HTML5 Page
• Lab : Creating and Styling HTML5 Pages
3 - Introduction to JavaScript
• Overview of JavaScript Syntax
• Programming the HTML DOM with JavaScript
• Introduction to jQuery
• Lab : Displaying Data and Handling Events by Using JavaScript
4 - Creating Forms to Collect Data and Validate User Input
• Overview of Forms and Input Types
• Validating User Input by Using HTML5 Attributes
• Validating User Input by Using JavaScript
Lab : Creating a Form and Validating User Input
5 - Communicating with a Remote Data Source
• Sending and Receiving Data by Using XMLHTTPRequest
• Sending and Receiving Data by Using jQuery AJAX operations
• Lab : Communicating with a Remote Data Source
6 - Styling HTML5 by Using CSS3
• Styling Text
• Styling Block Elements
• CSS3 Selectors
• Enhancing Graphical Effects by Using CSS3
• Lab : Styling Text and Block Elements using CSS3
7 - Creating Objects and Methods by Using JavaScript
• Writing Well-Structured JavaScript
• Creating Custom Objects
• Extending Objects
• Lab : Refining Code for Maintainability and Extensibility
8 - Creating Interactive Pages using HTML5 APIs
• Interacting with Files
• Incorporating Multimedia
• Reacting to Browser Location and Context
• Debugging and Profiling a Web Application
• Lab : Creating Interactive Pages by Using HTML5 APIs
9 - Adding Offline Support to Web Applications
• Reading and Writing Data Locally
• Adding Offline Support by Using the Application Cache
• Lab : Adding Offline Support to a Web Application
10 - Implementing an Adaptive User Interface
• Supporting Multiple Form Factors
• Creating an Adaptive User Interface
• Lab : Implementing an Adaptive User Interface
11 - Creating Advanced Graphics
• Creating Interactive Graphics by Using Scalable Vector Graphics
• Programmatically Drawing Graphics by Using a Canvas
• Lab : Creating Advanced Graphics
12 - Animating the User Interface
• Applying CSS Transitions
• Transforming Elements
• Applying CSS Key-frame Animations
• Lab : Animating User Interface Elements
13 - Implementing Real-Time Communications by Using Web Sockets
• Introduction to Web Sockets
• Sending and Receiving Data by Using Web Sockets
• Lab : Implementing Real-Time Communications by Using Web Sockets
14 - Creating a Web Worker Process
• Introduction to Web Workers
• Performing Asynchronous Processing by Using a Web Worker
• Lab : Creating a Web Worker Process