Udemy

Platform

English

Language

Web Development

Category

The Advanced Web Developer Bootcamp

Learn React 16, Redux, D3, ES2015, Testing, CSS Flexbox, Animations, SVG, AJAX, and more!

4.51 (8767 reviews)

Students

34 hours

Content

Apr 2018

Last Update
Regular Price


What you will 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

Solve problems similar to what you would get in a developer interview or phone screen


Description

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.


Screenshots

The Advanced Web Developer Bootcamp
The Advanced Web Developer Bootcamp
The Advanced Web Developer Bootcamp
The Advanced Web Developer Bootcamp

Content

Course Introduction

The Story Of This Course

Curriculum Walkthrough

Learning Paths

Introducing the Team

CSS Animations: Transforms and Transitions

Section Introduction

Introduction To CSS Animations

Why Animations Matter

Intro To Pseudoclasses

Pseudo-Classes: Hover

First Pseudo-Class Quiz

Pseudo-Classes: Focus

Pseudo-Classes: Active

Quick Pseudoclasses Exercise

Building An Animated Button

Introduction to Transform

Transform: Translate

Transform:Scale() and Transform-Origin

Transform: Rotate()

A Note on Vendor Prefixes

Transitions Basics

Transition-Duration and Transition-Property

Transition-Timing-Function and Transition-Delay

Transition Shorthand

CSS Animation Performance

Building An Animated Gallery

CSS Animations: Keyframes

Introduction to Keyframes

Codealong: Animated Rainbow Flashing Text

Other CSS Animation Properties

Exercise: Rising and Setting Sun Animation

Exercise SOLUTION : Rising and Setting Sun Animation

CSS Animation Shorthand

Building an Animated CSS Loading Icon

Advanced CSS: Layout With Flexbox

Section Introduction

Introduction To Flexbox

The Magic of Display: Flex

Important Flexbox Terminology

Flex-Direction

Flex-Wrap

Flexbox Quiz

Justify-Content

Flexbox Sidebar Exercise

Flexbox Sidebar Exercise: SOLUTION

Align-Items

Align-Content

Building A Responsive Navbar CODEALONG

Align-Self

Order

flex-basis

flex-grow

Flex-Shrink

Building a Polygon.com Widget

Exercise: Holy Grail Layout

Exercise: Holy Grail Layout SOLUTION

Flexbox Browser Support

Project: Building A Startup Site

Introducing Matt

Section Introduction

Project: Introduction

Project Solution: Nav and Header

Project Solution: Destinations and Features

Project Solution: Testimonials, Contact, and Footer

Project Solution: Responsive Design

Async Foundations

Introducing Tim

Introduction

Callback Functions

Codealong: forEach

findIndex Exercise Intro

findIndex

findIndex Solution

The Stack And The Heap

The Stack: An Example

setTimeout and setInterval

countDown Exercise Solution

The Event Loop And The Queue

Event Loop Quiz

Promise Basics

Promise Chaining

AJAX Part 1: XHR and Fetch

Intro to AJAX

What's the deal with JSON and XML?

Making Our First Request with XMLHTTPRequest

AJAX Workflow: Building The Random Image App

Bitcoin Price Exercise

Bitcoin Price Exercise Solution

Fetch Introduction

Fetch Options

Fetch Error Handling

Fetch Random User Profile Exercise

Fetch Random User Profile Exercise Solution

The Problem With Fetch

AJAX Part 2: jQuery and Axios

jQuery AJAX Introduction

jQuery $.ajax Method

Digging In The jQuery Sourcecode

jQuery AJAX Shorthand Methods

jQuery Random Cats API Exercise

jQuery Random Cats Exercise SOLUTION

Axios Intro

Axios Error Handling

Ron Swanson Exercise

Ron Swanson Exercise Solution

Testing With Jasmine

Introducing Elie

Section Introduction

Writing Tests in the Browser

Jasmine Syntax and Matchers

Writing Better tests with Hooks

Quiz - Jasmine Matchers and Hooks

Spies

Quiz - Jasmine Spies

Clocks

Jasmine Async

TDD and BDD

Different Types of Tests

Advanced Array Methods

Section Introduction

forEach

Exercise: forEach

Exercise SOLUTION: forEach

map

Exercise: Map

Exercise SOLUTION: Map

Filter

Exercise: Filter

Exercise SOLUTION: Filter

