Current Curriculum

The following is a list of all Modules and Lessons currently in the course , as well as lessons that are in development , or planned for future release (in process). The course uses The Bandolier Educational Web Framework to teach the modern concepts with accessible code to study.

This is list of modules is not final. I am currently planning the entire course. Right now it's about 50% planned with many more modules coming soon. I may also decide to remove modules or reorganize them based on student feedback.

Module 1: First Steps

Installing required software and advice for beginners.

01: Welcome to The Course

A quick introduction and welcome to the course with some key information to get started.

02: Course Motivation and Overview

The grand vision of the course as of March 2021.

03: Common Misconceptions About Programming

Learning a programming language is different from other things you've learned. In this exercise I give you helpful tips on how to better succeed.

04: Setup for Windows

Getting your Windows 10 computer ready to code.

05: Setup for OSX

Setting up your OSX/Mac computer for code.

06: Setup for Linux or WSL

Getting a Linux system ready, or using Windows Subsystem for Linux.

07: PowerShell Basics

Learning to use enough PowerShell to complete the course.

08: Bash Basics

A quick introduction to bash if you run Linux, WSL, or OSX.

09: Available Help Resources

The general technical help resources available for you as a customer of the course.

10: Next Steps

What you should be doing next.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 2: HTML Basics

Learn how browsers structure the content you see using HTML tags.

01: Elements

Introducing basic terminology for HTML.

02: Tags in Detail

A quick reference of the major HTML tags you'll use the most.

03: Attributes

Learn about how attributes modify tags, and aren't used much anymore.

04: Links

Learn how to link to another HTML document.

05: Important Attributes

A list of the major attributes on tags you'll most likely use.

06: The DOM

Explain the Document Object Model and how nested tags work.

07: Tables

Focus on tables for tabular data.

08: Forms

Focus on forms for collecting information from the user and submitting it.

09: Custom Tags

An explanation of using your own tags, why that's the easiest way to work, followed by a challenge.

10: Simple Layouts with Blockstart

Bridging from HTML to CSS using blockstart.css

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 3: CSS Basics

Learn a simple way to use CSS to style HTML.

01: CSS and HTML

The relationship between CSS and HTML.

02: The Setup

Setting up the JavaScript gear you need to use.

03: Rule Sets

The initial format for a CSS rule, and how selectors work.

04: Simple Styling

An initial set of useful properties for CSS that should cover 90% of your uses.

05: Value (Not Color) Codes

Using monochrome values instead of color codes to simplify your process.

06: Variables

Using variables to simplify CSS and making changes easier.

07: Flexbox Basics

Introducing Flexbox for consistent modern layout.

08: Grid Basics

Introduction to using CSS grids for uniform layout.

10: Frontend Development Process Stages 3 and 4

Breaking away from blockstart.css to create the final look of the subject website from Exercise 9.

09: A Frontend Development Process

I explain a process for taking your front end ideas (or copy subjects) from nothing to working user interface using blockstart.css.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 4: JavaScript Level 1

Introduction to all of the basic elements of JavaScript.

00: Gearing Up

Getting the software you need to finish this module.

01: A First Program

Your very first JavaScript program.

02: Comments

How to comment out parts of your code and write help for your future self.

03: Simple Math and Strings

Doing simple math and creating displayable text in strings.

04: Variables

Variables for storing and referencing information.

05: Constants

Constants are variables that you claim will not change.

06: Escape Sequences

When you write a string how do you put a string in it?

07: Prompting Input

Asking a person for input from the terminal.

08: Command Line Arguments

Accepting input from the user as command line options on your script.

09: Files

Reading files with the fs (filesystem) module.

10: Files, Args, and Variables

Combining reading files with accepting command line arguments.

11: Functions

Creating small pieces of code and jumping to them with functions.

12: Functions, Files, Variables

Combining everything learned so far with functions, files, and variables in one.

13: Modules

Packing a group of related files into a single component called a module.

14: True and False Tests

The start of logic comparison operations.

15: If and Else

The introduction of branching with if and else.

16: While Loops

The concept of repeating a block of code with a while-loop.

17: Sequences and For Loops

Lists of data and enumerating them with a for-loop.

18: More Arrays

Studying Arrays even more and becoming proficient at nesting them.

19: Data Objects

First step with objects just for key/value data.

