10953 - HTML 5 Programming Training

Answers to Popular Questions:

 
Yes, this class can be tailored to meet your specific training needs.
Yes, we provide Foundations of Web Design & Web Authoring consulting services.
Yes, group discounts are provided.

Course Description

 
This three-day instructor-led course provides participants with the knowledge and skills to develop HTML5 web applications using Microsoft Visual Studio 2010.
Course Length: 3 Days
Course Tuition: $1090 (US)

Prerequisites

This course is intended for entry-level developers for HTML who have a basic but limited understanding of HTML and who are interested in learning core HTML5, CSS, and JavaScript programming skills that are required to successfully create applications for the upcoming Internet Explorer 10 browser and the next version of the Windows operating system.

Course Outline

 

Course OutlineModule 1: Introduction to HTML5 DevelopmentThis module introduces HTML development, presenting all the basics needed to build a web site or application. It also introduces CSS and JavaScript, which with HTML are the basis for web development. It also introduces the jQuery JavaScript library, the most popular JavaScript library at the time of writing.

.Lessons

    Overview of HTML
    What's New in HTML5?
    Introduction to CSS
    Introduction to JavaScript
    Introduction to jQuery

Lab : Building a Basic Web Page in the Visual Studio 2010 SP1 Environment

    Writing the Home Page HTML
    Styling the Homepage
    Adding JavaScript and jQuery to Make a Dynamic Home Page

After completing this module, students will be able to:

    Explain HTML basics
    Explain what HTML5 is.
    Explain CSS basics.
    Explain JavaScript basics.
    Explain the jQuery Library.
    Identify the essential features of Visual Studio 2010 SP1 that are required to start developing HTML5 web application projects.

Module 2: Creating Page Structure and NavigationThis module explains the new HTML5 elements and their meaning, and how and when to use them. The module also discusses navigation and menus, which are the backbone of creating a website or application.

.Lessons

    HTML5 Structural Elements
    Navigation and Menus

Lab : Creating Page Structure and Navigation

    Using Semantic Elements in the Home Page.
    Creating the Game Details and Cart Pages.
    Adding Navigation and Menus to the Home Page.

After completing this module, students will be able to:

    Describe the new HTML5 structural elements.
    Examine the creation of web application navigation and the use of menus.
    Migrate HTML4 webpages to HTML5 webpages.

Module 3: Creating Form Input and ValidationThis module introduces the new input types and attributes that were added in HTML5. It also discusses the Modernizr JavaScript library, which detects HTML5 features and supplies polyfills for the new HTML5 elements.

.Lessons

    Working with Input Types
    Using Form Attributes
    Validation
    Using Browser Detection, Feature Detection, and Modernizr

Lab : Creating Form Input and Validation

    Creating the Checkout and Game Review Forms
    Adding Validation to the Checkout and Game Review Forms
    Adding Modernizr Support

After completing this module, students will be able to:

    Use the new input types.
    Apply the new attributes.
    Integrate validation into webpages.
    Use browser detection, feature detection and Modernizr.

Module 4: Laying Out and Styling WebpagesThis module explains important concepts about the layout and styling of webpages and applications. It also describes how to use the new features of Cascading Style Sheets 3 (CSS3), such as new selectors, text effects, and multi-column layouts, to improve the look and feel of your webpages.

.Lessons

    Creating Layouts
    Advanced CSS by Using CSS3

Lab : Laying Out and Styling Webpages

    Add a CSS3 style to the store’s webpages

After completing this module, students will be able to:

    Create a webpage layout.
    Apply advanced CSS to webpages.

Module 5: Getting Started with Graphics and Multimedia ElementsThis module explains the canvas element, which displays graphics, and the audio and video elements, which are used to play multimedia. These elements represent HTML5’s solution to add-on availability and cross-browser compatibility for multimedia and graphics.

.Lessons

    Canvas Basics
    Video/Audio Formats and Codecs
    Controlling Multimedia with JavaScript

Lab : Getting Started with Graphics and Multimedia Elements

    Adding Video to the Details Page
    Create a Slideshow Using the Canvas

After completing this module, students will be able to:

    Use the canvas element and manipulate it using JavaScript.
    Use the audio and video elements and control them using JavaScript.
    Add support for multiple audio and video codecs.

