author:Shawn McKay

description:># "Free interactive coding tutorials inside of the Atom editor. Build your own tutorials

using the coderoad-cli and tools developers already know:markdown and unit tests.

atomVersion:0.4.21

cliVersion:0.3.23

atomVersion:0.5.0

cliVersion:0.3.24

video:DbLpdgrYVOU

<sectionid="docs">

<divclass="container bs-docs-container">

<divclass="row">

{% include docs/side-nav.html %}

<divclass="col-md-9 col-xs-12"role="main">

<sectionclass="bs-docs-section">

<h1id="overview"class="page-header">Overview</h1>

CodeRoad aims to make building & sharing interactive coding tutorials as easy as possible.

<divclass="lead">We hope to create fun and maintainable code tutorials that actually improve with time. We hope to see programming students become teachers, teachers become empowered, and coders become better, faster. But first, let's get some

interactive coding tutorials built. That's where you come in.</div>

<ahref="/build"class="btn btn-default btn-lg">

<iclass="fa fa-road fa-fw"></i>

<spanclass="network-name">Read an Overview of Building a Tutorial</span>

{% for post in site.posts reversed %}

<sectionid="{{ post.id }}"class="bs-docs-section">

<h2class="section-heading">{{ post.title }}</h2>

<divclass="lead">{{ post.content }}</div>

<ahref="https://github.com/coderoad/coderoad.github.io/edit/master/_posts/{{post.file}}"class="btn btn-default btn-xs">

<iclass="fa fa-pencil fa-fw"></i>

<spanclass="network-name">

Edit {{post.title}} Docs</span>

{% endfor %}

<sectionid="docs"class="container">

<divclass="row">

{% include docs/side-nav.html %}

<divclass="col-md-9 col-xs-12"role="main">

<sectionclass="bs-docs-section">

<h1id="overview"class="page-header">Overview</h1>

CodeRoad aims to make building & sharing interactive coding tutorials as easy as possible.

<divclass="lead">We hope to create fun and maintainable code tutorials that actually improve with time. We hope to see programming students become teachers, teachers become empowered, and coders become better, faster. But first, let's get some interactive coding

tutorials built. That's where you come in.</div>

<ahref="/build"class="btn btn-default btn-lg">

<iclass="fa fa-road fa-fw"></i>

<spanclass="network-name">Read an Overview of Building a Tutorial</span>

{% for post in site.posts reversed %}

<sectionid="{{ post.id }}"class="bs-docs-section">

<h2class="section-heading">{{ post.title }}</h2>

<divclass="lead">{{ post.content }}</div>

<ahref="https://github.com/coderoad/coderoad.github.io/edit/master/_posts/{{post.file}}"class="btn btn-default btn-xs">

<iclass="fa fa-pencil fa-fw"></i>

<spanclass="network-name">

Edit {{post.title}} Docs</span>

<br> {% endfor %}

```))

More editor actions will be added to CodeRoad at a later date. These may include changing the cursor position, replacing content, decorating keywords, etc.

An optional message that will appear when all of the tasks for a page are completed.

## Page 1

Page 1 description

@onPageComplete('Next we'll look at page 2')

Further editor actions will be added to CodeRoad. These may include:

* changing the cursor position

* replacing content

* decorating keywords

Feel free to suggest a feature.