The Advanced Web Developer Bootcamp

The Advanced Web Developer Bootcamp
The Advanced Web Developer Bootcamp
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 27.5 Hours | 4.13 GB

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

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
Table of Contents

Course Introduction
1 The Story Of This Course
2 Curriculum Walkthrough
3 Introducing the Team

CSS Animations Transforms and Transitions
4 Section Introduction
5 Introduction To CSS Animations
6 Why Animations Matter
7 Intro To Pseudoclasses
8 Pseudo-Classes Hover
9 Pseudo-Classes Focus
10 Pseudo-Classes Active
11 Quick Pseudoclasses Exercise
12 Building An Animated Button
13 Introduction to Transform
14 Transform Translate
15 TransformScale and Transform-Origin
16 Transform Rotate
17 A Note on Vendor Prefixes
18 Transitions Basics
19 Transition-Duration and Transition-Property
20 Transition-Timing-Function and Transition-Delay
21 Transition Shorthand
22 CSS Animation Performance
23 Building An Animated Gallery

CSS Animations Keyframes
24 Introduction to Keyframes
25 Codealong Animated Rainbow Flashing Text
26 Other CSS Animation Properties
27 Exercise Rising and Setting Sun Animation
28 Exercise SOLUTION Rising and Setting Sun Animation
29 CSS Animation Shorthand
30 Building an Animated CSS Loading Icon

Advanced CSS Layout With Flexbox
31 Section Introduction
32 Introduction To Flexbox
33 The Magic of Display Flex
34 Important Flexbox Terminology
35 Flex-Direction
36 Flex-Wrap
37 Justify-Content
38 Flexbox Sidebar Exercise
39 Flexbox Sidebar Exercise SOLUTION
40 Align-Items
41 Align-Content
42 Building A Responsive Navbar CODEALONG
43 Align-Self
44 Order
45 flex-basis
46 flex-grow
47 Flex-Shrink
48 Building a Widget
49 Exercise Holy Grail Layout
50 Exercise Holy Grail Layout SOLUTION
51 Flexbox Browser Support

Project Building A Startup Site
52 Introducing Matt
53 Section Introduction
54 Project Introduction
55 Project Solution Nav and Header
56 Project Solution Destinations and Features
57 Project Solution Testimonials Contact and Footer
58 Project Solution Responsive Design

Async Foundations
59 Introducing Tim
60 Introduction
61 Callback Functions
62 Codealong forEach
63 findIndex Exercise Intro
64 findIndex Solution
65 The Stack And The Heap
66 The Stack An Example
67 setTimeout and setInterval
68 countDown Exercise Solution
69 The Event Loop And The Queue
70 Promise Basics
71 Promise Chaining

AJAX Part 1 XHR and Fetch
72 Intro to AJAX
73 Whats the deal with JSON and XML
74 Making Our First Request with XMLHTTPRequest
75 AJAX Workflow Building The Random Image App
76 Bitcoin Price Exercise
77 Bitcoin Price Exercise Solution
78 Fetch Introduction
79 Fetch Options
80 Fetch Error Handling
81 Fetch Random User Profile Exercise
82 Fetch Random User Profile Exercise Solution
83 The Problem With Fetch

AJAX Part 2 jQuery and Axios
84 jQuery AJAX Introduction
85 jQuery .ajax Method
86 Digging In The jQuery Sourcecode
87 jQuery AJAX Shorthand Methods
88 jQuery Random Cats API Exercise
89 jQuery Random Cats Exercise SOLUTION
90 Axios Intro
91 Axios Error Handling
92 Ron Swanson Exercise
93 Ron Swanson Exercise Solution

Testing With Jasmine
94 Introducing Elie
95 Section Introduction
96 Writing Tests in the Browser
97 Jasmine Syntax and Matchers
98 Writing Better tests with Hooks
99 Spies
100 Clocks
101 TDD and BDD
102 Different Types of Tests

