Enjoy 20% off all plans by following our social accounts!
价格 Sign in / up
Get full access
Recommended
75

GFE 75

Most important 75 questions for front end interviews.
Code in browser
Official solutions
Test cases
Start learning
Track your progress
The smallest list of practice questions that gets you the most mileage in your preparation. Covers the most commonly asked front end interview topics.Created with the expertise of senior to staff front end interviewers from some of the top companies in the world.

所有练习题目

题目列表

  • DebounceImplement a function to limit how many times a function can be executed by delaying the execution of the function until after a specified time after its last execution attempt
    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 deep
    Languages
  • ThrottleImplement a function to control the execution of a function by limiting how many times it can execute over time
    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 BoardBuild a job board that displays the latest job postings from Hacker News
    Available frameworks
  • AccordionBuild an accordion component that a 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 the input elements are resolved or rejects otherwise
    Languages
  • Data MergingImplement a function to merge rows of data from the same user
    Languages
  • Deep CloneImplement a function that performs a deep copy of a value
    Languages
  • Event EmitterImplement a class that can subscribe to and emit events that trigger attached callback functions
    Languages
  • getElementsByStyleImplement 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 if two values are equal
    Languages
  • Promise.anyImplement the Promise.any() function that resolves when any of the input elements are resolved
    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 which 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
  • 描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。
    Topics
    Web APIsJavaScript
  • 描述`<script>`、`<script async>`和`<script defer> `之间的差异
    Topics
    HTMLJavaScript
  • 解释“（变量）提升”
    Topics
    JavaScript
  • 使用`let`、`var`或`const`创建的变量之间有什么差异？
    Topics
    JavaScript
  • 什么是闭包？ 你如何/为何使用？
    Topics
    ClosureJavaScript
  • 描述事件冒泡过程
    Topics
    Web APIsJavaScript
  • 解释事件委托
    Topics
    Web APIsJavaScript
  • `null`, `undefined` 和未声明变量的区别是什么？
    Topics
    JavaScript
  • Explain the differences between CommonJS modules and ES modules in JavaScript
    Topics
    JavaScript
  • 什么是事件循环？
    Topics
    JavaScript
  • 使用Promise而不是回调的利弊是什么？
    Topics
    AsyncJavaScript
  • 描述块级格式化上下文(BFC)及其工作方式。
    Topics
    CSS
  • 描述 `z-index` 和堆叠上下文是如何形成的。
    Topics
    CSS
  • 解释浏览器如何决定什么元素与 CSS 选择器匹配。
    Topics
    BrowserCSS
  • 解释您对盒模型的理解，以及您如何告诉浏览器在 CSS 中渲染您在不同盒模型中的布局。
    Topics
    CSS
  • 您是否有任何理由想使用 `translate()` 而不是 `absolute` 定位，或反之亦然？ 为什么？
    Topics
    CSSPerformance
  • `* { box-sizing: border-box; }` 是干什么的？
    Topics
    CSS
  • CSS `display` 属性是什么，你可以举几个例子说明它的使用情况？
    Topics
    CSS
  • `relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别？
    Topics
    CSS
  • 在设计或开发多语言站点时你必须注意什么事？
    Topics
    HTMLInternationalization
  • `inline` 和 `inline-block`之间有什么区别？
    Topics
    CSS
  • CurryImplement a function that transforms a function that takes multiple arguments into a function that can be repeatedly called with only one argument at a time
    Languages
  • HTML SerializerImplement a function to serialize an object into an HTML string with indentation
    Languages
  • JSON.stringifyImplement 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 the states
    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 ExplorerBuild 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 of items between two lists
    Available frameworks
  • Nested CheckboxesBuild a nested checkboxes component with parent-child selection logic
    Available frameworks
  • Modal DialogBuild a reusable modal dialog component that can be opened and closed
    Available frameworks
  • Data TableBuild a users data table with pagination features
    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
  • 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 GFE75 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