Frontend Interview Topics to Study

Frontend Interview Topics to Study

Here is the complete list of topics to study for a frontend interview at top companies.

JavaScript

• Execution context, hoisting, TDZ.
• Closures, scope chain, lexical environment.
• The event loop, microtasks vs macrotasks.
• this keyword, call/apply/bind.
• Promises, async/await, Promise.all/allSettled/race/any.
• Prototypes, prototypal inheritance.
• Array methods: map, filter, reduce, find, some, every.
• Debounce, throttle, currying, memoize.
• Event bubbling, delegation, capturing.
• CORS, async/defer script loading.
• Polyfills (map, filter, reduce, bind, Promise.all).

React

• Hooks: useState, useEffect, useMemo, useCallback, useRef, useContext, useReducer.
• Reconciliation, virtual DOM, keys.
• State management: Context, Redux, Zustand.
• Performance: React.memo, lazy loading, code splitting, virtualization.
• Custom hooks.
• Error boundaries.
• Portals, fragments.
• React 18: concurrent rendering, suspense, transitions.

HTML and CSS

• Semantic HTML, accessibility (ARIA).
• CSS layout: flexbox, grid, positioning.
• Responsive design, media queries.
• CSS selectors, specificity.
• Animations, transitions.
• CSS variables, calc.
• BEM methodology.

Machine Coding

• OTP input, progress bar, autocomplete.
• Pagination, tab form, file explorer.
• Food ordering app, image carousel, accordion, modal.

Frontend System Design

• Rendering: CSR, SSR, SSG, ISR.
• State management at scale.
• API design: REST, GraphQL, polling, WebSockets.
• Performance: Core Web Vitals, caching, CDN, lazy loading.
• Accessibility, i18n, error boundaries.
• Component design, design systems.
• Microfrontends.

DSA

• Arrays, strings, hashing, two pointers, sliding window.
• Linked lists, stacks, queues.
• Trees, BST, graphs, BFS, DFS.
• Dynamic programming (basics).
• Sorting, searching.

Performance

• Core Web Vitals (LCP, FID, CLS).
• Bundle size, code splitting, tree shaking.
• Caching (HTTP, service worker, CDN).
• Image optimization.
• Lazy loading, prefetch, preload.

Browser and Network

• Critical rendering path.
• Reflow and repaint.
• HTTP/2, HTTP/3, HTTPS.
• CORS, CSP, cookies, localStorage, sessionStorage, IndexedDB.
• Service workers, PWAs.

The Takeaway

Study these topics: JavaScript (closures, event loop, this, promises, prototypes), React (hooks, reconciliation, state management), HTML/CSS (layout, accessibility, responsive), machine coding (build UI components), frontend system design (rendering, APIs, performance), DSA, performance (Core Web Vitals), and browser/network (CORS, caching, service workers).