Some

Every

Exercise: Some and Every

Exercise SOLUTION: Some and Every

Reduce

Reduce Continued

Exercise: Reduce

Exercise SOLUTION: Reduce

Array Methods Recap

Closures and the Keyword 'this'

Section Introduction

Introduction to Closures

Using Closures in the Wild

Exercise: Closures

Exercise SOLUTION: Closures

Closures Recap

Introduction to the Keyword 'this'

'this' with Functions and "use strict"

Object/Implicit Binding

Explicit Binding

Call

Apply

Bind

Bind Continued

Exercise: Call, Apply, and Bind

Exercise SOLUTIONS: Call, Apply, Bind

The 'new' Keyword and section recap

Object Oriented Programming with JavaScript

Section Introduction

Introduction to Object Oriented Programming with JavaScript

The 'new' Keyword

Refactoring with Multiple Constructors

Constructor Functions Recap

Exercise: Constructor Functions

Exercise SOLUTION: Constructor Functions

Introduction to Prototypes

The Prototype Chain

Adding Methods to the Prototype

Exercise: Prototypes

Exercise SOLUTIONS: Prototypes

Prototypal Inheritance

Exercise: Inheritance

Exercise SOLUTIONS: Inheritance

Object Oriented Programming Recap

Creating JSON API's With Node and Mongo

Section Introduction

Preparing For React

Defining Our API Gameplan

SUPER IMPORTANT: UPDATED C9 INSTALLATION INSTRUCTIONS

Installing NodeJS

Cloud9 Without A Credit Card Instructions

Installing Node Locally

Creating Our Initial Express Application

Responding With JSON

Installing Mongo

Defining Our Schema

Defining The Index Route

Defining The Create Route

Defining The Show Route

Defining the Update Route

Defining the Delete Route

Refactoring Our API

Codealong: Single Page Todo List with Express, Mongo, and jQuery

Introducing Our Single Page App

Serving Static Files and Nodemon

Adding jQuery and The Starter CSS

Writing The Initial AJAX Call

Displaying Our Todos Correctly

Connecting the Form to our API

Making the Delete Button Work

Toggling Todo Completion

ES2015 Part I

Section Introduction

Introduction to ES2015

Const

Let

Let and Const

Template Strings

Introduction to Arrow Functions

Arrow Functions Continued

Coding Exercise - Arrow Functions Exercises

Exercise SOLUTION: Arrow Functions

Default Parameters

For...of Loops

Rest

Spread

Coding Exercise - Rest and Spread Exercises

Exercise SOLUTION: Rest and Spread

Object Enhancements

Object Enhancements

Object Destructuring

Array Destructuring

Coding Exercise - Destructuring Exercises

Exercise SOLUTION: Destructuring

ES2015 Part I Recap

ES2015 Project - Guess the Password

Section Introduction

Introduction to Guess the Password

Guess the Password Code Walkthrough

Guess the Password Refactor

ES2015 Part II

Section Introduction

Introduction to the 'class' Keyword

Instance Methods

Class Methods

Coding Exercise - Class Keyword Exercises

Class Solutions

Inheritance with ES2015

Super

Coding Exercise - Inheritance and Super

Exercise SOLUTION: Inheritance and Super

ES2015 'class' Keyword Recap

Maps

Sets

Coding Exercise - Maps and Sets Exercises

Exercise SOLUTION: Maps and Sets

Promises

Promises Continued

ES2015 Promises Assignment

Exercise SOLUTION: Promises

Generators

Object.assign and Array.from

Additional Helpful ES2015 Methods

Coding Exercise - ES2015 Methods Exercises

Exercise SOLUTION: ES2015 Methods

ES2016 and ES2017

Section Introduction

ES2016 Exponentiation Operator and Includes

padStart and padEnd

Async Functions Introduction

Async Functions Continued

Coding Exercise - Async Functions Assignment

Exercise SOLUTION: Async Functions

Object Rest and Spread + Recap

D3 and the DOM

Section Introduction

An Introduction to D3

D3 Selections

Selections and Callbacks

Event Listeners in D3

D3 Selections Quiz

Exercise: Guess the Password Refactor

Solution: Guess the Password Refactor

Exercise: Notes App

Solution: Notes App

Data Joins and Update Patterns in D3

Section Introduction

Basic Data Joins and Enter Selections