Advanced Array Methods
103 Section Introduction
104 forEach
105 Exercise SOLUTION forEach
106 map
107 Exercise SOLUTION Map
108 Filter
109 Exercise SOLUTION Filter
110 Some
111 Every
112 Exercise SOLUTION Some and Every
113 Reduce
114 Reduce Continued
115 Exercise SOLUTION Reduce
116 Array Methods Recap

Closures and the Keyword this
117 Section Introduction
118 Introduction to Closures
119 Using Closures in the Wild
120 Exercise SOLUTION Closures
121 Closures Recap
122 Introduction to the Keyword this
123 this with Functions and use strict
124 ObjectImplicit Binding
125 Explicit Binding
126 Call
127 Apply
128 Bind
129 Bind Continued
130 Exercise SOLUTIONS Call Apply Bind
131 The new Keyword and section recap

Object Oriented Programming with JavaScript
132 Section Introduction
133 Introduction to Object Oriented Programming with JavaScript
134 The new Keyword
135 Refactoring with Multiple Constructors
136 Constructor Functions Recap
137 Exercise SOLUTION Constructor Functions
138 Introduction to Prototypes
139 The Prototype Chain
140 Adding Methods to the Prototype
141 Exercise SOLUTIONS Prototypes
142 Prototypal Inheritance
143 Exercise SOLUTIONS Inheritance
144 Object Oriented Programming Recap

Creating JSON APIs With Node and Mongo
145 Section Introduction
146 Preparing For React
147 Defining Our API Gameplan
148 Installing NodeJS
149 Cloud9 Without A Credit Card Instructions
150 Installing Node Locally
151 Creating Our Initial Express Application
152 Responding With JSON
153 Installing Mongo
154 Defining Our Schema
155 Defining The Index Route
156 Defining The Create Route
157 Defining The Show Route
158 Defining the Update Route
159 Defining the Delete Route
160 Refactoring Our API

Codealong Single Page Todo List with Express Mongo and jQuery
161 Introducing Our Single Page App
162 Serving Static Files and Nodemon
163 Adding jQuery and The Starter CSS
164 Writing The Initial AJAX Call
165 Displaying Our Todos Correctly
166 Connecting the Form to our API
167 Making the Delete Button Work
168 Toggling Todo Completion

ES2015 Part I
169 Section Introduction
170 Introduction to ES2015
171 Const
172 Let
173 Template Strings
174 Introduction to Arrow Functions
175 Arrow Functions Continued
176 Exercise SOLUTION Arrow Functions
177 Default Parameters
178 For...of Loops
179 Rest
180 Spread
181 Exercise SOLUTION Rest and Spread
182 Object Enhancements
183 Object Destructuring
184 Array Destructuring
185 Exercise SOLUTION Destructuring
186 ES2015 Part I Recap

ES2015 Project - Guess the Password
187 Section Introduction
188 Introduction to Guess the Password
189 Guess the Password Code Walkthrough
190 Guess the Password Refactor

ES2015 Part II
191 Section Introduction
192 Introduction to the class Keyword
193 Instance Methods
194 Class Methods
195 Class Solutions
196 Inheritance with ES2015
197 Super
198 Exercise SOLUTION Inheritance and Super
199 ES2015 class Keyword Recap
200 Maps
201 Sets
202 Exercise SOLUTION Maps and Sets
203 Promises
204 Promises Continued
205 ES2015 Promises Assignment
206 Exercise SOLUTION Promises
207 Generators
208 Object.assign and Array.from
209 Additional Helpful ES2015 Methods
210 Exercise SOLUTION ES2015 Methods

ES2016 and ES2017
211 Section Introduction
212 ES2016 Exponentiation Operator and Includes
213 padStart and padEnd
214 Async Functions Introduction
215 Async Functions Continued
216 Coding Exercise - Async Functions Assignment
217 Exercise SOLUTION Async Functions
218 Object Rest and Spread Recap

D3 and the DOM
219 Section Introduction
220 An Introduction to D3
221 D3 Selections
222 Selections and Callbacks
223 Event Listeners in D3
224 Exercise Guess the Password Refactor
225 Solution Guess the Password Refactor
226 Exercise Notes App
227 Solution Notes App

