-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.php
More file actions
173 lines (154 loc) · 8.37 KB
/
index.php
File metadata and controls
173 lines (154 loc) · 8.37 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
<?php require_once("header.php"); ?>
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Lesson Materials
<small>Links and Downloads</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Project One -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/taster/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Taster Class</h3>
<h4>Spaghetti Engineering and Marshmallow Madness</h4>
<p>We started with a challenge to build the tallest tower out of spaghetti and marshmallows. Then we took a look at how browsers and servers communicate to display websites, and then experimented with editing a simple website. Finally it was time to recreate the spaghetti towers in the browser using JavaScript and <a href="https://p5js.org/">p5.js</a></p>
<a class="btn btn-primary" href="demo/taster/demo.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/taster/taster.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-1/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 2</h3>
<h4>JavaScript basics and an image slider</h4>
<p>In this lesson, we look at the basics of programming in Javascript and how to use it to access objects on a web page. Our first demo is a simple image slider that can be controlled with two buttons on the page.</p>
<a class="btn btn-primary" href="demo/lesson-1/demo.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-1/lesson-1.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/dismiss7Game/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 3</h3>
<h4>Functions, Control Flow, Modulo and a little game</h4>
<p>In this lesson we continue practicing funtions and control flow (especially if, else and for-loops.). For practice we also create a little game we you count from 1 onwards, but are not allowed to print any numbers which are the result of a multiplication with 7.</p>
<a class="btn btn-primary" href="demo/dismiss7Game/demo.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/dismiss7Game/dismiss7Game.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-3/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 4</h3>
<h4>Control flow and some games</h4>
<p>In this lesson we revise functions and control flow and use our skills to build some simple games.</p>
<a class="btn btn-primary" href="demo/lesson-3/index.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-3/lesson-3.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<!-- Project Five -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-5/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 5</h3>
<h4>Porting our games to use the DOM</h4>
<p>In this lesson we will port the Rock, Papers, and Scissors game to use the DOM instead of showing alerts.</p>
<a class="btn btn-primary" href="demo/lesson-5/index.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-5/lesson-5.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Six -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-6/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 6</h3>
<h4>Use timeouts for simple animations</h4>
<p>In this lesson we use window.setTimeout() to animate the computer's thinking.</p>
<a class="btn btn-primary" href="demo/lesson-6/index.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-6/lesson-6.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Seven -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-7/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 7</h3>
<h4>Build interactive maps</h4>
<p>In this lesson we use the Google Map API to build interactive maps</p>
<a class="btn btn-primary" href="demo/lesson-7/index.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-7/lesson-7.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Eight -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-8/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 8</h3>
<h4>Interactive maps with weather</h4>
<p>In this lesson we use the Open Weather API to build an interactive that shows the current weather in different capital cities</p>
<a class="btn btn-primary" href="demo/lesson-8/index.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-8/lesson-8.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Nine -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="demo/lesson-9/screenshot.png" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Lesson 9</h3>
<h4>Interactive maps with photos</h4>
<p>In this lesson we use the Flickr API to build an interactive map that shows the current weather and photos in different capital cities</p>
<a class="btn btn-primary" href="demo/lesson-9/index.html">View Demo <span class="glyphicon glyphicon-chevron-right"></span></a> <a class="btn btn-primary" href="demo/lesson-9/lesson-9.zip">Download Demo <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
<hr>
<?php require_once("footer.php"); ?>