We recommend these 4 areas of learning to prepare you holistically for your front end interview rounds. Explore guides and 200+ practice questions here.
Coding
3 subcategories of questions: JavaScript, User Interfaces & Data Structures and Algorithms
Quiz
Trivia-style front end questions asked across all interview rounds
System Design
Design, architecture and optimization decisions for common front end apps
Behavioral
Strategies to tackle the wide domain of behavioral interviews, specific to SWE
CounterWarm up questionBuild a simple counter that increments whenever a button is clicked
Available frameworks
Make CounterImplement a function that accepts an integer value and returns a function that can be repeatedly called to return increasing values
Languages
JSTS
MeanImplement a function that finds the mean of the values inside an array
Languages
JSTS
Min ByImplement a function that finds the minimum element based on the specified criteria
Languages
JSTS
StackImplement a stack data structure containing the common stack methods
Languages
JSTS
Type UtilitiesImplement utilities to determine primitive variable types in JavaScript
Languages
JSTS
Contact FormBuild a contact form which submits user feedback and contact details to a back end API
Available frameworks
CycleImplement a function that takes one or more values and returns a function that cycles through those values each time it is called
Languages
JSTS
Holy GrailBuild the famous holy grail layout consisting of a header, 3 columns, and a footer
Available frameworks
Insertion SortImplement a function that performs an insertion sort
Languages
JSTS
Type Utilities IIImplement utilities to determine non-primitive variable types in JavaScript
Languages
JSTS
Mortgage CalculatorBuild a calculator that computes the monthly mortgage for a loan
Available frameworks
Binary SearchImplement a function that performs binary search on an array of numbers
Languages
JSTS
Breadth-first SearchImplement a breadth-first search algorithm that traverses a directed graph in a breadth-first manner
Languages
JSTS
Count ByImplement a function that counts the number of times a value appears in an array based on a function or property name
Languages
JSTS
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
JSTS
Depth-first SearchImplement a depth-first search algorithm that traverses a directed graph in a depth-first manner
Languages
JSTS
Heap SortImplement a function that performs a heap sort
Languages
JSTS
QueueImplement a queue data structure containing the common queue methods
Languages
JSTS
TabsBuild a tabs component that displays a list of tab elements and one associated panel of content at a time
Available frameworks
ClassnamesImplement a function that conditionally joins CSS class names together
Languages
CSSJSTS
Data TableBuild a users data table with pagination features
Available frameworks
Dice RollerBuild a dice roller app that simulates the results of rolling 6-sided dice
Available frameworks
Event EmitterImplement a class that can subscribe to and emit events that trigger attached callback functions
Languages
JSTS
File ExplorerBuild a file explorer component to navigate files and directories in a tree-like hierarchical viewer
Available frameworks
FlattenImplement a function that recursively flattens an array into a single level deep
Languages
JSTS
Merge SortImplement a function that performs a recursive merge sort
Languages
JSTS
Modal DialogBuild a reusable modal dialog component that can be opened and closed
Available frameworks
Promise.allImplement the Promise.all() function that resolves to an array of results if all the input elements are resolved or rejects otherwise
Languages
JSTS
Quick SortImplement a function that performs a recursive quick sort
Languages
JSTS
Todo ListBuild a Todo list that lets users add new tasks and delete existing tasks
Available frameworks
Topological SortImplement a function that performs a topological sort
Languages
JSTS
Traffic LightBuild a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely
Available frameworks
Deep CloneImplement a function that performs a deep copy of a value
Languages
JSTS
Digital ClockBuild a 7-segment digital clock that shows the current time
Available frameworks
Image CarouselBuild an image carousel that displays a sequence of images
Available frameworks
Job BoardBuild a job board that displays the latest job postings from Hacker News
Available frameworks
ClampImplement a function to clamp a number within the inclusive lower and upper bounds
Languages
JSTS
Function LengthImplement a function that returns the number of parameters expected by a function
Languages
JSTS
Number of ArgumentsImplement a function that returns the number of arguments it was called with
Languages
JSTS
SleepImplement a function that pauses for a specified duration before resuming execution
Languages
JSTS
Array.prototype.squareImplement a custom Array.prototype.square() method that squares the values in an array
Languages
JSTS
Cancellable IntervalImplement a function that acts like setInterval but returns a function to cancel the interval
Languages
JSTS
Cancellable TimeoutImplement a function that acts like setTimeout but returns a function to cancel the pending callback
Languages
JSTS
ChunkImplement a function that creates an array of elements split into smaller groups of a specified size
Languages
JSTS
CompactImplement a function that creates an array with all falsey values removed
Languages
JSTS
DifferenceImplement a function that finds the difference in values between arrays
Languages
JSTS
Drop Right WhileImplement a function that excludes elements from the end of an array until the predicate returns false
Languages
JSTS
Drop WhileImplement a function that excludes elements from the beginning of an array until the predicate returns false
Languages
JSTS
FillImplement a function that fills an array with values within specified indices
Languages
JSTS
Find IndexImplement a function that returns the index of the first element in the array that satisfies the provided testing function
Languages
JSTS
Find Last IndexImplement a function that returns the index of the last element in the array that satisfies the provided testing function
Languages
JSTS
From PairsImplement a function that returns an object composed from key-value pairs
Languages
JSTS
Function.prototype.applyImplement the Function.prototype.apply() function that calls the function with a given `this` value and arguments as an array
Languages
JSTS
Function.prototype.callImplement the Function.prototype.call() function that calls the function with a given `this` value and provided arguments
Languages
JSTS
GetImplement a function to safely access deeply-nested properties in JavaScript objects
Languages
JSTS
In RangeImplement a function to check if a number falls between two numbers
Languages
JSTS
IntersectionImplement a function that computes the intersection of arrays, returning a new array containing unique values present in all given arrays
Languages
JSTS
Max ByImplement a function that finds the maximum element based on the specified criteria
Languages
JSTS
Object MapImplement a function to transform values within an object
Languages
JSTS
OnceImplement a function that accepts a callback and restricts its invocation to at most once
Languages
JSTS
Promise.rejectImplement a function to return a Promise object rejected with a reason
Languages
JSTS
RangeImplement a function that returns a sequence of numbers in ascending order
Languages
JSTS
Range RightImplement a function that returns a sequence of numbers in descending order
Languages
JSTS
Selection SortImplement a function that performs a selection sort
Languages
JSTS
SingletonImplement a Singleton class that ensures a class has only one instance while providing a global point of access to that instance
Languages
JSTS
Unique ArrayImplement a function to remove all duplicate values from an array
Languages
JSTS
AccordionBuild an accordion component that a displays a list of vertically stacked sections with each containing a title and content snippet
ComposeImplement a function that takes multiple functions as arguments and returns a new function that applies those functions in reverse
Languages
JSTS
Flight BookerBuild a component that books a flight for specified dates
Available frameworks
Function.prototype.bindImplement the Function.prototype.bind() function that creates a new function with the `this` keyword set to a provided value
Languages
JSTS
Generate TableGenerate a table of numbers given the rows and columns
Available frameworks
jQuery.cssImplement a jQuery-like function that sets the style of a DOM element
Languages
HTMLCSSJSTS
Progress BarBuild a progress bar component that shows the percentage completion of an operation
Available frameworks
Progress BarsBuild a list of progress bars that fill up gradually when they are added to the page
Available frameworks
Promise.raceImplement the Promise.race() function that resolves or rejects when any of the input elements are resolved or rejected
Languages
JSTS
SizeImplement a function that returns the size of collection
Languages
JSTS
SumImplement 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
Languages
JSTS
Temperature ConverterBuild a temperature converter widget that converts temperature values between Celsius and Fahrenheit
Available frameworks
TweetBuild a component that resembles a Tweet from Twitter
Available frameworks
Make Counter IIImplement a function that returns a counter object with methods to retrieve and manipulate the value
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
JSTS
Group ByImplement a function that groups values in an array based on a function or property name
Languages
JSTS
Intersection ByImplement a function that returns an array of unique values that are included in all given arrays based on a provided iteratee function
Languages
JSTS
Intersection WithComputes the intersection of arrays using a custom comparator function to determine equality between elements
Languages
JSTS
Is EmptyImplement a function to check if a value is an empty object, collection, map, or set
Languages
JSTS
LimitImplement a function that accepts a callback and restricts its invocation to at most N times
Languages
JSTS
Promise MergeImplement a function to merge the results of two promises into a single value
Languages
JSTS
Promise TimeoutImplement a function that resolves a promise if it is fulfilled within a timeout period and rejects otherwise
Languages
JSTS
Promise.resolveImplement a function to resolve a given value to a Promise
Languages
JSTS
Promise.withResolversImplement a function that returns an object containing a new `Promise` object and two functions to resolve or reject it
Languages
JSTS
PromisifyImplement a function that takes a function following the common error-first callback style and returns a version that returns promises
Languages
JSTS
Promisify IIImplement a promisify function that allows the original function to override the return value
Languages
JSTS
ThrottleImplement a function to control the execution of a function by limiting how many times it can execute over time
Languages
JSTS
TurtleImplement a Turtle class that moves a turtle on a 2D plane
Languages
JSTS
Union ByImplement a function that creates an array of unique values, in order, from all given arrays.
Languages
JSTS
Accordion IIBuild an accessible accordion component that has the right ARIA roles, states, and properties
Available frameworks
Accordion IIIBuild a fully accessible accordion component that has keyboard support according to ARIA specifications
Available frameworks
Analog ClockBuild an analog clock where the hands update and move like a real clock
Available frameworks
Camel Case KeysImplement a function to convert all the keys in an object to camel case
Languages
JSTS
Compact IIImplement a function that returns an object with all falsey values removed
Languages
JSTS
Conforms ToImplement a function that checks if object conforms to source
Languages
JSTS
Curry IIImplement a function that transforms a function that takes multiple arguments into a function that can be repeatedly called with any number of arguments
Languages
JSTS
Data MergingImplement a function to merge rows of data from the same user
Languages
JSTS
Data Table IIBuild a users data table with sorting features
Available frameworks
Debounce IIImplement a debounce function that comes with a cancel method to cancel delayed invocations and a flush method to immediately invoke them
Languages
JSTS
Event Emitter IIImplement a class that can subscribe to and emit events that trigger attached callback functions. Subscription objects are returned and can unsubscribe itself
Languages
JSTS
File Explorer IIBuild a semi-accessible file explorer component that has the right ARIA roles, states, and properties
Available frameworks
File Explorer IIIBuild a file explorer component using a flat DOM structure
Available frameworks
getElementsByStyleImplement a function to get all DOM elements that are rendered using the specified style
Languages
HTMLCSSJSTS
getElementsByTagNameImplement a function to get all DOM elements that match a tag
Languages
HTMLJSTS
Grid LightsBuild a grid of lights where the lights deactivate in the reverse order they were activated
Available frameworks
HTML SerializerImplement a function to serialize an object into an HTML string with indentation
Languages
HTMLJSTS
Identical DOM TreesImplement a function to determine if two DOM trees are the same
Languages
HTMLJSTS
jQuery Class ManipulationImplement a set of jQuery-like functions that manipulates classes on a DOM element
Languages
HTMLCSSJSTS
JSON.stringifyImplement a function that converts a JavaScript value into a JSON string
Languages
JSTS
Like ButtonBuild a Like button that changes appearance based on the states
Available frameworks
List FormatImplement a function that formats a list of items into a single readable string
Languages
JSTS
Map AsyncImplement a function that maps an array of items with an asynchronous mapping function
Languages
JSTS
MemoizeImplement a function that returns a memoized version of a function which accepts a single argument
Languages
JSTS
Modal Dialog IIBuild a semi-accessible modal dialog component that has the right ARIA roles, states, and properties
Available frameworks
Modal Dialog IIIBuild a moderately-accessible modal dialog component that supports common ways to close the dialog
Available frameworks
Progress Bars IIBuild a list of progress bars that fill up gradually in sequence, one at a time
Available frameworks
Promise.allSettledImplement the Promise.allSettled() function that resolves to an array of outcomes when all the input elements are either resolved or rejected
Languages
JSTS
Promise.anyImplement the Promise.any() function that resolves when any of the input elements are resolved
Languages
JSTS
Resumable IntervalImplement a function that creates a resumable interval object
Languages
JSTS
Squash ObjectImplement a function that returns a new object after squashing the input object into a single level of depth
Languages
JSTS
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
Tabs IIBuild a semi-accessible tabs component that has the right ARIA roles, states, and properties
Available frameworks
Tabs IIIBuild a fully accessible tabs component that has keyboard support according to ARIA specifications
Available frameworks
Text SearchImplement a function to highlight text if a searched term appears within it
Languages
HTMLJSTS
Deep EqualImplement a function that determines if two values are equal
Languages
JSTS
Deep MapImplement a function to recursively transform values
Languages
JSTS
getElementsByClassNameImplement a function to get all DOM elements that contain the specified classes
Languages
HTMLCSSJSTS
Map Async LimitImplement a function that maps an array of items with an asynchronous mapping function while not exceeding the concurrency limit
Languages
JSTS
Progress Bars IIIBuild a list of progress bars that fill up gradually concurrently, up to a limit of 3
Available frameworks
Text Search IIImplement a function to highlight text if searched terms appear within it
Languages
HTMLJSTS
Tic-tac-toeBuild a tic-tac-toe game that is playable by two players
Available frameworks
Birth Year HistogramBuild a widget that fetches birth year data from an API and plot it on a histogram
Available frameworks
Connect FourBuild a game for two players who take turns to drop colored discs from the top into a vertically suspended board/grid
Available frameworks
Deep MergeImplement a function that merges two objects together
Languages
JSTS
Deep OmitImplement a function that removes specified keys and their corresponding values from an object, including nested objects or arrays
Languages
JSTS
Image Carousel IIBuild an image carousel that smoothly transitions between images
Available frameworks
Memoize IIImplement a function that returns a memoized version of a function which accepts any number of arguments
Languages
JSTS
Pixel ArtBuild a pixel art drawing tool where users can paint pixels with selected colors
Available frameworks
Signup FormBuild a signup form that does validation on user details and submits to a back end API
Available frameworks
StopwatchBuild a stopwatch widget that can measure how much time has passed
Available frameworks
Transfer ListBuild a component that allows transferring of items between two lists
Available frameworks
Undoable CounterBuild a counter with a history of the values and ability to undo/redo actions
Available frameworks
Users DatabaseBuild a UI to filter, create, update, and delete users
Available frameworks
Whack-A-MoleBuild a popular arcade game where players attempt to hit moles as they pop up from holes in a board
Available frameworks
Memory GameBuild a memory game where the player needs to match pairs of cards
Available frameworks
Curry IIIImplement a function which transforms a function which takes variadic arguments into a function that can be repeatedly called with any number of arguments
Languages
JSTS
Auth Code InputBuild an auth code input component that allows users to enter a 6-digit authorization code
Available frameworks
Classnames IIImplement a function that conditionally joins CSS class names together and also handles de-duplication and function values
Languages
CSSJSTS
Progress Bars IVBuild a list of progress bars that fill up gradually concurrently, up to a limit of 3 and allows for pausing and resuming
Available frameworks
Backbone ModelImplement a class resembling Backbone.Model which allows storing of attributes/values and responding to changes in specific attribute values
Languages
JSTS
Data SelectionImplement a function to filter rows of data matching a specified requirement
Languages
JSTS
Data Table IIIBuild a generalized data table with pagination and sorting features