-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoverview.html
More file actions
152 lines (113 loc) · 5.65 KB
/
overview.html
File metadata and controls
152 lines (113 loc) · 5.65 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
<!doctype html>
<html>
<head>
<title>What happened so far</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Merriweather:400,400italic,700" />
<link rel="stylesheet" href="http://cobyism.com/gridism/gridism.css" />
<link rel="stylesheet" href="style/base.css" />
<style>
img { max-width: 800px; }
img.full { width: 800px; height: 100px; }
img.left { margin-right: 1em; }
img.right { margin-left: 1em; }
.left { float: left; }
.right { float: right; }
section:after { display: table; content: ""; line-height: 0; clear: both; }
@media (max-width: 800px) {
img.full { max-width: 100%; }
}
</style>
</head>
<body>
<h1>What happened so far?</h1>
<!--Hacker Blog - Creating our own blogs from scratch. -->
<section class="project">
<h2>Coding Adventures</h2>
<p>Our most recent adventure has been into the realm of text
adventure games.</p>
<a href="https://github.com/codegirls/materials/blob/master/2014-05-20-coding-adventures.md">
<img class="left" src="img/project-adventure.png" />
</a>
<p>After learning the basics of JavaScript, writing games surely
must be the next step. So we just did that.</p>
<p>Using three simple functions to tell players what happens to
them, giving them choices and asking them questions we can
already write small games, albeit without fancy graphics.
(But you never know what's going to happen. :))</p>
<p>After a few hours, our adventures already have some characters
in them, ask questions and check if you're good at math. (Or if
you also like giraffes.)</p>
<p>If you'd like to write your own adventure, <a href="https://github.com/codegirls/materials/blob/master/2014-05-20-coding-adventures.md">
you can try</a> as well.</p>
</section>
<section class="project">
<h2>JavaScript in small steps</h2>
<p>Also know as: <em>Making Time Machines</em>.</p>
<a href="https://github.com/codegirls/materials/blob/master/2014-03-25-javascript-steps.md#javascript-in-small-steps">
<img class="right" src="img/project-timemachine.png" title="Not yet a time machine..." />
</a>
<p>To understand how variables, loops and functions work in
JavaScript we wrote a series of small scripts that explain
those concepts.</p>
<p>For example, at first we simply counted up, then down,
then we counted ages, not numbers, then we wrote the
<code>happyBirthday</code> function and then we almost
had our time machine.</p>
<p>You can <a href="https://github.com/codegirls/materials/blob/master/2014-03-25-javascript-steps.md#javascript-in-small-steps">
try it for yourself</a>.</p>
</section>
<section class="project">
<h2>pixl - Collaborative, programmatic drawings</h2>
<a href="http://pixl.papill0n.org">
<img class="left" style="margin-bottom: 1em;" src="img/project-pixl.png" title="So many pixls" />
</a>
<p>Originally thought as a fun christmas surprise, we had a
lot of fun with <a href="http://pixl.papill0n.org">pixl</a>.</p>
<p>In it we would use one simple function, <code>draw_pixl</code>,
to draw squares on the screen.</p>
<p>So, after playing around with it just before christmas, we went
and drew all kinds of things: lots of lines, squares, diamonds,
hearts and even some messages.</p>
<p>And as a nice addition all of this is <em>collaborative</em>.
That is, everything you draw is seen by everyone else.</p>
<p>As always, the code and instructions are <a href="https://github.com/codegirls/materials/blob/master/2014-01-28-hello-javascript.md">
online</a> and you're invited to try it out yourself.</p>
<a href="http://pixl.papill0n.org/3"><img class="full" src="img/project-trixl.png" /></a>
<p>(There's also a <a href="http://pixl.papill0n.org/3">3d version</a>
of it, but we didn't play with it much, yet.)</p>
</section>
<section class="project">
<h2>Having fun with the <code><canvas></code></h2>
<a href="examples/canvas_fun.html">
<img class="full" src="img/project-canvas.png" />
</a>
<p>Playing around with the HTML Canvas element as a first
introduction to JavaScript and combined with the ability
to draw stuff</p>
<p>There is a <a href="examples/canvas_fun.html">live version</a>
of it or you can <a href="https://github.com/codegirls/materials/blob/master/2013-09-24-canvas-fun.md">play around with it</a>
yourself.</p>
</section>
<section class="project">
<h2>And more...</h2>
<p>We're meeting every two weeks on tuesday, 19:00 at the <a href="http://sublab.org">sublab</a>.
Come join us. :)</p>
</section>
<h1>Future projects</h1>
<p>We've got lots of things planned, some of them include:</p>
<ul>
<li>Making chat bots</li>
<li>HTML & CSS, going beyond simple web pages and creating
web pages that look good</li>
<li>Making noises (and/or music, depending on how good we get)</li>
</ul>
<footer id="footer">
<p>© 2014 <a href="http://codegirls.de">CodeGirls</a>
<a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode.txt">(CC-BY-SA)</a></p>
<p>This site is <a href="https://github.com/codegirls/materials">open-source</a>,
fixes and <a href="https://github.com/codegirls/materials/issues">suggestions</a>
are very welcome!</p>
</footer>
</body>
</html>