Mô tả

This is a 36+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more. You will even learn how to write unit tests for algorithms. We go into how JavaScript works under the hood including execution context, the call stack, event loop, etc. We learn about Webpack tooling and how to create a modern development environment. At the end, we build a Node.js/Express API with a custom Webpack frontend.


All of the code in the learning modules will go into a folder called "JavaScript Sandbox". This is so we can keep things organized and you can always refer back to it for any code snippets that you may need. All of the final and starter code for the projects is included as well as links to the GitHub Repos.


WHAT YOU WILL LEARN


  • Basics & Fundamentals: Data types, let & const variables, functions, conditionals, loops, object literals, etc

  • Data Structures - Arrays, objects, maps, sets as well as custom data structures like stacks and queues

  • DOM Manipulation - Selectors, traversing the DOM, show/hide, creating & removing elements, event listeners

  • OOP - Constructor functions, prototypes, inheritance, classes, protected properties, getters/setters

  • Async JS - Ajax & XHR, Fetch API, callbacks, promises, async / await

  • Error Handling - Try...Catch, HTTP errors

  • Web & Browser APIs - Canvas, geolocation, audio/video, web animations API

  • Modules & Tooling - CommonJS & ES Modules, Webpack,  plugins, loaders, modern dev environment &  workflow

  • Unit Testing Algorithms - Learn the Jest testing library and algorithms like palindromes and anagrams

  • Node.js & Express - Learn about Node modules, NPM packages and build a REST API with Express & MongoDB

  • Full Stack Development - We build an API with Express and a frontend with Webpack. No frontend frameworks!

  • So So Much More!


COURSE PROJECTS & MINI-PROJECTS


  1. Shopping List

  2. Flix Movie App

  3. Tracalorie OOP Project

  4. Tracalorie Webpack Refactor

  5. Chuck Norris Joke Generator

  6. RandomIdeas Full Stack APP - API & Frontend

  7. Webpack Starter Project

  8. Keycode Mini-Project

  9. Random User Generator

  10. Music Player

  11. Video Player

  12. Drum Machine

  13. Profile Scroller

  14. Polling App

  15. Joke Generator

  16. Ball Animation

  17. Animated Clock

  18. Typicode Todos

  19. Text To Speech


Bạn sẽ học được gì

Learn the Fundamentals (Variables, Loops, Functions, etc)

Learn How JavaScript Works (Execution Context, Call Stack, Async JS)

Master the Document Object Model & Events (Interactivity)

Asynchronous JavaScript (Callbacks, Promises, Fetch, Ajax)

OOP (Constructors, Prototypes, Classes)

Modern Tooling & Workflow (Webpack, Babel, File Structure, NPM, Plugins & Loaders)

Full Stack Project With Webpack, Node, Express & MongoDB

5 Real World Projects & 10+ Mini-Projects

Yêu cầu

  • Basic HTML / CSS knowledge

Nội dung khoá học

22 sections

Intro & Getting Started

6 lectures
Welcome To The Course
02:18
Course Outline
07:49
What Is JavaScript?
07:42
Tools & Setup
05:24
Running JavaScript In The Browser
07:02
Course Links
00:42

Variables, Data Types & More

17 lectures
Section Intro
00:51
The Sandbox Files
02:57
Using The Console
10:06
Comments & Shortcuts
07:00
Variables & Constants
11:27
Data Types
12:54
Primitive vs Reference Types
07:07
Type Conversion
10:06
Operators
09:38
Type Coercion
04:00
Working With Strings
15:58
Capitalize Challenge
06:49
Working With Numbers
05:45
The Math Object
05:56
Number Challenge
08:29
Dates & Times
08:12
Date Methods & DateTimeFormat API
08:58

Arrays & Objects

10 lectures
Section Intro
00:41
Creating Arrays
07:24
Basic Array Methods
10:25
Nesting, Concat & Spread Operator
10:12
Array Challenge
07:04
Object Literals
08:06
Object Spread Operator & Methods
11:58
Destructuring & Naming
06:56
JSON Intro
09:01
Object Challenge
06:21

Functions, Scope & Execution Context

13 lectures
Section Intro
01:32
Function Basics
06:07
More on Params & Arguments
10:20
Global & Function Scope
05:25
Block Scope
05:14
Nested Scope
02:56
Declaration vs Expression
04:14
Arrow Functions
07:36
Immediately Invoked Function Expressions
05:02
Function Challenges
12:19
Execution Context
09:18
Execution Context In Action
03:59
The Call Stack
04:52