20: First Game

Creating a little game to combine everything learned thus far.

21: Simple OOP

Going from Data Objects and Functions to Object Oriented Programming.

22: More Complex OOP

Using the new ES6 style of classes is much better than the last exercise's classes.

23: Inheritance

Learning about the concept of inheritance in OOP.

24: OOP Game

Creating an OOP version of our little game.

25: Functions and Recursion

Studying a complex use of functions calling their self to do a loop.

26: Transforming Data

Processing Arrays with handy functions and callbacks like map and reduce.

27: Applying Functions

You can chain sequences of functions together to perform more complex sequences of operations.

28: Scope and Closures

The concept of scope in ES6 vs. older JavaScript and why you should use let and const instead of var.

29: Partial Application

A more complicated technique to push your understanding of callbacks and filters.

30: Callbacks, Events, Promises and Async

This exercise covers the many, many, many ways that JavaScript handles asynchronous events.

31: Modules and import

The final exercise covers the use of import and modern ES6 modules.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 5: JavaScript Level 2

A set of 10 small projects that refine and practice your JavaScript skills.

00: Introduction

A series of projects that practice what you've learned so far.

01: CSV is Easy...Right?

Learn about Promises while learning about CSV parsing.

02: Filter a Log File

Learn about RegExp while learning about parsing log files.

03: Replicate ls

Learn more about the fs module while replicating ls.

04: Replicate find

Learn about directory traversal while replicating find.

05: Static Blog Generator

Apply what you've learned so far to a static blog generator.

06: A First Web Application

Learn how to learn another project's API while making your blog more dynamic.

07: Access a SQLite3 Database

Learn about database access from JavaScript using knex.js and testing.

08: A TODO List Website

Apply what you've learned so far to create a database backed full stack application.

09: A Fully Dynamic Blog

Apply what you've learned so far to add comments to your blog.

10: A Simple JSON API

Revisit the TODO app to learn about web applications that access JSON APIs.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 6: Introducing the Bandolier

A deep but narrow dive into The Bandolier web framework.

00: Introduction the Bandolier

We take a dive through every layer of a typical web framework's stack by creating a simple web application using The Bandolier.

01: The Unstyled Fake UI

In-depth solution to Long Start Step 01: The Unstyled Fake UI

02: The Blockstart Fake UI

Laying out the basics of your Number Guess UI using the fast Blockstart method.

03: The Styled Fake UI

Removing Blockstart and using full CSS to finish the UI first draft.

04: Testing The Fake UI

Creating your first unit test for your fake UI.

05: The Fake api/ Handler

Move the data from your Fake UI to a backend JSON API handler.

06: The Database Table

Now we create the numberguess database table to store people's progress.

07: lib/models.js and Model Testing

Creating a model for your numberguess table and testing it.

08: The api/ to the Database

Connect the api to the database with the model.

09: Adding Registration and Authentication

Adding registration and authentication the app.

10: Static Leaderboard Command

Writing a command to statically generate a leaderboard.

11: Emailing Winners

Using email to notify people when they win.

12: Sending Emails with Queues

Using the Bull queue to send to send the email.

13: Advanced Fancy FSM Based UI

Reworking the UI to use the FSM for tight control of your...number guessing.

14: Delayed Optional Registration

Use the FSM to make the registration smoother, letting people play before stealing their info.

15: WebSocket Winner Notification

Use WebSockets to notify players that someone else just won.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 7: SQL Databases and ORMs

A deep dive into how ORMish works, how knex.js works, and the basics of SQL.

00: Introducing SQL

A quick introduction to SQL databases with knex.js.

01: Tables, Columns and Rows

Starting off with tables, columns, and rows in SQL.

02: Creating a Table

Creating a table scheme with SQL.

03: Column Types

The different column (data) types in SQLite3.

04: Create, Read, Update, Delete

The Create, Read, Update, and Delete basics.

05: From SQL to JavaScript Objects

How SQL tables and queries translate into JavaScript objects.

06: Primary Keys and Indexing

Using primary keys to link tables and how they get indexed.

07: One-to-Many, Many-to-Many

The two primary ways tables are related.

08: High Concept "Attributed Relations"

A special kind of relation that's not common, but very useful.

09: Migrations

How to migrate a database to change its schema and/or data.

10: Analyze and Migrate a Database

