Modern Web Development Duration: 5 Days

Course Overview

What does the course cover? This course will introduce many different Web Development Technologies, starting with an overview of terminology and how all the parts (i.e. HTML5, CSS3, ECMAScript 6 (JavaScript), JS libraries, AJAX) work together. It will introduce several concepts and languages commonly used in developing interactive, responsive web sites for the internet and mobile devices.

Training Objectives

To teach attendees the skills they need to understand and practice Web Development in order to ultimately produce interactive, responsive web applications and sites.

Training Materials

All attendees receive a copy of our course materials, as well as copies of all code created/demonstrated during the class.

For each topic in the course there is a talk and (excluding the introduction section) practical exercise(s) – the exercises are available on several levels (selected by the individual student)

These practical sessions include the following options - non-coding based simple quizzes and research, a pre-made (including HTML5 structural tags and CSS) blog page where a less experienced attendee can add and modify html/css/JavaScript, or attendees can design and build their own webpage which can include responsive, cross platform code which uses feature sniffing and CSS to provide Progressive Enhancement.

Software

A modern operating system

A variety of browsers for use in testing (including any that your company supports e.g. IE9, Chrome, Firefox, Opera, Safari)

A suitable editor for creating HTML, CSS, JavaScript e.g.HTML-kit, Sublime text 2 or 3, TextPad, PSPad, Notepad++

Contents

Introduction

This section provides an overview of the technologies, what they are and how they work together.

Overview of web technologies

HTML/5

CSS/3

Client/server

DOM

JavaScript (ECMAScript)

AJAX

Testing, testing …

Browsers

Compatibility

Standards

Developer tools to use on the course

JS Libraries – what and why

HTML5 & CSS3

This section looks at building a webpage, the content in HTML, the style and responsiveness in CSS.

HTML5 Structure

Tags overview

Practical – Defining your content with HTML5

Forms with HTML5

Practical - Building and using HTML5 forms

Multimedia tags with HTML5 – video & audio

Practical - Adding multimedia

New API’s for HTML5 (intro only – detail later)

CSS3

CSS structure

Applying CSS to HTML Documents

Selectors and CSS (all versions)

How Inheritance & Specificity work in CSS

CSS Web Site Design – layout (all versions)

Practical – layout and style a webpage

Responsive design with CSS (media queries)

Practical – make your page responsive

New features from CSS3

Drop shadows

Rounded corners

Gradients

Background

Border images

Transparency/Opacity & Colours

Animations

Web Fonts

Practical – Adding interaction with CSS3 capabilities

DOM

The DOM (Document Object Model)

HTML and the DOM

Scripting using ECMAScript (JavaScript with standards!)

DOM

This section looks at scripting and the DOM, what it is, what it provides in terms of webpage manipulation and how to access and use it with JavaScript.

Navigating the DOM with JavaScript

Differences in DOM coding standards

Standard event handling

Practical – respond to webpage events e.g. click

Programming Language – essentials

This section looks at the basic building blocks for the language; this is the minimum you need to be able to use scripts on a webpage.

Variables, weak typing and why that matters!

Operators and Expressions

Practical – improve your pages interaction

Loops & Decision structures

Dialog boxes

Built-in Functions

Functions

Practical – add validation to your forms

Error handling - try, catch, finally

Practical – make your scripts maintainable and reusable

Effective device/feature detection

This section covers several different ways of detecting the features available in the many browsers that are in common use. This supports the concept of feature detection commonly used in modern development methodologies.

Introduction

Modernizr

HTML5 feature detection

Practical – add feature sniffing to cope with cross browser incompatibilities

Event handling

This section will look at advanced event handling which allows you to handle events such as drag/drop and touch.

Overview of events and event handlers in HTML5
Event propagation

Advanced event handling

Practical – build expandable and drop down menus

Objects

This section looks at objects in JavaScript, both the inbuilt ones that are available, plus how to create and use user defined objects. This section is also essential in order to understand how many of the JavaScript libraries work.

Arrays

Date

Math

String

Creating Objects

ECMAScript classes

Practical – design and build reusable objects

HTML5, more features - API’s

This section continues with the features of HTML5, scripting is needed to use these features as they use the DOM API’s.

Storing Data on the Client

Persistent client-side data storage
The localStorage object
Session management
Security Issues

The Canvas

Create a Canvas
Drawing with JavaScript
Animation

Touch events for drawing

HTML5 and SVG

Offline app (appcache)

GEOlocation

SPA - Single Page Applications and the History object

Web sockets

Web workers

Optimising webpages for Mobile

Dealing with Orientation

Interfacing with the hardware

Creating touch friendly pages

Practical – enhance your website with the HTML5 API capabilities

Advanced principles

Ajax and JSON/JSONP

This section will cover AJAX coding and use, plus the way JavaScript interacts with JSON and JSONP.

AJAX technologies

Client side

Server side

JSON/JSONP

Practical – sending and receiving JSON data