Creating-Class-Components | StackSkills

Autoplay
Autocomplete

Previous Lesson Complete and Continue

JavaScript MasterClass

JavaScript - The Foundations

Variables - Animation Intro (4:53)
Variables Workspace (4:20)
Variables Cheat Sheet
String - Animation Intro (5:40)
String Workspace (5:45)
Strings Cheat Sheet
Operators - Animation Intro (7:48)
Operators Workspace (7:06)
JavaScript Foundations Review (17:02)

Launching a Career in Tech

Get Out of Tutorial Hell
Landing Your First Developer Job
Dealing with Time Management and Imposter Syndrome
What to Put in a Junior Developer Portfolio

JavaScript Foundations - Build Your First Mini Apps

Temperature Gauge Challenge
Temperature Gauge Challenge Video Walkthrough (9:51)
How Old Am I Challenge
How Old Am I Challenge Video Walkthrough (8:22)

Deep Dive into JavaScript Objects

Objects - Animation Intro (4:43)
Objects Workspace (3:54)
Dot and Bracket Notation - Animation Intro (5:12)
Dot and Bracket Notation Workspace (4:40)
Object Constructor Function - Animation Intro (6:26)
Object Constructor Function Workspace (6:03)
The Secret Life of JavaScript Primitives (7:23)

Handling Lists with JavaScript Arrays

JavaScript Array Syntax - Animation Intro (4:27)
JavaScript Array Syntax Workspace (4:15)
Array Built In Methods Animation (5:17)
Array Built In Methods Workspace (4:19)
Array Methods Part 2 Animations Intro (5:23)
Array Methods Part 2 Workspace (6:54)
Array Review (12:39)

Array Focused Projects

Using Arrays to Create Random Insults
Using Arrays to Create Random Insults - Video Walkthrough (9:21)
Mini Project: Random Insult Generator Video Walkthrough

JavaScript Function

How to Write a Function - Animation Intro (4:26)
How to Write a Function Workspace (3:46)
Deeper Dive with Function - Animation Intro (5:29)
Deeper Dive with Functions Workspace (5:03)
Functions Part3 - Whiteboard (5:15)
Functions Part3 - Lab (7:02)

JavaScript Functions: Project Section

Rock, Paper, Scissors Alternative Game
Rock, Paper, Scissors Alternative Game- Video Walkthrough (18:25)
Rock, Paper, Scissors Alternative Game- Video Walkthrough - Step by Step (10:12)
Rock, Paper, Scissors Alternative Game - Code
Mini App: Hit the Gym
Mini App: Hit the Gym - Video Walkthrough (21:28)
Mini App: Hit the Gym - Step by Step (7:50)
Hit the Gym - Code

JavaScript Conditionals and Loops

Looping Around Part 1 - Whiteboard Animation (7:54)
Looping Around Part 1 Workspace (7:13)
Switch - Whiteboard (3:51)
Switch - Lab (7:36)
Loops Part2 - Whiteboard (7:37)
Loops - Part2 - Lab (7:11)

JavaScript Loops & Conditionals: Mini App

Magic 8 Ball (9:12)
Magic 8 Ball - Video Walkthrough

JavaScript Regular Expressions

Regex (8:48)
Regex Lab

Context: This, Bind, Call & Apply

This and Bind - Whiteboard (5:04)
This and Bind - Lab (5:59)
This and Call - Whiteboard (5:57)
This and Call - Lab (5:19)

Functional Programming

Functional Programming Part 1 - Whiteboard (9:03)
Functional Programming Part 1 - Lab (8:29)
Functional Programming Part 2- Whiteboard (7:26)
Functional Programming Part 2 - Lab (7:09)
Functional Programming Part 3 - Whiteboard (7:37)
Functional Programming Part 3 - Lab (8:17)

Whiteboard Algorithms

Identify Unique String (9:36)
Identify Longest Word in a String (8:22)
Permutation of Two Strings (9:34)

ES6

Let Statements - Whiteboard (5:29)
Let Statements Lab (7:57)
Const Declaration - Whiteboard and lab (3:08)
Arrow Functions - Whiteboard (5:25)
Arrow Function - Lab (6:13)
Spread Operator - Whiteboard (6:15)
Spread Operator - Lab (6:28)

More Algorithm Challenges

Environment Setup
Repeat String with For Loop (8:00)
Remove Odd Numers from Array Filter Method (5:37)
Palindrome (8:51)
Sum of Range (6:45)
Repeat String with While Loop (5:53)
Remove Elements from Head (7:57)
Name Swap Indices (8:44)
Remove Odd Number from Array with Modulus Operator and For Loops (8:45)
Reverse a String (11:57)
Reverse-a-String-Part-2 (1:43)
Reverse-a-String-Part-3 (5:31)
Reverse-a-String-Part-4 (5:31)
Find-Longest-String-Part-1 (12:05)
Find the Longest String Part 2 (8:27)
Filter String Array (12:00)
Is-Palindrom (11:57)

Introduction to the DOM

Introduction-to-the-DOM (7:51)
DOM-Tree-Nodes (6:07)

Todo App

Todo-List-Project-Overview (4:42)
Todo-List Document.querySelector()-Document.getElementById() (8:37)
Todo-List Changing-the-DOM-with-textContent (6:11)
Todo-List More-DOM-Methods-and-Properties (10:07)
Todo-List User-Interactions-and-Event-Listeners (4:10)
Todo-App-Without-Local-Storage (13:41)
Todo-List Working-with-Forms (6:25)
Todo-App Local-Storage (6:10)
Todo-App-With-Local-Storage (13:38)
CSS (3:09)
How-to-Share-Code (2:23)

