How to add a Custom Sandbox in your classroom?

Sandboxes are a great platform to learn how to code. It helps you practice the application of HTML, CSS and JavaScript in a structured environment and see the output right off the bat after clicking the run code button! This is also similar to the platforms professional developers use to test and create prototypes of the websites, games and software they want to build.

BSD Online has a wide variety of sandbox templates that are readily available to be added to the classroom. However, some sandboxes are only relevant to certain subject matter. We thought, maybe teachers can create their own sandbox template and add it to their lesson? With the recent patch, we have enabled adding a custom sandbox straight to your classroom. This means adding more of your personal touch for your students’ learning, be it a sandbox for debugging or a sandbox to build something different!

To get you started adding your custom sandboxes in your classroom, here’s how:

1. Create your own sandbox template!

Click on “Create your own sandbox” button on the left panel of your BSD Online homepage. You can either create a new HTML, CSS and JavaScript sandbox or edit an existing sandbox template.

After creating your sandbox, click the save button. This will automatically save your work into Your portfolio.

2. Go to your classroom!

First, you may want to unlock your classroom if you already have existing contents, otherwise, click on the “+” button that says “Add content in a new group”. A sliding window will appear on the right side of the screen, click on Custom then Sandbox.


A popup window will appear and will give you options, “Your sandboxes” and “Sandbox templates”. You will need to choose “Your sandboxes” to select the sandbox you created straight from Your portfolio. Scroll through and select the sandbox you need. You also have the option to use the search bar to search for the sandbox name.


3. Editing mode!

After selecting the sandbox you want, a new window will pop up for you to perform last edits before you can add the sandbox to the classroom. It has several parts:


  • Sandbox name - the sandbox title can still be renamed on this part!
  • Instructions - this is where you can add notes, instructions and messages to your students.
  • Sandbox code editor - You can still edit your HTML, CSS and JavaScript codes on this part. You also have the option to toggle between code editor and output view by clicking on the “eye” icon.
  • Add to classroom button - The final step to get your own customized sandbox in the classroom!

4. You’re all set!

Your customized sandbox is now part of the lesson! Note that you can add as many sandboxes as your class may need.

How does it look on my students’ computers?

Your students will see a BSD Online sandbox, but this time, they will have the instructions you posted on the left hand side, similar to a BSD Online Project! This will ensure that the students will still have guides and pointers even if they are working on a sandbox. Amazing, right?!

Now that you have added your custom sandbox, we hope that you and your students will enjoy this new feature and enhance their coding abilities in YOUR own way! If you have any questions about this feature or need help with anything BSD Online, please feel free to reach out to our support channels: email at or through chat support!

1 Like