Preparation
Overview of web
HTML
-
Create a HTML boilerplate (5:23)
-
Create a HTML boilerplate - exercise (3:11)
-
HTML tag & attributes (6:06)
-
Indentation (2:30)
-
Text (5:45)
-
Text - exercise (1:11)
-
Image (5:52)
-
Image - exercise (2:03)
-
Hyperlink (2:49)
-
Hyperlink - exercise (1:24)
-
Table (5:23)
-
Table - exercise (1:49)
-
List (1:39)
-
List - exercise (0:46)
-
Layout elements (4:17)
-
Element ID & class (2:01)
-
Element ID & class - exercise (1:11)
-
Overview of form elements (0:42)
-
Form - text box (2:21)
-
Form - label (1:29)
-
Form - radio button (4:03)
-
Form - checkbox (2:01)
-
Form - file (1:39)
-
Form - password (0:29)
-
Form - other inputs (1:14)
-
Form - textarea (1:46)
-
Form - selection box (1:33)
-
Form - button (1:04)
-
Form (2:31)
-
Form - exercise (5:37)
-
Block & inline elements (3:06)
-
Block & inline elements - exercise (3:05)
-
Practice - simple personal website (11:36)
CSS
-
What is css (1:37)
-
CSS syntax (1:06)
-
Overview of CSS selector (1:40)
-
CSS selector - simple selector (3:02)
-
CSS selector - combinator selector (2:58)
-
CSS selector - pseudo-class selector (1:04)
-
CSS selector - exercise (2:44)
-
Internal, external, inline CSS (1:33)
-
Specificity hierarchy (4:29)
-
Useful properties - text (5:03)
-
Useful properties - background (6:26)
-
Useful properties - size (1:14)
-
Useful properties - font (1:29)
-
Useful properties - position (5:54)
-
Useful properties - display (3:04)
-
Useful properties - flexbox (10:35)
-
Useful properties - overflow (1:32)
-
CSS inheritance (2:24)
-
Useful properties - exercise (10:02)
-
Units (6:14)
-
Units - exercise (0:51)
-
Box model (5:43)
-
Box model - exercise (2:44)
-
CSS tips & tricks (2:20)
-
Responsive web design (8:34)
-
Responsive web design - exercise (6:38)
-
Practice - flexbox trial (11:04)
-
Practice - avatar (6:52)
-
Practice - website layout (16:34)
-
Practice - responsive website layout (11:21)
-
Practice - Login page (14:08)
-
Practice - web app layout (8:57)
-
Practice - responsive web app layout (2:41)
-
Practice - responsive menu (15:38)
Assessment - HTML & CSS
JavaScript basics
-
Prepare your coding environment (1:54)
-
What is programming (3:09)
-
Declaring variables (6:04)
-
Difference between var, let & const (4:25)
-
Variable naming convention (5:06)
-
Variable - exercise (1:40)
-
Data type - string (4:38)
-
Data type - number (2:22)
-
Data type - boolean, undefined, null (2:44)
-
Data type - exercise (2:47)
-
Comment on your code (2:35)
-
Practice - swapping variables (2:14)
-
What is operator (0:56)
-
Arithmetic operators (9:58)
-
Arithmetic operators - exercise (5:15)
-
Assignment operators (3:41)
-
Assignment operators - exercise (1:58)
-
String operators (4:17)
-
Comparison operators (6:49)
-
Comparison operators - exercise (1:21)
-
Logical operators (3:19)
-
Logical operators - exercise (4:57)
-
Logical operators with comparison (1:25)
-
Practice - seconds to time (8:12)
JavaScript conditional handling
-
if statement (3:38)
-
Indentation of JavaScript (4:04)
-
if-else statement (2:49)
-
else-if statement (4:18)
-
Multiple conditions handling (1:34)
-
if-else - exercise (4:44)
-
switch statement (4:52)
-
switch & break statement (5:10)
-
switch - exercise (2:21)
-
Practice - determine a pikachu (3:21)
-
Practice - vowel (1:47)
-
Practice - grading (3:03)
-
Practice - finding largest number (2:26)
-
Practice - simple calculator (3:00)
JavaScript looping
-
What is looping (2:57)
-
while loop (6:36)
-
do-while loop (4:04)
-
while loop - exercise & debugger (12:37)
-
for loop (10:12)
-
Infinite loop (2:11)
-
for loop - exercise (7:33)
-
Nested loop (9:20)
-
Nested loop - exercise (5:07)
-
Can I break or skip the loop? (1:52)
-
Practice - code reading (0:24)
-
Practice - prime number (7:08)
-
Practice - factorial (3:28)
-
Practice - sum of multiples (3:38)
JavaScript function
-
What is function (4:20)
-
Function with parmeter (5:49)
-
Function can be stored (1:27)
-
Function override (1:01)
-
Function inside a function (0:21)
-
Reminder for using parameter (0:44)
-
Function - exercise (3:55)
-
Function with return - part 1 (5:45)
-
Function with return - part 2 (3:31)
-
Reminder for using return (1:13)
-
Function with return - exercise (3:33)
-
Function expression (5:11)
-
Self invoking function (1:47)
-
Function declaration vs function expression (2:48)
-
Function expression - exercise (1:57)
-
Practice - factorial (2:47)
-
Practice - factorial v2 (2:43)
-
Practice - finding largest (1:54)
-
Practice - finding largest v2 (2:13)
-
Practice - function expression (1:11)
-
Practice - return (1:55)
-
Practice - returning a function (2:38)
JavaScript scope
JavaScript basic object oriented programming
-
What is object (4:05)
-
Accessing object properties (5:20)
-
Modifying object properties (2:17)
-
Deleting object properties (0:45)
-
Calling method (1:08)
-
Nested object structure (2:38)
-
Using object as a dictionary (0:41)
-
Absence of any object value (0:23)
-
Object - exercise (4:31)
-
Object reference (4:34)
-
Passing an object into the function - part 1 (4:43)
-
Passing an object into the function - part 2 (3:26)
-
Object reference - exercise (9:27)
-
Object with this (5:44)
-
Value of this depends on context (3:01)
-
Object with this - exercise (3:17)
-
Practice - calculator (1:59)
-
Practice - properties access (2:00)
-
Practice - properties access 2 (1:35)
-
Practice - repeated word (3:51)
-
Practice - nested object (2:19)
-
Practice - translator (3:25)
JavaScript Classes
-
How to create object effectively (1:21)
-
Using function to create object (3:35)
-
Overview of class (2:20)
-
Constructor & instantiation (4:14)
-
Method in class (3:04)
-
How to check the class of an object belonging to (1:23)
-
class - exercise (3:47)
-
Encapsulation (6:18)
-
Getter & setter (6:17)
-
Encapsulation - exercise (4:07)
-
Static properties (4:30)
-
Static properties - exercise (3:36)
-
Practice - calculator (2:17)
-
Practice - weapon (5:16)
-
Practice - soldier (9:42)
JavaScript number & string
-
Numeric data type conversion (4:47)
-
Overview of string methods (1:12)
-
Methods for searching string (2:57)
-
Methods for extracting string (2:43)
-
Methods for modifying string (5:08)
-
Number & string - exercise (7:20)
-
String comparison (3:56)
-
String comparison - exercise (0:20)
-
Practice - palindrome (5:23)
-
Practice - counting space (1:41)
-
Practice - finding domain (1:35)
Assessment - JavaScript programming
JavaScript array
-
What is array (2:41)
-
Array is also an object (1:37)
-
Initializing an array (1:16)
-
Accessing / modifying the array items (1:32)
-
Adding items to an array (0:38)
-
Inserting / removing items of an array (1:29)
-
Looping an array (1:12)
-
2D array (3:47)
-
Array - exercise (3:08)
-
Methods for searching item in array (1:18)
-
Methods for modifying array (2:56)
-
Methods for array iteration (2:29)
-
Mapping a new array (4:00)
-
Filtering an array (3:54)
-
Array - exercise (5:11)
-
Converting string to array (2:17)
-
Converting string to array - exercise (1:29)
-
Practice - sum of odd numbers (2:25)
-
Practice - code reading (1:49)
-
Practice - finding max & min (3:17)
-
Practice - array of arrays (2:34)
-
Practice - joining an array (3:10)
-
Practice - array and object (1:49)
More about JavaScript function
-
What is recursion (6:35)
-
Recursion - exercise (4:55)
-
What is callback (5:46)
-
Using setTimeout() to delay function call (6:31)
-
Callback - exercise (3:22)
-
What is closure (5:34)
-
Closure - exercise (3:47)
-
Practice - palindrome (3:50)
-
Practice - callback delay (2:14)
-
Practice - foreach & map (2:37)
-
Practice - bank (2:24)
JavaScript error handling
DOM manipulation
-
Concept of document object model (2:00)
-
JavaScript in the HTML (2:38)
-
Getting DOM element (4:34)
-
Getting DOM element - exercise (1:43)
-
Overview of updating DOM element (0:53)
-
Updating DOM element text (1:32)
-
Updating DOM element style (1:31)
-
Updating HTML inside DOM element (2:18)
-
Updating DOM element classes (2:07)
-
Accessing DOM element attribute (2:43)
-
Accessing input box value (2:30)
-
Updating DOM element - exercise (5:07)
-
Creating DOM element by method (4:11)
-
Creating DOM element by HTML (2:12)
-
Creating DOM element - exercise (2:49)
-
Deleting DOM element (1:13)
-
Deleting DOM element - exercise (1:37)
-
Practice - Facebook post (10:44)
DOM event
-
What is event (2:29)
-
What is event listener (2:04)
-
Using HTML attribute to add event listeners (5:15)
-
Using JavaScript to add event listeners (3:35)
-
Information in event object (6:25)
-
Event - exercise (5:41)
-
Event bubbling (2:18)
-
Practice - calculator (4:28)
-
Practice - input validator (3:48)
-
Practice - side navigation bar (9:59)
-
Practice - todo list (7:29)
-
Practice - photo gallery (16:06)
Data storage for web app
The connection between web app and server
-
How to communicate with the server (5:33)
-
Preparing a HTTP request (3:19)
-
HTTP methods (0:58)
-
API endpoint (1:18)
-
Data types that the server accepts (2:13)
-
Examples of HTTP request (3:50)
-
Receiving a HTTP response (3:27)
-
Request & response - exercise (3:09)
-
Fetching data from server (5:44)
-
Installation of Nodejs - Windows (1:00)
-
Installation of Nodejs - Mac (0:52)
-
Installation of API server (2:04)
-
Explanation of using the API server (5:18)
-
Fetching data from server - exercise (13:33)
-
Practice - todo list (16:36)
-
Practice - stock price - part 1 (10:41)
-
Practice - stock price - part 2 (12:08)
-
The problem of using fetch() (3:07)
-
Fetching with async/await (7:56)
-
Returning data from async function (4:23)
-
Error handling with async/await (2:33)
-
Practice - todo list with async/await (6:33)
-
Practice - login/register - part 1 (7:13)
-
Practice - login/register - part2 (5:58)
-
Practice - login/register - part 3 (2:30)
-
Practice - login/register - part 4 (5:25)
-
Practice - fetching private data (6:20)
Assessment - web application
Version control - Git
-
Why do we need version control (1:48)
-
Installation of git - Windows (1:27)
-
Installation of git - Mac (0:46)
-
Command-line interface (7:14)
-
Preparation before using git (3:29)
-
Commit & log (10:23)
-
Branching (8:24)
-
Uploading git repo to github (4:58)
-
Cloning git repo from github to your computer (1:48)
-
Updating local git repo from github (1:03)
-
Ignoring the unwanted files (3:06)
Overview of React
React JSX
React component
-
Overview of component & properties (6:31)
-
Defining & using component (6:21)
-
Using properties with component (6:56)
-
Handling component logic (1:36)
-
Component - exercise (3:37)
-
Exporting & importing component - part 1 (5:46)
-
Exporting & importing component - part 2 (4:05)
-
Exporting & importing component - exercise (2:11)
-
Inline css (3:04)
-
CSS module (7:24)
-
Using CSS - exercise (2:15)
-
Adding image (3:06)
-
Practice - face (4:22)
-
Practice - watch (4:39)
-
Practice - CSS class name (1:55)
-
Practice - component design (4:39)
React list rendering
React event
React state
-
State in component (5:04)
-
Adding view logic based on state (3:56)
-
State - exercise (2:24)
-
Updating state (4:27)
-
Mutable & immutable (3:33)
-
More on immutable (7:04)
-
Mutable & immutable - exercise (3:17)
-
Immutable state (1:40)
-
How does react render (5:43)
-
Parent and child re-rendering (4:47)
-
How does react render - exercise (1:22)
-
More about useState() (7:52)
-
More about useState() - exercise (2:13)
-
State sharing (3:26)
-
State sharing - exercise (4:38)
-
Changing state of ancestor (5:10)
-
Changing state of ancestor - exercise (8:55)
-
Practice - click counter (3:13)
-
Practice - mouse coordinate (4:15)
-
Practice - immutable (2:58)
-
Practice - ATM - part 1 (2:51)
-
Practice - ATM - part 2 (6:56)
React form & DOM handling
React side effect
-
What is side effect (2:33)
-
Adding side effect (2:43)
-
Adding dependencies of side effect (6:44)
-
Running side effect on mount (3:20)
-
Clean up function for side effect (5:07)
-
Clean up function for side effect with dependencies (8:15)
-
Side effect - exercise (10:23)
-
Custom hook (5:27)
-
Custom hook - exercise (5:21)
-
Practice - clock (4:00)
-
Practice - countdown (5:07)
-
Practice - deferred value (5:25)
-
Please start the API server (0:28)
-
Installation of API server (2:04)
-
Setting vite proxy server (8:02)
-
Practice - todo list (12:08)
-
Practice - stock price (11:57)
Redux
-
State management (3:08)
-
Why redux (3:23)
-
What is action (2:55)
-
What is reducer (3:30)
-
What is store (1:46)
-
Overview of redux implementation (3:57)
-
Implementation of action (1:38)
-
Implementation of reducer (2:51)
-
Configuring store (3:05)
-
React with redux (7:23)
-
Redux implementation - exercise (5:33)
-
Redux toolkit (5:47)
-
Redux toolkit - exercise (4:45)
-
Asynchronous handling (6:53)
-
Asynchronous handling - exercise (4:32)
-
Practice - todo list - part 1 (9:56)
-
Practice - todo list - part 2 (7:35)
-
Practice - multi-language app (14:07)
React router
-
Problem of single page app (3:14)
-
Setting routes (6:19)
-
Setting routes - exercise (2:39)
-
Getting parameter from URL (7:33)
-
Getting parameter from URL - exercise (3:16)
-
Nesting routes (5:36)
-
Link (3:31)
-
Nesting routes - exercise (6:28)
-
Handling route not found (1:44)
-
Protecting your routes - part 1 (3:42)
-
Protecting your routes - part 2 (4:58)
-
Code splitting (8:05)
-
Practice - simple login logout - part 1 (6:14)
-
Practice - simple login logout - part 2 (3:07)
-
Practice - simple login logout - part 3 (6:21)
-
Practice - simple login logout - part 4 (3:04)
-
Practice - simple login logout - part 5 (2:20)
-
Practice - simple login logout - part 6 (2:05)
Assessment - react
