WatchAndCode Javascript Course Honest Review

This blog post was written in English to reach more people. I’m making a French training to learn JavaScript from scratch so if you’re interested, check out my website JavaScript de Zéro.

I’m a software engineer that worked 10+ years in various industries, learned a lot of different languages in my career and here is my fully detailed and honest WatchAndCode Javascript Course review created by Gordon Zhu.

TL;DR: if you ask yourself if you should take the paid Premium Membership or not, here is my answer.

Premium Membership Review (paid course):
– Numbers
– The Good Parts
– About Gordon Zhu
– The Bad Parts
– Room For Improvement
– Should You Take This Course Or Not?

Practical Javascript Review (free course):
– Numbers
– The Good Parts
– The Bad Parts
– Room For Improvement
– Should You Take This Course Or Not?

If you want more information about the course content, I detailed every lesson for each course:
– Premium Membership course details
– Practical Javascript course details

Premium Membership Review (Paid Course)

You can take this course here: Premium Membership paid course.

Note: You should have done the Practical Javascript free course before taking this one.

Numbers

At the time of writing:
– Video course length: 30 hours 24 minutes
– Price: $39/month
– Slack community: 360 active users

The Good Parts

Course environment

WatchAndCode is provided to you by the Teachable platform. I like the simple focused design plus the top left progress bar is a huge motivation booster.

All videos have a good image and sound quality, you can watch them up to 2x speed, 1.5x was perfect for me. Subtitles are available in English in the first half. Font sizes are large enough to watch the course on small screen devices.

Below each video you can post questions and comments to have more explanations about the video. Gordon or students answer you quickly (depending on your timezone).

In this course you’ll use Google Chrome and Glitch to write your code. As Chrome is one of the most used browsers for web development, that’s a nice choice.

By purchasing the course you get access to the WatchAndCode Slack channel where hundreds of other students and Gordon are active. You always get answers fast to your questions, so you never get stuck very long!

Every day you can stay motivated and get answers to your questions via a live video chat called the daily accountability meeting. Moreover, every week, you get access to the live office hours: Gordon answers your question live via video chat! All the previous office hours are available on Gordon’s YouTube channel if you want to see what it is. Take a look it’s free!

Course content

The way Gordon teaches is really really good. You feel that he’s passionate about his work and put a lot of effort in each video.

He uses the console a lot to show what he’s talking about and to verify assumptions he does while coding. He explains things in place: he uses comments to tell in plain English first what he wants to achieve and then, write it in code. This brings clarity and helps you follow and code along with him. Sometimes he uses slides to make a point. That’s a good move for visual learners and to explain the same material in different ways: it helps a lot to understand the difficult concepts.

Gordon knows how to break down in very small pieces each step of the development process and thinking process behind the implementation of a new feature. You’ll get deep and thorough explanations to get your Javascript foundations right.

Also, he sprinkles lots of very good online resources in each lesson you can refer to later and keep with you during your programming apprenticeship.

Another important point I liked is that even if there are better ways to write the code, Gordon will first start where it works, and then improves it over time, keeping the code easily readable for students. That’s not the case of all the courses I’ve already seen. Indeed most of the time they jump right into the optimized/concise version that is far less readable for a beginner.

You’ll get some homework to do sometimes before watching the videos. Indeed, Gordon is not here to babysit you. He wants you to become more autonomous. That’s why he also teaches you how to find solutions to your problems and read the docs. He created a step-by-step process to break down any source code and own it easily by practicing little exercises on it.

Most of the course is dedicated to how to read code. That may frustrate you at first because you may want to build something from scratch but it’s the most important skill to acquire. Indeed if you apply for a dev job, 99% of the time, you’ll have to improve/fix bugs on an existing codebase. So you should train yourself to read and understand code fast. It’s the first time I see that skill taught in a Javascript course. This is brilliant and extremely helpful for learners that want to actually get a job at the end of the course.

