Programming in HTML5 with Javascript and CSS3

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

After completing this course, students should 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.

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

• Exploring the Contoso Conference Application
• Examining and Modifying 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

• Creating HTML5 Pages
• Styling HTML pages

Module 3: Introduction to JavaScript

• Overview of JavaScript
• Introduction to the Document Object Model

Lab : Displaying Data and Handling Events by Using JavaScript.

• Displaying Data Programmatically
• Handling Events

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

• Creating a Form and Validating User Input by Using HTML5 Attributes
• Validating User Input by Using JavaScript

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

• Retrieving Data
• Serializing and Transmitting Data
• Refactoring the Code by Using the jQuery ajax Method

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

• Styling the Navigation Bar
• Styling the Register Link
• Styling the About Page

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