English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 122 lectures (20h 4m) | 8.42 GB
This is the #1 resource to master modern JavaScript! Learn modern ES6+ JavaScript by building real, beautiful projects.
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 (? 🙂
- howto 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)
Table of Contents
Introduction
1 Introduction Why JS Is So Profitable Course Projects
2 Learning to Code 1 Mindset Imposter Syndrome Confidence
3 Learning to Code 2 Steep Learning Curve Barrier to Entry
4 Learning to Code 3 StackOverflow for Beginners
5 Setting Up Our Development Environment 1 Browser Market Share
6 Setting Up Our Development Environment 2 Code Editor
7 READ BEFORE STARTING Project resources eg image URLs
Beginner JavaScript
8 HTML CSS Fundamentals for JavaScript Developers
9 Variables and Data Types Intro
10 var Strings
11 Numbers
12 snakecase vs kebabcase vs camelCase
13 var vs let vs const
14 Booleans
15 Arrays
16 Objects
17 Outputting Variable Values in Console
18 Traditional Functions Function Declarations
19 Function Input Also Called Parameter or Argument
20 Returning Something From Function
21 Summary of Functions
22 Alternative Traditional Function Function Expressions
23 Arrow Functions
24 Arrow Functions Shorter Syntax
25 How to Name Functions
26 String Concatenation
27 Template Literals Backticks in JavaScript
28 ifelse Statement and Operators
29 vs Equality Operators
30 Other Operators
31 Ternary Operator
32 Truthy Falsy Values
33 var vs let
34 Selecting HTMLElements With JavaScript
35 Manipulating HTML With JavaScript DOM Manipulation
36 textContent vs innerHTML
37 innerHTML vs insertAdjacentHTML Inserting HTML With JavaScript
38 Option 1 Manipulating CSS With JavaScript style
39 Option 2 Manipulating CSS With JavaScript classList
40 Events and Event Handler Functions
41 Common Mistake With addEventListener
42 Finished This Section Well Done
MiniProject Fancy Counter
43 Project Intro
44 Project HTML CSS Dont Skip
45 Fancy Counter Coding JavaScript
MiniProject Word Analytics
46 Project Intro
47 Project HTML CSS Dont Skip
48 Word Analytics Coding JavaScript
Intermediate JavaScript
49 Strings Intermediate
50 Numbers Intermediate
51 Booleans Intermediate
52 Arrays Intermediate
53 Objects Intermediate
54 Increment Decrement
55 Console
56 Functions Intermediate
57 Hoisting
58 Timers setTimeout setInterval
59 Loops forEach for
60 Fetch API
61 Fetch API Example Get Data Display On Page
62 Fetch API Quick Summary
63 Intermediate DOM 1 Manipulating the DOM
64 Intermediate DOM 2 Event Object
65 Intermediate DOM 3 Event Bubbling Event Delegation
Project 1 CorpComment
66 Project Introduction
67 Project Setup
68 VS Code Extension LiveServer
69 Counter Component JS Fundamentals DOM Manipulation Events
70 Submit Component Form Data IfElse setTimeout Array Methods
71 Refactoring DRY Principle Constants Extract Repetitive Logic Into Function
72 Feedback List Component Get Data With Fetch AJAX JSON Promises Errors
73 More Refactoring Shortcut When Object Property Name Value forEach
74 FormSubmit Component Post Data With Fetch JSON Headers Error Handling
75 Feedback List Component Expand Upvote Event Delegation Bubbling
76 Hashtag List Component forEach querySelector
77 Final Loose Ends Modularity IIFE Naming Things XSS
Advanced JavaScript
78 VS Code Shortcuts
79 Arrays Advanced
80 Objects Advanced
81 Functions Advanced
82 Destructuring
83 Spread Operator
84 Primitives vs Reference Values
85 undefined and null
86 Short Circuiting With and
87 Fetch API With Async Await
88 ES Modules import export
89 File Paths
90 Other Loops while for of
91 Switch Statement
92 Window Object
93 Math
94 Date
95 OOP Programming in JavaScript
96 Promises
97 Event Loop How JavaScript Works Under the Hood
Project 2 rmtDev
98 Project Introduction
99 Project Setup
100 Search Component Regular Expressions Fetch API Destructuring slice
101 Job List Component Undefined Null map join
102 Modularity with ES Modules Folder Structure Export Import
103 Error Component Rendering Default vs Named Export Default Fn Parameters
104 Refactoring Importance Of Good Structure In Codebase
105 More Refactoring Job Details Component
106 Improving Fetch Calls Good Structure For fetch Calls 2xx 4xx Status Codes
107 Async Await vs then try catch Promises
108 Refactor Fetch Calls Helper Utility Functions
109 Sorting Component Part 1 Sorting Data State
110 State What Is State Local vs Global State Mutating Objects And Arrays
111 Sorting Component Part 2 sort
112 Pagination Component vs slice
113 Router Component History pushState Window Object DOMContentLoaded
114 Active Job Item find
115 Bookmarks Component Mouseenter vs Mouseleave Events some filter
116 Storage Component LocalStorage For Persisting Data Spread Operator
117 Taking Care of Details
118 Build Process Webpack Babel PostCSS Other Optimizations
Supplemental
119 Helper Function for Formatting Date new Date
120 For Loop forEach And Other Array Methods Almost Completely Replaced for
121 Formatting in JS Semicolons Tabs vs Spaces
Closing
122 Congratulations BONUS Lecture
Resolve the captcha to access the links!