The Advanced Web Developer Bootcamp
4.5 (8,070 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
66,768 students enrolled

The Advanced Web Developer Bootcamp

Learn React 16, Redux, D3, ES2015, Testing, CSS Flexbox, Animations, SVG, AJAX, and more!
4.5 (8,070 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
66,768 students enrolled
Last updated 4/2018
English
English [Auto], Italian [Auto], 3 more
  • Japanese [Auto]
  • Portuguese [Auto]
  • Spanish [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 34 hours on-demand video
  • 9 articles
  • 121 downloadable resources
  • 18 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 391 lectures 34:14:26
+ CSS Animations: Transforms and Transitions
20 lectures 02:01:21
Section Introduction
00:42
Why Animations Matter
06:59
Pseudo-Classes: Hover
04:21

A very quick quiz, shouldn't take long!

First Pseudo-Class Quiz
1 question
Pseudo-Classes: Focus
03:30
Pseudo-Classes: Active
05:23
Quick Pseudoclasses Exercise
00:03
Introduction to Transform
03:12
Transform: Translate
06:07
Transform:Scale() and Transform-Origin
09:20
Transform: Rotate()
08:32
A Note on Vendor Prefixes
04:04
Transitions Basics
05:37
Transition-Duration and Transition-Property
07:52
Transition-Timing-Function and Transition-Delay
12:43
Transition Shorthand
04:06
CSS Animation Performance
05:28
Building An Animated Gallery
14:05
+ CSS Animations: Keyframes
7 lectures 01:02:08
Introduction to Keyframes
08:27
Codealong: Animated Rainbow Flashing Text
07:56
Other CSS Animation Properties
11:38
Exercise SOLUTION : Rising and Setting Sun Animation
11:40
CSS Animation Shorthand
04:32
Building an Animated CSS Loading Icon
12:23
+ Advanced CSS: Layout With Flexbox
21 lectures 02:19:58
Section Introduction
00:52
Introduction To Flexbox
05:21
Important Flexbox Terminology
03:23
Flex-Direction
04:18
Flex-Wrap
06:31

Blah

Flexbox Quiz
1 question
Justify-Content
08:06
Flexbox Sidebar Exercise
04:01
Flexbox Sidebar Exercise: SOLUTION
05:20
Align-Items
08:27
Align-Content
07:33
Building A Responsive Navbar CODEALONG
16:04
Align-Self
04:15
Order
05:16
flex-basis
05:59
flex-grow
07:46
Flex-Shrink
08:24
Building a Polygon.com Widget
09:06
Exercise: Holy Grail Layout
07:17
Exercise: Holy Grail Layout SOLUTION
14:18
Flexbox Browser Support
04:21
+ Project: Building A Startup Site
7 lectures 33:59
Introducing Matt
02:22
Section Introduction
00:31

In this video, we'll introduce a CSS project using Flexbox and CSS animations. Get ready to build a website from scratch!

Preview 00:57

In this lesson, we'll walk through the creation of the nav and header area for our startup site, and we'll build a couple of animations with CSS.


NOTE: A few people have (rightly) pointed out that in this video, once we give the nav bar absolute positioning, the links cease to be clickable. To fix this issue, just add a z-index of 1 to the nav bar (this isn't done in the video).

Project Solution: Nav and Header
09:17

In this lesson, we'll add a couple more sections to our website using Flexbox.

Project Solution: Destinations and Features
08:40

In this lesson, we'll finish building our website with CSS and Flexbox.

Project Solution: Testimonials, Contact, and Footer
06:01

In this lesson, we'll use media queries to make the design of our website more responsive.

Project Solution: Responsive Design
06:11
+ Async Foundations
13 lectures 01:07:35
Introducing Tim
01:42
Introduction
00:45
Callback Functions
05:42
findIndex Exercise Intro
05:46
findIndex
1 question
findIndex Solution
01:56
The Stack And The Heap
07:15
The Stack: An Example
05:31
setTimeout and setInterval
05:18
Your goal is to Implement a function called countDown that accepts a time in seconds. The function will print the time remain to the console every second. Instead of printing 0, the function should print "Ring Ring Ring!!!".
Exercise: countDown Function
1 question
countDown Exercise Solution
02:29
The Event Loop And The Queue
07:55

Let's test your knowledge of the Stack, Heap, Queue and Event Loop!

Event Loop Quiz
3 questions
Promise Basics
06:54
Promise Chaining
09:27
+ AJAX Part 1: XHR and Fetch
12 lectures 01:33:51
Intro to AJAX
09:09
Making Our First Request with XMLHTTPRequest
12:09
AJAX Workflow: Building The Random Image App
12:11
Bitcoin Price Exercise Solution
06:36
Fetch Introduction
09:19
Fetch Options
04:08
Fetch Error Handling
09:47
Fetch Random User Profile Exercise
03:01
Fetch Random User Profile Exercise Solution
15:08
The Problem With Fetch
00:55
+ AJAX Part 2: jQuery and Axios
10 lectures 48:58
jQuery AJAX Introduction
04:15
Digging In The jQuery Sourcecode
01:44
jQuery AJAX Shorthand Methods
07:47
jQuery Random Cats Exercise SOLUTION
03:59
Axios Intro
05:47
Axios Error Handling
04:02
Ron Swanson Exercise
02:09
Ron Swanson Exercise Solution
09:50
+ Testing With Jasmine
9 lectures 32:34
Introducing Elie
01:47

In this video we'll learn what unit testing is and introduce our testing framework Jasmine. 

Writing Tests in the Browser
03:07

In this video we'll introduce some essential keywords and syntax to use when unit testing. We'll also cover quite a few matchers and examine what Jasmine tests look like in the browser.

Jasmine Syntax and Matchers
07:54

In this video, you'll learn how to refactor messy testing code using before and after hooks and how to perform setup and teardown operations when testing.

Writing Better tests with Hooks
04:27

Test your knowledge on matchers and hooks with Jasmine!

Quiz - Jasmine Matchers and Hooks
4 questions

In this video, you'll learn about an essential concept in unit testing - mocking. We'll then see how to create mocks in Jasmine using spies and go through some useful methods for testing our spies.

Spies
03:53

Test your knowledge on Spies with Jasmine!

Quiz - Jasmine Spies
3 questions

In this video, you'll learn how to test time dependent code like setTimeouts and dates as well as test asynchronous code like timers and AJAX calls using a callback function provided by Jasmine.

Preview 04:19

Test your knowledge on testing asynchronous code with Jasmine!

Jasmine Async
7 questions

In this video you'll learn about some different testing ideologies like Test Driven Development and Behavior Driven Development. We'll compare and contrast these two topics and explain how each of them work.

TDD and BDD
02:23

In this video we'll recap some essential topics in Unit Testing and learn about different kinds of testing include Integration Testing, Acceptance Testing, and Stress Testing.

Different Types of Tests
03:28
+ Advanced Array Methods
14 lectures 46:18

In this video you'll learn what forEach is, how it is used and you'll see how you can implement your own version of forEach. 

Preview 04:08
Exercise: forEach
1 question

In this video we'll go over solutions to the forEach exercises

Exercise SOLUTION: forEach
03:10

In this video you'll learn what the map function does, how it is different from forEach, and you can refactor your code to transform one array into another.

map
04:23
Exercise: Map
1 question

In this video we'll go over solutions to the map exercises.

Preview 01:35

In this video you'll learn how to filter an array into an array of the same or smaller size. You'll see how to refactor code to take a more concise and functional approach and even implement your own version of filter!

Filter
05:36
Exercise: Filter
1 question

In this video we'll go over solutions to the filter exercises

Exercise SOLUTION: Filter
02:24

In this video you'll learn how to use the some function to return a boolean when certain conditions are met. You'll see how to clean up code by using this handy method and even implement your own some function!

Some
03:47

In this video you'll learn how to use the every function to return a boolean if a condition is met. You'll see how to clean up code by using this handy method and even implement your own every function!

Every
03:17
Exercise: Some and Every
1 question

In this video, we'll go over solutions to the some and every exercises.

Preview 02:04

In this lesson you'll learn how to use the reduce function to sum values in an array. We'll diagram how reduce works and walk through each part of the function, from the accumulator, to the next value to the important things to remember about reduce.

Preview 04:56

In this lesson you'll learn how to use the reduce function to transform an array into other values like strings and objects. We'll step through each function call to really understand what reduce is doing and then see some other examples of how we can use reduce to solve interesting problems.

Reduce Continued
05:15
Exercise: Reduce
1 question

In this video, we'll go over solutions to the reduce exercises

Exercise SOLUTION: Reduce
02:29

In this lesson we'll recap the important points in this section and review briefly what each of the array methods do. 

Array Methods Recap
02:15
Requirements
  • Have a basic understanding of HTML and CSS
  • Have a fundamental understanding of JavaScript - how to create variables, use conditional logic, looping, objects, arrays and functions
  • Prepare to build real web apps with the latest JavaScript technologies!
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.

Who this course is for:
  • This course is for anyone who wants to continue learning about web development
  • It’s fantastic for someone who has the fundamentals down, but wants to explore more advanced concepts and technologies to be successful as a developer