Front End Interview Preparation — Coding

Preparation Stages

Front End Engineer · Web Developer · Full Stack Engineer

Front End Interview Preparation

Prepare holistically for all types of front end interview questions and rounds. Guides and 190+ practice questions included.

First time preparing for front end interviews? Find out what to expect in our Front End Interview Guidebook.

Stage 1

Coding

Stage 2

Quizzes

Stage 3

System Design

Stage 4

Behavioral

Coding Practice Questions

Questions List

  • CounterWarm Up Question

    Build a simple counter which increments whenever a button is clicked
    Difficulty
    Easy
    Available Frameworks
  • StackFree

    Implement a stack data structure containing the common stack methods
    Difficulty
    Easy
    Languages
    JS
  • Type UtilitiesFree

    Implement utilities to determine primitive variable types in JavaScript
    Difficulty
    Easy
    Languages
    JS
  • Contact FormFree

    Build a contact form which submits user feedback and contact details to a back end API
    Difficulty
    Easy
    Available Frameworks
  • Holy GrailFree

    Build the famous holy grail layout consisting of a header, 3 columns, and a footer
    Difficulty
    Easy
    Available Frameworks
  • Insertion SortFree

    Implement a function that performs an insertion sort
    Difficulty
    Easy
    Languages
    JS
  • Type Utilities IIFree

    Implement utilities to determine non-primitive variable types in JavaScript
    Difficulty
    Easy
    Languages
    JS
  • Binary SearchFree

    Implement a function that performs binary search on an array of numbers
    Difficulty
    Medium
    Languages
    JS
  • Breadth-First SearchFree

    Implement a breadth-first search algorithm that traverses a directed graph in a breadth-first manner.
    Difficulty
    Medium
    Languages
    JS
  • DebounceFree

    Implement 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
    Difficulty
    Medium
    Languages
    JS
  • Depth-First SearchFree

    Implement a depth-first search algorithm that traverses a directed graph in a depth-first manner.
    Difficulty
    Medium
    Languages
    JS
  • Heap SortFree

    Implement a function that performs an heap sort
    Difficulty
    Medium
    Languages
    JS
  • QueueFree

    Implement a queue data structure containing the common queue methods
    Difficulty
    Medium
    Languages
    JS
  • FlattenFree

    Implement a function that recursively flattens an array into a single level deep
    Difficulty
    Medium
    Languages
    JS
  • Merge SortFree

    Implement a function that performs a recursive merge sort
    Difficulty
    Medium
    Languages
    JS
  • Promise.allFree

    Implement the Promise.all() function that resolves to an array of results if all the input elements are resolved or rejects otherwise
    Difficulty
    Medium
    Languages
    JS
  • Quick SortFree

    Implement a function that performs a recursive quick sort
    Difficulty
    Medium
    Languages
    JS
  • Todo ListFree

    Build a Todo list that lets users add new tasks and delete existing tasks
    Difficulty
    Medium
    Available Frameworks
  • Topological SortFree

    Implement a function that performs a topological sort
    Difficulty
    Medium
    Languages
    JS
  • Deep CloneFree

    Implement a function that performs a deep copy of a value
    Difficulty
    Medium
    Languages
    JS
  • Array.prototype.squarePremium

    Implement a custom Array.prototype.square() method which squares the values in an array
    Difficulty
    Easy
    Languages
    JS
  • GetPremium

    Implement a function to safely access deeply-nested properties in JavaScript objects
    Difficulty
    Easy
    Languages
    JS
  • OncePremium

    Implement a function that accepts a callback and restricts its invocation to at most once
    Difficulty
    Easy
    Languages
    JS
  • Selection SortPremium

    Implement a function that performs a selection sort
    Difficulty
    Easy
    Languages
    JS
  • Unique ArrayPremium

    Implement a function to remove all duplicate values from an array
    Difficulty
    Easy
    Languages
    JS
  • AccordionPremium

    Build an accordion component that a displays a list of vertically stacked sections that each contain a title and content snippet
    Difficulty
    Easy
    Available Frameworks
  • Array.prototype.filterPremium

    Implement the Array.prototype.filter() method
    Difficulty
    Easy
    Languages
    JS
  • Array.prototype.mapPremium

    Implement the Array.prototype.map() method
    Difficulty
    Easy
    Languages
    JS
  • Array.prototype.reducePremium

    Implement the Array.prototype.reduce() method
    Difficulty
    Easy
    Languages
    JS
  • Function.prototype.bindPremium

    Implement the Function.prototype.bind() function that creates a new function with the this keyword set to a provided value
    Difficulty
    Easy
    Languages
    JS
  • Generate TablePremium

    Generate a table of numbers given the rows and columns
    Difficulty
    Easy
    Available Frameworks
  • jQuery.cssPremium

    Implement a jQuery-like function that sets the style of a DOM element
    Difficulty
    Easy
    Languages
    HTMLCSSJS
  • Progress BarPremium

    Build a progress bar component which shows the percentage completion of an operation
    Difficulty
    Easy
    Available Frameworks
  • Progress BarsPremium

    Build a list of progress bars which fill up gradually when they are added to the page
    Difficulty
    Easy
    Available Frameworks
  • Promise.racePremium

    Implement the Promise.race() function that resolves or rejects when any of the input elements are resolved or rejected
    Difficulty
    Easy
    Languages
    JS
  • SumPremium

    Implement a function that sums numbers by accepting a number and allows for repeated calling with more numbers until it is not called with any number
    Difficulty
    Easy
    Languages
    JS
  • Temperature ConverterPremium

    Build a temperature converter widget that converts temperature values between Celsius and Fahrenheit
    Difficulty
    Easy
    Available Frameworks
  • TweetPremium

    Build a component that resembles a Tweet from Twitter
    Difficulty
    Easy
    Available Frameworks
  • CurryPremium

    Implement a function which transforms a function which takes multiple arguments into a function that can be repeatedly called with only one argument at a time
    Difficulty
    Medium
    Languages
    JS
  • LimitPremium

    Implement a function that accepts a callback and restricts its invocation to at most N times
    Difficulty
    Medium
    Languages
    JS
  • TabsPremium

    Build a tabs component that a displays a list of tab elements and one associated panel of content at a time
    Difficulty
    Medium
    Available Frameworks
  • ThrottlePremium

    Implement a function to control the execution of a function by limiting how many times it can execute over time
    Difficulty
    Medium
    Languages
    JS
  • Accordion IIPremium

    Build an accessible accordion component that has the right ARIA roles, states, and properties
    Difficulty
    Medium
    Available Frameworks
  • Accordion IIIPremium

    Build a fully accessible accordion component that has keyboard support according to ARIA specifications
    Difficulty
    Medium
    Available Frameworks
  • Analog ClockPremium

    Build an analog clock where the hands update and move like a real clock
    Difficulty
    Medium
    Available Frameworks
  • Camel Case KeysPremium

    Implement a function to convert all the keys in an object to camel case
    Difficulty
    Medium
    Languages
    JS
  • ClassnamesPremium

    Implement a function which conditionally joins CSS class names together
    Difficulty
    Medium
    Languages
    CSSJS
  • Curry IIPremium

    Implement a function which transforms a function which takes multiple arguments into a function that can be repeatedly called with any number of arguments
    Difficulty
    Medium
    Languages
    JS
  • Debounce IIPremium

    Implement a debounce function that comes with a cancel method to cancel delayed invocations and a flush method to immediately invoke them
    Difficulty
    Medium
    Languages
    JS
  • Event EmitterPremium

    Implement a class that can subscribe to and emit events which triggers attached callback functions
    Difficulty
    Medium
    Languages
    JS
  • Event Emitter IIPremium

    Implement a class that can subscribe to and emit events which triggers attached callback functions. Susbcription objects are returned and can unsubscribe itself
    Difficulty
    Medium
    Languages
    JS
  • getElementsByTagNamePremium

    Implement a function to get all DOM elements which match a tag
    Difficulty
    Medium
    Languages
    HTMLJS
  • Grid LightsPremium

    Build a grid of lights where the lights deactivate in the reverse order they were activated
    Difficulty
    Medium
    Available Frameworks
  • HTML SerializerPremium

    Implement a function to serialize an object into a HTML string with indentation
    Difficulty
    Medium
    Languages
    HTMLJS
  • Identical DOM TreesPremium

    Implement a function to determine if two DOM trees are the same
    Difficulty
    Medium
    Languages
    HTMLJS
  • jQuery Class ManipulationPremium

    Implement a set of jQuery-like functions that manipulates classes on a DOM element
    Difficulty
    Medium
    Languages
    HTMLCSSJS
  • Like ButtonPremium

    Build a Like button that changes appearance based on the states
    Difficulty
    Medium
    Available Frameworks
  • List FormatPremium

    Implement a function that formats a list of items into a single readable string
    Difficulty
    Medium
    Languages
    JS
  • Progress Bars IIPremium

    Build a list of progress bars which fill up gradually in sequence, one at a time
    Difficulty
    Medium
    Available Frameworks
  • Promise.allSettledPremium

    Implement the Promise.allSettled() function that resolves to an array of outcomes when all the input elements are either resolved or rejected
    Difficulty
    Medium
    Languages
    JS
  • Promise.anyPremium

    Implement the Promise.any() function that resolves when any of the input elements are resolved
    Difficulty
    Medium
    Languages
    JS
  • Squash ObjectPremium

    Implement a function that returns a new object after squashing the input object into a single level of depth
    Difficulty
    Medium
    Languages
    JS
  • Star RatingPremium

    Build a star rating component that shows a row of star icons for users to select the number of filled stars corresponding to the rating
    Difficulty
    Medium
    Available Frameworks
  • Tabs IIPremium

    Build a semi-accessible tabs component that has the right ARIA roles, states, and properties
    Difficulty
    Medium
    Available Frameworks
  • Tabs IIIPremium

    Build a fully accessible tabs component that has keyboard support according to ARIA specifications
    Difficulty
    Medium
    Available Frameworks
  • Text SearchPremium

    Implement a function to highlight text if a searched term appears within it
    Difficulty
    Medium
    Languages
    HTMLJS
  • Traffic LightPremium

    Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely
    Difficulty
    Medium
    Available Frameworks
  • Deep EqualPremium

    Implement a function that determines if two values are equal
    Difficulty
    Medium
    Languages
    JS
  • Digital ClockPremium

    Build a 7-segment digital clock which shows the current time
    Difficulty
    Medium
    Available Frameworks
  • getElementsByClassNamePremium

    Implement a function to get all DOM elements that contain the specified classes
    Difficulty
    Medium
    Languages
    HTMLCSSJS
  • Progress Bars IIIPremium

    Build a list of progress bars which fill up gradually concurrently, up to a limit of 3
    Difficulty
    Medium
    Available Frameworks
  • Text Search IIPremium

    Implement a function to highlight text if searched terms appear within it
    Difficulty
    Medium
    Languages
    HTMLJS
  • Signup FormPremium

    Build a signup form that does validation on user details and submits to a back end API
    Difficulty
    Medium
    Available Frameworks
  • StopwatchPremium

    Build a stopwatch widget which can measure how much time has passed
    Difficulty
    Medium
    Available Frameworks
  • Curry IIIPremium

    Implement a function which transforms a function which takes variadic arguments into a function that can be repeatedly called with any number of arguments
    Difficulty
    Hard
    Languages
    JS
  • Progress Bars IVPremium

    Build a list of progress bars which fill up gradually concurrently, up to a limit of 3 and allows for pausing and resuming
    Difficulty
    Hard
    Available Frameworks
  • Data SelectionPremium

    Implement a function to filter rows of data matching a specified requirement
    Difficulty
    Hard
    Languages
    JS
  • Table of ContentsPremium

    Implement a function to construct a table of contents from a HTML document
    Difficulty
    Hard
    Languages
    HTMLJS
  • Deep Clone IIPremium

    Implement a function that performs a deep copy of a value, but also handles circular references
    Difficulty
    Hard
    Languages
    JS
  • JSON.stringifyPremium

    Implement a function that converts a JavaScript value into a JSON string
    Difficulty
    Hard
    Languages
    JS
Logos provided by Clearbit