Frontend Engineer

Semantic HTML5 is the standard markup language for structuring web content using elements that convey meaning, such as header, nav, main, article, and button. It provides browsers and assistive technologies with structural context, enabling correct rendering, accessibility, and search engine indexing. Proper element choice is the foundation of every well-built web page.

Why it matters · Choosing the right element (header, nav, main, article, button, label) is what makes a page accessible and crawlable, and interviewers assume you do it by reflex.

Flexbox is a one-dimensional CSS layout model for aligning and distributing items along a row or column. CSS Grid is a two-dimensional layout system for placing elements into rows and columns simultaneously. Custom properties (CSS variables) allow reusable values to be defined once and referenced throughout a stylesheet, enabling consistent theming and design tokens.

Why it matters · Layout, spacing, and theming are everyday work, and Flexbox plus Grid have fully replaced the old float and positioning workarounds.

Responsive design is an approach to building web interfaces that adapt their layout and appearance to different screen sizes and viewports. A mobile-first strategy writes base styles for small screens, then progressively enhances them with media queries and container queries for larger ones. Fluid units such as percentages, em, and viewport units are central tools in this approach.

Why it matters · Most visits come from phones, so fluid units, media queries, and container queries are expected of any new hire.

Web accessibility refers to the practice of building web content and interfaces that are usable by people with disabilities, including those relying on screen readers, keyboard navigation, or other assistive technologies. It covers proper use of semantic elements, focus management, color contrast, and text alternatives for non-text content. The WCAG guidelines published by the W3C are the primary reference standard.

Why it matters · Accessibility is now a screening criterion and, in many markets, a legal obligation, so build the habit from your very first page rather than retrofitting it.

JavaScript is the programming language of the web, covering syntax and features added from ES2015 (arrow functions, classes, destructuring, template literals) through the ES2023 specification and beyond (logical assignment, Array.at, Record and Tuple proposals). It runs in browsers natively and on servers via Node.js. Mastery of closures, prototypes, the event loop, and modern syntax is the foundation for all frontend framework work.

Why it matters · Every framework is just JavaScript underneath, and shaky fundamentals are what most often trip up juniors in interviews and on the job.

The Document Object Model (DOM) is the browser's in-memory tree representation of an HTML page, which JavaScript can read and mutate to update the UI. Events are signals fired by user interactions and browser lifecycle changes, propagated through the tree via capture and bubble phases. The Fetch API is the browser-native interface for making HTTP requests and consuming responses as text, JSON, or binary data.

Why it matters · Understanding how the page renders, how events propagate, and how HTTP requests work keeps you productive even when a framework hides those details.

Promises are JavaScript objects representing the eventual completion or failure of an asynchronous operation, with chainable .then and .catch methods. The async/await syntax, introduced in ES2017, allows asynchronous code to be written in a sequential style while still being non-blocking. These mechanisms underpin network requests, timers, file I/O in Node.js, and any operation that resolves after a delay.

Why it matters · Real data fetching, loading indicators, and error handling all rest on a clear mental model of how asynchronous code runs.

ES modules are the standard JavaScript system for splitting code into files using import and export statements, resolved statically by runtimes and bundlers. Package management with npm (or pnpm/Yarn) handles installing, versioning, and removing third-party dependencies recorded in package.json, with lockfiles ensuring reproducible installs. npm scripts provide a simple interface for running build, test, and dev server commands.

Why it matters · Imports, dependencies, lockfiles, and npm scripts are the plumbing of every modern project, so you need to be comfortable with them early.

Git is a distributed version control system for tracking changes in source code, supporting branching, merging, and a full history of every commit. GitHub is a hosting platform built on top of Git that adds pull requests, code review, issue tracking, and CI integration. Together they form the primary collaboration workflow for nearly all software teams.

Why it matters · Work happens through version control and pull-request review, so branching, committing, and opening PRs are baseline expectations.

Vite is a frontend build tool and development server that uses native ES modules in the browser during development for near-instant startup and hot module replacement. For production it bundles code with Rollup, applying tree-shaking, code splitting, and asset optimization. As of 2026 it is the standard scaffolding choice for new React, Vue, Svelte, and Solid projects.

Why it matters · Vite is the go-to for new React, Vue, and Svelte projects in 2026 with near-instant hot reload; Create React App has been retired, and hand-rolled Webpack config is now mainly legacy knowledge.

ESLint is a static analysis tool for JavaScript and TypeScript that identifies problematic patterns, enforces coding conventions, and can auto-fix many violations. Prettier is an opinionated code formatter that rewrites source files to a consistent style, removing debates over whitespace, semicolons, and line length. The two tools are typically run together in editors and as pre-commit hooks.

Why it matters · Automated linting and formatting run on nearly every codebase, and you will be working inside that setup from your first contribution.

