20480: Programming in HTML5 with JavaScript and CSS3

20480: Programming in HTML5 with JavaScript and CSS3

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.

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

Virtual Courses

ALL of our courses can be delivered virtually. And our Bath public schedule of courses are now available as live virtual sessions, using the popular Zoom Virtual Classroom and remote labs. Delegates can test their access at: www.zoom.us/test

Public Courses

On-Site Courses

Can't attend one of our public classes? Booking for multiple people?

All our courses are available on your site! Delivered for your staff, at your premises.

Contact us to find out more...