Surprisingly, you’ll learn why and how to write unit tests for your software. I say surprisingly because that’s a skill that is not taught a lot in other courses. To be honest that’s the first time I see a Javascript course that touches that topic at all!

Gordon always wants you to apply best practices so he makes it clear to refactor the code every time to improve it. He also takes a design-centric approach to let you know that here, you can improve this particular code for this particular reason. That makes you more critic about the code you read and the code you write. Self-criticizing your own code will help you get better over time and write better code as a developer, that’s a good habit to keep.

You’ll learn how libraries work and how they’re made. How to read and understand the code of a library and the associated documentation. Gordon will demystify buzzwords like IIFE, closures, higher-order functions, callback functions, recursive functions and more.

He will also show you one of the most underrated skill ever: how to use the debugger in Chrome dev tools. Very important skill to acquire for any beginner so you can fix your own problems easily and move forward, no more frustration, no more wasted hours.

On a more general level, Gordon takes the time to explore all the common mistakes students do when learning Javascript these days. He explains what you should expect to learn and what to focus on. All these advice are really good, and I’ve been programming for more than a decade.

About Gordon Zhu

As a general note about Gordon, I must say he has strong opinions. And he designed his course specifically for you to get the most out of it. He is not here to babysit you though. It’s quite the opposite in fact, he acts as a guide, so you can find your own way to fix your bugs and move forward as a grown-up developer.

His strong opinions are spread all over his course:

Slack invitations that are not accepted within 7 days will be REVOKED. This harshness is by design. Our community is stronger when it’s made up of people that want to be here (people that want to be here generally don’t procrastinate on things like this).

(Extract from one video): You’ll never find the !!(null) in my code, it looks weird, beginners don’t know what it means […] I prefer the Boolean(null) equivalent, I don’t need to think about it, you know what it does right away […] you’ll see this double exclamation point a lot unfortunately… that’s just how reality is, and I’d say that’s the unfortunate reality.

Moreover, it’s common to see him answering your questions by pointing out the part of the course you need to watch again to answer your own question by yourself. That may seem harsh, but it’s really a good way to teach and make you more independent and grow as a developer.

Providing the answer directly wouldn’t make you train your capacity to look for answers by yourself using the material at your disposal. That’s a huge skill to master when you develop as you do this all the time because technologies constantly evolve.

The Bad Parts

Nothing is perfect in this world, let me tell you what bothered me.

The course teaches you Javascript ES5 syntax, not ES6. I know that ES6 is not very well suited to teach Javascript. Indeed it has lots of ways to make the code more concise and smaller but that also reduce readability for a beginner (think about reading an arrow function when you don’t know what a function is!). That said, being able to read ES6 code is as important as producing good ES5 code. Knowing the new features will be necessary for the future to handle code written by other developers using ES6 features.

Another thing I was a little bit disappointed by was the gap between the free course and the premium course style. Indeed, you don’t build any app from scratch in the premium course. You’ll read and understand code most of the time and play with it. Adding a course on how to think and build an app from scratch would be great for students to help them create their portfolio and apply for a job.

Also, the course is very long, 30 hours! And some parts have videos that are more than 1 hour long. This kind of video is difficult to watch (even at 1.5x speed!) and being able to stay focused all that time may be a challenge for some people.

Let me finish with some small things: the biggest lessons 5 and 6 (AccountingJS and Underscore) don’t have English subtitles yet. Links that are mentioned in the videos are not always referenced in the comments/below the video so you have to manually type them in the browser (I’m picky I know).

Room For Improvement

Here are my advice for Gordon to improve the course based on my learning experience:

• Build an FAQ below each video. I read all the comments in all the videos and there are gold nuggets in them. But it’s very laborious to read everything each time. Instead, I would have enjoyed some sort of Q/A below each video plus a section with additional information that was not treated in the video.
• Break long videos into smaller ones. 15 min should be the max upper limit.
• Add a section to teach ES6 new features so students can read modern source code.
• Add a lesson to build from scratch an app so people can add something to their portfolio and show to some employer that they have skills.
• Add a lesson on how to prepare for a job interview.