Data Joins and Update Patterns in D3
228 Section Introduction
229 Basic Data Joins and Enter Selections
230 Exit Selections and Key Functions
231 The General Update Pattern in D3
232 Exercise Character Frequencies
233 Solution Character Frequencies

SVG and D3
234 Section Introduction
235 Introduction to SVG
236 Rectangles Polygons and Circles in SVG
237 Text Elements in SVG
238 Path Elements in SVG
239 Exercise SVG Flags
240 Solution SVG Flags
241 Introduction to SVG and D3
242 Exercise Character Frequencies Revisited
243 Solution Character Frequencies Revisited

Intermediate D3
244 Section Introduction
245 Extrema and Scales
246 Scatterplots
247 Axes and Gridlines
248 Exercise Scatterplot
249 Solution Scatterplot
250 Histograms
251 Histograms Continued
252 Exercise Histograms
253 Solution Histograms
254 Pie Charts
255 Pie Charts Continued
256 Exercise Pie Charts
257 Solution Pie Charts

D3 Odds and Ends and Advanced Graph Types
258 Section Introduction
259 Tooltips
260 Transitions
261 Managing Asynchronous Code with D3
262 Exercise D3 Odds and Ends
263 Solution D3 Odds and Ends
264 An Introduction to GeoJSON
265 An Introduction to TopoJSON
266 Map Visualization Example
267 Nodes in Force-Directed Graphs
268 Links in Force-Directed Graphs
269 Dragging Nodes and Alpha Values
270 General Update Pattern with Force-Directed Graphs

Project Building a Data Dashboard with D3
271 Project Introduction and Requirements
272 Project Example Solution Part 1
273 Project Example Solution Part 2

Introduction To React and JSX
274 Section Introduction
275 How To Get The Code From Cloud9
276 Front-end Framework Introduction
277 First React Component
278 JSX
279 JSX With JavaScript
280 Exercise Random Box
281 Random Box Assignment Solution
282 Multiple React Components

Create React App and Props
283 Section Introduction
284 Create React App
285 Create React App Files
286 JavaScript Import Statements
287 Import HobbyList Assignment
288 Import HobbyList Solution
289 Intro to Props
290 Recipe App With Props
291 Recipe App With Props Continued
292 Default Props and Prop Types
293 Recipe App Props Exercise
294 Recipe App Props Solution
295 props.children

296 Intro to State
297 Pure Functions
298 Update Complex State Exercise
299 Update Complex State Solution
300 React Component Architecture
301 setState Can Be Tricky
302 React DevTools
303 Colored Boxes Exercise
304 Colored Boxes Solution

The Virtual DOM Events and Forms
305 Section Introduction
306 The Virtual DOM
307 Events
308 Forms
309 Todo App Exercise
310 Todo App Solution
311 Refs
312 Recipe App With State
313 Recipe App With State - New Recipe Form
314 Recipe App With State - Saving The New Recipe
315 Recipe App With State - ShowHide Form
316 Recipe App With State - Delete Recipe
317 Memory Game
318 Memory Game Solution Part 1
319 Memory Game Solution Part 2

Component Lifecycle Methods
320 Introduction To Component Lifecycle Methods
321 Component Lifecycle Method Examples
322 Country Flag Guessing App Exercise
323 Country Flag Guessing App Solution

324 Warbler App Introduction
325 Introduction to Authentication
326 Authentication in NodeJS
327 Nested Resources Adding Messages
328 Saving a Message And NodeJS Middleware
329 Authentication vs Authorization
330 Authorization Middleware Solution
331 Getting All Messages
332 SigninSignup Exercise

React Router
333 Section Introduction
334 HTML5 History Object
335 Introduction to React Router
336 Introduction to React Router Continued

337 Section Introduction
338 Introduction to Redux Without React
339 React With Redux
340 Exercise Redux Refactor
341 Redux Refactor Solution
342 Organizing Redux
343 Redux Docs Todos Example
344 Redux Thunk Middleware
345 Warbler Final Project