|
1 | 1 | <section id="services"> |
2 | | -<!-- Page Content --> |
3 | | -{% for post in site.posts reversed %} |
4 | | - {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %} |
5 | | - {% if thecycle == 'odd' %} |
6 | | - <div class="content-section-a"> |
| 2 | + <!-- Page Content --> |
7 | 3 |
|
8 | | - <div class="container"> |
| 4 | + <div class="content-section-b"> |
9 | 5 |
|
10 | | - <div class="row"> |
11 | | - <div class="col-lg-5 col-sm-6"> |
12 | | - <hr class="section-heading-spacer"> |
13 | | - <div class="clearfix"></div> |
14 | | - <h2 class="section-heading">{{ post.title }}</h2> |
15 | | - <div class="lead">{{ post.content }}</div> |
16 | | - </div> |
17 | | - <div class="col-lg-5 col-lg-offset-2 col-sm-6"> |
18 | | - <img class="img-responsive" src="img/services/{{ post.img }}" alt=""> |
19 | | - </div> |
20 | | - </div> |
| 6 | + <div class="container"> |
21 | 7 |
|
| 8 | + <div class="row"> |
| 9 | + <div class="col-lg-5 col-sm-6"> |
| 10 | + <!-- <hr class="section-heading-spacer"> --> |
| 11 | + <div class="clearfix"></div> |
| 12 | + <h2 class="section-heading">Learn Faster</h2> |
| 13 | + <div class="lead">The science is in: people learn best by doing, with quick feedback in a real world environment.</div> |
22 | 14 | </div> |
23 | | - <!-- /.container --> |
| 15 | + <div class="col-lg-5 col-lg-offset-2 col-sm-6"> |
| 16 | + <img class="img-responsive" src="img/services/feedback.png" alt=""> |
| 17 | + </div> |
| 18 | + </div> |
24 | 19 |
|
25 | 20 | </div> |
26 | | - <!-- /.content-section-a --> |
27 | | - {% else %} |
| 21 | + <!-- /.container --> |
| 22 | + |
| 23 | + </div> |
| 24 | + <!-- /.content-section-a --> |
| 25 | + |
| 26 | + <div class="content-section-a"> |
| 27 | + |
| 28 | + <div class="container"> |
| 29 | + |
| 30 | + <div class="row"> |
| 31 | + <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6"> |
| 32 | + <!-- <hr class="section-heading-spacer"> --> |
| 33 | + <div class="clearfix"></div> |
| 34 | + <h2 class="section-heading">Free & Open-Sourced</h2> |
| 35 | + <div class="lead">Build, share and collaborate on courses or curriculum over Github. Publish your version controlled tutorials on NPM. Incrementally make them better with updates and pull requests. |
| 36 | + </div> |
| 37 | + </div> |
| 38 | + <div class="col-lg-5 col-sm-pull-6 col-sm-6"> |
| 39 | + <img class="img-responsive" src="img/services/npm.png" alt=""> |
| 40 | + </div> |
| 41 | + </div> |
28 | 42 |
|
29 | | - <div class="content-section-b"> |
| 43 | + </div> |
| 44 | + <!-- /.container --> |
30 | 45 |
|
31 | | - <div class="container"> |
| 46 | + </div> |
| 47 | + <!-- /.content-section-b --> |
| 48 | + <div class="content-section-b"> |
32 | 49 |
|
33 | | - <div class="row"> |
34 | | - <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6"> |
35 | | - <hr class="section-heading-spacer"> |
36 | | - <div class="clearfix"></div> |
37 | | - <h2 class="section-heading">{{ post.title }}</h2> |
38 | | - <div class="lead">{{ post.content }}</div> |
39 | | - </div> |
40 | | - <div class="col-lg-5 col-sm-pull-6 col-sm-6"> |
41 | | - <img class="img-responsive" src="img/services/{{ post.img }}" alt=""> |
42 | | - </div> |
43 | | - </div> |
| 50 | + <div class="container"> |
44 | 51 |
|
| 52 | + <div class="row"> |
| 53 | + <div class="col-lg-5 col-sm-6"> |
| 54 | + <!-- <hr class="section-heading-spacer"> --> |
| 55 | + <div class="clearfix"></div> |
| 56 | + <h2 class="section-heading">Inside of the Editor</h2> |
| 57 | + <div class="lead">Atom-CodeRoad is built inside the free <a href="https://atom.io">Atom Editor</a>, allowing you to use it alongside your favorite packages.</div> |
| 58 | + </div> |
| 59 | + <div class="col-lg-5 col-lg-offset-2 col-sm-6"> |
| 60 | + <img height="250px" src="img/services/atom-editor.png" alt=""> |
45 | 61 | </div> |
46 | | - <!-- /.container --> |
| 62 | + </div> |
47 | 63 |
|
48 | 64 | </div> |
49 | | - <!-- /.content-section-b --> |
50 | | - {% endif %} |
51 | | -{% endfor %} |
| 65 | + <!-- /.container --> |
| 66 | + |
| 67 | + </div> |
| 68 | + <!-- /.content-section-a --> |
| 69 | + |
| 70 | + <div class="content-section-a"> |
| 71 | + |
| 72 | + <div class="container"> |
| 73 | + |
| 74 | + <div class="row"> |
| 75 | + <div class="col-lg-4 col-lg-offset-2 col-sm-push-6 col-sm-6"> |
| 76 | + <!-- <hr class="section-heading-spacer"> --> |
| 77 | + <div class="clearfix"></div> |
| 78 | + <h2 class="section-heading">Write in Markdown</h2> |
| 79 | + <div class="lead">Write lessons using markdown. <br> |
| 80 | + See a <a href="https://github.com/coderoad/coderoad-functional-school/blob/master/tutorial/1/01/filter.md">tutorial file</a>. |
| 81 | + <br> |
| 82 | + <br> |
| 83 | + Control the editor with a simple API: |
| 84 | + <br> |
| 85 | + <br> |
| 86 | + <br> |
| 87 | + <ul> |
| 88 | + <li><code>@import</code> load another markdown file</li> |
| 89 | + <br> |
| 90 | + <li><code>@test</code> load unit tests</li> |
| 91 | + <br> |
| 92 | + <li><code>@action</code> open a file, set/insert text</li> |
| 93 | + <br> |
| 94 | + <li><code>@hint</code> add helpful clues</li> |
| 95 | + </ul> |
| 96 | + </div> |
| 97 | + </div> |
| 98 | + <div class="col-lg-6 col-sm-pull-6 col-sm-6"> |
| 99 | + <pre><code class="language-markdown"> |
| 100 | +# Functional School |
| 101 | +A trip through functional programming in Javascript. |
| 102 | + |
| 103 | +## Array Methods |
| 104 | +Using common built-in Javascript array methods. |
| 105 | + |
| 106 | +### Filter |
| 107 | +Array -> Array of items that match a condition |
| 108 | + |
| 109 | ++ Write a filter condition function called `isAda` |
| 110 | +@test('1/01/01-filter') |
| 111 | +@action(open('01-filter.js')) |
| 112 | +@action(insert( |
| 113 | +``` |
| 114 | +// return true if student name |
| 115 | +// matches "Ada Lovelace" |
| 116 | +function isAda() { |
| 117 | + // write condition here |
| 118 | +} |
| 119 | +``` |
| 120 | +)) |
| 121 | + </pre></code> |
| 122 | + </div> |
| 123 | + </div> |
| 124 | + |
| 125 | + </div> |
| 126 | + <!-- /.container --> |
| 127 | + |
| 128 | + </div> |
| 129 | + <!-- /.content-section-b --> |
| 130 | + |
| 131 | + <div class="content-section-b"> |
| 132 | + |
| 133 | + <div class="container"> |
| 134 | + |
| 135 | + <div class="row"> |
| 136 | + <div class="col-lg-4 col-sm-6"> |
| 137 | + <!-- <hr class="section-heading-spacer"> --> |
| 138 | + <div class="clearfix"></div> |
| 139 | + <h2 class="section-heading">Build with Dev Tools</h2> |
| 140 | + <div class="lead"> Write task feedback using unit tests.<br> |
| 141 | + See a <a href="https://github.com/coderoad/coderoad-functional-school/blob/master/tutorial/1/01/01-filter.spec.js">complete test file</a>. |
| 142 | + <br> |
| 143 | + <br> |
| 144 | + <br> |
| 145 | + Currently supported: |
| 146 | + <br> |
| 147 | + <br> |
| 148 | + <ul> |
| 149 | + <li>Javascript: <a href="https://github.com/coderoad/mocha-coderoad">Mocha</a></li> |
| 150 | + </ul> |
| 151 | + <br> |
| 152 | + <br> |
| 153 | + <br> |
| 154 | + <i>We hope to support more test frameworks and programming languages in the near future.</i></div> |
| 155 | + </div> |
| 156 | + <div class="col-lg-6 col-lg-offset-2 col-sm-6"> |
| 157 | + <pre><code class="language-js"> |
| 158 | +describe('function isAda', function () { |
| 159 | + |
| 160 | + it('doesn\'t exist', function () { |
| 161 | + expect(isAda).to.not.be.undefined; |
| 162 | + }); |
| 163 | + |
| 164 | + it('should be a function', function () { |
| 165 | + expect(isAda).to.be.a('function'); |
| 166 | + }); |
| 167 | + |
| 168 | + it('needs to take a param', function () { |
| 169 | + expect(isAda).to.have.length(1); |
| 170 | + }); |
| 171 | + |
| 172 | + it('should use the full name "Ada Lovelace"', function () { |
| 173 | + var regex = /Ada Lovelace/; |
| 174 | + expect(!!isAda.toString().match(regex)).to.be.true; |
| 175 | + }); |
| 176 | + |
| 177 | +}); |
| 178 | + </code></pre> |
| 179 | + </div> |
| 180 | + </div> |
| 181 | + |
| 182 | + </div> |
| 183 | + <!-- /.container --> |
| 184 | + |
| 185 | + </div> |
| 186 | + <!-- /.content-section-a --> |
| 187 | + |
| 188 | + <div class="content-section-a"> |
| 189 | + |
| 190 | + <div class="container"> |
| 191 | + |
| 192 | + <div class="row"> |
| 193 | + <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6"> |
| 194 | + <!-- <hr class="section-heading-spacer"> --> |
| 195 | + <div class="clearfix"></div> |
| 196 | + <h2 class="section-heading">Compile with Coderoad-CLI</h2> |
| 197 | + <div class="lead">Building tutorials is easy with the <a href="https://github.com/coderoad/coderoad-cli">coderoad-cli</a>. |
| 198 | + </div> |
| 199 | + </div> |
| 200 | + <div class="col-lg-5 col-sm-pull-6 col-sm-6"> |
| 201 | + <div class="lead"> |
| 202 | + <code>> npm install -g coderoad-cli</code> |
| 203 | + <br> |
| 204 | + <br> |
| 205 | + <code>> coderoad create</code> |
| 206 | + <br> |
| 207 | + <br> |
| 208 | + <code>> coderoad build</code> |
| 209 | + <br> |
| 210 | + <br> |
| 211 | + <code>> coderoad publish</code> |
| 212 | + </div> |
| 213 | + </div> |
| 214 | + </div> |
| 215 | + |
| 216 | + </div> |
| 217 | + <!-- /.container --> |
| 218 | + |
| 219 | + </div> |
| 220 | + <!-- /.content-section-b --> |
| 221 | + |
| 222 | + |
| 223 | + |
52 | 224 | </section> |
0 commit comments