Frontend Interview Course

Frontend interviews test JavaScript, HTML, CSS, React, browser behavior, performance, accessibility, and security. Candidates explain concepts, write small code snippets, and solve UI problems. A strong study path starts with JavaScript fundamentals such as closures, promises, and array methods, then HTML semantics and CSS layout, then React components and hooks, and finally browser events, performance, and security. You should be able to explain how the event loop works, why keys matter in React lists, and how to improve Core Web Vitals. Interviewers value clear reasoning and practical tradeoffs over memorized answers. This course organizes these topics into five lessons and links to a practice bank with 60 original questions to help you review before interviews.

JavaScript interviews often start with language fundamentals. A closure is a function that keeps access to its outer scope, which enables private data and functional patterns. Hoisting moves declarations to the top of a scope, but let and const are not initialized before their declaration. Strict equality === avoids type coercion, while == can surprise. Promises represent asynchronous results, and async/await makes them easier to read. The event loop processes tasks and microtasks so promise callbacks run at the right time. Array methods such as map, filter, and reduce are central to daily work. A pure function returns the same output for the same input and has no side effects. Immutability means updating data by creating new values instead of mutating existing ones. Practice explaining these concepts with short code examples.

Semantic HTML uses meaningful elements such as header, nav, main, article, and footer to improve accessibility and SEO. CSS specificity decides which rule wins when selectors conflict. The box model order is content, padding, border, and margin. Flexbox is best for one-dimensional layouts, while CSS Grid handles two-dimensional rows and columns. rem is relative to the root font size, em to the parent, vw to viewport width, and vh to viewport height. Media queries apply responsive styles based on conditions such as screen width. position: fixed places an element relative to the viewport, and box-sizing: border-box includes padding and border in width. Pseudo-classes such as :hover select element states. Practice building layouts from scratch and explaining why you chose flexbox or grid.

React interviews focus on components, props, state, hooks, and rendering. Components are reusable UI pieces, props are data passed from parents, and state is data managed inside a component. useState manages values, useEffect runs side effects, and useMemo memoizes computations. React uses a virtual DOM and reconciliation to update the real DOM efficiently, and list items need keys for stable identity. Controlled inputs keep form values in state. Browser questions cover the DOM, element selection, events, bubbling, the event loop, microtasks, requestAnimationFrame, and cookies. Event delegation attaches one listener to a parent to handle many children. stopPropagation stops bubbling, while preventDefault stops the default action. Practice tracing re-renders and explaining when effects run.

Performance questions ask how to make pages faster. Debouncing delays a function until activity pauses, throttling limits how often it runs, and lazy loading defers resources until needed. Core Web Vitals include LCP for loading, INP for interactivity, and CLS for visual stability. Reducing bundle size, caching, and avoiding layout shifts improve these metrics. Accessibility questions cover semantic HTML, ARIA attributes, keyboard support, and contrast. Security questions cover XSS, Content Security Policy, and CORS. Interviewers want structured answers: define the problem, name the metrics, identify likely causes, and propose prioritized fixes. Practice explaining how you would diagnose a slow page, why a button is inaccessible, and how to prevent script injection.