20480 Programming in HTML5 with JavaScript and CSS3

This course provides an introduction to HTML5, CSS3, and JavaScript and helps students gain basic HTML5/CSS3/JavaScript programming skills. This course is an entry point into both the Web application and Windows Store apps training paths.

After completing this course, students will be able to:

Explain how to use Visual Studio 2017 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 XMLHTTP Request objects and Fetch API.
Style HTML5 pages by using CSS3.
Create well-structured and easily-maintainable JavaScript code.
Write modern JavaScript code and use babel to make it compatible to all browsers.
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.
Use WebPack to package web applications for production.

Course Outline

1 - OVERVIEW OF HTML AND CSS

Overview of HTML
Overview of CSS
Creating a Web Application by Using Visual Studio 2017
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
Introduction to the Document Object Model
Lab : Displaying Data and Handling Events by Using JavaScript

4 - CREATING FORMS TO COLLECT AND VALIDATE USER INPUT

Creating HTML5 Forms
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 SERVER

Async programming in JavaScript
Sending and Receiving Data by Using the XMLHttp Request Object
Sending and Receiving Data by Using the Fetch API
Lab : Communicating with a Remote Data Source

6 - STYLING HTML5 BY USING CSS3

Styling Text by Using CSS3
Styling Block Elements
Pseudo-Classes and Pseudo-Elements
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 Code
Creating Custom Objects
Extending Objects
Lab : Refining Code for Maintainability and Extensibility

8 - CREATING INTERACTIVE PAGES BY 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 SVG
Drawing Graphics by Using the Canvas API
Lab : Creating Advanced Graphics

12 - ANIMATING THE USER INTERFACE

Applying CSS Transitions
Transforming Elements
Applying CSS Keyframe Animations
Lab : Animating the User Interface

13 - IMPLEMENTING REAL-TIME COMMUNICATION BY USING WEB SOCKETS

Introduction to Web Sockets
Using the WebSocket API
Lab : Performing Real-time Communication by Using Web Sockets

14 - PERFORMING BACKGROUND PROCESSING BY USING WEB WORKERS

Understanding Web Workers
Performing Asynchronous Processing by Using Web Workers
Lab : Creating a Web Worker Process

15 - PACKAGING JAVASCRIPT FOR PRODUCTION DEPLOYMENT

Understanding Transpilers And Module bundling
Creating Separate Packages for Cross Browser Support
Lab : Setting Up Webpack Bundle for Production

Actual course outline may vary depending on offering center. Contact your sales representative for more information.