-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
178 lines (155 loc) · 16.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Hunter Lightman">
<title>Code Weekend </title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme-1.min.css" rel="stylesheet">
<link href="css/more.css" rel="stylesheet">
<link href="css/prism.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- TODO: Favicons -->
<!-- <link rel="icon" href="/favicon.ico"> -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="topnav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Code Weekend</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://css.cis.upenn.edu/">Computer Science Society</a></li>
<li><a href="http://dinphil.github.io/">Hacking & Learning</a></li>
<li><a href="http://pennapps.com/">PennApps</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="jumbo">
<div class="container">
<h1>Hello.</h1>
<p>Welcome to Code Weekend! We're a series of workshops run by
Computer Science Society aimed at getting
Penn students with none-to-some coding experience ready for PennApps.
</p>
<p>Learn all about the <em>newly revamped</em> workshops we have in store for you today!</p>
<p><a class="btn btn-primary btn-lg" href="https://goo.gl/forms/tSeN09mK4ARtHAXz2" role="button">Sign me up! »</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-9">
<span id="sec-1" class="anchor"></span><section id="" class="group"><div class="page-header"><h2>Code Weekend Spring 2k19</h2></div><span id="sec-1-1" class="anchor"></span><div id="" class="subgroup"><h3>Building your first web app and hardware project</h3><p>Code Weekend is scheduled for <em>Saturday and Sunday, January 26th and 27th</em> (event details <a href="https://www.facebook.com/events/935258843344733/" >here</a>) and will comprise of three workshops to help participants build their very own web app or hardware project. Participants are expected to have very minimal coding or hardware experience as we will be carefully explaining everything we do as we go. This should be extremely helpful to first-time hackers (a fun term we use for people that build things!) especially with <a href="http://pennapps.com" title="PennApps XIX">PennApps</a> scheduled for the weekend after. If you haven't already, check it out - it's a great way to jump in the deep end and expose yourself to the incredible world of building things (and actually they're doing great stuff for first-time hackers as well).</p>
<blockquote>
<p>These workshops have been organized by the Computer Science Society (CSS), PennApps, and many talented individuals. Student mentors will be around to help participants as we go through these highly interactive, live-coding-based workshops.</p>
</blockquote>
<blockquote>
<p>You can find the workshops from the previous Code Weekend (Fall 2018) <a href="http://dinphil.github.io/code-weekend/past/fall18/index.html">here</a>.</p>
</blockquote>
</div></section>
<span id="sec-3" class="anchor"></span><section id="" class="group"><div class="page-header"><h2>Workshops</h2></div>
<div id="" class="subgroup"><h3>Real-time Apps with WebSockets</h3><p>Learn about the fundamentals of using JavaScript to create rich web applications! Students will be able to walk through the creation of a chat app using JavaScript with WebSockets.</p>
<p>Please install <a href="https://nodejs.org/en/download/">Node.js</a> before coming. </p>
</div>
<div id="" class="subgroup"><h3>Building PennInTouch with Ruby on Rails</h3><p>In this workshop we will be building a psuedo-PennInTouch where users will be able to add students/courses. We will start with a brief intro into Ruby on Rails before diving into coding the site.</p>
<p>Participants should have some sort of coding text editor installed. We will be using VS Code, which you can install <a href="https://code.visualstudio.com/">here</a>. </p>
<p>As RoR development on Windows has been notoriously tough, participants with Windows computers will need a little more setup and should install VirtualBox along with the VM that we use in CIS196 which can be done <a href="https://www.seas.upenn.edu/~cis196/windows/">here</a>. </p>
</div>
<div id="" class="subgroup"><h3>Getting Started with Arduino by Penn Architechs</h3><p> Have you ever wondered how you can write software that controls hardware in ways that you can see with your own eyes? Designed for curious students without any background in using Arduino, the workshop will introduce first principles in designing your own circuits and systems using an Arduino. After this workshop, you will have the knowledge to go out and build your own projects with Arduino!
</p> <p>In preparation for the workshop, please come with the <a href="https://www.arduino.cc/en/main/software">Arduino IDE</a> installed on your laptop so that we can help with any installation issues and jump right into the workshop!
</p>
</div>
</section>
<span id="sec-2" class="anchor"></span><section id="" class="group"><div class="page-header"><h2>Introduction to Web Development</h2></div><span id="sec-2-1" class="anchor"></span><span id="sec-2-2" class="anchor"></span><div id="" class="subgroup"><h3>An Introduction to (the) Life (of a Developer)</h3><p>When coding, you'll run into tons of small problems and errors that you don't initially know how to solve. <strong><em>This is completely normal.</em></strong> In order to write solutions to every problem that you could hypothetically run into, you'd need a manual taller than the Empire State building. </p>
<p>Thankfully, we all have a resource with more information that we can possibly imagine - teh interwebz. You've probably searched for things using Google before, but most coding problems can actually be solved by effectively Googling your issue. Here are some tips for finding the answers to all your problems on the Internet:</p>
<ul>
<li>Be descriptive. If you're searching for what's causing an error then you can try just searching for the entire error message, or try describing what happened. For example, "Homebrew does not install through the terminal on OSX Yosemite" is a better search query than "homebrew not working", though the best search query is often some combination of plain text and the actual error message. Often error codes make great search queries, as long as they are contextualized (i.e. with the name of the language/environment).</li>
<li>Along with that vein, use as many specific words as possible. You can use complete sentences if you'd like, but normally four or five very descriptive nouns/verbs is ideal, and you won't throw Google off-track by searching for unnecessary things. For example, you try to put a banner at the top of a web page, but there's a weird white border around the entire page. Googling "there's a weird white border around the entire page" isn't helpful. Always start with the name of the language you think is suspect if you can (in this case, it's CSS, since all style things on the page are controlled by CSS). Then, describe the problem with just a few words. Here, I used "CSS no page border". The first result was really helpful and ended up solving my problem.</li>
</ul>
<p>These resources are also awesome:</p>
<ul>
<li><a href="http://stackoverflow.com">Stack Overflow</a> is the best. Search results that link here are often the most helpful, and you can almost always find someone who's had the same problem as you on here. You should mostly refrain from posting questions to Stack Overflow since odds are your question has already been answered there somewhere.</li>
<li>If you're looking for syntax, or lists of inbuilt functions, then look for the Official Documentation for the language in question. <a href="http://www.w3schools.com">W3Schools</a> is great for HTML, CSS, and Javascript.</li>
<li><a href="https://www.bento.io">Bentobox</a> is a great all-in-one resource to learn to code for a huge number of technologies. </li>
<li><a href="http://www.codecademy.com/learn">Code Academy</a> has some great tutorials. The lessons for each language can get tedious, but the tutorials where you build actual things are pretty great. If you're looking for a good introduction to HTML/CSS, <a href="https://dash.generalassemb.ly/">General Assembly's Dash</a> is probably the best place to start.</li>
</ul>
</div><span id="sec-2-3" class="anchor"></span><div id="" class="subgroup"><h3>An Introduction to the Web</h3><p>There's pretty much three things happening every time you open a website:</p>
<ul>
<li>Your browser looks up an address (say google.com) and follows it back to its home - the server which actually runs the website. This server is basically just a computer, albeit a huge, immensely powerful computer possibly comprising acres of computer hardware connected together. For these workshops though, that's just going to be your laptop...we don't provide that kind of computing power.</li>
<li>This server is what we call the <em>backend</em>. This server now processes your request - it could be a request to view the website or something more complicated like an attempt to log in to a dashboard - and sends a response back to your computer. This server will often be programmed in languages such as Python, Ruby on Rails, even Java (but not as much these days). Node.JS is a framework that lets us use Javascript on the backend as well as the frontend.</li>
<li>Your computer now reads this response and converts it into the web page you actually see on your computer. This last bit of conversion is what we call the <em>frontend</em> doing its work.</li>
</ul>
<p><img src="assets/img/server-browser.png" alt="Server- Browser"></p>
<p>So basically, any work done on a server has been programmed into the backend, while anything done inside your browser has been programmed into the frontend. These are the two main components of any website.</p>
<p>You'll see later on that requests aren't just made to the server when we first open the website; it's often faster to make smaller requests first, load the important parts of a web page and then request additional bits of information when they're needed (think <a href="http://www.facebook.com">Facebook's Newsfeed</a>). It's also used when we do things like attempt to log in to a website. This is one of the reasons why Javascript is so useful as a frontend programming language, as it allows us to do these kinds of things very easily and update the web page immediately without having to refresh the page.</p>
<p><img src="assets/img/facebook_loading.png" alt="Facebook Loading using Javascript"></p>
</div><span id="sec-2-4" class="anchor"></span><div id="" class="subgroup"><h3>What is Terminal/Command Prompt?</h3><p><img src="assets/img/terminal.png" alt="Terminal"></p>
<p>Terminal (or Command Prompt on Windows) is basically a way for us to access the Command Line. This gives us access to a wonderful variety of things that we can do. We will be spending a good amount of time this weekend in here, so let's take some time to get used to it.</p>
<p>Once you fire up Terminal or Command Prompt (on Windows, you'll later need to run cmd.exe by right-clicking on the shortcut and click Run as Administrator, you'll know it's running as Admin if your path ends in <code>../system32</code>), here are a few simple commands that you can type:</p>
<ul>
<li><code>ls</code> (<code>DIR</code> on Windows) lists all the files in the current folder</li>
<li><code>cd</code> allows you to change directory. So <code>cd Documents</code> will move into the folder Documents if there is such a folder in the current directory. You can check this by using <code>ls</code> (<code>DIR</code> on windows). To move up a directory, say back to where you were before you went into Documents, type in <code>cd ../</code>.</li>
<li><code>pwd</code> prints out the current path you've traversed in the file system. It's particularly helpful once you've used <code>cd</code> a few times, and aren't sure where you are anymore.</li>
<li><code>mkdir</code> allows you to make a folder in the current directory. So <code>mkdir Such Magic</code> makes a folder named 'Such Magic'.</li>
<li><code>mv</code> (<code>move</code> on windows) will let you move files and folders. In Terminal you can do <code>mv ~/Desktop/MyFile.rtf /Volumes/Backup/MyFolder</code> to move MyFile.rtf. On Windows <code>move c:\windows\temp\*.* c:\temp</code> will move everything from <code>C:\windows\temp</code> to <code>C:\temp</code>. <code>*</code> works as a wildcard operator here. Careful with this one - you may not want to move things around haphazardly.</li>
</ul>
<!--Take a look at some of our organizers' websites for inspiration (<a href="http://www.seas.upenn.edu">Devesh</a>, <a href="http://dhruvagarwal.me">Dhruv</a>) or browse around the internet to see nice designs (like <a href="http://medium.com">Medium</a>).</p>-->
</div></section>
<span id="sec-8" class="anchor"></span><section id="" class="group"><div class="page-header"><h2>Thanks for being a part of Code Weekend!</h2></div><span id="sec-8-1" class="anchor"></span><div id="" class="subgroup"><h3>We hope you enjoyed these workshops as much as we enjoyed making them for you.</h3><p>Please do give members of the Code Weekend Team feedback on how to improve these workshops in the future and tell your friends what you've learned!</p>
</div></section></div>
<nav class="col-xs-3 docs-sidebar">
<ul class="nav nav-stacked" id="sidebar">
<li><a href="#sec-1">Code Weekend Fall 2k19</a><ul class="nav nav-stacked"><li><a href="#sec-1-1">Building your first web app and hardware project</a></li></ul></li>
<li><a href="#sec-3">Workshops</a>
</li>
<li><a href="#sec-2">Introduction to Web Development</a>
<ul class="nav nav-stacked"><li><a href="#sec-2-2">An Introduction to (the) Life (of a Developer)</a></li><li><a href="#sec-2-3">An Introduction to the web</a></li><li><a href="#sec-2-4">What is Terminal/Command Prompt?</a></li></ul>
</li>
<li><a href="#sec-8">Thanks for being a part of Code Weekend!</a><ul class="nav nav-stacked"><li><a href="#sec-8-1">We hope you enjoyed these workshops as much as we enjoyed making them for you.</a></li></ul></li>
</ul>
</nav>
</div>
<hr>
<footer>
<p>
© <a href="http://css.cis.upenn.edu/">Computer Science Society</a> 2019.
Page created by <a href="http://hunterlightman.com/">Hunter Lightman</a>.
Workshops designed by the <a href="http://dinphil.github.io/">H&L team.</a>
</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('body').scrollspy({
target: '.docs-sidebar',
offset: 10
});
$("#sidebar").affix({
offset: {
top: $('#jumbo').height() + $('#topnav').height()
}
});
});
</script>
<script src="js/prism.js"></script>
</body>
</html>