In this article what I want to show you is how we can prepare a course or material to teach HTML, CSS or Javascript programming to our students.

But I do not want to teach it in the classical way, if I can not take advantage of all the capabilities of inserting tools within our OneNote Class. This allows us to unite all the possibilities shown by OneNote Class and the tool that we can integrate on the OneNote section itself.

In this case we are going to use a platform that is compatible with OneNote, called 

What is REPL? is a free IDE (integrated development environment) that allows users to write their own programs and codes in dozens of different languages. While traditional IDEs are software programs downloaded to a computer, is completely based on a web browser and can be accessed from any Internet-enabled device, such as a phone, tablet or computer. 

Users must create an account to use the IDE It is free to create an account, and users must provide the following information:


It is possible that some users wish to provide more information, such as their name and a biography, but I decided to leave it blank. is free to use, although there are some limitations

Integrate it into ONENOTE

To integrate it into our ONENOTE workspace we simply have to open a project or create a new project in REPL, in my case I have created a project for the HTML and CSS language. This gives me the possibility to create a Web working environment where I have my space to program in HTML and a local Web server where it executes in real time what we program, without installing absolutely anything in the computer.

Then we must simply give the SHARE option and copy the Link that generates us.

Let's go to our OneNote Class

We open our OneNote Class and we can insert our REPL environment in any of them, and in this case I have created three sections:

Theory: Where I have the content that they should consult to perform the practice

FAQs: Space where I usually use for questionnaires «Form Microsoft»

Practice: Where they perform different practices in real time on the platform.

To insert the environment I go to the Practices section and create a new page called Exercise 1. Here I detail what I want them to do in this exercise and then I simply paste the "Share Link" of REPL.

And with this I already have a space in my section of OneNote where my students can perform the HTML practices in real time on a Web Server. All OneNote tools united with the power of a Web IDE like REPL.

I also share my Github where I have introductory material about HTML5, exercises, theory, etc. I hope it serves you.