Web Programming with JavaScript, HTML & CSS - Advanced

Request more details:

submit request
Description:
This course is an opportunity for developers to get a taste for the newer features in HTML5, CSS3 and javascript es6 including Object Oriented Programming, Advanced CSS features, Using SVG, Understanding semantic HTML5 tags and why you should use them and CSS Layouts. Participants will gain the skills to quickly and effectively create new web applications with the latest techniques.
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