webdev/index.html at main · hackclub/webdev · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hack Club: Web Dev Series</title>
  <link rel="stylesheet" href="styles.css" />
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
</head>
<body>
  <a class="brand-banner" href="https://hackclub.com/" target="_blank" rel="noreferrer">
    <img src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club" />
  </a>

  <main class="page-shell">
    <header class="hero">
      <p class="eyebrow">Hack Club workshops</p>
      <h1>Web Dev Series</h1>
      <p class="hero-copy">Learn web development through hands-on projects, level up your skills, and get rewarded for making something real instead of another half-finished tutorial graveyard.</p>
    </header>

    <section class="timeline" aria-label="Web development workshop roadmap">
      <article class="card card-start" style="--card-bg: #C76B0F; --card-accent: #F6D193; --card-text: #FFF6E2;">
        <img class="card-media" src="./imgs/boba.png" alt="Boba Drops illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">Start here</p>
            <h2 class="card-title">Boba Drops</h2>
            <p class="card-copy"><strong>Build a website using HTML and CSS, get free boba!</strong></p>
            <p class="card-meta">Estimated time: 30-60 minutes</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$5</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://boba.hackclub.com" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/t/5r7VGppu9wus" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>to continue, do this</p></div>

      <article class="card" style="--card-bg: #fde09d; --card-accent: #b875ff; --card-text: #5d5031;">
        <img class="card-media" src="./imgs/swirl.svg" alt="Swirl illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">Continue here</p>
            <h2 class="card-title">Swirl</h2>
            <p class="card-copy"><strong>Build an even cooler website with HTML and CSS, add a unique feature like a favicon, and get free ice cream!</strong></p>
            <p class="card-meta">Estimated time: 1-2 hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$5-9</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://swirl.hackclub.com" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/swirl-workshop" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>or choose a different path</p></div>

      <article class="card" style="--card-bg: #ffcc00; --card-accent: #111; --card-text: #1a1a1a;">
        <img class="card-media" src="./imgs/toppings.png" alt="Toppings illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">Alternate track</p>
            <h2 class="card-title">Toppings</h2>
            <p class="card-copy"><strong>Add some extra flavor to your website with CSS and get toppings for your ice cream or boba!</strong></p>
            <p class="card-meta">Estimated time: 30-60 minutes</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$5</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://toppings.hackclub.com" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/toppings-workshop" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>if you want HTML plus JavaScript</p></div>

      <article class="card" style="--card-bg: #ffffff; --card-accent: #111; --card-text: #111;">
        <img class="card-media card-media-contain" src="./imgs/flavorless.png" alt="Flavorless logo" />
        <div class="card-body">
          <div>
            <p class="card-label">JavaScript starter</p>
            <h2 class="card-title">Flavorless</h2>
            <p class="card-copy"><strong>Build a website using only HTML and JavaScript. No <s>CSS</s> allowed.</strong></p>
            <p class="card-meta">Estimated time: 1 hour</p>
          </div>
          <div class="card-badges">
            <span class="sticker-note">Get a sticker sheet</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://flavorless.hackclub.com/?utm_source=webdev" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/flavorless-workshop" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>if you want more JavaScript</p></div>

      <article class="card" style="--card-bg: #f8b84f; --card-accent: #715547; --card-text: #1a1a1a;">
        <img class="card-media" src="./imgs/waffles.jpg" alt="Waffles illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">JavaScript practice</p>
            <h2 class="card-title">Waffles</h2>
            <p class="card-copy"><strong>Make a website that uses JavaScript, and get free waffles!</strong></p>
            <p class="card-meta">Estimated time: 2 hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$10</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://waffles.hackclub.com" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/waffles-workshop" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>if you want a CSS framework</p></div>

      <article class="card" style="--card-bg: #c10007; --card-accent: #ffdf20; --card-text: #fff;">
        <img class="card-media" src="./imgs/grub.png" alt="Grub illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">Framework track</p>
            <h2 class="card-title">Grub</h2>
            <p class="card-copy"><strong>Build a website using the Tailwind CSS framework, and get free junk food!</strong></p>
            <p class="card-meta">Estimated time: 1-2 hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$6-10</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://grub.hackclub.com" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/grubworkshop" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>if you want a modern framework</p></div>

      <article class="card" style="--card-bg: #112a4f; --card-accent: #61DBFB; --card-text: #fff;">
        <img class="card-media" src="./imgs/reactive.png" alt="Reactive illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">React</p>
            <h2 class="card-title">Reactive</h2>
            <p class="card-copy"><strong>Make a website using the React framework, and get a free domain to host it!</strong></p>
            <p class="card-meta">Estimated time: 3 hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$15</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://reactive.hackclub.dev" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/reactive-workshop" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>if you want backend</p></div>

      <article class="card" style="--card-bg: #4E9CDB; --card-accent: #fff; --card-text: #fff;">
        <img class="card-media" src="./imgs/slushies.png" alt="Slushies illustration" />
        <div class="card-body">
          <div>
            <p class="card-label">Backend track</p>
            <h2 class="card-title">Slushies</h2>
            <p class="card-copy"><strong>Make a web app using the Flask backend framework, and get a slushie or any food item!</strong></p>
            <p class="card-meta">Estimated time: 1-3 hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$5-10</span>
          </div>
        </div>
        <div class="card-actions">
          <a class="button button-primary" href="https://slushies.hackclub.com" target="_blank" rel="noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/t/7NNfphNi8sus" target="_blank" rel="noreferrer">Run a workshop</a>
        </div>
      </article>
      <div class="connector"><span>↓</span><p>3D track</p></div>

      <article class="card" style="--card-bg: #c70014; --card-accent: #fff; --card-text: #fff;">
        <img class="card-media card-media-contain" src="./imgs/polygon.png" alt="Polygon illustration" />

        <div class="card-body">
          <div>
            <p class="card-label">3D track</p>
            <h2 class="card-title">Polygon</h2>
            <p class="card-copy"><strong>Build a 3D website using three.js and get a grant to go watch your favourite movies!</strong></p>
            <p class="card-meta">Estimated time: 1-4 hours</p>
          </div>

          <div class="card-badges">
            <span class="reward-tag">$10-20</span>
          </div>
        </div>

        <div class="card-actions">
          <a class="button button-primary" href="https://polygon.hackclub.com" target="_blank" rel="noopener noreferrer">Check it out</a>
          <a class="button button-secondary" href="https://forms.hackclub.com/t/nGoLApvXMDus" target="_blank" rel="noopener noreferrer">Run a workshop</a>
        </div>
      </article>

      <div class="notice">
        <h3>Old events</h3>
        <p><strong>Zoo, Boba Olympics</strong> are currently not running. Stay tuned for updates about Zoo, Boba Olympics.</p>
      </div>

      <div class="connector"><span>↓</span><p>these are paused for now</p></div>

      <article class="card card-muted" style="--card-bg: #103D10; --card-accent: #408000; --card-text: #fff;">
        <img class="card-media card-media-muted" src="./imgs/zoo.png" alt="Zoo logo" />
        <div class="card-body">
          <div>
            <p class="card-label">Paused</p>
            <h2 class="card-title">Zoo</h2>
            <p class="card-copy"><strong>Make an animal-themed SvelteKit site, get plushies and stickers!</strong></p>
            <p class="card-meta">Estimated time: 1-2 hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$10+</span>
          </div>
        </div>
        <div class="card-actions">
          <span class="button button-disabled" aria-disabled="true">Check it out</span>
        </div>
      </article>

      <div class="connector"><span>↓</span><p>team mode</p></div>

      <article class="card card-muted" style="--card-bg: #f9e0bc; --card-accent: #c2680e; --card-text: #714312;">
        <img class="card-media card-media-muted" src="./imgs/boba-olympics.svg" alt="Boba Olympics logo" />
        <div class="card-body">
          <div>
            <p class="card-label">Paused</p>
            <h2 class="card-title">Boba Olympics</h2>
            <p class="card-copy"><strong>Work as a team to build hand-made sites, win prizes!</strong></p>
            <p class="card-meta">Estimated time: 2+ hours</p>
          </div>
          <div class="card-badges">
            <span class="reward-tag">$5-25</span>
          </div>
        </div>
        <div class="card-actions">
          <span class="button button-disabled" aria-disabled="true">Check it out</span>
        </div>
      </article>
    </section>

    <section class="fulfillment" aria-labelledby="fulfillment-title">
      <h2 id="fulfillment-title">How do I receive my grant?</h2>
      <div class="fulfillment-grid">
        <article class="fulfillment-item">
          <div class="fulfillment-icon">🏦</div>
          <div>
            <h3>HCB Organization</h3>
            <p>We transfer the money to your club's HCB organization.</p>
          </div>
        </article>
        <article class="fulfillment-item">
          <div class="fulfillment-icon">💳</div>
          <div>
            <h3>Virtual card</h3>
            <p>We issue a virtual card grant you can use online or in person with Apple Pay or Google Pay.</p>
          </div>
        </article>
        <article class="fulfillment-item">
          <div class="fulfillment-icon">📋</div>
          <div>
            <h3>Reimbursement</h3>
            <p>Submit receipts for purchases you've already made, and we'll reimburse you.</p>
          </div>
        </article>
      </div>

      <div class="fulfillment-note">
        <h3>Running a workshop?</h3>
        <p>Send a message in #leaders and we will help you get the We Ships that same day.</p>
      </div>

      <div class="fulfillment-note">
        <h3>Club levels</h3>
        <p>All of these workshops can help your club level up. See the <a href="https://leaders.hackclub.com/my-club" target="_blank" rel="noreferrer">club leaders portal</a> for more information.</p>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>Made with a ridiculous amount of Boba, Creemees with sprinkles, Hamburgers, Waffles, Popcorn, and a little more boba by <a href="https://hackclub.com" target="_blank" rel="noreferrer">Hack Club</a>.</p>
  </footer>
</body>
</html>