680+ frontend interview questions
Practice frontend interviews in a real browser editor.
Pick a JavaScript or UI question. Write the code and run the tests in the same tab. React, Vue, Angular, and Vanilla starters are ready.
It opens in your browser. You can start without a credit card.
Get Premium forBuild a debounce utility
Delay the callback until calls have stopped for the given wait time.
debounce(fn, 200)// Implement debounce
function debounce(fn, wait) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, wait);
};
}The practice loop
Less tab switching.
More problem solving.
Everything you need to work through a question, understand the edge cases, and make your next attempt better.
01 / Write and test
Write the answer and run the tests.
The prompt, editor, and test results stay in one workspace. Start from the provided files and see which case still fails before you submit.
- Edit the real starter files
- See every passing and failing test
function debounce(fn, wait) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, wait); };}A real test runner
A small edit. Instant feedback.
Delete clearTimeout in the live editor below. The reset test will fail, and it will pass again when you restore the line.
Editable code
Type directly into the example and reset it whenever you want.
Tests in the browser
The suite runs in an isolated worker after each edit.
function debounce(fn, wait) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, wait);
};
}One prompt, four implementations
One component. Four ways to build it.
Switch frameworks without leaving the question. The code on the left and the preview on the right are both live. Your answer stays separate in every variant.
import { useState } from 'react';
export default function Accordion() {
const [openId, setOpenId] = useState('html');
return sections.map((section) => (
<section key={section.id}>
<button
aria-expanded={openId === section.id}
onClick={() => setOpenId(section.id)}
>
{section.title}
</button>
{openId === section.id && <p>{section.body}</p>}
</section>
));
}Frontend foundations
HTML gives the page its structure and meaning.
Study plans
Make room for consistent practice.
The plan tells you what to practice next. You still write every answer and run every test yourself.
1 week
42 questions
A full-time 7-day crash course covering the highest-leverage JavaScript, algorithms, and UI patterns. Six focused questions a day, ordered from language fundamentals to practical component work.
1 month
150 questions
A full-time 30-day program from fundamentals to mid-level depth: five important questions a day across JavaScript, data structures and algorithms, DOM work, hooks, and production-style components.
3 months
360 questions
The comprehensive full-time track: twelve weeks and 360 carefully prioritized questions across JavaScript, algorithms, the DOM, hooks, accessibility, and UI system-design components.
Question bank
Browse frontend interview questions by topic and difficulty.
The catalog has 680+ JavaScript, UI, browser, algorithm, and system design questions. 480+ are free.
Debounce
Implement a function that delays invoking another function until a specified period of inactivity has passed.
Accordion
Build an accordion component with stacked sections whose content panels expand and collapse on click.
Promise.all
Implement Promise.all so it resolves with an array of results or rejects on the first rejection.
Todo List
Build a Todo List component with add and delete actions, with focus on functionality over styling.
Image Carousel
Build an image carousel that lets you page through a sequence of images with previous and next controls.
Throttle
Implement a function that limits how often a wrapped function can be invoked within a time window.
Premium pricing
Unlock the full library.
Make every session count.
Everything in Free, plus the complete Premium question library, system design articles, and guided preparation.
680+ practice questions
The complete library, including every Premium challenge.
Worked solutions
Implementations, edge cases, and complexity explained.
Premium system design
Go deeper into architecture and engineering tradeoffs.
Guided preparation
1-week, 1-month, and 3-month plans, plus curriculum tracks.
Four framework variants
Practice in React, Vue, Angular, and Vanilla JavaScript.
Your complete workspace
Live tests, saved code, and progress synced across devices.
UIReady Premium
One place for your entire interview prep.
Included with Premium
- Every Premium question and solution
- All study plans and curriculum tracks
- Premium system design articles
- New free and Premium questions
Your next question is ready
Try a full question before you create an account.
The free question includes the prompt, editor, and tests. Sign in when you want UIReady to save your code and progress.
FAQ
Answers before you start.
Everything you need to know before opening your first frontend interview question.
Can I try UIReady without paying?
480+ questions are free. The editor, tests, previews, and progress tracking all work on the free tier.
Which frameworks can I practice?
UI questions are available in React, Vue, Angular, and plain HTML, CSS, and JavaScript. Your work is saved separately for each variant.
Are the examples on this page real?
Yes. The Debounce example runs its test suite in an isolated browser worker, and the Accordion example compiles a real preview in the framework you pick.
What happens when I get stuck?
Open the worked solution after you have tried the problem. It covers the implementation, missed edge cases, complexity, and the reasoning an interviewer may ask you to explain.
