-
Notifications
You must be signed in to change notification settings - Fork 0
/
hackathon2022.html
343 lines (331 loc) · 11.9 KB
/
hackathon2022.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
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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Development Hackathon 2022</title>
<link rel="stylesheet" href="css/hackathon_style.css" />
<link rel="stylesheet" href="css/main_style.css" />
<script src="script.js" defer></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Spartan:wght@400;700&display=swap");
</style>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous"
/>
<link
rel="icon"
href="allimages/favicon.png"
type="image/png"
sizes="16x16"
/>
</head>
<body>
<nav>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<div class="logo_link">
<div class="logo">
<img src="allimages/NYPLIT_website_logo.png" loading="lazy" />
</div>
<div class="allLinks">
<a href="/" class="menu-links">Home</a>
<a href="/#about" class="menu-links">About</a>
<a href="/#events" class="menu-links">Events</a>
<a href="/#socials" class="menu-links">Socials</a>
<a href="https://forms.gle/ajtYmWrzzpt1SumH7" target="_blank"
><button class="CTAbutton">Join Us</button></a
>
</div>
</div>
</nav>
<div id="progress-bar"></div>
<section id="intro">
<div>
<h1>Web Development Hackathon 2022</h1>
<h3>28 February to 6th March</h3>
<p>
An exciting hackathon filled with workshops on HTML, CSS, Javascript,
Advanced Javascript and Introduction to Git and Github held online!
</p>
<p>
<a href="#about">About</a>
<a href="#schedule">Event Schedule</a>
<a href="#prizes">Prizes</a>
<a href="#criteria">Judging</a>
<a href="#submissions">Submissions</a>
</p>
<a
href="https://forms.gle/HuPkWe2hvDQr2pch9"
target="_blank"
class="CTAbutton"
>Register Now</a
>
</div>
</section>
<!-- for the section below do u wna do project dev and code of conduct nxt to each other -->
<section id="about">
<div>
<h1>📚 About</h1>
<h3>Eligibility</h3>
<p>
Participants from all backgrounds, gender and experience levels are
welcome as long as you are a student of Nanyang Polytechnic. There is
no age restriction either. The hackathon is completely free. All you
need to do is register for the event and join our LiT discord
server.<br /><br />
Don't want to join the hackathon but want to join our workshops? Join
via the registration link above! To join the hackathon, be there for
our opening ceremony and submit your project!
</p>
<div class="half">
<div>
<h3>Project Development</h3>
<ul>
<li>Most work should be done during the hackathon.</li>
<li>
You may reuse code from previous projects for specific
components. However, recycling an entire project or the majority
of the project is not allowed.
</li>
<li>
Plagiarism of someone else’s code will result in
disqualification.
</li>
<li>
Frameworks/libraries/open-source code can be used in your
project, but remember to credit your sources appropriately in
your write-up.
</li>
<li>
Any software are allowed as long as the programming language
used is HTML, CSS, and JavaScript.
</li>
</ul>
</div>
<div>
<h3>Participants’ Code Of Conduct</h3>
<ul>
<li>
We do not tolerate harassment of hackathon participants in any
form.
</li>
<li>
LiT is dedicated to providing a harassment-free event for
everyone, regardless of gender, age, sexual orientation,
disability, physical appearance, race, ethnicity, nationality,
religion, or coding experience level (or lack of the
aforementioned).
</li>
<li>
You may not code anything that violates the code of conduct. For
example, racially insensitive content in a website will be
automatically disqualified.
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="schedule">
<div>
<h1>📅 Event Schedule</h1>
<p style="text-align: center">All Events via Google Meet and Discord</p>
<table>
<tbody>
<tr>
<th>Day, Date</th>
<th>Time</th>
<th>Event and Details</th>
</tr>
<tr>
<td>Monday, 28th Feb</td>
<td rowspan="4">2pm</td>
<td>
HTML/CSS and Advanced CSS
<br />
<span class="eventDetails"
>Semantic HTML, Basic CSS styling and Advanced CSS with
animations and media queries.</span
>
</td>
</tr>
<tr>
<td>Tuesday, 1st March</td>
<td>
Basic Javascript
<br />
<span class="eventDetails"
>Conditionals, Functions, Types of arrays, Types of loops,
Objects and more</span
>
</td>
</tr>
<tr>
<td>Wednesday, 2nd March</td>
<td>
Advanced Javascript
<br />
<span class="eventDetails"
>Sets, Map, Type conversion, Arrow syntax, Asnyc await,
Callbacks, Promises and dealing with APIs.</span
>
</td>
</tr>
<tr>
<td>Thursday, 3rd March</td>
<td>
Introduction to Git and Github
<br />
<span class="eventDetails"
>How Git and Github works, branches, push, pull and
initialising a repository.</span
>
</td>
</tr>
<tr>
<td rowspan="2">Friday to Sunday, 4 to 6th March</td>
<td rowspan="2">12pm</td>
<td>
Opening Ceremony
<br />
<span class="eventDetails"
>Details of the event will be sent in Discord.</span
>
</td>
</tr>
<tr>
<td>
Submission closed!
<br />
<span class="eventDetails"
>Details of the event will be sent in Discord.</span
>
</td>
</tr>
<tr>
<td>Sunday, 6th March</td>
<td>6pm</td>
<td>Winners Announced!</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="prizes">
<div>
<h1>🏆 Prizes</h1>
<ul>
<li>
Prizes are awarded to the top 5 participants. The placings are:
first ($30 Grab Food Voucher) place, second place ($20 Grab Food
Voucher), third place ($10 Grab Food Voucher), fourth place and
fifth place ($5 Grab Transport Voucher).
</li>
<li>
The winners will be contacted on Sunday 6 March at 5pm and asked to
submit a 1-minute video showcasing their website. The video need not
show their faces nor include their voices. However, if they wish to
show their face and speak during the video, they are more than
welcomed to. Additionally, in place of speaking the winners could
use captions instead.
</li>
<li>
The winners will be announced on Sunday 6 March at 6pm, along with
the video showcasing the winners’ websites via Discord.
</li>
</ul>
</div>
</section>
<section id="criteria">
<div>
<h1>⚖️ Judging Criteria</h1>
<div class="half">
<div>
<h3>Completion</h3>
<ul>
<li>How finished is the project?</li>
<li>Any broken components in the website?</li>
</ul>
<h3>Design</h3>
<ul>
<li>How well does the website come together?</li>
<li>A good visual design is high quality, appropriate, and relevant for the audience. Your design does not have to be elaborate. Minimalistic designs can also be appropriate and appealing. </li>
<li>The appearance of a site is important in establishing its appeal. Your website’s use of color, space, graphics and layout should bear a consistent theme. </li>
</ul>
</div>
<div>
<h3>Technicality</h3>
<ul>
<li>How complex is the project in terms of advanced Javascript and advanced CSS? </li>
<li>The use of APIs and different functions would help for complexity with Javascript.</li>
<li>The use of animations, media queries, sectors and loaders would help for complexity with CSS.</li>
</ul>
<h3>Creativity</h3>
<ul>
<li>When considering creativity, we will examine whether your website is interesting and distinctive. Does your website design stand out? </li>
<li>Were there additional features added that were not taught in the workshops? </li>
</ul>
</div>
</div>
</div>
</section>
<section id="submissions">
<div>
<h1>📝 Submissions</h1>
<ul>
<li>
Upload your website to GitHub as taught during day 4’s workshop and
submit your website’s link into the form which will be sent in
Discord on Sunday.
</li>
<li>
You will also be required to fill up a short description of your
website in the form.
</li>
<li>
All projects should be submitted before judging commences on Sunday
6 March 2022 at 12pm as the form will close then.
</li>
</ul>
</div>
</section>
<footer>
<div class="footer" id="socials">
<div class="columnHalf">
<h1>NYP LIT, Ladies In Tech</h1>
<div class="socialicons">
<a href="https://www.instagram.com/nyp_lit/" target="_blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://discord.gg/zXDquEHg8V" target="_blank"
><i class="fab fa-discord"></i
></a>
<a href="https://github.com/nyp-lit/" target="_blank"
><i class="fab fa-github"></i
></a>
<a href="https://www.linkedin.com/company/nyp-lit" target="_blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
<div class="columnHalf">
<p>
For more information, feel free to check out our socials or contact
us at <a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</div>
<p class="copyright">
Copyright © 2022, NYP LIT. All Rights Reserved.<br />
Made by
<a href="https://github.com/jolenechong" target="_blank">Jolene</a>
</p>
</footer>
</body>
</html>