title:Overview

id:overview

categories:

-overview

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.

title:Ecosystem

id:ecosystem

categories:

-overview

Coming soon...

.modal {

margin-top:45px;

text-align:center;

}

#btn-close-modal {

padding:45px;

padding:25px;

margin:0auto;

display:flex;

justify-content:space-around;

<imgsrc="css/images/close.svg"alt="close"height="35px"/>

<divclass="modal-content">

<h3>Atom-CodeRoad</h3>

<imgalt="Atom-CodeRoad Demo"height="450px"

src="images/atom-coderoad.gif"/>

<divclass="modal-content">

<h3>Builder-CodeRoad</h3>

<imgalt="Builder-CodeRoad Demo"height="450px"

src="images/builder-demo.gif"/>

tagline: How CodeRoad Works

---

<h3>A Overview of CodeRoad</h3>

<p>Coming soon...</p>

{% for post in site.categories.overview reversed %}

<sectionid="{{ post.id }}">

<h2>{{ post.title }}</h2>

<div>{{ post.content }}</div>

{% endfor %}

---

<divid="docs"role="main">

<p>The docs are a deeper read. It's recommended you get setup with the plugins and gain an understanding of how CodeRoad works before continuing.</p>

<sectionid="suggestions">

<ulclass="actions"style="text-align: center;">

<li><aclass="button special"href="/atom-coderoad.html">Quick Start</a></li>

<li><aclass="button"href="/builder-coderoad.html">Builder Start</a></li>

<li><aclass="button"href="/overview.html">Overview</a></li>

<sectionid="overview">

<h2>Overview</h2>

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

<p>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.</p>

<aclass="button special"

href="/overview">How It Works</a>

{% for post in site.categories.docs reversed %}

<sectionid="{{ post.id }}">

<h2>{{ post.title }}</h2>

<div>{{ post.content }}</div>

<aclass="button"href="https://github.com/coderoad/coderoad.github.io/edit/master/_posts/docs/{{post.file}}">

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

<spanclass="network-name">

{% for post in site.categories.docs reversed %}

<sectionid="{{ post.id }}">

<h2>{{ post.title }}</h2>

<div>{{ post.content }}</div>

<aclass="button"href="https://github.com/coderoad/coderoad.github.io/edit/master/_posts/docs/{{post.file}}">

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

<spanclass="network-name">

Edit {{post.title}} Docs

{% endfor %}

{% endfor %}