Semantic markup, accessibility, forms, and document structure

HTML Essentials

Selectors, specificity, layout systems, and the cascade

CSS Mastery

Scope, closures, prototypes, and the tricky parts of JS

JavaScript Deep Dive

Event loop, promises, async/await, and execution order

Async JavaScript

DOM manipulation, events, storage, and web platform APIs

DOM & Browser APIs

Hooks, state management, rendering, and component patterns

React Core Concepts

HTML, CSS, and JavaScript basics combined

Frontend Foundations

JavaScript, DOM, and React - mid-level challenges

Frontend Intermediate

Performance, security, and advanced patterns

Frontend Advanced

Mixed difficulty - simulates real screening assessments

Technical Screen Prep

Implement a browser history class with navigation functionality like back, forward, and visiting new URLs.

Browser History

Build a counter application with undo and redo functionality that tracks operation history and allows users to navigate through past states.

Undo Redo

Remove all falsy values deeply nested in objects and arrays.

Deep Remove Falsy

Implement a custom version of the getElementsByTagName method from scratch.

getElementsByTagName

Function to calculate the angle between the two hands on a clock representing that time.

Clock Angle

Function that converts a hexadecimal color code to an RGB color code.

HEX to RGB

How would you style an SVG?

Why is input validation important?

A custom React hook for tracking window scroll position on both X and Y axes.

useScrollPosition

Shallow equality refers to the comparison of the immediate properties of two objects or arrays, without considering nested properties.

Shallow Equality

Checks if a given number falls within a specified range, adjusting for order and inclusive of boundaries.

inRange

Make sure the log function outputs the right value.

Right or wrong?

Implement a JavaScript function that creates counter objects with multiple operations.

Counter Advanced

Creates a new array where the original array is divided into multiple chunks each of the specified size.

Chop into Chunks

Currying is a technique of translating a function that takes multiple arguments into a sequence of functions.

mul(a)(b)(c)

A reusable kanban board component that allows users to organize and move cards between columns, demonstrating state management and user interaction in React.

Kanban Board

A conversational guide to understanding thunks in JavaScript—what they are, why they have a weird name, and how they help manage async operations.

What is an async thunk?

Manages unique elements, allowing for efficient addition, removal, and presence checks without duplicates.

What is the use of aria-label, aria-labelledby, and aria-live?

Executes asynchronous functions in sequence, each starting only after the previous one has completed.

Sequential Async

Implement a JavaScript function that creates customizable counters.

Counter Function

Implement a custom useMemo hook to memoize expensive computations.

Custom useMemo Hook

Converts a callback-based function to a promise-based function.

promisify

Write a function that takes a number and returns it clamped between a minimum and maximum value.

Clamp

Given a set of integers arr, return a new array of those integers greater than n.

Integers Greater Than

Given a query string, return an object of key value pairs.

String to Object

Could you find a security issue in this code snippet?

Find Security Issue

Creates a new array with elements passing a test in environments lacking native support.

Polyfill: filter( )

A chaining calculator is a class with methods for arithmetic operations, enabling successive method calls to be linked together in one continuous chain.

Chaining: Calculator

Emits events and registers listeners for handling asynchronous, event-driven operations.

Event Emitter

A simple javascript utility for conditionally joining classNames together.

classnames

The function retries a promise returning function with optional delays until success or a max attempt limit.

Retry Promise N Times

Checks if a given string consists solely of numeric digits, without any spaces, symbols, or decimal points.

isNumbersOnly

A custom React hook for detecting when an element is being hovered over.

useHover

Processing data sequentially through functions, where each uses the previous output as input.

pipe

A custom React hook for detecting user inactivity after a specified period of time.

useIdle

Convert snake case string to camel case string.

Snake to Camel

Executes multiple asynchronous functions concurrently, without waiting for any to complete before starting the next.

Parallel Async

Function to get elements by style property and value.

getElementsByStyle

Please review this code, find the bug, and fix it.

Code Review, Debug and Fix

Each nested property is transformed into a flat property with keys indicating their path in the original object.

Deep Flatten Object

How do you destructure nested objects?

What is object destructuring?

What is array destructuring?

What is singleton pattern?

How do you create a constructor function?

How to prevent the UI from blocking during a long running task?

A classic real world use case for Promise.all

City Fetcher API

How can I abort a Fetch API request in JavaScript, for instance, based on user actions or specific conditions?

Cancel Request

Passing function to initial state

stopPropagation() vs stopImmediatePropagation()

useTransition vs useDeferredValue

Create a JavaScript function that wraps the native fetch() API with caching capabilities.

fetch with cache & expiry

Difference between global scope, function scope, and block scope

Proxies in JavaScript

The longest contiguous sequence of URLs that appears in the browsing histories of users.

Contiguous History

Once

Returns a promise that resolves or rejects as soon as one of the promises in an iterable settles.

promise.race( )

Throttling optimizes performance by limiting function execution to a specified rate, preventing excessive calls over short intervals.

Throttle

A custom React hook for determining if a component has mounted for client-side vs server-side rendering.

useIsMounted

Automated counter in JavaScript that can be controlled programmatically.

Controllable Counter

polyfill function that replicates the behavior of the built-in Function.prototype.call() method.

Polyfill: call( )

Enhance a given class to return immutable copies of its instances and provide a method to check their mutability.

Immutability Challenge

Traverse DOM tree and flatten it into a one-dimensional array in breadth-first order.

Traverse DOM Tree

What would be the correct order of execution of the scripts?

Scripts Execution

A custom React hook for detecting clicks outside of a specified element.

useOnClickOutside

Retrieve and rank articles from a paginated API

Paginated Data Ranking

polyfill function that replicates the behavior of the built-in Function.prototype.apply() method.

Polyfill: apply()

Implement a custom version of the getElementsByClassName method from scratch.

getElementsByClassName

Cycle through arguments in sequence upon invocation.

Argument Rotator

A function that clears all active JavaScript timeouts at once.

clearAllTimeouts

Centering Elements in Webpages

Shallow merge combines objects, overriding duplicate properties with later values, without merging nested objects.

Shallow Merge

Component that allows users to submit feedback through a simple form with validation and accessibility features.

Feedback Form

Build a LinkedIn-style "People You May Know" component with HTML and CSS 👥

People You May Know

Create a beautiful masonry grid layout using modern CSS techniques. ✨

Masonry Layout

Create a smooth image zoom effect that enhances user engagement. ✨

Zoom Image on Hover

Classic example of why developers often use the self pattern (or arrow functions)

this challenge

The memoize function takes a function and returns its memoized variant, optimizing repeated calls by storing previous results.

Memoize

A reusable image carousel component that allows users to navigate through a collection of images with smooth transitions and intuitive controls.

Image Carousel

Object Comparison Output

The tiny animations brings a lot of joy to the user experience. ✨

Spinner with CSS

A custom React hook for tracking the previous value of a state variable.

usePrevious

Generate a table based on the number of rows and columns entered by the user.

Dynamic Table Generator

Groups the elements of an array based on a specified criterion.

findPattern

HTTP Methods

Create a matrix of random colors and more

Random Color Matrix

A function that clears all active JavaScript intervals at once.

clearAllIntervals

Vertically stacked set of interactive headings that each reveal an associated section of content.

Changelog

February 2026