Professional Training

Prerequisites

This course is a progression for any web developer who would like explore some of the more advanced topics in Javascript, CSS and HTML.

The Web Programming - Introduction course would be more appropriate for someone with only a little exposure to these technologies.

HTML5

HTML5 Controls
HTML5 validation
Accessibility
Semantic Markup

ES6 Primer

What is ES6 and can I use it?
var const let
Template literals
Arrow Functions
Default parameter values
Iterators
Generators

A Refresher of Objects

Object literals
Properties
Methods
Object constructors
The Object() constructor
Object prototypes
Using classes

Diving into OOP Principles

OOP principles
Is JavaScript Object Oriented?
Abstraction and modeling support
Association
Aggregation
Composition
OOP principles support
Encapsulation
Inheritance
Polymorphism
JavaScript OOP versus classical OOP

Working with Encapsulation and Information Hiding

Encapsulation and information hiding
Convention-based approach
Privacy levels using closure
Scope and closure
Privacy levels
Benefits and drawbacks
A meta-closure approach
Immediately invoked function expressions
Creating a meta-closure with an IIFE
Managing isolated private members
A definitive solution with WeakMaps
Property descriptors
Controlling access to public properties
Using getters and setters
Describing properties
Properties with internal state
Information hiding in ES6 classes

Inheriting and Creating Mixins

Why inheritance?
Objects and prototypes
What is a prototype?
Creating objects
Prototype chaining
Inheritance and constructors
ES6 inheritance
Controlling inheritance
Overriding methods
Overriding properties
Protected members
Preventing extensions
Implementing multiple inheritance
Creating and using mixins
Mixing prototypes
Mixing classes

Asynchronous Programming and Promises

Is JavaScript asynchronous?
Event loop and asynchronous code
Events, Ajax, and other asynchronous stuff
Writing asynchronous code
Using events properties
Using callbacks
Callbacks and this
The callback hell
Organizing callbacks
The issues of asynchronous code
Introducing Promises
What are Promises?
The Promise terminology
Creating Promises
Consuming Promises
Catching failures
Composing Promises
Using Generators
Introducing Generators
Using Generators for asynchronous tasks

Advanced Object Creation

Creating objects
Design patterns and object creation
Creating a singleton
The mysterious behavior of constructors
Singletons
When to use singletons?
An object factory
Understanding factories
Factory with constructor registration
The abstract factory
The builder pattern
When to use the builder pattern?
Comparing factory and builder patterns
Recycling objects with an object pool

Advanced CSS Selectors

CSS level 3 selectors introduce lots of new ways of selecting elements on a page, we can use these to automatically style elements based on a number of criteria.
Elements
Attributes
Pseudo classes
Pseudo elements
CSS level 4 selectors

CSS Features You Might Have Missed

CSS variables.
CSS calculations.
CSS resets.
Gradient fills.
Rounded corners and shadows.
Outline text.
Knockout text.
Size units, in particular vh and vw.
Color functions.
Unset.
Vendor prefixes and auto-prefixer

SVG & CSS

What are SVG images and what are the pros and cons of using them.
Where can I get SVG images?
4 ways to add SVG to your webpage, pros and cons of each.
Styling individual pieces of svg
Fonts, creating a SVG font and using it in your page.
Attaching Javascript events to SVG elements.
Using SVG to make non-rectangular UI elements.
Animating a line drawing using stroke dash offset.
Animating multiple SVG elements independently

CSS Layouts

Traditional layout using float.
Responsive layouts.
Reactive layouts, using media queries.
Multi column layout
Flexbox layout.

CSS Animations

Options for animation blink (Just Kidding:-), java applets, flash, silverlight, javascript, jquery, animated gifs, css, svg).
Transitions.
Animations.
Which CSS properties are animatable.
Timing Functions.
Associated Javascript events (transitionend, animationend)
Triggering animations.
Animation using a 3D transform.
Using CSS animation on SVG elements.
SVG animation

CSS Preprocessors

What is a preprocessor?
SASS or LESS?
Core features
Advanced features
Mixins versus Extends
Functions and function parameters
Conditionals
Loops