docs: tweak a few lessons (sveltejs#390)

Author: Benkex

content/tutorial/01-svelte/04-logic/01-if-blocks/README.md

@@ -18,4 +18,4 @@ To conditionally render some markup, we wrap it in an `if` block. Let's add some
 {/if}+++
 ```
 
-Try it — update the component, and click on the buttons.
+Try it — update the component, and click on the button.

content/tutorial/01-svelte/05-events/04-component-events/README.md

@@ -28,4 +28,4 @@ Then, add an `on:message` handler in `App.svelte`:
 <Inner +++on:message={handleMessage}+++ />
 ```
 
-> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('greet')` in `Inner.svelte` and change the attribute name from `on:message` to `on:greet` in `App.svelte`.
+> You can also try changing the event name to something else. For instance, change `dispatch('message', {...})` to `dispatch('greet', {...})` in `Inner.svelte` and change the attribute name from `on:message` to `on:greet` in `App.svelte`.

content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/README.md

@@ -4,7 +4,7 @@ title: Key blocks
 
 Key blocks destroy and recreate their contents when the value of an expression changes. This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
 
-Here, for example, we'd like to play the `typewriter` transition from `transition.js` whenever the loading message changes. Wrap the `<p>` element in a key block:
+Here, for example, we'd like to play the `typewriter` transition from `transition.js` whenever the loading message, i.e. `i` changes. Wrap the `<p>` element in a key block:
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md

@@ -4,13 +4,13 @@ title: Media elements
 
 You can bind to properties of `<audio>` and `<video>` elements, making it easy to (for example) build custom player UI, like `AudioPlayer.svelte`.
 
-First, add the `<audio>` element along with its bindings (we'll use the shorthand form for `duration` and `paused`):
+First, add the `<audio>` element along with its bindings (we'll use the shorthand form for `src`, `duration` and `paused`):
 
 ```svelte
 /// file: AudioPlayer.svelte
 <div class="player" class:paused>
 +++	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
@@ -53,7 +53,7 @@ When the track ends, be kind — rewind:
 ```svelte
 /// file: AudioPlayer.svelte
 <audio
-	src={src}
+	{src}
 	bind:currentTime={time}
 	bind:duration
 	bind:paused

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte

@@ -19,7 +19,7 @@
 
 <div class="player" class:paused>
 	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused

content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/README.md

@@ -7,7 +7,8 @@ Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `
 ```svelte
 /// file: App.svelte
 <div +++bind:clientWidth={w} bind:clientHeight={h}+++>
-	<span style="font-size: {size}px">{text}</span>
+	<span style="font-size: {size}px" contenteditable>{text}</span>
+	<span class="size">{w} x {h}px</span>
 </div>
 ```