JavaScript: from zero to hero

What you’ll learn:

  • Develop robust, lean, and error-free apps.
  • Create reusable, modular, and modern codebases that stand the test of time.
  • Build, scale, diagnose, and monitor a full-stack production application.

About This Course

Course Outline

The curriculum is highly in flux, and I didn’t have time to update it.
You can check the open issues 🐞 to get an idea of the overall scope.

Sorry about the formatting of the course outline:
Instead of prettifying it, I’m focusing more on actually preparing the video lessons, quizzes, and all other stuff—The real deal, I mean.

The course outline is really fluid, as I said: So things can change.
Yet, here is what you will learn at a glance:

Icon Legend

  • Video lesson
  • Hands-on coding exercise
  • Work in progress: Video not completed yet
  • Section 1: Introduction

    This section is more about the “no-code-related” parts of being a developer. It is both related to learning JavaScript in particular, and being a better, well-rounded developer in general.

     

    • About “JavaScript: from Zero to Hero”
    • Course Outline and Structure
    • How to Learn a New Language
    • How to Think Like a Developer
    • How to Ask Technical Questions
    • How to Make the Best Use of This Course
    • Use Case: MarkItDown: Your First Markdown Editor
  • Section 2: Development Setup

    We will set up our development environment, so that we can follow the rest of the lessons easily.

     

    • Installing Node.js, NPM, and Yarn
    • An Overview of Popular Editors and IDEs
    • Installing and Using Docker
    • Debugging Node.js in WebStorm
    • First Time Development Environment Setup on a Mac
    • First Time Development Environment Setup on Windows
    • First Time Development Environment Setup on Linux
    • Use Case: Verifying Your Setup
  • Section 3: Organizing Your Code

    This section is about creating a reusable, module codebase. I put it earlier because it is important; however you might want to revisit this section later, especially if you are just beginning to learn programming.

     

    • Tips and Tricks About Code Structure
    • Creating Utility Modules and Functions
    • More on Modules
    • Don’t Use a Rocket Launcher to Kill a Mosquito
    • Use Case: The Marvel Universe
  • Section 4: Let the Fun Begin

    In this section we’ll go over the fundamental concepts real quick, so that we can jump into more advanced constructs later.

     

    • A Brief Overview of JavaScript Datatypes
    • A Gentle Introduction to Functions
    • A Gentle Introduction to Objects
    • A Gentle Introduction to Collections
    • This is the Way We Loop the Loop
    • A Gentle Introduction to Asynchronicity
    • A Gentle Introduction to Ineritance
    • A Gentle Introduction to Classes
    • A Gentle Introduction to DOM
    • Use Case: Searching For Your Favorite Book
  • Section 5: Get That Heisenbug!

    Part of writing code is bug hunting: And this section is all about it.

     

    • Dealing With Errors and Exceptions
    • Debugging in the Browsers
    • Debugging a Node.js App
    • Remote Debugging a Node.js App
    • Using a Log Aggregator
    • Use Case: Fixing a Broken Web App
  • Section 6: Diving Deeper Into Task Queues

    Knowing how task queues work in depth can change change your understanding of how a browser works. So that you won’t have to do setTimeout(fn, 100) all the time.

     

    • process.nextTick and setImmediate
    • MicroTasks and MacroTasks
    • Use Case: Debouncing a Scroll Event
  • Section 7: Diving Deeper Into Functions

    Learning how to think functionally can take a while. But when you are in the functional realm, there’s no going back.

     

    • Functions: A Deeper Dive
    • Higher-Order Functions
    • apply and bind
    • Currying and Partial Application
    • Rest Parameters and Default Parameters
    • Getting Functional With Ramda
    • Use Case: Dissecting a Y Combinator
  • Section 8: Diving Deeper Into AJAX

    This section is all about APIs, remote request, sockets and connections.

     

    • XMLHttpRequest
    • CORS
    • fetch
    • Generators and Iterators
    • async/await
    • Using Websockets
    • Use Case: Mini Chat Using socket.io
    • Why Not Use socket.io for Production
    • Use Case: Mini Chat Using PubNub
  • Section 9: The Web

    We’ll dive into how web-related technologies work, and how fun with modern front-end APIs. We will start our journey without using any frameworks, and we might even pick a few frameworks and use them on the go—Who knows 😃.

     

    • Browser Events and Event Listeners
    • Cookies
    • Local Storage and Session Storage
    • Indexed DB
    • WIP: several use cases
  • Section 10: Getting Your Hands Even Dirtier

    If you have made up this far, then you should have learned a lot. So now it is time to bolster that knowledge by getting your hands even more dirty!

     

    • Use Case: Creating a Autocomplete Search Box
    • Use Case: Creating a Mini Google
    • Use Case: Creating a Tip Calculator
    • Use Case: Time Traveling With moment.js
    • Use Case: TBD: Some Cool Stuff With d3.js
    • Use Case: Simple JavaScript Syntax Highlighter
    • Use Case: Search the Spotify Music Catalog
    • Use Case: The Great Library of Chuck Norris Jokes
    • Use Case: Convert a Website to PDF
    • Use Case: Building a Simple Event Calendar
  • Section 11: Dogfooding

    This section is as “real life” as it can get: We will start from a blank slate and implement the dojo.zerotoherojs.com 🦄 learning portal from scratch. Since it is a production application, we will cover all production-related issues, such as CI/CD pipelines, staging, monitoring, log aggregation, diagnostics and alarms, scalabiliy… and more—It will be a lot of fun 🙂.

     

    • Tabula Rasa
    • The Type is Strong in This One
    • More In Progress: TBD
  • Section 12: Where to Go From Here

    Since Front-End Development is a broad discipline, there still will be things that we haven’t touched by the end of this course: There will be a dedicated section at the end of the course to guide you through how you can build upon the knowledge you have accrued already.

 

 

Frequently Asked Questions

 

What are you selling?

I am not selling: I am teaching.

How much does the EAP cost?

It is $25.

It is a one-time payment that allows you to access all the course videos, source code, lesson notes, and other supplementary material.

What do I get out of the early-access program?

See above.

What else do I get?

After registering for the early access program, you will also get an invitation to its Slack workspace and will be able to chat with me and also other like minded learning enthusiasts.

There is also a live chat on the website that you can directly ask me questions whenever I am available.

Is this a subscription? Do I pay for it monthly?

No, it is a one-time payment.

How long do I keep the content? Is it subscription-based?

It is NOT a subscription plan: It is a one-off payment.

You can access the content forever.

Subscription?

No.

Can I download the videos?

Not yet.

DRM-free downloadable videos will be available, after the course is finalized, as a part of a premium package.

Early Access Program subscribers will get a discount if they want to upgrade to that package.

What is the language of the course?

English.

Do you want to translate it to another language?

Do you?

I can give you time-encoded subtitle files if you want to help.

Just send an email to me@volkan.io.

Do videos have subtitles?

Currently the videos do not have any subtitles.

Before the course finalizes, I will add English subtitles.

If you want the lessons to be transcribed to your language, see above.

What is the resolution and quality of the videos?

They are 1920×1080 (FHD) screen casts with great video and audio quality.

I have other questions

I’d love to hear them: Send an email to me@volkan.io.

 

 

 

About Volkan Özçelik