A final challenge to analyze a database and migrate it to change it.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 8: JSON APIs

A deep analysis of JSON APIs and how to make them.

00: JSON APIs

JSON APIs using Express.js.

01: HTTP Protocol Basics

A brief introduction to the HTTP protocol.

02: Using node's HTTP API

A simple webserver using the base http library.

03: Jumping to Express.js

Using Express.js for more features.

04: Routing in Express

Adding dynamic and static content to our Express app.

05: Cookies and Authentication

Cookies for storing state about the user, like Authentication.

06: WebSockets with Socket-IO

Asynchronous communication with Socket-IO.

07: CORS is So Weird

CORS, why it's weird, and why you need it.

08: Review of the OWASP Top 10

OWASP's Top 10 security issues to study.

09: HTTP Study Projects

Small spot topics you need to study in your sspare time.

10: JSON as Data Format

Moving on to the JSON part of JSON APIs.

11: Client and Server Perspectives

Understanding the client vs. server sides of the protocol.

12: Browser to Server Communication

Sending JSON requests to the server and processing them.

13: Server to Server Communication

Sending JSON requests from one server to another.

14: Using URLs as Actions or "Calls"

Formalizing URLs as actions or "calls".

15: Testing JSON APIs

How to test your JSON APIs.

16: The dynamic_load Function

Explaining the automatic loading feature of the commands/api.js system.

17: Dynamically Loading JSON Handlers

Using dynamic_load to Create API Handlers.

18: From Browser to Database and Back

Using Sequence Diagrams to study chains of requests in a system.

19: JSON Over WebSockets

Implementing JSON over WebSockets and the issues that comes with it.

20: Next Steps

Moving on to the next part of the stack.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 9: Reactive UIs with Svelte

Deep dive into Svelte UIs and the concept of reactivity found in Vue, React, and Alpine.js.

00: Introducing Svelte

Introducing the module and getting Svelte setup.

01: .svelte File Structure

Creating your first .svelte file.

02: Template Variables

How to get your variables into the HTML.

03: Reactive Assignment and Blocks

How updating your variables with equality updates the DOM.

04: Logic and Looping

The classic if-statement and each-block in Svelte.

05: onMount and Await Blocks

Controlling when things happen using onMount and await.

06: Events

Handling event from the browser with on: syntax.

07: Bindings

Bidirectional variable binding with bind:

08: Components in Svelte

Breaking up your UIs with discrete components.

09: Svelte Lifecycle

How Svelte (probably) loads your code.

10: Component Properties

Adding export properties to your components.

11: Component Events

Creating events from your components with dispatch.

12: Custom Bindings

Binding components, and a trick for getting at functions.

13: Dynamically Building Components

Loading components dynamically rather than with a tag.

14: CSS class and style Binding

Binding CSS classes to components (or anything) based on variables.

15: Component Slot Contents

Allowing components to have child elements with slots.

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Module 10: Payments, Registration, and Authentication

Learn how to register users, verify authentication, and accept payments.

00: Payments, Registration, and Authentications

Everything about getting users and their money.


Module 11: Advanced UI Techniques

Advanced techniques for various UI situations, done as challenges to test your knowledge so far.

00: Advanced UI Techniques

Advanced UI Techniques


Module 12: Emails and Queues

Everything about sending emails and using queues to offload slow work like...sending email.

00: Emails and Queues

The intricacies of Email and efficiently sending it with queues.


Module 13: Project: An Artist's Store

We create a store for an artist, with a bonus project for a friend that connects to shopify.

00: Project: An Artist's Store

Making a store to sell paintings from an artist.


Module 14: Project: A Course Website

A miniature version of this very website that hosts courses.

00: Project: A Course Website

Project creating a website that sells courses.


Module 15: Project: A Chat Service

A chat service that uses web sockets.

00: Project: A Video Website

A video hosting website, kind of like a vlog.


Module 16: Project: A Gaming Website

A website for gamers that features clips, livestreams, discord integration, and paid subscribers.

00: Project: A Gaming Website

A gaming website, with user subscriptions and Discord integration.


Module 17: Project: A Marketplace Website

The most difficult payments scenario is the marketplace. We'll figure out how to do it, but warn against it.

00: Project: A Marketplace Website

Implementing a marketplace, which the most difficult business to run.