Frontend Development Tutorials

What a frontend engineer actually does, and what you need to learn to become one — the browser, HTML and CSS, JavaScript and TypeScript, a component framework, state, talking to a backend, routing and forms, security, performance and accessibility, testing, and shipping it. A roadmap that names the order and then points you at the deeper tracks. Every example is real React 19 and TypeScript from a working pizza ordering app.

• Frontend Dev – Build Tooling and Deployment
  What happens between your source and the files a browser downloads, and how those files get somewhere real. Bundling, the dev server, environment variables and why they are not secret, static hosting on a CDN, cache headers and content hashing, the SPA fallback that 404s every deep link if you forget it, and a CI pipeline worth having.
• Frontend Dev – Testing
  How you change code you did not write without being afraid. What is worth testing in a UI and what is not, testing what the user sees rather than what the component holds, querying by role so a test breaks when the app breaks and not when a class name changes, and where end-to-end tests earn their keep.
• Frontend Dev – Performance and Accessibility
  Two subjects in one post because they are the same subject: whether the person on the other end can actually use this. Bundle size and code splitting, the render cost you can measure, images, Core Web Vitals — then semantics, labels, focus order, keyboard operation and contrast, and the four checks that catch most of it.
• Frontend Dev – Authentication and Security in the Browser
  Everything the browser runs is public, so a frontend guard is a courtesy and never a control. Login flows, where to put a token and the real trade between localStorage and an HttpOnly cookie, restoring a session on refresh, XSS and CSRF in the terms that actually bite, and what a Content-Security-Policy buys you.
• Frontend Dev – Routing, Forms and Validation
  The URL is state, and forms are where most of your users actually touch the app. Routes, nested layouts, guarded routes and the redirect-back pattern; then controlled inputs, what the browser validates for free, where validation has to be repeated on the server, and how to show a field error that came back from an API.
• Frontend Dev – Talking to the Backend
  One request has four outcomes and beginners handle one of them. Building a single API layer instead of scattering fetch calls, turning an error response into something a component can render, loading and error and empty states, cancelling a request that no longer matters, and why CORS fails the way it does.
• Frontend Dev – State Management
  Where a value should live, which is the question most frontend bugs are really about. Local state, lifting up, context, and a store — and the honest criteria for moving between them. Includes a real app that uses context on one half and Redux on the other, and the documented reason the line runs where it does.
• Frontend Dev – What to Learn in a Framework
  The small part of a big framework you use every day. Components and props, the render model, effects and when you do not need one, composition over configuration, and the project-level concerns every framework makes you answer — structure, dependencies, and per-environment configuration. React here, but the checklist is portable.
• Frontend Dev – The JavaScript and TypeScript You Actually Need
  The subset of the language that matters in a component app, which is not the subset a beginner course teaches. Immutable updates, the async model that makes a spinner possible, modules, and the handful of TypeScript ideas that catch real bugs — typing the API response, discriminated unions for loading state, and why `any` is a loss.
• Frontend Dev – The HTML, CSS and Browser You Actually Need
  The platform underneath every framework. What the browser does with your page — DOM, CSSOM, layout, paint — why semantic HTML decides what a screen reader and Google can see, and the small part of CSS that carries most real layouts: the box model, flexbox, grid, the cascade and custom properties.
• Frontend Dev – What a Frontend Engineer Actually Does
  The job, described by what lands in your queue rather than by a job posting. What you own — the interface, the state behind it, what happens on a slow phone, and whether somebody using a keyboard can get through it — where the line sits between you and design, backend and QA, and what a real ticket looks like from mockup to deploy.
• Frontend Dev – Get Started
  Start here. What a frontend engineer builds, the twelve things you need to learn and the order to learn them in, and the exact stack every example in this track uses — React 19, TypeScript and Vite. Also: how this track fits with the deeper ones on the site, so you know when to stop reading here and go read those instead.