ETHAN CODE · LEARN · CREATE · INNOVATE

Welcome to Ethan Coding

A fun, practical coding space where young people learn digital skills, explore technology and turn creative ideas into real projects.

✓ Learn to code✓ Build real projects✓ Solve challenges✓ Grow your skills

Start Learning Now Join a Classroom

⌘Imagine it. Code it. Build it.Every great digital creator starts with one idea.

Teenage students collaborating on coding projects in a modern computer lab

⌘Learn CodingFrom beginner to advanced

▣Interactive ToolsPractise as you learn

◇Build ProjectsWebsites, games and apps

★Online ClassroomLearn, submit and grow

CHOOSE MY PATH

Start at the level that feels right

Ethan Code can begin with pictures and simple instructions, then gradually move toward real written code.

You can change your learning path anytime.

MY CLASSROOM

What would you like to learn?

Start with the easy lessons. New ideas become available as you grow.

STARTER

Meet Coding

Understand websites, instructions and simple HTML.

EXPLORER

Make It Look Good

Learn colours, spacing and page layouts with CSS.

BUILDER

Make It Work

Use JavaScript and Python ideas to make things happen.

CREATOR

Build Real Projects

Plan, create, test and proudly present your own work.

LEARNING PATH

Your coding courses

Course names are simple first. The real technical words are introduced inside the lessons when you are ready.

Expanded curriculum: Scratch, ScratchJr, Blockly, Code.org, MakeCode, mobile app creation, Python, robotics, AI, data, SQL, Git and more.

TOOLS YOU WILL LEARN WITH

Explore real coding platforms

Learn the ideas in Ethan Code, then practise with the official tools used to create stories, games, apps, websites and physical computing projects.

🐱ScratchBuild animated stories, games and interactive projects with visual blocks.Open Scratch Editor ↗ 🧒ScratchJrEarly coding through picture-based sequences, stories and simple animations.Explore ScratchJr ↗ 🧩BlocklyLearn programming logic with drag-and-drop blocks that can generate code.Explore Blockly ↗ 🏫Code.orgPractise computer science through guided puzzles, activities and projects.Open Code.org ↗ 🕹️MakeCode ArcadeCreate pixel games and move from blocks toward text-based code.Open MakeCode ↗ 💡MakeCode micro:bitProgram LEDs, buttons and sensors with a microcontroller simulator.Open micro:bit ↗ 📱MIT App InventorPlan and build beginner mobile apps using components and visual blocks.Open App Inventor ↗ 🤖ArduinoExplore physical computing, sensors, microcontrollers and robotics.Explore Arduino ↗ 🐍PythonProgress into text-based programming, automation and data projects.Visit Python ↗ 🌐Web TechnologiesLearn HTML, CSS and JavaScript for websites and browser applications.Open MDN ↗

Some external platforms may require an account or a separate app. Ethan Code lessons guide learners through the concepts; external tools are opened on their own official websites.

CODING ADVENTURES

Learn by completing missions

Short missions turn coding ideas into something you can see and solve.

PUZZLE LAB

Put the instructions in the right order

Coding is about giving clear instructions in the correct sequence. Move the cards until the character reaches the star.

Goal: help Ethan Bot reach ⭐.

My instructions

CREATIVE PLAYGROUND

Choose what you want to make

📖

Interactive Story

Make characters speak and choices change what happens.

🎮

Mini Game

Use events, scores and rules to build a simple challenge.

🎨

Code Art

Use shapes, colours and patterns to make digital art.

🌐

My Website

Create a webpage about a safe topic you enjoy.

Choose a project above and Ethan Code will suggest your next steps.

ETHAN CODE · VISUAL BLOCK LAB

Build programs by joining blocks.

Drag blocks into the workspace, connect them, generate JavaScript and run your program in a separate sandboxed preview. Start with a ready-made example or create your own.

Loading visual editor…

MY BLOCK WORKSPACEDrag blocks from the toolbox into this area.

GENERATED JAVASCRIPTSee how your blocks become code.

Connect a few blocks, then choose “Show JavaScript”.

PROGRAM OUTPUTYour program runs in an isolated preview.

Continue in Scratch ↗

The built-in Block Lab uses Blockly to teach visual programming and generates JavaScript for its preview. Scratch is a separate visual storytelling and game-making platform; open its official editor above for full Scratch projects. Other language tracks explain Python, Java, C, C++, TypeScript and more, but those languages do not run in this browser preview.

ETHAN CODE · LIVE CODE STUDIO

Write code. Run it. Show my page.

Create a complete webpage using HTML, CSS and JavaScript. Select a language, edit the example, and run your code. Your page appears immediately beneath the editor.

Ready to build

HTML · Page structure

