forked from turingschool/backend-curriculum-site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
374 lines (353 loc) · 15.9 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
<!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="index.html">Introduction</a></li>
<li><a href="vocabulary.html">Vocabulary</a></li>
<li><a href="books.html">Book List</a></li>
<li><a href="#week">Prework: Week</a></li>
<li><a href="#month">Prework: Month</a></li>
<li class="arrow">Internal Resources</li>
<li><a href="resources.html">Resources</a></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>What is Front-End Development?</h3>
<p>
Front-end development deals with the user facing elements of a website, or the part of the website or software that you interact with. It is the meeting point of design and development, and requires devs to be skilled at writing a blend of HTML (page strucutre), CSS (styling), and Javascript (interactivity). From UX/UI principles to expert understanding of HTML, CSS, and JavaScript front-end developers are a critical part of modern engineering teams.
</p>
</article>
<article>
<h3>Set Up</h3>
<p>
Before starting at Turing, you'll need to get your system set up. Please have the tools below installed before your first day:
</p>
<article>
<ul>
<li>
<h4 class="full-width"><a href="https://atom.io/", target="_blank">Install Atom text editor</a></h4>
</li>
<li>
<h4 class="full-width"><a href="https://nodejs.org/en/", target="_blank">Node.js v5.10.1 Stable</a></h4>
</li>
<li>
<h4 class="full-width"><a href="https://developer.apple.com/xcode/", target="_blank">Xcode Command Line Tools</a></h4>
</li>
<li>
<h4 class="full-width"><a href="https://www.google.com/chrome/", target="_blank">Google Chrome</a></h4>
</li>
</ul>
</article>
</article>
<article>
<h3>Learning Goals</h3>
<p>
After completing the prework, you should be able to do the following:
</p>
<ul>
<li class="arrow">
<p>Be comfortable navigating your development environment</p>
</li>
<li class="arrow">
<p>Understand where programming skills fit into the "web"</p>
</li>
<li class="arrow">
<p>Understand what pieces make up a web application</p>
</li>
<li class="arrow">
<p>Develop a basic knowledge of HTML and CSS</p>
</li>
<li class="arrow">
<p>Have a basic understanding of HTML including forms</p>
</li>
<li class="arrow">
<p>Develop a level of comfort with the most common Javascript patterns in web development</p>
</li>
<li class="arrow">
<p>Understand the basics of version control and why it is used</p>
</li>
</ul>
<br/>
<p>
And remember, don't worry if you don't 100% understand everything!
</p>
</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>
<li>
<h4><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapter 1
</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>
<li>
<h4><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapter 2
</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>
<li>
<h4><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapters 3
</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.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapters 4, 5, and 6
</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.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapters 6, 7, and 8
</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>
<li>
<h4><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapters 9, 10, and 11
</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>
<li>
<h4><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
<p>
Read chapters 12 and 13
</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>
<li>
<h4><a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line" target="_blank">Introduction to the Mac OS X Command Line</a></h4>
<p>
A tutorial that walks you through command line fundanmentals.
</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://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647/ref=la_B001IR3Q7I_1_3?s=books&ie=UTF8&qid=1457549440&sr=1-3" target="_blank">JavaScript and JQuery: Interactive Front-End Web Development</a></h4>
<p>
A thorough and easy-to-reference introduction to Javascript by John Duckett.
</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.designkit.org/resources/1" target="_blank">Field Guide to Human Centered Design</a></h4>
<p>
A step-by-step guide that will get you solving problems like a designer by <a href="https://www.ideo.org/" target="_blank">IDEO.org</a>
</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>