Teaching coding online is hard because the thing you are trying to teach lives in two places at once. The idea of an algorithm lives in shapes and arrows, and the proof that it works lives in code that has to run. A shared whiteboard handles the first and a collaborative code editor handles the second, but throwing them in separate tabs loses the link between them. This guide is a practical setup for teaching coding online with a shared whiteboard and a code editor in the same window, so students see you sketch a data structure and then watch that structure turn into running code without a context switch.
Why a whiteboard matters when teaching code
Most of what is hard in programming is visual before it is textual. A linked list is a row of boxes with arrows. A recursion tree is a tree. A sorting algorithm is a line of values that swaps. Students who can draw these can usually code them, and students who cannot draw them are usually stuck before they type a line.
A whiteboard is where the drawing happens. In a physical classroom it is the board at the front. In a remote class it has to be a shared whiteboard, one the teacher draws on and the students see in real time, and ideally one the students can also draw on to show their own thinking.
The trap in remote teaching is using a whiteboard that is not next to the code. You draw the linked list in one app, then switch to the editor and describe it again, and the student has to hold both in their head across a tab switch. The whole point of putting a whiteboard next to a code editor is that the diagram and the code are one glance apart. The student watches the box-and-arrow sketch become the loop that builds it.
This is why an online whiteboard code editor is the shape of tool that fits teaching. It is not a whiteboard plus a code tool. It is one window where the diagram and the code share the session and the audience.
How do you set up a remote coding class?
The setup for a class is the same as for one student, scaled up. You want every student in the same session, looking at the same board and the same code, with permission to type when you ask them to.
- Open a session in a collaborative code editor that has a whiteboard. ShareCodeLive is one example. You do not need an account to start.
- Send the join link to the class. Students open it in a browser. No install.
- Put the whiteboard on one side and the code on the other. Sketch the concept on the board, then write the code that implements it.
- Pick the language for the day. The online compiler runs JavaScript, Python, and C++ in the browser, which covers most intro courses.
- For exercises, ask students to type into a specific function or section. You see their edits in real time and can correct them as they happen.
The part that makes this better than screen sharing is that the students are not watching. They are in the document. When a student does an exercise, you see their cursor move and their characters appear, and you can tell the difference between a student who is stuck and a student who is typing the wrong thing on purpose.
Which teaching formats does this setup fit?
The shared whiteboard and editor setup fits three common teaching formats.
A live lecture is the first. You draw on the whiteboard, you write code in the editor, the compiler runs it, and the class watches the output. The whiteboard is your slides, except they are sketches, which is what students actually want to copy down.
A guided exercise is the second. You give the class a stub with a missing function, and everyone types into the same file. You watch the solutions appear in real time and pick one or two to walk through. This is the format where a collaborative editor pays for itself, because you get to see thirty attempts at the same problem in real time instead of collecting them later.
A one-on-one tutoring session is the third. The student drives and you watch. When they get stuck on the concept, you sketch it on the whiteboard. When they get stuck on the syntax, you point at the line in the editor. The session has the same shape as an in-person tutoring hour, minus the commute.
What should you avoid when teaching online?
The common mistakes are all about losing the student's attention to the tool.
Do not screen share as your main teaching mode. Screen sharing puts students in a passive viewer role, and it puts the lesson at the mercy of your upload speed. A shared editor where they have a cursor keeps them as participants.
Do not over-rely on the AI assistant in front of beginners. It is tempting to have the assistant write the missing code for the student, but for a beginner the struggle of writing the loop is the lesson. Save the AI for when the student asks a question you want them to hear explained a second way, not as a shortcut to the answer.
Do not skip the whiteboard for syntax-heavy lessons. Even a lesson about pointers is easier with a box and an arrow than with three paragraphs of text. The whiteboard is not just for the algorithm unit, it is for any idea that has a shape.
Do not assume the online compiler is the whole environment. It is a teaching surface, not a deploy target. When a student is ready for a real project with a real toolchain, hand them off to a local setup. The browser is for learning the ideas, not for shipping the app.
A setup that scales from one student to a class
The reason this setup is worth the slight effort to learn is that it scales with the class size without changing tool. One student and a tutor use it. A class of thirty uses it. A workshop of a hundred uses it, with the teacher drawing and the students following along. The cost of adding a student is one link, and the student does not install anything or make an account to join.
If you want to try the format, open a free session in the ShareCodeLive collaborative code editor, which has the shared whiteboard and the online compiler in the same window, and invite a student or a class with a link. For the broader case of how these tools compare, the pair programming comparison puts the free options next to each other, and the FAQ covers the account and language questions teachers usually ask first.