1db64337.c1440c78.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{145:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return s}));var o=r(2),n=r(9),a=(r(0),r(163)),i={id:"overview",title:"Overview",sidebar_label:"Overview"},c={id:"overview",title:"Overview",description:"CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor.",source:"@site/docs/overview.md",permalink:"/docs/overview",editUrl:"https://github.com/coderoad/coderoad-vscode/edit/master/docs/docs/overview.md",sidebar_label:"Overview",sidebar:"someSidebar",next:{title:"Setup",permalink:"/docs/setup"}},l=[{value:"Real-World Experience",id:"real-world-experience",children:[]},{value:"A Better Way To Learn",id:"a-better-way-to-learn",children:[]},{value:"Create Tutorials",id:"create-tutorials",children:[]}],d={rightToc:l};function s(e){var t=e.components,r=Object(n.a)(e,["components"]);return Object(a.b)("wrapper",Object(o.a)({},d,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor."),Object(a.b)("p",null,Object(a.b)("img",Object(o.a)({parentName:"p"},{src:"/gif/coderoad-example.gif",alt:"CodeRoad Image"}))),Object(a.b)("p",null,"CodeRoad is a platform for creating and playing interactive coding education tutorials."),Object(a.b)("p",null,"What makes CodeRoad different?"),Object(a.b)("h2",{id:"real-world-experience"},"Real-World Experience"),Object(a.b)("p",null,"CodeRoad is the first tutorial platform to run in a real coding environment: Microsoft\u2019s VSCode editor. As you play, the editor provides access to the same extensions and features real developers use."),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"a-better-way-to-learn"},"A Better Way To Learn"),Object(a.b)("p",null,"It\u2019s 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\u2019t align well with how people learn."),Object(a.b)("p",null,"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\u2019ve aligned CodeRoad with the science of learning: practice doing, quick feedback, gamification, and hints or help when learners get stuck."),Object(a.b)("p",null,"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\u2019t been available\u2026 until CodeRoad."),Object(a.b)("h2",{id:"create-tutorials"},"Create Tutorials"),Object(a.b)("p",null,"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."),Object(a.b)("p",null,"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."))}s.isMDXComponent=!0},163:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return m}));var o=r(0),n=r.n(o);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var d=n.a.createContext({}),s=function(e){var t=n.a.useContext(d),r=t;return e&&(r="function"==typeof e?e(t):c({},t,{},e)),r},u=function(e){var t=s(e.components);return n.a.createElement(d.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},b=Object(o.forwardRef)((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),u=s(r),b=o,m=u["".concat(i,".").concat(b)]||u[b]||p[b]||a;return r?n.a.createElement(m,c({ref:t},d,{components:r})):n.a.createElement(m,c({ref:t},d))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=b;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var d=2;d<a;d++)i[d]=r[d];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"}}]);