{"id":49363584,"url":"https://github.com/controversial-fact877/frontend-master-prep-series","last_synced_at":"2026-04-27T18:03:22.407Z","repository":{"id":326742784,"uuid":"1104741278","full_name":"Controversial-fact877/Frontend-Master-Prep-Series","owner":"Controversial-fact877","description":"📚 Prepare for frontend interviews with structured Q\u0026A, coding problems, and interactive flashcards tailored for mid to senior-level developers.","archived":false,"fork":false,"pushed_at":"2026-04-26T05:24:34.000Z","size":7552,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-26T07:21:32.929Z","etag":null,"topics":["accessibility","css","frontend","html","javascript","npm","performance-optimization","react","responsive-design","state-management","testing","tutorial","user-experience","web-development","webpack"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Controversial-fact877.png","metadata":{"files":{"readme":"README-OLD.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-26T16:14:04.000Z","updated_at":"2026-04-26T05:24:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Controversial-fact877/Frontend-Master-Prep-Series","commit_stats":null,"previous_names":["controversial-fact877/frontend-master-prep-series"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Controversial-fact877/Frontend-Master-Prep-Series","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Controversial-fact877%2FFrontend-Master-Prep-Series","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Controversial-fact877%2FFrontend-Master-Prep-Series/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Controversial-fact877%2FFrontend-Master-Prep-Series/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Controversial-fact877%2FFrontend-Master-Prep-Series/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Controversial-fact877","download_url":"https://codeload.github.com/Controversial-fact877/Frontend-Master-Prep-Series/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Controversial-fact877%2FFrontend-Master-Prep-Series/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32348058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","css","frontend","html","javascript","npm","performance-optimization","react","responsive-design","state-management","testing","tutorial","user-experience","web-development","webpack"],"created_at":"2026-04-27T18:03:08.136Z","updated_at":"2026-04-27T18:03:22.389Z","avatar_url":"https://github.com/Controversial-fact877.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Developer Interview Prep — 600+ Advanced Questions\n\nComprehensive preparation guide covering **JavaScript**, **React**, **Next.js**, **HTML**, **CSS**, **Accessibility**, **Performance**, and **Frontend Architecture** — designed for interviews up to 6 years of experience.\n\n---\n\n## 🧠 Stage 1 — JavaScript (Core, Advanced, ES6+, Async, Engine)\n\n*(Includes: event loop, call stack, callback queue, micro/macro task queues, closures, hoisting, shadowing, prototypes, promises, async/await, modules, memory, performance, etc.)*\n\n### 🧩 **Core Concepts**\n\n1. What are primitive and non-primitive data types in JS?\n2. Difference between `var`, `let`, and `const`.\n3. What is the difference between declaration, initialization, and assignment?\n4. What is hoisting in JavaScript?\n5. What is the Temporal Dead Zone (TDZ)?\n6. What are lexical scope and block scope?\n7. What is global scope pollution?\n8. What is variable shadowing and illegal shadowing?\n9. What is scope chaining?\n10. How does JavaScript resolve variable lookup?\n11. What is closure and how does it work?\n12. Real-world example of closure.\n13. What is function currying and why use it?\n14. What are higher-order functions?\n15. What is a pure function?\n16. What is referential transparency?\n17. What is memoization? Implement custom memoize().\n18. What is immutability? How to enforce it?\n19. What are side effects in JS functions?\n20. What is recursion and tail call optimization?\n\n---\n\n### ⚙️ **Execution Context \u0026 Event Loop**\n\n21. What is the JS execution context?\n22. Explain creation and execution phases.\n23. What is the Call Stack?\n24. What is the Execution Stack?\n25. What is the difference between stack and heap memory?\n26. How does JS handle function invocation?\n27. What are the components of the execution context?\n28. What are lexical environments?\n29. How does variable environment differ from lexical environment?\n30. What is a scope chain and how is it created?\n31. What is the event loop and how does it work?\n32. What are macro tasks and micro tasks?\n33. What is the callback queue?\n34. What is the microtask queue?\n35. Order of execution between setTimeout, promises, async/await.\n36. What is a rendering phase in the browser event loop?\n37. What happens when a Promise resolves inside a setTimeout?\n38. Explain the concept of message queue.\n39. What is process.nextTick in Node.js?\n40. What are requestAnimationFrame callbacks?\n\n---\n\n### ⏱ **Asynchronous JavaScript**\n\n41. What is synchronous vs asynchronous code?\n42. How does JS achieve async behavior on a single thread?\n43. What are callbacks?\n44. What is callback hell?\n45. How do Promises solve callback hell?\n46. What are the 3 states of a Promise?\n47. What is the event loop’s role in promises?\n48. What is `Promise.all()`?\n49. Difference between `Promise.all`, `Promise.race`, `Promise.any`, `Promise.allSettled`.\n50. What is a rejected Promise?\n51. What is async/await syntax sugar for?\n52. How does async/await work under the hood?\n53. What happens when you forget `await`?\n54. What is top-level await?\n55. What are race conditions in JS async flows?\n56. How do you cancel promises?\n57. What are Observables (RxJS)?\n58. What’s the difference between async iterators and generators?\n59. How to chain async functions effectively?\n60. Difference between microtasks and macrotasks in async/await?\n\n---\n\n### 🔁 **Functions, Binding \u0026 Context**\n\n61. What is `this` keyword in JavaScript?\n62. How is `this` determined in different contexts?\n63. Difference between implicit, explicit, and default binding?\n64. What is the value of `this` inside arrow functions?\n65. What are call, apply, and bind methods?\n66. Implement a custom `.bind()` polyfill.\n67. What is the difference between normal function and arrow function scope?\n68. What happens if you use `this` in a callback?\n69. How does function borrowing work?\n70. What is function composition?\n71. What is partial application?\n72. How does `new` operator work internally?\n73. What happens when you return an object from a constructor?\n74. What is function hoisting?\n75. Difference between function declaration and function expression.\n76. What is Immediately Invoked Function Expression (IIFE)?\n77. Why is IIFE useful for modularity?\n78. How to create private variables in JS?\n79. What is a closure trap (loop + var)?\n80. What is a higher-order function vs callback function?\n\n---\n\n### 🧱 **Objects, Prototypes \u0026 Classes**\n\n81. How does prototypal inheritance work?\n82. What is the prototype chain?\n83. How does `Object.create()` work?\n84. Difference between classical and prototypal inheritance.\n85. How does `instanceof` check inheritance?\n86. What is constructor property?\n87. What is `Object.getPrototypeOf()`?\n88. Difference between `__proto__` and `prototype`.\n89. How to achieve multiple inheritance?\n90. What are static methods in classes?\n91. What is a mixin?\n92. What are getters and setters?\n93. What are Symbols and when to use them?\n94. What are Maps and WeakMaps?\n95. What is the difference between WeakMap and Map?\n96. What is the difference between shallow and deep copy?\n97. How to deep clone an object safely?\n98. What is structuredClone()?\n99. What is JSON.parse(JSON.stringify()) limitation?\n100. How to merge two objects immutably?\n\n---\n\n### 💾 **Memory, Engine, and Optimization**\n\n101. How does JavaScript manage memory?\n102. What is garbage collection?\n103. What are reference-counting and mark-and-sweep algorithms?\n104. What is memory leak?\n105. What causes memory leaks in closures?\n106. What is heap and stack difference?\n107. What is inline caching?\n108. What is hidden class optimization (V8)?\n109. What is JIT compilation?\n110. What is de-optimization in V8?\n111. What is event delegation?\n112. What is debouncing? Implement custom debounce().\n113. What is throttling? Implement custom throttle().\n114. How does JS engine optimize loops?\n115. How does garbage collector detect unused references?\n116. What is memory fragmentation?\n117. What is the role of “hidden classes” in V8 optimization?\n118. Why are closures memory-heavy?\n119. How to debug memory leaks in Chrome DevTools?\n120. How to avoid blocking the main thread?\n\n---\n\n### 🔍 **Modules, Imports \u0026 Patterns**\n\n121. Difference between ES6 modules and CommonJS.\n122. What are default and named exports?\n123. What happens when you mix import/export styles?\n124. What is dynamic import()?\n125. How to lazy load modules in JS?\n126. What are module scopes and singletons?\n127. What is the module pattern?\n128. What is revealing module pattern?\n129. How to create a namespace in JS?\n130. What are IIFEs used for in modularity?\n131. What are bundlers like Webpack/Vite doing with imports?\n132. What is tree shaking?\n133. What is sideEffects flag in package.json?\n134. What are circular dependencies and how to resolve them?\n135. What are ESM vs CJS differences in Node.js?\n136. What are top-level awaits used for?\n137. How does static analysis of imports enable tree shaking?\n138. What is dynamic chunking?\n139. How does Next.js perform code splitting using ESM?\n140. What is dead code elimination?\n\n---\n\n### 🧠 **Advanced JS Behavior**\n\n141. What is type coercion?\n142. Difference between `==` and `===`.\n143. How does JavaScript handle NaN?\n144. Why `typeof null` returns object?\n145. What are falsy values?\n146. Difference between `undefined` and `null`.\n147. What is optional chaining (`?.`)?\n148. What is nullish coalescing (`??`)?\n149. What are tagged template literals?\n150. What is destructuring?\n151. What is rest and spread operator difference?\n152. What is default parameter in functions?\n153. What are template literals used for?\n154. What are iterables and iterators?\n155. How does for..of differ from for..in?\n156. What is generator function?\n157. What is yield and next()?\n158. Difference between generator and async function?\n159. What are proxies and reflect APIs?\n160. What are intercept traps in Proxy?\n161. How can Proxy be used for validation?\n162. What is Reflect.construct()?\n163. What is custom iterator protocol?\n164. How does async iterator differ from sync iterator?\n165. What are tagged template literal real-world use cases?\n\n---\n\n### 🧮 **Data Structures, Algorithms \u0026 Performance**\n\n166. How to implement debounce?\n167. How to implement throttle?\n168. How to flatten nested arrays?\n169. How to deep compare two objects?\n170. How to remove duplicates from an array?\n171. How to find unique values using Set()?\n172. How to group items by property?\n173. How to chunk an array?\n174. How to implement reduce manually?\n175. How to polyfill Promise?\n176. How to polyfill bind/call/apply?\n177. How to polyfill map/filter/reduce?\n178. How to polyfill Object.assign()?\n179. How to clone array efficiently?\n180. Difference between Array.slice() and Array.splice().\n181. Difference between forEach() and map().\n182. What is event delegation and bubbling?\n183. What is event capturing vs bubbling phase?\n184. What is stopPropagation vs preventDefault?\n185. What are passive event listeners?\n186. How to improve rendering performance using requestAnimationFrame?\n187. How to defer long-running tasks?\n188. What are web workers?\n189. What are shared workers?\n190. What is offscreenCanvas?\n191. How does IndexedDB differ from localStorage?\n192. What are cookies vs localStorage vs sessionStorage differences?\n193. What is CORS?\n194. What is preflight request?\n195. What is CSP (Content Security Policy)?\n196. What is JSONP and how does it bypass CORS?\n197. What are service workers?\n198. What are push notifications via service workers?\n199. What is main thread blocking?\n200. How to monitor main thread activity in performance tab?\n\n\n---\n\n## ⚛️ Stage 2 — React \u0026 Next.js (Fiber, Reconciliation, Routing, SSR, Hooks, State Management, Performance)\n\n*(Includes: React lifecycle, concurrent rendering, reconciliation, diffing, React Fiber, hooks deep dive, Suspense, error boundaries, parallel routing, Next.js architecture, ISR, middleware, server actions, performance optimization, etc.)*\n\n### ⚛️ **REACT FUNDAMENTALS (Concepts + Rendering)**\n\n1. What is React and why was it created?\n2. What are the main features of React?\n3. What is the Virtual DOM?\n4. How does Virtual DOM differ from Real DOM?\n5. How does React reconcile DOM updates efficiently?\n6. What are React Elements and React Components?\n7. Difference between Functional and Class Components.\n8. What is JSX and how is it transformed under the hood?\n9. Why is JSX not mandatory in React?\n10. What happens when JSX is compiled?\n11. Why do we use keys in React lists?\n12. What happens if keys are not unique?\n13. What are fragments in React and why use them?\n14. What are controlled vs uncontrolled components?\n15. What is the difference between props and state?\n16. What are prop drilling and state lifting?\n17. How to avoid prop drilling?\n18. What is React’s render phase vs commit phase?\n19. What triggers a re-render in React?\n20. How does React decide whether to re-render a component?\n\n---\n\n### ⚙️ **REACT COMPONENT LIFECYCLE (CLASS + FUNCTIONAL)**\n\n21. What are lifecycle methods in class components?\n22. Difference between `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`.\n23. How do lifecycle methods map to hooks in functional components?\n24. What is the order of hook execution on mount/update/unmount?\n25. How can you mimic `componentDidCatch` using hooks?\n26. How does React batch state updates?\n27. What is the difference between legacy and concurrent rendering lifecycles?\n28. How do side effects differ between `useEffect` and `useLayoutEffect`?\n29. Why should `useLayoutEffect` be used carefully?\n30. What happens if you set state inside render?\n\n---\n\n### 🧩 **REACT HOOKS (In-depth)**\n\n31. What are React Hooks and why were they introduced?\n32. Why can’t hooks be used in class components?\n33. What are the rules of hooks?\n34. What is `useState()` and how does it work internally?\n35. What is lazy initialization in useState()?\n36. What happens if you update state with the same value?\n37. What is batching in React state updates?\n38. What is `useEffect()` and when does it run?\n39. Difference between `useEffect` and `useLayoutEffect`.\n40. What is cleanup function in useEffect?\n41. What is dependency array and how does it work?\n42. What happens when dependency array is empty?\n43. What are stale closures in useEffect?\n44. What is `useMemo()` and why use it?\n45. Difference between `useMemo` and `useCallback`.\n46. When should you not use `useMemo`?\n47. What is `useCallback()`?\n48. What are referential equality and memoization traps?\n49. What is `useRef()` used for?\n50. What is the difference between ref and state?\n51. How does `useImperativeHandle()` work?\n52. What is `forwardRef()`?\n53. What is `useContext()` and how does it work?\n54. How does Context API trigger re-renders?\n55. How to prevent unnecessary re-renders in Context consumers?\n56. What is `useReducer()` and how does it differ from useState?\n57. How does reducer pattern improve state logic?\n58. What is `useTransition()` and concurrent rendering?\n59. What is `useDeferredValue()` and how does it optimize UX?\n60. What is `useId()` used for?\n61. What are custom hooks?\n62. When should you create custom hooks?\n63. Can a custom hook call another hook conditionally?\n64. How do you share logic between components using hooks?\n65. Why is it important to avoid calling hooks inside loops?\n\n---\n\n### ⚙️ **REACT FIBER \u0026 RECONCILIATION**\n\n66. What is React Fiber?\n67. Why was Fiber introduced?\n68. What problem did the old stack reconciler have?\n69. How does Fiber enable interruption and resuming of work?\n70. What are the three main phases of reconciliation?\n71. What is the render phase?\n72. What is the commit phase?\n73. What are effect tags in Fiber?\n74. How does React perform diffing between trees?\n75. How does React identify minimal updates?\n76. Why does React compare elements using keys?\n77. What is time slicing in React?\n78. How does React handle priority-based updates?\n79. What is concurrent rendering?\n80. What are lanes in React Fiber architecture?\n81. What is Suspense in React?\n82. How does Suspense work with concurrent rendering?\n83. How does React handle interruptions in rendering?\n84. What are the main goals of React Fiber?\n85. What is lazy loading and how does React.lazy work?\n86. How does React handle async boundaries (Suspense boundaries)?\n87. What is hydration?\n88. Difference between client-side render, server render, and hydration.\n89. What is partial hydration?\n90. What happens when hydration fails?\n\n---\n\n### ⚡ **REACT PERFORMANCE \u0026 OPTIMIZATION**\n\n91. What causes React components to re-render?\n92. How to prevent unnecessary re-renders?\n93. What is React.memo()?\n94. When should you not use React.memo()?\n95. What are pure components?\n96. How does shallow comparison work in React.memo?\n97. What is key reconciliation and how it impacts performance?\n98. What is virtualization?\n99. What are libraries like React Window or React Virtualized?\n100. What is code splitting in React?\n101. What is dynamic import() used for?\n102. How does lazy + Suspense help with bundle size?\n103. What is React profiler and how to use it?\n104. How does React detect wasted renders?\n105. What are render props and HOCs?\n106. Which is better: render props or custom hooks?\n107. What are controlled vs uncontrolled inputs and their impact on performance?\n108. How does event delegation work in React synthetic events?\n109. What are synthetic events?\n110. What are portals in React?\n111. When to use React portals?\n112. What is StrictMode?\n113. What is concurrent React and what’s new in React 18?\n114. What is Automatic Batching?\n115. What are transitions in React 18?\n116. What are startTransition and useTransition differences?\n117. How does React concurrent mode affect UI responsiveness?\n118. How does React use scheduler to prioritize tasks?\n119. What are React Server Components (RSC)?\n120. How do RSCs differ from normal components?\n\n---\n\n### 🌍 **NEXT.JS FUNDAMENTALS**\n\n121. What is Next.js and how is it different from React?\n122. Why use Next.js over CRA or Vite?\n123. What problems does Next.js solve?\n124. What is the App Router in Next.js 13+?\n125. What are the main directories in App Router (`app/`, `components/`, `lib/`)?\n126. Difference between `pages/` and `app/` directory structure.\n127. What is server-side rendering (SSR)?\n128. What is static site generation (SSG)?\n129. What is incremental static regeneration (ISR)?\n130. What is on-demand ISR revalidation?\n131. What are server components vs client components in Next.js?\n132. How to mark a component as client-side?\n133. How does hydration work in Next.js?\n134. What are layout.tsx and template.tsx files used for?\n135. What is metadata API in Next.js?\n136. How to add SEO metadata dynamically?\n137. How does Next.js handle routing under the hood?\n138. What are parallel routes in Next.js?\n139. What are intercepting routes?\n140. How do you use `@modal` and `@slot` routes?\n141. What is nested routing?\n142. What is route grouping `(folder)` syntax?\n143. How to use middleware in Next.js?\n144. What is the difference between middleware and API routes?\n145. What is edge middleware?\n146. What are Next.js API routes?\n147. How does Next.js handle API route caching?\n148. What is the difference between `fetch()` in client vs server components?\n149. What is caching behavior of `fetch()` in Next.js?\n150. What are revalidation strategies (`force-cache`, `no-store`, `revalidate`)?\n151. What are Next.js static and dynamic rendering modes?\n152. What is `generateStaticParams()` used for?\n153. What are dynamic routes and catch-all routes?\n154. How does prefetching work in Next.js links?\n155. What is `next/link` prefetch behavior?\n156. What is dynamic import() in Next.js?\n157. How to disable SSR for certain components?\n158. What is client-side navigation?\n159. How does Next.js manage bundle splitting automatically?\n160. How does Next.js optimize fonts and images?\n161. What is the `next/image` component and why use it?\n162. How does `next/font` work?\n163. What is route-based code splitting?\n164. How does Next.js handle redirects and rewrites?\n165. How does Next.js integrate with CDN and caching layers?\n166. What is Next.js middleware execution order?\n167. How does middleware differ between Edge and Node runtimes?\n168. What is the difference between Edge API Routes and Serverless Functions?\n169. What is the default runtime in Next.js 14+?\n170. What is RSC payload and how is it streamed?\n171. What are React Server Actions?\n172. How do Server Actions differ from API routes?\n173. How to handle form submissions using Server Actions?\n174. What are the limitations of Server Components?\n175. What are cookies and headers in Next.js server context?\n176. How to access environment variables securely?\n177. What is dynamic rendering in Next.js?\n178. What is partial revalidation?\n179. How does Next.js support internationalization (i18n)?\n180. How to implement authentication in Next.js (middleware + route protection)?\n181. How does Next.js integrate with NextAuth?\n182. How does Next.js handle streaming SSR with React 18?\n183. What are Edge Functions?\n184. Difference between Vercel Edge Functions and Node Lambdas.\n185. What are the performance benefits of RSC + Edge?\n186. What is route segment config (`export const dynamic = \"force-dynamic\"`) used for?\n187. How to debug caching and revalidation in Next.js?\n188. How to measure performance using Lighthouse in Next.js?\n189. What is hybrid rendering?\n190. What are patterns for combining SSR + SSG pages?\n191. What are App Router pitfalls when mixing client components?\n192. What are the new image optimization APIs in Next.js 15?\n193. What are static exports and how to deploy them?\n194. How to use `next build` and analyze bundle size?\n195. What is `next/script` and how does it optimize loading?\n196. What are the best practices for performance in Next.js?\n197. How to handle environment separation (dev, staging, prod)?\n198. What are security headers in Next.js?\n199. What is CSP and how to configure it in Next.js?\n200. Why choose Next.js over React for production-grade apps?\n\n\n---\n\n## 🧱 Stage 3 — HTML • CSS • Accessibility • Performance • Architecture\n\n### 🧱 **HTML Essentials (Structure + Semantics)**\n\n1. What is the difference between `\u003cdiv\u003e` and `\u003csection\u003e`?\n2. What is semantic HTML and why does it matter?\n3. Name five semantic HTML5 tags and their purposes.\n4. How do `\u003cheader\u003e`, `\u003cnav\u003e`, `\u003cmain\u003e`, `\u003carticle\u003e`, and `\u003cfooter\u003e` differ?\n5. What is the role of the `\u003caside\u003e` element?\n6. How does semantic markup improve accessibility and SEO?\n7. What are global attributes in HTML?\n8. Difference between `id` and `class`.\n9. What are `data-*` attributes used for?\n10. What is the difference between `\u003cstrong\u003e` and `\u003cb\u003e`?\n11. Difference between `\u003cem\u003e` and `\u003ci\u003e`?\n12. What is the difference between inline and block elements?\n13. What are void elements in HTML?\n14. What is the DOCTYPE declaration and why is it needed?\n15. What are self-closing tags?\n16. Difference between HTML and XHTML?\n17. What is the difference between `\u003clink\u003e` and `\u003ca\u003e`?\n18. What is the `\u003cbase\u003e` tag used for?\n19. Difference between `\u003cscript defer\u003e` and `\u003cscript async\u003e`?\n20. What is preloading vs prefetching resources?\n21. What are meta tags and how do they affect SEO?\n22. What are Open Graph meta tags?\n23. What are favicons and where to include them?\n24. What is the difference between `\u003cpicture\u003e` and `\u003cimg\u003e`?\n25. How does the `\u003csource\u003e` element work inside `\u003cpicture\u003e`?\n26. What is the `\u003ctemplate\u003e` element used for?\n27. What are custom elements / Web Components?\n28. How does the Shadow DOM work?\n29. What is the difference between Light DOM and Shadow DOM?\n30. What are slots in Web Components?\n31. What are the advantages of Web Components?\n32. How do you make HTML responsive?\n33. What is the difference between `meta viewport` and `width=device-width`?\n34. What are progressive enhancement and graceful degradation?\n35. What is critical-path HTML rendering?\n36. What is hydration in SSR apps from an HTML standpoint?\n37. What are inline scripts and CSP concerns?\n38. How to lazy-load images in HTML?\n39. What is the loading attribute (`loading=\"lazy\"`)?\n40. What is the difference between defer and module scripts?\n\n---\n\n### 🎨 **CSS Fundamentals (Layout + Selectors + Specificity)**\n\n41. What is the CSS Box Model?\n42. Explain `content`, `padding`, `border`, and `margin`.\n43. Difference between `box-sizing: content-box` and `border-box`.\n44. What are CSS selectors?\n45. What is specificity hierarchy in CSS?\n46. How to calculate specificity weight?\n47. Difference between `\u003e` and space in selectors.\n48. Difference between `:nth-child()` and `:nth-of-type()`.\n49. What are pseudo-classes and pseudo-elements?\n50. Difference between `::before` and `:before`.\n51. What is the difference between relative and absolute positioning?\n52. How does `position: sticky` work?\n53. How does stacking context work?\n54. What is `z-index` and how is it calculated?\n55. What are CSS variables (custom properties)?\n56. How do CSS variables differ from preprocessor variables?\n57. What are combinators in CSS?\n58. What are attribute selectors?\n59. What is the difference between visibility hidden and display none?\n60. Difference between opacity 0 and visibility hidden?\n61. What is the difference between inline, block, and inline-block display?\n62. What are float and clear properties?\n63. How does clearfix hack work?\n64. What is `overflow` property used for?\n65. Difference between auto, hidden, scroll values.\n66. What are media queries?\n67. How to target dark mode with media queries?\n68. How to use `prefers-reduced-motion` media query?\n69. What are CSS units (px, em, rem, vw, vh)?\n70. Difference between `em` and `rem`.\n71. What are percentage units relative to?\n72. What are absolute vs relative units?\n73. What are viewport units?\n74. What is CSS cascade order?\n75. What is inheritance in CSS?\n76. Which properties are not inherited by default?\n77. What are shorthand properties?\n78. What are logical properties (e.g. margin-inline)?\n79. How does writing-mode affect layout?\n80. What are CSS resets and normalizers?\n\n---\n\n### 🧩 **Modern Layouts (Flexbox + Grid)**\n\n81. What is Flexbox and why was it introduced?\n82. What are the main axes in Flexbox?\n83. Difference between justify-content and align-items.\n84. What are flex-grow, flex-shrink, flex-basis?\n85. What is the shorthand for flex property?\n86. How to center a div using Flexbox?\n87. How does `align-self` differ from `align-items`?\n88. What is the difference between `gap` and `margin`?\n89. What are order and flex-wrap used for?\n90. What is CSS Grid?\n91. Difference between implicit and explicit grid.\n92. What is `grid-template-areas` used for?\n93. Difference between `auto-fill` and `auto-fit`.\n94. What is fractional unit (fr)?\n95. How to create responsive layouts using Grid?\n96. Difference between `place-items` and `align-content`.\n97. Can you mix Flexbox and Grid?\n98. What is subgrid?\n99. What is `minmax()` function?\n100. How to make a fluid grid layout?\n\n---\n\n### ✨ **CSS Animation \u0026 Transitions**\n\n101. Difference between transition and animation.\n102. How does CSS transition timing-function work?\n103. What are keyframes?\n104. Difference between `animation-fill-mode` values.\n105. How to pause and resume CSS animations?\n106. What is will-change property?\n107. How does hardware acceleration affect animations?\n108. What are compositing and painting steps?\n109. What properties trigger layout vs paint vs composite?\n110. How to optimize animations for performance?\n\n---\n\n### 🧠 **Responsive Design \u0026 Architecture**\n\n111. What is Mobile First design?\n112. What is fluid vs adaptive layout?\n113. What is the difference between min-width and max-width queries?\n114. How does container query differ from media query?\n115. How does CSS clamp() help in responsive typography?\n116. What are design tokens?\n117. What is CSS-in-JS?\n118. Difference between styled-components and CSS modules.\n119. What are pros / cons of CSS-in-JS?\n120. How does server-side rendering affect CSS-in-JS?\n121. What are atomic / utility-first CSS frameworks?\n122. What are BEM, OOCSS, SMACSS methodologies?\n123. How does BEM naming improve scalability?\n124. What is the 7-1 Sass architecture?\n125. What is Critical CSS?\n126. How to extract above-the-fold CSS?\n127. What are CSS layers (`@layer`)?\n128. How does cascade layering affect specificity?\n129. What is PostCSS and what does it do?\n130. How do autoprefixers work?\n\n---\n\n### ♿ **Accessibility (WCAG + ARIA)**\n\n131. What is web accessibility (a11y)?\n132. What is WCAG 2.1 AA standard?\n133. What is POUR principle?\n134. What are semantic roles?\n135. What are ARIA attributes and when to use them?\n136. What is the difference between role and aria-label?\n137. What is aria-hidden?\n138. What is aria-live region?\n139. What are skip links?\n140. How to make keyboard-navigable UI?\n141. How to ensure focus visibility?\n142. What is tabindex and how does it work?\n143. Difference between tabindex 0, -1, and positive values.\n144. How to trap focus in a modal?\n145. What is focus management on route change?\n146. How to test accessibility with DevTools and Lighthouse?\n147. What are screen readers and how do they parse DOM?\n148. What are landmark roles (banner, main, complementary)?\n149. Difference between button and div with onClick?\n150. How to ensure accessible form labels?\n151. What is the difference between aria-describedby and aria-labelledby?\n152. What are accessible error messages?\n153. How to test color contrast?\n154. What is sufficient color contrast ratio per WCAG?\n155. How to design for reduced motion?\n156. How to use prefers-reduced-motion?\n157. What are accessible tables?\n158. What are caption and summary elements?\n159. How to ensure heading hierarchy accessibility?\n160. How to test accessibility with Axe or Lighthouse?\n\n---\n\n### 🔍 **SEO \u0026 Web Performance**\n\n161. What is the difference between SEO on SPA and SSR apps?\n162. What is crawling vs indexing?\n163. What are sitemaps and robots.txt?\n164. What are canonical URLs?\n165. What is duplicate content penalty?\n166. What are meta robots directives?\n167. Difference between `\u003cmeta name=\"description\"\u003e` and Open Graph tags.\n168. What are structured data and schema.org?\n169. How does SSR improve SEO?\n170. How does Next.js ISR affect SEO freshness?\n171. What is the Core Web Vitals?\n172. What are LCP, FID, CLS?\n173. How to optimize LCP?\n174. How to reduce CLS?\n175. How to improve FID/TBT?\n176. What are performance budgets?\n177. What is lazy loading and code splitting?\n178. How does prefetching work?\n179. What is DNS prefetch and preconnect?\n180. What are resource hints (`\u003clink rel=preload\u003e`, `prefetch`)?\n181. How to optimize images for performance?\n182. Difference between JPEG, WebP, AVIF.\n183. How does font loading affect FOUT/FOIT?\n184. What are critical requests chains?\n185. How to reduce JavaScript bundle size?\n186. What is tree shaking in bundlers?\n187. What is dynamic import() used for?\n188. How does caching policy (Cache-Control) affect performance?\n189. What is CDN and how does it help?\n190. What are service workers and offline strategies?\n191. What is precaching vs runtime caching?\n192. What is HTTP/2 and HTTP/3 multiplexing?\n193. What is compression (Gzip/Brotli)?\n194. How to analyze bundle size (Webpack Analyzer)?\n195. What are code splitting strategies (route / component / vendor)?\n196. How to avoid main-thread blocking in JS?\n197. What is web worker vs service worker?\n198. How to measure performance in Lighthouse?\n199. What are cumulative layout shift causes?\n200. What are security headers (CSP, HSTS)?\n\n---\n\n### 🏗️ **Frontend Architecture \u0026 System Design**\n\n201. What is component driven development?\n202. What is Atomic Design Methodology?\n203. What is the difference between a design system and component library?\n204. What is Storybook and why use it?\n205. How to manage themes (dark / light) architecture-wise?\n206. What is micro-frontend architecture?\n207. Pros and cons of micro-frontends?\n208. How to share state between micro-frontends?\n209. What are Webpack Module Federation and its use?\n210. How does authentication flow work in SPAs?\n211. What are CSRF and XSS attacks?\n212. How to prevent XSS in React / Next.js?\n213. What is content security policy?\n214. How to sanitize user input safely?\n215. How does React escape HTML by default?\n216. What is SSR hydration mismatch and how to fix it?\n217. What are stale props / state bugs in React?\n218. How to implement infinite scroll efficiently?\n219. How to paginate efficiently on large datasets?\n220. What are debouncing and throttling in search UIs?\n221. How to implement optimistic UI updates?\n222. What is suspense for data fetching?\n223. Difference between caching and memoization?\n224. What is SWR and React Query?\n225. How does React Query handle background revalidation?\n226. What are global error boundaries?\n227. What is logging / monitoring setup for frontend apps?\n228. What are Sentry / LogRocket / Datadog used for?\n229. What is frontend observability?\n230. How to handle feature flags in React apps?\n231. What is A/B testing implementation on frontend?\n232. What is performance profiling and how to measure it?\n233. How to handle race conditions in React fetch flows?\n234. What is idempotent UI operation?\n235. How to ensure accessibility and performance coexist?\n236. What are CI/CD pipelines for frontend apps?\n237. What are code review best practices for UI teams?\n238. What is testing pyramid (frontend)?\n239. Difference between unit, integration, and E2E tests.\n240. What are Jest and React Testing Library?\n241. What is mocking and stubbing?\n242. How to test async components?\n243. What is Cypress and Playwright?\n244. How to run E2E tests in CI?\n245. How to ensure accessibility testing in CI?\n246. What is visual regression testing?\n247. What are snapshot tests and why to avoid over-use?\n248. How to implement feature toggle testing?\n249. How to architect large-scale React / Next.js projects?\n250. What are folder structure best practices (feature-based / domain-driven)?\n\n\n---\n\n## ✅ Total Coverage Summary\n\n| Area | Topics Covered | Approx. Questions |\n|------|----------------|-------------------|\n| JavaScript | Core, Advanced, ES6+, Async, Engine | 400+ |\n| React | Hooks, Fiber, Reconciliation, Architecture | 120+ |\n| Next.js | SSR, ISR, Routing, Optimization | 60+ |\n| HTML \u0026 CSS | Structure, Layout, Responsive | 130 |\n| Accessibility | WCAG, ARIA, Testing | 30 |\n| SEO \u0026 Performance | Core Web Vitals, Rendering, Caching | 40 |\n| Architecture | Design Systems, Testing, CI/CD | 50 |\n| **Total** | — | **650+ Questions** |\n\n---\n\n### 💡 Notes\n\nThis collection is ideal for:\n- Interview prep for Mid → Senior Frontend Developer roles\n- Deep learning roadmap aligned with your React/Next specialization\n- Creating blog ideas or flashcards for review\n\n---\n\n**Author:** Sachin Maurya  \n**Focus:** UI / Frontend / React / Next.js Engineer  \n**Goal:** Mastery-level understanding of frontend ecosystem (Performance + Accessibility + Architecture)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontroversial-fact877%2Ffrontend-master-prep-series","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontroversial-fact877%2Ffrontend-master-prep-series","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontroversial-fact877%2Ffrontend-master-prep-series/lists"}