JavaScript Study Roadmap

Purpose-built path for modern JavaScript used in browsers and Node.js. Start here before TypeScript, Angular, or React.

1. Core focus areas

• Language fundamentals: values/types, scope/closures, functions, objects, prototypes, classes.
• Runtime model: event loop, tasks vs microtasks, timers, promises, async/await.
• Modules & packaging: ESM, CommonJS interop, bundlers (Vite, Webpack, esbuild), package management (npm, pnpm).
• Browser platform: DOM, events, Fetch, Web Storage, performance APIs, accessibility basics.
• Testing & quality: linting (ESLint), formatting (Prettier), unit/integration testing patterns.

2. Fundamentals

• JavaScript Fundamentals

3. Performance (Advanced)

• JavaScript Performance Optimization

4. Suggested sequence

1. Refresh syntax & runtime (closures, async, prototypes).
2. Master DOM and browser APIs for interactivity and data fetching.
3. Learn module systems and build tooling used by downstream frameworks.
4. Add testing and performance practices.

5. Architecture extensions (Advanced)

• Micro frontends: Review shared composition patterns in notes/shared/micro-frontends.md and focus on dynamic imports and module boundaries.
• Scalable and responsive design: Review layout and token guidance in notes/shared/scalable-responsive-design.md and practice CSS grid and container queries.

6. Practice alignment

For every note added under notes/javascript/, create matching drills in practice/javascript/ with scenarios and short answers.