The Work Gym

Courses / Programming

Front end

Build accessible pages and React applications in a live browser preview.

Start lesson 1 Practice interview Take the assessmentPractice the first unit of every course. No account needed.

62lessons

328checked exercises

12projects, cases and exams

Prepares you for Front end development interviews and practical job tests

Projects, case studies and mock exams

Project · IntermediateProduct listing project

A catalog is several small behaviors sharing one set of records.

8 steps Project · IntermediateAccessible modal and tabs project

A modal changes where people can interact, so opening it is only the first requirement.

8 steps Project · AdvancedTravel request form

A multi-step form has one user task spread across several screens.

6 steps Project · AdvancedScheduling dashboard

A dashboard becomes unreliable when its table, total, and controls each use a different copy of the data.

6 steps Case study · AdvancedWorkload total incident review

An operations manager has found a mismatch between a workload table and its headline total.

6 steps Project · ExpertFulfillment kanban board

A kanban board keeps an identity and a location for every card.

6 steps Case study · ExpertMedia loading incident review

Performance work starts with evidence about a specific cost.

6 steps Mock exam · ExpertTimed front end job exercise

You are preparing a front end release for another team.

8 questions · 35 min Mock exam · ExpertTimed React application test

Complete eight original React state, effects, data and interaction tasks in 45 minutes.

8 questions · 45 min

Write HTML, CSS, JavaScript, and React in a file editor with a live preview. Start with semantic structure, keyboard access, and responsive layouts. Then work with events, component state, effects, and asynchronous data. Checks run your page at desktop and phone widths using visible behavior and fresh fixture data.

Build product filters, an accessible modal and tabs, a multi-step form, a dashboard, and a kanban board. Practice component interviews and timed job tests. The preview uses local React and mocked requests. It cannot connect to external services or access the surrounding page.

Interview practice

Explain what you've learned in a full-screen interview. Speak or type, then review your answers against the rubric for your level.

Interview loops by job

Beginner

Semantic pages

Build meaningful HTML, connected forms, and native keyboard controls.

5 lessons

1HTML structure and semanticsA page has structure before it has a layout.4 exercisesFree

2Links and mediaA link takes someone to a destination.4 exercisesFree

3Forms and labelsA form control needs a name that people can see and assistive technology can identify.4 exercisesFree

4Keyboard and accessible namesKeyboard access starts with the right element.4 exercisesFree

Practice setSemantic pages practiceJuniper Works is preparing a handoff screen for another team.Free

CSS foundations

Control cascade, geometry, readable text, and one-dimensional layouts.

5 lessons

6Cascade and specificityCSS decides between competing declarations through the cascade.4 exercisesWith a plan

7The box modelThe width you declare doesn't always equal the width you see.4 exercisesWith a plan

8Type, contrast, and focusReadable text needs space and contrast.4 exercisesWith a plan

9FlexboxFlexbox lays out items along one main axis.4 exercisesWith a plan

Practice setCSS foundations practiceNorthbank Studio is reusing the same interface patterns in a production handoff screen.With a plan

Responsive interfaces

Build grids, local overlays, flexible layouts, and shared design values.

5 lessons

11GridGrid gives you rows and columns together.4 exercisesWith a plan

12Positioning and stackingA positioned child needs a containing block.4 exercisesWith a plan

13Responsive layoutsResponsive design changes the arrangement when the available space changes.4 exercisesWith a plan

14Custom properties and transitionsCustom properties let related rules share a value.4 exercisesWith a plan

Practice setResponsive layout practiceA different handoff page needs the layout patterns from this unit.With a plan

Intermediate

DOM interfaces

Connect document nodes, delegated actions, and validated form behavior.

5 lessons

16DOM selection and safe textThe DOM represents the current page as nodes and properties.4 exercisesWith a plan

17Browser eventsAn event handler runs when the browser reports an interaction.4 exercisesWith a plan

18Event delegationEvents usually bubble from a nested target through its ancestors.4 exercisesWith a plan

19Scripted formsA submit handler belongs on the form, so its behavior also works when the form is submitted from the keyboard.4 exercisesWith a plan

Practice setDOM practiceCove Logistics needs a handoff screen that responds to real interactions.With a plan

Data and components

Handle local requests, compose components, and build a working filtered catalog.

5 lessons

21Fetch and request statesFetching data is asynchronous, so the interface passes through more than one state.4 exercisesWith a plan

22Components and propsA React component describes part of the interface from its inputs.4 exercisesWith a plan

23State and event updatesState lets a component remember a value between renders.4 exercisesWith a plan

