Advanced Training: HTML5 / CSS3, JavaScript / DOM + Responsive Design

Advanced Training Introduction: HTML5/CSS3, JavaScript/DOM + Responsive Design

Why HTML5?

Tag formatting

HTML, CSS, XHTML, XML, HTML5 standards

The W3C and validators

Encoding logic, ISO-8859-1, UTF-8,..

Basic Concepts Review

Tag types

Style rule syntax

CSS positioning (relative, absolute, float, display)

Practical Workshop: Create an XHTML/CSS site

Transition to HTML5

Syntax, new doctype, and tools

Structure and semantics

Div and span

New HTML5 tags

Practical Workshop: Rebuild our site using HTML5/CSS3

Multimedia Tags

Insert an image (<figure> tag)

Insert a video (<video> tag)

Insert audio (<audio> tag)

Browser compatibility

Practical Workshop: Use JavaScript to control audio and video objects

Forms

New types for <input>

New attributes

New elements <output>

Form validations in HTML5

Practical Workshop: Create an HTML5 form

Drawing: Dynamic Image Creation with JavaScript

Canvas tag

SVG

Drawing shapes (rectangle, circle, etc.)

Colors, fills, gradients

Practical Workshop: Enhance video playback with a progress bar

Geolocation

Overview

Positioning (latitude, longitude)

CSS3

Overview

Syntax, CSS3 prefixes

Rounded corners

Drop shadows

Text-Shadow

Box-shadow

Linear gradients

font-face

Attribute selectors

CSS3: Transformations, Transitions, and Animations

Rotation

Translation

Animations

Practical Workshop: Animate various element properties

Introduction to JavaScript

JavaScript Basics

Core JavaScript concepts

Event handling

Dynamic CSS management

Practical Workshop: Validate fields in our contact form

Document Object Model

What is the DOM?

Node concept

Node hierarchy (DOM Tree)

Relation properties

State properties

Node access methods

Firefox DOM Inspector

Modify HTML content

Modify HTML element styles

Practical Workshop: Create a photo gallery

Responsive Design

Principles

CSS 3 Media Queries

Practical Workshop: Create a multi-platform site (smartphone, tablet, etc.)

Using Bootstrap

Introduction to Bootstrap

Bootstrap installation

Grid system for positioning

Layouts

Responsive Design

Practical Workshop: Create a page using Bootstrap

Bootstrap Components

Dropdown menus

Navigation bars

Breadcrumbs