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 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 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 the classic Holy Grail layout: a full-width header, three side-by-side columns, and a full-width footer. The center column grows to use the available space, while the footer stays at the bottom when the content is short. The markup and visual styling are supplied; implement the layout in the separate CSS file using Flexbox, Grid, or both.

Build a list of progress bars that fill gradually when added. The page starts with an Add progress bar button and an empty list. Each click appends a new bar that starts near 0% and reaches 100% after approximately two seconds. Multiple bars run concurrently and independently; adding one must not restart existing bars.

Create a small booking form that switches between one-way and return travel. Coordinate date availability, date validation and the confirmation shown after submission.

Turn two dimension inputs into a numbered table. Practice validating user input and rendering a two-dimensional collection without manually creating DOM nodes.

Build a controlled completion indicator. Keep its visual fill, percentage label and accessible value synchronized as the user edits the percentage.

Create two linked temperature fields. Users can edit either scale, and the other value should follow immediately while preserving the text being typed.