Mô tả

-- NEW ON UDEMY (just switched my courses to Udemy) --


This is the #1 resource to master modern JavaScript (ES6+)!

Take your JavaScript to an advanced, professional level by building beautiful, real-world projects from scratch (2 small beginner projects, 1 big intermediate project and 1 big advanced project). Other courses start from outdated concepts first (like ES5 and below) -- we will use modern concepts right from the start (ES6+ like const/let and arrow functions -- of course properly explained).


Course Projects

Top-tier, real-world projects. Expertly engineered to help you code modern websites & web apps with the latest best practices.

  • 2 Small beginner projects:

    • Fancy Counter: Build a useful counter app

    • Word Analytics: Build a slick word analytics app

  • 1 Big intermediate project:

    • CorpComment: Build a sleek public feedback tool

  • 1 Big advanced project:

    • rmtDev: Build a stylish job board for remote developer jobs


What You'll Learn

1) How to code JS in 2023 by building realistic projects from scratch and seeing how it all fits together

2) Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy

3) Deeply master JS/programming basics: var/let/const, functions, objects & arrays, etc.

4) Critical best practices that every JS-developer should know (e.g. how to use async/await)

5) Learn how to communicate with an API properly by using fetch()

6) Learn the crucial additions to JS: arrow functions, destructuring, spread operator, etc.

7) Easily master React/Angular/Vue or Node.js afterwards since you mastered concepts often used in those frameworks

8) Build modern web apps without frameworks and see why people use React

9) Implement a simple build process for JS with webpack and Babel

10) BONUS: By going through the course you'll naturally improve design/HTML/CSS too


