Build your frontend skills.

Build a click counter with one button. Its label starts at Clicks: 0 and increases by one whenever the button is activated.

Build a todo list that lets users add tasks, mark them complete or active, and delete them. Use the selected framework to manage state and render updates.

Build a simple user profile card. Fetch the supplied demo API once when the component mounts, save its JSON response in state, and render the name, email, and city. Demo API: GET /api/demo/user on this app. It returns fictional public data: { "id": 1, "name": "Maya Patel", "email": "maya@example.com", "city": "Pune" } . No login or API key is needed. In the sandbox, import APP_ORIGIN from /__frontcrate_api__.js and fetch APP_ORIGIN + "/api/demo/user" . The starter comment includes this URL.

Build a controlled contact form with Name, Email, and Message fields. Keep each field in framework state and update it as the user types. On submission, display a snapshot of the entered values without reloading the page. This is a local form exercise: no API, email delivery, or backend is required. The starter intentionally contains only a form and one empty text input.

Build a reusable component that shows a row of tab buttons and one matching content panel at a time. Use local state to track selection, support a starting tab, and keep multiple groups independent. The supplied page contains two populated groups and an empty group. Add interaction to the starter components; styles and sample content are already provided.

Build a reusable tabs component with the ARIA roles, selection state, and relationships that describe a tabbed interface. A click selects one tab and reveals its associated panel while the other panels stay mounted and hidden. The demo provides two populated groups and an empty group. Complete the supplied markup starters and keep every group's selection independent. This stage focuses on semantics and click interaction; custom keyboard navigation is introduced in Tabs III.

Build a reusable horizontal tabs component with complete ARIA relationships and keyboard navigation. These panels contain local text that is already available, so use automatic activation: a tab becomes selected as soon as it receives focus. The supplied page has two populated groups and an empty group. Complete the component in your chosen framework while preserving the sample content and separate styles. A keyboard user should enter each group at its selected tab, navigate with the arrow keys, and continue to its visible panel using the normal Tab sequence.

Build a reusable ColorList that starts with a supplied array of green and red items. Each item is a button, and its current color determines what happens when it is clicked. A green click turns only the clicked item red, keeps it in the same position, and appends one new green item to the end of that list. A red click removes only the clicked item. Repeated colors are separate items: changing one must never change every item with that color. The supplied App renders primary, secondary, empty, and red-only lists. Implement the interactions in the selected framework and keep each instance independent.

Build a reusable accordion that reveals a topic's content when its heading button is clicked. Each group can have at most one panel open, and clicking its open heading closes the group. The supplied page includes primary and secondary groups, an empty group, and a single-item group. Add local state and click behavior to the starter component. All panels start closed, and the demo content and CSS are already provided.

Build a reusable accordion whose native heading buttons reveal and hide their associated panels. Each group starts fully collapsed, permits at most one expanded item, and can return to having no expanded item. Add accessible expanded state and stable links between each header and panel. The supplied demo includes two populated groups, an empty group, and a single-item group. Keep state independent for every instance and complete the markup starters.