HTML5 & CSS3 with JavaScript [STA_H5CSS3]

OVERVIEW

HTML5 & CSS3 with JavaScript Course Overview

The HTML5 & CSS3 with JavaScript course comprises sessions dealing with HTML5 elements and attributes,CSS3 styles,responsive web design,geolocation,drag and drop,offline storage,web sockets,server sent events,and cross domain messaging.

The delegate will learn how to integrate HTML5 and CSS3 features into their web site.

Exercises and examples are used throughout the course to give practical hands-on experience with the techniques covered.

OBJECTIVES

Course Objectives

This course aims to provide the delegate with the knowledge to be able to integrate into a website HTML5 and CSS3 features including new form elements and types,semantic elements,audio and video,graphics,animations,media queries,geolocation,drag and drop,local storage,sockets,and messaging.

AUDIENCE

Who will the Course Benefit?

The HTML5 & CSS3 with JavaScript course is designed for developers familiar with HTML,CSS,and JavaScript,but whom are unfamiliar with the features introduced with HTML5 and CSS3.

CONTENT

HTML5 & CSS3 with JavaScript Training Course Course Contents - DAY 1

Course Introduction

• Administration and Course Materials
• Course Structure and Agenda
• Delegate and Trainer Introductions

Session 1: INTRODUCTION

• What is HTML5
• What is CSS3
• Browser Support

Session 2: HTML5 ELEMENTS & ATTRIBUTES

• Form Fields
• PForm Validation
• Semantic Elements
• iFrame
• Audio and Video
• Canvas and SVG

Session 3: CSS3 STYLES

• Generic Styles
• Transforms
• Transitions
• Animations

Session 4: CSS3 RESPONSIVE

• Responsive Web Design (Review)
• Responsive Grid Layout
• Media Queries
• Images and Videos
• Responsive Web Design Frameworks

HTML5 & CSS3 with JavaScript Training Course Course Contents - DAY 2

Session 5: GEOLOCATION

• Information Sources
• The navigator Object
• Request Parameters
• Position Data
• Error Handling

Session 6: DRAG & DROP

• Source and Target Elements
• Draggable Attributes
• Drag Events
• The dataTransfer object

Session 7: OFFLINE STORAGE

• Local/Session Storage vs. Cookies
• The localStorage and sessionStorage Objects
• Local/sessionStorage methods
• The applicationCache object and events

Session 8: WEBSOCKET

• WebSocket vs. HTTP
• WebSocket (ws://) Protocol
• The WebSocket constructor function
• WebSocket Object Methods
• WebSocket Events

Session 9: SERVER SENT EVENTS

• Server Sent Events
• The EventSource constructor function
• EventSource Events

Session 10: CROSS DOMAIN MESSAGING

• Same Origin Policy (SOP)
• Cross Domain Messaging
• Message Posting
• Message Receiving