Advanced Features of JavaScript, CSS3 and HTML5

This course is included in the Everything IT Self-Paced training package.

Overview

HTML5, CSS3, and JavaScript provide a variety of advanced features for creating highly interactive and responsive web pages. In this course you will learn how to utilize JavaScript to create timers and marquees, implement drag and drop in HTML5, access and validate form data, and manipulate forms with CSS3. You will also learn how to handle events and include meters and progress indicators in an HTML5 page.

Target Audience

Web developers who need to use the most powerful features of HTML5, CSS3, and JavaScript to create responsive and interactive web pages

Prerequisites

None

Expected Duration

120 min.

Course Objectives

Course Introduction

Displaying Time with JavaScript in HTML5

  • use JavaScript to create an HTML5 document that will display the time

 

Creating a Countdown Timer in an HTML5 Document

  • create a Countdown timer in JavaScript that will display in an HTML5 document

 

How to Use JavaScript Timers in an HTML5 Document

  • use JavaScript timers to delay an action from occurring in an HTML5 document

 

Creating a Scrolling Marquee in HTML5

  • create a scrolling marquee on an HTML5 document

 

Confirming User Input Using Confirm in HTML5

  • use confirm to get confirmation from a user before executing an action in HTML5

 

Capturing User Input from a Prompt in HTML5

  • describe how user input can be captured from a prompt

 

Using Drag and Drop in HTML5

  • describe how drag and drop can be used in an HTML5 document

 

Accessing Form Data

  • access form data

 

Validating Form Data

  • validate form data

 

Adding HTML Elements to a Web Page

  • add HTML elements to a web page

 

Modifying Form Elements

  • modify form elements

 

Modifying HTML5 Form Inputs Using CSS3

  • use CSS3 to modify the form inputs of an HTML5 document

 

Styling HTML5 Submit Buttons Using CSS3

  • use CSS3 to add style to an HTML5 submit button

 

Inserting Images in HTML5 Form Fields Using CSS3

  • describe how to insert images into an HTML5 form field using CSS3

 

Changing the Style of an HTML5 Form Using CSS3

  • use CSS3 to change the style of an HTML5 form

 

Using HTML5 Event Properties

  • describe event properties and why they are used in HTML5

 

Using the Browser Event Model in an HTML5 Document

  • describe the basics of the browser event model in HTML5

 

Using an Event Object in HTML5

  • use an event object in an HTML5 document

 

Creating Second Generation Listeners in HTML5

  • create a second generation, or programmatically created, listener in HTML5

 

Using the Meter Tag in an HTML5 Document

  • use the meter tag in an HTML5 document

 

Using the Progress Tag in an HTML5 Document

  • use the progress tag in an HTML5 document

 

Customizing Progress Bars in HTML5 Using CSS3

  • apply CSS3 styles to a progress bar to customize it in an HTML5 document

 

Exercise: Working with Form Validation and Feedback

This Course is included in our Everything IT Self-Paced Training Package.

  Learn More