MS 20480C: Programming in HTML5 With JavaScript and CSS3 Days: 5 Prerequisites: This course is intended for students who have the following experience: 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. 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). Course Objectives: After taking this course students will be able to: Explain how to use Visual Studio 2012 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 XMLHTTP Request objects and Fetch API Style HTML5 pages by using CSS3. Create a well-structured and easily-maintainable JavaScript code. Write modern JavaScript code and use babel to make it compatible to all browsers 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. OUTLINE: MODULE 1: OVERVIEW OF HTML AND CSS Creating a Web Application by Using Visual Studio 2012 This module reviews the basic of HTML and CSS, and introduces the tools that this course uses to LAB: EXPLORING THE CONTOSO CONFERENCE create HTML pages and style sheets. APPLICATION Walkthrough of the Contoso LESSONS Conference Application Overview of HTML Examining and Modifying the Overview of CSS Contoso Conference Application Baton Rouge | Lafayette | New Orleans www.lantecctc.com MS 20480C: Programming in HTML5 With JavaScript and CSS3 AFTER COMPLETING THIS MODULE, STUDENTS AFTER COMPLETING THIS MODULE, STUDENTS WILL BE ABLE TO: WILL BE ABLE TO: Describe basic HTML elements and Explain the syntax of JavaScript attributes. and describe how to use JavaScript Explain the structure of CSS. with HTML5. Describe the tools available in Write JavaScript code that Visual Studio 2012 for building manipulates the HTML DOM and Web applications. handles events. Describe how to use jQuery to MODULE 2: CREATING AND STYLING HTML5 simplify code that uses many PAGES common JavaScript APIs. This module describes the new features of HTML5, and explains how to create and style MODULE 4: CREATING FORMS TO COLLECT HTML5 pages. DATA AND VALIDATE USER INPUT This module describes the new input types LESSONS available with HTML5, and explains how to Creating an HTML5 Page create forms to collect and validate user input by Styling an HTML5 Page using the new HTML5 attributes and JavaScript code. LAB: CREATING AND STYLING HTML5 PAGES LESSONS Creating HTML5 Pages Styling HTML5 Pages Overview of Forms and Input Types Validating User Input by Using AFTER COMPLETING THIS MODULE, STUDENTS HTML5 Attributes WILL BE ABLE TO: Validating User Input by Using Create static pages using the new JavaScript features available in HTML5. LAB: CREATING A FORM AND VALIDATING Use CSS3 to apply basic styling to USER INPUT the elements in an HTML5 page. Creating a Form and Validating MODULE 3: INTRODUCTION TO JAVASCRIPT User Input by Using HTML5 This module provides an introduction to the Attributes JavaScript language, and shows how to use Validating User Input by Using JavaScript to add interactivity to HTML5 pages. JavaScript LESSONS AFTER COMPLETING THIS MODULE, STUDENTS WILL BE ABLE TO: Overview of JavaScript Syntax Programming the HTML DOM with Create forms that use the new JavaScript HTML5 input types. Introduction to jQuery Validate user input and provide feedback by using the new HTML5 LAB: DISPLAYING DATA AND HANDLING attributes. EVENTS BY USING JAVASCRIPT Write JavaScript code to validate user input and provide feedback in Displaying Data Programmatically cases where it is not suitable to use Handling Events HTML5 attributes Baton Rouge | Lafayette | New Orleans www.lantecctc.com MS 20480C: Programming in HTML5 With JavaScript and CSS3 MODULE 5: COMMUNICATING WITH A AFTER COMPLETING THIS MODULE, STUDENTS REMOTE DATA SOURCE WILL BE ABLE TO: This module describes how to send and receive Style text elements on an HTML5 data to and from a remote data source by using page by using CSS3. an XMLHTTPRequest object and by performing Apply styling to block elements by jQuery AJAX operations. using CSS3. Use CSS3 selectors to specify the LESSONS elements to be styled in a Web Sending and Receiving Data by application. Using XMLHTTPRequest Implement graphical effects and Sending and Receiving Data by transformations by using the new Using jQuery AJAX operations CSS3 properties. LAB: COMMUNICATING WITH A REMOTE DATA MODULE 7: CREATING OBJECTS AND SOURCE METHODS BY USING JAVASCRIPT This module explains how to write well-structured Retrieving Data and easily-maintainable JavaScript code, and Serializing and Transmitting Data Refactoring the Code by Using how to apply object-oriented principles to jQuery ajax method JavaScript code in a Web application. AFTER COMPLETING THIS MODULE, STUDENTS LESSONS WILL BE ABLE TO: Writing Well-Structured JavaScript Serialize, deserialize, send, and Creating Custom Objects receive data by using Extending Objects XMLHTTPRequest objects. LAB: REFINING CODE FOR MAINTAINABILITY Simplify code that serializes, deserializes, sends, and receives AND EXTENSIBILITY data by using the jQuery ajax Inheriting From Objects method. Refactoring Code to Use Objects MODULE 6: STYLING HTML5 BY USING CSS3 AFTER COMPLETING THIS MODULE, STUDENTS This module describes how to style HTML5 pages WILL BE ABLE TO: and elements by using the new features Describe the benefits of structuring available in CSS3. JavaScript code carefully to aid maintainability and extensibility. LESSONS Explain best practices for creating Styling Text custom objects in JavaScript. Styling Block Elements Describe how to extend custom and CSS3 Selectors native objects to add functionality. Enhancing Graphical Effects by Using CSS3 MODULE 8: CREATING INTERACTIVE PAGES USING HTML5 APIS LAB: STYLING TEXT AND BLOCK ELEMENTS This module describes how to use some common USING CSS3 HTML5 APIs to add interactive features to a Styling the Navigation Bar Web application. This module also explains how Styling the Page Header to debug and profile a Web application. Styling the About Page Baton Rouge | Lafayette | New Orleans www.lantecctc.com MS 20480C: Programming in HTML5 With JavaScript and CSS3 LESSONS AFTER COMPLETING THIS MODULE, STUDENTS Interacting with Files WILL BE ABLE TO: Incorporating Multimedia Save and retrieve data locally on Reacting to Browser Location and the user's computer by using the Context Local Storage API. Debugging and Profiling a Web Provide offline support for a Web Application application by using the Application Cache API. LAB: CREATING INTERACTIVE PAGES BY USING HTML5 APIS MODULE 10: IMPLEMENTING AN ADAPTIVE USER INTERFACE Incorporating Video Incorporating Images This module describes how to create HTML5 Using the Geolocation API pages that can dynamically detect and adapt to different devices and form factors. AFTER COMPLETING THIS MODULE, STUDENTS WILL BE ABLE TO: LESSONS Use the Drag and Drop, and the Supporting Multiple Form Factors File APIs to interact with files in a Creating an Adaptive User Web application. Interface Incorporate audio and video into a Web application. LAB: IMPLEMENTING AN ADAPTIVE USER Detect the location of the user INTERFACE running a Web application by Creating a Print-Friendly Stylesheet using the Geolocation API. Adapting Page Layout To Fit a Explain how to debug and profile a Different Form Factor Web application by using the Web Timing API and the Internet AFTER COMPLETING THIS MODULE, STUDENTS Explorer Developer Tools. WILL BE ABLE TO: MODULE 9: ADDING OFFLINE SUPPORT TO Describe the need to detect device WEB APPLICATIONS capabilities and react to different form factors in a Web application. This module describes how to add offline support Create a Web page that can to a Web application, to enable the application dynamically adapt its layout to to continue functioning in a user's browser even if match different form factors. the browser is disconnected from the network. MODULE 11: CREATING ADVANCED LESSONS GRAPHICS Reading and Writing Data Locally This module describes how to create advanced Adding Offline Support by Using graphics for an HTML5 Web application by the Application Cache using a Canvas element, and by using Scalable Vector Graphics. LAB: ADDING OFFLINE SUPPORT TO A WEB APPLICATION LESSONS Implementing the Application Cache Creating Interactive Graphics by Implementing Local Storage Using Scalable Vector Graphics Programmatically Drawing Graphics by Using a Canvas Baton Rouge | Lafayette | New Orleans www.lantecctc.com