Welcome to the wonderful world of coding! In this first lesson you'll learn how to write your first JavaScript instruction.
Start tutorialMy programs
Tutorials and Projects
- All Tutorials
- Editor picked
- Coding Course
- Drawing
- Pixel Art
- Games
- Polar coordinates
- Math
- Text processing
- Other
![Pixels and Coordinates](tutorials/_coordinates/thumb.jpg)
Learn about Pixels, Resolution and Coordinates - important computer science concepts widely used in CodeGuppy.
Start tutorial![Expressions and Variables](tutorials/_expressions_variables/thumb.jpg)
Expressions and variables are the core of any programming language. Learn about these JavaScript concepts using a fun lesson.
Start tutorial![JavaScript Functions](tutorials/_functions/thumb.jpg)
Create new JavaScript 'instructions' and achieve code modularization through the use of functions.
Start tutorial![Variables and Functions recap](tutorials/_variables_recap/thumb.jpg)
In this lesson you'll recap variables, expressions and functions and learn about the concept of strings.
Start tutorial![Getting Started with codeguppy.com - a p5.js and p5play based platform](tutorials/_p5/thumb.jpg)
This tutorial is indended for users that are familiar with the p5.js library. Codeguppy.com integrates updated versions of p5.js, p5play and other libraries in a single platform.
Start tutorial![Blocky - A pixel art editor in JavaScript](tutorials/blocky/thumb.jpg)
Pixel art is awesome. This tutorial will show you how easy is to build a simple pixel art editor.
Start tutorial![Color Blocky - A pixel art editor in JavaScript](tutorials/color_blocky/thumb.jpg)
Pixel art is awesome. With this tutorial you'll learn how to build your own pixel art editor.
Start tutorial![Breakout - How to implement a Breakout clone in JavaScript](tutorials/breakout/thumb.jpg)
Breakout game is a classic. Learn how to recreate this game that will offer you hours of entertainment.
Start tutorial![Analog clock](tutorials/clock/thumb.jpg)
With all the digital gadgets around us, analog clocks represents a classical beauty. Learn how to re-create one with our tutorial and a little bit of trigonometry.
Start tutorial![Falling balloons](tutorials/falling_balloons/thumb.jpg)
Balloons are falling! Pop them all with your needle to win the game.
Start tutorial![Visual sort](tutorials/visual_sort/thumb.jpg)
Visualize what happens in computer memory during a common sort operation.
Start tutorial![Invaders](tutorials/invaders/thumb.jpg)
Invaders game is one of the most well known classic games. Learn how to how to create your own custom clone of this game.
Start tutorial![Plane vs Objects](tutorials/plane_objects/thumb.jpg)
Pilot the airplane and distroy all the objects before your crash into them.
Start tutorial![Planets](tutorials/planets/thumb.jpg)
Learn how to create a simulation of our solar system with realistic planet movement.
Start tutorial![Computer poetry](tutorials/poetry/thumb.jpg)
With a little bit of coding, your computer can be a poet. Have fun at the amazing writtings.
Start tutorial![Sliding puzzle](tutorials/sliding_puzzle/thumb.jpg)
Implement the classic sliding puzzle... and then have fun solving it. Perhaps you can even share it with your friends.
Start tutorial![Falling spiders](tutorials/sprite_spider/thumb.jpg)
Use the binary system to efficientize the retro sprite storage... and then animate the sprite to implement falling spiders effect.
Start tutorial![Tic Tac Toe](tutorials/xand0/thumb.jpg)
Implement the classical game of Tic Tac Toe and play a match against computer.
Start tutorial![Jagged shapes](tutorials/jagged_shapes/thumb.jpg)
When straight lines and circles are not enought, you can implement jagged shapes.
Start tutorial![Connect the dots](tutorials/connect_dots/thumb.jpg)
Learnd how to implement 'Connect the dots' game that you can share it with your friends and family.
Start tutorial![Character editor](tutorials/char_editor/thumb.jpg)
Implement an 8x8 character editor that you can use to edit your own fonts or sprites.
Start tutorial![User defined characters](tutorials/user_characters/thumb.jpg)
Learn how to define and write with 8x8 characters while exercising binary to hex transformation in the process.
Start tutorial![LED scrolling](tutorials/led_scrolling/thumb.jpg)
Implement a classical scrolling LED display to transmit your messages in style.
Start tutorial![Turtle graphics](tutorials/turtle_graphics/thumb.jpg)
Turtle graphics is the flagship feature of Logo programming language. See how easy is to add Logo like commands to your favorite JavaScript language.
Start tutorial![Guessing game](tutorials/find_object/thumb.jpg)
Pick an object from the display list then let the computer find the answer by answering a series of questions.
Start tutorial![Seven segment display](tutorials/seven_segment/thumb.jpg)
Learn what it takes to create a classic seven segment display to display the current time in style.
Start tutorial![Word search](tutorials/word_search/thumb.jpg)
Send your friends a special greeting... To see they first have to solve a classic game of word search.
Start tutorial![Caesar Cipher](tutorials/caesar_cipher/thumb.jpg)
Exchange secret messages with your friends by encrypting and decrypting them with the Caesar cipher.
Start tutorial![Fibonacci](tutorials/fibonacci/thumb.jpg)
Calculate numbers from the Fibonacci series while learning about recursion and big numbers.
Start tutorial![Escape the lab](tutorials/escape_lab/thumb.jpg)
Escape the lab is text adventure game that requires imagination rather than skills.
Start tutorial