Programming in HTML5 with JavaScript and CSS3

Session Detail:    Classroom, Virtual 5 Day

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.

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

Who Can Benefit

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).

Session Outline

Class Outline

Module 1: Overview of HTML and CSS

  • Lesson 1: Overview of HTML
  • Lesson 2: Overview of CSS
  • Lesson 3: Creating a Web Application by Using Visual Studio 2017

After completing this module, students will be able to:

  • Explain how to use HTML elements and attributes to layout 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

  • Lesson 1: Creating an HTML5 Page
  • Lesson 2: Styling an HTML5 Page

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

  • Lesson 1: Overview of JavaScript
  • Lesson 2: Introduction to the Document Object Model

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

  • Lesson 1: Creating HTML5 Forms
  • Lesson 2: Validating User Input by Using HTML5 Attributes
  • Lesson 3: Validating User Input by Using JavaScript

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

  • Lesson 1: Async programming in JavaScript
  • Lesson 2: Sending and Receiving Data by Using the XMLHttpRequest Object
  • Lesson 3: Sending and Receiving Data by Using the Fetch API

After completing this module, students will be able to:

  • Handle asynchronous JavaScript tasks using the new async programming 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

  • Lesson 1: Styling Text by Using CSS3
  • Lesson 2: Styling Block Elements
  • Lesson 3: Pseudo-Classes and Pseudo-Elements
  • Lesson 4: Enhancing Graphical Effects 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

  • Lesson 1: Writing Well-Structured JavaScript Code
  • Lesson 2: Creating Custom Objects
  • Lesson 3: Extending Objects

After this module, students will be able to:

  • Write a 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

  • Lesson 1: Interacting with Files
  • Lesson 2: Incorporating Multimedia
  • Lesson 3: Reacting to Browser Location and Context
  • Lesson 4: Debugging and Profiling a Web Application

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 on 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

  • Lesson 1: Reading and Writing Data Locally
  • Lesson 2: Adding Offline Support by Using the Application Cache

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

  • Lesson 1: Supporting Multiple Form Factors
  • Lesson 2: Creating 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

  • Lesson 1: Creating Interactive Graphics by Using SVG
  • Lesson 2: Drawing Graphics by Using the Canvas API

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

  • Lesson 1: Applying CSS Transitions
  • Lesson 2: Transforming Elements
  • Lesson 3: Applying CSS Keyframe Animations

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

 

  • Lesson 1: Introduction to Web Sockets
  • Lesson 2: Using the WebSocket API

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 webserver

 

Module 14: Performing Background Processing by Using Web Workers

  • Lesson 1: Understanding Web Workers
  • Lesson 2: Performing Asynchronous Processing by Using Web Workers

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

  • Lesson 1: Understanding Transpilers And Module bundling
  • Lesson 2: Creating Separate Packages for Cross Browser Support

Need to train your team?

All of our sessions can be customized to meet your team’s specific need. Build the perfect program by picking and choosing topics from any of the courses in our catalog. A personalized private session gives you the ultimate flexibility and helps maximize your team’s valuable time!

Requesting Team Training
DateTimeTypePriceAdd To Cart

Programming in HTML5 with JavaScript and CSS3

5 Day
Classroom, Virtual

$3,095.00

Chat with a Coach

Chat with a Coach

Have a more immediate need? Why spend the next hour searching online for answers when you can spend just 15 minutes with one of our experts and get accurate and personalized answers to all of your questions. 

$9.99 | 15 Minutes

Book Now