The first day of coding class — 5 activities that hook every student

The first day sets the tone for the entire semester. If students leave thinking "that was cool," they'll come back eager to learn. These five activities are designed for codeguppy.com, and each one produces a visible, satisfying result within minutes. No prior experience required — students open a browser and start coding.

Activity 1: One line of code, instant color

Before explaining anything about programming, tell students to type exactly this:

background("gold");

Press play. The entire canvas turns gold. Now say: "Change the word inside the quotes to any color you want." Students try "red", "purple", "deeppink", "lime". Every attempt works. Within 60 seconds, every student has written and run their first line of code.

The biggest barrier on day one is the fear that coding is impossibly hard. One line that does something visible destroys that fear immediately.

Give students three commands and a brief explanation of coordinates:

background("white");
fill("red");
circle(400, 300, 100);

Write a reference card on the board: circle(x, y, size), rect(x, y, width, height), triangle(x1, y1, x2, y2, x3, y3), fill("color"), noStroke().

The challenge: Draw anything you want using these commands. Give them 10 minutes. You'll see houses, robots, faces, and things you never expected. The wow factor is ownership — they're creating from imagination, not following a tutorial.

Activity 3: Instant sprites

Tell students to clear their code and type:

sprite("knight", 400, 300);

A fully animated knight appears. Students will gasp or immediately ask "What else is there?" Let them explore the built-in sprites on codeguppy.com

Students can build entire scenes just by placing sprites and choosing backgrounds.

Activity 4: Make it move

The natural next question is "Can I make it move?" It takes very little code:

let hero = sprite("adventurer", 400, 300);
hero.scale = 0.5;

function loop()
{
    clear();
    if (keyIsDown(LEFT_ARROW)) hero.x -= 3;
    if (keyIsDown(RIGHT_ARROW)) hero.x += 3;
    if (keyIsDown(UP_ARROW)) hero.y -= 3;
    if (keyIsDown(DOWN_ARROW)) hero.y += 3;
}

Arrow keys move the character. Students now have a controllable sprite on screen — the foundation of every game they've ever played. This is the moment where coding becomes interactive.

Activity 5: Generative art

End the day with something unexpected — code that creates things no human could draw by hand:

background("black");
noStroke();

for (let i = 0; i < 200; i++)
{
    fill(random(100, 255), random(50, 200), random(150, 255), 150);
    circle(random(0, 800), random(0, 600), random(5, 50));
}

Two hundred semi-transparent circles in random colors. Every time they press play, the result is different. Students will press play over and over, then start tweaking numbers: "What if I change 200 to 1000?" This plants an important idea: code is a creative tool.

Putting the day together

Here's a timeline for a 45-minute first class:

Time Activity Duration
0:00 Welcome and open codeguppy.com 3 min
0:03 Activity 1: One line of code 3 min
0:06 Activity 2: Shape gallery 12 min
0:18 Activity 3: Instant sprites 8 min
0:26 Activity 4: Make it move 10 min
0:36 Activity 5: Generative art 7 min
0:43 Wrap-up: "What surprised you today?" 2 min

Why this works

These activities follow a clear emotional arc:

  1. Relief — "Oh, that was easy" (background color)
  2. Pride — "I made something" (shape drawing)
  3. Delight — "That's so cool!" (sprites)
  4. Power — "I can control it" (keyboard movement)
  5. Wonder — "Code can do THAT?" (generative art)

Students don't need to understand every line of code yet. They just need to want to come back tomorrow. The first day is about lighting the spark, and codeguppy.com makes that easy — no installation, no configuration, just open a browser and start creating.

Read more blog articles Browse JavaScript projects

About codeguppy

CodeGuppy is a FREE coding platform for schools and independent learners. If you don't have yet an account with codeguppy.com, you can start by visiting the registration page and sign-up for a free account. Registered users can access tons of fun projects!

Follow @codeguppy on Twitter for coding tips and news about codeguppy platform. For more information, please feel free to contact us.