JavaScript & TypeScript Fundamentals

Learn variables, functions, arrays and objects, the DOM, async code, and then add TypeScript types — and use them to make a profile page interactive.

HTML gives a page its structure and CSS gives it a look, but neither can do anything. A button that filters a list, a form that checks your input, a page that loads fresh data without reloading — that behavior is JavaScript. It is the only programming language that every browser runs, and with Node.js it also runs servers, command-line tools, and (through frameworks) mobile and desktop apps. Learning it once opens almost every door in this roadmap, from React to NestJS.

TypeScript is JavaScript with types added: you describe what kind of value each variable holds, and the compiler catches a whole family of mistakes before the code ever runs. It is now the default choice for serious projects, and it is easy to learn once you know JavaScript — which is why this series teaches both, in that order.

The first ten chapters cover JavaScript itself: what it is and where it runs, values and variables, conditions, loops, functions and scope, arrays and objects, modules and npm, the DOM and events, asynchronous code with fetch, and errors and debugging. The last two chapters add TypeScript: first the basics of the type system, then converting a real project to TypeScript and compiling it.

You won't just read about it. Across the series you extend the profile page of Dara Sok from HTML & CSS Fundamentals. Each chapter adds a piece: a filterable project list, a dark-mode toggle, a contact-form validator, and a list of GitHub repositories loaded from a real API. By the end you have a working interactive site, and you've moved its logic into typed, compiled TypeScript.

You need a computer running Windows, macOS, or Linux, a modern browser with DevTools (Chrome, Edge, or Firefox), a code editor (Visual Studio Code is free and used throughout), and Node.js (the LTS version, installed with nvm or the official installer). The command line from Command Line Basics and the Git setup from Git & GitHub for Beginners are used throughout. Nothing costs money.

  1. 01What JavaScript and TypeScript AreWhere JavaScript fits next to HTML and CSS, engines and runtimes (browser vs. Node), the console, running your first script, and a first look at TypeScript.
  2. 02Values, Variables, and TypesStoring data with const and let, the primitive types, template strings, typeof, null vs. undefined, and the type-coercion surprises every beginner meets.
  3. 03Operators and ConditionsArithmetic and comparison, === vs. ==, truthy and falsy values, if/else, switch, &&, ||, ??, ?., and the ternary operator — used to greet visitors by time of day.
  4. 04Loops and IterationRepeating work with for, for...of, while, and do/while, controlling loops with break and continue, looping over strings and nested data, and avoiding infinite loops — using Dara's project list as your first array.
  5. 05Functions and ScopeDeclarations, expressions, and arrow functions; parameters, defaults, and rest; return values; pure functions vs side effects; block, function, and global scope; hoisting; closures; and callbacks as an idea.
  6. 06Arrays and ObjectsLists and records: array and object literals, the methods map, filter, find, some, every, reduce, and sort, destructuring, spread and rest, optional chaining, Object.keys and entries, JSON, and the difference between copying and referencing.
  7. 07Modules, Node, and npmSplitting code into files with ES modules, import and export, running JavaScript outside the browser with Node, and installing packages with npm and package.json.
  8. 08The DOM and EventsSelecting and changing page elements with JavaScript, reacting to clicks and form submits, and building a filterable project list and a dark-mode toggle that remembers your choice.
  9. 09Asynchronous JavaScriptWhy waiting code needs special tools: the event loop, setTimeout, callbacks, promises, async/await, Promise.all, and loading Dara's GitHub repositories with fetch.
  10. 10Errors and DebuggingReading error messages and stack traces, the main error types, try/catch/finally, throwing your own errors, validating Dara's contact form, console methods, and stepping through code with the DevTools debugger.
  11. 11TypeScript BasicsThe problem TypeScript solves, installing the compiler, type annotations and inference, basic types, arrays and tuples, type vs interface, unions and literal types, unknown vs any, function types, light generics, tsconfig.json, and reading compiler errors.
  12. 12TypeScript in PracticeConvert Dara's project to TypeScript: a Project type, narrowing with typeof, in, and discriminated unions, typing DOM queries and fetch responses, why a type is not runtime validation, compiling to dist/, and where to go next.