JavaScript and Python Made Easy with New Interactive Notebooks

JavaScript and Python Made Easy with New Interactive Notebooks

JavaScript and Python Made Easy with New Interactive Notebooks

We’re thrilled to announce that kids can now create and share JavaScript and Python notebooks, making it fun and easy to learn text-based programming and express themselves creatively with code. Our interactive notebooks are best for advanced middle schoolers or high schoolers who are ready to take the next steps into text coding.

Moving from Block Coding to JavaScript and Python

At Tynker, we start kids with visual programming, so that they can learn the fundamentals of programming and computational thinking in an easier, more beginner-friendly environment. Then we gradually introduce text-based coding and syntax with our drag-and-drop JavaScript and Python puzzles. Finally, when they’re ready, kids take the next step into JavaScript and Python languages with our new interactive notebooks, bridging the gap between block-based coding and text coding.

We’ve released a set of ten classic arcade games built in our JavaScript notebooks – with instructions and documentation – that kids can play and remix.

What Are Interactive Notebooks?

Tynker’s interactive notebooks allow kids to write code in JavaScript and Python in their browser. You write code on the left, and it runs on the right within the same window. To start out, kids can make simple text-based programs, and when they get more advanced, they can introduce graphics into their programs, making full games that run in the browser.

Interactive notebooks are based on a form of programming called “literate programming,” pioneered by Stanford computer scientist Donald Knuth. Literate programming emphasizes the readability of code, making it easier for people to understand and modify.

What Can Kids Make?

With our new interactive notebooks, kids can remix our featured games and also create new games of their own. Not only will they get comfortable with JavaScript and Python syntax, but they’ll also learn computer science and math fundamentals like loops, functions, geometry, x- and y-coordinates, design, and much more.

Take “Memory Match,” the classic memory game where you flip over two tiles at a time and try to find matches.

This game sets up the HTML canvas to display the graphics and defines pixel art for each design. It uses an array data structure to store two of each type of pattern, then randomly shuffles these tiles. Whenever a tile is clicked, it updates the canvas to reveal the design and checks whether you’ve uncovered two matching tiles. It checks if the player has won by tracking how many tiles have been matched.

As they program or remix this game, kids learn about x- and y-coordinates, pixel art (simple pieces of art defined one pixel at a time), variables, functions, data structures, game loops, game logic, and much more.

How Can My Child Get Started?

There are lots of different ways to start, depending on your child’s age, coding experience, and interests.

If your child is brand new to coding, we suggest starting with our block-based puzzles, activities, and courses. Your child can learn the fundamentals of coding in a fun, creative way as they build games, control drones and robots, mod Minecraft, or much more.

Advanced middle schoolers or high schoolers who have already done some coding can start transitioning to JavaScript and Python with our free puzzle activities Counter Hack and Toxic Jungle.

And if they’re ready to really learn text-based coding, they can complete Sky Pirates and Jungle Run, two courses that teach kids how to build their own JavaScript and Python games and programs. (Educators, we also offer text-based coding courses that you can use in your classroom!)

Explore Courses

Tynker enables children to learn computer programming in a fun and imaginative way. More than 60 million kids worldwide have started learning to code using Tynker.

Style Switcher

Layout options
  • Boxed Layout
  • Full Width Layout
Header options
Accent Color Examples
Background Examples (boxed-only)
  • detailed
  • pixels
  • diagonal-noise
  • swoosh_bw
  • swoosh_colour
  • beach
  • sundown
View all options →