Course Code: 982

20480 Programming in HTML5 with JavaScript and CSS3

Class Dates:
5 Days
Class Time:


  • Course Overview
  • This course provides an introduction to HTML5, CSS3, and JavaScript. This course 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. The course focuses on using 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 are selected to support and demonstrate the structure of various application scenarios. They are intended to focus on the principles and coding components/structures that are used to establish an HTML5 software application.This course uses Visual Studio 2017, running on Windows 10.
  • 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 10 or web applications).


  • 1 to 3 months experience creating Web applications, including writing simple JavaScript code
    1 month experience creating Windows client applications
    1 month of experience using Visual Studio 2017
  • Recommended Courses:

Course Details

  • 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 XMLHTTPRequest 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, Use WebPack to package web applications for production.
  • Improve the responsiveness of a Web application that performs long-running operations by using Web Worker processes.
  • Module 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
  • Module 2: Creating and Styling HTML Pages
  • Creating an HTML5 Page
  • Styling an HTML5 Page
  • Lab : Creating and Styling HTML5 Pages
  • Module 3: Introduction to JavaScript
  • Overview of JavaScript
  • Introduction to the Document Object Model
  • Lab : Displaying Data and Handling Events by Using JavaScript
  • Module 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
  • Module 5: Communicating with a Remote Server
  • Async programming in JavaScript
  • Sending and Receiving Data by Using the XMLHttpRequest Object
  • Sending and Receiving Data by Using the Fetch API
  • Lab : Communicating with a Remote Data Source
  • Module 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 by Using CSS3
  • Module 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
  • Object Inheritance
  • Refactoring JavaScript Code to Use Objects
  • Module 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 with HTML5 APIs
  • Dragging and Dropping Images
  • Incorporating Video
  • Using the Geolocation API to Report the User's Current Location
  • Module 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 Web Applications
  • Caching Offline Data by Using the Application Cache API
  • Persisting User Data by Using the Local Storage API
  • Module 10: Implementing an Adaptive User Interface
  • Supporting Multiple Form Factors
  • Creating an Adaptive User Interface
  • Lab : Implementing an Adaptive User Interface
  • Creating a Print-Friendly Style Sheet
  • Adapting Page Layout to Fit Different Form Factors
  • Module 11: Creating Advanced Graphics
  • Creating Interactive Graphics by Using SVG
  • Drawing Graphics by Using the Canvas API
  • Lab : Creating Advanced Graphics
  • Creating an Interactive Venue Map by Using SVG
  • Creating a Speaker Badge by Using the Canvas API
  • Module 12: Animating the User Interface
  • Applying CSS Transitions
  • Transforming Elements
  • Applying CSS Keyframe Animations
  • Lab : Animating the User Interface
  • Applying CSS Transitions
  • Applying Keyframe Animations
  • Module 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
  • Receiving Messages from a Web Socket
  • Sending Messages to a Web Socket
  • Handling Different Web Socket Message Types
  • Module 14: Performing Background Processing by Using Web Workers
  • Understanding Web Workers
  • Performing Asynchronous Processing by Using Web Workers
  • Lab : Creating a Web Worker Process
  • Improving Responsiveness by Using a Web Worker
  • Module 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
  • Creating and Deploying Packages using WebPack