Chrome DevTools is a set of web authoring and debugging tools built directly into the Google Chrome browser. Its panels cover DOM and CSS inspection, network request monitoring, JavaScript debugging with breakpoints, performance profiling, memory analysis, and Lighthouse audits. It is the primary in-browser tool for diagnosing layout issues, slow rendering, and failing network calls.

Why it matters · Inspecting the DOM, watching network traffic, and profiling performance in the browser is a daily skill that separates methodical debugging from guesswork.

React is a JavaScript library for building user interfaces through composable, reusable components that accept props as inputs and manage local state. Hooks such as useState and useEffect allow function components to handle state, side effects, context, and performance optimization without class syntax. The rules of hooks (only call at the top level, only call from React functions) govern their correct use.

Why it matters · React leads the field by job volume, and components, useState/useEffect, and the rules of hooks are the heart of the role.

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript and runs anywhere JavaScript does. It adds optional type annotations, interfaces, generics, and enums, which catch type errors at compile time rather than at runtime. In a frontend context it is most commonly used to type component props, API response shapes, and state management stores.

Why it matters · Roughly three-quarters of frontend roles now ask for TypeScript and most React interviews assume it, so merely being 'familiar' reads as junior.

React Router is a library that enables declarative, component-based routing in React applications, mapping URL paths to rendered components without full-page reloads. It supports nested routes, dynamic segments, loaders, actions, and programmatic navigation. Version 6 and the newer framework mode (v7) are the current standards for single-page and hybrid React apps outside of Next.js.

Why it matters · Multi-view single-page apps need declarative routing, and React Router is the common choice outside Next.js as well as a frequent interview topic.

Form handling in React involves managing controlled inputs whose values are tied to component state, and orchestrating submission, error display, and reset behavior. Libraries such as React Hook Form reduce boilerplate by registering inputs via refs rather than state. Schema validators such as Zod or Yup define the expected shape and constraints of form data, producing typed, structured error messages.

Why it matters · Almost every product takes user input, and pairing controlled inputs with a schema validator is the approach teams reach for today.

Tailwind CSS is a utility-first CSS framework that provides a large set of single-purpose class names (for spacing, color, typography, layout, and more) to be composed directly in HTML or JSX. Instead of writing custom stylesheets, developers apply predefined utilities and extend the design system via a configuration file. Tailwind v4 adopts a CSS-native configuration approach using cascade layers and custom properties.

Why it matters · Tailwind shows up across a large share of modern React job posts and fits naturally with a component-driven UI.

TanStack Query (formerly React Query) is a library for fetching, caching, synchronizing, and updating server-derived data in React applications. It handles loading and error states, background refetching, cache invalidation, pagination, and optimistic updates through a small set of hooks (useQuery, useMutation, useInfiniteQuery). It treats server state as separate from client state and manages it with its own lifecycle.

Why it matters · For fetching, caching, loading and error handling, and refetching, TanStack Query is the standard pick for server-derived data.

Zustand is a small, unopinionated state management library for React that stores state outside the component tree in a plain JavaScript object and triggers re-renders only in components that subscribe to changed slices. React Context is a built-in mechanism for passing values through a component tree without prop drilling, best suited for low-frequency updates such as themes or authenticated user data. The two are often combined: Context for static or rarely changing values, Zustand for dynamic shared state.

Why it matters · For shared client-only state, Zustand is a lightweight default; reaching for Redux everywhere is out of fashion, and Redux Toolkit is reserved for larger apps.

REST APIs are HTTP services that expose resources at URL endpoints using standard methods (GET, POST, PUT, DELETE) and return JSON responses, with conventions for status codes, authentication headers, and pagination. GraphQL is a query language and runtime for APIs that lets clients request exactly the fields they need in a single request, reducing over-fetching. Consuming either type involves handling auth tokens, error status codes, loading states, and type-safe response parsing.

Why it matters · Talking to backends, auth headers, status codes, pagination, is core daily work, and a working grasp of GraphQL is an increasingly common plus.

Redux Toolkit is the official, opinionated toolset for Redux state management, providing utilities such as createSlice, createAsyncThunk, and configureStore that reduce boilerplate compared to hand-written Redux. It enforces immutable state updates via Immer internally, and integrates with RTK Query for data fetching. It is best suited to large applications with complex, shared client state that benefits from strict unidirectional data flow.

Why it matters · Worth learning only for large, intricate apps or teams already standardized on it; pick it up after Zustand and Query, and skip hand-written legacy Redux.

Vitest is a fast unit test runner built on Vite, compatible with the Jest API, that runs tests natively against ES modules with minimal configuration. React Testing Library is a companion library that renders components into a real DOM environment and provides queries (getByRole, getByText, findByLabelText) that reflect how users interact with the interface rather than implementation details. Together they support testing components, hooks, and utility functions in isolation.

Why it matters · Teams expect tests, Vitest is the natural fit for Vite projects, and React Testing Library is the standard way to test components the way users actually use them.

