- 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.
After completing this course, students will be able to:
This hands-on course provides an introduction to HTML5, CSS3, and JavaScript and covers basic HTML5/CSS3/JavaScript programming skills. You will learn how to use HTML5/CSS3/JavaScript to implement programming logic, define and use variables, perform looping and branching, develop user interfaces, capture and validate user input, store data, and create well-structured application.
The lab scenarios in this course demonstrate the structure of various application scenarios. The labs focus on the principles and coding components/structures that are used to establish an HTML5 software application.
Audience Profile
Web Developers who have 6-12 months of programming experience and who are interested in developing applications using HTML5 with JavaScript and CSS3.
Before attending this course, students must have:
- At least three months of professional development experience.
- Understand the basic HTML document structure:
- How to use HTML tags to display text content.
- How to use HTML tags to display graphics.
- How to use HTML APIs.
- Understand how to style common HTML elements using CSS, including:
- How to separate presentation from content
- How to manage content flow.
- How to control the position of individual elements.
- How to implement basic CSS styling.
- Understand how to write JavaScript code to add functionality to a web page:
- How o create and use variables
- How to use:
- arithmetic operators to perform arithmetic calculations involving one or more variables
- relational operators to test the relationship between two variables or expressions
- logical operators to combine expressions that contain relational operators
- How to control the program flow by using if … else statements.
- How to implement iterations by using loops.
- How to write simple functions.
Module 1: Overview of HTML and CSS
- Overview of HTML
- Overview of CSS
- Creating a Web Application by Using Visual Studio 2012
Module 2: Creating and Styling HTML5 Pages
- Creating an HTML5 Page
- Styling an HTML5 Page
Module 3: Introduction to JavaScript
- Overview of JavaScript Syntax
- Programming the HTML DOM with JavaScript
- Introduction to jQuery
Module 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
Module 5: Communicating with a Remote Data Source
- Sending and Receiving Data by Using XMLHTTPRequest
- Sending and Receiving Data by Using jQuery AJAX operations
Module 6: Styling HTML5 by Using CSS3
- Styling Text
- Styling Block Elements
- CSS3 Selectors
- Enhancing Graphical Effects by Using CSS3
Module 7: Creating Objects and Methods by Using JavaScript
- Writing Well-Structured JavaScript
- Creating Custom Objects
- Extending Objects
Module 8: Creating Interactive Pages using HTML5 APIs
- Interacting with Files
- Incorporating Multimedia
- Reacting to Browser Location and Context
- Debugging and Profiling a Web Application
Module 9: Adding Offline Support to Web Applications
- Reading and Writing Data Locally
- Adding Offline Support by Using the Application Cache
Module 10: Implementing an Adaptive User Interface
- Supporting Multiple Form Factors
- Creating an Adaptive User Interface
Module 11: Creating Advanced Graphics
- Creating Interactive Graphics by Using Scalable Vector Graphics
- Programmatically Drawing Graphics by Using a Canvas
Module 12: Animating the User Interface
- Applying CSS Transitions
- Transforming Elements
- Applying CSS Key-frame Animations
Module 13: Implementing Real-Time Communications by Using Web Sockets
- Introduction to Web Sockets
- Sending and Receiving Data by Using Web Sockets
Module 14: Creating a Web Worker Process
- Introduction to Web Workers
- Performing Asynchronous Processing by Using a Web Worker
Labs
- Exploring the Contoso Conference Application
- Creating and Styling HTML5 Pages
- Displaying Data and Handling Events by Using JavaScript
- Creating a Form and Validating User Input
- Communicating with a Remote Data Source
- Styling Text and Block Elements using CSS3
- Refining Code for Maintainability and Extensibility
- Creating Interactive Pages by Using HTML5 APIs
- Adding Offline Support to a Web Application
- Implementing an Adaptive User Interface
- Creating Advanced Graphics
- Animating User Interface Elements
- Implementing Real-Time Communications by Using Web Sockets
- Creating a Web Worker Process