Frontend & JavaScript Fundamentals

A five-phase frontend roadmap for beginners: HTML and CSS layout, core JavaScript, Git and npm, React with Vite or a framework, then TypeScript, with a project per phase.

Semantic block elements, the accessibility tree, and how link and script tags affect rendering, with async, defer and module compared and a semantic page boilerplate.

Learn how CSS specificity works, why nested selectors cause style fights, and how BEM's block, element and modifier classes keep a stylesheet flat and predictable.

Learn how JavaScript stores primitives and objects, why shared object references cause bugs, and how to write a function that copes with messy input safely.

Learn how JavaScript decides which variables a function can see, how closures keep them alive, and how to use that for private state, factories and caching.

Build a small to-do list in plain JavaScript: cache elements, batch inserts, use one delegated listener, link DOM to state with data attributes, and avoid XSS.

See what the class keyword does underneath: constructor functions, the prototype chain, extends rebuilt by hand, and why it explains lost this, polyfills and shared methods.

Use private class fields, then the Module, Singleton and Observer patterns, in runnable JavaScript, and combine them into a small bot controller for an automation project.

The browser APIs underneath every framework: the DOM and BOM, fetch with AbortController, cookies vs Web Storage vs IndexedDB, microtasks, and Intersection Observer.

See how the call stack, task queue and microtask queue decide the order your JavaScript runs, why setTimeout(fn, 0) waits, and how to keep Node.js responsive.

Learn JavaScript Promises by building a multi-city weather dashboard: fetch chains, error handling, Promise.all, Promise.allSettled and timeouts that really cancel.

Refactor nested promise chains into flat async/await code, run independent work in parallel with Promise.all, and page through an API with an async generator.

How V8 turns your JavaScript into machine code: parsing, Ignition bytecode, the Sparkplug, Maglev and TurboFan tiers, hidden classes, inline caches and deoptimization.

Why the browser blocks your cross-origin fetch, how preflight requests work, how to configure CORS in Express without opening a hole, and what else your API needs.

Build the same dashboard data layer twice, once with REST and once with GraphQL, in TypeScript, and compare round trips, caching, error handling and typing.

Where should a single page app keep its JWT? Compare localStorage, memory and HttpOnly cookies, then build a refresh flow with Express cookies and Axios interceptors.

See what TypeScript catches before your code runs: convert a fragile JavaScript function, handle optional data, avoid the any trap, and add TypeScript to a project.

Start a React project the way react.dev recommends, see what JSX compiles to, and build a reusable card component with props, plus the three JSX rules.

Build the same React counter as a class and as a function to see how props and state differ, then avoid stale closures, lost object fields and slow initial state.

Build a working useForm custom hook in React: grouped state, a generic change handler, validation derived during render and a submit handler that awaits your callback.

When React Context is enough and when Redux Toolkit earns its place, with a comparison table and a tested dark mode switcher built on Context and a custom hook.

Let the URL drive your React app: keep filters in search params, load data with route loaders, share layout data through Outlet context and show pending UI.

Set up Jest and React Testing Library, then test a newsletter form the way a user uses it: typing, clicking, a loading state, success and a failed request.

Go beyond console.log in Chrome DevTools: live expressions, logpoints, conditional and XHR breakpoints, network throttling and blocking, local overrides and snippets.

Set up Prettier, ESLint flat config with TypeScript and eslint-config-prettier, then make Husky and lint-staged check every commit. Tested with ESLint 10.

Set up webpack 5 and Babel 8 from an empty folder: loaders, plugins, an HTML page, the dev server, CSS and images, and chunk splitting, with a config you can copy.

See why server-side rendering paints content sooner than a client-rendered app, then build a streaming Next.js page with Server Components and Suspense.

Compare three ways to ship a frontend: a managed platform, S3 with CloudFront, and a Docker image with Nginx. Each comes with config, caching rules and a CI step.

Learn what micro frontends are, compare build-time, server-side and run-time integration, and wire two apps together with webpack Module Federation and custom events.

A practical roadmap for frontend developers: what to learn and how your job changes at each step from junior to mid-level, senior and tech lead.