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)
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 - finding largest (1:54)
-
Practice - finding largest v2 (2:13)
-
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)
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)
More about JavaScript function
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 - todo list (7:29)
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)
-
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)
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)
Nodejs module
-
Introduction to Nodejs (6:59)
-
Using modules to manage your code (4:43)
-
Importing modules (8:24)
-
Modules - exercise (1:43)
-
Getting open source library by NPM (2:15)
-
Initializing your NPM project (4:39)
-
Setting script on your project (3:12)
-
NPM - exercise (2:07)
-
Monitoring changes with nodemon (3:20)
-
Reminder for system cloud backup (0:52)
Express server development
-
Installation of postman (0:50)
-
What is server & port (4:05)
-
What does a web server do (3:26)
-
Introduction to Express (4:08)
-
Express - exercise (1:22)
-
Handling static files on web server (4:54)
-
Static files - exercise (4:29)
-
Basic routing (7:34)
-
Route parameters (3:37)
-
Router class (3:49)
-
Routing - exercise (3:49)
-
Using multiple handlers for a route (4:10)
-
Middleware (5:42)
-
Applying middleware to all routes (3:03)
-
Middleware - exercise (1:37)
-
Introduction of handling request (0:30)
-
Request handling (3:05)
-
Extracting JSON data (2:20)
-
Extracting x-www-form-urlencoded data (1:22)
-
Extracting form data (5:28)
-
Request handling - exercise (6:27)
-
Extracting cookie data (2:38)
-
Extracting data from query (1:15)
-
Requesting handling - exercise 2 (2:37)
-
Setting response status (2:05)
-
Setting response header (1:50)
-
Setting response body (1:28)
-
Response handling - exercise (1:28)
-
Practice - food ordering API - part 1 (7:44)
-
Practice - food ordering API - part 2 (6:41)
-
Practice - food ordering API - part 3 (4:17)
-
Practice - food ordering API - part 4 (3:14)
-
Practice - food ordering API - part 5 (1:31)
-
Practice - food ordering API - part 6 (2:45)
RESTful API
Database
MySQL database table schema
Relational database design
-
A world of relation (1:52)
-
One to one relationship (1:50)
-
One to one relationship - exercise (0:58)
-
One to many relationship (2:32)
-
One to many relationship - exercise (0:57)
-
Many to many relationship (4:39)
-
Many to many relationship - exercise (1:42)
-
Entity relationship diagram (2:40)
-
Entity relationship diagram - exercise (1:20)
-
Practice - todo list (3:18)
-
Practice - toy shop (3:43)
Normalization & denormalization
MongoDB database design
-
SQL vs NoSQL (4:00)
-
Collection & document (4:30)
-
Collection & document - exercise (1:49)
-
Normalization vs denormalization (3:11)
-
One to one relationship (1:05)
-
One to one relationship - exercise (1:49)
-
One to many relationship (5:13)
-
One to many relationship - exercise (1:52)
-
Many to many relationship (3:20)
-
Many to many relationship - exercise (1:20)
-
Practice - todo list (1:18)
-
Practice - toy shop (1:49)
MongoDB database operations
-
Overview of MongoDB (2:40)
-
Installation of MongoDB (2:33)
-
Installation of Compass - Windows (0:36)
-
Installation of Compass - Mac (0:47)
-
Connecting database with Compass (0:57)
-
Creating database, collection & inserting data (4:53)
-
Preparing data for learning (1:20)
-
Selecting with projection (2:10)
-
Selecting by field (6:08)
-
Comparison operators (2:10)
-
Logical operators (4:35)
-
Selecting nested object (3:28)
-
Selecting array (9:45)
-
Selecting nested array (5:51)
-
Sorting data (2:03)
-
Counting data (0:44)
-
Limiting the number of selected data (0:36)
-
ObjectId (0:36)
-
Updating data (3:53)
-
Deleting data (1:44)
-
MongoDB operations - exercise (3:28)
-
Practice - products in shop (7:56)
MongoDB aggregation
-
What is aggregation pipeline (4:54)
-
Preparing data for learning (1:16)
-
Selecting, sorting, skipping, limiting data (2:40)
-
Grouping data (2:18)
-
Projection of data (2:08)
-
Looking up data (5:57)
-
Stages with pipeline (1:24)
-
Aggregation stages - exercise (7:12)
-
Aggregation operators with group (5:36)
-
Aggregation operators with array (1:13)
-
Aggregation operators for year & month (1:55)
-
Aggregation operators - exercise (5:55)
-
Practice - products in shop (8:00)
MongoDB with Nodejs
-
Connecting MongoDB with Nodejs (2:59)
-
Inserting data using Nodejs (3:55)
-
Selecting data using Nodejs (6:35)
-
Updating data using Nodejs (2:09)
-
Deleting data using Nodejs (1:23)
-
Running aggregation using Nodejs (1:59)
-
MongoDB with Nodejs - exercise (4:50)
-
MongoDB with Express (2:52)
-
Practice - todo list - part 1 (2:19)
-
Practice - todo list - part 2 (5:02)
-
Practice - todo list - part 3 (2:10)
-
Practice - todo list - part 4 (4:26)
-
Practice - todo list - part 5 (2:34)
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)
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)
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)
-
Practice - clock (4:00)
-
Practice - countdown (5:07)
-
Please start the API server (0:28)
-
Installation of API server (2:04)
-
Setting vite proxy server (8:02)
-
Practice - todo list (12:08)
