Introduction:

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.

Objectives:

  • 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 HTML5page 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 HTML5pages 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 commonHTML5 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:

Windows Server Administration Overview

  • Introducing Windows Server 2019
  • Windows Server Core Overview
  • Windows Server administration principles and tools overview

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

Creating and Styling HTML5 Pages

  • Creating an HTML5 Page
  • Styling an HTML5 Page
  • Lab: Creating and Styling HTML5 Pages

Introduction to JavaScript

  • Overview of JavaScript
  • Introduction to the DocumentObject Model
  • Lab: Displaying Data and HandlingEvents by Using JavaScript.

Creating Forms to Collect and Validate User Input

  • Creating HTML5 Forms
  • Validating User Input by Using HTML5Attributes
  • Validating User Input by Using JavaScript
  • Lab : Creating a Form and Validating User Input

Communicating with a RemoteServer

  • 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

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

Creating Objects and Methods by Using JavaScript

  • Writing Well-Structured JavaScript Code
  • Creating Custom Objects
  • Extending Objects
  • Lab : Refining Code for Maintainability and Extensibility.

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

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

Implementing an Adaptive User Interface

  • Supporting Multiple Form Factors
  • Creating an Adaptive User Interface
  • Lab: Implementing an Adaptive User Interface

Creating Advanced Graphics

  • Creating Interactive Graphics by Using SVG
  • Drawing Graphics by Using the Canvas API
  • Lab: Creating Advanced Graphics

Animating the User Interface

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

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

Performing Background Processing by Using Web Workers

  • Understanding Web Workers
  • Performing Asynchronous Processing by Using Web Workers
  • Lab: Creating a Web WorkerProcess

Packaging JavaScript for Production Deployment

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