Design System Components

Elevate your front-end skills by practicing the creation of front end design system components.

All Practice Questions

Coding Format

Questions List

  • TabsBuild a tabs component that displays a list of tab elements and one associated panel of content at a time
    Available frameworks
  • Modal DialogBuild a reusable modal dialog component that can be opened and closed
    Available frameworks
  • AccordionBuild an accordion component that a displays a list of vertically stacked sections with each containing a title and content snippet
    Available frameworks
  • Progress BarBuild a progress bar component that shows the percentage completion of an operation
    Available frameworks
  • 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
  • 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
  • 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
  • Modal Dialog IVBuild a fully-accessible modal dialog component that supports all required keyboard interactions
    Available frameworks