How to Build Website like Codecademy


Interactive coding platforms are probably the most common way many people get started learning how to code. I used websites such as Codecademy, freecodecamp, and W3School a lot to learn to code and I have always been wondering how to build websites like these. There seem to be very few resources on this topic so I will share my approach on building the interactive JavaScript course on this site, basically by tons of trial and error.

Why I Build CsPlayground?

I am an educator based in Malaysia primarily teaching coding to secondary students. I am constantly looking for platforms to provide students with self-learning, interactive coding activities and most importantly being able to track their progress. I have tried using freecodecamp, codecademy, codecombat however they either do not have the progress tracking feature or relatively expensive to subscribe to. So, I built this website primarily for my usage, and hopefully, I could help other educators do the same thing at an affordable cost.


Csplayground is built entirely on Vue.js. Since I am most comfortable with this framework, I try to avoid any server-side logic and build most of them on Vue alone. This might not be the best way to do it but at least it works for now.

The Editor

Setting up the code editor is probably the easiest part. I use Ace editor – a embeddable code editor written in JavaScript. This is also the editor used in sites like Khan Academy and Codecademy. Setting up ace editor is straightforward, all you have to do is import the pre-packaged version of Ace editor. You can find the tutorial here and the NPM package here.

Running the Code

To get the code written in the editor, you can use the getValue() method of the editor’s instance.