Should You Take This Course Or Not?

Gordon made a video to answer this question. As you may have already guessed from the size of the good parts section against the bad one, I would answer: YES of course!

If you’re an absolute beginner in programming, this is the perfect course for you, and I really mean it. I’ve read lots of books and tutorials in my career for several different languages and none made me loved to learn how to program as in this course.

Gordon has a really good faculty to teach and break things down into small digestible steps. The community in the Slack channel will help you move forward and never get stuck, that’s a huge asset for a beginner to not lose your motivation and avoid frustration.

If you’re a professional software developer like me, I think this course is the fastest way to learn javascript from scratch with best practices in mind. I watched the whole course at 1.5x speed and I had no difficulties to understand every concept quickly.

You may want to know how long does it take to actually complete the course? I can’t answer that question because it depends on your available time per day, your skills, your abilities etc. but what I can tell you is that at $39/month this course is underpriced.

In fact you don’t purchase a course for this price, you purchase a good learning environment and that has unlimited value. This can make the difference between a frustrated alone student stuck on a problem for hours, that will finally lose his motivation and quit, and a student that will get support from his peers and fix quickly his problems.

Practical Javascript Review (Free Course)

You can take this course here: Practical Javascript free course.

Numbers

At the time of writing:
– Video course length: 8 hours 11 minutes.
– Price: Free
– Facebook group: 6680 members

The Good Parts

Course environment

WatchAndCode is provided to you by the Teachable platform.

All videos have a good image and sound quality, you can watch them up to 2x speed (1.5x was perfect for me). Subtitles are available in English for all videos. Font sizes are large enough to watch on small screen devices.

Below each video you can post questions and comments to have more explanations about the video. Gordon or other students answer you quickly (depending on your timezone).

In this course you’ll use the Google Chrome console and Plunker to write your code. As Chrome is one of the most used browsers for web development, that’s a nice choice.

By enrolling in this free course you get access to the WatchAndCode Facebook private group where thousands of other students and Gordon are active. Stay focus when you post though:

Since the purpose of this group is to help you focus and get the most out of Watch and Code, off-topic posts (anything not directly related the lessons) will be unceremoniously deleted.

Course content

I really enjoyed the format of this course: straight to the point short videos with 1 key concept and a quick recap at the end. Each video breaks down a concept into bit-sized pieces of information.

In this course you’ll start to code right away and I love that approach! You’ll start coding the first version of a todo app directly from the Chrome console. In this todo app, you’ll add one feature at a time: adding an item, removing an item, updating an item, marking an item completed or not, displaying the todo list etc.

Each lesson is built upon the previous one, this is extremely well designed as you always use what you already know in the next lesson. This helps you memorize the previous material and use it in a concrete program.

In the process of building the todo app, you’ll learn functions, parameters and arguments, you’ll review all primitives of Javascript, numbers, strings, booleans, null, undefined and more advanced values like objects and arrays.

Gordon will explain variables scopes thanks to a great visual analogy (with circle and arrows) that I’ve never seen elsewhere and that works very well. You’ll gradually use more complex concepts to reimplement and evolve the todo app until a point where you don’t need the console anymore. Indeed, you’ll slowly move from the console to a webpage with buttons and live interactions. What a pleasant journey!

To release that prowess you’ll learn the smallest amount of HTML (because you’re here to learn Javascript remember?) to build a simple interface for your app using Plunker online editor.

You’ll make your code smaller and efficient using for loops and if statements to display (x) when items are completed and ( ) otherwise. You’ll loop over an array to display the todo list and then get totally rid of the loops thanks to the forEach() built-in Javascript feature.

In this project you’ll see how Javascript handles comparisons between objects and primitives. Again, Gordon uses some nice analogies and diagrams to explain important concepts like memory addresses, mutability and immutability.

You’ll add dynamism to your web app thanks to event listeners, you’ll learn how to manipulate the DOM, how it’s structured and some of the useful methods that Javascript provides to access elements from it.

Along the way you’ll learn how to use the debugger, how it works and how to harvest the most from this great tool to help you go step-by-step in your program and debug it.

Each time you finish to upgrade the app, Gordon goes into a little refactoring session to show you how to improve the code so it’s more maintainable and extensible, and cut off the useless code. Keeping your code clean is a good practice!

You’ll see advanced concepts like higher-order functions through the use of setTimeout() and forEach() examples. You’ll even implement your own version of forEach()!

At the end of the course, you move from the clunky Plunker tool to Glitch, add dynamically delete buttons along each item and learn how to delegate the events listener to the parent node of the list through event bubbling propagation.

To finish, Gordon gives you a great resource to understand what the this keyword refers to in several situations. He also discusses why there is not a single best way to architecture your code.

He will share his own experience and story about how he learned how to program and how he struggled to focus on the right things. The mistakes he made, the time he lost. Then he gives you golden advice on how to ask great questions and become a better learner (article + video about how to debug your code).

Gordon explains in plain English and in place using comments in the code what he wants to achieve each time before coding which is perfect to learn how to think to code.

At almost every lesson you start to “get it” and can pause the next video and code before watching Gordon do the same: it feels great and keep you motivated!

The Bad Parts

The Plunker tool can be difficult to use sometimes, you need to start/pause the project and don’t forget to select the right target to access the Javascript code from the console. Very annoying.

Also, I think the debugger lesson comes too late in the course because it’s a great asset to have while learning how to code.

I think the todo app could have been made more functional and pretty by providing a CSS stylesheet to students.

I wish we would have hunt down a bug introduced on purpose by Gordon so he can show us how to find a bug and fix it. Indeed this could have been done for each lesson, so the students can train themselves using the debugger and fix bugs. When you think about it, at the end of the day, that’s the most time-consuming task students do as they’re rookie they introduce bugs everywhere in their code and waste hours fixing them!

There are lessons that use a repetitive process to do the refactoring of all the methods so it can be boring sometimes.

I would have loved to learn about the differences between using a for loop and forEach() method in term of performances and context on when to use one or the other.

Room For Improvement

Plunker feels clumsy, using Glitch from the start would have been better (but it would take a long time to record again the same videos using Glitch, I can understand that).

The part about the debugger is brilliant and extremely useful. It’s a major skill to acquire for a beginner. It should be moved almost at the beginning! I think it would save so much time for the students (and avoid a lot of frustration too).

A little bit of design should have been put inside the todo app by reordering the HTML elements and providing a boilerplate CSS stylesheet that students could simply link to. They wouldn’t have to touch any CSS at all, just use the source code from Glitch to start working and every HTML element would be automatically styled. Having to click on the buttons with the mouse + the fact that they’re at the left of the input box makes it a pain to use the whole tool.

Should You Take This Course Or Not?

YES. Absolutely!

You won’t waste your time and you’ll learn a ton in 8 hours with Gordon! Plus, it’s free, so what are you waiting for? Enroll in this course now :).

---

Premium Membership course details

If you want to learn more about the premium content before purchasing it, this section is for you.

Lesson 1 — Orientation

This is not a Javascript lesson. It’s just the description of all the add-ons you can get access to (and how to access them) after purchasing the Premium Membership course.

Slack community

Ask your questions on a dedicated Slack workspace. Get answers from other students and Gordon himself, who is very active. Very useful if you’re stuck!

Daily accountability meetings

Every day at 8AM PST you can join a video chat to tell others what you did yesterday and what you planned to do today. It’s followed by a Q&A session.

Again, very powerful if you’re stuck on something! This daily meeting is also great for not feeling alone and mix with other students coming from different countries and backgrounds.

You can even find accountability buddies from your country (so your timezone is the same) to stay motivated during your learning journey!

Live office hours every week

Every Monday at 6PM PST Gordon answers your question live via a video chat.

Lesson 2 — Reading (or how to methodically rip apart a codebase)

This lesson is about reading code. You’ll read and understand the entire Javascript code behind the TodoMVC app (vanilla JS + jQuery).

Content

• You’ll learn how to read the code of an app you don’t know, how to focus on what matters, when and why. So you can own the code at some point and completely understand it. Gordon breaks down the full process behind understanding an app from scratch and its related source code.
• jQuery: the project you’ll study uses the jQuery library, so you learn some of the jQuery basic methods along the way.
• Gordon will teach you how to use the console to call some parts of the code you want to understand, how to use the debugger to see what’s going on in real time step-by-step within the code.
• You’ll learn how JS method calls are bound to buttons and other HTML elements, some specific programming patterns and why they’re used.
• You’ll also learn what HTML templating is about, why it’s useful and how it’s used in this particular app (through Handlebars).
• Finally you’ll take a look at localStorage , JSON format and routing (through Director). You’ll learn how to watch the localStorage data from Chrome dev tools and how to modify them.

The Good Parts

You have some homework to do: to read on your own the source code and play with the app before watching the videos. That’s good because it makes you more autonomous.
Learning how to read code is an extremely valuable skill to learn for any software developer.

This project uses jQuery, as it’s a skill that is in high demand in lots of companies, this course kills two birds with one stone.

When you don’t know something you’ll learn the resources to use to find the answers to your questions. How to read documentation is a mandatory skill to acquire in our fast-paced industry.

To conclude, Gordon gives you a practical method with actionable steps to make the knowledge you learned sink in. These are exercises you can practice on any source code and that can be carried on with you for as long as you’re a developer. These are very good advice by the way (and I’ve been programming for more than a decade!).

The Bad Parts

Videos are really long, around 1h per video in this lesson. It’s a huge gap between the short videos from the free course part.

There is a little delay between sound and image in this video that can be annoying when you see people talking. But when seeing source code and hearing explanations, the delay doesn’t interfere with the lesson.

Lesson 3 — Testing (how to write code that makes sure your code works)

Content

• Introduction to why and how to test software in general.
• You’ll write tests of all the requirements from the Practical Javascript part (the free course).
• You’ll rewrite forEach(), filter(), map() and reduce() with a TDD (Test Driven Development) approach!
• You’ll read the doc from MDN, you’ll extract the specs from it and you’ll code the corresponding unit tests.
• You’ll implement your own versions of each function so they pass the tests.

The Good Parts

Gordon introduces an important part of programming professional software that is, unfortunately, most of the time neglected in a lot of companies. So you’ll be one step above the crowd if you want a job in software development by knowing unit testing. Rewriting these built-in functions is great to become familiar with them and understand how everything works under the hood.

The Bad Parts

Again, the overall length of this course is very long (5h47m) because Gordon goes through all the little details of the specifications, like managing optional arguments etc. It can be overwhelming at some point and a little bit redundant.

Lesson 4 — SimpleTest (extending and improving existing code)

Content

• How the unit testing framework used in the previous lesson works?
• How can we improve it? Let’s improve it!
• How does the Javascript event loop work? In which order the browser call your code, update the DOM and do extra tasks?
• What are constructors, classes and how do they work?
• How to format nicely console output by grouping, adding colors and some basic style?

The Good Parts

On this lesson you modify on the spot the current unit testing framework to make it better right away, that feels really good to see your changes on the webpage.

Gordon analyses why the current UI of the unit test can be improved and emphasizes the fact that as a developer you must think about people that use your software. That’s a good practice: to think about who will use your software while writing it.

He also shares some great links to videos that explain perfectly how the Javascript event loop works!

The Bad Parts

None.

Lesson 5 — AccountingJS (escape from tutorial land)

In this lesson, everything starts from a StackOverflow post where someone asks for help to format a number as money in Javascript.

Content

• Gordon talks about pros/cons of using a library instead of writing yourself the code to handle problems (example: jQuery, AccountingJS).
• How to read a library readme file on GitHub and the documentation in general?
• How to recognize and handle minified code while learning a new library?
• What are IIFEs (Immediately Invoked Functions Expressions)? Why are they useful and how to recognize/use them?
• How global functions are managed through the window object?
• How to see variables scopes and global objects from the Chrome debugger (Local, Closure, and Global scopes)?
• How libraries/modules are exported? You’ll see quickly the different systems in place to make Javascript modulable (CommonJS, AMD, and global variables).
• Javascript Prototypes and Constructors, what they are, what they’re used for. How to use prototypes to create new objects?
• How the double exclamation point !! works?
• How Javascript handle methods calls under the hood on primitives like String and Number?
• How AccountingJS makes its code ES5 compatible so it can run on older browsers?
• How the main checkCurrencyFormat method works in AccountingJS?
• Why the built-in toFixed() method is kind of broken in Javascript (unexpected results while rounding)?
• Low-level explanation of how computers store numbers and decimals.
• How to fix the toFixed() method with a better approach using scientific notation.
• How recursion and recursive functions work? What’s the call stack and its limitations (stack overflow)? (Very thorough explanation)
• Regular expressions patterns (Very thorough explanation + great website resource to help you write regexp)!
• Unit testing analysis, how to fix a broken test the right way.

The Good Parts

This course teaches you how a simple and naive question can turn into a real programming nightmare when you want to implement a solution. Indeed, when you think about money formats worldwide there are huge differences and it’s not as easy as you thought it was in the beginning.

As in the previous lesson, you’ll have to read on your own the documentation and play with the library demo before watching the videos. Gordon goes quickly through the doc to show you how to play with the doc and code snippets to get a sense of how the library works.

Gordon will show you how to use the debugger to see the different variables scopes. That lets you really easily understand what’s going on when using functions and functions within functions.

He uses a visual explanation of Prototypes that is really good to understand this core concept of Javascript (and other languages that are object-oriented with classes).

Gordon goes through the entire code of AccountingJS library and goes in-depth each time it’s necessary to understand every trick used by the library authors. He also explains why and how he would rewrite some parts of the code to make it better.

Good news! The average length of each video in this lesson is quite short (30 min).

The Bad Parts

There are no English subtitles for this lesson. Also, managing currencies is not a very sexy subject, but the library has interesting code in it (plus it has unit tests!) that will teach you lots of tricks used by developers so it’s a perfect fit for the course.

Lesson 6 — Underscore (staying calm when there’s more code than you can read)

Content

• Quick recap of what has been done and your ability to learn new things and handle complexity over time.
• How the average person thinks about how to learn Javascript: this video shows the traps all the beginners fall into when learning Javascript nowadays.
• How to handle large code base easily.
• What is underscore? What are the differences between underscore and lodash?
• Dive into the code, try to understand what all these functions are about, what do they do, where are they used, use the debugger to try to figure things out.
• And more content is coming soon! This part is still under construction at the time of writing.

The Good Parts

Gordon starts with a video called how the average person thinks? This video is so important for people to actually move forward and not waste time learning buzzwords instead of learning Javascript. It’s a must watch.

At the end of this course, while waiting for new videos to be released, Gordon gives you some exercises to resolve to keep practicing your skills.

The Bad Parts

There are no English subtitles for this lesson and there is no direct link from the different websites mentioned in the video within the video description. This lesson is not finished though, there were 8 videos at the time of writing this blog post and it’s still under construction.

Practical Javascript course details

If you want to know the course content before investing 8 hours of your time: this part is for you.

Introduction, Support, Tools

Content

• Presentation of the course, quick review of why this course was made, what you’ll build (todo list app) and why Gordon chose a todo list app.
• You can get support via weekly live office hours, through the facebook group and comments below each video.
• How to use the Teachable platform to see your progress bar moving in the right direction.
• You’ll use Google Chrome and the online Plunker editor.

Version 1 — Array

Content

• Build a first version of the todo list that entirely runs within the console of Google Chrome!
• You’ll be able to store and display the content of a todo list, to add, remove, update and delete items from it.

The Good Part

No boring theory stuff, you jump right into the console to start coding! Gordon explains in plain English what he wants to achieve each time before coding it which is perfect to learn how to think to code.

