V.le P.A. Pirelli 6, Milano - academy@digi.it - 0269438264

Corsi Microsoft

Cerca un corso

Programming in HTML5 with JavaScript and CSS3

Codice corso: 20480C
Durata corso: 5gg

Introduzione

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.

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

Obiettivi del corso

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.

 

 

Prerequisiti

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 Struttura del Corso

MODULE 1: Overview of HTML and CSS

This module reviews the basics of HTML and CSS, and introduces the tools that this course uses to create HTML pages and style sheets.

Lessons

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

Exploring the Contoso Conference Application

Examining and Modifying the Contoso Conference Application

Lab : Exploring the Contoso Conference Application

MODULE 2: Creating and Styling HTML Pages

This module introduces HTML5, describes its new features, demonstrates how to present content by using the new features in HTML5, and how to style this content by using CSS.

Lessons

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

Lab : Creating and Styling HTML5 Pages

MODULE 3: Introduction to JavaScript

This module introduces JavaScript programming and DOM.

Lessons

After completing this module, students will be able to:

Describe basic JavaScript syntax

Write JavaScript code that uses Document Object Model (DOM) to alter and retrieve info from a web page

Displaying Data Programmatically

Handling Events

Lab : Displaying Data and Handling Events by Using JavaScript

MODULE 4: Creating Forms to Collect and Validate User Input

In this module, you will learn how to define input forms by using the new input types available in HTML5. You will also see how to validate data by using HTML5 attributes. Finally, you will learn how to perform extended input validation by using JavaScript code, and how to provide feedback to users when their input is not valid or does not match the application’s expectations.

Lessons

After completing this module, students will be able to:

Create input Forms by using HTML5.

Use HTML5 Form Attributes to validate data

Validate User Input by Using JavaScript

Create a Form and Validate User Input by Using HTML5 Attributes

Validate User Input by Using JavaScript

Lab : Creating a Form and Validating User Input

MODULE 5: Communicating with a Remote Server

In this module, you will learn how to access a web service by using JavaScript code and to incorporate remote data into your web applications. You will look at two technologies for achieving this: the XMLHttpRequest object, which acts as a programmatic wrapper around HTTP requests to remote web sites, and Fetch API, which simplifies many of the tasks involved in sending requests and receiving data. Because the Fetch API and the XMLHttpRequest object are asynchronous api You will first learn about how to handle asynchronous tasks with the Promise object, arrow functions and the new async/await syntax that lets you handle asynchronous request as if they were synchronous.

Lessons

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

Retrieving Data

Serializing and Transmitting Data

Refactoring the Code by Using the jQuery ajax Method

Lab : Communicating with a Remote Data Source

MODULE 6: Styling HTML5 by Using CSS3

This allows the specifications to develop incrementally, along with their implementations. Each specification defines properties and values that already exist in CSS1 and CSS2, and also new properties and values. In this module, you will examine the properties and values defined in several of these modules, the new selectors defined in CSS3, and the use of pseudo-classes and pseudo-elements to refine those selections.

Lessons

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

Styling the Navigation Bar

Styling the Register Link

Styling the About Page

Lab : Styling Text and Block Elements by Using CSS3

MODULE 7: Creating Objects and Methods by Using JavaScript

This module describes how to write well-structured JavaScript code by using language features such as namespaces, objects, encapsulation, and inheritance. These concepts might seem familiar if you have experience in a language such as Java or C#, but the JavaScript approach is quite different and there are many subtleties that you must understand if you want to write maintainable code.

Lessons

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

Object Inheritance

Refactoring JavaScript Code to Use Objects

Lab : Refining Code for Maintainability and Extensibility

MODULE 8: Creating Interactive Pages by Using HTML5 APIs

This module describes how to create interactive HTML5 web applications that can access the local file system, enable the user to drag-and-drop data onto elements in a web page, play multimedia files, and obtain geolocation information.

Lessons

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

Dragging and Dropping Images

Incorporating Video

Obtain information about the current location of the user

Use the F12 Developer Tools in Microsoft Edge to debug and profile a web application

Using the Geolocation API to Report the User's Current Location

Lab : Creating Interactive Pages with HTML5 APIs

MODULE 9: Adding Offline Support to Web Applications

In this module, you will learn how to use these technologies to create robust web applications that can continue running even when a network connection is unavailable.

Lessons

After completing this module, students will be able to:

Reading and Writing Data Locally

Adding Offline Support by Using the Application Cache

Caching Offline Data by Using the Application Cache API

Persisting User Data by Using the Local Storage API

Lab : Adding Offline Support to Web Applications

MODULE 10: Implementing an Adaptive User Interface

In this module, you will learn how to build a website that adapts the layout and functionality of its pages to the capabilities and form factor of the device on which it is being viewed. You will see how to detect the type of device being used to view a page, and learn strategies for laying out content that effectively targets particular devices.

Lessons

After completing this module, students will be able to:

Supporting Multiple Form Factors

Creating an Adaptive User Interface

Creating a Print-Friendly Style Sheet

Adapting Page Layout to Fit Different Form Factors

Lab : Implementing an Adaptive User Interface

MODULE 11: Creating Advanced Graphics

This module describes how to create advanced graphics in HTML5 by using Scalable Vector Graphics (SVG) and the Microsoft Canvas API. You will learn how to use SVG-related elements such as , , and to display graphical content on a web page. You will also learn how to enable the user to interact with SVG elements through the use of events such as keyboard events and mouse events. The Canvas API is somewhat different than SVG. The Canvas API provides a 

Lessons

After completing this module, students will be able to:

Use SVG to create Interactive Graphics content

Use the Canvas API to generate Graphics content programmatically

Create an Interactive Venue Map by Using SVG

Create a Speaker Badge by Using the Canvas API

Lab : Creating Advanced Graphics

MODULE 12: Animating the User Interface

At the end of this module, you will learn how to apply keyframe animations to elements. Keyframe animations enable you to define a set of property values at specific moments during an animation. For example, you can specify the color and position of an element at 0 percent, 33 percent, 66 percent, and 100 percent of the animation period.

Lessons

After completing this module, students will be able to:

Apply CSS Transitions to animate property values to HTML elements.

Apply 2D and 3D transformations to HTML elements.

Apply CSS Keyframe Animations to HTML elements

Lab : Animating the User Interface

MODULE 13: Implementing Real-time Communication by Using Web Sockets

This module introduces web sockets, describes how they work, and explains how to create a web socket connection that can be used to transmit data in real time between a web page and a web server.

Lessons

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

Lab : Performing Real-time Communication by Using Web Sockets

MODULE 14: Performing Background Processing by Using Web Workers

This module describes how web workers operate and how you can use them in your web applications.

Lessons

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 Workers, communicate with a web worker, and control a Web Workers

Lab : Creating a Web Worker Process

MODULE 15: Packaging JavaScript for Production Deployment

In this module we will introduce the theory behind these tools, when we need to used them, and the different options for use. At the end of the module we will see how to use these tools to write ECMAScript6 code supported in all browsers.

Lessons

Understanding Transpilers And Module bundling

Creating Separate Packages for Cross Browser Support

Lab : Setting Up Webpack Bundle for Production

P.IVA 06249920965
C.C.I.A.A. REA: MI - 1880014
Cap. Soc. € 12.000,00

Contatti

V.le P.A. Pirelli 6,20126 Milano
Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.
Tel.: +39 02 694 382 64
Fax.: +39 02 694 382 35

© Copyright 2020 DI.GI. Academy
Privacy Policy | Cookie Policy