-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (155 loc) · 6.04 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
<!doctype html>
<html>
<head>
<title>materials - codegirls</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>
.topic {
max-width: 50%;
}
.topic li { padding: 0.5em; }
.topic h3 { margin-top: 0.5em; margin-bottom: 0.1em; }
.topic p { margin: 0.1em 0; }
.topic a { color: black; }
.topic .unfinished, .topic .unfinished a { color: #aaa; }
.topic li.unfinished:hover { background-color: white; }
.topic li:hover {
background-color: #efefef;
border-radius: 0.25em;
transition: background-color 0.3s;
}
@media (max-width: 568px) {
.topic { max-width: 100%; }
}
</style>
</head>
<body>
<h1>Materials</h1>
<!--current materials (week or recent?)
by topic (html, javascript, other)
kind of unbalanced, most are about js, possibly beginner/advanced?
series of topics
not by date (not in the url/title, add as metadata)-->
<p>This is a collection of materials we're using for
<a href="http://codegirls.de">our</a> meetings. Feel free to look around
and try some of these tutorials.</p>
<p>If you're curious what we do all this time, there's
<a href="overview.html">a nice overview</a> that will hopefully
satisfy that curiosity.</p>
<p>If you always wanted to do <em>X</em> and don't see it here,
<a href="mailto:[email protected]">tell us</a>!</p>
<div class="grid">
<section class="topic pull-left">
<h2>JavaScript</h2>
<ol>
<li>
<h3><a href="section/hello-javascript.html">Hello, JavaScript</a></h3>
<p>Introducing literals, variables, loops and some serious
counting action.</p>
</li>
<li>
<h3><a href="section/time-machine.html">Time Machine</a></h3>
<p>Learning more about loops, objects and functions and how
programmers love stretching analogies.</p>
</li>
<li>
<h3><a href="section/pixl-0.html">pixl</a></h3>
<p>Collaborative, contemporary art in your browser, powered
by your newfound ability to draw squares and other mysteries.</p>
</li>
<li>
<h3><a href="section/coding-adventures.html">Coding Adventures</a></h3>
<p>Writing a text adventure game using our newly acquired skills.
Involves magic, cat pictures and a grumpy mathematician.</p>
</li>
</ol>
</section>
<section class="topic pull-right">
<h2>HTML & CSS</h2>
<ol>
<li>
<h3><a href="section/tiniest-blog-1.html">The tiniest blog</a></h3>
<p>A whirlwind introduction to HTML & basic CSS and how to
get cat pictures to appear on your website.</p>
</li>
<li class="unfinished">
<h3>Makin' it shine</h3>
<p>An introduction to CSS.</p>
</li>
<li class="unfinished">
<h3>Blinkenlights</h3>
<p>Reliving the 90s and learning about CSS3.</p>
</li>
<li class="unfinished">
<h3>The Web is Yours</h3>
<p>You can look behind the scenes of any website and change
it. (And how Justin Bieber just <em>loves</em> giraffes.)</p>
</li>
</ol>
</section>
</div>
<div class="grid">
<section class="topic pull-left">
<h2>Misc.</h2>
<ol>
<li class="unfinished">
<h3><a href="section/musical-adventures.html">Musical Adventures</a></h3>
<p>Making music with <a href="http://overtone.github.io/">Overtone</a>.</p>
</li>
<li class="unfinished">
<h3>Singing with Sines</h3>
<p>Playing with <a href="http://supercollider.sf.net/">SuperCollider</a>
to make music with computers</p>
</li>
</ol>
</section>
<section class="topic pull-right">
<h2>Tools</h2>
<ol>
<li class="unfinished">
<h3>Developer Tools</h3>
<p>The essential tools of the web developer: the <em>Console</em>
and the <em>Inspector</em>. (May or may not involve actual detectives.)</p>
</li>
<li class="unfinished">
<h3>Documentation</h3>
<p>It's not <em>all</em> magic, or how developers can't survive without
search engines for very long. (Know where to look and how yo make sense
of all that fancy gibberish.)</p>
</li>
</ol>
</section>
</div>
<div class="grid">
<section class="topic pull-left">
<h2>Background</h2>
<ol>
<li class="unfinished">
<h3>Glossary</h3>
<p>A handy reference to keep you from despairing in a sea of acronyms,
always changing terms and lots of fancy words.</p>
</li>
<li class="unfinished">
<h3>How the Web works</h3>
<p>It's mostly <del>cat pictures</del> links, actually.</p>
</li>
</ol>
</section>
</div>
<p>If you've tried some of the stuff here, please
<a href="feedback.html">tell us what you think</a>, so we can improve these
materials for the future.</p>
<p>Especially if some things have been weird, incomplete, confusing or otherwise
less than ideal we'd like to know that.</p>
<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>