Logic & Control Flow

9 lectures
Section Intro
01:08
If Statements
06:53
If Else & Nesting
07:09
Switches
04:57
Calculator Challenge
03:20
Truthy & Falsy
12:16
Logical Operators
08:07
Logical Assignment
06:10
Ternary Operator
10:17

Loops, Iteration & Array Methods

12 lectures
Section Intro
00:56
For Loop
11:25
Break & Continue
02:51
While & Do While Loops
06:59
FizzBuzz Challenge
08:00
For Of Loop
05:04
For In Loop
03:07
Array.forEach
08:34
Array.filter
11:32
Array.map
15:30
Array.reduce
08:49
Array Method Challenges
10:26

Document Object Model

15 lectures
Section Intro
01:16
Intro To The DOM
11:04
Document Element Properties
14:19
DOM Selectors - Single Elements
14:13
DOM Selectors - Multiple Elements
09:16
Traversing The DOM - Elements
11:26
Traversing The DOM - Nodes
13:47
Create & Append Elements
06:15
InnerHTML vs createElement()
08:51
Refactor To Multiple Functions
04:09
Insert Elements, Text & HTML
09:24
Custom insertAfter Challenge
04:47
Replace Elements
09:46
Remove Elements
07:46
Working With Styles & Classes
09:37

Events

11 lectures
Section Intro
00:51
Event Listeners
13:00
Mouse Events
10:41
The Event Object
13:00
Keyboard Events & Key Properties
10:27
KeyCode Mini-Project
14:51
Input Events
11:47
Form Submission & FormData Object
10:43
Event Bubbling
05:38
Event Delegation & Multiple Elements
05:45
Page Loading & Window Events
10:36

Shopping List Project

14 lectures
Shopping List - Project Intro
03:31
Add Items To List
11:40
Setting Up Git & GitHub (Optional)
15:24
Remove & Clear Items
07:52
Clear UI State
09:52
Filter Items
09:55
Local Storage Crash Course
05:31
Add Item To Local Storage
08:04
Display Items From Local Storage
06:15
Remove Items From Local Storage
09:00
Set Item To Edit
08:00
Update & Reset State
06:10
Prevent Duplicate Items
03:46
Deploy To Netlify
04:58

Asynchronous JavaScript

16 lectures
Section Intro
00:48
Thread Of Execution
02:39
How Async JavaScript Works
08:39
setTimeout & clearTimeout
04:39
setInterval & clearInterval
08:51
Callbacks
09:56
HTTP Request Crash Course
07:13
DevTools Network Tab
04:50
AJAX & XHR Object
11:28
Joke Generator Project Challenge
09:25
Callback Hell
06:52
Promises
10:02
Callback To Promise Refactor
04:58
Promise Chaining
04:15
Promises vs Callback Hell
06:01
promise.all()
06:04

Fetch API & Async Await

11 lectures
Section Intro
01:26
Fetch Basics
09:02
Random User Mini-Project
12:52
Fetch Options - Method, Body, Headers
14:55
Typicode Todos Mini-Project [1]
17:10
Typicode Todos Mini-Project [2]
13:29
Fetch API Error Handling
13:17
Async & Await
09:25
Try...Catch Statements
04:41
Async & Await Error Handling
06:42
Multiple Promises With Async & Await
12:26

Flixx Movie App Project

13 lectures
Flixx Movie App - Project Intro
04:22
Theme Overview & Prep
07:14
API Overview & API Key
04:50
Page Router & Active Link
09:51
Display Popular Movies
13:34
Spinner & Popular TV Shows
07:21
Movie Details Page
13:14
Details Page Backdrop
04:52
TV Show Details Page
07:06
Swiper Slider
13:28
Search Function & Custom Alert
19:12
Display Search Results
11:34
Add Pagination For Search
16:37

Web & Browser APIs

15 lectures
Section Intro
01:56
GeoLocation API
11:46
Show Location On Map
07:29
Canvas API
13:47
requestAnimationFrame
08:10
Animated Clock Mini-Project [1]
25:07
Animated Clock Mini-Project [2]
11:08
Web Audio API
08:25
Music Player Project
20:02
Drum Machine Project
09:06
Video API
06:20
Video Player Project
12:43
Web Animations API - Ball Project
10:25
Speech Recognition API
11:38
Speech Synthesis API
13:21

