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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Dev Series</title>
    <link rel="stylesheet" href="styles.css"/>
    <link rel="icon" href="favicon.svg" type="image/svg">
</head>
<body>
    <div class="header">
        <h1>Hack Club: Web Dev Series</h1>
        <p class="header-desc">Learn web development through fun, hands-on projects and earn delicious rewards along the way!</p>
    </div>

    <a class="banner" href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 128px; z-index: 1000;" src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club"/></a>

    <div class="container-wrapper">
        <div class="box" style="--box-bg: #C76B0F; --box-title: #F6D193; --box-desc: #F6D193;">
            <img class="box-img" src="./imgs/boba.png" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Start here: Boba Drops</div>
                <div class="box-desc"><strong>Build a website using HTML and CSS, get free boba!</strong></div>
                <div class="box-desc">Estimated time: 30-60 minutes</div>
                <div class="price-tag">$5</div>
            </div>
            <a href="https://boba.hackclub.com"><button class="box-btn">check it out!</button></a>
            <a href="https://forms.hackclub.com/t/5r7VGppu9wus"><button class="box-btn">run a workshop!</button></a>
        </div>
        <div class="arrow">↓</div>
        <div class="flow-indicator">to continue, do...</div>
        <div class="box" style="--box-bg: #fde09d; --box-title: #b875ff; --box-desc: #5d5031;">
            <img class="box-img" src="./imgs/swirl.svg" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Continue here: Swirl</div>
                <div class="box-desc"><strong>Build an even cooler website with HTML and CSS, with a unique feature like a favicon, and get free ice cream!</strong></div>
                <div class="box-desc">Estimated time: 1-2 hours</div>
                <div class="price-tag">$5-9</div>
            </div>
            <a href="https://swirl.hackclub.com"><button class="box-btn">check it out!</button></a>
            <a href="https://forms.hackclub.com/swirl-workshop"><button class="box-btn">run a workshop!</button></a>
        </div>
        <div class="arrow">↓</div>
        <div class="flow-indicator">or, you can do...</div>
        <div class="box" style="--box-bg: #ffcc00; --box-title: #000; --box-desc: #000;">
            <img class="box-img" src="./imgs/toppings.png" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Toppings</div>
                <div class="box-desc"><strong>Add some extra flavor to your website, with CSS and get toppings for your ice cream or boba!</strong></div>
                <div class="box-desc">Estimated time: 30-60 minutes</div>
                <div class="price-tag">$5</div>
            </div>
            <a href="https://toppings.hackclub.com"><button class="box-btn">check it out!</button></a>
            <a href="https://forms.hackclub.com/toppings-workshop"><button class="box-btn">run a workshop!</button></a>
        </div>
        <div class="arrow">↓</div>
        <div class="flow-indicator">if you want to focus on HTML & start learning JS, do...</div>
        <div class="box" style="--box-bg: #ffffff; --box-title: #000000; --box-desc: #000000;">
            <img class="box-img" src="./imgs/flavorless.png" style="height: auto;" alt="Flavorless logo" />
            <div class="box-content">
                <div class="box-title">Flavorless</div>
                <div class="box-desc"><strong>Build a website using only HTML and JavaScript! No <s>CSS</s> allowed!</strong></div>
                <div class="box-desc">Estimated time: 1 hour</div>
                <div><strong>get a sticker sheet</strong></div>
            </div>
            <a href="https://flavorless.hackclub.com/?utm_source=webdev"><button class="box-btn-flavorless">check it out!</button></a>
            <a href="https://forms.hackclub.com/flavorless-workshop"><button class="box-btn-flavorless">run a workshop!</button></a>
        </div>
        <div class="arrow">↓</div>
        <div class="flow-indicator">if you wanna learn JavaScript and strengthen your other skills, do...</div>
        <div class="box" style="--box-bg: #f8b84f; --box-title: #715547; --box-desc: #000;">
            <img class="box-img" src="./imgs/waffles.jpg" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Waffles</div>
                <div class="box-desc"><strong>Make a website that uses JavaScript, and get free waffles!</strong></div>
                <div class="box-desc">Estimated time: 2 hours</div>
                <div class="price-tag">$10</div>
            </div>
            <a href="https://waffles.hackclub.com"><button class="box-btn">check it out!</button></a>
            <a href="https://forms.hackclub.com/waffles-workshop"><button class="box-btn">run a workshop!</button></a>
        </div>
        <div class="arrow">↓</div>
        <div class="flow-indicator">and if you want to discover CSS frameworks, try doing...</div>
        <div class="box" style="--box-bg: #c10007; --box-title: #ffdf20; --box-desc: white;">
            <img class="box-img" src="./imgs/grub.png" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Grub</div>
                <div class="box-desc"><strong>Build a website using the Tailwind CSS framework, and get free junk food!</strong></div>
                <div class="box-desc">Estimated time: 1-2 hours</div>
                <div class="price-tag">$6-10</div>
            </div>
            <a href="https://grub.hackclub.com"><button class="box-btn">check it out!</button></a>
            <a href="https://forms.hackclub.com/grubworkshop"><button class="box-btn">run a workshop!</button></a>
        </div>
         <div class="arrow">↓</div>
        <div class="flow-indicator">if you wanna learn a modern web development framework, do...</div>
        <div class="box" style="--box-bg: #112a4f; --box-title: #61DBFB; --box-desc: #ffffff;">
            <img class="box-img" src="./imgs/reactive.png" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Reactive</div>
                <div class="box-desc"><strong>Make a website using the React framework, and get a free domain to host it!</strong></div>
                <div class="box-desc">Estimated time: 3 hours</div>
                <div class="price-tag">$15</div>
            </div>
            <a href="https://reactive.hackclub.dev"><button class="box-btn">check it out!</button></a>
            <a href="https://forms.hackclub.com/reactive-workshop"><button class="box-btn">run a workshop!</button></a>
        </div>
        <div class="fulfillment-section">
            <div class="ended-note">
                <h2>Old Events!</h2>
                <p><strong>Zoo, Boba Olympics and Polygon</strong> are currently not running. Stay tuned for updates about Zoo, Boba Olympics and Polygon V2.</p>
            </div>
        </div>
         <div class="arrow">↓</div>
        <div class="flow-indicator">why not take a trip to the zoo and learn SvelteKit, do...</div>
        <div class="box ended-box" style="--box-bg: #103D10; --box-title: #408000; --box-desc: white;">
            <img class="box-img ended" src="./imgs/zoo.png" alt="Zoo Logo">
            <div class="box-content">
                <div class="box-title">Zoo</div>
                <div class="box-desc"><strong>Make an animal themed SvelteKit site, get plushies and stickers!</strong></div>
                <div class="box-desc">Estimated time: 1-2 hours</div>
                <div class="price-tag">$10+</div>
            </div>
            <a href="https://zoo.hackclub.com/"><button class="box-btn" disabled>check it out!</button></a>
        </div>
         <div class="arrow">↓</div>
        <div class="flow-indicator">if you want to go 3D, do...</div>
        <div class="box ended-box" style="--box-bg: #c70014; --box-title: #ffffff; --box-desc: #ffffff;">
            <img class="box-img ended" style="height: auto;" src="./imgs/polygon.png" alt="Box Image" />
            <div class="box-content">
                <div class="box-title">Polygon</div>
                <div class="box-desc"><strong>Build a 3d website using three.js and get a grant to go watch your favourite movies!</strong></div>
                <div class="box-desc">Estimated time: 1-4 hours</div>
                <div class="price-tag">$10-20</div>
            </div>
            <a href="https://polygon.hackclub.com/"><button class="box-btn box-btn-white" disabled>check it out!</button></a>
            <a href="https://forms.hackclub.com/t/nGoLApvXMDus"><button class="box-btn box-btn-white" disabled>run a workshop!</button></a>
        </div>
        <div class="arrow">↓</div>
        <div class="flow-indicator">if you wanna work as a team, do...</div>
        <div class="box ended-box" style="--box-bg: #f9e0bc; --box-title: #c2680e; --box-desc: #714312;">
            <img class="box-img ended" src="./imgs/boba-olympics.svg" alt="Boba Olympics logo" />
            <div class="box-content">
                <div class="box-title">Boba Olympics</div>
                <div class="box-desc"><strong>Work as a team to build hand-made sites, win prizes!</strong></div>
                <div class="box-desc">Estimated time: 2+ hours</div>
                <div class="price-tag">$5-25</div>
            </div>
            <a href="https://olympics.hackclub.com/"><button class="box-btn" disabled>check it out!</button></a>
        </div>
    </div>
    <div class="fulfillment-section">
        <h2>How do I receive my grant?</h2>
        <div class="payment-methods">
            <div class="payment-option">
                <div class="payment-icon">🏦</div>
                <div class="payment-content">
                    <h4>HCB Organization</h4>
                    <p>We transfer the money to your club's HCB organization.</p>
                </div>
            </div>
            <div class="payment-option">
                <div class="payment-icon">💳</div>
                <div class="payment-content">
                    <h4>Virtual card</h4>
                    <p>We issue you a virtual card grant that you can use to do purchases online or in-person with Apple or Google Pay.</p>
                </div>
            </div>
            <div class="payment-option">
                <div class="payment-icon">📋</div>
                <div class="payment-content">
                    <h4>Reimbursement</h4>
                    <p>Submit the receipts for purchases you've already made, and we'll reimburse you for the amount.</p>
                </div>
            </div>
            <h3>Running a workshop?</h3>
            <p>Want to run a workshop and get the We Ships that same day? Hack yeah! Just send a message in #leaders and we will help you!</p>
            <h3>Club Levels</h3>
            <p>All of these Workshops can help your club level up, see <a href="https://leaders.hackclub.com/my-club">the club leaders portal</a> for more information.</p>
        </div>
    </div>
    <footer class="footer">
        <p>Made with a whole bunch of Boba, Creemees with sprinkles, Hamburgers, Waffles, Popcorn and <i>a little more boba</i> by <a href="https://hackclub.com">Hack Club</a></p>
    </footer>
</body>
</html>