After completing this course, students will be able

20480C: Programming in HTML5 with to:

JavaScript and CSS3 • Explain how to use Visual Studio 2017 to
create and run a Web application.
Course Code: 20480C; Duration: 5 days; • Describe the new features of HTML5, and
Instructor-led create and style HTML5 pages.
• Add interactivity to an HTML5 page by using
JavaScript.
WHAT YOU WILL LEARN • Create HTML5 forms by using different input
This course provides an introduction to HTML5, types, and validate user input by using
CSS3, and JavaScript. This course helps students HTML5 attributes and JavaScript code.
gain basic HTML5/CSS3/JavaScript programming • Send and receive data to and from a remote
skills. This course is an entry point into both the data source by using XMLHTTPRequest
Web application and Windows Store apps training objects and Fetch API.
paths. The course focuses on using • Style HTML5 pages by using CSS3.
HTML5/CSS3/JavaScript to implement programming • Create well-structured and easily-
logic, define and use variables, perform looping and maintainable JavaScript code.
branching, develop user interfaces, capture and • Write modern JavaScript code and use babel
validate user input, store data, and create well- to make it compatible to all browsers.
structured application.The lab scenarios in this • Use common HTML5 APIs in interactive Web
course are selected to support and demonstrate the applications.
structure of various application scenarios. They are • Create Web applications that support offline
intended to focus on the principles and coding operations.
components/structures that are used to establish an • Create HTML5 Web pages that can adapt to
HTML5 software application.This course uses Visual different devices and form factors.
Studio 2017, running on Windows 10. • Add advanced graphics to an HTML5 page
by using Canvas elements, and by using
and Scalable Vector Graphics.
AUDIENCE • Enhance the user experience by adding
This course is intended for professional developers animations to an HTML5 page.
who have 6-12 months of programming experience • Use Web Sockets to send and receive data
and who are interested in developing applications between a Web application and a server.
using HTML5 with JavaScript and CSS3 (either • Improve the responsiveness of a Web
Windows Store apps for Windows 10 or web application that performs long-running
applications). operations by using Web Worker processes.
• Use WebPack to package web applications
PREREQUISITES for production.
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 OUTLINES
Studio 2017.
Module 1: Overview of HTML and CSS
METHODOLOGY
This program will be conducted with interactive Most modern web applications are built upon a
lectures, PowerPoint presentation, discussion and foundation of HTML pages that describe the content
practical exercise. that users read and interact with, style sheets to
make that content visually pleasing, and JavaScript
code to provide a level of interactivity between user
COURSE OBJECTIVES and page, and page and server. The web browser
uses the HTML markup and the style sheets to
20480C | Page 1 of 8
render this content, and runs the JavaScript code to • Creating an HTML5 Page
implement the behavior of the application. This • Styling an HTML5 Page
module reviews the basics of HTML and CSS, and
introduces the tools that this course uses to create Lab : Creating and Styling HTML5 Pages
HTML pages and style sheets. • Creating HTML5 Pages
• Styling HTML pages
Lessons
• Overview of HTML After completing this module, students will be able
• Overview of CSS to:
• Creating a Web Application by Using Visual • Describe the purpose of and new features in
Studio 2017 HTML5, and explain how to use new
HTML5 elements to lay out a web page.
Lab : Exploring the Contoso Conference
Application • Explain how to use CSS to style the layout,
• Exploring the Contoso Conference text, and background of a web page.
Application
• Examining and Modifying the Contoso
Module 3: Introduction to JavaScript
Conference Application

HTML and CSS provide the structural, semantic, and

After completing this module, students will be able
presentation information for a web page. However,
to:
these technologies do not describe how the user
• Explain how to use HTML elements and
interacts with a page by using a browser. To
attributes to lay out a web page.
implement this functionality, all modern browsers
• Explain how to use CSS to apply basic include a JavaScript engine to support the use of
styling to a web page. scripts in a page. They also implement Document
Object Model (DOM), a W3C standard that defines
• Describe the tools that Microsoft Visual how a browser should reflect a page in memory to
Studio provides for building web enable scripting engines to access and alter the
applications. contents of that page. This module introduces
JavaScript programming and DOM.

