Spark

Spark is the Open Source Software Club's welcome program for first-year students. No experience needed. Over seven on-campus sessions they go from their first HTML tag to JavaScript and Git, then compete in three events.

The site had to do two jobs: explain the program, and be the benchmark, the thing students look at and think “I want to build that.”

• 01
  The audience has never written code

  Every section had to read as an invitation, not a syllabus. Copy stays short and the hero leads with a feeling: “it's not you, it's the spark within you.”

• 02
  The site is the lesson

  Students inspect it. So the build uses the same HTML and CSS they learn in class, with a small script for smooth scrolling. Nothing they can't eventually read.

• 03
  Events need to be compared at a glance

  Replica, Graphica and FSOC each get the same card, with difficulty, code and creativity meters, so students can pick one in seconds.

• 04
  Most students open it on a phone

  The mobile layout was designed as its own set of frames, not as a squeezed desktop.

1. Hero: grainy monochrome, the Spark wordmark and the OSS Club signature in the one red.
2. Intro: “Learning pixel by pixel” in full orange, with the tool stack as stacked stickers.
3. Timeline: seven sessions from .html 101 to .JS 102, each with notes.
4. Events: Replica, Graphica, FSOC on a shared card system with meters and prize pools.
5. FAQ and contact, with a QR code for the club group.

High-resolution crops from the Spark Figma file.

The OSS Club has run Spark for 10+ years, and this edition reached 400+ first-years. The benchmark site is what we end the course on: everything on it is something they have now been taught.