Every Journey Needs a Roadmap

Work-In-Progress (WIP)

Roadmaps are easier to publish once the blueprints are finalized. What you see here is a work-in-progress (WIP) that I whipped up (see what I did?) for your enjoyment.

Look for this notice to disappear once the plans for this site become clearer in my own mind. (See issue 42.)

Discover what you will be learning and where I’m going to take you as you begin your journey into JavaScript.

Dive In

Just wanna start coding? Then jump to the Quick Start Tutorials where you can begin learning JavaScript in a hands-on way.

Tutorials Et.Al.

Tutorials are at the heart of this entire site. I’m a firm believer that having clear step-by-step walkthroughs of actual code is an excellent way to learn any programming language.

These tutorials are designed to gradually move you forward through the very basic understanding of JavaScript as a language to using JavaScript for client-side processing in websites.

But it doesn’t stop there. You also need How-To Guides for the common “general-use” scenarios of using JavaScript.

Guides

These guides offer general-purpose information along with code examples. These are not walkthroughs (like the tutorials). Rather, they are intended as “jumping-off” points for applying JavaScript to your own situations. After all, there is really no limit to what you can try to achieve in web application development. These guides offer a “What I wish I knew” kick-start for new programmers.

---

QuickStart Tutorials

Did you know that you can learn JavaScript without knowing any HTML or CSS? You can!

If that’s your situation, then consider looking at the QuickStart tutorials. All you need is NodeJS, a terminal, and an editor like Visual Studio Code. See the System Setup on how to install these tools.

Here’s a summary of what each QuickStart covers.

• Intro to JavaScript
• JavaScript Math
• Complex Data Types
• Functions
• Conditionals
• Looping
• Arrays

The QuickStart Series gets you up and running with JavaScript - No HTML or CSS required! There are four sets available.

You can start with the JavaScript Quickstart for beginners followed by the series About Objects and Functions. From there, you can jump into either JavaScript Projects or Flow Control Statements.

JavaScript QuickStart

Suitable for absolute beginners in JavaScript programming, these tutorials guide the user through the foundations of JavaScript and how to perform calculations and string manipulation.

Intro to JavaScript

JavaScript Math

Manipulate Strings

About Objects and Functions

This series introduces Objects in JavaScript and explores the various ways we can create functions in JavaScript. It closes with a look at JavaScript modules as a way to organize larger code bases by splitting the code into several files.

Complex Data Types

Functions

Classes

Flow Control Statements

Work-In-Progress (WIP)

Conditionals

Looping

Arrays

JavaScript Projects

Work-In-Progress (WIP)

Node Projects

JavaScript Modules

Unit Testing

Super-Simple CLI

Modern CLIs

TBD

A-Z

As a result of following the first three sets of quickstart tutorials, you should have the following set of stand-alone JavaScript files.

• DirectoryJS-Quickstart

  • app.js Intro to JavaScript
  • basic-math.js JavaScript Math
  • controlling-text.js Manipulate Strings
  • data-types.js Complex Data Types
  • exploring-functions.js Functions
  • functions-and-objects.js More Objects/Classes
  • grok-decisions.js Conditionals
  • handling-repetition.js Looping
  • indexes-and-arrays.js Arrays

The last set - JavaScript Projects - moves you into the world of Node projects (again, focused on JavaScript apart from HTML/CSS).

• DirectoryJust-JavaScript Node Projects

  • package.json
  • index.js
• DirectoryKeeping-Organized JavaScript Modules

  • package.json
  • index.js
• DirectoryLearning-With-Unit-Tests Unit Testing

  • package.json
  • Directorysrc

    • index.js
  • Directorytests/

    • …
• DirectoryJS-Quickstart Also JavaScript Modules

  • modules.mjs
  • node-support.mjs
  • other-modules.mjs
• DirectoryProjects Super-Simple CLI

  • package.json
  • index.js
• DirectoryQueue-CLI Modern CLIs

  • package.json
  • Directorysrc

    • index.js
• DirectoryRefactoring-Code

  • package.json
  • Directorysrc

    • index.js
• DirectoryJS-Quickstart

  • spread-operators.js
• DirectoryTDD

  • package.json
  • Directorysrc

    • index.js
  • Directorytests

    • test-first.spec.js
• DirectoryUnit-Tests-Done-Right

  • package.json
  • Directorysrc

    • index.js
• DirectoryVitest

  • package.json
  • Directorysrc

    • index.js
• DirectoryWeb-Workers

  • package.json
  • Directorysrc

    • index.js
• DirectoryxPlore-xTra/

  • …
• DirectoryYour-Future-Career/

  • …
• DirectoryZ/

  • …

Author TODO

• ✨ Summarize the End-Point ✨

• System Setup - Packing for the Journey

• QuickStarts - Tutorials that explore JavaScript apart from any DOM or browser usage.

  • JavaScript Quickstart A three-part series where we dive right into JavaScript to discover the fundamentals.
  • About Objects and Functions A three-part series where we discover JavaScript Objects, Functions, and Classes.
  • Flow Control Quickstart A two-part series that looks at conditionals and loops.
  • JavaScript Projects A two-part series where we create Node projects, use JavaScript modules, and learn about Unit Testing.

• Practice Version Control - Making sure you’ve gassed up the car

• Querying the DOM and Using <script> Tags - Pulling out of the driveway

• Variables, Values and Data Types - Getting some food

• Functions

• Events