About Course
Hi! Welcome to the Advanced Web Developer Bootcamp, the complete course that will help you learn the latest technologies, tools and libraries to become a proficient web developer. Think of this course as an encyclopedia of all the knowledge you need to take your developer skills to the next level.
There are quite a few options out there for online training, but we are certain this course is the most comprehensive and frankly the best one out there – here’s why:
- This course is taught by professional bootcamp instructors. The material you’re going to learn has been taught to hundreds of students in person and hundreds of thousands online.
- Everything we’ll cover in this course is up-to-date and even anticipates future advancements to prepare you for what is to come. We focus on the most commonly used technologies, libraries and frameworks.
- This is the only full-stack developer course that covers Advanced CSS, Advanced JavaScript, NodeJS, D3, React and Redux!!
- We build over 10 projects and have dozens of code challenges with solutions to ensure you understand the material and don’t just watch us talk!
- You get to meet our wonderful course mascot – Whiskey the dog!
Throughout the course we cover tons of tools and technologies including:
- React
- React-Router
- Redux
- CSS3 Transitions, Transforms and Animations
- Testing with Jasmine
- D3
- SVG
- Building charts, force graphs and data visualizations
- ES2015 keywords, arrow functions, class syntax, and much more
- ES2016 and ES2017 and cutting edge features to JavaScript
- Callbacks, Promises, Generators and Async Functions
- Building Node.js APIs
- Building Single Page Applications
- Object Oriented Programming in JavaScript
- Closures and the keyword ‘this’
- Functional Programming in JavaScript
- Authentication and Authorization
- Asynchronous Code with JavaScript
This course is also unique in the way that it is structured and presented. Many online courses are just a long series of “watch as I code” videos. This course is different. I’ve incorporated everything I learned in my years of teaching to make this course not only more effective but more engaging. The course includes:
- Lectures
- Code-Alongs
- Projects
- Exercises and Solutions
- Research Assignments
- Slides
- Downloads
- Readings
If you have any questions, please don’t hesitate to contact us. We’ve all been working in the education industry for the past four years and love working with people and helping students learn. Sign up today and see how fun, exciting, and rewarding web development can be!
If you want to take ONE COURSE to learn everything you need to know to be successful as a modern JavaScript web developer, take this course.
What Will You Learn?
- Make REAL web applications using cutting-edge technologies
- Build responsive applications using modern CSS technologies like flexbox
- Build JSON APIs using Node, Express and MongoDB
- Learn the most popular front end library React and master the fundamentals around state, props and the component lifecycle
- Use babel and webpack to transpile and bundle code
- Understand what the Virtual DOM is and how React performs reconciliation
- Leverage Component Lifecycle methods with React to include making AJAX calls properly
- Secure Node, Express, Mongo and React applications on the front-end and back-end using bcrypt and JSON Web Tokens
- Add routing to a single page application with the most popular routing library for react, React Router.
- Manage State with a centralized store using Redux
- Connect Redux with a React application to build scalable production applications with client-side state management
- Select and manipulate elements in the DOM using D3
- Build dynamic visualizations using D3 and SVG
- Use D3 to build scatterplots, histograms, pie charts and force graphs
- Build compelling map visualizations with GeoJSON and TopoJSON
- Master how to handle asynchronous code using callbacks, promises, generators and async functions
- Understand how JavaScript handles asynchronous code using the Event Loop with the Stack, Heap and Queue.
- Use advanced array methods to build a solid understanding of functional programming
- Create dynamic single page applications using AJAX
- Structure applications with design patterns using closure and modules
- Explain how Object Oriented Programming works with a thorough understanding of the keyword this and the new keyword
- Refactor code using call, apply and bind to remove duplication
- Use jQuery to build single page applications and understand the limitations of just using jQuery
- Create block scope with the let keyword and use the const keyword to prevent variables from being redeclared
- Clean up code using arrow functions and master method binding without using the bind keyword
- Use default parameters, for of loops and the rest and spread operator to write more concise and more maintainable code
- Refactor an ES5 application to use ES2015
- Master the new class syntax and create instance methods, class methods
- Implement inheritance in ES2015 using extends and super
- Leverage newer data structures like Maps and Sets to better solve problems
- Learn cutting edge features to the JavaScript language with ES2016, 2017 as well as experimental JavaScript additions
Course Content
Course Introduction
-
The Story Of This Course
00:00 -
Curriculum Walkthrough
00:00 -
Learning Paths
00:00 -
Introducing the Team
00:00
CSS Animations: Transforms and Transitions
-
Section Introduction
00:00 -
Introduction To CSS Animations
00:00 -
Why Animations Matter
07:00 -
Intro To Pseudoclasses
00:00 -
Pseudo-Classes: Hover
00:00 -
Pseudo-Classes: Focus
03:31 -
Pseudo-Classes: Active
00:00 -
Building An Animated Button
00:00 -
Introduction to Transform
00:00 -
Transform: Translate
00:00 -
Transform:Scale() and Transform-Origin
00:00 -
Transform: Rotate()
00:00 -
A Note on Vendor Prefixes
00:00 -
Transitions Basics
00:00 -
Transition-Duration and Transition-Property
00:00 -
Transition-Timing-Function and Transition-Delay
00:00 -
Transition Shorthand
00:00 -
CSS Animation Performance
00:00 -
Building An Animated Gallery
00:00
CSS Animations:Key : Frames
-
Introduction to Keyframes
00:00 -
Codealong: Animated Rainbow Flashing Text
00:00 -
Other CSS Animation Properties
00:00 -
Exercise Rising and Setting Sun Animation
05:33 -
Exercise SOLUTION : Rising and Setting Sun Animation
00:00 -
CSS Animation Shorthand
00:00 -
Building an Animated CSS Loading Icon
00:00
Advanced CSS : Layout With Flexbox
-
Section Introduction
00:00 -
Introduction To Flexbox
00:00 -
The Magic of Display
00:00 -
Important Flexbox Terminology
00:00 -
Flex-Direction
00:00 -
Flex-Wrap
00:00 -
Justify-Content
00:00 -
Flexbox Sidebar Exercise
00:00 -
Flexbox Sidebar Exercise: SOLUTION
00:00 -
Align-Items
00:00 -
Align-Content
00:00 -
Building A Responsive Navbar CODEALONG
00:00 -
Align-Self
00:00 -
Order
00:00 -
flex-basis
00:00 -
flex-grow
00:00 -
Flex-Shrink
00:00 -
Building a Polygon.com Widget
00:00 -
Exercise: Holy Grail Layout
00:00 -
Exercise: Holy Grail Layout SOLUTION
00:00 -
Flexbox Browser Support
00:00
Project : Building A Startup Site
-
Introducing Matt
00:00 -
Section Introduction
00:00 -
Project Introduction
00:00 -
Project Solution: Nav and Header
00:00 -
Project Solution: Destinations and Features
00:00 -
Project Solution: Testimonials, Contact, and Footer
00:00 -
Project Solution: Responsive Design
00:00
Async Foundations
-
Introducing Tim
00:00 -
Introduction
00:00 -
Callback Functions
00:00 -
Codealong forEach
00:00 -
findIndex Exercise Intro
00:00 -
findIndex Solution
00:00 -
The Stack And The Heap
00:00 -
The Stack: An Example
00:00 -
setTimeout and setInterval
00:00 -
countDown Exercise Solution
00:00 -
The Event Loop And The Queue
00:00 -
Promise Basics
00:00 -
Promise Chaining
00:00
AJAX Part 1: XHR and Fetch
-
Intro to AJAX
00:00 -
Whats the deal with JSON and XML
00:00 -
Making Our First Request with XMLHTTP Request
00:00 -
AJAX Workflow: Building The Random Image App
00:00 -
Bitcoin Price Exercise
00:00 -
Bitcoin Price Exercise Solution
00:00 -
Fetch Introduction
00:00 -
Fetch Options
00:00 -
Fetch Error Handling
00:00 -
Fetch Random User Profile Exercise
00:00 -
Fetch Random User Profile Exercise Solution
00:00 -
The Problem With Fetch
00:00
AJAX Part 2 : jQuery and Axios
-
jQuery AJAX Introduction
00:00 -
jQuery .ajax Method
00:00 -
Digging In The jQuery Sourcecode
00:00 -
jQuery AJAX Shorthand Methods
00:00 -
jQuery Random Cats API Exercise
00:00 -
jQuery Random Cats Exercise SOLUTION
00:00 -
Axios Intro
00:00 -
Axios Error Handling
00:00 -
Ron Swanson Exercise
00:00 -
Ron Swanson Exercise Solution
00:00
Testing With Jasmine
-
Introducing Elie
00:00 -
Section Introduction
00:00 -
Writing Tests in the Browser
00:00 -
Jasmine Syntax and Matchers
00:00 -
Writing Better tests with Hooks
00:00 -
Spies
00:00 -
Clocks
00:00 -
TDD and BDD
00:00 -
Different Types of Tests
00:00
Advanced Array Methods
-
Section Introduction
00:00 -
For Each
00:00 -
Exercise SOLUTION: forEach
00:00 -
map
00:00 -
Exercise SOLUTION Map
00:00 -
Some
00:00 -
Every
00:00 -
Exercise SOLUTION Some and Every
00:00 -
Reduce
00:00 -
Reduce Continued
00:00 -
Exercise SOLUTION: Reduce
00:00 -
Array Methods Recap
00:00
Closures and the Keyword ‘this’
-
Section Introduction
00:00 -
Introduction to Closures
00:00 -
Using Closures in the Wild
00:00 -
Exercise SOLUTION Closures
00:00 -
Closures Recap
00:00 -
Introduction to the Keyword ‘this’
00:00 -
‘this’ with Functions and “use strict”
00:00 -
Object/Implicit Binding
00:00 -
Explicit Binding
00:00 -
Call
00:00 -
Apply
00:00 -
Bind
00:00 -
Bind Continued
00:00 -
Exercise SOLUTIONS: Call, Apply, Bind
00:00 -
The ‘new’ Keyword and section recap
00:00
Object Oriented Programming with JavaScript
-
Section Introduction
00:00 -
Introduction to Object Oriented Programming with JavaScript
00:00 -
The ‘new’ Keyword
00:00 -
Refactoring with Multiple Constructors
00:00 -
Constructor Functions Recap
00:00 -
Exercise SOLUTION: Constructor Functions
00:00 -
Introduction to Prototypes
00:00 -
The Prototype Chain
00:00 -
Adding Methods to the Prototype
00:00 -
Exercise SOLUTIONS: Prototypes
00:00 -
Prototypal Inheritance
00:00 -
Exercise SOLUTIONS: Inheritance
00:00 -
Object Oriented Programming Recap
00:00
Creating JSON API’s With Node And Mongo
-
Section Introduction
00:00 -
Preparing For React
00:00 -
Defining Our API Gameplan
00:00 -
Installing NodeJS
00:00 -
Creating Our Initial Express Application
00:00 -
Responding With JSON
00:00 -
Installing Mongo
00:00 -
Defining Our Schema
00:00 -
Defining The Index Route
00:00 -
Defining The Create Route
00:00 -
Defining The Show Route
00:00 -
Defining the Update Route
00:00 -
Defining the Delete Route
00:00 -
Refactoring Our API
00:00
Codealong :Single Page Todo List With Express , Mongo, and jQuey
-
Introducing Our Single Page App
00:00 -
Serving Static Files and Nodemon
00:00 -
Adding jQuery and The Starter CSS
00:00 -
Writing The Initial AJAX Call
00:00 -
Displaying Our Todos Correctly
00:00 -
Connecting the Form to our API
00:00 -
Making the Delete Button Work
00:00 -
Toggling Todo Completion
00:00
ES2015 Part 1
-
Section Introduction
00:00 -
Introduction to ESE5
00:00 -
Const
00:00 -
Let
00:00 -
Template Strings
00:00 -
Introduction to Arrow Functions
00:00 -
Arrow Functions Continued
00:00 -
Exercise SOLUTION: Arrow Functions
00:00 -
Default Parameters
00:00 -
For…of Loops
00:00 -
Rest
00:00 -
Spread
00:00 -
Exercise SOLUTION: Rest and Spread
00:00 -
Object Enhancements
00:00 -
Object Destructuring
00:00 -
Array Destructuring
00:00 -
Exercise SOLUTION: Destructuring
00:00 -
ES2015 Part I Recap
00:00
ES2015Project – Guess The Password
-
Section Introduction
00:00 -
Introduction to Guess the Password
00:00 -
Guess the Password Code Walkthrough
00:00 -
Guess the Password Refactor
00:00
ES2015 Part 2
-
Section Introduction
00:00 -
Introduction to the ‘class’ Keyword
00:00 -
Instance Methods
00:00 -
Class Methods
00:00 -
Class Solutions
00:00 -
Inheritance with ES2015
00:00 -
Super
00:00 -
Exercise SOLUTION: Inheritance and Super
00:00 -
ES2015 ‘class’ Keyword Recap
00:00 -
Maps
00:00 -
Sets
00:00 -
Exercise SOLUTION: Maps and Sets
00:00 -
Promises
00:00 -
Promises Continued
00:00 -
Exercise SOLUTION: Promises
00:00 -
Generators
00:00 -
Object.assign and Array.from
00:00 -
Additional Helpful ES2015 Methods
00:00 -
Exercise SOLUTION: ES2015 Methods
00:00
ES2016 and ES2017
-
Section Introduction
00:00 -
ES2016 Exponentiation Operator and Include
00:00 -
padStart and padEnd
00:00 -
Async Functions Introduction
00:00 -
Async Functions Continued
00:00 -
Exercise SOLUTION: Async Functions
00:00 -
Object Rest and Spread + Recap
00:00
D3 and the DOM
-
Section Introduction
00:00 -
An Introduction to D3
00:00 -
D3 Selections
00:00 -
Selections and Callbacks
00:00 -
Event Listeners in D3
00:00 -
Solution: Guess the Password Refactor
00:00 -
Exercise: Notes App
00:00 -
Solution: Notes App
00:00
Data Joins and Uodate Patterns in D3
-
Section Introduction
00:00 -
Basic Data Joins and Enter Selections
00:00 -
Exit Selections and Key Functions
00:00 -
The General Update Pattern in D3
00:00 -
Exercise: Character Frequencies
00:00 -
Solution: Character Frequencies
00:00
SVG and D3
-
Section Introduction
00:00 -
Introduction to SVG
00:00 -
Rectangles, Polygons, and Circles in SVG
00:00 -
Text Elements in SVG
00:00 -
Path Elements in SVG
00:00 -
Exercise: SVG Flags
00:00 -
Solution SVG Flags
00:00 -
Introduction to SVG and D3
00:00 -
Exercise: Character Frequencies Revisited
00:00 -
Solution: Character Frequencies Revisited
00:00
Intermediate D3
-
Section Introduction
00:00 -
Extrema and Scales
00:00 -
Scatterplots
00:00 -
Axes and Gridlines
00:00 -
Exercise: Scatterplot
00:00 -
Solution: Scatterplot
00:00 -
Histograms
00:00 -
Histograms Continued
00:00 -
Exercise: Histograms
00:00 -
Solution: Histograms
00:00 -
Pie Charts
00:00 -
Pie Charts Continued
00:00 -
Exercise: Pie Charts
00:00 -
Solution: Pie Charts
00:00
D3 Odds and Ends, and Advanced Graph Types
-
Section Introduction
00:00 -
Tooltips
00:00 -
Transitions
00:00 -
Managing Asynchronous Code with D3
00:00 -
Exercise: D3 Odds and Ends
00:00 -
Solution: D3 Odds and Ends
00:00 -
An Introduction to GeoJSON
00:00 -
An Introduction to TopoJSON
00:00 -
Map Visualization Example
00:00 -
Nodes in Force-Directed Graphs
00:00 -
Links in Force-Directed Graphs
00:00 -
Dragging Nodes and Alpha Values
00:00 -
General Update Pattern with Force-Directed Graphs
00:00
Project:Building a Data Dashboard with D3
-
Project Introduction and Requirements
00:00 -
Project: Example Solution Part 1
00:00 -
Project: Example Solution Part 2
00:00
Introduction To React and JSX
-
Section Introduction
00:00 -
Front-end Framework Introduction
00:00 -
First React Component
00:00 -
JSX
00:00 -
JSX With JavaScript
00:00 -
Exercise Random Box
00:00 -
Random Box Assignment Solution
00:00 -
Multiple React Components
00:00
Create React App and Props
-
Create React App
00:00 -
Create React App: Files
00:00 -
JavaScript Import Statements
00:00 -
Import HobbyList Assignment
00:00 -
Import HobbyList Solution
00:00 -
Intro to Props
00:00 -
Recipe App With Props
00:00 -
Recipe App With Props Continued
00:00 -
Default Props and Prop Types
00:00 -
Recipe App Props Exercise
00:00 -
Recipe App Props Solution
00:00 -
props.children
00:00
State
-
Section Introduction
00:00 -
Intro to State
00:00 -
Pure Functions
00:00 -
Update Complex State Exercise
00:00 -
Update Complex State Solution
00:00 -
React Component Architecture
09:29 -
setState Can Be Tricky
00:00 -
React DevTools
00:00 -
Colored Boxes Exercise
00:00 -
Colored Boxes Solution
00:00
The Virtual DOM, Events, and Forms
-
Section Introduction
00:00 -
The Virtual DOM
00:00 -
Events
00:00 -
Forms
00:00 -
Todo App Exercise
00:00 -
Todo App Solution
00:00 -
Refs
00:00 -
Recipe App With State
00:00 -
Recipe App With State – New Recipe Form
00:00 -
Recipe App With State – Saving The New Recipe
00:00 -
Recipe App With State – Show/Hide Form
00:00 -
Recipe App With State – Delete Recipe
00:00 -
Memory Game
00:00 -
Memory Game Solution Part 1
00:00 -
Memory Game Solution Part 2
00:00
Component Lifecycle Methods
-
Introduction To Component Lifecycle Methods
00:00 -
Component Lifecycle Method Examples
00:00 -
Country Flag Guessing App Exercise
00:00 -
Country Flag Guessing App Solution
00:00
Building A Full – StackApp With React
-
Setting Up Our Express/Mongo API
00:00 -
Creating Our React App
00:00 -
Adding the TodoList Component
00:00 -
Loading Initial Data from API
00:00 -
Creating the TodoItem Component
00:00 -
Adding the TodoForm Component
00:00 -
Deleting Todos
00:00 -
Toggling Todos
00:00 -
Refactoring API Calls with Async Functions
00:00
React Router
-
Section Introduction
00:00 -
HTML5 History Object
00:00 -
Introduction to React Router
00:00 -
Introduction to React Router Continued
00:00
Redux Introduction
-
Section Introduction
00:00 -
Introduction to Redux Without React
00:00 -
React With Redux
00:00 -
Organizing Redux
00:00
In Depth Redux Code Walkthrough
-
Redux Intro
00:00 -
Redux Counter
00:00 -
Redux Todos
00:00 -
Redux React Intro
00:00 -
Redux React Continued
00:00 -
Redux React mapDispatchToProps
00:00 -
React Router Redux
00:00 -
Todos Node Backend
00:00 -
Full Stack Redux
00:00
Warbler Introduction and Backend Part 1
-
Warbler Intro
00:00 -
Introduction to Authentication
00:00 -
Getting Started with the Backend
00:00 -
Adding an Error Handler
00:00 -
Adding a User Model
00:00 -
User Middleware
00:00 -
Storing Passwords Properly
00:00 -
Section Review
00:00
Warbler Backend Part 2
-
Adding Signin Functionality
00:00 -
Messages Intro
00:00 -
Creating a message
00:00 -
Adding loginRequired middleware
00:00 -
Adding ensureCorrectUser middleware
00:00 -
Adding additional messages routes
05:31 -
Testing with HTTPie and Review
00:00
Warbler Frontend Part 1
-
Warbler Frontend Introduction
00:00 -
Reducers – errors and currentUser
00:00 -
Warbler Redux Store setup
00:00 -
Adding a Navbar
00:00 -
Styling the Navbar Component
00:00 -
Warbler Main Component
00:00 -
Styling the Homepage Component
00:00 -
Warbler Authform Part 1
00:00 -
Warbler Authform Part 2
00:00 -
Warbler Authform Part 3
00:00 -
Warbler Frontend Section Review
00:00
Warbler Frontend Part 2
-
Handling Error Messages with Redux
00:00 -
Redirecting with React Router and Redux
00:00 -
Logging out a User
00:00 -
Adding a JWT to HTTP Headers
00:00 -
Displaying Messages
00:00 -
Message List Component
00:00 -
Higher Order Components for Authentication
00:00 -
Adding a new Message
00:00 -
Deleting a Message
00:00 -
Displaying the correct Delete Message button
00:00 -
Additional Styling and Section Review
00:00 -
Deploying the Backend
00:00 -
Deploying the Frontend
00:00 -
Assignment: Building a Scalable and Responsive Web Application
00:00