Playwright is a browser automation library developed by Microsoft that controls Chromium, Firefox, and WebKit programmatically to run end-to-end tests against a real or headless browser. It supports async/await, auto-waiting for elements, network interception, multi-tab scenarios, and first-class TypeScript. As of 2026 it is the dominant E2E testing tool, with a growing share of teams migrating to it from Cypress.

Why it matters · Playwright has overtaken Cypress as the default E2E tool, steadier runs and first-class TypeScript, and a handful of critical-path E2E tests in CI is now common practice.

Core Web Vitals are a set of Google-defined metrics for measuring real-world user experience: Largest Contentful Paint (LCP) for loading speed, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. Improving these metrics involves techniques such as code splitting, lazy loading images and components, preloading critical resources, and minimizing render-blocking assets. Lighthouse, built into Chrome DevTools, audits these metrics and provides actionable recommendations.

Why it matters · Speed increasingly sets candidates apart, so you should know LCP, INP, and CLS, plus code-splitting, lazy loading, and auditing with Lighthouse.

ARIA (Accessible Rich Internet Applications) is a W3C specification that adds semantic attributes to HTML elements, enabling assistive technologies to interpret custom UI patterns such as modals, tabs, comboboxes, and live regions. Applied accessibility involves testing with screen readers (NVDA, JAWS, VoiceOver), verifying focus management, and following established ARIA authoring practices to avoid common misuse of roles and properties. These practices make interactive components perceivable and operable for all users.

Why it matters · Going beyond the basics to test with a screen reader and apply established ARIA patterns is what makes your components ready for production and compliance.

Next.js is a React framework from Vercel that adds file-system routing, server-side rendering, static generation, and API routes to a React project. The App Router, introduced in Next.js 13 and the default since v14, organizes routes in a nested directory structure and enables React Server Components, which render on the server and send no JavaScript to the client by default. Server Components allow data fetching at the component level and reduce client bundle size significantly.

Why it matters · A large share of product teams have adopted the App Router, and engineers with real Server Components experience are in short supply relative to demand, making this a strong differentiator.

Vercel and Netlify are cloud platforms for deploying frontend and full-stack web applications, offering git-triggered continuous deployment, edge CDN distribution, preview deployments per pull request, and serverless function hosting. Vercel is the primary hosting target for Next.js, with native support for Server Components, edge middleware, and image optimization. Both platforms handle TLS, custom domains, and environment variable management through their dashboards or CLI tools.

Why it matters · Employers want evidence you can ship, and one live deployed URL carries more weight in a portfolio than any number of tutorials.

GitHub Actions is a CI/CD platform integrated directly into GitHub repositories, where workflows defined in YAML files run jobs automatically on pull requests, pushes, or other repository events. A basic frontend CI workflow typically installs dependencies, runs ESLint, executes the test suite, and verifies the production build completes without errors. Actions are composed of reusable steps drawn from the GitHub Marketplace or defined inline with run commands.

Why it matters · Running lint, tests, and a build on every pull request is routine, and knowing how a basic pipeline fits together signals operational maturity.

AI-assisted development refers to the use of large language model tools (such as GitHub Copilot, Cursor, or Claude Code) to generate, refactor, and explain code within an editor or terminal workflow. Streaming UIs are interfaces that display server-generated content incrementally as it arrives over a persistent HTTP or WebSocket connection, commonly implemented with the Streams API, server-sent events, or AI SDK helpers. Building these interfaces requires handling partial text, updating state token by token, and managing the connection lifecycle.

Why it matters · Using AI coding tools effectively is now an assumed baseline, and building token-by-token chat and streaming interfaces has become a frequent request at product companies.

A portfolio of deployed projects is a collection of live, publicly accessible web applications that demonstrate applied skills across different problem domains. Strong portfolios typically include a mix of project types, such as a data-driven dashboard, a full-stack CRUD application, and a project consuming a third-party API, each with source code hosted on GitHub. Deployed projects provide concrete evidence of the ability to build, ship, and maintain software end to end.

Why it matters · Hiring follows demonstrated work over certificates, and three or four real, deployed apps, say a dashboard, a full-stack CRUD app, and one that pulls from an external API, are your strongest signal.

Technical interview preparation for frontend roles covers JavaScript fundamentals (closures, the event loop, prototypal inheritance), React patterns (lifting state, custom hooks, memoization with useMemo and useCallback), and a working knowledge of core data structures and algorithms (arrays, hash maps, trees, and standard traversal and sorting algorithms). Practice platforms such as LeetCode and Codewars provide structured problem sets for algorithmic fluency. Reviewing common React design patterns and building small projects from scratch solidifies the practical side.

Why it matters · Interviews probe JavaScript fundamentals, React patterns, and lightweight data structures and algorithms, so deliberate practice bridges the gap between building things and getting an offer.