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.
Module 1: First Steps
Installing required software and advice for beginners.
A quick introduction and welcome to the course with some key information to get started.
The grand vision of the course as of March 2021.
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.
Getting your Windows 10 computer ready to code.
Setting up your OSX/Mac computer for code.
Getting a Linux system ready, or using Windows Subsystem for Linux.
Learning to use enough PowerShell to complete the course.
A quick introduction to bash if you run Linux, WSL, or OSX.
The general technical help resources available for you as a customer of the course.
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.
Introducing basic terminology for HTML.
A quick reference of the major HTML tags you'll use the most.
Learn about how attributes modify tags, and aren't used much anymore.
Learn how to link to another HTML document.
A list of the major attributes on tags you'll most likely use.
Explain the Document Object Model and how nested tags work.
Focus on tables for tabular data.
Focus on forms for collecting information from the user and submitting it.
An explanation of using your own tags, why that's the easiest way to work, followed by a challenge.
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.
The relationship between CSS and HTML.
Setting up the JavaScript gear you need to use.
The initial format for a CSS rule, and how selectors work.
An initial set of useful properties for CSS that should cover 90% of your uses.
Using monochrome values instead of color codes to simplify your process.
Using variables to simplify CSS and making changes easier.
Introducing Flexbox for consistent modern layout.
Introduction to using CSS grids for uniform layout.
Breaking away from blockstart.css to create the final look of the subject website from Exercise 9.
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.
Getting the software you need to finish this module.
Your very first JavaScript program.
How to comment out parts of your code and write help for your future self.
Doing simple math and creating displayable text in strings.
Variables for storing and referencing information.
Constants are variables that you claim will not change.
When you write a string how do you put a string in it?
Asking a person for input from the terminal.
Accepting input from the user as command line options on your script.
Reading files with the fs (filesystem) module.
Combining reading files with accepting command line arguments.
Creating small pieces of code and jumping to them with functions.
Combining everything learned so far with functions, files, and variables in one.
Packing a group of related files into a single component called a module.
The start of logic comparison operations.
The introduction of branching with if and else.
The concept of repeating a block of code with a while-loop.
Lists of data and enumerating them with a for-loop.
Studying Arrays even more and becoming proficient at nesting them.
First step with objects just for key/value data.
Creating a little game to combine everything learned thus far.
Going from Data Objects and Functions to Object Oriented Programming.
Using the new ES6 style of classes is much better than the last exercise's classes.
Learning about the concept of inheritance in OOP.
Creating an OOP version of our little game.
Studying a complex use of functions calling their self to do a loop.
Processing Arrays with handy functions and callbacks like map and reduce.
You can chain sequences of functions together to perform more complex sequences of operations.
The concept of scope in ES6 vs. older JavaScript and why you should use let and const instead of var.
A more complicated technique to push your understanding of callbacks and filters.
This exercise covers the many, many, many ways that JavaScript handles asynchronous events.
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.
A series of projects that practice what you've learned so far.
Learn about Promises while learning about CSV parsing.
Learn about RegExp while learning about parsing log files.
ls
Learn more about the fs
module while replicating ls
.
find
Learn about directory traversal while replicating find
.
Apply what you've learned so far to a static blog generator.
Learn how to learn another project's API while making your blog more dynamic.
Learn about database access from JavaScript using knex.js
and testing.
Apply what you've learned so far to create a database backed full stack application.
Apply what you've learned so far to add comments to your blog.
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.
We take a dive through every layer of a typical web framework's stack by creating a simple web application using The Bandolier.
In-depth solution to Long Start Step 01: The Unstyled Fake UI
Laying out the basics of your Number Guess UI using the fast Blockstart method.
Removing Blockstart and using full CSS to finish the UI first draft.
Creating your first unit test for your fake UI.
api/
HandlerMove the data from your Fake UI to a backend JSON API handler.
Now we create the numberguess database table to store people's progress.
lib/models.js
and Model TestingCreating a model for your numberguess table and testing it.
api/
to the DatabaseConnect the api to the database with the model.
Adding registration and authentication the app.
Writing a command to statically generate a leaderboard.
Using email to notify people when they win.
Using the Bull queue to send to send the email.
Reworking the UI to use the FSM for tight control of your...number guessing.
Use the FSM to make the registration smoother, letting people play before stealing their info.
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.
A quick introduction to SQL databases with knex.js.
Starting off with tables, columns, and rows in SQL.
Creating a table scheme with SQL.
The different column (data) types in SQLite3.
The Create, Read, Update, and Delete basics.
How SQL tables and queries translate into JavaScript objects.
Using primary keys to link tables and how they get indexed.
The two primary ways tables are related.
A special kind of relation that's not common, but very useful.
How to migrate a database to change its schema and/or data.
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.
JSON APIs using Express.js.
A brief introduction to the HTTP protocol.
A simple webserver using the base http library.
Using Express.js for more features.
Adding dynamic and static content to our Express app.
Cookies for storing state about the user, like Authentication.
Asynchronous communication with Socket-IO.
CORS, why it's weird, and why you need it.
OWASP's Top 10 security issues to study.
Small spot topics you need to study in your sspare time.
Moving on to the JSON part of JSON APIs.
Understanding the client vs. server sides of the protocol.
Sending JSON requests to the server and processing them.
Sending JSON requests from one server to another.
Formalizing URLs as actions or "calls".
How to test your JSON APIs.
dynamic_load
FunctionExplaining the automatic loading feature of the commands/api.js
system.
Using dynamic_load
to Create API Handlers.
Using Sequence Diagrams to study chains of requests in a system.
Implementing JSON over WebSockets and the issues that comes with it.
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.
Introducing the module and getting Svelte setup.
Creating your first .svelte file.
How to get your variables into the HTML.
How updating your variables with equality updates the DOM.
The classic if-statement and each-block in Svelte.
Controlling when things happen using onMount and await.
Handling event from the browser with on: syntax.
Bidirectional variable binding with bind:
Breaking up your UIs with discrete components.
How Svelte (probably) loads your code.
Adding export properties to your components.
Creating events from your components with dispatch.
Binding components, and a trick for getting at functions.
Loading components dynamically rather than with a tag.
Binding CSS classes to components (or anything) based on variables.
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.
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.
Advanced UI Techniques
Module 12: Emails and Queues
Everything about sending emails and using queues to offload slow work like...sending email.
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.
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.
Project creating a website that sells courses.
Module 15: Project: A Chat Service
A chat service that uses web sockets.
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.
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.
Implementing a marketplace, which the most difficult business to run.