Javascript Tutorial and Projects Course
Loại khoá học: Web Development
Learn Javascript by Building 30+ Interesting Projects
Mô tả
JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
Three fundamental languages of the web are HTML, CSS and Javascript.
Html is used for structure, CSS is used for styling and Javascript is used for functionality.
Reasons to learn Javascript
Number One - Javascript is the most popular programming language in the world.
Number Two - Javascript is de facto language of the web
Number Three - Javascript is Easy to learn
Number Four - Knowing Javascript provides great opportunity to get a job
Number Five - Javascript is Everywhere.Javascript is not web-exclusive anymore. Its on the servers (NODE.JS), cross-platform desktop-apps etc...
This step by step course is intended for everyone who wants to start working with Javascript.
We will cover what is Javascript, how to add Javascript to our projects, how to start working with Javascript and at the end we will make quite a few projects. A basic knowledge of HTML, CSS would be preferred.
Here is the list of projects we are going to build in this course
1. Color Flipper
2. Counter
3. Reviews
4. Navbar
5. Sidebar
6. Modal
7. Questions
8. Menu
9. Video
10. Scroll
11. Tabs
12. Countdown Timer
13. Lorem Ipsum
14. Grocery Bud
15. Slider
16. Counters (OOP)
17. Gallery (OOP)
18. Numbers
19. Dark Mode
20. Filters
21. Dad Jokes
22. Products
23. Random User
24. Cocktails
25. Slider
26. Stripe Submenus
27. Pagination
28. Wikipedia
29. Comfy Sloth
30. Comfy Sloth
Bạn sẽ học được gì
Yêu cầu
Nội dung khoá học
23 sections
Intro
02:34
Goals
01:43
Structure
02:16
Video Blur Fix
01:35
Course Review
00:30
Intro
01:00
Install Google Chrome
03:10
Install VS-CODE
01:49
VS-CODE Overview
03:55
Install Live-Preview
03:38
Install Prettier
02:58
Emmet
03:37
My Setup
01:04
Basics Intro
00:17
Basic Project
03:00
Inline Javascript
03:15
Internal Javascript
07:51
External Javascript
10:01
Cleanup Workspace
01:08
Helper Methods
10:06
Statements and Comments
09:31
Variables
08:47
Assign Variable Value Later
04:22
Variable Naming Rules
06:04
const, let, var
05:14
Challenges Intro
01:13
Variables Challange
03:59
Prettier Settings
03:21
Quotation Marks
05:46
String Concatenation
05:25
String Concat Challenge
02:53
Numbers Basics
08:21
Numbers - Additional Features
08:24
Numbers Challenge
07:10
Implicit Type Conversion
12:00
Data Types
08:13
Arrays
11:14
Array Challenge
02:58
Functions - Declare, Invoke
06:26
Functions - Parameters, Arguments
12:56
Functions - Return
13:21
Function Expressions
07:43
Function Challenge
06:31
Objects
08:23
Object Challenge
04:20
Conditional Statements - Basics
05:57
Conditional Statements Continued
07:02
Equality
04:24
Logical Operators
04:24
Switch Statement
07:27
Conditionals Challenge
04:33
while Loops
05:55
do while loops
02:57
for loop
04:03
Connecting The Dots
00:24
String Properties and Methods
16:34
Template Literals
06:10
Strings Challenge
07:14
Array Properties and Methods
11:50
Exercise - Full Name
10:13
Exercise - Calculate Total
14:40
Value vs Reference
05:51
Null and Undefined
02:15
Truthy and Falsy
04:34
Ternary Operator
04:16
Global Scope
07:25
Local Scope
07:02
Variable Lookup
06:52
Callback Functions, Higher Order Functions
15:07
Array Iterators
02:22
forEach
09:44
map
10:43
filter
03:55
find
08:30
reduce
09:48
Array Challenge - Intro
01:00
Array Challenge - Setup Data
03:43
Array Challenge - Multiple Files
06:15
Array Challenge - Map
04:49
Array Challenge - Filter
03:30
Array Challenge - Filter Alternative Syntax
04:08
Array Challenge - Find
03:59
Array Challenge - Reduce #1
05:51
Square Bracket Notation
03:22
Array Challenge - Reduce #2
06:04
Math Object
08:33
Date Object
09:18
DOM - Intro
02:39
DOM - General Concepts
08:40
Window and Document Overview
04:15
Get Element By ID
06:51
Get Elements By Tag Name
08:21
Get Element By Class Name
01:57
Query Selector and Query Selector ALL
07:29
Navigate the DOM - Children
04:54
Navigate the DOM - parentElement
03:06
Navigate the DOM - nextSibling, previousSibling
04:28
Navigate the DOM - nextElementSibling, previousElementSibling
01:15
textContent nodeValue
02:57
getAttribute() setAttribute()
08:09
classList and className
09:28
createElement - createTextNode - appendChild
08:09
insertBefore
03:43
replaceChild
02:23
prepend innerText
03:10
remove removeChild
04:52
innerHTML and textContent
08:24
Change CSS with style property
05:07
Events Overview
01:53
Click Event
07:23
Function Reference
04:51
Mouse Events
05:17
Key Events
04:13
Event Object
10:48
CurrentTarget vs Target
07:33
Event Propagation - Bubbling- Capturing
10:39
Event Propagation Example
07:31
Forms
05:48
Local Storage
09:22
Local Storage With Multiple Values
09:05
setTimeout
09:36
setInterval
03:22
Events - "DOMContentLoaded"
06:07
Events - "load"
06:10
Events - "scroll"
02:48
Width, Height, GetBoundingClientRect
07:09
Events - "resize"
01:07
Intro
01:17
Starter Project
00:06
Setup
04:11
Color Flipper - Simple HTML
04:10
Color Flipper - Simple Javascript
08:58
Color Flipper - Hex
10:16
Counter HTML
02:25
Counter JS
11:14
Reviews HTML
04:45
Reviews JS
22:40
Navbar HTML
02:48
Navbar General Concepts
04:08
Navbar JS
07:56
Sidebar HTML
03:44
Sidebar Manual Setup
03:07
Sidebar JS
05:51
Modal HTML
03:39
Modal Challange
02:42
Modal JS
03:02
Questions HTML
07:14
Questions General Concept
02:54
Questions JS - Traversing the DOM
07:32
Questions JS - Using Selectors Inside the Element
10:19
Menu HTML
06:56
Display Items When Page Loads
14:39
Refactor
03:12
Filter Buttons HTML
01:57
Filter Buttons JS
11:42
Dynamic Filter Buttons
04:01
Unique Categories
07:29
Dynamic Filter Buttons Complete
09:40
Video Intro
01:12
Video HTML
02:44
Video Overlay Setup
02:42
Video JS
04:59
Video Preloader
04:51
Scroll Intro
03:31
Scroll HTML
10:37
Scroll - Setup Date
02:11
Scroll - Toggle Simple Setup
06:16
Scroll - Toggle Dynamic
10:44
Scroll - Fixed Navbar
08:50
Smooth Scroll Setup
10:23
Smooth Scroll Complete
10:53
Tabs HTML
11:42
Tabs JS
10:56
Countdown HTML
05:53
Set Date
19:51
Calculate Remaining Time
27:47
Time From Now
04:10
Lorem Ipsum HTML
04:26
Lorem Ipsum JS
17:20
GroceryBud - Intro
03:22
GroceryBud - HTML
05:09
GroceryBud - Select Elements
03:13
GroceryBud - addItem Setup
07:26
GroceryBud - truthy shortcut
03:32
GroceryBud - display alert
05:29
GroceryBud - addItem
08:49
GroceryBud - setBackToDefault
02:34
GroceryBud - clear items
06:54
GroceryBud - select edit and delete buttons
07:23
GroceryBud - delete item
07:18
GroceryBud - edit item
11:16
GroceryBud - localStorage info
04:25
GroceryBud - addToLocalStorage
08:38
GroceryBud - removeFromLocalStorage
05:39
GroceryBud - editLocalStorage
04:46
GroceryBud - load items from localStorage
06:49
Slider Intro
01:29
Slider HTML
03:34
Slider General Concepts
05:14
Slider JS Setup
03:27
Slider JS - Slides Approach
06:06
Slider JS - Button Approach
02:48
Netlify Intro
01:08
Drag and Drop Option
03:32
Continuous Deployment
08:02
Intro
02:10
Object Basics
06:13
Nested Objects, Bracket Notation
11:59
'this' - Keyword Basics
08:20
"this" - Keyword Advanced
07:10
Factory Functions
06:42
Constructor Functions
07:48
Constructor Property
04:51
Prototype Property
09:58
Property Lookup
05:45
ES6 Class Syntax
12:14
Call
09:42
Apply, Arguments
05:42
Bind
02:15
Button Example
08:48
Intro
02:09
Setup
01:47
Counter - HTML
03:10
Counter Setup
07:56
Counter - Select Elements
05:13
Counter - Functions
04:05
Counter - Complete
05:43
Counter - Class Refactor
03:43
Gallery Intro
01:08
Gallery - HTML
09:24
Gallery - Select Elements
06:37
Gallery - Open Modal Setup
12:10
Gallery - Open Modal Complete
12:06
Gallery - Close Modal
06:31
Gallery - Prev and Next
05:22
Gallery - Select Images
05:30
Gallery - Class Refactor
00:39
Intro
00:18
IIFE
08:59
Hoisting
06:26
Closure
08:28
Closure - Basic Example
03:53
Closure - Complete Example
08:52
ES6 Module Intro
02:20
VAR, LET, CONST
06:07
Function Scope and Block Scope
10:18
Template Strings
03:43
Template Strings - HTML
05:25
Tagged Template Literals
11:08
Arrow Functions - Basics
14:16
Arrow Functions - Objects and "this"
06:55
Arrow Functions - Select Elements and "this"
04:47
Default Parameters and Hoisting Gotchas
03:50
Array Destructuring
05:24
Swap Variables
02:39
Object Destructuring
05:03
Destructuring Function Parameters
03:01
New String Methods
07:32
"for of" - Loop
03:59
Spread Operator - Basics
05:26
Spread Operator - Objects
03:01
Spread Operator - DOM Elements
03:27
Spread Operator - Functions Arguments
03:38
Rest Operator
10:36
Array.of
02:06
Array.from - Strings and Arguments Object
04:34
Array.from - DOM Elements(NodeList)
07:00
find, findIndex,every,some
08:59
"for in" - Loop
01:44
Object.keys()
01:15
Object.values()
00:26
Object.entries()
04:40
new Set() - General Overview
04:21
new Set() - Use Case
06:02
String includes()
05:31
Array includes()
03:08
Important Info
01:22
Projects - Intro
00:40
Numbers - Intro
00:23
Numbers - Setup
00:36
Readme
00:50
Numbers - HTML Structure
03:09
Numbers - Select Elements
04:25
Numbers - Initial Variables
03:20
Numbers - Complete
06:54
Dark Mode - Intro
00:59
Dark Mode - Setup
00:27
Dark Mode - HTML Structure
03:41
Dark Mode - Toggle CSS
07:09
Dark Mode - Import Data
03:26
Dark Mode - Render Items
04:21
Dark Mode - Moment.js
06:21
Filters - Intro
01:48
Filters - HTML Structure
06:47
Filters - Display Products
07:59
Filters - Text Filter
09:40
Filters - Let and Original Array
04:40
Filters - Empty Array
03:27
Filters - Display Buttons
06:12
Filters - Buttons Filter
05:36
Intro
02:31
Setup
06:47
Named Export
05:54
Default Export
08:48
Get Element
08:54
Intro
00:54
Synchronous
03:33
Recipe Example
04:54
Asynchronous
12:21
Callback Hell
10:44
Callback Hell - DOM Example
10:24
Promises
10:45
Important Unsplash API update !!!!
00:14
Reject Example
20:05
Promises - DOM Example
13:32
Async/Await
12:58
Intro
01:06
AJAX, HTTP, API
04:32
Simple Text
26:33
Add Button
05:15
JSON
16:55
Fetch
09:59
Fetch - Errors "gotcha"
02:02
Fetch - Big Picture
01:55
Fetch with Function
06:35
Fetch - with async/await
04:34
Try / Catch
05:00
AJAX Projects - Intro
01:03
Dad Jokes - Intro
00:10
Dad Jokes - HTML Structure
01:37
API Fundamentals
03:29
Dad Jokes - Docs
04:50
Dad Jokes - Select Elements
01:40
Dad Jokes - Fetch Random Joke
08:39
Dad Jokes - Loading
01:58
Dad Jokes - Try / Catch
01:48
Dad Jokes - Throw New Error
06:28
Products - Intro
00:33
Products - HTML Structure
07:39
Products -Possible AJAX States
04:01
Products - API Docs
03:28
Products - Fetch Products
03:34
Products - Loading and Error
03:50
Products - Start Function
05:02
Products - Display Products
11:57
Products - Query Params
05:47
Products - Single Product HTML
05:25
Products - Initial Logic
04:31
Products - Fetch Product
08:04
Products - Display Single Product
05:38
Products - Display Colors
03:06
Random User - Intro
01:18
Random User - HTML
10:06
Random User - API
04:44
Random User - Select Elements
14:37
Random User - Fetch User
20:46
Random User - Display User
18:28
Cocktails - Intro
01:14
Cocktails - Setup
02:51
Cocktails - HTML
09:49
Cocktails - API
07:36
Cocktails - Present Drinks
05:35
Cocktails - Fetch Drinks
05:07
Cocktails - Display Drinks
16:08
Cocktails - Search Form
10:26
Cocktails - Loading
06:56
Cocktails - Set Drink
14:43
Cocktails - Single Drink HTML
03:34
Cocktails - Single Drink
10:40
Cocktails - Display Single Drink
11:28
More Projects - Intro
01:03
Intro
00:23
Starter Project
00:11
HTML Setup
06:47
Display People
12:53
Apply CSS
07:11
Next Slide
07:35
Next Slide - End of Array
02:27
Prev Slide
06:01
Intro
01:39
Starter Project
00:11
HTML
09:10
Sidebar Toggle
09:50
Sidebar Complete
11:47
Submenu Setup
12:36
Submenu Links
06:38
Submenu - Hide and Column Layout
06:53
Intro
01:04
Starter Project
00:10
Setup
03:35
Fetch Followers
05:10
Display Followers
10:21
Paginate - Create Pages
12:54
Display Buttons
14:44
Button Functionality
09:15
Intro
01:16
HTML Structure
04:01
API Docs
04:33
Initial Setup
04:55
Fetch Pages
05:38
Render Results
03:27
Intro
03:59
About
03:29
Starter Project
00:21
Setup
01:56
Starter Overview
03:35
Navbar, Hero - HTML
07:50
Sidebar HTML
06:13
Sidebar Toggle
08:59
Cart HTML
10:31
Cart Toggle
08:18
About Page
06:51
API Overview
07:33
Featured Products - HTML
09:26
Fetch Products
08:20
Setup Store
11:11
Exports - Alternative Syntax
02:50
LocalStorage
09:09
Featured Products
01:42
Display Products
08:30
Format Price
10:19
AddToCart Setup
06:16
Product HTML
04:12
Display All Products
02:36
Page Loading
03:30
Filters HTML
04:07
Search Filter
15:08
Companies Filter
15:13
Price Filter
13:04
Single Product - Overview
03:29
Single Product - HTML
08:11
Single Product - Initial JS
05:41
Single Product - Fetch Product
04:21
Single Product - Fetch Error
09:25
Single Product - Complete
13:07
setupCart - Initial Setup
09:43
addToCart - Setup
11:22
addToCartDOM
08:32
addToCart - Totals
09:33
setupCart - init
07:42
Cart - Update Items
10:28
Cart - Remove Item
09:45
Cart - Increase Amount
03:25
Cart - Decrease Amount
05:40
Products Page Fix
06:09
Bug Fix 2
05:47
Finished Project
00:04
Bonus
00:19
Viết Bình Luận
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng