Course Kickoff
Visual Studio Code and Google Chrome
Javascript Fundamentals
-
Intro (0:17)
-
Setup New Project (3:00)
-
Inline Javascript (3:15)
-
Internal Javascript (7:51)
-
External Javascript (10:01)
-
Cleanup Workspace (1:08)
-
Helper Methods (10:06)
-
Statements and Comments (9:31)
-
Variables (8:47)
-
Assign Variable Value Later (4:22)
-
Variable Naming Rules (6:04)
-
const, let , var (5:14)
-
Challenges Intro (1:13)
-
Variables Challenge (3:59)
-
Prettier Settings (3:21)
-
Quotation Marks (5:46)
-
String Concatenation (5:25)
-
String Concat Challenge (2:54)
-
Numbers Basics (8:21)
-
Numbers - Additional Features (8:24)
-
Numbers Challenge (7:10)
-
Implicit Type Conversion (12:00)
-
Data Types (8:13)
-
Arrays (11:14)
-
Arrays Challenge (2:58)
-
Functions - Declare, Invoke (6:27)
-
Functions - Parameters, Arguments (12:56)
-
Functions - Return (13:21)
-
Function Expression (7:43)
-
Functions Challenge (6:31)
-
Objects (8:23)
-
Objects Challenge (4:20)
-
Conditional Statements - Basics (5:57)
-
Conditional Statements Continued (7:02)
-
Equality (4:24)
-
Logical Operators (4:24)
-
Switch Statement (7:27)
-
Conditionals Challenge (4:33)
-
while Loops (5:56)
-
do while Loops (2:57)
-
for loop (4:03)
Javascript Tutorial Continued
-
Connecting the Dots (0:24)
-
String Properties and Methods (16:35)
-
Template Literals (6:10)
-
Strings Challenge (7:14)
-
Array Properties and Methods (11:51)
-
Exercise - Full Name (10:13)
-
Exercise - Calculate Total (14:40)
-
Value vs Reference (5:51)
-
Null and Undefined (2:16)
-
Truthy and Falsy (4:34)
-
Ternary Operator (4:16)
-
Global Scope (7:25)
-
Local Scope (7:02)
-
Variable Lookup (6:52)
-
Callback Functions, Higher Order Functions (15:07)
-
Array Iterators (2:22)
-
forEach (9:44)
-
map (10:43)
-
filter (3:55)
-
find (8:30)
-
reduce (9:49)
-
Array Challenge - Intro (1:00)
-
Array Challenge - Setup Data (3:43)
-
Array Challenge - Multiple Files (6:15)
-
Array Challenge - Map (4:49)
-
Array Challenge - Filter (3:30)
-
Array Challenge - Filter Alternative Syntax (4:09)
-
Array Challenge - Find (3:59)
-
Array Challenge - Reduce #1 (5:51)
-
Square Bracket Notation (3:22)
-
Array Challenge - Reduce #2 (6:05)
-
Math Object (8:33)
-
Date Object (9:18)
DOM
-
DOM - Intro (2:39)
-
DOM - General Concepts (8:40)
-
Window and Document Overview (4:15)
-
getElementById (6:51)
-
getElementsByTagName (8:21)
-
getElementsByClassName (1:57)
-
querySelector and querySelectorAll (7:29)
-
Navigate the DOM - Children (4:54)
-
Navigate the DOM - parentElement (3:06)
-
Navigate the DOM - nextSibling, previousSibling (4:28)
-
Navigate the DOM - nextElementSibling, previousElementSibling (1:15)
-
textContent and nodeValue (2:57)
-
getAttribute() and setAttribute() (8:09)
-
classList and className (9:28)
-
createElement, createTextNode, appendChild (8:09)
-
insertBefore (3:43)
-
replaceChild (2:23)
-
prepend, innerText (3:10)
-
remove, removeChild (4:52)
-
innerHTML, textContent (8:24)
-
Change CSS with Style Property (5:07)
-
Events Overview (1:53)
-
Click Event (7:24)
-
Function Reference (4:51)
-
Mouse Events (5:17)
-
Key Events (4:14)
-
Event Object (10:48)
-
currentTarget, target (7:33)
-
Event Propagation, Bubbling, Capturing (10:39)
-
Event Propagation Example (7:31)
-
Forms (5:48)
-
Local Storage (9:22)
-
Local Storage with Multiple Values (9:05)
-
setTimeout (9:36)
-
setInterval (3:22)
-
Events - "DOMContentLoaded" (6:07)
-
Events - "load" (6:10)
-
Events - "scroll" (2:48)
-
Width, Height, GetBoundingClientRect (7:09)
-
Events - "resize" (1:07)
DOM Projects
-
Intro (1:17)
-
Starter Project
-
Setup (4:11)
-
Color Flipper - HTML (4:10)
-
Color Flipper - JS (8:58)
-
Color Flipper - Hex (10:16)
-
Counter - HTML (2:25)
-
Counter - JS (11:14)
-
Reviews - HTML (4:45)
-
Reviews - JS (22:40)
-
Navbar - HTML (2:48)
-
Navbar General Concepts (4:08)
-
Navbar - JS (7:56)
-
Sidebar - HTML (3:44)
-
Sidebar Manual Setup (3:07)
-
Sidebar - JS (5:51)
-
Modal - HTML (3:39)
-
Modal - Challenge (2:42)
-
Modal - JS (3:02)
-
Questions - HTML (7:14)
-
Questions - General Concepts (2:54)
-
Questions - Traversing the DOM (7:32)
-
Questions - Using Selectors Inside the Element (10:20)
-
Menu - HTML (6:56)
-
Menu - Display Items When Page Loads (14:39)
-
Menu - Refactor (3:12)
-
Menu - Filter Buttons HTML (1:57)
-
Menu - Filter Buttons JS (11:42)
-
Menu - Dynamic Filter Buttons (4:01)
-
Menu - Unique Categories (7:29)
-
Menu - Dynamic Filter Buttons Complete (9:40)
-
Video - Intro (1:12)
-
Video - HTML (2:44)
-
Video - Overlay Setup (2:42)
-
Video - JS (4:59)
-
Video - Preloader (4:51)
-
Scroll - Intro (3:31)
-
Scroll - HTML (10:37)
-
Scroll - Setup Date (2:11)
-
Scroll - Toggle Simple Setup (6:17)
-
Scroll - Toggle Dynamic Setup (10:44)
-
Scroll - Fixed Navbar (8:50)
-
Scroll - Smooth Scroll Setup (10:23)
-
Scroll - Smooth Scroll Complete (10:53)
-
Tabs - HTML (11:42)
-
Tabs - JS (10:56)
-
Countdown - HTML (5:53)
-
Countdown - Set Date (19:51)
-
Countdown - Calculate Remaining Time (27:47)
-
Countdown - Time From Now (4:10)
-
Lorem Ipsum - HTML (4:26)
-
Lorem Ipsum - JS (17:20)
-
Grocery Bud - Intro (3:22)
-
Grocery Bud - HTML (5:09)
-
Grocery Bud - Select Elements (3:13)
-
Grocery Bud - Add Item Setup (7:26)
-
Grocery Bud - "Truthy" Shortcut (3:32)
-
Grocery Bud - Display Alert (5:29)
-
Grocery Bud - Add Item Complete (8:49)
-
Grocery Bud - Set Back To Default (2:34)
-
Grocery Bud - Clear Items (6:54)
-
Grocery Bud - Select Edit and Delete Buttons (7:23)
-
Grocery Bud - Delete Item (7:18)
-
Grocery Bud - Edit Item (11:16)
-
Grocery Bud - Local Storage Info (4:25)
-
Grocery Bud - Add To Local Storage (8:38)
-
Grocery Bud - Remove From Local Storage (5:39)
-
Grocery Bud - Edit Local Storage (4:47)
-
Grocery Bud - Load Items From Local Storage (6:49)
-
Slider - Intro (1:29)
-
Slider - HTML (3:34)
-
Slider - General Concepts (5:14)
-
Slider - JS Setup (3:27)
-
Slider - Slides Approach (6:07)
-
Slider - Button Approach (2:48)
Objects
-
Intro (2:10)
-
Object Basics (6:13)
-
Nested Objects, Bracket Notation (11:59)
-
'this' - Keyword Basics (8:20)
-
'this' - Keyword Advanced (7:10)
-
Factory Functions (6:42)
-
Constructor Functions (7:48)
-
Constructor Property (4:51)
-
Prototype Property (9:58)
-
Property Lookup (5:45)
-
ES6 Class Syntax (12:14)
-
Call (9:42)
-
Apply Arguments (5:42)
-
Bind (2:15)
-
Button Example (8:48)
OOP Projects
-
Intro (2:10)
-
Setup (1:47)
-
Counter - HTML (3:10)
-
Counter - Initial Setup (7:56)
-
Counter - Select Elements (5:13)
-
Counter - Functions (4:05)
-
Counter - Complete (5:43)
-
Counter - Class Refactor (3:43)
-
Gallery - Intro (1:08)
-
Gallery - HTML (9:25)
-
Gallery - Select Elements (6:37)
-
Gallery - Open Modal Setup (12:10)
-
Gallery - Open Modal Complete (12:06)
-
Gallery - Close Modal (6:31)
-
Gallery - Prev and Next (5:22)
-
Gallery - Select Images (5:31)
-
Gallery - Class Refactor (0:39)
Functions
ES6
-
ES6 Module Intro (2:20)
-
VAR, LET, CONST (6:07)
-
Function Scope and Block Scope (10:18)
-
Template Strings (3:43)
-
Template Strings - HTML (5:26)
-
Tagged Template Literals (11:08)
-
Arrow Functions - Basics (14:16)
-
Arrow Functions - Objects and "this" (6:55)
-
Arrow Functions - Select Element and "this" (4:47)
-
Default Parameters and Hoisting Gotchas (3:50)
-
Array Destructuring (5:24)
-
Swap Variables (2:39)
-
Object Destructuring (5:03)
-
Destructuring Function Parameters (3:01)
-
New String Methods (7:32)
-
"for of" - Loop (3:59)
-
Spread Operator - Basics (5:27)
-
Spread Operator - Objects (3:01)
-
Spread Operator - DOM Elements (3:27)
-
Spread Operator - Function Arguments (3:38)
-
Rest Operator (10:37)
-
Array.of (2:06)
-
Array.from - Strings and Arguments Object (4:34)
-
Array.from - DOM Elements (NodeList) (7:00)
-
find, findIndex, every, some (8:59)
-
"for in" - loop (1:44)
-
Object.keys() (1:15)
-
Object.values() (0:26)
-
Object.entries() (4:41)
-
new Set() - General Overview (4:21)
-
new Set() - Use Case (6:02)
-
String - includes() (5:31)
-
Array - includes() (3:08)
-
Important Info (1:22)
ES6 - Projects
Numbers Project
Dark Mode Project
Filters Project
Async Javascript
AJAX
AJAX Projects
Dad Jokes - Project
Products - Project
-
Intro (0:33)
-
HTML Structure (7:39)
-
Possible AJAX States (4:01)
-
API Docs (3:28)
-
Fetch Products (3:34)
-
Loading and Error (3:50)
-
Start Function (5:03)
-
Display Products (11:57)
-
Query Params (5:47)
-
Single Product HTML (5:25)
-
Initial Logic (4:31)
-
Fetch Product (8:04)
-
Display Single Product (5:38)
-
Display Colors (3:06)
Random User - Project
Cocktails - Project
Additional Projects
Slider
Stripe Submenus
Pagination
Wikipedia API
Comfy Store
-
Intro (3:59)
-
About (3:29)
-
Starter Project
-
Setup (1:56)
-
Starter Overview (3:35)
-
Navbar, Hero - HTML (7:50)
-
Sidebar HTML (6:13)
-
Sidebar Toggle (8:59)
-
Cart HTML (10:31)
-
Cart Toggle (8:18)
-
About Page (6:51)
-
API Overview (7:33)
-
Featured Products - HTML (9:26)
-
Fetch Products (8:20)
-
Setup Store (11:11)
-
Exports - Alternative Syntax (2:50)
-
Local Storage (9:09)
-
Featured Products (1:42)
-
Display Products (8:31)
-
Format Price (10:20)
-
AddToCart Setup (6:16)
-
Product HTML (4:12)
-
Display All Products (2:36)
-
Page Loading (3:30)
-
Filters HTML (4:07)
-
Search Filter (15:08)
-
Companies Filter (15:13)
-
Price Filter (13:04)
-
Single Product - Overview (3:29)
-
Single Product - HTML (8:11)
-
Single Product - Initial JS (5:42)
-
Single Product - Fetch Product (4:21)
-
Single Product - Fetch Error (9:25)
-
Single Product - Complete (13:07)
-
setupCart - Initial Setup (9:43)
-
addToCart - Setup (11:22)
-
addToCart - DOM (8:32)
-
addToCart - Totals (9:33)
-
setupCart - init (7:42)
-
Cart - Update Items (10:28)
-
Cart - Remove Item (9:45)
-
Cart - Increase Amount (3:25)
-
Cart - Decrease Amount (5:41)
-
Products Page Fix (6:10)
-
Bug Fix 2 (5:47)
-
Finished Project
