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.

Perguntas para Prática de Quiz

Lista de perguntas

  • 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
  • Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the…
    Topics
    Web APIsJavaScript
  • Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`tags <script> são usadas para incluir JavaScript em uma página da web. Os atributos async e defer são usados para mudar como/quando o carregamento e a execução…
    Topics
    HTMLJavaScript
  • Explique "hoisting"Hoisting é um termo usado para explicar o comportamento de declarações variáveis em seu código. Variáveis declaradas ou inicializadas com a palavra-chave var…
    Topics
    JavaScript
  • Quais são as diferenças entre as variáveis criadas usando `let`, `var` ou `const`?Variáveis declaradas usando a palavra-chave var têm escopo à função na qual foram criadas, ou se criadas fora de qualquer função, ao objeto global. let and…
    Topics
    JavaScript
  • O que é um closure e como/por que você usaria um?Em JavaScript, um closure é uma função que captura o escopo léxico no qual foi declarada, permitindo que ela acesse e manipule variáveis de um escopo externo…
    Topics
    ClosureJavaScript
  • Descreva a propagação de eventosA propagação de eventos é um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, é primeiro acionado no…
    Topics
    Web APIsJavaScript
  • Explique delegação do eventoA delegação de eventos é um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em vários elementos filhos…
    Topics
    Web APIsJavaScript
  • Qual é a diferença entre uma variável que é: `null`, `undefined` ou não declarada?Variáveis não declaradas são criadas quando você atribui um valor a um identificador que não foi criado anteriormente usando var, let ou const. Variáveis não…
    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
  • O que é o loop de eventos?O loop de eventos é um laço de execução única (single-threaded) que monitora a pilha de chamadas e verifica se há algum trabalho a ser feito na fila de…
    Topics
    JavaScript
  • Quais são os prós e contras de usar Promises em vez de callbacks?Evite o "callback hell", que pode ser ilegível. Facilita a escrita de código assíncrono sequencial que é legívell com .then(). Facilita a escrita paralela de…
    Topics
    AsyncJavaScript
  • Descrever o contexto de formatação de bloco (BFC) e como ele funciona.Um Contexto de Formatação de Bloco (BFC) é parte da renderização visual do CSS em uma página da web, no qual os blocos são organizados. Elementos flutuantes…
    Topics
    CSS
  • Descreva `z-index` e como o contexto de empilhamento é formado.A propriedade z-index no CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. 'z-index' afeta apenas elementos posicionados (elementos…
    Topics
    CSS
  • Explique como um navegador determina quais elementos correspondem a um seletor CSS.Esta pergunta está relacionada com a pergunta sobre escrever um CSS eficiente. Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os…
    Topics
    BrowserCSS
  • Explique sua compreensão do modelo de caixa e como você diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.O modelo de caixa CSS descreve as caixas retangulares que são geradas para os elementos na árvore de documentos e dispostas de acordo com o modelo de…
    Topics
    CSS
  • Existe alguma razão para você querer usar `translate()` ao invés de posicionamento `absolute`, ou vice-versa? E por quê?translate() é um valor possível da propriedade CSS transform. Ao usar traduzir(), o elemento ainda ocupa seu espaço original (mais ou menos como o position…
    Topics
    CSSPerformance
  • O que faz `* { box-sizing: border-box; }`?* { box-sizing: border-box; } faz com que cada elemento na página use a abordagem box: border-box para calcular os elementos height e width.
    Topics
    CSS
  • Qual é a propriedade CSS `display` e você pode dar alguns exemplos de seu uso?Os valores comuns para a propriedade display: none, block, inline, inline-block, flex, grid, tabela, table-row, table-cell, table-cell, list-item.
    Topics
    CSS
  • Qual é a diferença entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?Um elemento posicionado é um elemento cuja propriedade position calculada é relative, absolute, fixed ou sticky calculada. static: A posição padrão; o elemento…
    Topics
    CSS
  • Que tipo de coisas você deve estar atento ao projetar ou desenvolver para sites multilíngues?Projetar e desenvolver para sites multilíngues faz parte da internacionalização (i18n).
    Topics
    HTMLInternationalization
  • Qual é a diferença entre `inline` e `inline-block`?Vamos também comparar com display: block para completar.
    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