-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
324 lines (279 loc) · 14.9 KB
/
index.html
File metadata and controls
324 lines (279 loc) · 14.9 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
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
<!DOCTYPE html>
<html>
<head>
<title>Code One</title>
<link rel="shortcut icon" type="image/png" href="codeone.png">
<!-- initialize resources -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
<!-- google analytics tracking information -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96336307-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- nav bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#mainNav" id="navbarCollapseButton">
<span class="icon-bar menu-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand">CODE ONE</a>
</div>
<div class="collapse navbar-collapse" id="mainNav">
<div class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#information">General Info</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#curriculum">Curriculum</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</div>
</div>
</div>
</nav>
<!--big image-->
<div id="home" class="container-fluid text-center bg-home-container">
<div class="bg-home-text">
<h3>Learn to Code</h3>
<p><b>An initiative designed to increase computer science exposure</b></p>
<a href="https://goo.gl/forms/5faGdksUtmSxnvUH2" class="btn btn-info">SIGN UP</a>
</div>
</div>
<!-- general information -->
<div class="container-fluid bg-information bg-information-text" id="information">
<h1 class="text-center">GENERAL INFO</h1>
<div class="row">
<div class="col-sm-4 bg-information-text">
<h3><span class="glyphicon glyphicon-paperclip" style="color: #1abc9c"></span> <b>What?</b></h3>
<p>The NA Code One Initiative is a student run project designed to increase exposure to computer science at the middle school level. Absolutely no experience is necessary to participate in the program!</p>
</div>
<div class="col-sm-4 bg-information-text">
<h3><span class="glyphicon glyphicon-calendar" style="color: #1abc9c"></span> <b>When?</b></h3>
<p>Sessions will be once a week, after school from April - May, 2017. Each session will be from 3pm - 5pm on: </p>
<div class="row">
<div class="col-sm-5">
<ul>
<li>March 18, 2019</li>
<li>March 26, 2019</li>
<li>April 2, 2019</li>
<li>April 9, 2019</li>
</ul>
</div>
<div class="col-sm-5">
<ul>
<li>April 16, 2019</li>
<li>April 23, 2019</li>
<li>April 30, 2019</li>
<li>May 7, 2019</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4 bg-information-text">
<h3><span class="glyphicon glyphicon-map-marker" style="color: #1abc9c"></span> <b>Where?</b></h3>
<p>All sessions will be held at Millvale Community Library.<br><a href="#map">213 Grant Ave, Millvale, PA 15209</a></p>
</div>
</div>
</div>
<!--map-->
<div class="container-fluid bg-map" id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3034.8377845839036!2d-79.97379938460213!3d40.478853579358024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8834f3a910f097ed%3A0xd367906933181832!2sMillvale+Community+Library!5e0!3m2!1sen!2sus!4v1488506774445" width="100%" height="600" frameborder="0" style="border:0"></iframe>
</div>
<!-- FAQ -->
<div class="container-fluid bg-faq bg-faq-text" id="faq">
<h1 class="text-center">FAQ</h1>
<div class="row">
<div class="col-sm-4 bg-faq-text">
<h3><b>Who is this for?</b></h3>
<p>The program is targeted towards middle school students, although elementary/high school students are welcome to attend!</p>
</div>
<div class="col-sm-4 bg-faq-text">
<h3><b>Is there any cost associated?</b></h3>
<p>No, Code One is a 100% free program designed to increase computer science exposure to anyone and everyone, even those who may lack the proper resources. All expenses are covered by Code One.</p>
</div>
<div class="col-sm-4 bg-faq-text">
<h3><b>Do I need to bring anything?</b></h3>
<p>Nope. All necessary materials will be provided by us; however, if you have a computer/laptop that you're comfortable with bringing, you're more than welcome!</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 bg-faq-text">
<h3><b>Do I need any prior experience?</b></h3>
<p>Nope. We welcome all experience levels! Our program is designed to start at the basics and work our way up to the more advanced stuff.</p>
</div>
<div class="col-sm-4 bg-faq-text">
<h3><b>What will I learn?</b></h3>
<p>A ton of stuff! Specifically, we will start out with Scratch and then work our way up to Python. More on this under <a href="#curriculum">Curriculum</a>.</p>
</div>
<div class="col-sm-4 bg-faq-text">
<h3><b>Why should I learn to code?</b></h3>
<p>As Steve Jobs once said, "I think everybody in this country should learn how to program a computer because it teaches you how to think." We here at Code One agree. Plus, it's also a ton of fun!</p>
</div>
</div>
</div>
<!--curriculum -->
<div class="container-fluid bg-curriculum bg-curriculum-text" id="curriculum">
<h1 class="text-center">CURRICULUM</h1>
<div class="row">
<div class="col-sm-6 bg-curriculum-text">
<h3><b>Scratch</b></h3>
<p>Scratch is a simple, drag-and-drop programming language oriented towards game development for beginners. Its easy-to-use interface allows our students to pick up the basics of programming really quickly. We use it to teach problem deconstruction, computer logic, and basic algorithm design skills.</p>
<p>Some topics we're going to cover:</p>
<ul>
<li>Game development</li>
<li>Computer logic</li>
<li>Variables</li>
</ul>
<p>Find out more about Scratch <a href="https://scratch.mit.edu/" target="_blank">here.</a></p>
</div>
<div class="col-sm-6 bg-curriculum-text">
<h3><b>Python</b></h3>
<p>Python is a powerful, real world, programming language used in many professions. However, its syntax (how the code is written) is super simple. This allows new students to pick up techniques much more quickly. We use Python to build upon what was learned with Scratch, but give them greater control over their projects.</p>
<p>Some topics we're going to cover:</p>
<ul>
<li>If-else statements</li>
<li>Loops</li>
<li>Variables</li>
<li>Functions</li>
<li>Algorithm design</li>
</ul>
<p>Find out more about Python <a href="https://www.python.org/" target="_blank">here.</a></p>
</div>
</div>
</div>
<!-- lessons -->
<div class="container-fluid bg-lessons bg-lessons-text" id="lessons">
<div class="text-center">
<h3 class="text-center"><b>Missed a lesson?</b></h3>
<p>Not a problem.</p>
<a href="lessons.html" type="button" class="btn btn-warning">View Lessons</a>
</div>
</div>
<!-- about us -->
<div class="container-fluid bg-about bg-about-text" id="about">
<h1 class="text-center">ABOUT US</h1>
<hr>
<div class="row">
<div class="col-sm-4"></div>
<div class="text-center col-sm-4">
<h3><b>Who are we?</b></h3>
<p>We are a group of high school students at North Allegheny who enjoy programming. However, we realize that not everyone has the resources that we do to learn how to program, so we decided to fix that by offering computer science classes at various locations around our community.</p>
</div>
<div class="col-sm-4"></div>
</div>
<hr>
<div class="row">
<div class="col-sm-4"></div>
<div class="text-center col-sm-4">
<img type="button" data-toggle="modal" data-target="#akshanaDassanaikeModal" class="ta-image-details img-circle" src="akshanadassanaike.jpeg">
<h3 type="button" data-toggle="modal" data-target="#akshanaDassanaikeModal"><button class="ta-modal-trigger"><b>Akshana Dassanaike</b></button></h3>
<p>President / Instructor</p>
<!-- akshath jain modal -->
<div class="modal fade" id="akshanaDassanaikeModal" role="dialog">
<div class="modal-dialog">
<div class="row ta-modal-content">
<p style="position: absolute; top: 0; right: 0; z-index: 99"><button type="button" class="ta-modal-close" data-dismiss="modal">×</button></p>
<div class="col-sm-7 ta-modal-col">
<img src="akshanadassanaike.jpeg" class="ta-modal-image img-responsive">
</div>
<div class="col-sm-5 ta-modal-col">
<h3 style="padding-top: 12px; padding-bottom: 12px"><b>Akshana Dassanaike</b></h3>
<p style="padding-bottom: 12px">Akshana is currently a junior at North Allegheny. He plays water polo and debates for North Allegheny as well, and enjoys programming. He particularly enjoys app development, and he’s developed 4 apps to date. Due to his passion for programming, he leads Code One to help spread programming around the Pittsburgh community.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<!-- contact -->
<div class="container-fluid bg-contact bg-contact-text" id="contact">
<h1 class="text-center">CONTACT</h1>
<div class="text-center">
<h3><b>Have any questions, comments, or concerns?</b></h3>
<p>
Feel free to contact us at any time.<br>
<br>Code One email: <p>naprojectcodeone@gmail.com</p>
<br>Millvale Community Library email: <p>info@millvalelibrary.org</p>
<br>Millvale Community Library phone: <a>412-822-081</a>
<br>Millvale Community Library website: <a href="http://millvalelibrary.org/" target="_blank">millvalelibrary.org</a>
<br>
<br>
<a target="_blank"><img class="social-media-icons" src="facebook.png" title="Coming Soon!"></a>
<a href="https://twitter.com/projectcodeone" target="_blank"><img class="social-media-icons" src="twitter.png"></a>
<a href="https://instagram.com/projectcodeone" target="_blank"><img class="social-media-icons" src="instagram.png"></a>
</p>
</div>
</div>
<!--footer-->
<footer class="container-fluid bg-footer bg-footer-text">
<p>
©2019 Code One. All rights reserved. Designed and developed by Akshath Jain and Akshana Dassanaike.
<button href="" class="btn btn-default bg-footer-button" type="button" data-toggle="modal" data-target="#worksCitedModal">
<u>Works Cited</u>
</button>
<a href="#home" type="button" class="btn btn-default bg-footer-button">
<u>Back to Top</u>
</a>
</p>
<!-- works cited modal -->
<div class="modal fade modal-text" id="worksCitedModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" href="" class="close modal-close-symbol" data-dismiss="modal">×</button>
<h4 style="color: #000">Works Cited</h4>
</div>
<div class="modal-body modal-text hanging-indent">
<p>
Blue and Gold Cover Book on Brown Wooden Shelf. Digital image. Pexels. Pexels, 2017. Web. 22 May 2017. (<a href="https://www.pexels.com/photo/books-old-book-knowledge-bookstore-34592/" target="_blank">https://www.pexels.com/photo/books-old-book-knowledge-bookstore-34592/</a>). This picture uses the CC0 Creative Commons License and is free to use by any person without attribution (as per the image description). I color corrected this image after downloading it using Paint.NET to better suit it towards my website’s aesthetic.
</p>
<p>
Google Chrome. Computer software. Chrome for Desktop. Google, 2017. Web. 22 May 2017. (<a href="https://www.google.com/chrome/browser/desktop/index.html" target="_blank">https://www.google.com/chrome/browser/desktop/index.html</a>).
</p>
<p>
Gray Laptop Computer Showing Html Codes in Shallow Focus Photography. Digital Image. Pexel. Pexel, 2017. Web. 21 Mar. 2017. (<a href="https://www.pexels.com/photo/gray-laptop-computer-showing-html-codes-in-shallow-focus-photography-160107/" target="_blank">https://www.pexels.com/photo/gray-laptop-computer-showing-html-codes-in-shallow-focus-photography-160107/</a>). This picture uses the CC0 Creative Commons License and is free to use by any person without attribution (as per the image description). After downloading this image, I color corrected it using Paint.NET to better suit it to my website.
</p>
<p>
Jain, Akshath R. Pictures of Instructors. Digital image. N.p., n.d. Web. 21 Mar. 2017. This is a citation for all images created by me (Akshath Jain) for the Code One website.
</p>
<p>
Microsoft Edge. Computer software. Microsoft, 2017. Web. 22 May 2017.
</p>
<p>
Otto, Mark, and Jacob Thornton. "Bootstrap · The World's Most Popular Mobile-first and Responsive Front-end Framework." Bootstrap · The World's Most Popular Mobile-first and Responsive Front-end Framework. Twitter, 2016. Web. 21 Mar. 2017. (<a href="https://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a>). The Bootstrap framework was used in this project to allow for cross-platform adaptability between various screen sizes and screen densities. All design choices and stylistic elements were of my own creation.
</p>
<p>
Paint.NET. Computer software. Paint.net. Vers. 4.0.16. DotPDN, 2017. Web. 22 May 2017. (<a href="http://getpaint.net" target="_blank">https://getpaint.net</a>).
</p>
<p>
Sublime Text. Computer software. Sublime Text. Vers. 3.0. Sublime Text, 2017. Web. 22 May 2017. (<a href="https://www.sublimetext.com/3" target="_blank">https://www.sublimetext.com/3</a>).
</p>
</div>
<div class="modal-footer">
<button type="button" class="close modal-close-text" data-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>