let editor = ace.edit(element, {
    mode: "ace/mode/javascript",
    selectionStyle: "text"
editor.getValue(); // Get user code

Next, to execute the code, there are two options I discovered:

  1. Use JavaScript eval() on client side
  2. Send code string to server side and execute using Node vm module

Option no 1 is easy to implement however a quick search will show you every article why you should not use eval() in JavaScript because it allows users to run malicious code in your app.

Option no 2 is to setup up a server-side script on Node that evaluates the user’s code using the vm module. Since vm module evaluates code in an isolated sandbox, it has no context of the browser console. Hence, I need to override the sandbox console to capture the console.log arguments and return the results.

function hook_consolelog(callback) {
    var old_log = console.log;

    console.log = (function(write) {
        return function() {
            write.apply(console, arguments)
            callback.apply(null, arguments);

    return function() {
        console.log = old_log;

var result = [];
var unhook = hook_consolelog(function(v) {

My current codebase currently using the eval() method which I think is a bad choice so I am refactoring it to use vm module instead.


One important feature of an interactive JavaScript platform is to display the console message onscreen. The way I implemented this feature is by overriding the console function to capture the arguments and display them on DOM. I override the console.error function as well as my submission correctness testing relies on assertions.

window.console = {
    log: ( any[]) => {
      // Display on DOM

    warn: ( any[]) => {
      // Display on DOM

    info: ( any[]) => {
      // Display on DOM

    error: ( any[]) => {
      // Display on DOM

Submission Correctness Testing

To check the user’s code, I rely on two different tests – assertion and regex. Assertion tests are quite straightforward as I only have to append the assertion test to the user’s code. The caveat is that I could not evaluate any intermediate state of variables. For example, to check if a variable is assigned with the correct value:

// User code
var number = 6;
var number = 4;

// Code below this line is appended
assert(number === 4, "number should have a value of 4");

As shown above, assertion appended after the user’s code only able to check for the final value.

Next, to check for any specific way of coding, I use regex to do the testing. For example, if the activity requires the user to assign the number variable using the + operator:

const a = 3;
const b = 4;

// Assign number as a + b
let number =
    "assign number as a + b"

If any of the assertion tests failed, the AssertionError will be caught by the custom console we overrode and display it onscreen. Doing assertion tests this way has a few downsides. For one, if the first assertion test failed, the rest of the code will not be evaluated and I could not provide the user with feedback on various test cases for that particular activity.


This project seems quite daunting to me at first but by solving one problem at a time now I able to make it work. There are still many improvements to be made. I’ve spent quite some time figuring out how to do this so I am sharing this with those who had no idea where to start. If you have any idea of how to make it better or any major flaw in my approach, feel free to connect with me on Twitter!

Learn Kodular, Thunkable & App Inventor – Start with Programming Basics


The rise of low-code/no-code platforms allow anyone to easily create mobile apps. In the low-code/no-code mobile apps development space, three notable platforms are MIT App Inventor, Thunkable, and Kodular. Both Thunkable and Kodular originated from MIT App Inventor, hence they all have similar interfaces and mechanics on the app building process. MIT App Inventor is maintained by Massachusetts Institute of Technology for educational purposes while the latter two aimed to help users create commercial applications.

All three platforms use Google’s Blockly visual programming language as their foundation for app development. Even though no code needs to be “written” and the complex programming syntax is abstracted away with Blockly, users ought to understand the fundamental concepts of programming in order to achieve different results effectively. Here are some of the fundamental concepts in programming that will help you in your app building process:

  1. Variables & Data Types
  2. Operators
  3. Conditional
  4. Iteration / Loops
  5. Function / Procedure

You learn these programming concepts with our interactive Blockly programming platform.

Variables & Data Types

In computer programming, a variable or scalar is a storage location (identified by a memory address) paired with an associated symbolic name, which contains some known or unknown quantity of information referred to as a value.

– Wikipedia

You can think of variables as containers used to store information during a program execution. We can retrieve the information and reuse them throughout our program. Different programming languages have different ways of creating variables inside a program. In programming languages such as C, C++, and Java, data type of the variable need to be specified during creation and you will only be able to store the specified data into the variable. However, in Blockly we do not need to specify the data type and variable can be used to store any type of value. This is similar to programming languages such as JavaScript, Python, and PHP. Some of the basic data types in Blockly:

Primitive Data Type

  • String
  • Number
  • Boolean
  • null / undefined (special data types)

Composite Data Type

  • Object / Dictionary
  • Array / List
  • Function / Procedure (Not assignable in Blockly)

Examples of creating variables with different data types in Kodular.


Operators are used to perform mathematical, relational or logical operation. We can combine more than one math operator to perform a more complex calculation. Computation of result follows convention math precedence that is:

  1. Parentheses
  2. Exponents
  3. Multiplication and Division
  4. Addition and Subtraction

Mathematic Operators

Relational Operators

A relational operator is used to create conditional expression which will return a Boolean – either true or false. Using it with if statements, we will be able to create algorithms where program can make decision to execute different code based on the given conditional expression.


In programming, conditional statements are used to decide different computations at run time. There are several types of conditional statements:

  • if statement
  • if…else statement
  • if…else if…else statement
  • switch statement (not available in Blockly)

The if statement checks whether a given conditional expression evaluates to true, if so, the statement will be executed.

If the conditional expression of an if statement evaluates to false, then the else statement will be executed.

The else if statement adds another condition to check when the first if statement is false.

Iteration / Loops

In programming is used to repeat a block of code until a specific condition is met. There are two main types of loop:

  • for loop
  • while loop

A for loop requires an initialization statement to declare a loop control variable, a test statement to test against the variable and an increment statement to update the variable. The test statement will be evaluated after every loop and if it is true, the process repeat itself. In the example below, the code blocks in the for loop will be executed for 5 times.

A while loop allows code to be executed repeatedly until a given conditional expression is evaluated as false.

Function / Procedure

Even a simple computer program contains hundreds if not thousands of lines of code. Most of the time, part of these codes is repeated. Instead of typing out the same instructions over and over, we can group them into chunks called function or procedure. Value can also be passed into a function as variables, they are also known as parameters.

Function can have return values – the values that a function returns when it has completed.


In order to develop any logic in your mobile app using either Kodular, Thunkable or MIT App Inventor, understanding the basic concepts of programming give you the ability to achieve it effectively. Diving in without the fundamentals is like solving complex equations without know basic algebra. Our interactive block-based coding platform is designed to help students learn the fundamentals so that they have the skill to build more advance application.

Learn Programming with Blockly

Blockly Editor Demo

Learning how to program for younger kids is tough. They need to navigate through syntax of different language instead of focusing on the programming principles and problem-solving skill. Although there are many good learning resources and interactive learning platform, it still takes a huge amount of effort for kids to get familiar with the syntax of a text-based programming language. Kids will get frustrated and lose interest in programming.

This is where Blockly comes in; Blockly is a block-based programming language developed by Google. It uses graphical blocks to represent code concepts like variables, loops, logical expressions and more. It allows students to focus on learning the programming principals without having to worry about the syntax. Unlike the popular coding platform Scratch (which built on top of Blockly codebase), Blockly has lesser abstraction which is more closely represent text-based programming languages thus allowing students to carry forward their skill and pick up popular programming languages much easier.

How to Use Blockly?

To learn or teach programming using Blockly isn’t exactly straight forward. Even though there are many fantastic platforms that uses Blockly such as MIT App Inventor, there aren’t many that focuses on teaching programming principles.

To use Blockly on its own, one can setup the visual editor using Blockly’s open source library, and Google provides an comprehensive guide and reference for developers. However, this might not be an option for teachers or students which do not have the technical skills to setup the visual editor. Out of our own needs, we setup a visual editor with a simulated console to provide feedbacks. You can access the editor here.

Interactive Blockly Tutorial

In, we created an interactive Blockly Tutorial with more than 50 activities to help you learn coding with Blockly. Try our activity below or sign up a free account to use it for learning or teaching. We included a classroom management feature which allow teachers to monitor students’ progress and help them to modify their code.