Code examples
Understand the idea. Try the code. Take one small step forward.
01—03 · Interface foundations
Build usable navigation, cards and forms.
04—05 · Stateful interaction
Practice language selection and debounced input.
Study the mechanism, run the example, then attempt the challenge before opening the solution. Every chapter includes verification and common boundaries.
01 · Wrapping navigation and keyboard paths
Build navigation that survives changing link counts and distinguish navigation from actions.
02 · Cards, hierarchy and click targets
Give variable-length content a clear structure without nested links or brittle dimensions.
03 · Form validation and submission boundaries
Combine native constraints with business validation and consistent mouse and keyboard submission.
04 · Language picker: disclosure, selection and focus
Implement a two-step language picker with deliberate selection and predictable keyboard closing.
05 · Debounced search and composition events
Reduce repeated work during typing and distinguish debounce from request cancellation.