Get full access
New questions added in Nov 2026 ->
Get full access
Recommended
75

GFE 75

Most important 75 questions for front end interviews, selected by a panel of Senior Front End Engineers from big tech companies.
Code in browser
Official solutions
Comprehensive test cases
Essential list of practice questions that gets you the most mileage in your preparation, covering the most useful and commonly-asked front end interview topics.Created in collaboration with a panel of senior to staff front end interviewers from top companies.

All Practice Questions

Questions List

  • DebounceImplement a function that delays execution until calls have stopped for a given time
    Languages
  • Array.prototype.reduceImplement the Array.prototype.reduce() method
    Languages
  • ClassnamesImplement a function that conditionally joins CSS class names together
    Languages
  • FlattenImplement a function that recursively flattens an array into a single level
    Languages
  • ThrottlePremiumImplement a function that limits how often a function can run
    Languages
  • Todo ListBuild a Todo list that lets users add new tasks and delete existing tasks
    Available frameworks
  • Contact FormBuild a contact form which submits user feedback and contact details to a back end API
    Available frameworks
  • Holy GrailBuild the famous holy grail layout consisting of a header, 3 columns, and a footer
    Available frameworks
  • TabsBuild a tabs component that displays a list of tab elements and one associated panel of content at a time
    Available frameworks
  • Job BoardPremiumBuild a job board that displays the latest job postings from Hacker News
    Available frameworks
  • AccordionBuild an accordion component that displays a list of vertically stacked sections with each containing a title and content snippet
    Available frameworks
  • News Feed (e.g. Facebook)Design a news feed user interface similar to Facebook and Twitter
    Topics
    AccessibilityPerformance
  • AutocompleteDesign an autocomplete component seen on Google and Facebook search
    Topics
    AccessibilityUI component
  • Type Utilities IIImplement utilities to determine non-primitive variable types in JavaScript
    Languages
  • Promise.allImplement the Promise.all() function that resolves to an array of results if all input elements resolve, or rejects otherwise
    Languages
  • Data MergingPremiumImplement a function to merge rows of data from the same user
    Languages
  • Deep CloneImplement a function that performs a deep copy of a JSON-serializable value
    Languages
  • Event EmitterImplement a class that can subscribe to and emit events that trigger attached callback functions
    Languages
  • getElementsByStylePremiumImplement a function to get all DOM elements that are rendered using the specified style
    Languages
  • Function.prototype.callImplement the Function.prototype.call() function that calls the function with a given `this` value and provided arguments
    Languages
  • List FormatImplement a function that formats a list of items into a single readable string
    Languages
  • Map Async LimitImplement a function that maps an array of items with an asynchronous mapping function while not exceeding the concurrency limit
    Languages
  • Deep EqualImplement a function that determines whether two values are equal
    Languages
  • Promise.anyImplement the Promise.any() function that resolves when any input element resolves
    Languages
  • Deep OmitImplement a function that removes specified keys and their corresponding values from an object, including nested objects or arrays
    Languages
  • PromisifyImplement a function that takes a function following the common error-first callback style and returns a version that returns promises
    Languages
  • MemoizeImplement a function that returns a memoized version of a function that accepts a single argument
    Languages
  • Squash ObjectImplement a function that returns a new object after squashing the input object into a single level of depth
    Languages
  • getElementsByClassNameImplement a function to get all DOM elements that contain the specified classes
    Languages
  • Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsersCookies, localStorage, and sessionStorage all store data in the browser, but they differ in lifetime, scope, server interaction, and security controls…
    Topics
    Web APIsJavaScript
  • Describe the difference between `<script>`, `<script async>` and `<script defer>`All of these ways (<script>, <script async>, and <script defer>) are used to load and execute JavaScript files in an HTML document, but they differ in how the…
    Topics
    HTMLJavaScript
  • Explain the concept of "hoisting" in JavaScript"Hoisting" is informal shorthand for how JavaScript creates and initializes bindings while it instantiates a scope, before evaluating that scope's statements…
    Topics
    JavaScript
  • What are the differences between JavaScript variables created using `let`, `var` or `const`?In JavaScript, let, var, and const are all keywords used to declare variables, but they differ significantly in terms of scope, initialization rules, whether…
    Topics
    JavaScript
  • What is a closure in JavaScript, and how/why would you use one?In the book "You Don't Know JS" (YDKJS) by Kyle Simpson, a closure is defined as follows:
    Topics
    ClosureJavaScript
  • Describe event bubbling in JavaScript and browsersEvent bubbling is a DOM event propagation mechanism where an event (e.g. a click) starts at the target element and bubbles up to the root of the document. This…
    Topics
    Web APIsJavaScript
  • Explain event delegation in JavaScriptEvent delegation is a technique in JavaScript where a single event listener is attached to a parent element instead of attaching event listeners to multiple…
    Topics
    Web APIsJavaScript
  • What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?An undeclared identifier has no binding in the visible scope chain. Reading it directly throws ReferenceError. In sloppy-mode scripts, assigning to an…
    Topics
    JavaScript
  • Explain the differences between CommonJS modules and ES modules in JavaScriptIn JavaScript, modules are reusable pieces of code that encapsulate functionality, making it easier to manage, maintain, and structure your applications…
    Topics
    JavaScript
  • What is the event loop in JavaScript runtimes?The event loop is the host runtime's scheduling mechanism for coordinating JavaScript jobs, asynchronous operations, and (in browsers) rendering. A simplified…
    Topics
    JavaScript
  • What are the pros and cons of using Promises instead of callbacks in JavaScript?Promises standardize one eventual outcome and make sequential, parallel, and error flows composable with .then(), async/await, and combinators such as…
    Topics
    AsyncJavaScript
  • Describe Block Formatting Context (BFC) and how it works.A block formatting context (BFC) is an independent region for normal-flow block layout and float interaction. A new BFC contains its internal floats, prevents…
    Topics
    CSS
  • Describe `z-index` and how stacking context is formed.z-index orders a box only within its current stacking context; it is not a global page-wide height. A stacking context is painted as one atomic unit in its…
    Topics
    CSS
  • Explain how a browser determines what elements match a CSS selector.Conceptually, selector matching starts from the rightmost compound selector (the candidate element) and checks relationships toward the left. For .card >…
    Topics
    BrowserCSS
  • Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.Every rendered CSS box has a content area surrounded by padding, a border, and margins. With the default box-sizing: content-box, a declared width applies only…
    Topics
    CSS
  • Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?Use absolute positioning when an element should be taken out of normal flow and anchored to a containing block, such as a badge or popover. Use translate()…
    Topics
    CSSPerformance
  • What does `* { box-sizing: border-box; }` do?* { box-sizing: border-box; } makes every element selected by * include its padding and border within its declared width and height; margins remain outside…
    Topics
    CSS
  • What is the CSS `display` property and can you give a few examples of its use?The display property controls which boxes an element generates and how those boxes participate in layout. A value can describe both the element's outer role…
    Topics
    CSS
  • What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?static participates in normal flow. relative stays in flow but can be visually offset and establish a containing block. absolute and fixed are out of flow…
    Topics
    CSS
  • What kind of things must you be wary of when designing or developing for multilingual sites?Multilingual design is more than translating strings. Use valid BCP 47 language tags, declare lang and dir in HTML, give users a persistent language switcher…
    Topics
    HTMLInternationalization
  • What's the difference between `block`, `inline`, and `inline-block`?A block box participates in block layout and, with width: auto, normally fills the available inline space. An inline box participates inside a line and can…
    Topics
    CSS
  • CurryImplement a function that converts a multi-argument function into a chain of unary calls
    Languages
  • HTML SerializerPremiumImplement a function to serialize an object into an HTML string with indentation
    Languages
  • JSON.stringifyPremiumImplement a function that converts a JavaScript value into a JSON string
    Languages
  • Star RatingBuild a star rating component that shows a row of star icons for users to select the number of filled stars corresponding to the rating
    Available frameworks
  • Image CarouselBuild an image carousel that displays a sequence of images
    Available frameworks
  • Progress BarsBuild a list of progress bars that fill up gradually when they are added to the page
    Available frameworks
  • Like ButtonBuild a Like button that changes appearance based on its state
    Available frameworks
  • Traffic LightBuild a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely
    Available frameworks
  • Digital ClockBuild a 7-segment digital clock that shows the current time
    Available frameworks
  • StopwatchBuild a stopwatch widget that can measure how much time has passed
    Available frameworks
  • File ExplorerPremiumBuild a file explorer component to navigate files and directories in a tree-like hierarchical viewer
    Available frameworks
  • Tic-tac-toeBuild a tic-tac-toe game that is playable by two players
    Available frameworks
  • Transfer ListBuild a component that allows transferring items between two lists
    Available frameworks
  • Nested CheckboxesPremiumBuild a nested checkboxes component with parent-child selection logic
    Available frameworks
  • Modal DialogPremiumBuild a reusable modal dialog component that can be opened and closed
    Available frameworks
  • Data TableBuild a user data table with pagination features
    Available frameworks
  • Undoable CounterPremiumBuild a counter with a history of the values and ability to undo/redo actions
    Available frameworks
  • Image CarouselPremiumDesign a horizontally-scrolling image carousel component
    Topics
    AccessibilityPerformanceUI component
  • Modal DialogPremiumDesign a modal/dialog component that shows a window overlaying the contents on the page
    Topics
    AccessibilityUI component
  • Travel Booking (e.g. Airbnb)PremiumDesign a travel booking website like Airbnb and Expedia
    Topics
    PerformanceSEO
  • Chat App (e.g. Messenger)PremiumDesign a chat application like Messenger and Slack
    Topics
    Networking
  • Video Streaming (e.g. Netflix)PremiumDesign a video streaming application like Netflix and YouTube
    Topics
    NetworkingPerformance
  • Google DocsPremiumDesign a collaborative editor like Google Docs and Notion
    Topics
    Networking

GFE 75 - Blind 75 for Front End Interviews

Looking for the most important front end interview questions to practice, with answers and test cases?

Try GFE 75, a list of 75 most important front end interview questions curated by big tech ex-interviewers to give you the most mileage for your time. These questions were chosen such that there is sufficient repetition and coverage of key topics and patterns.

Furthermore, each question in the list has been solved by experienced engineers, providing solutions / answers in multiple frameworks and languages, including JavaScript, TypeScript, React, Vue, Angular, Svelte where applicable.

The coding workspace integrated into GFE 75 allows you to practice directly in your browser, simulating the actual conditions you'll face in a real interview.

To quickly tell if your answers meet the expectation criteria, you're also able to run your code against our automated test cases, which were again written by ex-interviewers to reflect the real demands of the interview process.

Topics covered by GFE 75 include:

  • Browser and language polyfills
  • Async operations
  • Accessibility
  • Higher order functions
  • DOM APIs
  • Common JS utility functions
  • HTML, CSS, JS fundamentals
  • Forms
  • Component design
  • State design
  • Networking