Tutorial

Learn sumi one small change at a time. Each lesson is a real component you edit and compile in your browser. Taking you to the first lesson now…

1. Hello, sumi Introduction
2. Elements Introduction
3. The three sections Introduction
4. Your first signal Signals
5. Updating state Signals
6. Derived values Signals
7. Text vs attributes Signals
8. Snippets Composition
9. Snippet arguments Composition
10. If blocks Logic
11. Else Logic
12. For loops Logic
13. Keyed loops Logic
14. Handling clicks Events
15. Key events Events
16. Bubbling and defaults Events
17. Two-way bind:value Bindings
18. Checkboxes with bind:checked Bindings
19. Select and radio groups Bindings
20. Selectors and the cascade Styling
21. State pseudo-classes Styling
22. Terminal CSS Styling
23. Flexbox Layout
24. Grid Layout
25. Overflow and scroll Layout
26. Focus and tab order Forms and focus
27. Dialogs Forms and focus
28. Details and summary Forms and focus
29. Transitions Motion
30. Keyframe animations Motion
31. Light and dark The terminal
32. Colour depth The terminal
33. Inline mode The terminal
34. Where next Where next