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).
Prerequisites
- 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
Duration
5 days. Hands on.
Course Objectives
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.
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.
Course Content
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
After completing this module, students will be able to:
• Explain how to use HTML elements and attributes to lay out a web page.
• Explain how to use CSS to apply basic styling to a web page.
• Describe the tools that Microsoft Visual Studio provides for building web applications.
Module 2: Creating and Styling HTML Pages
Creating an HTML5 Page
Styling an HTML5 Page
Lab : Creating and Styling HTML5 Pages
After completing this module, students will be able to:
• Describe the purpose of and new features in HTML5, and explain how to use new HTML5 elements to lay out a web page.
• Explain how to use CSS to style the layout, text, and background of a web page.
Module 3: Introduction to JavaScript
Overview of JavaScript
Introduction to the Document Object Model
Lab : Displaying Data and Handling Events by Using JavaScript
After completing this module, students will be able to:
• Describe basic JavaScript syntax.
• Write JavaScript code that uses the DOM to alter and retrieve info from a web page.
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
After completing this module, students will be able to:
• Create input forms by using HTML5.
• Use HTML5 form attributes to validate data.
• Write JavaScript code to perform validation tasks that cannot easily be implemented by using HTML5 attributes.
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
After completing this module, students will be able to:
• Handle asynchronous JavaScript tasks using the new async programing technologies.
• Send data to a web service and receive data from a web service by using an XMLHttpRequest object.
• Send data to a web service and receive data from a web service by using the Fetch API.
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
After completing this module, students will be able to:
• Use the new features of CSS3 to style text elements.
• Use the new features of CSS3 to style block elements.
• Use CSS3 selectors, pseudo-classes, and pseudo-elements to refine the styling of elements.
• Enhance pages by using CSS3 graphical effects.
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
After this module, students will be able to:
• Write well-structured JavaScript code.
• Use JavaScript code to create custom objects.
• Implement object-oriented techniques by using JavaScript idioms.
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
After completing this module, students will be able to:
• Access the local file system, and add drag-and-drop support to web pages.
• Play video and audio files in a web page, without the need for plugins.
• Obtain information about the current location of the user.
• Use the F12 Developer Tools in Microsoft Edge to debug and profile a web application.
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
After completing this module, students will be able to:
• Save data locally on the user's device, and access this data from a web application.
• Configure a web application to support offline operations by using the Application Cache.
Module 10: Implementing an Adaptive User Interface
Supporting Multiple Form Factors
Creating an Adaptive User Interface
Lab : Implementing an Adaptive User Interface
After completing this module, students will be able to:
• Describe the requirements in a website for responding to different form factors.
• Create web pages that can adapt their layout to match the form factor of the device on which they are displayed.
Module 11: Creating Advanced Graphics
Creating Interactive Graphics by Using SVG
Drawing Graphics by Using the Canvas API
Lab : Creating Advanced Graphics
After completing this module, students will be able to:
• Use SVG to create interactive graphical content.
• Use the Canvas API to generate graphical content programmatically.
Module 12: Animating the User Interface
Applying CSS Transitions
Transforming Elements
Applying CSS Keyframe Animations
Lab : Animating the User Interface
After completing this module, students will be able to:
• Apply transitions to animate property values to HTML elements.
• Apply 2D and 3D transformations to HTML elements.
• Apply keyframe animations to HTML elements.
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
After completing this module, students will be able to:
• Describe how using web sockets helps to enable real-time communications between a web page and a web server.
• Use the Web Sockets API to connect to a web server from a web page, and exchange messages between the web page and the web server.
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
After completing this module, students will be able to:
• Explain how web workers can be used to implement multithreading and improve the responsiveness of a web application.
• Perform processing by using a web worker, communicate with a web worker, and control 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