"helpers/base";

@import"animations/attention-seekers/bounce",

"animations/attention-seekers/flash",

"animations/attention-seekers/pulse",

"animations/attention-seekers/shake",

"animations/attention-seekers/swing",

"animations/attention-seekers/wiggle",

"animations/attention-seekers/wobble",

"animations/attention-seekers/tada";

@import"animations/attention-seekers/bounce";

@import"animations/bounce-enter/bounceIn",

"animations/bounce-enter/bounceInDown",

"animations/bounce-enter/bounceInLeft",

"animations/bounce-enter/bounceInRight",

"animations/bounce-enter/bounceInUp",

"animations/bounce-exit/bounceOut",

"animations/bounce-exit/bounceOutDown",

"animations/bounce-exit/bounceOutLeft",

"animations/bounce-exit/bounceOutRight",

"animations/bounce-exit/bounceOutUp";

"animations/bounce-exit/bounceOutDown";

@import"animations/fade-enter/fadeIn",

"animations/fade-enter/fadeInDown",

"animations/fade-enter/fadeInDownBig",

"animations/fade-enter/fadeInLeft",

"animations/fade-enter/fadeInLeftBig",

"animations/fade-enter/fadeInRight",

"animations/fade-enter/fadeInRightBig",

"animations/fade-enter/fadeInUp",

"animations/fade-enter/fadeInUpBig",

"animations/fade-exit/fadeOut",

"animations/fade-exit/fadeOutDown",

"animations/fade-exit/fadeOutDownBig",

"animations/fade-exit/fadeOutLeft",

"animations/fade-exit/fadeOutLeftBig",

"animations/fade-exit/fadeOutRight",

"animations/fade-exit/fadeOutRightBig",

"animations/fade-exit/fadeOutUp",

"animations/fade-exit/fadeOutUpBig";

@import"animations/flippers/flip",

"animations/flippers/flipInX",

"animations/flippers/flipInY",

"animations/flippers/flipOutX",

"animations/flippers/flipOutY";

@import"animations/lightspeed/lightSpeedIn",

"animations/lightspeed/lightSpeedOut";

@import"animations/rotate-enter/rotateIn",

"animations/rotate-enter/rotateInDownLeft",

"animations/rotate-enter/rotateInDownRight",

"animations/rotate-enter/rotateInUpLeft",

"animations/rotate-enter/rotateInUpRight",

"animations/rotate-exit/rotateOut",

"animations/rotate-exit/rotateOutDownLeft",

"animations/rotate-exit/rotateOutDownRight",

"animations/rotate-exit/rotateOutUpLeft",

"animations/rotate-exit/rotateOutUpRight";

@import"animations/slide-enter/slideInDown",

"animations/slide-enter/slideInLeft",

"animations/slide-enter/slideInRight",

"animations/slide-enter/slideInUp",

"animations/slide-exit/slideOutDown",

"animations/slide-exit/slideOutLeft",

"animations/slide-exit/slideOutRight",

"animations/slide-exit/slideOutUp";

@import"animations/special/hinge",

"animations/special/rollIn",

"animations/special/rollOut";

@import"animations/zoom-enter/zoomIn",

"animations/zoom-enter/zoomInDown",

"animations/zoom-enter/zoomInLeft",

"animations/zoom-enter/zoomInRight",

"animations/zoom-enter/zoomInUp",

"animations/zoom-exit/zoomOutDown",

"animations/zoom-exit/zoomOutLeft",

"animations/zoom-exit/zoomOutRight",

"animations/zoom-exit/zoomOutUp";

a.modal-link:hover:before {

opacity:.65;

}

.spotlight >.code-block {

padding:10px;

}

<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="/explanation">How It Works</a>

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

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

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

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

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

<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

Edit {{post.title}} Docs

{% endfor %}

---

<sectionclass="spotlight">

<divclass="image"><imgsrc="images/pic03.jpg"alt=""/></div>

<divclass="image">

<imgalt="Publish Tutorial"

src="images/publish.png"/>

<divclass="content">

<h2>Publish Free & Open</h2>

<p>Version control & share your tutorials over NPM. Iterate and publish updates. Use Git to build & collaborate on courses.</p>

<p>Version control & share your tutorials over<ahref="https://npmjs.com">NPM</a>. Iterate and publish updates. Use Git to build & collaborate on courses.</p>

<ulclass="features">

{% for tutorial in site.tutorials %}

<h3><spanstyle="color: yellow">{{tutorial.language}}</span> {{tutorial.title}}</h3>

<spanstyle="color: yellow">{{tutorial.language}}</span> {{tutorial.title}}

<p>{{tutorial.description}}</p>

{% endfor %}

<p>Looking to adapt your favorite coding language for CodeRoad? Interested in adding new features? Find out more.</p>

<ulclass="actions vertical">

<li><ahref="/explanation.html"class="button fit special">How it Works</a></li>

<li><ahref="/overview.html"class="button fit special">How it Works</a></li>

<li><ahref="/docs.html"class="button fit">Docs</a></li>

---

layout: page

title: Overview

tagline: How CodeRoad Works

---

<h3>A Overview of CodeRoad</h3>