Lessons
Module 2: Creating and Styling HTML Pages • Overview of JavaScript
• Introduction to the Document Object Model
The technologies forming the basis of all web
applications—HTML, CSS, and JavaScript—have Lab : Displaying Data and Handling Events by
been available for many years, but the purpose and Using JavaScript.
sophistication of web applications have changed • Displaying Data Programmatically
significantly. HTML5 is the first major revision of
• Handling Events
HTML in 10 years, and it provides a highly suitable
means of presenting content for traditional web
After completing this module, students will be able
applications, applications running on handheld
to:
mobile devices, and also on the Windows 10
• Describe basic JavaScript syntax.
platform. This module introduces HTML5, describes
its new features, demonstrates how to present • Write JavaScript code that uses the DOM to
content by using the new features in HTML5, and alter and retrieve info from a web page.
how to style this content by using CSS.

Lessons

20480C | Page 2 of 8
Module 4: Creating Forms to Collect and the remote site and made accessible through a web
Validate User Input service. In this module, you will learn how to access
a web service by using JavaScript code and to
Web applications frequently need to gather user incorporate remote data into your web applications.
input in order to perform their tasks. A web page You will look at two technologies for achieving this:
needs to be clear and concise about the input the XMLHttpRequest object, which acts as a
expected from a user in order to minimize programmatic wrapper around HTTP requests to
frustrating misunderstandings about the information remote web sites, and Fetch API, which simplifies
that the user should provide. Additionally, all input many of the tasks involved in sending requests and
must be validated to ensure that it conforms to the receiving data. Because the Fetch API and the
requirements of the application. In this module, you XMLHttpRequest object are asynchronous api You
will learn how to define input forms by using the will first learn about how to handle asynchronous
new input types available in HTML5. You will also tasks with the Promise object, arrow functions and
see how to validate data by using HTML5 attributes. the new async/await syntax that lets you handle
Finally, you will learn how to perform extended asynchronous request as if they were synchronous.
input validation by using JavaScript code, and how
to provide feedback to users when their input is not Lessons
valid or does not match the application’s • Async programming in JavaScript
expectations. • Sending and Receiving Data by Using the
XMLHttpRequest Object
Lessons • Sending and Receiving Data by Using the
• Creating HTML5 Forms Fetch API
• Validating User Input by Using HTML5
Attributes Lab : Communicating with a Remote Data
• Validating User Input by Using JavaScript Source
• Retrieving Data
Lab : Creating a Form and Validating User • Serializing and Transmitting Data
Input • Refactoring the Code by Using the jQuery
• Creating a Form and Validating User Input ajax Method
by Using HTML5 Attributes
• Validating User Input by Using JavaScript After completing this module, students will be able
to:
After completing this module, students will be able • Handle asynchronous JavaScript tasks using
to: the new async programing technologies.
• Create input forms by using HTML5.
• Send data to a web service and receive data
• Use HTML5 form attributes to validate data. from a web service by using an
XMLHttpRequest object.
• Write JavaScript code to perform validation
tasks that cannot easily be implemented • Send data to a web service and receive data
by using HTML5 attributes. from a web service by using the Fetch API.

Module 5: Communicating with a Remote Module 6: Styling HTML5 by Using CSS3

Server
Styling the content displayed by a web page is an
Many web applications require the use of data held important aspect of making an application attractive
by a remote site. In some cases, you can access and easy to use. CSS is the principal mechanism
this data simply by downloading it from a specified that web applications use to implement styling, and
URL, but in other cases the data is encapsulated by the features added to CSS3 support many of the

20480C | Page 3 of 8
new capabilities found in modern browsers. Where code. This module describes how to write well-
CSS1 and CSS2.1 were single documents, the World structured JavaScript code by using language
Wide Web Consortium has chosen to write CSS3 as features such as namespaces, objects,
a set of modules, each focusing on a single aspect encapsulation, and inheritance. These concepts
of presentation such as color, text, box model, and might seem familiar if you have experience in a
animations. This allows the specifications to develop language such as Java or C#, but the JavaScript
incrementally, along with their implementations. approach is quite different and there are many
Each specification defines properties and values that subtleties that you must understand if you want to
already exist in CSS1 and CSS2, and also new write maintainable code.
properties and values. In this module, you will
examine the properties and values defined in Lessons
several of these modules, the new selectors defined • Writing Well-Structured JavaScript Code
in CSS3, and the use of pseudo-classes and pseudo- • Creating Custom Objects
elements to refine those selections. • Extending Objects

Lessons Lab : Refining Code for Maintainability and

