CODEDAY
← All posts

1 May 2026

Start Here: Build Something in 30 mins

🚀 Start Here: Build Something in the First 30 Minutes

Hi! Welcome to CodeDay London! Firstly, we are so happy that you decided to come to this event, and can't wait to see all the cool things you end up building. The resources page is a collection of (believe it or not) resources that we think can be helpful to you! These are completely optional and you don't need to follow them. If, at any point, you want to move on with just building, feel free to do so!

Let's build something

Okay, so you're here. You've got a laptop, maybe a snack, and absolutely no idea where to start. That's completely fine. Everyone starts somewhere, and this guide is for the people who are starting right now, today, with zero coding experience.

We're going to get something on your screen in the next 30 minutes. You will have touched code (wow!) and created something of your own.

First, pick what you want to build:

  • [A] A game (a simple game you can actually play)
  • [B] A website (a page about something you love, or just about you)
  • [C] Something visual (shapes, colour, movement, creative stuff)

Pick one. Don't overthink it. You can always do another one later.

Path A: Your First Game 🎮

We're going to use Scratch. It's a drag-and-drop coding platform made by MIT, and it's genuinely great. While it looks like a toy language for simple projects, there are fully functional games on scratch!!

Some people have made fully functional games with it, and so can you!

Step 1: Open Scratch

Go to scratch.mit.edu and click Start Creating. You don't even need an account to start (make one later if you want to save it).

You'll see a cat. That's your character. That cat is about to do things.

Step 2: Make the cat move

On the left you'll see colourful blocks. Find the yellow Events section and drag out:

when [space] key pressed

Then go to the blue Motion section and drag out:

move (10) steps

Snap it under the first block. Now click on the stage (where the cat is) and press Space. The cat moves!

Play with the number. Make it 50. Make it -10 (it'll go backwards). Make it 67 See what happens.

Step 3: Add something fun

Go to Events and add:

when [up arrow] key pressed

Then snap a Motion block under it:

change y by (10)

Now your up arrow moves the cat up. Add blocks for the other arrow keys too.

Step 4: Add a second sprite

Click the little cat icon at the bottom right to add a new sprite. Pick anything: a ball, a star, a banana. Give it this script:

when green flag clicked
forever
  move (3) steps
  if on edge, bounce
end

Now you've got something moving around the screen. Add a block that checks if your cat is touching the second sprite and plays a sound or changes the backdrop. You've basically got a game.

Step 5: Give it a name and share

Click the title at the top to name your project. Hit the green flag to play it. If you made an account, hit Share and send the link to someone.

Want to keep going? The Scratch Wiki has guides on everything. Or just browse scratch.mit.edu/explore to see what other people have made and remix anything you like.

Path B: Your First Website 🌐

We're going to make a webpage. It'll have your name on it, some stuff about you, and it'll look kind of nice. You're going to use two things: HTML and CSS. HTML is the content on the page. CSS is what makes it look good.

Step 1: Open your workspace

Go to replit.com and make a free account. Once you're in, click Create Repl, choose HTML, CSS, JS, and give it a name. Something fun.

You'll see three files on the left: index.html, style.css, and script.js. Don't worry about script.js for now.

Step 2: Your first HTML

Click on index.html. Delete everything in there and paste this in:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hi, I'm [your name]!</h1>
    <p>I'm at CodeDay London and I'm building things.</p>
    <p>My favourite thing right now is [something you like].</p>
  </body>
</html>

Now I know what you're thinking: "WHAT! Theres so much code here and I have no idea what any of this means! How do I build on this?".

But that's okay! You don't actually need to know all of it to get something working. For now, all we care about is the stuff under the <body> tag (thats what we call the things between the <>).

You see a h1. This isn't really code, it's just a short form for heading 1! Can you guess what does p stand for? It stands for paragraph!

Replace [your name] and [something you like] with actual things. Then hit the big green Run button at the top.

You should see your page appear on the right.

Play around with more tags from this list (NOTE: Many of these tags will do weird things or even do nothing visible at all. That is fine and expected! Feel free to experiment.)

Step 3: Make it look good

Click on style.css. Paste this in:

body {
  background-color: #f0f4ff;
  font-family: Georgia, serif;
  max-width: 600px;
  margin: 60px auto;
  padding: 0 20px;
}

h1 {
  color: #1a1a2e;
  font-size: 2.5rem;
}

p {
  color: #444;
  font-size: 1.1rem;
  line-height: 1.7;
}

Let's try to understand what this is! What looks like code is really just English!

We put brackets next to body, which tells our machine that we want to change how everything inside the <body> tag looks like the html. We assign that a background color, the font we want, how wide it needs to be and how much space do we need it to have.

Then we tell our machine how we want to display the heading h1. Finally, how do we show p

Hit Run again. Looking better, right?

Step 4: Make it yours

Change the background-color to something you like. You can use any colour name (like tomato, steelblue, gold) or a hex code. Just Google "colour picker" and grab one.

Add more <p> tags with more things about you. Add an <h2> for a section heading. Break things on purpose and see what happens.

Congrats! You've made your first website! Now to show it to others:

Step 5: Share it

In Replit, there's a little share button at the top right. Copy that link and send it to someone. You just published a website.

Path C: Creative Code with p5.js 🎨

p5.js is a creative coding library. You write a bit of code and things appear on screen: shapes, colours, movement, patterns. It's used by artists, designers, and developers to make really interesting stuff. You're going to love it or find it deeply confusing. Possibly both.

Step 1: Open your workspace

Go to editor.p5js.org. No account needed to start. You'll see some code already there:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

The first bit of code really just makes a square 400 pixels tall and 400 pixels wide. If you hit the Play button (▶), you'll see the grey square. That's basically your drawing board! Now all you need to worry about is the draw function.

Step 2: Draw something

Inside the draw function, after background(220);, add this:

circle(200, 200, 100);

Hit Play. A circle appears in the middle. The three numbers are: x position, y position, size.

Move it around. Make it bigger. Add another one.

Step 3: Add colour

Before your circle, add:

fill(255, 100, 50);

Those three numbers are red, green, and blue. Each goes from 0 to 255. Play with them. fill(255, 0, 0) is red. fill(0, 0, 255) is blue. fill(255, 200, 0) is a nice orange-yellow. Get values from here

Step 4: Make it move

Replace your circle line with this:

circle(mouseX, mouseY, 100);

Hit Play and move your mouse over the canvas. The circle follows your cursor.

Now change background(220) to background(220, 220, 220, 25). Move your mouse slowly. You'll get a trailing effect.

Step 5: Go wild

Try adding this inside draw:

for (let i = 0; i < 10; i++) {
  fill(random(255), random(255), random(255));
  circle(random(400), random(400), random(50));
}

That's a loop. It draws 10 random circles in random colours every single frame. It's chaos. It's great.

From here, just explore. Change numbers. Break things. Look up "p5.js examples" for inspiration. The p5.js reference has every single thing you can do and it's actually really readable.

What now?

You built something. Genuinely, that's it. You did it.

If you want to keep going, check out the other resources on this page. There's stuff on building games properly, making websites with more features, using AI tools to build faster, and a whole load of project ideas if you're not sure what to make next.

Or just keep going with what you've got. The best projects at CodeDay are always the ones where someone just got really into one idea and ran with it.

Go build something cool. We can't wait to see it. 🎉