Bootcamp - video count: 180




WEEKS 9-10

John Components

John Promo videos
John talking head intro videos
VSCode and GitHub Integration

VSCode and GitHub Integration
Camtasia file
JS and ES6 Exercises

JS and ES6 Exercises
Camtasia file
ES6 React Warmup

ES6 React Warmup
Camtasia file
JS Did You Know

JS Did You Know
Camtasia file
Lists and Buttons-Using Props and Anonymous Functions

Lists and Buttons-Using Props and Anonymous Functions
Camtasia file
ATM User Interface Exercise

ATM User Interface Exercise
Camtasia file
Fetch Remote Data (from Hacker News)

Fetch Remote Data (from Hacker News)
Camtasia file
Tik Tak Toe Game

Tik Tak Toe Game
Camtasia file
Shopping Cart Front End, Strapi Backend, complete App

Shopping Cart Front End, Strapi Backend, complete App
Camtasia file
Create-react-app

Create-react-app
Camtasia file
Build and Deploy Static Web Site to AWS S3

Build and Deploy Static Web Site to AWS S3
Camtasia file
GraphQL Query of Remote API

GraphQL Query of Remote API
Camtasia file
VSCode, GitHub and Integration
John JavaScript ES6 Warm Up

John Components - Week 1 after Abel Intro to ES6

ES6 Warm Up Exercises 1

ES6 Warm Up Exercises 1
Camtasia file
ES6 Warm Up Exercises 2

ES6 Warm Up Exercises 2
Camtasia file
ES6 Warm Up Exercises - Solution Ex 1

ES6 Warm Up Exercises
Camtasia file
ES6 Warm Up Exercises - Solution Ex 2

ES6 Warm Up Exercises
Camtasia file
ES6 Exercise

ES6 Exercise
Camtasia file
JSX Intro - Render Element

JSX Intro - Render Element
Camtasia file
JSX Component Intro

JSX Component Intro
Camtasia file
JSX Moving Data into Component using Props and Props with Callback

JSX Moving Data into Component using Props and Props with Callback
Camtasia file
John ES6-React Intro

John ES6-React Week 2 after Abel Intro to ES6

ES6-React Fat Arrow Function 1

ES6-React Fat Arrow Function 1
Camtasia file
ES6-React Destructuring an Object

ES6-React Destructuring an Object
Camtasia file
ES6-React Destructuring and Renaming an Object

ES6-React Destructuring and Renaming an Object
Camtasia file
ES6-React Map to Generate Child Buttons

ES6-React Map to Generate Child Buttons
Camtasia file
ES6-React using Props Index to Identify Buttons

ES6-React using Props Index to Identify Buttons
Camtasia file
ES6-React using Closure to Generate Id Functions

ES6-React using Closure to Generate Id Functions
Camtasia file
ES6-React Deleting Button Exercise

ES6-React Deleting Button Exercise
Camtasia file
ES6-React Deleting Button Solution

ES6-React Deleting Button Solution
Camtasia file
Did you know this about Javascript
EcmaScript262 - How the Interpreter Runs

EcmaScript262 - How the Interpreter Runs
my camtasia file
Did you know how to define a Range Function

Did you know how to define a Range Function
my camtasia file
Did you know how to Filter Lists

Did you know how to Filter Lists
my camtasia file
Did you know how to use Reduce

Did you know how to use Reduce
my camtasia file
John(Week 2)- Rendering Lists
Rendering Lists

Rendering Lists
Camtasia file
Rendering Lists with Buttons and handling onClick events

Rendering Lists with Buttons and handling onClick events
Camtasia file
Anonymous onClick function to pass multiple arguments

Anonymous onClick function
Camtasia file
Lists with State - Capturing button Clicks

Lists with State - Capturing button Clicks
Camtasia file
Understanding Rendering - React Shadow DOM

Understanding Rendering React Shadow DOM
Camtasia file
Effect Hook runs When? - React Shadow DOM

Effect Hook runs When? React Shadow DOM
Camtasia file
Lists Exercise 1 - Simple Data

Lists with...
Camtasia file
Lists Exercise 2 - Shopping Cart with Complex Data

Lists with...
Camtasia file
Lists Exercise 3 - Shopping Cart - Multiple Lists

Move Items into Cart Exercise
Camtasia file
ATM Simple Components

ATM - Week(3 or 4) Long Exericse in Writing Simple Components

ATM Raw HTML

ATM Raw HTML
Camtasia file
ATM Component

ATM Component
Camtasia file
ATM Component Solution Stage 1

ATM Component Solution Stage 1
Camtasia file
ATM Component Solution Stage 2

ATM Component Solution Stage 2
Camtasia file
ATM Component Solution Stage 3

ATM Component Solution Stage 3
Camtasia file
Shopping Cart - Getting Datat from URL

