Codemoji: Bring Coding to the Classroom with Emojis

Bring Coding to the Classroom with Emojis

Guest post by: Livio Blozon, Codemoji Creator

A year ago, Chase Engelbrecht and I came up with the idea for Codemoji.com, a way for students to learn how to code while having  fun with emojis.  As a teacher you might think emojis and the coding curriculum can’t go hand in hand, but our team has found a way.

Codemoji uses emojis as the on ramp to coding. While enjoying the learning process, the codemoji platform is able to give, even the youngest students, a high level of understanding of HTML ,CSS and Javascript.

The relatable emoji commands reduce the need for typing skills, memorizing functions, and clunky syntax. Instead, Codemoji makes HTML, CSS, and JavaScript intuitive for young coders.

What is Codemoji?

With Codemoji, the inner workings of websites are demystified as students get hands-on experience building web pages and animations. The "emoji" part of Codemoji is exactly that: a library of relatable emoticons that represent specific, text-based commands in HTML, CSS, and JavaScript (for example, an HTML Head Tag is represented by a panda head emoticon). Emojis are strung together to create lines of code that follow standard coding logic and syntax. Run the Codemoji in the Live Display box to instantly see the webpage or animation in action. The Show Tags tab displays the text version of the code.

Each lesson starts with step-by-step, multimodal instructions: text and a computerized text-to-speech option, followed by drag-and-drop animated instructions showing Codemoji moving from the Emoji Box into the Text Editor (in HTML lessons only). Students can run and get instant feedback on their code and progress at their own speed. 

Codemoji offers more advanced Javascript lessons where students learn about functions and much more with the help of step by step instructions.

Codemoji also has a fun way to build animations in the workshop.

Devices That Will Run Codemoji.com

Chromebooks, laptops or desktop computers that are running an updated version of Google Chrome or other supported browsers current version of Chrome is 58 will run codemoji.com.

For younger students such as those in 1^st – 2^nd grade, headphones are very helpful, as we have text to speech features for them.

How Can Teachers Use Codemoji?

Codemoji is an engaging tool that helps teachers guide students through the main coding technologies that drive websites: HTML, CSS, and JavaScript. Content-wise, Codemoji easily fits into a computer science, STEM, or media arts course. It is also a great addition to flipped or blended classrooms, enrichment programs, and summer camp offerings. We have also seen Codemoji being used as a free time website that students can go to or even a website students can go to as a reward.

Students can work individually or collaboratively, either by exploring in the Playground (HTML and CSS) or tinkering around in the Workshop (JavaScript). The teacher dashboard manages classes, tracks student progress, and presents data/assessments in a variety of ways. Stick to Chrome and supported browsers.

Students tab under teacher dashboard:

Codemoji In The Classroom?

If you would like to use Codemoji as part of a class, you can do this by showing the students how the platform works and giving them a quick overview. Then let them proceed on their own since Codemoji is self paced. You, the teacher, can then walk around the classroom and help students as needed.

In the teacher dashboard you can track all the students' progress by clicking on the student's name in the students tab. Also in the students tab we have lights to the left of the student names that you can use to see what the students are doing and if the students need help.  The students will have a light on all of their lessons and if they click this light it will show up in your dashboard as red which means they need help. If the light is blue that means they are in the webpage build or the workshop. If the light is grey that means the student is not online. If the light is green that means the student is online.

Codemoji can be used many different ways but it was designed with the classroom in mind first and that’s why schools and students love it because it has everything they need to be successful learners.

Guest post by: Livio Blozon, Codemoji Creator

My name is Livio Bolzona and I am 21 from Chicago IL. I am a fan of the Chicago buts and I went to Whitney Young High School and now I go to Northwestern University where I study computer science. I am the Co-Founder of Codemoji.com a platform to teach students programming.