<main class="welcome"><h1>My Ethan Code Page 🚀</h1><p>I built this page with HTML, CSS and JavaScript.</p><button id="helloButton">Click me!</button><p id="message">Try the button above.</p>
<section class="section ethan-unique" id="ethanWorkshop">
 <div class="unique-heading"><div><span class="tag">ETHAN CODE · SIGNATURE WORKSHOP</span><h2>Think like a developer. Build like a creator.</h2><p class="lead">Three practical tools that turn lessons into real coding confidence. Your work is saved in this browser, without requiring an account.</p></div><span class="unique-local">🔒 Saved on this device</span></div>
 <div class="unique-grid">
  <article class="unique-card">
   <div class="unique-icon">🕵️</div><span class="unique-kicker">DEBUGGING GYM</span><h3>Code Detective</h3><p>Inspect a broken program, identify the bug and learn why the fix works. Build the habit of reading code carefully.</p>
   <div class="detective-meta"><span id="detectiveLevel">CASE 1 OF 4</span><span id="detectiveScore">0 solved</span></div>
   <h4 id="detectiveTitle">The missing message</h4><p id="detectivePrompt" class="detective-prompt"></p>
   <pre id="detectiveCode" class="detective-code"></pre>
   <div id="detectiveChoices" class="detective-choices"></div>
   <div id="detectiveFeedback" class="detective-feedback" role="status" aria-live="polite">Choose the line that contains the bug.</div>
   <button class="secondary" id="detectiveNext" type="button">Next case →</button>
  </article>
  <article class="unique-card">
   <div class="unique-icon">🧭</div><span class="unique-kicker">PROJECT PLANNER</span><h3>Build an Idea Blueprint</h3><p>Turn an idea into a realistic mini-project with features, tools, steps and a completion checklist.</p>
   <label class="unique-label" for="blueprintType">What do you want to build?</label>
   <select id="blueprintType"><option value="website">A website</option><option value="game">A simple game</option><option value="app">A mobile app idea</option><option value="robot">A robotics project</option><option value="data">A data dashboard</option></select>
   <label class="unique-label" for="blueprintIdea">Give your project a name</label>
   <input id="blueprintIdea" maxlength="70" placeholder="e.g. My School Study Helper">
   <label class="unique-label" for="blueprintAudience">Who will use it?</label>
   <input id="blueprintAudience" maxlength="70" placeholder="e.g. students in my class">
   <button class="primary" id="makeBlueprint" type="button">Create my blueprint</button>
   <div id="blueprintOutput" class="blueprint-output" aria-live="polite">Your project plan will appear here. Start with a small idea and improve it step by step.</div>
   <button class="secondary" id="downloadBlueprint" type="button" disabled>Download project plan</button>
  </article>
  <article class="unique-card">
   <div class="unique-icon">🏅</div><span class="unique-kicker">CREATOR PORTFOLIO</span><h3>My Project Showcase</h3><p>Record the projects you have made, add a working link and build a portfolio you can share with a teacher.</p>
   <label class="unique-label" for="portfolioName">Project name</label>
   <input id="portfolioName" maxlength="70" placeholder="e.g. My first website">
   <label class="unique-label" for="portfolioDescription">What did you create or learn?</label>
   <textarea id="portfolioDescription" rows="3" maxlength="240" placeholder="Describe what your project does...">

Project link (optional)

Privacy note: these workshop tools store progress and portfolio entries in this browser only. They do not upload student work to a server or provide cloud sync. Do not add private personal information.

ETHAN CODE · SECURE ONLINE CLASSROOM

Teach. Practise. Submit. Improve.

Create a class, invite learners with a class code, publish coding assignments and review submissions from anywhere.

CLOUD CLASSROOM

Real classroom workspace: Accounts are verified by email. Classes, assignments and submissions are stored in Neon. Student scores are calculated by the database from the teacher's published checks; this is transparent phrase-based marking, not an AI examiner or full compiler.

YOUR ETHAN CODE ACCOUNT

Sign in or create your free account

Use a valid email address. A verification code will be sent to your inbox when you register.

Your name Email address Password

SIGNED IN

TEACHER DESK

Create your classroom

Class name

Your new class invitation code will appear here.

STUDENT DESK

Join a classroom

Class invitation code Name shown to your teacher

YOUR ONLINE CLASSES

Choose a classroom

Loading your classrooms…

CLASS WORKSPACE

Selected classroom

Publish a coding assignment

Assignment title

Level

Language

Instructions Automatic marking checks (comma-separated phrases)

Class performance report

Student	Assignment	Score	Feedback	Date
No submissions yet.

Class assignments

Select a class to load assignments.

This studio runs HTML, CSS and browser JavaScript. Java is a different language and requires a separate Java runtime; it cannot run in this webpage editor. Downloaded pages can be opened in your browser.

Welcome to Ethan Coding

Start at the level that feels right

What would you like to learn?

Meet Coding

Make It Look Good

Make It Work

Build Real Projects

Your coding courses

Explore real coding platforms

What are we learning?

Simple meaning

Think about it like this

Let me show you

Try it with me

Your turn

Learn by completing missions

Put the instructions in the right order

My instructions

Choose what you want to make

Interactive Story

Mini Game

Code Art

My Website

Build programs by joining blocks.

Write code. Run it. Show my page.

Teach. Practise. Submit. Improve.

Sign in or create your free account

Create your classroom

Join a classroom

Choose a classroom

Selected classroom

Publish a coding assignment

Class performance report

Class assignments

Submit your work

My submissions

Try your code here

Challenge Lab: think harder, build smarter.

Select a challenge

Make something you can be proud of

All About Me Page

Colourful Learning Card

Study Counter

My Big Project

Look how far you have come!