Frontend practice
Every Frontend exercise, built from a topic you can open beside it.
82 exercises runs offline
All tracks Python 139 JavaScript 184 TypeScript 76 Go 106 Rust 75 Java 81 Kotlin 66 C++ 92 C# 88 Swift 68 PHP 69 Frontend 82 Backend 139 Architecture and system design 25 DevOps and cloud 15 Data and databases 5 Data science 31 AI and LLM engineering 75 Security 26 Game development 26 Coding in the AI era 101 CS foundations 164
level
ui Fill in new Which logical CSS property commonly lets a long flex item shrink below its automatic mini… Fill in ui Quiz new Which division of responsibility matches the browser platform? Quiz ui Fill in new Name the CSS function that gives a Grid track a minimum and a maximum size Fill in ui Quiz new A card should adapt to the width of its reusable panel, not the whole viewport. Which mec… Quiz ui Quiz new A Flexbox container uses `flex-direction: column`. Along which axis does `justify-content… Quiz ui Fill in new Name the meta element value that makes CSS viewport units and media queries use the devic… Fill in ui Quiz new Which layout problem is the clearest fit for CSS Grid rather than Flexbox? Quiz ui Fill in new Name the semantic HTML element for an action that runs in the current page. Include the a… Fill in ui Fill in new Name the media feature used to reduce or remove nonessential motion for users who request… Fill in ui Quiz new Which control is the sound starting point for an accessible “Save” action? Quiz ui Fill in new Which Sass directive loads a module with namespaced members and replaces legacy `@import`… Fill in ui Quiz new A Tailwind class `md:grid-cols-3` is present. When does it apply under the default mobile… Quiz ui Quiz new Why must a server validate a form even when native HTML and JavaScript validation already… Quiz ui Fill in new Name the JavaScript method that checks a form’s current HTML constraint validity without … Fill in ui Quiz new Which properties are usually the safest starting point for smooth CSS motion because they… Quiz ui Fill in new Name the attribute that associates a form control with a separate element containing its … Fill in ui Fill in new Name the Storybook story function used to run interactions after a story renders Fill in ui Quiz new Which concern must be evaluated when choosing a runtime CSS-in-JS library? Quiz ui Fill in new Name the Vitest environment commonly selected when a unit test needs browser-like DOM API… Fill in ui Quiz new Which Playwright locator is most resilient for a visible “Submit order” button? Quiz ui Quiz new What is the main purpose of Storybook `args` in a component story? Quiz ui Quiz new A Playwright assertion is flaky because content appears after an asynchronous request. Wh… Quiz ui Quiz new Which testing split gives fast diagnosis without giving up confidence in a critical check… Quiz ui Fill in new Name the approach that turns CSS-in-JS declarations into CSS files during the build inste… Fill in ui Fill in new Name the `package.json` field that tells bundlers whether importing files may run observa… Fill in ui Quiz new What lets Vite avoid rebuilding one large application bundle before serving every develop… Quiz ui Fill in new Name the responsive-image attribute that lists candidate image resources with width or pi… Fill in ui Quiz new A hero image needs a square crop on phones and a wide crop on desktops. Which markup expr… Quiz ui Quiz new Which JavaScript syntax establishes an asynchronous module boundary that a bundler can us… Quiz ui Quiz new A page jumps when product images load. Which narrow fix most directly improves the releva… Quiz ui Quiz new Why are ES modules generally easier to tree-shake than CommonJS modules? Quiz ui Fill in new Name the Vite object used by application code to read exposed environment variables Fill in ui Quiz new Which case most directly calls for a CSS keyframe animation rather than a transition? Use transitions and keyframes for interface state changes while handling timelines, fill modes, rendering cost, and reduced-motion preferences. ui Quiz new What does animation-fill-mode: forwards guarantee after an animation finishes? Use transitions and keyframes for interface state changes while handling timelines, fill modes, rendering cost, and reduced-motion preferences. ui Predict the output new What does this page log in a browser? Use transitions and keyframes for interface state changes while handling timelines, fill modes, rendering cost, and reduced-motion preferences. ui Review AI code new Review generated cart panel Use transitions and keyframes for interface state changes while handling timelines, fill modes, rendering cost, and reduced-motion preferences. ui Spot the bug new Spot the bug in the menu animation Use transitions and keyframes for interface state changes while handling timelines, fill modes, rendering cost, and reduced-motion preferences. ui Quiz new When can align-content visibly distribute space in a flex container? Understand Flexbox through its axes and flexible sizing algorithm, then handle overflow, wrapping, visual order, and generated-code failures. ui Quiz new A container uses flex-direction: column. Which property centers its items along that vert… Understand Flexbox through its axes and flexible sizing algorithm, then handle overflow, wrapping, visual order, and generated-code failures. ui Predict the output new What does this page log in a browser? Understand Flexbox through its axes and flexible sizing algorithm, then handle overflow, wrapping, visual order, and generated-code failures. ui Review AI code new Review generated checkout action row Understand Flexbox through its axes and flexible sizing algorithm, then handle overflow, wrapping, visual order, and generated-code failures. ui Spot the bug new Spot the bug in the profile row Understand Flexbox through its axes and flexible sizing algorithm, then handle overflow, wrapping, visual order, and generated-code failures. ui Quiz new What is the main review concern when grid-auto-flow: dense backfills a hole with a later … Understand CSS Grid through tracks, lines, and auto-placement, then handle responsive columns, overflow, visual order, and generated-code failures. ui Quiz new A 700px grid has columns 200px 1fr 2fr and a 20px gap between each pair. How is flexible … Understand CSS Grid through tracks, lines, and auto-placement, then handle responsive columns, overflow, visual order, and generated-code failures. ui Predict the output new What does this page log in a browser? Understand CSS Grid through tracks, lines, and auto-placement, then handle responsive columns, overflow, visual order, and generated-code failures. ui Review AI code new Review generated catalog grid Understand CSS Grid through tracks, lines, and auto-placement, then handle responsive columns, overflow, visual order, and generated-code failures. ui Spot the bug new Spot the bug in the mobile grid Understand CSS Grid through tracks, lines, and auto-placement, then handle responsive columns, overflow, visual order, and generated-code failures. ui Quiz new A drag handle receives a new x coordinate on every pointer event. Which styling shape bes… A practical model of runtime and build-time CSS-in-JS, with guidance for variants, dynamic values, the cascade, and server rendering. ui Predict the output new What does this finite-variant selector print? A practical model of runtime and build-time CSS-in-JS, with guidance for variants, dynamic values, the cascade, and server rendering. ui Review AI code new Review generated status card A practical model of runtime and build-time CSS-in-JS, with guidance for variants, dynamic values, the cascade, and server rendering. ui Quiz new Which statement accurately distinguishes runtime CSS-in-JS from build-time extraction? A practical model of runtime and build-time CSS-in-JS, with guidance for variants, dynamic values, the cascade, and server rendering. ui Spot the bug new Spot the bug in the styled-components wrapper A practical model of runtime and build-time CSS-in-JS, with guidance for variants, dynamic values, the cascade, and server rendering. ui Quiz new Which interface best simulates activation of a submit button and preserves constraint val… Build reliable form validation with native HTML constraints, accessible errors, server checks, cross-field rules, and safe asynchronous results. ui Predict the output new What does this page log in a browser? Build reliable form validation with native HTML constraints, accessible errors, server checks, cross-field rules, and safe asynchronous results. ui Review AI code new Review generated username form Build reliable form validation with native HTML constraints, accessible errors, server checks, cross-field rules, and safe asynchronous results. ui Quiz new Why must a server validate data that already passed browser constraint validation? Build reliable form validation with native HTML constraints, accessible errors, server checks, cross-field rules, and safe asynchronous results. ui Spot the bug new Spot the bug in password confirmation Build reliable form validation with native HTML constraints, accessible errors, server checks, cross-field rules, and safe asynchronous results. ui Quiz new Which implementation preserves native navigation if JavaScript does not run? Start from the browser execution model, separate HTML, CSS, and JavaScript responsibilities, and build interfaces you can run, access, and debug. ui Quiz new A matching CSS declaration is crossed out in developer tools. What should you inspect fir… Start from the browser execution model, separate HTML, CSS, and JavaScript responsibilities, and build interfaces you can run, access, and debug. ui Predict the output new What does this page log after the scripted click? Start from the browser execution model, separate HTML, CSS, and JavaScript responsibilities, and build interfaces you can run, access, and debug. ui Review AI code new Review generated product panel Start from the browser execution model, separate HTML, CSS, and JavaScript responsibilities, and build interfaces you can run, access, and debug. ui Spot the bug new Spot the bug in the save control Start from the browser execution model, separate HTML, CSS, and JavaScript responsibilities, and build interfaces you can run, access, and debug. ui Quiz new A page lists complete release notes that are also syndicated individually. Which element … Use elements for their defined purpose, understand landmarks, headings, native controls, and the accessibility tree, and review generated markup. ui Quiz new What is the best description of a header nested directly inside an article? Use elements for their defined purpose, understand landmarks, headings, native controls, and the accessibility tree, and review generated markup. ui Predict the output new What does this page log in a browser? Use elements for their defined purpose, understand landmarks, headings, native controls, and the accessibility tree, and review generated markup. ui Review AI code new Review generated article index Use elements for their defined purpose, understand landmarks, headings, native controls, and the accessibility tree, and review generated markup. ui Spot the bug new Spot the bug in the toolbar Use elements for their defined purpose, understand landmarks, headings, native controls, and the accessibility tree, and review generated markup. ui Quiz new A product card must be horizontal in a wide main column and vertical in a narrow sidebar … Adapt pages and components to available space, user preferences, and input capabilities without overflow, visual reordering, or wrong resource choices. ui Predict the output new What does this page log in a 640px-wide browser viewport with the default 16px root font … Adapt pages and components to available space, user preferences, and input capabilities without overflow, visual reordering, or wrong resource choices. ui Review AI code new Review generated responsive landing page Adapt pages and components to available space, user preferences, and input capabilities without overflow, visual reordering, or wrong resource choices. ui Quiz new What is the safest default when a two-column interface becomes one column? Adapt pages and components to available space, user preferences, and input capabilities without overflow, visual reordering, or wrong resource choices. ui Spot the bug new Spot the bug in the container-query card Adapt pages and components to available space, user preferences, and input capabilities without overflow, visual reordering, or wrong resource choices. ui Quiz new When can @use ... with configure a module? Sass compiles variables, modules, and reusable SCSS logic to CSS; learn its build boundary, module configuration, and selector expansion. ui Quiz new A user can switch themes after the page loads. Where should the changing color value live? Sass compiles variables, modules, and reusable SCSS logic to CSS; learn its build boundary, module configuration, and selector expansion. ui Predict the output new Which selector does this SCSS emit? Sass compiles variables, modules, and reusable SCSS logic to CSS; learn its build boundary, module configuration, and selector expansion. ui Review AI code new Review generated alert API Sass compiles variables, modules, and reusable SCSS logic to CSS; learn its build boundary, module configuration, and selector expansion. ui Spot the bug new Spot the bug in the Sass entry Sass compiles variables, modules, and reusable SCSS logic to CSS; learn its build boundary, module configuration, and selector expansion. ui Quiz new Which class set makes a grid one column by default, two from md, and four from xl? Tailwind CSS 4 generates static CSS from composable utilities, variants, and theme variables; learn source detection, responsive rules, and dynamic-class traps. ui Predict the output new Which background candidates can source detection see in full? Tailwind CSS 4 generates static CSS from composable utilities, variants, and theme variables; learn source detection, responsive rules, and dynamic-class traps. ui Review AI code new Review a generated Tailwind action button Tailwind CSS 4 generates static CSS from composable utilities, variants, and theme variables; learn source detection, responsive rules, and dynamic-class traps. ui Spot the bug new Spot the bug in the button focus style Tailwind CSS 4 generates static CSS from composable utilities, variants, and theme variables; learn source detection, responsive rules, and dynamic-class traps. ui Spot the bug new Spot the bug in the Tailwind CSS 4 entry Tailwind CSS 4 generates static CSS from composable utilities, variants, and theme variables; learn source detection, responsive rules, and dynamic-class traps.
No practice items match these filters.