The videos are very concise (3 min) and straight to the point, it’s really a great introduction to programming!

The Bad Part

None.

Version 2 — Functions

Content

• What are functions and why are they useful?
• How to define and call functions.
• What’s the difference between parameters and arguments.
• You’ll use and implement functions to display the todolist and add, remove, update and delete items from the todo list.

The Good Part

I particularly loved the analogy with recipes to explain how functions work.

The Bad Part

None.

Interlude — Functions and variables

Content

• Introduce scope of variables while using functions.
• Explain scopes and variables in a visual way thanks to a circle and arrow analogy.

The Good Parts

As always, very clear explanations and analogies, the circle and arrow analogy is absolutely great to understand what variable scopes work.

The Bad Parts

None.

Version 3 — Objects

Content

• Introduction to objects, properties and methods.
• Use of the online tool Plunker to avoid console limitations.
• Implements again all the feature of the todo app using objects.

The Good Parts

We finally escape the console to write some code in a more comfortable way. I like the approach of improving the full app each time using exactly the new concept just taught before.

It’s so good that at one point you start to “get it” and can pause the next video and code before watching Gordon do the same: feels really great and motivating!

The Bad Parts

When using the console to debug the code, you must never forget to run your code first and then chose the right target to debug your code and not something else. That can be a headache for students and a source of time wasted.

Interlude — Success is The Process

Content

• Great story about how Gordon learned how to program and how he struggled to focus on the right things, the mistakes he made etc.
• How to ask great questions and become a better learner (article + video about how to debug your code).

The Good Parts

In these videos, Gordon shares his story, it makes you feel less dumb because you’re not alone struggling! He teaches you what to focus on and what to leave aside to move forward and not waste your time uselessly. Also, he talks about how you can fix your own problems using the debugger.

The Bad Parts

I think that teaching the debugging process should come way earlier in the course because it’s so useful and would save so much time to the students (and avoid a lot of frustration too).

Version 4 — Booleans

Content

• Add a boolean to each item to make it completed or not.
• Add the new feature toggleCompleted to change that property on an item.

The Good Parts

This lesson increases slightly the complexity of the app in a very manageable way.

The Bad Parts

None.

Version 5 — Loops of Logic

Content

• Introduction to for loops and if statement.
• How to loop over arrays.
• Adapt the full app to use loops and manage the new boolean to check the completion of an item.
• Make the app display completed items prefixed by (x) or ( ) when they’re still active when showing the todo list.

The Good Parts

Gordon starts again from plain English to code in baby steps, making the process easier to understand and to follow.

The Bad Parts

None.

Version 6 — Thinking In Code

Content

• Add a new method toggleAll() to mark all items (un)completed at once.

The Good Parts

Easy to follow lesson, use everything we’ve learned so far.

The Bad Parts

None.

Interlude – Data Types And Comparisons

Content

• Deep dive into the differences between primitives and objects.
• How comparisons operators work on primitives and objects.
• How variables content is stored into variables and objects (introduction to memory addresses).

The Good Parts

Gordon uses a nice analogy with house addresses to make clearer the way objects are compared in Javascript. He uses slides to explain the memory address concept that let him show in a visual way how things work under the hood which helps a lot to grasp the concept.

The Bad Parts

None.

Version 7 — HTML And The DOM

Content

• Improving the user experience by making a user interface the user can click on.
• Create buttons in an HTML page to display the todo list in the console and be able to toggle all items.
• HTML basics are explained: how to include the <script> tag in the body of your document and use our script.
• How to add a listener on a button so we can run the method of our choice when the user clicks on it.
• How to use the dev tools to inspect elements of a web page.
• What is the DOM? How is it structured, how can we check it out through Chrome dev tools.
• Introduces several methods related to DOM manipulation: getElementById() and addEventListener().

The Good Parts

The use of the Plunker tool makes it easy to manage all the files online and see your work in real time. The use of the debugger lets you see event listeners attached to elements. Gordon doesn’t go too deep in the use of HTML, it’s just enough to understand and not overcomplicate things!

