Javascript
Designed for beginners and intermediate learners alike, this comprehensive course requires only a foundational knowledge of HTML and CSS. Step into the world of JavaScript, learning to integrate it into your projects, and understanding its core concepts. By the end of this journey, you will have built an impressive portfolio of projects, showcasing your newfound skills.
Course Curriculum: 46 Hours of Content
Course Kickoff
Available in
days
days
after you enroll
Visual Studio Code and Google Chrome
Available in
days
days
after you enroll
Javascript Fundamentals
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Deployment
Available in
days
days
after you enroll
Objects
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
ES6
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Numbers Project
Available in
days
days
after you enroll
Dark Mode Project
Available in
days
days
after you enroll
Filters Project
Available in
days
days
after you enroll
Modules
Available in
days
days
after you enroll
Async Javascript
Available in
days
days
after you enroll
AJAX
Available in
days
days
after you enroll
AJAX Projects
Available in
days
days
after you enroll
Dad Jokes - Project
Available in
days
days
after you enroll
Products - Project
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Cocktails - Project
Available in
days
days
after you enroll
Additional Projects
Available in
days
days
after you enroll
Slider
Available in
days
days
after you enroll
Stripe Submenus
Available in
days
days
after you enroll
Pagination
Available in
days
days
after you enroll
Wikipedia API
Available in
days
days
after you enroll
Comfy Store
Available in
days
days
after you enroll
- 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
Check your inbox to confirm your subscription