Prepare your coding environment | Cozy Code Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Full Stack Web Development Essentials

Preparation

Course introduction (1:15)
Installation - chrome (1:22)
Installation - visual code (0:50)

Overview of web

How the web works - internet (2:50)
How the web works - HTTP (3:59)
URL (2:38)
How the website works (2:25)

HTML

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

Copy ninja (1:15)

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

What is scope (2:23)
Global scope (2:18)
Global scope - exercise (1:15)
Function scope (4:33)
Function scope - exercise (2:52)
Block scope (5:06)
Block scope - exercise (0:41)

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

Binary string to decimal number (5:59)

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

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 - callback delay (2:14)
Practice - foreach & map (2:37)
Practice - bank (2:24)

JavaScript error handling

How to handle errors (1:52)
Using try, catch, throw & finally (6:46)
Error handling - exercise (2:53)

Web application

Website vs web app (1:33)
Architecture of web app (4:58)
Flow of web app (1:36)

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

What is web storage (2:52)
Local storage (2:05)
Session storage (1:23)
Saving objects to web storage (3:48)
Web storage - exercise (2:46)
What is cookie (4:06)
Using cookie (2:14)
Cookie - exercise (0:59)

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

Trend prediction game (6:21)

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

What is API endpoint (4:26)
Introduction to RESTful (3:11)
Constraints to be RESTful (5:06)
HTTP methods & API naming (3:56)
Example of RESTful API (2:30)
RESTful API - exercise (3:13)
Practice - virtual bank (4:19)

Database

Overview of database (2:06)
Overview of SQL database (1:58)
Overview of NoSQL database (2:54)

MySQL database table schema

Table schema (2:34)
Table schema - exercise (2:49)
What is key (0:37)
Primary key (3:07)
Foreign key (1:37)
Composite key (1:39)
Keys - exercise (4:12)

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

What is normalization (7:10)
Normalization - exercise (0:24)
What is denormalization (4:07)
Denormalization - exercise (0:35)
Practice - borrowing books (2:07)
Practice - restaurant (1:15)

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

Why do we need React (2:40)
State in React (4:35)
Component in React (5:09)
Creating React project (4:01)
Installation of browser dev tool (0:36)

React JSX

What is JSX (2:30)
JSX basic (5:39)
JSX basic - exercise (1:41)
JSX expression (11:22)
JSX expression - exercise (1:49)

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

Using map() & filtering to render list (6:09)
Key (4:02)
List rendering - exercise (2:03)

React event

HTML event vs react event (3:59)
Inline event handler (2:27)
Named function event handler (3:13)
Event - exercise (2:05)

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

Form handling (6:56)
Forma handling - exercise (3:38)
DOM element handling (6:11)
DOM element handling - file (1:53)
DOM element handling - exercise (3:01)
Practice - search list (5:36)
Practice - todo list (12:22)

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)

Teach online with

Prepare your coding environment

Complete and Continue

Discussion

0 comments