Specifically, these are the concepts you will learn in no particular order

  • What is JavaScript & What can we do with it

  • how to include JS in HTML-file ('defer')

  • var/let/const

  • when to use let instead of const

  • deep mastery of data types & structures (arrays, objects, etc.)

  • deep mastery of functions (traditional vs arrow functions)

  • template literals (``)

  • ternary operator (? :)

  • how to manipulate HTML (also called DOM manipulation) -- querySelector(), getting user input from input field, disabling buttons, etc.

  • how to manipulate CSS

  • dealing with events (e.g. click and typing events)

  • event delegation (event bubbling)

  • deal with forms (user submits data -- very common)

  • how modern websites and web apps work generally from a JavaScript perspective

  • if-else statements

  • setTimeout()

  • && operator

  • array methods (e.g. .forEach(), .map(), .slice(), .join())

  • string methods (e.g. .includes(), .trim())

  • DRY-concept (Don't Repeat Yourself)

  • how to extract repetitive code into its own helper function

  • how to communicate with servers properly

  • fetch() API

  • GET-requests

  • POST-requests

  • AJAX

  • how to work with JSON

  • synchronous vs asynchronous code

  • promises (.then and .catch)

  • error handling (throw new Error)

  • 2xx, 4xx and 5xx HTTP status codes

  • async / await

  • try / catch

  • what is 'state' and 'rendering'

  • overall structure / architecture

  • folder structure

  • most common loop (forEach)

  • increment or decrement by 1 (++ and --)

  • unary plus operator (+)

  • modularity (IIFE's vs separate your JS-code into multiple files)

  • how to deal with XSS

  • comments in JS

  • regular expressions

  • URL-structure (scheme / protocol, domain, query string parameters)

  • destructuring

  • undefined and null

  • truthy and falsy values

  • optional chaining (?.)

  • import/export (ES Modules) vs require/module.exports (CommonJS)

  • named export vs default export

  • default value for function parameter

  • what is refactoring

  • helper / utility functions

  • implement common features like sorting & pagination

  • routing (e.g. how to manipulate URL)

  • window object

  • DOMContentLoaded

  • LocalStorage

  • build process (webpack, Babel, PostCSS)

  • formatting in JS (semicolons, tabs vs spaces)

  • for loop

  • and more! (can't include everything here)


Avoid struggling with JavaScript for years to come. Hope to see you in the course!

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

How to code JS in 2023 by building realistic projects from scratch and seeing how it all fits together

Best practices in 2023

Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy

Deeply master JS/programming basics: var/let/const, functions, objects & arrays, etc.

Critical best practices that every JS-developer should know (e.g. how to use async/await)

Learn how to communicate with an API properly by using fetch()

Learn the crucial additions to JS: arrow functions, destructuring, spread operator, etc.

Easily master React/NextJS/Angular/Vue or NodeJS afterwards since you mastered concepts often used in those frameworks

Build modern web apps without frameworks and see why people use React

Implement a simple build process for JS with webpack and Babel

BONUS: By going through the course you'll naturally improve design/HTML/CSS too

Yêu cầu

  • HTML & CSS Basics
  • No prior programming experience needed

Nội dung khoá học

10 sections

Introduction

7 lectures
Introduction (Why JS Is So Profitable & Course Projects)
04:21
Learning to Code #1 - Mindset (Imposter Syndrome & Confidence)
03:29
Learning to Code #2 - Steep Learning Curve = Barrier to Entry
02:32
Learning to Code #3 - StackOverflow for Beginners
04:55
Setting Up Our Development Environment #1: Browser (Market Share)
02:13
Setting Up Our Development Environment #2: Code Editor
08:25
READ BEFORE STARTING: Project resources (e.g. image URLs)
00:36

Beginner JavaScript

35 lectures
HTML & CSS Fundamentals for JavaScript Developers
11:57
Variables and Data Types (Intro)
00:50
'var' & Strings
02:00
Numbers
00:27
snake_case vs kebab-case vs camelCase
00:20
var vs let vs const
03:07
Booleans
00:20
Arrays
01:14
Objects
05:28
Outputting Variable Values in Console
06:02
Traditional Functions (Function Declarations)
05:09
Function Input (Also Called 'Parameter' or 'Argument')
01:57
Returning Something From Function
01:58
Summary of Functions
00:23
Alternative Traditional Function (Function Expressions)
02:20
Arrow Functions
02:43
Arrow Functions (Shorter Syntax)
03:29
How to Name Functions
00:41
String Concatenation
02:21
Template Literals (`` -- Backticks in JavaScript)
01:15
if-else Statement (> and < Operators)
02:05
== vs === Equality Operators
02:27
Other Operators (>=, <=, !, !=, &&, ||)
04:48
Ternary Operator (? :)
01:21
Truthy & Falsy Values
01:44
var vs let
02:56
Selecting HTML-Elements With JavaScript
05:58
Manipulating HTML With JavaScript (DOM Manipulation)
01:30
textContent vs innerHTML
02:09
innerHTML vs insertAdjacentHTML (Inserting HTML With JavaScript)
01:52
Option 1 - Manipulating CSS With JavaScript ('style')
00:49
Option 2 - Manipulating CSS With JavaScript ('classList')
01:19
Events and Event Handler Functions
04:21
Common Mistake With addEventListener
01:36
Finished This Section! Well Done!
00:13

Mini-Project: Fancy Counter

3 lectures
Project Intro
02:03
Project HTML & CSS (Don't Skip)
31:09
Fancy Counter - Coding JavaScript
45:52

Mini-Project: Word Analytics

3 lectures
Project Intro
01:42
Project HTML & CSS (Don't Skip)
27:57
Word Analytics - Coding JavaScript
28:58

Intermediate JavaScript

17 lectures
Strings (Intermediate)
03:59
Numbers (Intermediate)
01:05
Booleans (Intermediate)
02:55
Arrays (Intermediate)
10:49
Objects (Intermediate)
05:34
Increment (++) & Decrement (--)
01:38
Console
02:21
Functions (Intermediate)
05:47
Hoisting
03:11
Timers (setTimeout & setInterval)
02:32
Loops (forEach & for)
04:47
Fetch API
08:06
Fetch API Example (Get Data & Display On Page)
05:49
Fetch API Quick Summary
04:51
Intermediate DOM #1: Manipulating the DOM
06:41
Intermediate DOM #2: Event Object
02:44
Intermediate DOM #3: Event Bubbling & Event Delegation
02:22

Project 1: CorpComment

12 lectures
Project Introduction
06:18
Project Setup
11:21
VS Code Extension: Live-Server
02:28
Counter Component (JS Fundamentals, DOM Manipulation, Events)
25:11
Submit Component (Form Data & If/Else & setTimeout() & Array Methods & `` & ? :)
01:01:53
Refactoring (DRY Principle & Constants & Extract Repetitive Logic Into Function)
11:48
Feedback List Component (Get Data With Fetch & AJAX & JSON & Promises & Errors)
44:35
More Refactoring (Shortcut When Object Property Name = Value & [].forEach())
10:43
Form/Submit Component (Post Data With Fetch & JSON & Headers & Error Handling)
26:13
Feedback List Component - Expand & Upvote (Event Delegation / Bubbling & ++/--)
35:27
Hashtag List Component (=== / !== & forEach() & querySelector())
21:11
Final Loose Ends (Modularity / IIFE & Naming Things & XSS)
11:59

Advanced JavaScript

20 lectures
VS Code Shortcuts
01:57
Arrays (Advanced)
07:00
Objects (Advanced)
02:17
Functions (Advanced)
07:15
Destructuring
02:46
Spread Operator (...)
00:52
Primitives vs Reference Values
03:04
undefined and null
02:39
Short Circuiting With && and ||
03:36
Fetch API With Async Await
14:31
ES Modules (import / export)
04:47
File Paths
02:30
Other Loops (while & for of)
03:58
Switch Statement
02:33
Window Object
02:18
Math
01:30
Date
03:08
OOP Programming in JavaScript
15:54
Promises
23:46
Event Loop (How JavaScript Works Under the Hood)
10:19

Project 2: rmtDev

21 lectures
Project Introduction
04:17
Project Setup
03:02
Search Component (Regular Expressions & Fetch API & Destructuring & [].slice())
46:13
Job List Component (Undefined / Null, &&, ? ., [].map, [].join())
47:03
Modularity with ES Modules (Folder Structure & Export / Import)
16:20
Error Component ('Rendering' & Default vs Named Export & Default Fn Parameters)
18:01
Refactoring (Importance Of Good Structure In Codebase)
05:04
More Refactoring (Job Details Component)
10:11
Improving Fetch Calls (Good Structure For fetch() Calls & 2xx, 4xx Status Codes)
19:04
Async / Await (vs .then & try / catch & Promises)
21:12
Refactor Fetch Calls (Helper / Utility Functions)
09:58
Sorting Component Part 1 (Sorting Data & 'State')
09:49
State (What Is 'State' & Local vs Global State & Mutating Objects And Arrays)
13:41
Sorting Component Part 2 - [].sort()
12:35
Pagination Component (++ vs -- & [].slice())
41:11
Router Component (History & pushState() & Window Object & DOMContentLoaded)
21:28
Active Job Item - [].find()
14:48
Bookmarks Component (Mouseenter vs Mouseleave Events & [].some() & [].filter())
42:08
Storage Component (LocalStorage For Persisting Data & Spread Operator ...)
19:17
Taking Care of Details
18:54
Build Process (Webpack & Babel & PostCSS & Other Optimizations)
01:09:30

Supplemental

3 lectures
Helper Function for Formatting Date - new Date()
02:10
For Loop ([].forEach() And Other Array Methods Almost Completely Replaced for())
07:38
Formatting in JS (Semicolons & Tabs vs Spaces)
15:43

Closing

1 lectures
Congratulations! (BONUS Lecture)
01:07

Đá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.