forked from LearnTeachCode/learnteachcode.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
77 lines (65 loc) · 5.94 KB
/
Copy pathindex.html
File metadata and controls
77 lines (65 loc) · 5.94 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Workshop: Full-Stack JavaScript Intro: Build a Real-Time Interactive Web App - Learn Teach Code LA</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header>
<h1><span class="subhead">Learn Teach Code LA Workshop:</span><br> Build Your First Real-Time Interactive Web App</h1>
<p class="tagline">A fun intro to full-stack JavaScript, building a real-time collaborative painting app with NodeJS, Express, and SocketIO!</p>
</header>
<section>
<h2>Stuff to Review Before Part 2:</h2>
<p>Think of this all as optional homework. But the more you practice, the more you'll learn -- and the more you'll get out of part 2 of our workshop!</p>
<ul>
<li><strong><a href="https://learnteachcode.herokuapp.com/">Join our chatroom on Slack</a></strong> - Stay in touch with us, ask questions, and share what you're learning!</li>
<li><strong><a href="slides/">Review the slides</a></strong> - Feel free to bookmark this version of the slides.</li>
<li><strong>Check out the sample code for all the demos</a></strong>:</li>
<ul>
<li><a href="https://github.com/LearnTeachCode/socketio-paint-demo">Painting app</a> - Here's the complete code for what we'll (hopefully) finish building in part 2!</li>
<li><a href="https://github.com/LearnTeachCode/socketio-chat-demo">Chatroom app</a> - This is the chatroom app from the beginning of our slides.</li>
<li><a href="https://github.com/LearnTeachCode/socketio-box-broadcast">Broadcasted moving box</a> - Where I moved a box around the screen and you all could see it move.</li>
<li><a href="https://github.com/LearnTeachCode/socketio-box-shared">Shared moving box</a> - Where we all moved the same box around the screen, Twitch Plays Pokemon style!</li>
<li><a href="https://github.com/LearnTeachCode/socketio-box-individual">Individual moving boxes</a> - Where we all had our own box that we could move around the screen.</li>
</ul>
</ul>
<p>So those links up there are the most important things that I figured you'd want to look at. Next, here are some extra resources that you might want to explore if you have time:</p>
<h3>Resources for Further Reading/Learning:</h3>
<ul>
<li><a href="https://www.learnenough.com/text-editor-tutorial">Learn Enough Text Editor to Be Dangerous</a> (a good free book!)</li>
<li><a href="https://www.learnenough.com/command-line-tutorial">Learn Enough Command Line to Be Dangerous</a> (another good free book!)</li>
<li><a href="http://socket.io/get-started/chat/">Official SocketIO chat tutorial</a> (try it out!)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Events">MDN JavaScript event reference</a> (the giant list)</li>
<li><a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">Great video about the event loop in JavaScript</a> (it's pretty advanced, so if it's too hard for you right now, bookmark it to watch later!)</li>
<li><a href="http://blog.teamtreehouse.com/an-introduction-to-websockets">Introduction to WebSockets</a> (a good tutorial on this underlying technology)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">MDN overview of the Websocket API</a> (just in case you're curious)</li>
<li><a href="https://tools.ietf.org/html/rfc6455">The official standard for the WebSocket protocal</a> (this is a scary document but again, just in case you're curious!)</li>
</ul>
</section>
<section>
<h2>How to Set Up Before the Workshop:</h2>
<p>I also made <a href="#video">this video</a> for you reviewing how to get set up! If you're comfortable with installing the software below and using the command line a bit, feel free to skip the video.</p>
<ul>
<li><strong>Install a text editor</strong> - Make sure you have a text editor installed on your computer. A couple good free ones are <a href="https://atom.io/">Atom</a> and <a href="https://www.sublimetext.com/">Sublime</a>.</li>
<li><strong><a href="https://github.com/LearnTeachCode/socketio-paint-demo/tree/step1">Get the sample code</a></strong> -- Download the ZIP folder (OR if you are using git, be sure to "git checkout step1" to get the right branch of <a href="https://github.com/LearnToCodeLA/socketio-paint-demo/tree/step1">our sample</a> code on GitHub.</li>
<li><strong><a href="https://nodejs.org/en/">Install NodeJS</a></strong> - Download and install <a href="https://nodejs.org/en/">NodeJS</a> on your computer (NOTE: Mac users, install it with Homebrew!! See the video, plus <a href="http://blog.teamtreehouse.com/install-node-js-npm-mac">here's a tutorial</a>)</li>
<li><strong>Run "npm install"</strong> - Run this in command line once you're inside your project folder to download Express and SocketIO</li>
<li><strong><a href-"https://github.com/join">Create a GitHub account</a></strong> - It's free and awesome!</li>
<li><strong><a href-"https://signup.heroku.com/">Create a Heroku account</a></strong> - It's also free and awesome!</li>
<li><strong>Review JavaScript basics</strong> - A great tutorial to look over is <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">MDN's JavaScript tutorial</a></li>
</ul>
<p id="video">Be sure to watch <a href="https://www.youtube.com/watch?v=GzKSRb7wNYA">the video</a> in fullscreen mode:</p>
<iframe width="880" height="495" src="https://www.youtube.com/embed/GzKSRb7wNYA?rel=0" frameborder="0" allowfullscreen></iframe>
</section>
<footer>
<p>
<strong>Want to get more involved with our community?</strong>
<a href="http://learnteachcode.herokuapp.com">Join our chatroom on Slack</a> and follow us on <a href="https://twitter.com/LearnToCodeLA">Twitter</a> and <a href="https://github.com/learnteachcode">GitHub</a>!
</p>
<p>
<strong>Want to sponsor us?</strong> We're always on the lookout for more meeting spaces. Let us know if you have any suggestions or would like to sponsor us at your office!
</p>
</body>
</html>