Module 6: Creating Advanced GraphicsThis module discusses some of the differences between SVG and Canvas. It also describes how to choose one over the other.

.Lessons

    Drawing with SVG
    Animation
    Choosing Between SVG and Canvas

Lab : Creating Advanced Graphics

    Adding an SVG Chart with Animation
    Adding Animation to the Game Details Canvas-Based Slideshow

After completing this module, students will be able to:

    Create basic graphics with SVG.
    Add animation to SVG and Canvas graphics.
    Choose between SVG and Canvas.

Module 7: Using Client-Side StorageThis module explains web storage and how to use its API to have a persistence mechanism on the client-side. It also introduces IndexedDB at a very high level because this specification is currently in development and might change in the future.

.Lessons

    Web Storage vs. Cookies
    Web Storage API

Lab : Using Client-Side Storage

    Creating the Cart Behavior by Using the localStorage Object
    Integrating the Cart with the Web Application

After completing this module, students will be able to:

    Use the web storage API.
    Differentiate between session storage and local storage.

Module 8: Using Advanced HTML5 JavaScript APIsThis module explains how to use other HTML5 JavaScript APIs, such as the drag-and-drop API, the file API to work with files, and the geolocation API to find the user location.

.Lessons

    Using the Drag-and-Drop API
    File API
    Geolocation API

Lab : Using Advanced HTML5 JavaScript APIs

    Integrating Drag-and-Drop Behavior into the Home Page
    Adding Geolocation Information to the Purchase Event
    Adding Coupon-Reading Behavior

After completing this module, students will be able to:

    Integrate drag-and-drop features into webpages.
    Work with the files by using the File API.
    Integrate the geolocation API into webpages.

Module 9: Using WebMatrix and Other Developer ToolsThis module explains other developer tools that you can use with HTML5. These tools include Microsoft WebMatrix, ASP.NET MVC3, and the Razor view engine. It also explains how to use these tools to create websites and applications.

.Lessons

    WebMatrix
    ASP.NET MVC3 and Razor

Lab : Using WebMatrix and Other Developer Tools

    Using WebMatrix to Create a Website
    Using ASP.NET MVC 3 to Create a Website

After completing this module, students will be able to:

    Use WebMatrix.
    Use ASP.NET MVC 3 and the Razor view engine.
 

Course OutlineModule 1: Introduction to HTML5 DevelopmentThis module introduces HTML development, presenting all the basics needed to build a web site or application. It also introduces CSS and JavaScript, which with HTML are the basis for web development. It also introduces the jQuery JavaScript library, the most popular JavaScript library at the time of writing.

.Lessons

  • Overview of HTML
  • What's New in HTML5?
  • Introduction to CSS
  • Introduction to JavaScript
  • Introduction to jQuery

Lab : Building a Basic Web Page in the Visual Studio 2010 SP1 Environment

  • Writing the Home Page HTML
  • Styling the Homepage
  • Adding JavaScript and jQuery to Make a Dynamic Home Page

After completing this module, students will be able to:

  • Explain HTML basics
  • Explain what HTML5 is.
  • Explain CSS basics.
  • Explain JavaScript basics.
  • Explain the jQuery Library.
  • Identify the essential features of Visual Studio 2010 SP1 that are required to start developing HTML5 web application projects.

Module 2: Creating Page Structure and NavigationThis module explains the new HTML5 elements and their meaning, and how and when to use them. The module also discusses navigation and menus, which are the backbone of creating a website or application.

.Lessons

  • HTML5 Structural Elements
  • Navigation and Menus

Lab : Creating Page Structure and Navigation

  • Using Semantic Elements in the Home Page.
  • Creating the Game Details and Cart Pages.
  • Adding Navigation and Menus to the Home Page.

After completing this module, students will be able to:

  • Describe the new HTML5 structural elements.
  • Examine the creation of web application navigation and the use of menus.
  • Migrate HTML4 webpages to HTML5 webpages.

Module 3: Creating Form Input and ValidationThis module introduces the new input types and attributes that were added in HTML5. It also discusses the Modernizr JavaScript library, which detects HTML5 features and supplies polyfills for the new HTML5 elements.

.Lessons

  • Working with Input Types
  • Using Form Attributes
  • Validation
  • Using Browser Detection, Feature Detection, and Modernizr

