-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinfo.html
executable file
·363 lines (311 loc) · 18 KB
/
info.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
<!doctype html>
<html lang="en">
<head>
<title>FEWD - Overview</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/general-assembly.css" id="theme">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="center">
<h1>HELLO</h1>
</section>
<section class="center">
<h1>Frontend</h1>
<h1>Web Development</h1>
<h1>(<span class="red">FEWD</span>)</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Agenda</div>
<p>• Introductions</p>
<p>• What is FEWD?</p>
<p>• Course overview</p>
<p>• Who takes FEWD?</p>
<p>• Previous final projects</p>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Introductions</div>
<p>• Chandler Moisen:</p>
<div class="pad-left-lg">
<p>⇒ Frontend Developer @ <a href="http://percolate.com" target="_blank">Percolate</a></p>
<p>⇒ Frontend/JavaScript Instructor @ <a href="http://generalassemb.ly" target="_blank">GA</a></p>
<p>⇒ [email protected]</p>
</div>
<div class="framgent">
<p>• Upcoming FEWD Course:</p>
<div class="pad-left-lg">
<p>⇒ September 19th - November 28th</p>
<p>⇒ Mon / Wed, 630PM - 930PM</p>
</div>
</div>
</section>
<section class="center">
<h1>FEWD Overview</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">FEWD Overview</div>
<div class="text-smallest">
<p>• Frontend Web Development:</p>
<p class="pad-left-lg text-smallest">⇒ The planning and building of websites and web applications to be rendered in the browser</p>
<div class="fragment">
<p>• Toolbox:</p>
<div class="pad-left-lg text-smallest">
<p>⇒ HTML:</p>
<div class="pad-left-lg">
<p>• HyperText Markup Language</p>
<p>• Describes layout / structure (eg position of a nav bar)</p>
</div>
<p>⇒ CSS:</p>
<div class="pad-left-lg">
<p>• Cascading Style Sheets</p>
<p>• Describes the presentation of the layout (eg color of a nav bar)</p>
</div>
<p>⇒ JS:</p>
<div class="pad-left-lg">
<p>• JavaScript</p>
<p>• Describes the behavior of the layout (eg what happens when you click on the nav bar)</p>
</div>
</div>
</div>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">FEWD Overview: FEWD vs BEWD</div>
<p>• Frontend Web Development:</p>
<div class="pad-left-lg text-smaller">
<p>⇒ Developers for the client (aka the browser, aka the frontend)</p>
<p>⇒ Build what users interact with (what they see)</p>
<p>⇒ Works with HTML, CSS, and a <u>lot</u> of JavaScript</p>
</div>
<div class="fragment">
<p>• Backend Web Development:</p>
<div class="pad-left-lg text-smaller">
<p>⇒ Develops on the server (aka the backend)</p>
<p>⇒ Build the services behind the scenes</p>
<p>⇒ Common languages: Java, Python, Ruby</p>
<p>⇒ Secretly jealous of frontend developers</p>
</div>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">FEWD Overview: FEWD vs BEWD</div>
<img src="img/class01/client-server-model.svg.png" alt="">
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">FEWD Overview: Typical Day</div>
<p>Frontend developers interact with nearly all levels of the organization:</p>
<div class="text-smaller pad-left-lg">
<p class="fragment">• Meet with design team to assess feasibility of a new, more modern nav bar</p>
<p class="fragment">• Analyze user data with customer service/sales to determine why a feature is not being adopted</p>
<p class="fragment">• Discuss feature roadmap with product managers</p>
<p class="fragment">• Direct blame at backend developers when a feature breaks</p>
</div>
</section>
<section class="center">
<h1>Course Overview</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Course Overview</div>
<div class="text-smallest">
<p>• Introduction to the basics of frontend web development:</p>
<div class="pad-left-lg">
<p>⇒ HTML</p>
<p>⇒ CSS</p>
<p>⇒ JavaScript</p>
<p>⇒ jQuery (a very popular JavaScript library)</p>
</div>
<div class="fragment">
<p>• Ten-week course:</p>
<div class="pad-left-lg">
<p>⇒ Six hours / week of in-class instruction</p>
<p>⇒ Two+ hours / week of homework</p>
<p>⇒ 10+ hours of final project work</p>
</div>
</div>
<div class="fragment">
<p>• Introductory course - no prior experience is required</p>
<p>• Pre-reqs: highly recommended that students attempt GA's <a href="https://dash.generalassemb.ly/" target="_blank">Dash</a></p>
</div>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Course Overview</div>
<p class="text-smaller">Unit 1: HTML/CSS</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Intro to Web Dev and Building Web Pages</p>
<p>⇒ HTML /CSS Basics</p>
<p>⇒ Advanced CSS</p>
<p>⇒ Page Layout and Implementing SEO</p>
<p>⇒ Navigation and Sprites</p>
<p>⇒ Grid Based Design and Typography</p>
<p>⇒ Mobile Web Dev: Media Queries and Responsive</p>
<p>⇒ More HTML5 & CSS3 Tags and Code Review </p>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Course Overview</div>
<p>Unit 2: JavaScript</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Introducing JavaScript</p>
<p>⇒ Computational Thinking</p>
<p>⇒ Conditional Statments and Loops</p>
<p>⇒ Functions and JavaScript Objects</p>
<p>⇒ The DOM and Selectors</p>
<p>⇒ jQuery</p>
<p>⇒ Event Driven Development with jQuery</p>
<p>⇒ Useful Front End JS Plugins</p>
<p>⇒ Web-based API's</p>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Course Overview</div>
<p class="text-smaller">• Why is this relevant?</p>
<div class="pad-left-lg text-smallest">
<p>⇒ HTML/CSS/JS are essential tools in the digital era</p>
<p>⇒ Most products/companies have a digital component</p>
<p>⇒ Most teams/roles interact with developers/technologists</p>
<p>⇒ You need to effectively communicate with technical stakeholders</p>
</div>
<div class="fragment">
<p class="text-smaller">• What practical skills will I take away?</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Quickly translate ideas into functional applications</p>
<p>⇒ Create modern websites for personal/business functions</p>
<p>⇒ Understand how web technologies can be better leveraged in your current role</p>
</div>
</div>
</section>
<section class="center">
<h1>Students</h1>
<p>Who are my classmates?</p>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Students</div>
<p>Students generally come from one of five backgrounds:</p>
<div class="fragment">
<p>1) Entrepreneurs seeking to create an online prototype</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Translate business ideas into a prototype</p>
<p>⇒ Communicate with a technical co-founder / employees</p>
<p>⇒ Pick up tech-slack where they can</p>
</div>
</div>
<div class="fragment">
<p>2) Career changers</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Curious about breaking into development</p>
<p>⇒ Testing the waters before taking an immsersive course</p>
<p>⇒ Note: FEWD is <u>not</u> intended to land you a full-time job</p>
</div>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Students</div>
<div class="fragment">
<p>3) Backend Web Devs</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Backend devs looking to learn about client-side development</p>
<p>⇒ Want to see what all the noise is about</p>
</div>
</div>
<div class="fragment">
<p>4) Designers + Project Managers</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Want to better communicate with frontend developers</p>
<p>⇒ Understand what design is possible in the browser</p>
<p>⇒ Better estimates for project completion</p>
</div>
</div>
<div class="fragment">
<p>5) Curious Hobbyists</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Have hacked with HTML/CSS/JS for a while</p>
<p>⇒ Looking to cement their knowledge and fill in gaps</p>
</div>
</div>
</section>
<section class="center">
<h1>Previous Projects</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Previous Projects</div>
<p>• Check out previous projects at GA's <a href="https://gallery.generalassemb.ly/" target="_blank">student gallery</a></p>
<div class="pad-left-lg text-smaller">
<p>⇒ <a href="http://murielm.github.io/fewd-34/Homework/disrupticon">http://murielm.github.io/fewd-34/Homework/disrupticon</a></p>
<p>⇒ <a href="http://capitolview.us/">http://capitolview.us/</a></p>
<p>⇒ <a href="http://colleeno.github.io/oceanproject/">http://colleeno.github.io/oceanproject/</a></p>
<p>⇒ <a href="http://davidlykhim.github.io/trippn/">http://davidlykhim.github.io/trippn/</a></p>
<p>⇒ <a href="http://wattsand.com/">http://wattsand.com/</a></p>
<p>⇒ <a href="http://www.alphabites.xyz/">http://www.alphabites.xyz/</a></p>
<p>⇒ <a href="http://astrologer-horse-46603.bitballoon.com/">http://astrologer-horse-46603.bitballoon.com/</a></p>
</div>
</section>
<section class="center">
<h1>Next Steps</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">How do I apply?</div>
<div class="text-smaller">
<p>• Application:</p>
<p class="pad-left-lg text-smallest">⇒ <a href="https://generalassemb.ly/applications/new/front-end-web-development" target="_blank">https://generalassemb.ly/applications/new/front-end-web-development</a></p>
<p>• NYC Admissions: </p>
<div class="pad-left-lg text-smallest">
<p>⇒ Email: [email protected]</p>
<p>⇒ Phone: 1 (877) 348-5665</p>
</div>
<hr>
<div class="fragment">
<p>Want to chat?</p>
<div class="pad-left-lg text-smallest">
<p>⇒ Chandler Moisen</p>
<p>⇒ Frontend Developer at Percolate / Instructor at General Assembly</p>
<p>⇒ [email protected]</p>
</div>
</div>
</div>
</section>
<!-- THE END -->
<section class="center">
<img src="img/main/the-end.jpg">
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: false,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.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, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>