Sharpening up my JavaScript skills and exploring web dev a bit more.

Introduction

I have really wanted to get a bit more into Web Development and work on frontend development. That’s part of the reason for my recent job switch. And part of the reason I’m taking this class is to get up to speed and be more of an asset to my team. There’s also a lot I want to do on the side involving web development. You can find the course here.

Certificate

Ya gotta right?

Overview

My notes are really lengthy… I took them as Markdown and then compiled them into html.

You can see the HTML version of my notes here (rendered through this nice Github html preview site here).

Here’s a Table of Content generated from here.

• The Complete JavaScript Course 2021: From Zero to Expert
  • Section 1: Welcome, Welcome, Welcome
    • Code Editor
  • Section 2: JavaScript Fundamentals
    • 8. Brief Introduction to JavaScript
    • 9. Linking a JavaScript File
    • 10. Values and Variables
    • 12. Data Types
    • 13. let, const, and var
    • 14. Basic Operators
    • 15. Operator Precedence
    • 17. Strings and Template Literals
    • 18. Taking Decisions: if / else Statements
    • 20. Type Conversion and Coercion
    • 21. Truthy and False Values
    • 22. Equality Operators == vs ===
    • 23. Boolean Logic
    • 24. Logical Operators
    • 26. Switch Statement
    • 27. Statements and Expressions
    • 28. Conditional (Ternary) Operator
    • JavaScript Releases: ES5, ES6+, and ESNext
  • Section 3: JavaScript Fundamentals - Part 2
    • 32. Activating Strict Mode
    • 33. Functions
    • 34. Function Declarations vs Expressions
    • 35. Arrow Expression
    • 36. Functions Calling Other Functions
    • 37. Reviewing Functions
    • 39. Introduction to Arrays
    • 40. Basic Array Operations (Methods)
    • 42. Introduction to Objects
    • 43. Dot vs Bracket Notation
    • 44. Object Methods
    • 46. Iteration: The for loop
    • 47. Looping through Arrays, Breaking, and Continuing
    • 48. Looping Backwards and Loops in Loops
    • 49. The while loop
  • Section 5: Developer Skills & Editor Setup
    • 56. Installing Node.js and Setting up a Dev Environment
    • 61. Debugging with the Console and Breakpoints
  • Section 6. HTML and CSS Crash Course
    • 64. Basic HTML Structure and Elements
    • 67. Introduction to the Box Model
  • Section 7. JavaScript in the Browser: DOM and Events Fundamentals
    • 70.Project #1: Guess my number!
    • 71. What is DOM and DOM Manipulation?
    • 72. Selecting and Manipulating Elements
    • 74. Implementing the Game Logic
    • 75. Manipulating CSS Styles
    • 79. Project #2: Modal Window
    • 80. Handling an ESC Keypress Event
  • Section 8: How JavaScript Works Behind the Scenes
    • 89. A High Level Overview of JavaScript
    • 90. The JavaScript Engine and Runtime
    • 91. Execution Contexts and the Call Stack
    • 92. Scope and the Scope Chain
    • 93. Scoping in Practice
    • 94. Variable Environment: Hoisting and The TDZ
    • 96. The this keyword
    • 97. The this Keyword in Practice
    • 98. Regular Functions vs Arrow Functions
    • 99. Primitives vs Objects (Primitive vs Reference Types)
    • 100. Primitives vs Objects in Practice
  • Section 9: Data Structures, Modern Operators, and Strings
    • Destructuring Arrays
    • 104. Destructuring Objects
    • 105. The Spread Operator (…)
    • 106. Rest Pattern and Parameters
    • 107. Short Circuiting (&& and ||)
    • 108. Null Coalescing Operator (??)
    • 110. Looping Arrays: The for-of Loop
    • 111. Enhanced Object Literals
    • 112. Optional Chaining (?.)
    • 113. Looping Objects: Object Keys, Values, and Entries
    • 115. Sets
    • 116. Maps: Fundamentals
    • 117. Maps: Iteration
    • 118. Summary: Which Data Structure to Use?
    • 120. Working with Strings - Part 1
    • 121. Working with Strings - Part 2
    • 122. Working with Strings - Part 3
  • Section 10: A Closer Look at Functions
    • 127. Default Parameters
    • 128. How Passing Arguments Works: Value vs Reference
    • 129. First-Class and Higher-Order Functions
    • 130. Functions Accepting Callback Functions
    • 131. Functions Returning Functions
    • 132. The call and apply Methods
    • 133. The bind Method
    • 135. Immediately Invoked Function Expressions (IIFE)
    • 136. Closures
    • 137. More Closure Examples
  • Section 11: Working with Arrays
    • 141. Simple Array Methods
    • 142. Looping Arrays: forEach
    • 143. forEach with Maps and Sets
    • 144. Creating DOM Elements
    • 147. Data Transformations: map, filter, reduce
    • 148. The map method
    • 149. Computing Usernames
    • 150. The filter method
    • 151. The reduce method
    • 153. The Magic of Chaining Methods
    • 155. The find method
    • 159. some and every
    • 160. flat and flatMap
    • 161. Sorting Arrays
    • 162. More Ways of Creating and Filling Arrays
  • Section 12: Numbers, Dates, Intl, and Timers
    • 171. Working with BigInt
    • 172. Creating Dates
    • 175. Internationalizing Dates (Intl)
    • 176. Internationalizing Numbers (Intl)
    • 177. Timers: setTimeout and setInterval
    • 178. Implementing a Countdown Timer
  • Section 13: Advanced DOM and Events
    • 179. Section Intro
    • 181. Project Bankist Website
    • 182. How the DOM Really Works
    • 183. Selecting, Creating, and Deleting Elements
    • 184. Styles, Attributes, and Classes
    • 185. Implementing Smooth Scrolling
    • 187. Event Propagation: Bubbling and Capturing
    • 188. Event Propagation in Practice
    • 200. Efficient Script Loading: defer and async
  • Section 14: Object-Oriented Programming (OOP) with JavaScript
    • 203. What is Object Oriented Programming?
    • 204. OOP in JavaScript
    • 205. Constructor Functions and the New Operator
    • 206. Prototypes
    • 207. Prototypal Inheritance and the Prototype Chain
    • 208. Prototypal Inheritance on Built-In Objects
    • 210. ES6 Classes
    • 211. Setters and Getters
    • 212. Static Method
    • 213. Object.create
    • 315. Inheritance Between ‘Classes’: Constructor Functions
    • 217. Inheritance Between “Classes”: ES6 Classes
    • 218. Inheritance Between “Classes”: Object.create
    • 219. Another Class Example
    • 221. Encapsulation: Private Class Fields and Methods
    • 222. Chaining Methods
    • 223. ES6 Classes Summary
  • Section 15: Mapty App: OOP, Geolocation, External Libraries, and More!
    • 228. How to Plan a Web Project
    • 229. Using the GeoLocation API
  • Section 16: Asynchronous JavaScript: Promises, Async/Await, and AJAX
    • 243. Asynchronous JavaScript, AJAX, and APIs
    • 246. How the Web Works: Requests and Responses
    • 247. Welcome to Callback Hell
    • 248. Promises and the Fetch API
    • 249. Consuming Promises
    • 250. Chaining Promises
    • 254. Asynchronous Behind the Scenes: The Event Loop
    • 255. The Event Loop in Practice
    • 256. Building a Simple Promise
    • 259. Consuming Promises with Async / Await
    • 260. Error Handling with try…catch
    • 261. Returning Values from Async Functions
  • Section 17: Modern Javascript Development: Modules and Tooling
    • 267. An Overview of Modern JavaScript Development
    • 268. An Overview of Modules in JavaScript
    • 276. Review: Writing Clean and Modern JavaScript
    • 278. Declarative and Functional JavaScript Principles
    • 279. Let’s Fix Some Bad Code: Part 2
  • Section 18: Forkify App: Building a Modern Application
    • 282. Project Overview and Planning (I)
    • 286. The MVC Architecture
    • 289. Event Handlers in MVC: Publisher - Subscriber Pattern
    • 305. Wrapping Up: Final Consideration
  • Section 19: Setting up Git and Deployment
    • 308. Simple Deployment with Netlify

Projects

There are a couple main projects you build.

You can peruse the notes, but the capstone is this Forkify application hosted on Netlify. Here’s the link: https://forkify-larkin.netlify.app/

Comments

The class took a solid amount of time, but I feel like I learned a ton. I’m going to follow it up and take the Typescript/React class to actually get up to speed with modern web development classes.

I’d recommend the class.

Again, the normal disclaimer. While I’ve included all of the code, please do not abuse this. You’re only doing yourself a disservice in terms of what you learn.

As always feel free to email me with questions - although, I’m far from an expert! I am more than happy to help debug.

Once again, you can see the notes here.