Front-End
Building UI for the browser — foundations, the work of building, keeping it good, and running it in production
Front-End
Front-end engineering is the discipline of building what runs in the browser (and, increasingly, on the device): the layer users actually touch. It is its own stack — build tooling, component architecture, performance budgets, network behavior, accessibility, monitoring — separate from anything that runs on a server.
The material is organized by the questions you ask in practice:
- What do I need to know before I can build anything? — foundations
- How do I actually build the UI? — building UI
- How do I keep what I ship good? — quality
- How do I run it after it ships? — operations
Topics
Foundations
The non-negotiable groundwork — tooling, structure, and what the browser is actually doing.
- Engineering — Build tools, package management, monorepos, CI/CD for frontend.
- Architecture — Component design, state management, patterns, micro-frontends.
- Browser & Network — Browser internals, HTTP, security, storage — what is happening below your framework.
Building UI
Day-to-day work — laying things out, talking to APIs, using framework features.
- Responsive & Adaptive UI — Breakpoints, layout primitives, cross-platform patterns.
- Frameworks — Framework-specific engineering guides — Flutter, React Native, cross-platform.
- API Integration — REST, GraphQL, auth, error handling, caching, optimistic updates.
- Advanced Features — Web Components, Proxy, Observers, Workers, and advanced native APIs.
Quality
Making sure what you ship is fast, correct, and usable by everyone.
- Testing — Test strategy, unit, component, E2E, mobile testing.
- Performance — Loading, rendering, code optimization, Core Web Vitals.
- Accessibility — WCAG standards, ARIA, keyboard navigation, testing.
- Discoverability — SEO foundations plus emerging trends: AI-driven search, AEO, and GEO.
Operations
Knowing what your front-end is doing in real users' browsers, and diagnosing it when it misbehaves.
- Monitoring — Error tracking, RUM, observability tools.
- Troubleshooting — Common problems diagnosis and solutions.
Scope and Boundaries
| Concern | Lives here | Lives elsewhere |
|---|---|---|
| Build tools, bundlers, package managers, monorepo setup | ✓ | — |
| Component architecture, state management, micro-frontends | ✓ | — |
| Browser internals, HTTP, storage, web security | ✓ | — |
| Responsive layout, cross-platform UI, framework engineering | ✓ | — |
| API integration, frontend caching, optimistic updates | ✓ | — |
| Frontend testing strategy and tools | ✓ | — |
| Frontend performance, Core Web Vitals, accessibility | ✓ | — |
| Discoverability — SEO foundations, AEO, GEO, AI-driven search | ✓ | — |
| RUM, error tracking, frontend troubleshooting | ✓ | — |
| Server-side application code, request handling, business logic | — | software-development/back-end |
| API gateways, edge functions, static-site hosting infrastructure | — | software-development/infrastructure |
| Test pipeline mechanics (sharding, flake triage, CI shape) | — | software-development/testing/automation |
| Code review, debugging, refactoring discipline | — | software-development/code-craft |
| Architectural patterns (DDD, event-driven, CQRS) | — | software-development/architecture |
| Relational database design, queries, indexing, transactions | — | software-development/database |