Exit Selections and Key Functions

D3 Data Joins Fundamentals Quiz

The General Update Pattern in D3

D3 Update Patterns Quiz

Exercise: Character Frequencies

Solution: Character Frequencies

SVG and D3

Section Introduction

Introduction to SVG

Rectangles, Polygons, and Circles in SVG

Text Elements in SVG

Path Elements in SVG

Exercise: SVG Flags

Solution: SVG Flags

Introduction to SVG and D3

Exercise: Character Frequencies Revisited

Solution: Character Frequencies Revisited

Intermediate D3

Section Introduction

Extrema and Scales

Scatterplots

Axes and Gridlines

Exercise: Scatterplot

Solution: Scatterplot

Histograms

Histograms Continued

Exercise: Histograms

Solution: Histograms

Pie Charts

Pie Charts Continued

Exercise: Pie Charts

Solution: Pie Charts

D3 Odds and Ends, and Advanced Graph Types

Section Introduction

Tooltips

Transitions

Managing Asynchronous Code with D3

Exercise: D3 Odds and Ends

Solution: D3 Odds and Ends

An Introduction to GeoJSON

An Introduction to TopoJSON

Map Visualization Example

Nodes in Force-Directed Graphs

Links in Force-Directed Graphs

Dragging Nodes and Alpha Values

General Update Pattern with Force-Directed Graphs

Project: Building a Data Dashboard with D3

Project: Introduction and Requirements

Project: Example Solution Part 1

Project: Example Solution Part 2

Introduction To React and JSX

START HERE FOR REACT

Section Introduction

How To Get Our React Solution Code

Front-end Framework Introduction

First React Component

JSX

JSX With JavaScript

Exercise: Random Box

Random Box Assignment Solution

Multiple React Components

Create React App and Props

Create React App

Create React App: Files

JavaScript Import Statements

Import HobbyList Assignment

Import HobbyList Solution

Intro to Props

Recipe App With Props

Recipe App With Props Continued

Default Props and Prop Types

Recipe App Props Exercise

Recipe App Props Solution

props.children

State

Section Introduction

Intro to State

Pure Functions

Update Complex State Exercise

Update Complex State Solution

React Component Architecture

setState Can Be Tricky

React DevTools

Colored Boxes Exercise

Colored Boxes Solution

The Virtual DOM, Events, and Forms

Section Introduction

The Virtual DOM

Events

Forms

Todo App Exercise

Todo App Solution

Refs

Recipe App With State

Recipe App With State - New Recipe Form

Recipe App With State - Saving The New Recipe

Recipe App With State - Show/Hide Form

Recipe App With State - Delete Recipe

Memory Game

Memory Game Solution Part 1

Memory Game Solution Part 2

Component Lifecycle Methods

Introduction To Component Lifecycle Methods

Component Lifecycle Method Examples

Country Flag Guessing App Exercise

Country Flag Guessing App Solution

Building A Full-Stack App With React

Setting Up Our Express/Mongo API

Creating Our React App

Adding the TodoList Component

Loading Initial Data from API

Creating the TodoItem Component

Adding the TodoForm Component

Deleting Todos

Toggling Todos

Refactoring API Calls with Async Functions

React Router

Section Introduction

HTML5 History Object

Introduction to React Router

Introduction to React Router Continued

Redux Introduction

Section Introduction

Introduction to Redux Without React

React With Redux

Organizing Redux

In Depth Redux Code Walkthrough

Redux Intro

Redux Counter

Redux Todos

Redux React Intro

Redux React Continued

Redux React mapDispatchToProps

React Router Redux

Todos Node Backend

Full Stack Redux

Warbler Introduction and Backend Part 1

Warbler Intro

Introduction to Authentication

Getting Started with the Backend

Adding an Error Handler

Adding a User Model

User Middleware

Storing Passwords Properly

Section Review

Warbler Backend Part 2

Adding Signin Functionality

Messages Intro

Creating a message

Adding loginRequired middleware

Adding ensureCorrectUser middleware

Adding additional messages routes

Testing with HTTPie and Review

Warbler Frontend Part 1

Warbler Frontend Introduction

Reducers - errors and currentUser

Warbler Redux Store setup

Adding a Navbar

Styling the Navbar Component

Warbler Main Component

Styling the Homepage Component

Warbler Authform Part 1

Warbler Authform Part 2

Warbler Authform Part 3

