102 — Modern JavaScript Full Beginner Course (Conner Ardman, setup to DOM)

Video: 102 · Modern JavaScript Full Beginner Course · watch · ~4:04:46 · Conner Ardman, JavaScript beginner course with live coding

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 00 (foundations) — the JavaScript-syntax prerequisite alongside 027 and 030, and the beginner on-ramp to 101’s internals. No TypeScript syntax at all: this is the language TypeScript later adds types to — variables, coercion, control flow, functions, objects, arrays, the DOM, events, and errors.

the one idea: JavaScript first, from zero

A four-hour beginner course taught entirely through live coding in VS Code: install the editor (Code Runner and Live Server extensions), open index.js, and build every concept by running it. Each section adds one layer — syntax, decisions, repetition, reusable functions, grouped data, page interaction, failure handling — so the whole language arrives as one connected story rather than isolated tricks.

setup: VS Code, Code Runner, Live Server

The course opens on the editor itself: Visual Studio Code with the Code Runner extension (run snippets in place) and Live Server (reload the page on save). The video is free on YouTube with follow-up material on the dev.to platform.

syntax: let, const, var and coercion

The classic console.log("Hello World") start, then variable declarations — let, const, and the legacy var — over strings, numbers, and booleans. The honest-early lesson is coercion: loose (==) vs strict (===) equality, and explicit type conversion before comparison.

let name = "Conner";

control flow: conditionals and loops

Decisions via if/else and switch, repetition via for, while, and do...while, with break/continue steering loops from inside. Truthy and falsy values get their first pass here (a second, deeper pass closes the course):

let isSignedIn = true;

if (isSignedIn) {
	// welcome path
}

functions: declarations and arrows

Encapsulating logic into reusable units: function declarations, parameters and return values, then arrow-function shorthand. The point stressed throughout is reuse — name a behavior once, call it everywhere.

objects and arrays: properties and methods

Objects as property-and-method bundles (dot access like person.name), arrays as ordered collections walked with forEach, map, filter, and reduce. The primitive-vs-reference distinction lands here: editing a passed-in object mutates the original.

DOM: selecting and changing the page

The pivot to web development: getElementById and querySelector to find elements, innerHTML to rewrite them, and saving to see the page change. The lesson that “adding to the page” requires an explicit step — creating content changes nothing until it is attached to the document.

events: addEventListener

Click, keyboard, and scroll events wired up with addEventListener — the event-driven model in three concrete handlers rather than abstract terms.

errors: try, catch, finally

Failure as a first-class topic: try/catch/finally, throwing your own errors, and strict mode surfacing silent mistakes. Out-of-range array access returning undefined instead of throwing is the kind of honest-JavaScript behavior this section normalizes.

advanced: strict mode, ASI, typeof

The closing pass: automatic semicolon insertion, strict mode as the stricter default, typeof for runtime type checks (typeof [] reporting "object" — the classic gotcha), and truthy/falsy revisited with more depth.

Prev: 101 — THINK in Code: Hard Parts of JavaScript · Next: 103 — Did He Really Fix TypeScript?

Watch this first if JavaScript itself is new, or skim it as the syntax reference behind everything else: 027 teaches the same ground from a different angle, 030 compresses it into twelve minutes, and 101 explains what the engine does with it. Every TypeScript annotation from module 01 onward constrains exactly these behaviors — let vs const, coercion, truthiness, reference mutation, DOM nullability.

Whisper mistranscriptions corrected — standard JavaScript terms throughout. Frame timestamps run ~01:30 (editor setup) through ~219:30 (DOM files), sampled one per course section across the 4-hour runtime.