Programming in HTML5 with JavaScript and CSS3


20480C - Version:1
Description
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.
Intended 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).
Expand All
  • Overview of HTML and CSS
    • Overview of HTML
    • Overview of CSS
    • Creating a Web Application by Using Visual Studio 2017
    • Lab 1: Exploring the Contoso Conference Application
      • Exploring the Contoso Conference Application
      • Examining and Modifying the Contoso Conference Application
  • Creating and Styling HTML Pages
    • Creating an HTML5 Page
    • Styling an HTML5 Page
    • Lab 1: Creating and Styling HTML5 Pages
      • Creating HTML5 Pages
      • Styling HTML pages
  • Introduction to JavaScript
    • Overview of JavaScript
    • Introduction to the Document Object Model
    • Lab 1: Displaying Data and Handling Events by Using JavaScript.
      • Displaying Data Programmatically
      • Handling Events
  • 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 1: Creating a Form and Validating User Input
      • Creating a Form and Validating User Input by Using HTML5 Attributes
      • Validating User Input by Using JavaScript
  • 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 1: Communicating with a Remote Data Source
      • Retrieving Data
      • Serializing and Transmitting Data
      • Refactoring the Code by Using the jQuery ajax Method
  • 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 1: Styling Text and Block Elements by Using CSS3
      • Styling the Navigation Bar
      • Styling the Register Link
      • Styling the About Page
  • Creating Objects and Methods by Using JavaScript
    • Writing Well-Structured JavaScript Code
    • Creating Custom Objects
    • Extending Objects
    • Lab 1: Refining Code for Maintainability and Extensibility
      • Object Inheritance
      • Refactoring JavaScript Code to Use Objects
  • 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 1: Creating Interactive Pages with HTML5 APIs
      • Dragging and Dropping Images
      • Incorporating Video
      • Using the Geolocation API to Report the User's Current Location
  • Adding Offline Support to Web Applications
    • Reading and Writing Data Locally
    • Adding Offline Support by Using the Application Cache
    • Lab 1: Adding Offline Support to Web Applications
      • Caching Offline Data by Using the Application Cache API
      • Persisting User Data by Using the Local Storage API
  • Implementing an Adaptive User Interface
    • Supporting Multiple Form Factors
    • Creating an Adaptive User Interface
    • Lab 1: Implementing an Adaptive User Interface
      • Creating a Print-Friendly Style Sheet
      • Adapting Page Layout to Fit Different Form Factors
  • Creating Advanced Graphics
    • Creating Interactive Graphics by Using SVG
    • Drawing Graphics by Using the Canvas API
    • Lab 1: Creating Advanced Graphics
      • Creating an Interactive Venue Map by Using SVG
      • Creating a Speaker Badge by Using the Canvas API
  • Animating the User Interface
    • Applying CSS Transitions
    • Transforming Elements
    • Applying CSS Keyframe Animations
    • Lab 1: Animating the User Interface
      • Applying CSS Transitions
      • Applying Keyframe Animations
  • Implementing Real-time Communication by Using Web Sockets
    • Introduction to Web Sockets
    • Using the WebSocket API
    • Lab 1: 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
  • Performing Background Processing by Using Web Workers
    • Understanding Web Workers
    • Performing Asynchronous Processing by Using Web Workers
    • Lab 1: Creating a Web Worker Process
      • Improving Responsiveness by Using a Web Worker
  • Packaging JavaScript for Production Deployment
    • Understanding Transpilers And Module bundling
    • Creating Separate Packages for Cross Browser Support
    • Lab 1: Setting Up Webpack Bundle for Production
      • Creating and Deploying Packages using WebPack
  • 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
  • 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