Warbler Frontend Section Review

Warbler Frontend Part 2

Handling Error Messages with Redux

Redirecting with React Router and Redux

Logging out a User

Adding a JWT to HTTP Headers

Displaying Messages

Message List Component

Higher Order Components for Authentication

Adding a new Message

Deleting a Message

Displaying the correct Delete Message button

Additional Styling and Section Review

Deploying the Backend

Deploying the Frontend


Reviews

M
Mihir3 October 2020

The Colt parts were definitely 5 stars but the other instructors are just plain bad. They rush the sections very fast and barely do any code alongs aside from the end of warbler and redux sections where Elie rushed through it very fast with no explanation. I honestly hated that the instructors just scrolled through slides with tons of code and barely ever coded along.

M
Mark29 September 2020

Major issues with the MongoDB install on CLoud9/AWS makes large part of the course redundant. Instructors haven't responded to over 2 years worth of questions / reported issues and Udemy don't seem to care either

J
Jonathan21 September 2020

I took the first course, and it was incredible. This course is awful and has been abandoned by the creators who were just using their free courses from Rithm School in order to shill for Rithm School. Horrible course so far. Trying to find a Colt section to learn

S
Simon14 September 2020

Some sections were helpful - CSS, Jasmine and Javascript but for me there were too many sections on D3 and I found in the final project I was just typing along without much thought. The final project also had lots of coding errors and corrections that made it difficult to follow at points.

D
David2 September 2020

Content out of date, no support for questions anymore. Some of the exercises are error-prone. Quality of the instructors is varying a lot.

J
Joseph18 February 2020

I have just started the course, but the explanation of the individual sections appears to be a great next step after learning the foundations of web development.

J
Jack17 February 2020

Holy! This is one of the best courses I have seen! It talks all about Web Developing and if you buy this course it talks about so much topics about Web Developing! I could be a fully Full Stack Developer!

J
John12 February 2020

Colt is an excellent and proficient instructor. He is careful, precise (but not pedantic), and overall, just a fantastic instructor. I've been a computer scientist and software engineer for over 15 years, have B.Sc., M.Sc., and Ph.D. in computer science, and I can genuinely say that Colt makes the "life long learning" I signed up for (by going into CS) much easier and enjoyable! :)

F
Filip12 February 2020

The first sections that were about CSS Animations were really usefull and nice, as the teacher Colt has done amazing job explaining everything nice and comprehensively. The next section that is Code-along - creating startup page is the introduction to the second teacher - Matt, who has no job teaching people if this is what he calls teaching. He justs codes his code and not explaining anything along the way, just trying to get his job done and get this out of his table. I am very disapointed i have my money for this course. I enjoyed the first one with Colt, but now I dont think I will even complete this one!!!!!

J
Jeff5 February 2020

Beginning: The course is establishing some great expectations. Based on past experience (WebDevBootcamp) I am optimistic it will deliver!

S
Solange3 February 2020

I wanted to learn D3 in this course but Matt's teaching method is awful. He just types codes and wants you to listen to him... no body needs to listen to you and watch you coding, we need to practice along. If you don't have time to actually teach, please don't waste ours.

P
Piotr2 February 2020

The course content is good, instructors have put a lot of effort to create it, but it is not up to date. There is no support from the instructors. Lots of questions are unanswered for a year or more. There is no link to download/print the slides. I love Colt and how he delivers lecture, Tim was great in explaining React part, this could have been amazing 5* course only if it had a proper support.

S
Sarah31 January 2020

Colt is a great teacher. I've taken his web development bootcamp part 1 before I did an actual bootcamp and it put me in great shape to learn. This course is diving deep into some pretty awesome topics and I feel like I will be "leveling up" with this course. Even having been working as a developer for almost a year and a half I will be learning new content in this course!

M
Morgan28 January 2020

Good overview of what is covered, in the course, at the beginning. Thanks Colt, time to get started with this course. :)

A
Alef26 January 2020

this course is a complete disappointment, while the first half of the course is awesome, the second part of the course was a joke, sometimes the teachers are not even writing any code they are just reading a code that they written which is definitely a terrible teaching experience, and some lessons are super fast like d3 lessons, dunno i feel like i just wasted money on this course


1218586

Udemy ID

5/17/2017

Course created date

6/7/2019

Course Indexed date
Bot
Course Submitted by