Scrimba: A New Way to Teach and Learn Code

DZone 's Guide to

Scrimba: A New Way to Teach and Learn Code

We take a look at a new educational platform that allows beginning devs to sync up their GitHub accounts and practice their new found development skills.

· Web Dev Zone ·
Free Resource

Any of you follow my writing will know that one of my passions is explaining technical concepts and projects clearly and concisely. One of the common locations for starting these explanations is documentation, and as a majority of documentation is delivered as HTML, I am constantly encouraging developers and writers to embrace all that the format gives you. Scrimba is one of a handful of options I have seen over the past 18 months that integrates code explanations and examples into one cohesive package. It’s aimed more at screencast creators than documentation writers, but in my mind, anything that helps explain concepts to users is documentation.

To start creating with Scrimba, log in with GitHub, click the create menu item and select a template (I chose ‘JS, HTML, and CSS’).


Scrimba will connect any file named index.extension, so there’s no need to manually link files in your HTML or JavaScript, you can also link to other JavaScript files or external JavaScript files. The editor is a fully fledged IDE that provides code completion and is aware of variables you created in the project.

From here click record and start adding your code, you can also toggle the console and run your project at any time and Scrimba will keep recording until you click stop, you can even record accompanying audio with Scrimba.

Record Audio

Once recorded, Scrimba has basic editing tools to let you skip (retaining) or cut (destroying) footage. When you’re finished, you can save and publish your screencast, but be careful as you can’t edit yet.

Edit Screencast

Here’s the small sample project I created, complete with audio and edits.

And that’s pretty much it for now, the basic steps for creating and sharing a screencast for web-based technologies are straightforward and enough for any education enthusiast. The team has other features and improvements planned, including improved HTML support and changing file linking (mentioned above) to act more like a ‘normal’ offline project.

Let’s push technical explanations forward with tools and resources that suit our medium, Scrimba, and tools like it are in their early days, but fully embrace the potential of the modern web to help nurture the next generation of web developers.

Feature image from here

education ,coding ,learn to code ,screencasts

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}