English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 188 lectures (20h 24m) | 8.22 GB
Create awesome JavaScript driven web apps with modern JavaScript from the very beginning right through to ninja-level.
Hey gang, and welcome to your first step on the path to becoming a JavaScript ninja! In this course I’ll be teaching you my absolute favourite language (JavaScript!) from the very beginning, right through to creating fully-fledged, dynamic & interactive web experiences.
We’ll cover all the basics to get you up-and-running quickly, before diving in to some of the really fun stuff like web-page manipulation, creating interactive forms, popups & other cool effects. Along the way we’ll be using the latest additions to the JavaScript specification (ES6, 7 & beyond) and maintaining good coding standards to keep our code clean and effective!
Once we master the basics, we’ll dive into several real-life JavaScript projects, including an interactive quiz, a weather app, a real-time chat application and a small UI library you can use in all your future projects!
We’ll also take a look at some more advanced topics – object oriented programming, asynchronous code, real-time databases and much more. Finally, we’ll be setting up a modern work-flow using Webpack & Babel, so that by the end of this course you’ll be no less than a black-belt JavaScript developer with a lot of coding techniques in your tool-belt.
What you’ll learn
- Learn how to program with modern JavaScript, from the very beginning to more advanced topics
- Learn all about OOP (object-oriented programming) with JavaScript, working with prototypes & classes
- Learn how to create real-world front-end applications with JavaScript (quizes, weather apps, chat rooms etc)
- Learn how to make useful JavaScript driven UI components like popups, drop-downs, tabs, tool-tips & more.
- Learn how to use modern, cutting-edge JavaScript features today by using a modern workflow (Babel & Webpack)
- Learn how to use real-time databases to store, retrieve and update application data
- Explore API’s to make the most of third-party data (such as weather information)
Table of Contents
Introduction
1 Why You Should Take This Course
2 Why JavaScript is Amazing
3 Setting up Your Environment
4 Course Files
JavaScript Basics
5 Adding JavaScript to a Web Page
6 The Browser Console
7 Variables, Constants & Comments
8 Data Types at a Glance
9 Strings
10 Common String Methods
11 Numbers
12 Template Strings
13 Arrays
14 Null & Undefined
15 Booleans & Comparisons
16 Loose vs Strict Comparison
17 Type Conversion
Control Flow Basics
18 What is Control Flow
19 For Loops
20 While Loops
21 Do While Loops
22 If Statements
23 Else & Else If
24 Logical Operators
25 Logical NOT
26 Break & Continue
27 Switch Statements
28 Variables & Block Scope
Functions & Methods
29 What are Functions
30 Function Declarations & Expressions
31 Arguments & Parameters
32 Returning Values
33 Arrow Functions
34 Functions vs Methods
35 Foreach Method & Callbacks
36 Callback Functions in Action
Object Literals
37 Objects at a Glance
38 Creating an Object Literal
39 Adding Methods
40 ‘this’ Keyword
41 Objects in Arrays
42 Math Object
43 Primitive vs Reference Types
The Document Object Model
44 Interacting with the Browser
45 The DOM Explained
46 The Query Selector
47 Other Ways to Query the DOM
48 Adding & Changing Page Content
49 Getting & Setting Attributes
50 Changing CSS Styles
51 Adding & Removing Classes
52 Parents, Children & Siblings
53 Event Basics (click events)
54 Creating & Removing Elements
55 Event Bubbling (and delegation)
56 More DOM Events
57 Building a Popup
Forms & Form Events
58 Events Inside Forms
59 Submit Events
60 Regular Expressions
61 Testing RegEx Patterns
62 Basic Form Validation
63 Keyboard Events
Project – Interactive Ninja Quiz
64 Project Preview & Setup
65 Bootstrap Basics
66 HTML Template
67 Checking Answers
68 Showing the Score
69 The Window Object
70 Intervals & Animating the Score
Array Methods
71 Filter Method
72 Map Method
73 Reduce Method
74 Find Method
75 Sort Method
76 Chaining Array Methods
Project – Todo List
77 Project Preview and Setup
78 HTML & CSS Template
79 Adding Todos
80 Deleting Todos
81 Searching & Filtering Todos
Dates & Times
82 Dates & Times in JavaScript
83 Timestamps & Comparisons
84 Building a Digital Clock
85 Date-fns Library
Async JavaScript
86 What is Asynchronous JavaScript
87 Async Code in Action
88 What are HTTP Requests
89 Making HTTP Requests (XHR)
90 Response Status
91 Callback Functions
92 JSON Data
93 Callback Hell
94 Promise Basics
95 Chaining Promises
96 The Fetch API
97 Async & Await
98 Throwing & Catching Errors
Project – Weather App
99 Project Preview & Setup
100 HTML & CSS Template
101 AccuWeather API
102 Get City API Call
103 Get Weather API Call
104 Updating the Location
105 Object Shorthand Notation
106 Updating the UI
107 Destructuring
108 Weather Icons & images
109 Ternary Operator
Local Storage
110 What is Local Storage
111 Storing & Getting Data
112 Deleting Storage Data
113 Stringifying & Parsing Data
114 Updating the Weather App
Object Oriented JavaScript
115 What is OOP
116 Object Literal Recap
117 Classes
118 Class Constructors
119 Class Methods & Method Chaining
120 Class Inheritance (subclasses)
121 Super( )
122 Constructors (under the hood)
123 Prototype Model
124 Prototypal Inheritance
125 Built-in Objects
126 Making a Forecast Class (weather app)
Databases (Firebase)
127 NoSQL Databases
128 Firebase & Firestore
129 Connecting to Firestore
130 Getting Collections
131 Saving Documents
132 Deleting Documents
133 Real-time Listeners
134 Unsubscribing
Project – Real-time Chatroom
135 Project Preview & Setup
136 HTML Template
137 Connecting to Firebase
138 Chatroom Class & Adding Chats
139 Setting up a Real-time Listener
140 Complex Queries
141 Updating the Room & Username
142 Creating a ChatUI Class
143 Formatting the Dates
144 Sending New Chats
145 Changing Username & Local Storage
146 Updating the Room
147 Testing the App
More ES6 Features
148 Spread & Rest
149 Sets
150 Symbols
Modern Workflow with Babel & Webpack
151 Modern Feature Support
152 An Introduction to Babel
153 Installing Node.js & Babel
154 Using the Babel CLI
155 NPM Scripts & Watching Files
156 What is Webpack
157 Setting up a Webpack File
158 Webpack CLI
159 Introduction to Modules
160 Default Exports
161 Watching for Changes
162 The Webpack Dev Server
163 Production & Development Modes
164 Babel & Webpack Together
165 Webpack Boilerplate
Project – UI Library
166 Project Preview & Setup
167 CSS & Style Loaders (webpack)
168 Tooltips
169 Dropdowns
170 Tabbed Content
171 Snackbars
172 Extending the Library
Using Firebase Database (& Auth) Version 9
173 What’s New in Firebase 9
174 Webpack Setup
175 Creating a Firebase Project
176 Firestore Setup & Fetching Data
177 Adding & Deleting Documents
178 Real Time Collection Data
179 Firestore Queries
180 Timestamps & Ordering Data
181 Fetching Single Documents
182 Updating Documents
183 Firebase Auth Setup
184 Signing Users Up
185 Logging In & Logging Out
186 Listening to Auth Changes
187 Unsubscribing from Changes
Next Steps
188 Bonus Lecture Next Steps
Resolve the captcha to access the links!