• Styling Text by Using CSS3 Extensibility
• Styling Block Elements • Object Inheritance
• Pseudo-Classes and Pseudo-Elements • Refactoring JavaScript Code to Use Objects
• Enhancing Graphical Effects by Using CSS3
After this module, students will be able to:
Lab : Styling Text and Block Elements by Using • Write well-structured JavaScript code.
CSS3
• Styling the Navigation Bar • Use JavaScript code to create custom
• Styling the Register Link objects.
• Styling the About Page
• Implement object-oriented techniques by
using JavaScript idioms.
After completing this module, students will be able
to:
• Use the new features of CSS3 to style text Module 8: Creating Interactive Pages by Using
elements. HTML5 APIs

• Use the new features of CSS3 to style block Interactivity is a key aspect of modern web
elements.
applications, enabling you to build compelling web
sites that can quickly respond to the actions of the
• Use CSS3 selectors, pseudo-classes, and
user, and also adapt themselves to the user's
pseudo-elements to refine the styling of
location. This module describes how to create
elements.
interactive HTML5 web applications that can access
• Enhance pages by using CSS3 graphical the local file system, enable the user to drag-and-
effects. drop data onto elements in a web page, play
multimedia files, and obtain geolocation
information.
Module 7: Creating Objects and Methods by
Using JavaScript Lessons
• Interacting with Files
Code reuse and ease of maintenance are key • Incorporating Multimedia
objectives of writing well-structured applications. If • Reacting to Browser Location and Context
you can meet these objectives, you will reduce the • Debugging and Profiling a Web Application
costs associated with writing and maintaining your

20480C | Page 4 of 8
Lab : Creating Interactive Pages with HTML5
APIs After completing this module, students will be able
• Dragging and Dropping Images to:
• Incorporating Video • Save data locally on the user's device, and
• Using the Geolocation API to Report the access this data from a web application.
User's Current Location
After completing this module, students will be able • Configure a web application to support
to: offline operations by using the Application
Cache.
• Access the local file system, and add drag-
and-drop support to web pages.
Module 10: Implementing an Adaptive User
• Play video and audio files in a web page,
Interface
without the need for plugins.
Obtain information about the current
One of the most enduring features of the web is its
location of the user.
temporary nature. For the first time, the monopoly
• Use the F12 Developer Tools in Microsoft of the keyboard and mouse is coming under
Edge to debug and profile a web challenge, and that means questioning how user
application. interfaces are designed. You may develop a web
application on a computer with a large, high-
resolution monitor, a mouse, and a keyboard, but
Module 9: Adding Offline Support to Web other users might view and interact with your
Applications application on a smartphone or a tablet without a
mouse, or have a monitor with a different
Web applications have a dependency on being able resolution. Users may also want to print pages of
to connect to a network to fetch web pages and your application. In this module, you will learn how
data. However, in some environments a network to build a website that adapts the layout and
connection may be intermittent. In these situations, functionality of its pages to the capabilities and
it might be useful to enable the application to form factor of the device on which it is being
continue functioning by using data cached on the viewed. You will see how to detect the type of
user's device. HTML5 provides a choice of new device being used to view a page, and learn
client-side storage options, including session strategies for laying out content that effectively
storage and local storage, and a resource caching targets particular devices.
mechanism called the Application Cache. In this
module, you will learn how to use these Lessons
technologies to create robust web applications that • Supporting Multiple Form Factors
can continue running even when a network • Creating an Adaptive User Interface
connection is unavailable.
Lab : Implementing an Adaptive User
Lessons Interface
• Reading and Writing Data Locally • Creating a Print-Friendly Style Sheet
• Adding Offline Support by Using the • Adapting Page Layout to Fit Different Form
Application Cache Factors

Lab : Adding Offline Support to Web After completing this module, students will be able
Applications to:
• Caching Offline Data by Using the • Describe the requirements in a website for
Application Cache API responding to different form factors.
• Persisting User Data by Using the Local
Storage API
20480C | Page 5 of 8
 • Create web pages that can adapt their carefully, animations improve the usability of a web