Matching Game

Matching-Intro (6:14)
Matching-Part-1 (9:41)
Matching-Part-2 (2:27)
Matching-Part-3 (2:07)
Matching-Part-4 (4:19)
Matching-Part-5 (2:33)
Match-Part-6 (8:15)
Matching-Part-7 (3:35)
Matching-Part-8 (2:18)
Matching-Part-9 (5:13)

Quote Machine

Quote Machine Intro
Quote-Machine-HTML-CSS-Video-Walkthrough (13:30)
Quote Machine Javascript
Quote-Machine-JavaScript-Video-Walkthrough (16:20)
Quote-Machine-Deploy (1:37)

HTML & CSS Primer

Website-Overview (1:50)
Website-Text-Editor (2:35)
HTML-Intro (6:14)
HTML-Elements-and-Tags (6:56)
HTML-About (3:45)
HTML-Services (8:42)
HTML-Comments-and-Structure (7:06)
HTML-Header (6:01)
HTML-Hero (4:28)
HTML-Testimonal (6:40)
HTML-Footer (4:09)
CSS-Intro (5:32)
CSS-Header (9:34)
CSS-Hero (5:14)
CSS-Internal-Navigation (4:04)
CSS-About-and-Testimonial (3:03)
CSS-Footer (2:46)
CSS-Services (2:47)

Front End Cookbook

CSS-Animations-Video-Walkthrough (15:39)
CSS-Animations-Challenge-Video-Walkthrough (15:02)
CSS-Transitions-Video-Walkthrough (9:22)
CSS-Transitions-Challenge-Video-Walkthrough (9:27)
JS-Debugger-Part3 (4:49)
JS-Debugging-Part1 (6:06)
JS-Debuggin-Part2 (5:02)
JS-Moment-Basics (8:32)
JS-Moment-Christmas-Countdown (11:46)

React

React-From-Scratch (12:09)
Challege-Using-JSX (8:49)
Code-Refactor (3:01)
Rendering-One-Element (3:54)
React-Babel (7:07)
React-Rendering-Multiple-Elements (4:20)
Creating-Stateless-Functional-Components (7:04)
Stateless-Functional-Components-Practice (4:17)
Creating-Class-Components (6:16)
Class-Components-Practice (3:27)
Styling-Stateless-Functional-Components (8:04)
Styling-Class-Componets (8:36)
Styling-Within-Component (9:29)
Complex-Components (6:10)
Setting-Up-Project (6:11)
Building-Our-Components (3:50)
Styling-Our-Components-Part1 (6:39)
Styling-Our-Components-Part2 (5:30)
Props-Part1 (7:10)
Props-Part2 (5:51)
Props-Part3 (7:48)
Codepen-Challenge1 (3:36)
Codepen-Challenge2 (2:30)
Codepen-Challege3 (5:25)
Codepen-Challenge4 (3:17)
Codpen-Challenges5
Props-Project (10:05)
Iterating-Through-Lists (10:10)
Iterating-Through-Lists-Refactor (1:59)
Rendering-Two-Filtered-and-Transformed-Lists-to-the-DOM (7:15)
Filter-and-Map-On-Array (4:20)
Codepen-Challenge-Part1 (4:32)
Codepen-Challenge-Part2 (4:20)
Color-Spectrum-Refactor (6:55)
Friendly-Filter-and-Map-Two-Lists-DOM (6:54)
React-Events-Part2 (8:35)
Useless-Note-Taker-Introduction-to-Events (10:14)
Guess-My-Age-Intro-to-State (13:36)
Food-Menu-Vote (13:50)
React-Ajax-Requests (18:45)
React-Forms (10:52)
Friendly-App-Refactor-with-Map (7:16)

Svelt - Build Apps with Svelt.js

Instructor Note
Svelte Info (1:21)
Section Requirements (3:34)
Text Editor Setup (1:59)

Svelte Project - Budget Calculator

Intro (2:46)
Starter Application (4:40)
Folder Structure (8:51)
Setup Files
Add Global CSS & Font Awesome (3:02)
Component Overview (4:45)
Navbar Component Intro (5:43)
Navbar Component (7:17)
Title Component (3:32)
Props Basics (9:43)
CSS (9:32)
Each Block (9:48)
Expenses Data (4:04)
Expenses Component (11:49)
Else and Passing Props (12:56)
Expense Component (4:24)
If Block (3:51)
Events (9:46)
Component communication (6:55)
Props Drilling (9:14)
SetContext and GetContext (10:02)
createEventDispatcher (9:52)
Clear Expenses Button (4:53)
Reactivity (15:07)
Form Setup (7:57)
Two Way Binding (7:43)
Empty Values Functionality (12:18)
Form Submission (5:18)
Add New Expense (6:28)
setModifiedExpense (11:04)
Pass Edit Values into Form (13:01)
Edit Expense (6:16)
34.5-other-option (13:15)
Toggle Form (7:33)
Lifecycle Functions (5:50)
Setup Local Storage API (10:05)
afterUpdate (6:39)
Slot Basics (10:30)
Complete Modal (4:32)
Transition Basics (8:36)
Transition Parameters (3:35)
Transition - in: and out: (1:55)
Modal Transitions (2:28)
Simple Expense Transition (6:44)
Key Expression in Each Block and Animate (9:26)
HTTP Request Using onMount (14:57)
HTTP Request using #Await Blocks (6:50)
Deploy on Netlify - Drag and Drop (3:44)
Deploy on Netlify - Continuous Deployment (5:38)

Svelte Project - Ecommerce App - Razor

Creating-Class-Components

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock