-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·450 lines (433 loc) · 27.1 KB
/
index.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Up your Development Environment - Coding & Cocktails KC</title>
<meta name="description" content="This is the official Coding & Cocktails Setting Up your Development Environment course.">
<meta name="author" content="Kansas City Women in Technology, Jennifer Wadella, Sarah Duitsman">
<meta name="keywords" content="Kansas City Women in Technology, kcwit, women engineers, learn to code, girls in tech, women in tech, coding and cocktails, learn front-end development">
<meta property="og:title" content="Setting Up your Development Environment - Coding & Cocktails KC" />
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://codingandcocktails.kcwomenintech.org/images/logo.png" />
<meta property="og:url" content="http://codingandcocktails.kcwomenintech.org"/>
<meta property="og:description" content="This is the official Coding & Cocktails Setting Up your Development Environment course."/>
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://codingandcocktails.kcwomenintech.org">
<meta name="twitter:title" content="Coding And Cocktails by Kansas City Women in Technology">
<meta name="twitter:description" content="This is the official Coding & Cocktails Setting Up your Development Environment.">
<meta name="twitter:image" content="http://codingandcocktails.kcwomenintech.org/images/logo.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/codingandcocktails.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor--><link rel="stylesheet" href="lib/css/light.css">
<!-- dark editor <link rel="stylesheet" href="lib/css/dark.css">-->
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section id="coding-and-cocktails">
<img src="images/logo-large.png" alt="Coding & Cocktails" />
</section>
<section id="intro-to-web-concepts">
<h3>Setting up Your Development Environment</h3>
<img src="images/logo.png" alt="Coding & Cocktails" />
<p>
Slides available at:
<a class="reveal" href="http://kansascitywomenintechnology.github.io/SettingUpYourDevEnvironment" target="_blank">kansascitywomenintechnology.github.io/SettingUpYourDevEnvironment</a>
</p>
</section>
<section id="topics">
<section>
<h2>What we'll cover</h2>
<ul>
<li class="fragment">Browsers and In-Browser Development Tools
<ul>
<li class="fragment">Chrome</li>
<li class="fragment">Firefox</li>
<li class="fragment">Safari</li>
<li class="fragment">Internet Explorer</li>
<li class="fragment">Edge</li>
</ul>
</li>
<li class="fragment">Integrated Development Environments
<ul>
<li class="fragment">Sublime</li>
<li class="fragment">Atom</li>
<li class="fragment">Cloud 9</li>
<li class="fragment">Webstorm</li>
<li class="fragment">Helpful Plugins</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>What we'll cover</h2>
<ul>
<li class="fragment">Command Line</li>
<li class="fragment">Github
<ul>
<li class="fragment">Creating an account</li>
<li class="fragment">Cloning a repository (repo)</li>
<li class="fragment">Creating your own repository (repo)</li>
<li class="fragment">Forking a repository (repo)</li>
</ul>
</li>
<li class="fragment">2016 Coding & Cocktails curriculum
<ul>
<li class="fragment">Learning Resources</li>
</ul>
</li>
</ul>
</section>
</section>
<section id="inspiration">
<section>
<h2>But First ...</h2>
<h4>3 Inspiring Female Developers</h4>
<ul>
<li class="fragment">Sarah Chipps <a href="https://twitter.com/sarajchipps" target="_blank">@sarajchipps</a></li>
<li class="fragment">Erin Summers & Zainab Ghadiyali <a href="https://twitter.com/wogrammer" target="_blank">@wogrammer</a></li>
<li class="fragment">Grace Hopper </li>
</ul>
</section>
<section id="jennifer-dewalt">
<h2>Sarah Chipps</h2>
<h4>Founder, Girl Develop It! & Jewelbots</h4>
<a href="https://www.girldevelopit.com/" target="_blank">
<img src="images/gdi_logo_square_400x400.png" alt="">
</a>
<a href="http://jewelbots.com/" target="_blank">
<img src="images/jewelbots.png" alt="">
</a>
<p>
<a href="http://sarajchipps.com/" target="_blank">http://sarajchipps.com/</a>
</p>
</section>
<section id="isis-anchalee">
<h3>Erin Summers & Zainab Ghadiyali</h3>
<h4>Wogrammer</h4>
<a href="http://www.womenyoushouldknow.net/wogrammer-a-project-founded-by-two-facebook-employees-highlighting-amazing-women-engineers/" target="_blank">
<img src="images/wogrammer.jpg" alt="">
</a>
<a href="http://www.wogrammer.org/" target="_blank">
<img src="images/wogrammerlogo.png" alt="">
</a>
<p>
<a href="http://www.wogrammer.org/" target="_blank">http://www.wogrammer.org/</a>
</p>
</section>
<section id="lyndsey-scott">
<h3>Grace Hopper</h3>
<h4>Early Female Computer Scientist</h4>
<a href="https://en.wikipedia.org/wiki/Grace_Hopper" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Commodore_Grace_M._Hopper%2C_USN_%28covered%29.jpg/220px-Commodore_Grace_M._Hopper%2C_USN_%28covered%29.jpg" alt="">
</a>
</section>
</section>
<section id="sample-app">
<section>
<h2>Browsers</h2>
<ul>
<li class="fragment">Chrome</li>
<li class="fragment">Firefox</li>
<li class="fragment">Safari</li>
<li class="fragment">Internet Explorer</li>
<li class="fragment">Edge</li>
<li class="fragment">Other</li>
<li class="fragment"><a href="http://caniuse.com/" target="_blank">CanIUse</a></li>
</ul>
</section>
<section>
<h2>Browser Statistics</h2>
<img src="images/StatCounter-browser.png" alt="" />
<p class="fragment"><small>Source: <a href="http://gs.statcounter.com/#browser-ww-monthly-201309-201508" target="_blank">StatCounter Global Stats - Browser Market Share</a></small></p>
</section>
</section>
<section>
<section>
<h2>In-Browser Development Tools</h2>
<a class="fragment" href="https://developers.google.com/web/tools/chrome-devtools/" target="_blank">Chrome Devtools</a>
<ul>
<li class="fragment">Console
<ul>
<li class="fragment">How do you get there: cmd/ctrl+shift+i OR Chrome menu > More Tools > Developer Tools</li>
<li class="fragment">Used to log information, display data and interact with your document</li>
</ul>
</li>
<li class="fragment">Elements
<ul>
<li class="fragment">How do you get there: right click on your page or element you want to view and choose "Inspect Element"</li>
<li class="fragment">Used to view elements on your page and their styling and positioning</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>In-Browser Development Tools</h2>
<ul>
<li class="fragment">Move the Tools
<ul>
<li class="fragment">Use tools in a separate window.</li>
<li class="fragment">Dock the tools on the bottom or right side of the screen to optimize view.</li>
</ul>
</li>
<li class="fragment">Responsive Design
<ul>
<li class="fragment">View how page will look on different devices.</li>
</ul>
</li>
</ul>
</section>
</section>
<section>
<section>
<h2>Integrated Development Environments (IDEs)</h2>
<h3 class="fragment"><a href="http://www.sublimetext.com/2" target="_blank">Sublime Text 2</a></h3>
<ul>
<li class="fragment">Natively supports many programming and markup languages</li>
<li class="fragment">Functionality is extended by plug-ins</li>
<li class="fragment">Fast, Powerful, and Highly Customizable</li>
</ul>
</section>
<section>
<h2>Integrated Development Environments (IDEs)</h2>
<h3 class="fragment"><a href="https://atom.io/" target="_blank">Atom</a></h3>
<ul>
<li class="fragment">Free & Open-source - developed by Github</li>
<li class="fragment">Functionality is extended by plug-ins</li>
<li class="fragment">Desktop application built on web technologies (HTML, JavaScript, CSS, and Node.js integration) </li>
</ul>
</section>
<section>
<h2>Integrated Development Environments (IDEs)</h2>
<h3 class="fragment"><a href="https://c9.io/" target="_blank">Cloud 9</a></h3>
<ul>
<li class="fragment">Online code editor and development environment</li>
<li class="fragment">Easy Collaboration</li>
<li class="fragment">Easily preview in different browser/OS combinations</li>
</ul>
</section>
<section>
<h2>Integrated Development Environments (IDEs)</h2>
<h3 class="fragment"><a href="https://www.jetbrains.com/webstorm/" target="_blank">Webstorm</a></h3>
<ul>
<li class="fragment">Lightweight & powerful IDE</li>
<li class="fragment">Quickly start working on projects.</li>
<li class="fragment">Includes smart coding assistance, code completion, navigation features, on-the-fly error detection.</li>
</ul>
</section>
</section>
<section>
<section>
<h2> Plugins </h2>
<h3 class="fragment">What is a plugin?</h3>
<p class="fragment">A plugin is an additional component that will add functionality to an application.</p>
<p class="fragment">Enables further customization of the application.</p>
</section>
<section>
<h3>How do I install plug-ins?</h3>
<p class="fragment">First we need to install <a href="https://packagecontrol.io/installation" target="_blank">Package Control</a>.</p>
<p class="fragment">Package Control will make it easier for us to install and keep packages up to date.</p>
<p class="fragment">Install through Sublime text console: cmd/ctrl + ` (backtick, not apostrophe)</p>
<img src="images/backtick.png" alt="" class="fragment">
</section>
<section>
<h3>Emmet</h3>
<a href="https://github.com/sergeche/emmet-sublime#how-to-install" class="fragment" target="_blank">Link</a>
<p class="fragment">Write HTML and CSS faster.</p>
<p class="fragment">Note: File must be saved with .html extension for emmet to work.</p>
<p class="fragment">Usage: Use css selectors (# for ids and . for classes) and html tags with tab completion.</p>
<p class="fragment">Type "html:5" and press tab to start a new page.</p>
<img class="fragment" src="images/Emmet.JPG" />
</section>
<section>
<h3>Bracket Highlighter</h3>
<a href="http://facelessuser.github.io/BracketHighlighter/" class="fragment" target="_blank">Link</a>
<p class="fragment">Quick visual display to find closing/opening brackets.</p>
<img class="fragment" src="images/bracketHighlighter.JPG" />
</section>
<section>
<h3>ColorPicker</h3>
<a href="http://weslly.github.io/ColorPicker/" class="fragment" target="_blank">Link</a>
<p class="fragment">Pick and change colors easily.</p>
<p class="fragment">Usage: ctrl + shift + c to bring up a visual color picker</p>
<img src="images/colorPicker.JPG" class="fragment" />
</section>
<section>
<h3>SublimeLinter</h3>
<a href="https://github.com/SublimeLinter/SublimeLinter-for-ST2" class="fragment" target="_blank">Link</a>
<p class="fragment">Check code for stylistic or programming errors as you go.</p>
<p class="fragment"><small>Note: For linting Javascript or css on a Windows machine, <a href="" target="_blank">Node.js</a> must be installed.</small></p>
</section>
<section>
<h3>Markdown Editing/Markdown Preview</h3>
<p class="fragment"><a href="https://github.com/SublimeText-Markdown/MarkdownEditing" target="_blank">Editing Link</a></p>
<p class="fragment"><a href="https://github.com/revolunet/sublimetext-markdown-preview" target="_blank">Preview Link</a></p>
<p class="fragment">Syntax highlighting and previewing markdown content you've created.</p>
<p class="fragment">Usage: cmd + shift + p and search for Markdown Preview. Then choose how to preview.</p>
</section>
<section>
<h3>Make it pretty with themes!</h3>
<p class="fragment">Themes customize coloring</p>
<p class="fragment">Install through Package Control</p>
<ul>
<li class="fragment"><a href="http://buymeasoda.github.io/soda-theme/" target="_blank">Soda Theme</a></li>
<li class="fragment"><a href="https://github.com/zenorocha/dracula-theme#sublime-text" target="_blank">Dracula Theme</a></li>
</ul>
</section>
</section>
<section>
<section>
<h2>Other useful commands:</h2>
<ul>
<li class="fragment"><strong>Reindent</strong> - help align source code for easier viewing</li>
<li class="fragment"><strong>Keyboard shortcuts</strong>
<ul>
<li class="fragment">Select all: ctrl/cmd + a</li>
<li class="fragment">Cut: ctrl/cmd + x</li>
<li class="fragment">Copy: ctrl/cmd + c</li>
<li class="fragment">Paste: ctrl/cmd + v</li>
<li class="fragment">Undo: ctrl/cmd + z</li>
<li class="fragment">Save: ctrl/cmd + s</li>
<li class="fragment">Chrome Devtools: ctrl/cmd + shift + i</li>
<li class="fragment">Sublime Command Palette: ctrl/cmd + shift + p</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>Other useful commands:</h2>
<ul>
<li class="fragment"><strong>Splitting the screen</strong> - view multiple files at one time
<ul>
<li class="fragment">Multi-column: alt + shift + 1-4</li>
<li class="fragment">Multi-row: alt + shift + 8 or 9</li>
<li class="fragment">Grid of 4: alt + shift + 5</li>
</ul>
</li>
<li class="fragment"><strong>Indentations/Tabbing</strong> - easily add and remove tabs on multiple lines at once
<ul>
<li class="fragment">Remove tabs: select one or more lines and shift + tab</li>
<li class="fragment">add tabs to multiple lines at once: select lines and tab</li>
</ul>
</li>
<li class="fragment"><strong>Move Lines</strong>
<ul>
<li class="fragment">Up: ctrl/cmd + shift + up arrow</li>
<li class="fragment">Down: ctrl/cmd + shift + down arrow</li>
</ul>
</li>
<li class="fragment"><strong>Multi-cursor</strong> - change multiple lines at one time
<ul>
<li class="fragment">Make selection then ctrl/cmd + d</li>
</ul>
</li>
</ul>
</section>
</section>
<section id="sample-app">
<section>
<h2>What is the command line used for?</h2>
<ul>
<li class="fragment">Interaction with Git</li>
<li class="fragment">Navigating the file system</li>
<li class="fragment">Installing/Updating third-party packages like jQuery, Bootstrap, etc</li>
<li class="fragment">Compiling preprocessors like Sass, LESS, etc</li>
<li class="fragment">Use task runners like gulp or grunt</li>
<li class="fragment">Scaffolding new projects</li>
</ul>
</section>
<section>
<h2>Command Line</h2>
<ul>
<li class="fragment">Mac</li>
<ul>
<li class="fragment">iTerm: <a href="https://www.iterm2.com/">Link</a></li>
<li class="fragment">oh-my-zsh: <a href="http://ohmyz.sh/">Link</a></li>
</ul>
<li class="fragment">Windows</li>
<ul>
<li class="fragment">ConEmu: <a href="https://conemu.github.io/">Link</a></li>
<li class="fragment">Under Startup > Specified named task dropdown choose {Bash::Git bash}</li>
</ul>
</ul>
</section>
</section>
<section id="sample-app">
<h2>Git & Github</h2>
<p class="fragment"><a href="https://git-scm.com/" target="_blank">Git Link</a> | Git is the version control system.</p>
<p class="fragment"><a href="https://github.com/" target="_blank">Github Link</a> | Github is a hosting service for git repositories.</p>
<ul>
<li class="fragment">Creating a github account: <a class="fragment" href="https://help.github.com/articles/signing-up-for-a-new-github-account/" target="_blank">Link</a></li>
<li class="fragment">Creating your own github repository: <a class="fragment" href="https://help.github.com/articles/create-a-repo/" target="_blank">Link</a></li>
<li class="fragment">Cloning a github repository: <a class="fragment" href="https://help.github.com/articles/cloning-a-repository/" target="_blank">Link</a></li>
<li class="fragment">Fork a github repository: <a class="fragment" href="https://help.github.com/articles/fork-a-repo/" target="_blank">Link</a></li>
</ul>
</section>
<section>
<h3>2016 Coding & Cocktails Curriculum</h3>
<ul>
<li class="fragment">Intro to HTML & CSS</li>
<li class="fragment">Basic Website Deployment</li>
<li class="fragment">Intro to Command Line</li>
<li class="fragment">Intro to GitHub & Version Control</li>
<li class="fragment">Intro to CSS compliers</li>
<li class="fragment">Intro to Javascript through jQuery</li>
<li class="fragment">Intro to NPM, Bower, Yeoman & Gulp</li>
<li class="fragment">Intro to Single Page Applications & Frameworks</li>
<li class="fragment">Intro to front-end Architecture</li>
<li class="fragment">Intro to Node</li>
<li class="fragment">Intro to REST</li>
<li class="fragment">Ways to Build your Resume & Experience</li>
</ul>
</section>
<section>
<h3>Additional Resources for Learning</h3>
<p class="fragment"><a href="https://github.com/KansasCityWomeninTechnology/LearningResources" target="_blank">Kansas City Women in Technology Github</a></p>
<ul>
<li class="fragment">Glossary</li>
<li class="fragment">Additional Learning Tools</li>
</ul>
</section>
<section>
<h2>Questions?</h2>
<div style = "font-size:1200%; height:100%; margin-top:40%" class ="blue">?
<div class ="clear"></div></div>
</section>
</div>
<footer>
</footer>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: false,
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>