JavaScript programming

Steps

Core language

1. 1 Syntax, values and typesLearn variables, primitive types, operators and control flow, the building blocks every JavaScript program is made from.

   • MDN Web Docs developer.mozilla.orgfree

     Comprehensive documentation repository and reference database for open web standards, HTML, CSS, and browser APIs.

   I finished this step
2. 2 Functions, scope and closuresUnderstand how functions capture variables and how scope works, which explains most surprising behaviour in real code.

   • MDN Web Docs developer.mozilla.orgfree

     Comprehensive documentation repository and reference database for open web standards, HTML, CSS, and browser APIs.

   • web.dev Blog web.devfree

     Insights, updates on browser compatibility baseline, and performance guidance directly from Chrome developer advocates.

   I finished this step
3. 3 Objects, arrays and JSONModel data with objects and arrays, use their built-in methods and exchange structured data as JSON.

   • web.dev Blog web.devfree

     Insights, updates on browser compatibility baseline, and performance guidance directly from Chrome developer advocates.

   • JSON Schema json-schema.orgfree

     Home of the JSON Schema specification, with documentation, learning material and tool listings for developers who validate and describe JSON data structures.

   I finished this step

JavaScript in the browser

1. 4 The DOM and eventsSelect, create and update page elements and handle user events, turning static HTML into interactive pages.

   • WHATWG Standards whatwg.orgfree

     Community maintaining Living Standards for HTML and the DOM in collaboration with major browser vendors.

   • CSS-Tricks css-tricks.comfree

     Extensive archive of tutorials, guides, and articles exploring modern CSS layouts, web design patterns, and front-end code.

   I finished this step
2. 5 Browser support and new featuresCheck where a language or web API feature is supported and follow how browsers ship new capabilities.

   • Can I use caniuse.comfree

     Up-to-date browser support tables and compatibility database for modern front-end web design technologies and CSS standards.

   • Mozilla Hacks hacks.mozilla.orgfree

     Mozilla's blog for web developers, covering new browser features, web standards, performance and tooling changes in Firefox and the wider web platform.

   I finished this step
3. 6 Smooth rendering (optional)Learn how scripts interact with the rendering pipeline so animations and updates stay fluid instead of janky.

   • Jank Busting for Better Rendering Performance web.devfree

     Article explaining why browser animations stutter and how to use requestAnimationFrame and related techniques to keep rendering smooth, aimed at front-end developers.

   I finished this step

Asynchronous code and Node.js

1. 7 The event loop and async codeUnderstand callbacks, promises and async/await on top of the event loop, essential for network requests and I/O.

   • Node.js nodejs.orgfree

     Open-source, cross-platform JavaScript runtime environment executing JavaScript code outside a web browser.

   I finished this step
2. 8 Node.js and npmRun JavaScript outside the browser and manage third-party packages, opening the door to scripts, tools and servers.

   • Node.js nodejs.orgfree

     Open-source, cross-platform JavaScript runtime environment executing JavaScript code outside a web browser.

   • npm Registry npmjs.comfree

     World's largest software registry database hosting over two million reusable JavaScript and TypeScript packages.

   I finished this step
3. 9 Streams (optional)Process large files and network data piece by piece with Node streams instead of loading everything into memory.

   • Node.js Streams: Everything You Need to Know freecodecamp.orgfree

     Tutorial introducing readable, writable, duplex and transform streams in Node.js, with examples showing how they reduce memory use when processing large data.

   I finished this step
4. 10 A small web serverBuild a simple server with Express and environment-based configuration to see how JavaScript powers the backend.

   • MDN Express and Node.js Tutorial developer.mozilla.orgfree

     Comprehensive tutorial by Mozilla covering server-side programming concepts using Node.js and the Express framework.

   • dotenv github.comfree

     Widely used Node.js module that loads environment variables from a .env file into process.env, keeping configuration separate from application code.

   I finished this step

Ecosystem and scale

1. 11 Modules and build toolsSplit code into ES modules and use a modern dev server and bundler to ship them efficiently to browsers.

   • Vite vite.devfree

     Next-generation frontend tooling providing an ultrafast development server and optimized Rollup build bundling.

   • npm Registry npmjs.comfree

     World's largest software registry database hosting over two million reusable JavaScript and TypeScript packages.

   I finished this step
2. 12 TypeScriptAdd static types to catch mistakes before running code and make larger JavaScript codebases easier to change.

   • TypeScript Handbook typescriptlang.orgfree

     Official handbook for the TypeScript language, explaining its type system and features from the basics through advanced topics for JavaScript developers.

   • TypeScript Handbook typescriptlang.orgfree

     Comprehensive guide and reference documentation covering TypeScript syntax, types, and compiler configuration.

   I finished this step
3. 13 UI librariesApply your JavaScript skills in a component library to build interfaces from reusable, state-driven pieces.

   • React react.devfree

     The library for web and native user interfaces developed and maintained by Meta and the open-source community.

   • Vue.js vuejs.orgfree

     Progressive JavaScript framework for building user interfaces with an approachable, performant, and versatile core.

   • Lit lit.devfree

     Open-source JavaScript library for building lightweight, standards-based web components with reactive properties and declarative templates, maintained with documentation and tutorials.

   I finished this step