Review by Kim Alessi, Common Sense Education | Updated April 2017
Visit website

Codemoji

Visit website

Emoji-based coding tool demystifies web design and animation

Subjects & skills
Subjects
  • Math
  • Science
Skills
  • Critical Thinking
Grades This grade range is a recommendation by Common Sense Education and not the developer/publisher.
2–8
Great for:
Common Sense says (See details)
Teachers say (0)
Not yet reviewed
Price:  Free
Platforms:  Website

Take a look inside

5 images
Log in either to play with or learn about building webpages.
Drag and drop emoji to create a syntax of code.
Students can see how their code creates webpages in real time.
Teachers can assign specific HTML, CSS, and JavaScript lessons for individual students.
Full-featured teacher dashboard manages and tracks student progress.

Pros: Sequential lessons on core web technologies, great tutorials, and instant access to student-made websites and animations.

Cons: Design elements are limited to images, videos, and sounds contained in Codemoji; teacher dashboard can be buggy.

Bottom Line: Emoji-based lessons engage learning and empower kids to explore web design and animation, with instant website creation.

How Can I Teach with This Tool?

Codemoji is an engaging tool that helps teachers guide students through the main coding technologies that drive websites: HTML, CSS, and JavaScript. It's ideal to supplement direct instruction as an option for flipped or blended classrooms or for an after-school enrichment program or summer camp offering. Content-wise, Codemoji easily fits into a computer science, STEM, or media arts course.

Students can work individually or collaboratively, either by exploring in the Playground (HTML and CSS) or tinkering around in the Beta-mode Workshop (JavaScript). The teacher dashboard manages classes, tracks student progress, and presents data/assessments in a variety of ways, but it can be temperamental in unsupported browsers, so stick to Chrome and Safari for now.

Continue reading Show less
Standards:

With Codemoji, the inner workings of websites are demystified as students get hands-on experience building webpages 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). Emoji 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. There's a live-chatting feature, several how-to videos on YouTube, and a Codemoji Facebook page for additional resources.

Codemoji is a solid intro to web coding that's icon-based. Cumbersome coding text is transformed into a relatable emoji, and each emoji function is taught conceptually. There's no need to memorize strings of code, be a proficient typist, or have a deep understanding of coding syntax. This is especially helpful for emerging typists, ELL students, and visually based learners. Students can work at their own pace, have access to clear, multimodal instructions, and instantly see webpages and animations their code creates.

Codemoji is mostly drag-and-drop, and students can opt to add text into HTML code (to customize titles, for instance). That said, they'll be required to enter text and numbers in CSS and JavaScript lessons to specify certain commands, such as assigning color and animation coordinates. It's easy to run code, see it in action, get feedback, and showcase creations.

Overall Rating
Engagement Is the product stimulating, entertaining, and engrossing? Will kids want to return?

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.

Pedagogy Is learning content seamlessly baked-in, and do kids build conceptual understanding? Is the product adaptable and empowering? Will skills transfer?

Web design is made clear by Codemoji's visually based, drag-and-drop learning tool. Kids create webpages and animations in real time and develop intuitive skills that are the building blocks of today's websites.

Support Does the product take into account learners of varying abilities, skill levels, and learning styles? Does it address both struggling and advanced students?

Lessons start with multimodal instruction. Along the way, kids see their emoji-based code turn into a webpage or animation. Codemoji offers email and live chat support and has several how-to videos on YouTube.

Common Sense Reviewer
Kim Alessi Educational Technology Specialist
About our ratings and privacy evaluation.

Key Standards Supported

Engineering Design

  • 3-5-ETS1-2

    Generate and compare multiple possible solutions to a problem based on how well each is likely to meet the criteria and constraints of the problem.

  • K-2-ETS1-1

    Ask questions, make observations, and gather information about a situation people want to change to define a simple problem that can be solved through the development of a new or improved object or tool.

  • MS-ETS1-1

    Define the criteria and constraints of a design problem with sufficient precision to ensure a successful solution, taking into account relevant scientific principles and potential impacts on people and the natural environment that may limit possible solutions.

Back to top

Teacher Reviews

There aren’t any teacher reviews yet. Be the first to review this tool.

Write a review

Explore Our Favorite Tools