💡 Tutorial 101

### 👋 Welcome! [This is a tutorial block]

🎓 This tutorial is a *light-code* `module` that demonstrates basic **building blocks**, or just `blocks` :

- ✅ Formatted text
- ✅ Basic blocks (image / text / videos)
- ✅ Interactive maps / proxies
- ✅ Data components (forms / grids / charts)
- ✅ Objects encapsulating data / state / behavior / functions
- ✅ Quizzes

Go ahead, explore, play, learn and have fun! 🎉

### 📖 This block is a text [Blocks can display formatted text, hints and help]

A `text` block is a simple block that displays formatted text.

- ✅ Formatted text **bold** / *italic* / colors
- ✅ Item lists
- ✅ Bouquet 🌹🌸💐🌺🌼🌻
- ✅ Text blocks use hints/helps
- ✅ Actually all blocks use hints/helps

Lightcode relies on **nothing** on the server side. It runs **markdown** files with tiny custom kramdown decorations to bring blocks alive.

### 🐕 This text block has an image [Blocks can also show images]

**Man's best friend** 🐶

![Lucky — a black Labrador](https://picsum.photos/id/237/500/400)

Cute, huh — this local dog?

### 📖 Doc [This is documentation about dogs]

Docs about dogs can use **bold** and *italic* text
and also be quite long and boring …

> In the haze of a London fog,
> A riff emerges, cutting like a saw.
> Strumming strings and pounding drums,
> Led Zeppelin, their magic comes.
> 
> Amid the mist, a black dog roams,
> Guiding the band to rock and roll thrones.
> Not just a pet, but a symbol, a sign,
> Of music that transcends all time.
>
> Amid the crowd, the thunder roars,
> With every note, the spirit soars.
> From stairways high to oceans deep,
> Their legacy forever to keep.

Read more about [markdown](https://www.markdownguide.org/cheat-sheet/).

### 🐕 Proxy [This is a proxy, including content from another module]

This is a `proxy`, including content from another module.

[Lucky](/_dog)

{: .embed }

### 🐕 Proxy too [Just another proxy to the same module]

Just another `proxy`, including content from the same other module.

[Lucky](/_dog)

{: .embed }

### 🐕 Grid [Editable — click a cell to change a value, then watch the chart]

Select a row to update the chart → edit a number to refresh it.

```csv
breed,top_speed_kmh,cute
Greyhound,72,70
Saluki,68,72
Vizsla,64,78
Jack Russell,56,85
Border Collie,48,82
German Shepherd,48,80
Labrador,40,92
Beagle,40,88
Corgi,35,95
Pug,15,98
Bulldog,14,90
```
{: .dataset #dog_data }

```csv
```
{: .datagrid bind="dog_data" #dog_grid_tuto title="Dog top speeds & cuteness" height="280" editable="true" }

### 📊 Chart [Updates live when you select or edit a row]

Updates when you select a row in the grid ← edit a value and it refreshes.

[Selected dog](#)
{: .chart type="bar" bound-to="dog_grid_tuto" x="breed" height="280" }

### 🐕 Lucky [Editable — change any field, it's a live object]

```yaml
name: Lucky
age: 3
breed: Labrador Retriever
colour: Black
weight_kg: 28
top_speed_kmh: 40
adopted: true
favorite_toys:
  - tennis ball
  - squeaky bone
  - old sock
vet:
  name: Dr. Patel
  phone: "555-0142"
notes: Afraid of vacuum cleaners. Excellent at looking innocent.
```
{: .form editable="true" }

### 🐠 Wanda [Editable — Wanda is a fish, not a dog!]

```yaml
name: Wanda
age: 2
breed: Goldfish
colour: Orange
weight_kg: 0.03
top_speed_kmh: 6
adopted: false
favorite_toys:
  - plastic castle
  - bubble ring
  - flake food
vet:
  name: Dr. Patel
  phone: "555-0142"
notes: A fish, not a dog! Best friends with Lucky through the bowl glass.
```
{: .form editable="true" }