forked from turingschool/backend-curriculum-site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
463 lines (439 loc) · 16.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
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html>
<head>
<title>Turing Front-End Engineering</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<ul>
<li class="arrow">Before Turing</li>
<li><a href="#before">Introduction</a></li>
<li><a href="#week">Prework: Week</a></li>
<li><a href="#month">Prework: Month</a></li>
<li class="arrow">At Turing</li>
<li class="arrow">After Turing</li>
<li class="arrow">Internal Resources</li>
</ul>
</nav>
<section class="container">
<h1>Turing Front-End Engineering</h1>
<article>
<h2 id="before">Prework overview</h2>
<br/>
<p>
Prework helps provide important context and vocabulary to help you hit the ground running on the first day of class, and we've found that students who come into the program having invested time in familiarizing themselves with key concepts are able to maximize their early weeks with us.
</p>
</article>
<article>
<h3>Set Up</h3>
<p>
set up things and if they need to sign up for any course stuff
</p>
</article>
<article>
<h3>Learning Goals</h3>
<p>
don't freak out if you don't understand everything
</p>
</article>
<article>
<h3>Vocabulary</h3>
<p>
Being familiar with key terms and concepts is a big help in your early days at Turing, so we've put together some vocabulary that will help you be able to 'speak code'.
</p>
</article>
<article>
<ol>
<li>
<h4>Domain</h4>
<p>
Ever wonder what that thing in the top of the browser is?
</p>
</li>
<li>
<h4>POP & IMAP</h4>
<p>
POP, IMAP, SMTP Oh My! It's only email, don't be scared.
</p>
</li>
<li>
<h4>API</h4>
<p>
We're building programs that can talk to other programs. Their APIs are their languages. Sort of.
</p>
</li>
<li>
<h4>WYSIWYG</h4>
<p>
You can't always get what you want, but sometimes, What You See Is What You Get.
</p>
</li>
<li>
<h4>IP Address</h4>
<p>
There's no place like 127.0.0.1, there's no place like 0.0.0.0, there's no place like localhost.
</p>
</li>
<li>
<h4>Web Server</h4>
<p>
Apache, Puma, Unicorn, Thin, IIS, Mongrel, don't be scared, they are just the beasts behind the world wide web.
</p>
</li>
<li>
<h4>Bugs</h4>
<p>
The term 'debugging' was coined by Grace Hopper when she literally removed a moth from her computer to get it working.
</p>
</li>
<li>
<h4>DNS</h4>
<p>
Finally understand how 74.125.228.4 actually means google.com
</p>
</li>
<li>
<h4>The Cloud</h4>
<p>
It's like instead of your head being in the clouds, it's all your infrastructure.
</p>
</li>
<li>
<h4>Command Line</h4>
<p>
Live deep in the nix heartland and become a loving extension of the shell.
</p>
</li>
<li>
<h4>Version Control</h4>
<p>
Rule 1. Never lose code. Rule 2. Never lose code.
</p>
</li>
<li>
<h4>Grid Systems</h4>
<p>
Just because we're not designers doesn't mean we shouldn't appreciate and respect their grids.
</p>
</li>
<li>
<h4>Cookies</h4>
<p>
There's probably a pun we could come up with, but we take security seriously.
</p>
</li>
<li>
<h4>404 Error</h4>
<p>
The web's best easter egg.
</p>
</li>
<li>
<h4>Responsive Design</h4>
<p>
Keep your mind like water, but your design should be fluid and screen independent.
</p>
</li>
<li>
<h4>SEO</h4>
<p>
Despite what you might read, it's basically just black magic, the dark arts, the voodoo that gives traffic.
</p>
</li>
<li>
<h4>Hex</h4>
<p>
Because green to you might not be green to me. So there's these really specific codes we use for colors.
</p>
</li>
<li>
<h4>CMS</h4>
<p>
All applications are basically just content management systems anyway.
</p>
</li>
<li>
<h4>Pseudo Code</h4>
<p>
First learn to express yourself. Then learn to code.
</p>
</li>
<li>
<h4>HTTPS</h4>
<p>
Insecure content warnings? HTTP Sniffing? Here's why.
</p>
</li>
<li>
<h4>Open Source</h4>
<p>
It's sort of impossible for me to quantify the impact open source software has made, but at least 64% of the top million websites are powered by it.
</p>
</li>
<li>
<h4>AJAX</h4>
<p>
And one day in February 2005, the Internet suddenly felt different.
</p>
</li>
<li>
<h4>AJAX</h4>
<p>
And one day in February 2005, the Internet suddenly felt different.
</p>
</li>
<li>
<h4>Frontend / Backend</h4>
<p>
What's the difference? Turns out, less and less.
</p>
</li>
<li>
<h4>Javascript</h4>
<p>
The most pervasive and ubiquitous programming language since Flash.
</p>
</li>
<li>
<h4>Programming</h4>
<p>
It's awesome.
</p>
</li>
<li>
<h4>Database</h4>
<p>
Just think Excel spreadsheet on crack. Better. We mean better.
</p>
</li>
<li>
<h4>CSS</h4>
<p>
We could never love anyone that didn't appreciate the importance of a separation of content and style.
</p>
</li>
<li>
<h4>HTML</h4>
<p>
All documents should come in this format.
</p>
</li>
</ol>
</article>
<section>
<h2>Prework Assignments</h2>
<article id="week">
<h3>Every Day</h3>
<p>
Practic makes perfect, and these daily tasks will help build on your typing and logical thinking skills.
</p>
<article>
<ul>
<li>
<h4><a href="https://typing.io/" target="_blank">typing.io</a></h4>
<p>
Aim for 25 wpm without looking at the keyboard. Focus on Javascript jQuery and Less Bootstrap.
</p>
</li>
<li>
<h4><a href="https://brilliant.org/computer-science/computer-science/?subtopic=types-and-data-structures" target="_blank">Algorithmic thinking and logic</a></h4>
<p>
Sign up for a free account and do the free Computer Science Warmups Concepts Challenges at Brilliant.org. Spread these exercises out over the next week as you see fit.
</p>
</li>
</ul>
</article>
<h3>Weeklong Ramp-up</h3>
<h4>Day 1</h4>
<article>
<ul>
<li>
<h4><a href="http://jsforcats.com/"target="_blank">JS for Cats</a></h4>
<p>
Read the first three sections: The Console, Strings, and Values and variables.
</p>
</li>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 1 and 2.
</p>
</li>
</ul>
</article>
<h4>Day 2</h4>
<article>
<ul>
<li>
<h4><a href="http://jsforcats.com/"target="_blank">JS for Cats</a></h4>
<p>
Read the next four sections: Using functions, Built in JS function, Download new JS functions, Writing new functions
</p>
</li>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 3 and 4.
</p>
</li>
</ul>
</article>
<h4>Day 3</h4>
<article>
<ul>
<li>
<h4><a href="http://jsforcats.com/" target="_blank">JS for Cats</a></h4>
<p>
Read the next four sections: Loops, Arrays, Objects, Callbacks
</p>
</li>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 5 and 6.
</p>
</li>
</ul>
</article>
<h4>Day 4</h4>
<article>
<ul>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 7, 8, and <strong>skip 9.</strong>
</p>
</li>
<li>
<h4><a href="http://www.designkit.org/resources/1" target="_blank">Field Guide to Human Centered Design</a></h4>
<p>
Read Introduction.
</p>
</li>
</ul>
</article>
<h4>Day 5</h4>
<article>
<ul>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 10, 11, and 12.
</p>
</li>
<li>
<h4><a href="http://www.designkit.org/resources/1" target="_blank">Field Guide to Human Centered Design</a></h4>
<p>
Read Mindsets.
</p>
</li>
</ul>
</article>
<h4>Day 6</h4>
<article>
<ul>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 13, 14, and 15.
</p>
</li>
</ul>
</article>
<h4>Day 7</h4>
<article>
<ul>
<li>
<h4><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
<p>
Read chapters 16 and 17.
</p>
</li>
</ul>
</article>
<h3 id="month">Month of Prework: Extended Resources</h3>
<p>
Have longer than a week to prepare for your time at Turing? Looking for more details and a deeper dive into the materials? Just can't get enough? We've put together a collection of resources to help you continue your ramp up before the first day of class.
</p>
<h4>Workflow and Tools</h4>
<article>
<ul>
<li>
<h4><a href="http://gitreal.codeschool.com/levels/1" target="_blank">Git Real</a></h4>
<p>
Codeschool's entry-level Git tutorial. Do you like games? Do you like space? You're gonna like this.
</p>
</li>
<li>
<h4><a href="https://try.github.io/levels/1/challenges/1" target="_blank">TryGit</a></h4>
<p>
Github's short (around 15-minutes) tutorial on Git.
</p>
</li>
</ul>
</article>
<h4>Javascript Resources</h4>
<article>
<ul>
<li>
<h4><a href="https://www.codecademy.com/learn/javascript" target="_blank">Codecademy Introduction to Javascript</a></h4>
<p>
An introduction to the JavaScript programming language.
</p>
</li>
<li>
<h4><a href="https://www.codecademy.com/learn/jquery" target="_blank">Codecademy Introduction to jQuery</a></h4>
<p>
Learn about the most popular JavaScript library on the web.
</p>
</li>
<li>
<h4><a href="http://eloquentjavascript.net/" target="_blank">Eloquent Javascript</a></h4>
<p>
An in depth dive into the language, Eloquent Javascript is "a book about JavaScript, programming, and the wonders of the digital."
</p>
</li>
</ul>
</article>
<h4>HTML and CSS Resources</h4>
<article>
<ul>
<li>
<h4><a href="https://www.codecademy.com/learn/web" target="_blank">Codecademy HTML & CSS</a></h4>
<p>
Get your HTML and CSS foundation locked in. This course teaches the basics of website markup and styling so you'll be ready to roll on day 1.
</p>
</li>
<li>
<h4><a href="https://smacss.com/" target="_blank">Scalable and Modular Archetecture for CSS</a></h4>
<p>
Once you've got the basics of HTML and CSS down, SMACSS will show you an approach to writing scalable and reusable CSS.
</p>
</li>
</ul>
</article>
<h4>Design, UX, and UI Resources</h4>
<article>
<ul>
<li>
<h4><a href="http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals" target="_blank">UX Crash Course: 31 Fundamentals</a></h4>
<p>
A collection of 31 bite-sized daily lessons to introduce you to UX principles and techniques.
</p>
</li>
<li>
<h4><a href="http://www.thinkingwithtype.com/" target="_blank">Thinking with Type</a></h4>
<p>
Typography is a big topic, learn the basics of what you need to know about how to use type effectively.
</p>
</li>
</ul>
</article>
</article>
</section>
</section>
</body>
</html>