获得完整访问权限
新与我们合作推广 ->
获得完整访问权限

用户界面编码

使用 HTML、CSS、JavaScript 或流行的 UI 框架（如 React、Angular 或 Vue）构建动态用户界面。
在浏览器中编码
由前面试官解答
测试场景

题目列表

用户界面编码指南在开始练习之前，获得对必备技巧的内部概述，以有效地进行准备。
0/3 指南
指南
  • Counter热身问题Build a simple counter that increments whenever a button is clicked
    可用的框架
  • AccordionBuild an accordion component that a displays a list of vertically stacked sections with each containing a title and content snippet
    可用的框架
  • Contact FormBuild a contact form which submits user feedback and contact details to a back end API
    可用的框架
  • Holy GrailBuild the famous holy grail layout consisting of a header, 3 columns, and a footer
    可用的框架
  • Progress BarsBuild a list of progress bars that fill up gradually when they are added to the page
    可用的框架
  • Mortgage CalculatorBuild a calculator that computes the monthly mortgage for a loan
    可用的框架
  • TabsBuild a tabs component that displays a list of tab elements and one associated panel of content at a time
    可用的框架
  • Data TableBuild a users data table with pagination features
    可用的框架
  • Dice RollerBuild a dice roller app that simulates the results of rolling 6-sided dice
    可用的框架
  • File ExplorerBuild a file explorer component to navigate files and directories in a tree-like hierarchical viewer
    可用的框架
  • Like ButtonBuild a Like button that changes appearance based on the states
    可用的框架
  • Modal DialogBuild a reusable modal dialog component that can be opened and closed
    可用的框架
  • 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
    可用的框架
  • Todo ListBuild a Todo list that lets users add new tasks and delete existing tasks
    可用的框架
  • Traffic LightBuild a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely
    可用的框架
  • Digital ClockBuild a 7-segment digital clock that shows the current time
    可用的框架
  • Tic-tac-toeBuild a tic-tac-toe game that is playable by two players
    可用的框架
  • Image CarouselBuild an image carousel that displays a sequence of images
    可用的框架
  • Job BoardBuild a job board that displays the latest job postings from Hacker News
    可用的框架
  • StopwatchBuild a stopwatch widget that can measure how much time has passed
    可用的框架
  • Transfer ListBuild a component that allows transferring of items between two lists
    可用的框架
  • Nested CheckboxesBuild a nested checkboxes component with parent-child selection logic
    可用的框架
  • Flight Booker高级Build a component that books a flight for specified dates
    可用的框架
  • Generate Table高级Generate a table of numbers given the rows and columns
    可用的框架
  • Progress Bar高级Build a progress bar component that shows the percentage completion of an operation
    可用的框架
  • Temperature Converter高级Build a temperature converter widget that converts temperature values between Celsius and Fahrenheit
    可用的框架
  • Tweet高级Build a component that resembles a Tweet from Twitter
    可用的框架
  • Accordion II高级Build an accessible accordion component that has the right ARIA roles, states, and properties
    可用的框架
  • Accordion III高级Build a fully accessible accordion component that has keyboard support according to ARIA specifications
    可用的框架
  • Analog Clock高级Build an analog clock where the hands update and move like a real clock
    可用的框架
  • Data Table II高级Build a users data table with sorting features
    可用的框架
  • File Explorer II高级Build a semi-accessible file explorer component that has the right ARIA roles, states, and properties
    可用的框架
  • File Explorer III高级Build a file explorer component using a flat DOM structure
    可用的框架
  • Grid Lights高级Build a grid of lights where the lights deactivate in the reverse order they were activated
    可用的框架
  • Modal Dialog II高级Build a semi-accessible modal dialog component that has the right ARIA roles, states, and properties
    可用的框架
  • Modal Dialog III高级Build a moderately-accessible modal dialog component that supports common ways to close the dialog
    可用的框架
  • Progress Bars II高级Build a list of progress bars that fill up gradually in sequence, one at a time
    可用的框架
  • Tabs II高级Build a semi-accessible tabs component that has the right ARIA roles, states, and properties
    可用的框架
  • Tabs III高级Build a fully accessible tabs component that has keyboard support according to ARIA specifications
    可用的框架
  • Progress Bars III高级Build a list of progress bars that fill up gradually concurrently, up to a limit of 3
    可用的框架
  • Birth Year Histogram高级Build a widget that fetches birth year data from an API and plot it on a histogram
    可用的框架
  • Connect Four高级Build a game for two players who take turns to drop colored discs from the top into a vertically suspended board/grid
    可用的框架
  • Image Carousel II高级Build an image carousel that smoothly transitions between images
    可用的框架
  • Pixel Art高级Build a pixel art drawing tool where users can paint pixels with selected colors
    可用的框架
  • Signup Form高级Build a signup form that does validation on user details and submits to a back end API
    可用的框架
  • Undoable Counter高级Build a counter with a history of the values and ability to undo/redo actions
    可用的框架
  • Users Database高级Build a UI to filter, create, update, and delete users
    可用的框架
  • Whack-A-Mole高级Build a popular arcade game where players attempt to hit moles as they pop up from holes in a board
    可用的框架
  • Memory Game高级Build a memory game where the player needs to match pairs of cards
    可用的框架
  • Auth Code Input高级Build an auth code input component that allows users to enter a 6-digit authorization code
    可用的框架
  • Progress Bars IV高级Build a list of progress bars that fill up gradually concurrently, up to a limit of 3 and allows for pausing and resuming
    可用的框架
  • Data Table III高级Build a generalized data table with pagination and sorting features
    可用的框架
  • Modal Dialog IV高级Build a fully-accessible modal dialog component that supports all required keyboard interactions
    可用的框架
  • Data Table IV高级Build a generalized data table with pagination, sorting and filtering features
    可用的框架
  • Image Carousel III高级Build an image carousel that smoothly transitions between images that has a minimal DOM footprint
    可用的框架
  • Selectable Cells高级Build an interface where users can drag to select multiple cells within a grid
    可用的框架
  • Tic-tac-toe II高级Build an N x N tic-tac-toe game that requires M consecutive marks to win
    可用的框架
  • Transfer List II高级Build a component that allows transferring of items between two lists, bulk selection/unselection of items, and adding of new items
    可用的框架
  • Wordle高级Build Wordle, the word-guessing game that took the world by storm
    可用的框架