OOP - Constructors & Prototypes

12 lectures
Section Intro
02:00
What Is OOP?
09:17
4 Basic Principles Of OOP
06:53
More On Object Literals & The "this" Keyword
05:01
Constructor Functions
07:06
Literals vs Built-In Contructors
09:47
Working With Object Properties
07:28
Prototypes & The Prototype Chain
04:54
Adding Methods To The Prototype
04:37
Object.create
04:55
Prototypical Inheritance & call()
10:11
OOP Game Challenge
07:43

OOP - Classes, Getters & Setters, Private Properties, etc

10 lectures
Classes
07:29
Class Inheritance
06:28
Static Methods
02:53
bind() & Defining "this"
05:20
Getters & Setters With Classes
09:30
Getters & Setters With defineProperty()
10:55
Private Property Convention
12:13
ES2022 Private Class Fields
04:42
Property Flags & Descriptors
09:12
Sealing & Freezing Objects
07:25

Tracalorie App - OOP Project

18 lectures
Tracalorie App - Project Intro
04:16
UI Theme Setup
04:42
Project Planning & Overview
05:03
Base Tracker, Meal & Workout Classes
09:55
Display Tracker Stats
14:45
Progress Bar & Calorie Alert
10:00
App Class, New Meal & Workout
13:10
Refactor To Single _newItem() Method
04:30
Display New Meal & Workout
07:35
Remove Meal & Workout
12:10
Filter & Reset
10:51
Set Calorie Limit
05:16
Storage Class & Calorie Limit Persist
05:46
Persist Total Calories To Local Storage
04:40
Save Meals To Local Storage
07:39
Save Workouts To Local Storage
03:43
Remove Meals & Workouts From Local Storage
05:52
Clear Storage Items
04:14

Modules & Tooling

15 lectures
Section Intro
02:06
What Are Modules?
07:03
Installing & Using Node.js
06:16
CommonJS Modules
09:17
NPM Packages
11:20
ES Modules
07:26
Module Bundlers
05:44
Webpack Basic Setup
11:17
CSS & Style Loaders
04:39
HTML Webpack Plugin
08:16
Webpack Dev Server Setup
04:39
Babel Setup
05:05
CSS Minify Extract Plugin
03:00
Tracalorie Refactor For Webpack
16:28
Deploy Tracalorie To Netlify
04:38

Iterators, Generators & Data Structures

11 lectures
Section Intro
01:24
Symbols
10:23
Iterators
09:12
Generators
05:08
Profile Scroller Mini-Project
07:52
Sets
05:13
Maps
06:16
Poll Mini-Project
12:03
Stacks
13:30
Queues
08:44
Linked Lists
25:17

Unit Testing Algorithms

10 lectures
Intro & What Are Algorithms?
02:43
What Is Unit Testing?
03:23
Getting Started With Jest
05:45
Grouping Tests With describe()
10:52
Reverse String Algorithm
09:49
Palindrome Algorithm
09:58
Array Chunking
06:11
Anagram Algorithm
11:57
Get Elements By Tag - jsdom
17:52
Has Duplicate IDs - jsdom
15:44

Node.js Modules

6 lectures
Section Intro
02:18
FS (FileSystem) Module
13:55
Path Module
07:56
OS Module
11:04
URL & QueryString Module
07:22
HTTP Module
18:20

RandomIdeas App - Backend REST API

10 lectures
RandomIdeas Full Stack App - Project Intro
03:33
Express Setup & Basic API
16:04
Nodemon & Route Clean Up
06:05
Handle POST Requests - Add Idea
08:20
PUT & DELETE Requests - Update & Delete Ideas
06:17
What Is MongoDB?
04:46
MongoDB Atlas Setup
05:51
Mongoose Connect & Dotenv
08:53
Mongoose Schema & Model
05:41
Database Queries
15:14

RandomIdeas App - Webpack Frontend

11 lectures
Fullstack Workflow
03:00
Client Folder Setup
09:15
Modal Component
08:30
Ideaform Component
12:00
IdeaList Component
12:04
API Service - Get Ideas
11:57
Create Idea via Form
07:25
Save Username to Local Storage
04:56
Add Username Validation to Server
07:20
Add Delete Functionality
12:56
Deploying A Fullstack App
08:36

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.