From 3fe9bf754b8e359a626e47d6ada27f4aed672b56 Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Sat, 20 Feb 2016 10:50:24 +0100
Subject: [PATCH] Add more content

---
 source/developers/tutorial.markdown | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/source/developers/tutorial.markdown b/source/developers/tutorial.markdown
index fb149a8b8a3..8dbde843ce5 100644
--- a/source/developers/tutorial.markdown
+++ b/source/developers/tutorial.markdown
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: "Development tuorial"
+title: "Development tutorial"
 description: "Tutorial about the first steps on Home Assistant development"
 date: 2016-02-20 07:00
 sidebar: false
@@ -13,6 +13,9 @@ This is a simple tutorial on how to write a component for [Home Assistant](https
 
 The setup of a development environment is described in the [Developers section](/developers/#starting-development) of the documentation.
 
+## {% linkable_title Component %}
+
+
 As a start, create a file `information.py` in your Git checkout of Home Assistant in the folder `homeassistant/component/`.
 
 ```python
@@ -66,7 +69,7 @@ If you replace `_LOGGER.info("The 'information' component is ready!")` with or a
 hass.states.set('information.Text', 'Info component')
 ```
 
-Then the component will not be different to the sample included in the `config/custom_components` folder or shown as an [example](/cookbook/python_component_basic_state/). After a start or a restart of Home Assistant the component will be visible in the frontend.
+then the component will not be different to the sample included in the `config/custom_components` folder or shown as an [example](/cookbook/python_component_basic_state/). After a start or a restart of Home Assistant the component will be visible in the frontend.
 
 <p class='img'>
 <img src='/images/screenshots/create-component01.png' />
@@ -74,6 +77,8 @@ Then the component will not be different to the sample included in the `config/c
 
 The next step is the introduction of configuration options. Most configuration details are coming out of the `configuration.yaml` file. To do that we need to update the  `def setup()` method to accept configuration information and access the configuration variable in the `setup` method.
 
+More details about this topic can be found in the [User given configuration](/developers/creating_components/#config-user-given-configuration) section.
+
 ```python
 import logging
 
@@ -108,10 +113,28 @@ from homeassistant.helpers import validate_config
         return False
 ```
 
-So far our new component is rendered as a default compoment in the frontend. But we want our own view of the component in the frontend. We assume that you have setup the (frontend development)[/developers/frontend/] already
+## {% linkable_title Frontend %}
+
+So far our new component is rendered as a default compoment in the frontend. But we want our own view of the component in the frontend. We assume that you have setup the (frontend development)[/developers/frontend/] already.
 
 We need two new files in the folder `src/cards/`:
 
 - ha-information-card.html
 - ha-information-card.js
 
+
+TBD
+
+Rebuild the frontend.
+
+```bash
+$ script/build_frontend
+```
+
+Change the [http](/components/http/) component to load the `development` version of the frontend as also mentioned in the [ Setting up the environment](/developers/frontend/#setting-up-the-environment) section of the (frontend development)[/developers/frontend/] page.
+
+```yaml
+http:
+  development: 1
+```
+