Programm
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:
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.
Ziele
- 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
- 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: Creating and Styling HTML5 Pages
- Creating HTML5 Pages
- Styling HTML pages
- Introduction to JavaScript
- Overview of JavaScript
- Introduction to the Document Object Model
- Lab: 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: 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: 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: 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 : 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: 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: 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: 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: 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: 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: 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: 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: Setting Up Webpack Bundle for Production
- Creating and Deploying Packages using WebPack
Voraussetzungen
Für dieses Seminar werden folgende Kenntnisse empfohlen:
- 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