You are here

Learning Javascript with Vidcode

Sean's picture

Vidcode is a fun, engaging online platform that patrons can use for free to learn how to code using Javascript. I'd previously written a blog post explaining how to access Vidcode and create and account, and I talked a little bit about what you can do in Vidcode. You can view that post by clicking here. Now I'd like to go a little more in-depth and show you some of the kinds of projects you can code with Vidcode. Vidcode has all of their content organized into 12 units, and in each unit there are 5 to 10 activities for you to complete. Each unit and activity builds upon previous ones, so it is a nice, straightforward step-by-step learning system. Once you follow the steps in my previous blog post that I mentioned earlier, you should have an account and can click on "Start Coding" to jump right in.

The projects in Vidcode are fun and meant to let you use your creativity. You can create a variety of things, including: filters (like the ones you can find on Snapchat or Instagram!), memes, gifs, games, and more. Let's take a look at one of the projects so you can see how Vidcode works. The first project is creating a filter. When you choose that project, you will be brought to a screen that serves as your work space.

Screenshot of create a filter project on Vidcode website

As you can see in the above screenshot, you will find instructions on the left hand side that guide you through the project. Typically, you start off by choosing an image or video clip. Vidcode provides some video clips and images on the right hand side that you can choose from, or you can upload your own. In my example here, I chose a clip of a lava lamp. As you progress through the instructions, you will learn lines of code and Vidcode will explain what the lines of code are and you'll be able to see how it changes your image or video clip. The white space in the middle is where lines of code will go. Right now it is just showing the code for the clip I chose, and the actual clip is playing on the right above where you can choose which image or video clip you want.

Screenshot of completed create a filter project on Vidcode website

As you can see in this screenshot, there are now more lines of code in the middle part of the screen. You can see that my lava lamp clip on the right side looks a lot different from the original in the previous screenshot.  It is really cool to see how the lines of code change your clip or image right away. Vidcode provides very clear, straightforward explanations for each line of code. They will also walk you through on how to change the values associated with each line of code, which is the numbers or text you see in between the parentheses (i.e. "Green" and 50 in the parentheses next to Tint). Changing those values can create different effects. As you become more comfortable with coding, you can start to type in all different kinds of codes in that white space in the middle and create different effects, colors, animations, and more. That pretty much wraps up this first project. 

Vidcode provides a straightforward, step-by-step learning system to make learning code easier. There are a variety of fun, engaging projects for you to do, and this can all be done for free! We will be doing a couple of coding classes for teens this summer as well. They will be held virtually via Zoom. One class is called Code a Meme and it will be held on Monday, June 22 from 2 pm to 3 pm and also on Monday, July 27 from 2 pm to 3 pm. The other class we'll be doing is Code a Snapchat Filter and that will be on Monday, July 13 from 2 pm to 3 pm.

 If you have any questions about Vidcode, please feel free to give us a call at 847-428-3661 or email us at or