ProjectProduct listing projectA catalog is several small behaviors sharing one set of records.With a plan

Practice setData and components practiceVale Media is combining request handling with reusable interface components.With a plan

Coordinated React

Preserve list identity, share state, clean up Effects, and build an accessible modal.

5 lessons

26Lists and stable identityA list row has an identity beyond its current position.4 exercisesWith a plan

27Controlled forms and shared stateA controlled field gets its current value from state and sends edits back through an event handler.4 exercisesWith a plan

28Effects and cleanupAn Effect synchronizes a component with something outside React, such as a document property, browser event subscription, or asynchronous request.4 exercisesWith a plan

ProjectAccessible modal and tabs projectA modal changes where people can interact, so opening it is only the first requirement.With a plan

Practice setCoordinated React practiceThe final intermediate review combines list identity, controlled input, shared state, and external synchronization.With a plan

Advanced

Shared application state

Coordinate distant consumers, pure transitions, reusable hooks and a multi-step form.

5 lessons

31Context providers and consumersState shared by distant components needs a clear owner.4 exercisesWith a plan

32Reducer transitions and boundariesA reducer turns an interaction into a next state.4 exercisesWith a plan

33Reusable stateful hooksA custom hook packages stateful behavior behind a name.4 exercisesWith a plan

ProjectTravel request formA multi-step form has one user task spread across several screens.With a plan

Practice setShared state practiceYou are reviewing a release for a new operations team.With a plan

Resilient effects

Clean up resources, recover requests and build a filtered workload dashboard.

5 lessons

36Effect setup and cleanupAn effect connects a component to something outside React.4 exercisesWith a plan

37Loading, errors and retryA request has several visible states.4 exercisesWith a plan

38Request ordering and cancellationRequests can finish in a different order from the order they started.4 exercisesWith a plan

ProjectScheduling dashboardA dashboard becomes unreliable when its table, total, and controls each use a different copy of the data.With a plan

Practice setResilient effects practiceYou are reviewing a release for a new operations team.With a plan

Component quality

Prove behavior through user interactions and keep derived output correct while reducing work.

6 lessons

41Writing component behavior testsA component test should describe what a person can observe.4 exercisesWith a plan

42Memoized components and derived valuesMemoization reuses the result of a calculation when its inputs have not changed.4 exercisesWith a plan

45Memoized child componentsA parent can render because its own note changed even when a child still receives the same quantity.4 exercisesWith a plan

Case studyWorkload total incident reviewAn operations manager has found a mismatch between a workload table and its headline total.With a plan

Interview setFront end interview: mediumYou are reviewing a release for a new operations team.With a plan

Practice setComponent quality practiceYou are reviewing a release for a new operations team.With a plan

Expert

Accessible interaction patterns

Build keyboard autocomplete, ratings, nested discussion controls and an append-only feed.

5 lessons

47Autocomplete with keyboard selectionAn autocomplete combines an editable input with a list of suggestions.4 exercisesWith a plan

48Ratings and roving keyboard focusA rating is a choice from a known scale.4 exercisesWith a plan

49Infinite feeds and explicit paginationAn infinite feed appends records instead of replacing the current page.4 exercisesWith a plan

Interview setFront end interview: easyYou are preparing a front end release for another team.With a plan

Practice setAccessible widget practiceYou are preparing a front end release for another team.With a plan

Responsive performance

Cancel stale search work, preserve recursive state and meet desktop and phone layout specifications.

5 lessons

52Debounced search and cancellationA debounced search waits until typing pauses before sending work.4 exercisesWith a plan

53Recursive comments and branch stateNested discussions repeat the same shape at different depths.4 exercisesWith a plan

54Responsive layouts to a specificationA responsive specification describes relationships between boxes, not one screenshot.4 exercisesWith a plan

Interview setFront end interview: hardYou are preparing a front end release for another team.With a plan

Practice setResponsive performance practiceYou are preparing a front end release for another team.With a plan

Delivery and assessment

Deliver a keyboard kanban board, review loading evidence and complete two timed job exercises.

6 lessons

57Bounded media and layout stabilityAn image can affect loading work and layout stability in different ways.4 exercisesWith a plan

ProjectFulfillment kanban boardA kanban board keeps an identity and a location for every card.With a plan

Case studyMedia loading incident reviewPerformance work starts with evidence about a specific cost.With a plan

Mock examTimed front end job exerciseYou are preparing a front end release for another team.With a plan

Mock examTimed React application testComplete eight original React state, effects, data and interaction tasks in 45 minutes.With a plan

Practice setExpert front end transfer practiceYou are preparing a front end release for another team.With a plan