Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Web Development Omnibus: jQuery, AngularJS and ReactJS
You, This Course and Us
You, This Course and Us (2:13)
Introducing jQuery
jQuery: You, This Course and Us (1:59)
Introduction To jQuery
Client side programming with Javascript (7:44)
Why is jQuery cool? (8:09)
The Document Object Model (4:45)
Install And Set Up
Npm and Http Server install (4:49)
Download and set up jQuery (3:32)
Set up examples used in this course (2:14)
Selectors
Example 1: Hello jQuery World! (11:33)
Selectors (4:27)
Example 2: Simple selectors (4:12)
Example 3: More selectors (9:12)
Example 4: Traversing The DOM (8:37)
Example 5: Advanced selectors (4:47)
Example 6: Select using functions - the filter() selector (4:34)
Some Loose Ends
Example 7: Chaining (4:38)
Example 8: jQuery in the no-conflict mode (7:21)
Accessing native browser element (1:20)
Event Handling
Events and event handling (7:31)
Example 9: Event handlers (9:14)
The event object (6:04)
Example 10: Accessing the event object properties (5:28)
Event capture and bubble phases (8:09)
Example 11: Multiple event handlers (4:34)
Example 12: Passing data to event handlers (3:12)
Example 13: Listen just once (3:10)
Example 14: Remove event handlers (4:31)
Example 15: Events in namespaces (6:22)
Event delegation (6:07)
Example 16: Setting up delegated events (5:07)
Example 17: Listening to key events (3:06)
Example 18: Event triggers (4:32)
Custom events (4:06)
Example 19: Working with custom events (4:29)
CSS And Animations
Effects and animations (3:57)
Example 20: The css() function (9:03)
Example 21: The show() and hide() functions (6:03)
Example 22: The fadeIn() and fadeOut() animations (3:01)
Example 23: The slideUp() and slideDown() animations (2:15)
Example 24: The toggle() function (2:44)
How do jQuery animations work? (4:17)
Example 25: Run code after an animation completes (4:38)
Example 26: The animate() function (5:33)
Example 27: More animation fun (4:02)
Example 28: Stop animations using the stop() function (7:40)
Example 29: Delay animations using delay() (3:47)
Example 30: Chaining and queueing animations (7:34)
Example 31: Custom animation queues (5:05)
Example 32: Bypassing the queue (4:55)
DOM Manipulation
Manipulating the DOM (1:15)
Example 33: Manipulating element contents (4:29)
Example 34: The attr() and removeAttr() functions (4:39)
Example 35: Add DOM elements relative to selected elements (9:49)
Example 36: Create or clone elements (6:31)
Example 37: The remove(), detach() and empty() functions (7:34)
Example 38: The wrap() and wrapAll() functions (4:03)
Example 39: Explicit iteration using each() (2:24)
Ajax Requests
Ajax (5:09)
Example 40: The $.ajax() request (10:10)
Example 41: Syntactic sugar - the $.get(), $.getScript(), $.getJSON() (6:37)
Example 42: The load() function (2:37)
Example 43: Sezrialize form contents using serialize() and serializeArray() (7:18)
Example 44: Local and global Ajax events (9:30)
Performance Optimizations
Categories of optimization techniques (4:24)
Performance optimizations tips and tricks (8:58)
Plugins
What are plugins? (4:00)
Example 45: The Slick carousel (9:27)
Building your own custom plugin (4:20)
Example 46: Our first custom plugin, the fancyButton() (4:33)
Example 47: Best practices to follow in the fancyButton() plugin (7:44)
The Widget Factory
What is the Widget Factory? (5:35)
Example 48: Build your first widget (7:52)
Example 49: Widgets which expose methods to manipulate them (9:31)
Example 50: Widgets which trigger events (7:05)
The jQuery UI Library
Download and install the jQuery UI library (8:44)
Example 51: Set up components using the jQuery UI library (5:31)
Example 52: The effects() function (3:12)
The jQuery UI theme roller (5:24)
Example 53: Try a custom theme (1:26)
Introducing Angular
Angular: You, This Course And Us (2:08)
Introduction To Angular
Pure Javascript doesn't cut it anymore (9:52)
Why is Angular cool? (10:15)
Install And Setup
Installing Angular (3:38)
What are those Angular files all about? (6:02)
Npm And Http Server Install (5:03)
Basic Overview Of Angular Components
Conceptual overview (9:24)
Example 1: Hello Angular World! (4:15)
Example 2: Data Binding (5:39)
Example 3: Controllers (10:15)
Example 4: Services (10:01)
Controllers: Digging Deeper
Traditional data binding vs Angular data binding: Angular wins hands down! (6:34)
So, what exactly is a controller? (5:04)
Example 5: Controller holds state and behavior (11:11)
Services: Digging Deeper
So, what exactly is a service? (3:10)
Example 6: Lazily instantiated singleton services (11:02)
Scopes And Scope Inheritance
Scopes (3:55)
Example 7: Different controllers have different scopes (11:53)
Example 8: Nested scopes (7:25)
Scope inheritance and hierarchy (5:45)
Example 9: Scope inheritance at work (7:55)
Scope event propagation (2:27)
Example 10: Emit and broadcast events (9:04)
Built-In And Custom Directives
So, what exactly are directives? (10:58)
Example 11: The template expanding directive (6:37)
Example 12: Using the templateUrl property (3:04)
Example 13: Functions in the templateUrl property (5:55)
Example 14: Custom directives with the restrict option (4:14)
Directives And Isolated Scopes
Example 15: Using the same directive in different controllers (4:44)
Isolated scopes (11:40)
Example 16: Understand how isolated scopes work (3:44)
Behind The Scenes: $watch, $apply and $digest
Data binding and $watch(), $apply() and $digest() (11:21)
Example 17: The watch list (3:44)
The Angular context (11:09)
Example 18: The $apply() function and the $digest() loop (4:29)
Example 19: Prefer $apply(fn) to $apply() (4:33)
Example 20: Use Angular libraries where possible (2:27)
Example 21: Watches on objects and collections (8:32)
Expressions
Example 22: Expressions (5:00)
Javascript Vs Angular Expressions (4:47)
Example 23: One-time binding (5:20)
Filters
Filters (2:55)
Example 24: Built In Filters (8:08)
Example 25: The orderBy filter (11:31)
Example 26: The "filter" filter (10:31)
Example 27: Build your own custom filter (6:38)
Forms And Validation
Forms (1:50)
Example 28: A simple form (6:19)
Example 28 continued: Forms and CSS classes (6:38)
Example 29: Forms and the control state (13:57)
Example 30: The select options UI control (2:57)
Directives: Digging Deeper
Example 31: DOM manipulating directives (5:33)
Example 32: Event listening directives (4:50)
Behind The Scenes: Dependency Injection
Dependency injection (7:34)
Example 33: Different ways of injecting dependencies (7:53)
Provider recipes - yes that is what it is called (9:18)
Example 34: The Provider, Service and Factory recipes (8:18)
The Final Stretch
Modules and Configs (4:06)
Example 35: The Http service (6:15)
Example 36: Routing and Single Page Applications (9:20)
Introducing React
React: You, This Course and Us (2:31)
Introduction
What Is React? (9:18)
What Makes React Cool? (8:47)
Install and Set up
Npm And Http Server Install (4:49)
Running Examples On The Http Server (2:41)
Accessing ReactJS Files (1:51)
Using SublimeText For Coding In React (2:16)
React Basics
Example 1: Hello World (5:13)
The Virtual DOM (5:20)
Example 2: Nested Elements (5:25)
Terms In React (4:59)
Example 3: Factory Functions (3:48)
JSX and the Babel Compiler
What Is JSX? (8:30)
The Babel REPL Environment (4:32)
Babel For Development And Production Environments (4:58)
Example 4: Elements With JSX (3:14)
React Components
Introduction To Components (2:24)
Example 4: A Stateless React Component (7:15)
Example 5: The Render Function (5:30)
State and Props: Immutable Props
Introduction To State And Props (4:26)
Example 7: Props (3:48)
Example 8: Passing Props To Nested Components (5:02)
Example 9: Transferring Props To Child Components (5:27)
Example 10: The Spread Operator (4:48)
Example 11: Dynamic Types Using Props (8:53)
Example 12: Validation With Prop Types (10:50)
Example 13: Accessing A Component's Children Using Props (4:45)
Example 14: Lambda Expressions As Children (4:45)
Example 15: Components And Child Expressions (7:52)
State and Props: The Component as a State Machine
Components As State Machines (4:47)
Example 16: State (3:13)
Example 17: Update State (9:53)
Example 18: Accessing Previous State (5:22)
Properties Of State (6:12)
Synthetic Events in React
Capture And Bubble Phases (7:48)
Example 19: Events (6:18)
The Synthetic Event (12:34)
Example 20: Working With Synthetic Events (3:52)
Bringing It All Together in A Single Application
Example 21: The Comment App Visual Representation (9:09)
Example 22: The Comment App With Props (5:04)
Example 23: Adding A New Comment (9:30)
Example 23: Deleting Comments (5:43)
The React Component Lifecycle
Component Lifecycle Methods: The Mounting Phase (5:59)
Example 24: The Mounting Phase Lifecycle Methods (8:35)
Example 25: The Unmounting Phase Lifecycle Methods (11:11)
Component Lifecycle Methods: The Updating Phase (3:24)
Example 26: The Updating Phase, componentWillReceiveProps() (9:15)
Example 27: The Updating Phase, shouldComponentUpdate() (12:13)
Example 28: The Updating Phase Lifecycle Methods (7:06)
Mixins
Mixins (4:12)
Example 29: Mixins (5:09)
Example 30: Nested And Multiple Mixins (6:30)
ES Syntactic Sugar
ES6 Classes For React (3:23)
Example 31: ES6 Classes And The React.createClass() Function (11:09)
Forms
Introduction To Forms (2:18)
Example 32: Controlled Components (7:04)
Example 32: Controlled Components Continued (6:35)
Example 33: Componentize Forms (7:01)
Example 33: Componentize Forms Continued (4:26)
Example 34: Form Validation (10:49)
Miscellaneous
Example 35: Accessing Native DOM Elements (7:07)
Example 36: Accessing DOM Elements In A React Component (5:28)
Example 36: The React Context (7:43)
DOM Reconciliation (9:25)
React In Production
React In Production: Setting Up Webpack (8:29)
React In Production: The Babel Loader (6:07)
React In Production: Watching For App Changes (3:04)
Animations
Animation Add Ons In React (2:01)
Example 38: The React Transition Group (5:54)
Example 38: The React Transition Group continued (9:06)
Example 39: The React CSS Transition Group (6:23)
Routing
Example 40: React Router: Basic Routing (5:48)
Example 40: React Router: Routing With Links (6:10)
One Last Thing…
The Webpack Dev Server (2:23)
Example 31: ES6 Classes And The React.createClass() Function
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock