!Light

A traditional MLH Mini Event

PreviousSlideshow Karaoke NextMS Paint Bob Ross

Last updated 2 months ago

Was this helpful?

!Light

A traditional MLH Mini Event

This is a frontend coding competition we borrowed without asking and renamed it '!Light', exactly the same as Code in the Dark.

Each round lasts 10 minutes, and is between 5 to 10 participants
All participants in each round are given the same screenshot of a website (e.g: Pinterest.com) and must recreate it to the best of their ability in HTML & CSS
No code completion tools, no syntax highlighting, no compiling your code before 10 minutes
Direct participants go to
The winner will be chosen by audience applause (so bring your friends!)
Add .zip to the link above to review submissions

How do you Run !Light?

Share the editor. Instruct participants to navigate to the !LIGHT editor on their computers. For this, you'll have them go to: . Bring your computer to this same URL to demonstrate.
Explain the rules. Explain to attendees that, "You will remain in the text editor for the whole activity- you should not leave the page for anything. The text editor provided doesn't have syntax highlighting, code completion, or code preview. Your goal is to create a copy of the website I pull up on my screen in ten minutes."
Display the website. Load the website the attendees will be copying. The best websites are ones with few images. We recommend the following, but often instructor and department websites work well:
Start coding. Tell the attendees to begin and start your ten minute timer. You may want to play music during this time to keep the excitement level up. You should walk around the room and ensure everyone is staying in the code editor. Periodically announce how much time is remaining.
End coding. Once your timer finishes, tell everyone to stop coding. The participants should then mouseover and click "!LIGHT" at the top left side of their screen. They'll be presented with a dialog box asking if they're sure they want to submit. Have them select "Yes."
Download and display submissions. You can now download the submissions by navigating to . Unzip and open the folder on your machine. One-by-one, open the submissions.
Vote. Have attendees vote on their favorite submission- this is usually best achieved through voting by applause. You should break any ties.

You’re welcome to re-run the game with different websites as many times as your attendees want.

PreviousSlideshow Karaoke NextMS Paint Bob Ross

Last updated 2 months ago

Was this helpful?

This is a frontend coding competition we borrowed without asking and renamed it '!Light', exactly the same as Code in the Dark.

Each round lasts 10 minutes, and is between 5 to 10 participants
All participants in each round are given the same screenshot of a website (e.g: Pinterest.com) and must recreate it to the best of their ability in HTML & CSS
No code completion tools, no syntax highlighting, no compiling your code before 10 minutes
Direct participants go to
The winner will be chosen by audience applause (so bring your friends!)
Add .zip to the link above to review submissions

How do you Run !Light?

Share the editor. Instruct participants to navigate to the !LIGHT editor on their computers. For this, you'll have them go to: . Bring your computer to this same URL to demonstrate.
Explain the rules. Explain to attendees that, "You will remain in the text editor for the whole activity- you should not leave the page for anything. The text editor provided doesn't have syntax highlighting, code completion, or code preview. Your goal is to create a copy of the website I pull up on my screen in ten minutes."
Display the website. Load the website the attendees will be copying. The best websites are ones with few images. We recommend the following, but often instructor and department websites work well:
Start coding. Tell the attendees to begin and start your ten minute timer. You may want to play music during this time to keep the excitement level up. You should walk around the room and ensure everyone is staying in the code editor. Periodically announce how much time is remaining.
End coding. Once your timer finishes, tell everyone to stop coding. The participants should then mouseover and click "!LIGHT" at the top left side of their screen. They'll be presented with a dialog box asking if they're sure they want to submit. Have them select "Yes."
Download and display submissions. You can now download the submissions by navigating to . Unzip and open the folder on your machine. One-by-one, open the submissions.
Vote. Have attendees vote on their favorite submission- this is usually best achieved through voting by applause. You should break any ties.

You’re welcome to re-run the game with different websites as many times as your attendees want.