<aside>
⚠️ This is a draft and is subject to significant changes.
</aside>
Rules
- Replicate the given screenshot using Tailwind CSS as closely as possible.
- Use the provided browser-based editor to submit code.
- You can find documentation from various sources, but do not communicate with other people.
- ✅ Search docs
- ✅ Ask staff for clarification
- ❌ Ask a friend for help
- ❌ Copy code from other participants
- Do not use external resources (e.g. images, icons, including data URLs) except the resource URLs provided by the organizer.
- No JavaScript or SVG.
- Custom CSS is OK, as well as Tailwind CSS’s bracket notation.
- ✅
style="background: #123456"
- ✅
<style>div.thing { background: #123456 }</style>
- ✅
class="bg-[#123456]"
- ✅
class="[background:#123456]"
- ✅
<style>div.thing { @apply bg-[#123456]; }</style>
- The viewport size is 540x720 pixels. No responsivity or animation is needed unless otherwise noted.
Scoring
| Criteria |
Points |
| Objective #1 |
15 |
| Objective #2 |
15 |
| Objective #3 |
15 |
| Objective #4 |
15 |
| Objective #5 |
15 |
| Viewer’s votes |
25 |
| Total |
100 |
- Objectives are tasks that — if completed correctly — will earn you 15 points. There are 5 objectives, for a total of 75 points.
- You either get full 15 points or 0 points.
- Whether the objective is met is determined by the staff’s evaluation.
- Viewer’s vote
- During voting time, people who are not contestants can vote on 2 different entries.
- To vote for participants 3 and 5, one would issue a command:
/vote 3 5
- After the voting is finished, the score is calculated.
- 1st place: +25
- 2nd place: +16
- 3rd place: +9
- 4th place: +4
- 5th place: +3
- 6th place: +2
- 7th place: +1
- Previous discussion
Disqualification
- Staffs may disqualify entries if there the system is abused (subject to staff’s discretion), such as:
- Using external images other than the ones provided in the challenge objectives.
- Putting the reference screenshot into an
img tag and call it a day.
- Putting JavaScript code in your entry.
Mechanics
- **Event duration:** Medium (2~3 hours)
- Pre-registration
- Contestant limit — Due to limited grading capacity, there will be a limited number of contestant spots. People who wish to enter the contest must register themselves first.
- Observers can participate — Even if you are did not enter as a contestant, you can still participate in the event in 2 ways.
- Work on the challenge on your own — When the challenge is revealed, you will be able to work on the challenge just like normal contestants. However your results are not evaluated and ranked.
- Vote — After each round, observers can help by casting votes.
- Shuffle
- Registered contestants are shuffled into a queue of contestants.