Lab : Creating Form Input and Validation

  • Creating the Checkout and Game Review Forms
  • Adding Validation to the Checkout and Game Review Forms
  • Adding Modernizr Support

After completing this module, students will be able to:

  • Use the new input types.
  • Apply the new attributes.
  • Integrate validation into webpages.
  • Use browser detection, feature detection and Modernizr.

Module 4: Laying Out and Styling WebpagesThis module explains important concepts about the layout and styling of webpages and applications. It also describes how to use the new features of Cascading Style Sheets 3 (CSS3), such as new selectors, text effects, and multi-column layouts, to improve the look and feel of your webpages.

.Lessons

  • Creating Layouts
  • Advanced CSS by Using CSS3

Lab : Laying Out and Styling Webpages

  • Add a CSS3 style to the store’s webpages

After completing this module, students will be able to:

  • Create a webpage layout.
  • Apply advanced CSS to webpages.

Module 5: Getting Started with Graphics and Multimedia ElementsThis module explains the canvas element, which displays graphics, and the audio and video elements, which are used to play multimedia. These elements represent HTML5’s solution to add-on availability and cross-browser compatibility for multimedia and graphics.

.Lessons

  • Canvas Basics
  • Video/Audio Formats and Codecs
  • Controlling Multimedia with JavaScript

Lab : Getting Started with Graphics and Multimedia Elements

  • Adding Video to the Details Page
  • Create a Slideshow Using the Canvas

After completing this module, students will be able to:

  • Use the canvas element and manipulate it using JavaScript.
  • Use the audio and video elements and control them using JavaScript.
  • Add support for multiple audio and video codecs.

Module 6: Creating Advanced GraphicsThis module discusses some of the differences between SVG and Canvas. It also describes how to choose one over the other.

.Lessons

  • Drawing with SVG
  • Animation
  • Choosing Between SVG and Canvas

Lab : Creating Advanced Graphics

  • Adding an SVG Chart with Animation
  • Adding Animation to the Game Details Canvas-Based Slideshow

After completing this module, students will be able to:

  • Create basic graphics with SVG.
  • Add animation to SVG and Canvas graphics.
  • Choose between SVG and Canvas.

Module 7: Using Client-Side StorageThis module explains web storage and how to use its API to have a persistence mechanism on the client-side. It also introduces IndexedDB at a very high level because this specification is currently in development and might change in the future.

.Lessons

  • Web Storage vs. Cookies
  • Web Storage API

Lab : Using Client-Side Storage

  • Creating the Cart Behavior by Using the localStorage Object
  • Integrating the Cart with the Web Application

After completing this module, students will be able to:

  • Use the web storage API.
  • Differentiate between session storage and local storage.

Module 8: Using Advanced HTML5 JavaScript APIsThis module explains how to use other HTML5 JavaScript APIs, such as the drag-and-drop API, the file API to work with files, and the geolocation API to find the user location.

.Lessons

  • Using the Drag-and-Drop API
  • File API
  • Geolocation API

Lab : Using Advanced HTML5 JavaScript APIs

  • Integrating Drag-and-Drop Behavior into the Home Page
  • Adding Geolocation Information to the Purchase Event
  • Adding Coupon-Reading Behavior

After completing this module, students will be able to:

  • Integrate drag-and-drop features into webpages.
  • Work with the files by using the File API.
  • Integrate the geolocation API into webpages.

Module 9: Using WebMatrix and Other Developer ToolsThis module explains other developer tools that you can use with HTML5. These tools include Microsoft WebMatrix, ASP.NET MVC3, and the Razor view engine. It also explains how to use these tools to create websites and applications.

.Lessons

  • WebMatrix
  • ASP.NET MVC3 and Razor

Lab : Using WebMatrix and Other Developer Tools

  • Using WebMatrix to Create a Website
  • Using ASP.NET MVC 3 to Create a Website

After completing this module, students will be able to:

  • Use WebMatrix.
  • Use ASP.NET MVC 3 and the Razor view engine.
- See more at: http://www.techsherpas.com/courses/microsoft-visual-studio-2010/10953-html5-programming#sthash.MSZA6DRR.dpuf

Course Directory [training on all levels]

Upcoming Classes