layout to match the form factor of the page and provide useful visual feedback on user
device on which they are displayed. actions. This module describes how to enhance web
pages by using CSS animations. You will learn how
to apply transitions to property values. Transitions
Module 11: Creating Advanced Graphics enable you to specify the timing of property
changes. For example, you can specify that an
High-resolution, interactive graphics are a key part element should change its width and height over a
of most modern applications. Graphics can help to five-second period when the mouse pointer hovers
enhance the user's experience by providing a visual over it. Next, you will learn how to apply 2D and 3D
aspect to the content, making a website more transformations to elements. Transformations
attractive and easier to use. Interactivity enables enable you to scale, translate, rotate, and skew
the graphical elements in a website to adapt and elements. You can also apply transitions to
respond to user input or changes to the transformations, so that the transformation is
environment, and is another important element in applied gradually over a specified animation period.
retaining the attention of the user and their interest At the end of this module, you will learn how to
in the content. This module describes how to create apply keyframe animations to elements. Keyframe
advanced graphics in HTML5 by using Scalable animations enable you to define a set of property
Vector Graphics (SVG) and the Microsoft Canvas values at specific moments during an animation. For
API. You will learn how to use SVG-related elements example, you can specify the color and position of
such as , , andto display graphical content on a web an element at 0 percent, 33 percent, 66 percent,
page. You will also learn how to enable the user to and 100 percent of the animation period.
interact with SVG elements through the use of
events such as keyboard events and mouse events. Lessons
The Canvas API is somewhat different than SVG. • Applying CSS Transitions
The Canvas API provides a • Transforming Elements
• Applying CSS Keyframe Animations
Lessons
• Creating Interactive Graphics by Using SVG Lab : Animating the User Interface
• Drawing Graphics by Using the Canvas API • Applying CSS Transitions
• Applying Keyframe Animations
Lab : Creating Advanced Graphics
• Creating an Interactive Venue Map by Using After completing this module, students will be able
SVG to:
• Creating a Speaker Badge by Using the • Apply transitions to animate property values
Canvas API to HTML elements.

After completing this module, students will be able • Apply 2D and 3D transformations to HTML
to: elements.
• Use SVG to create interactive graphical
content. • Apply keyframe animations to HTML
elements.
• Use the Canvas API to generate graphical
content programmatically.
Module 13: Implementing Real-time
Communication by Using Web Sockets
Module 12: Animating the User Interface
Web pages request data on demand from a web
Animations are a key element in maintaining the server by submitting HTTP requests. This model is
interest of a user in a website. Implemented ideal for building interactive applications, where the

20480C | Page 6 of 8
functionality is driven by the actions of a user. become unresponsive and degrade the user's
However, in an application that needs to display experience. HTML5 introduces web workers, which
constantly changing information, this mechanism is enable you to offload processing to separate
less suitable. For example, a financial stocks page is background threads and thus enable the browser to
worthless if it shows prices that are even a few remain responsive. This module describes how web
minutes old, and you cannot expect a user to workers operate and how you can use them in your
constantly refresh the page displayed in the web applications.
browser. This is where web sockets are useful. The
Web Sockets API provides a mechanism for Lessons
implementing real-time, two-way communication • Understanding Web Workers
between web server and browser. This module • Performing Asynchronous Processing by
introduces web sockets, describes how they work, Using Web Workers
and explains how to create a web socket connection
that can be used to transmit data in real time Lab : Creating a Web Worker Process
between a web page and a web server. • Improving Responsiveness by Using a Web
Worker
Lessons
• Introduction to Web Sockets After completing this module, students will be able
• Using the WebSocket API to:
• Explain how web workers can be used to
implement multithreading and improve the
Lab : Performing Real-time Communication by responsiveness of a web application.
Using Web Sockets
• Receiving Messages from a Web Socket • Perform processing by using a web worker,
• Sending Messages to a Web Socket communicate with a web worker, and
• Handling Different Web Socket Message control a web worker.
Types

Module 15: Packaging JavaScript for

After completing this module, students will be able
Production Deployment
to:
• Describe how using web sockets helps to Using models allows you to build large, complex
enable real-time communications between
applications. The progress of the language in the
a web page and a web server.
version of ECMAScript6 allows the build app with to
simplify the application construction process.
• Use the Web Sockets API to connect to a
However, the use of ECMAScript6 modules and
web server from a web page, and
other features is not yet supported in all browsers.
exchange messages between the web page
Tools such as Node.js, Webpack, and Babel enable
and the web server.
the use of new language features along with
support for different browsers in order to avoid
Module 14: Performing Background Processing harming the user experience. In this module we will
by Using Web Workers introduce the theory behind these tools, when we
need to used them, and the different options for
JavaScript code is a powerful tool for implementing use. At the end of the module we will see how to
functionality in a web page, but you need to use these tools to write ECMAScript6 code
remember that this code runs either when a web supported in all browsers.
page loads or in response to user actions while the
web page is being displayed. The code is run by the Lessons
browser, and if the code performs operations that • Understanding Transpilers And Module
take a significant time to complete, the browser can bundling

20480C | Page 7 of 8
 • Creating Separate Packages for Cross
Browser Support

Lab : Setting Up Webpack Bundle for

Production
• Creating and Deploying Packages using
WebPack

20480C | Page 8 of 8