Data Lists (Week 4 or possibly 5?) - Fetching Data from HackerNews URL (useEffect01)

Get Data from URL

Get Data from URL - uses same list of fruits
Camtasia file
Fetch Data using useEffect - update

Fetch Data using useEffect02
Camtasia file
Fetch Data using useEffect - mount, update, unmount

Fetch Data using useEffect03
Camtasia file
Fetch Data using useReducer

Fetch Data using useReducer
Camtasia file
Fetch Data using Pagination

Fetch Data using useReducer
Camtasia file
TikTacToe Exercise Week 5

Tik - Week Long Exericse in Writing Parent Child Components

TikTakToe Overview

TikTakToe Overview
Camtasia file
Generate the TikTakToe Board

Generate the TikTakToe Board
Camtasia file
TikTakToe Catch Events (03)

TikTakToe Catch Events (03)
Camtasia file
TikTakToe Add Tiles as Child Components 02

TikTakToe Add Tiles as Child Component 02
Camtasia file
TikTakToe Pass id as State from Parent to Child

TikTakToe Pass id as State from Parent to Child
Camtasia file
TikTakToe Change Color of Tile ie its own State (3 Tiles still)

TikTakToe Change Color of Tile ie its own State
Camtasia file
TikTakToe Move Child State To Parent

TikTakToe Move Child State To Parent
Camtasia file
TikTakToe Mount Life Cycle - Delete Row - (3 Tiles still)

TikTakToe Mount Life Cycle - Delete Row
Camtasia file
TikTakToe Parent State Forces Child Render - (3 Tiles still)

TikTakToe Parent State Forces Child Render
Camtasia file
TikTakToe useEffect for Managing Lifecycle Events

TikTakToe useEffect for Managing Lifecycle Events
Camtasia file
TikTakToe useState Delay in Update Issue

TikTakToe useState Delay in Update Issue
Camtasia file
TikTakToe Passing Player From Parent to Child 01

TikTakToe Passing Player From Parent to Child 01
Camtasia file
TikTakToe Tracking Total Game State

TikTakToe Tracking Total Game State
Camtasia file
TikTakToe Final Refactor

TikTakToe Final Refactor
Camtasia file

WEEKS 11-12

WEEKS 13-14

John Week long Exercise Shopping Cart
Strapi Install

Strapi Install
my camtasia file
Strapi Introduction 1 - Setup Contacts

Strapi Introduction 1 - Setup Contacts
my camtasia file
Strapi Product DataBase for Shopping Cart

Strapi Product DataBase for Shopping Cart
my camtasia file
Postman Install

Postman Install
my camtasia file
Shopping Cart Exercise 1

Shopping Cart Exercise 1
my camtasia file
Shopping Cart Exercise 1 Solution 1

Shopping Cart Exercise 1 Solution 1
my camtasia file
Shopping Cart Exercise 1 Alternative Solution 2

Shopping Cart Exercise 1 Solution using Closure
my camtasia file
Shopping Cart Exercise 2

Shopping Cart Exercise 2
my camtasia file
Shopping Cart Exercise 2 Solution

Shopping Cart Exercise 2 Solution
my camtasia file
Shopping Cart DB Exercise 5 Description

Shopping Cart DB Exercise 5 Description
my camtasia file
Shopping Cart Exercise 5 start Code

Shopping Cart Exercise 5 start Code
my camtasia file
Shopping Cart Exercise 5 Solution

Shopping Cart Exercise 5 Solution
my camtasia file
Hitting API's Using Postman and Express Web Server

Hitting API's Using Postman and Express Web Server
my camtasia file
Understanding Create-React-App Structure
Create-React-App Layout

Create-React-App Layout
my camtasia file
Create-React-App Layout - Shopping Cart Example

Create-React-App Layout - Shopping Cart Example
my camtasia file
Static Web Site - Deploy React as a Static Web Site
Build and Deploy Static Web Site on Local Machine

Build and Deploy Static Web Site on Local Machine
my camtasia file
Build and Deploy Static Web Site on AWS S3

Build and Deploy Static Web Site on AWS S3
my camtasia file
GraphQL - calling Targetted Content
GraphQL Demo - Using Strapi as DB

GraphQL Demo - Using Strapi as DB
my camtasia file

WEEKS 15-16

Abel's Content

Styling components using bootstrap
Html Components, Web Compents, and React Components
abel - module/section intros
ES6

ES6
JSX

JSX
Styles - bootstrap

Styles - bootstrap
Forms - capturing data

Forms - capturing data
ToDo List

ToDo List
Components - HTML, Javascript, & Frameworks

Components - HTML, Javascript, & Frameworks
Routing

Routing
Bad Bank

Bad Bank
Testing

Testing

Sample Icons

         github
         code 
         video 
         slides 
         pdf 
         ppt 
         zip 
         text 
         link 
         tools