The Bad Parts

The todo app could have been made more functional and pretty by providing a CSS stylesheet. Having to click on the buttons + the fact that they’re at the left of the input box makes it a pain to use the whole tool.

Interlude — Don’t Wonder About Things The Debugger Can Tell You

Content

• How the debugger works? How to do step-by-step debugging in our app to troubleshoot it
• Use the debugger statement to pause the program where we want
• Gordon goes through all the methods we’ve built so far with the debugger and teach you how to look at the content of all variables and see how things work
• Advice about what to focus on: understanding not building from scratch

The Good Parts

Very interesting part about the debugger and how it helps you to literally see everything that’s going on in real time while using the app.

The Bad Parts

I wish we would have hunt down a bug introduced on purpose by Gordon so he can show us how to find a bug and fix it.

Version 8 — Getting Data From Inputs

Content

• First refactoring of the code to write less code and use an object to handle event listeners
• Discussion about why there is not a single best way to architecture your code
• Add more buttons and code to handle item addition, update, deletion and mark as completed features
• You’ll learn some methods of the input element to get and change the value from it from Javascript

The Good Parts

I like the fact that we have a little bit of software architecture in this course, that’s so rare in courses. Gordon makes a good point on the fact that you must adapt your architecture while your code is evolving and that there is no silver bullet architecture you can use everywhere. You must think and pick the right one every time.

As it’s a repetitive process you can pause the video at the beginning and do the work before checking what Gordon did, pretty amazing when you succeed!

The Bad Parts

It’s a repetitive process to do the refactoring of all methods so it can be boring sometimes, but you’ll learn how to write good code, so try to do it anyway.

Version 9 — Escape From The Console

Content

• We add enough HTML elements to display all todo list items within the web page instead of the console, that’s why it’s called escape from the console!
• Use an unordered list to display all items on the todo list on the web page
• Remove all the (now) useless code that managed to display the todo list in the console, everything is shown on the web page now.

The Good Parts

Having a full web app working without the console and built from scratch feels so good! Plus it’s entirely dynamic, it feels alive!

The Bad Parts

The visual aspect is not great (lacks some style) plus the position of the buttons is weird (at the left of the input instead of the right) so using the app feels very weird and not very practical.

Interlude — Functions Inside of Functions

Content

• Introduce higher-order functions with setTimeout() and forEach() examples and callback functions concepts.
• Create a simple forEach() implementation that works as the built-in function.

The Good Parts

Very clear explanations of higher-order functions and callback functions.

The Bad Parts

None.

Version 10 — Click to Delete

Content

• Introduce a new tool called Glitch to develop online, far better than Plunker.
• How to return a value from a function.
• Create dynamically delete buttons for each item so we can click to delete any item easily instead of passing the position of the item to delete.
• Use the id attribute to store item position so the button delete can know which button to delete.
• Use event bubbling to use only the parent (unordered list) as the event listener for all item (list items).
• Dynamically update (refresh) the full todo list after an item is deleted.
• Now that the button delete is not useful anymore, remove it and refactor some code.

The Good Parts

Glitch is far better than Plunker, no more play/stop button or choosing the target to debug your code with the console!

As always Gordon breaks down the full process into little steps that are easy to follow. The app starts to really look usable and useful, that’s a great feeling!

The Bad Parts

None.

Version 11 — Destroy All For Loops

Content

• Gordon uses the past forEach() built-in functions we saw to remove all for loops from the code.

The Good Parts

Lets you understand how to use forEach() on a concrete example.

The Bad Parts

I would have loved to learn about the differences between using a for loop and forEach() in term of performances and context on when to use one or the other.

Interlude — Understand this

Content

• Gordon provides a nice cheat sheet to understand what the this keyword refers to in several situations

The Good Parts

Having a good resource to refer to is great while learning Javascript, this keyword is really tricky sometimes!

The Bad Parts

None.

Thanks for reading until that point!