-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
64 lines (36 loc) · 12 KB
/
index.html
File metadata and controls
64 lines (36 loc) · 12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.54">
<title data-react-helmet="true">Overview | CodeRoad</title>
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Overview | CodeRoad"><meta data-react-helmet="true" name="description" content="CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor."><meta data-react-helmet="true" property="og:description" content="CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor."><meta data-react-helmet="true" property="og:url" content="https://coderoad.github.io/docs/overview">
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/styles.83769add.css">
<link rel="preload" href="/styles.6183a4c7.js" as="script">
<link rel="preload" href="/runtime~main.43d363e4.js" as="script">
<link rel="preload" href="/main.27f489e0.js" as="script">
<link rel="preload" href="/1.7cdaee68.js" as="script">
<link rel="preload" href="/2.ba088b65.js" as="script">
<link rel="preload" href="/24.83b42a38.js" as="script">
<link rel="preload" href="/20ac7829.c1d3de96.js" as="script">
<link rel="preload" href="/17896441.644fecbe.js" as="script">
<link rel="preload" href="/1db64337.c1440c78.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=window.matchMedia("(prefers-color-scheme: dark)"),n=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();null!==n?t(n):e.matches&&t("dark")}()</script>
<div id="__docusaurus">
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/logo.svg" alt="CodeRoad Logo"><strong class="navbar__title">CodeRoad</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/overview">Docs</a></div><div class="navbar__items navbar__items--right"><a target="_blank" rel="noopener noreferrer" href="https://github.com/coderoad/coderoad-vscode" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_keGJ moon_1gwN"></span></div><div class="react-toggle-track-x"><span class="toggle_keGJ sun_3CPA"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/logo.svg" alt="CodeRoad Logo"><strong class="navbar__title">CodeRoad</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" position="left" href="/docs/overview">Docs</a></li><li class="menu__list-item"><a target="_blank" rel="noopener noreferrer" href="https://github.com/coderoad/coderoad-vscode" class="menu__link" position="right">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1kjD"><div class="docSidebarContainer_1cYp"><div class="sidebar_1kLs"><div class="menu menu--responsive menu_w2sC"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_2vk4" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Intro</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" tabindex="0" href="/docs/overview">Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/setup">Setup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/how-coderoad-works">How CodeRoad Works</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Build</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/build-tutorial">Building a Tutorial</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/create-a-practice-tutorial">Create a Practice Tutorial</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/config-docs">Config</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hooks-actions">Hooks & Actions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/test-runner">Test Runner</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/init-commit">Init Commit</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/test-examples">Test Examples</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/edit-tutorial">Editing a Tutorial</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/examples">Examples</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/starters">Starters</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Development</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/env-vars">Env Variables</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">More</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/inspiration">Inspiration</a></li></ul></li></ul></div></div></div><main class="docMainContainer_FFX1"><div class="container padding-vert--lg docItemWrapper_1cc7"><div class="row"><div class="col docItemCol_2GOA"><div class="docItemContainer_2cwg"><article><header><h1 class="docTitle_1vWb">Overview</h1></header><div class="markdown"><p>CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor.</p><p><img src="/gif/coderoad-example.gif" alt="CodeRoad Image"></p><p>CodeRoad is a platform for creating and playing interactive coding education tutorials.</p><p>What makes CodeRoad different?</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="real-world-experience"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#real-world-experience" title="Direct link to heading">#</a>Real-World Experience</h2><p>CodeRoad is the first tutorial platform to run in a real coding environment: Microsoft’s VSCode editor. As you play, the editor provides access to the same extensions and features real developers use.</p><p>Users love CodeRoad because it provides them more than just a certificate of completion. CodeRoad tutorials are made out of Git commits that provide a public-facing view of your progress to share on the social network for developers: GitHub. In addition, you build a portfolio in CodeRoad: write real code, push it to GitHub, and deploy your projects to the cloud. In the end, you have something for your efforts to build upon, customize, and show to peers or potential employers.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="a-better-way-to-learn"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a-better-way-to-learn" title="Direct link to heading">#</a>A Better Way To Learn</h2><p>It’s no secret that computer science departments have the highest dropout rates, and the number is even worse with online coding programs where 94% of students give up. When I was learning to code, I almost quit many times - only later did I recognize I struggled because the courses didn’t align well with how people learn.</p><p>Learning is the process of transferring knowledge from one medium into the user's mind. Similar to other interactive coding platforms like Codecademy or CodeSchool, I’ve aligned CodeRoad with the science of learning: practice doing, quick feedback, gamification, and hints or help when learners get stuck.</p><p>As long as interactive content remains difficult to produce, the primary medium for coding education will still be video and text. The tools for interactive content just haven’t been available… until CodeRoad.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="create-tutorials"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#create-tutorials" title="Direct link to heading">#</a>Create Tutorials</h2><p>The primary focus of CodeRoad is to make producing interactive content simpler. Simple enough that a tutorial can be made in the same way as regular software - with unit tests, git commits, and basic documentation. CodeRoad is a working project today, and I have plans to make the process even smoother.</p><p>The ability of a software developer to generate interactive content is a big deal. With CodeRoad, creators can now produce one-click launching tutorials in a browser or even run them locally on a user's machine.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/coderoad/coderoad-vscode/edit/master/docs/docs/overview.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/setup"><div class="pagination-nav__link--sublabel">Next</div><div class="pagination-nav__link--label">Setup »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_TbNY"><ul class="contents contents__left-border"><li><a href="#real-world-experience" class="contents__link">Real-World Experience</a></li><li><a href="#a-better-way-to-learn" class="contents__link">A Better Way To Learn</a></li><li><a href="#create-tutorials" class="contents__link">Create Tutorials</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="text--center"><div>Copyright © 2020 CodeRoad. Built with Docusaurus.</div></div></div></footer>
</div>
<script src="/styles.6183a4c7.js"></script>
<script src="/runtime~main.43d363e4.js"></script>
<script src="/main.27f489e0.js"></script>
<script src="/1.7cdaee68.js"></script>
<script src="/2.ba088b65.js"></script>
<script src="/24.83b42a38.js"></script>
<script src="/20ac7829.c1d3de96.js"></script>
<script src="/17896441.644fecbe.js"></script>
<script src="/1db64337.c1440c78.js"></script>
</body>
</html>