JavaScript Training Professional Training Solutions Ltd

Courses

Web Programming with JavaScript, HTML & CSS - Advanced

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.

Duration
5 days
Format
Instructor-led, in person or live online

What the course covers

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

Course dates

There are no public dates for this course yet. We also run it on request for teams. Contact us to arrange a date.