Course Overview
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.
- 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.
Who Should Attend?
- Developer
Pre-requisite
- 1 – 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
Course Outlines
- Overview of HTML
- Overview of CSS
- Creating a Web Application by Using Visual Studio 2017
Lab : Exploring the Contoso Conference Application - Exploring the Contoso Conference Application
- Examining and Modifying the Contoso Conference Application
- Creating an HTML5 Page
- Styling an HTML5 Page
Lab : Creating and Styling HTML5 Pages - Creating HTML5 Pages
- Styling HTML pages
- Overview of JavaScript
- Introduction to the Document Object Model
Lab : Displaying Data and Handling Events by Using JavaScript. - Displaying Data Programmatically
- Handling Events
- Creating HTML5 Forms
- Validating User Input by Using HTML5 Attributes
- Validating User Input by Using JavaScript
Lab : Creating a Form and Validating User Input - Creating a Form and Validating User Input by Using HTML5 Attributes
- Validating User Input by Using JavaScript
- 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 - Retrieving Data
- Serializing and Transmitting Data
- Refactoring the Code by Using the jQuery ajax Method
- 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 - Styling the Navigation Bar
- Styling the Register Link
- Styling the About Page
- 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
- 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
- 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
- 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
- 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
- Applying CSS Transitions
- Transforming Elements
- Applying CSS Keyframe Animations
Lab : Animating the User Interface - Applying CSS Transitions
- Applying Keyframe Animations
- 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
- Understanding Web Workers
- Performing Asynchronous Processing by Using Web Workers
Lab: Creating a Web Worker Process - Improving Responsiveness by Using a Web Worker
- 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