A guide to online tutorials for the code-curious journalist

“I definitely think that coding now is a kind of a literacy, no matter what position you are in,” - Louise Ma, WNYC’s data news interaction designer, in CJR

The solution? Well, if you’ve been paying attention then you have probably already heard somebody preach: It helps to learn how websites are made.

Prior to Medill, I spent a good five years dabbling in web making, compelled by an introductory computer science course I took on a whim during my senior year as an undergraduate. And by dabbling, I mean running up a hefty Barnes & Noble bill on whatever code-learning books had received the best Amazon.com reviews or sitting idly at my desk watching video tutorials, occasionally asking myself, “why am I even doing this?”

Googling “journalism” + “coding” serves as an omnipresent reminder.

Pieces about why journalists need to integrate technology skills into their repertoire have become commonplace. Last year, Neiman Journalism Lab took on journalism education, and a number of tech-focused publications like Gigaom and MediaShift have weighed in as well.

And performing that aforementioned Google search returns links to the same prescient story written 100 different ways. I can tell you, having concentrated my Medill degree on the interactive side of things, my fear of leaving Medill without improving my digital literacy is very real. And for better or worse, the number of resources available to teach these skills can be overwhelming. Which begs the question: Where do I start?

There are, of course, a plethora of paper-based books available. But for many journalists unfamiliar with web-making, it can be a laborious and often frustrating process to find the one that “speaks” to them in a way that makes sense. Most books that teach code — even ones that claim to be for “beginners” — are written with programmers in mind. Not only am I not a programmer, but I’m also a more visual learner. I learn by watching and doing. That’s where online tutorials and live text editors come into play.

As learning to make the web has gained more mainstream appeal, the number of available tutorial websites has exploded, which muddles the playing field a bit. They’re not perfect, but online tutorials are a highly-accessible way to get started. Not all are created equally so the following is a brief breakdown of some that I found helpful:

Video only

Lynda.com

Lynda.com began teaching people how to program via video tutorials in a pre-just-search-YouTube-for-a-tutorial world, and when the idea of learning through video itself was pretty novel. And it was one of the first sites I turned to before I could write a snippet of HTML. Over the years, their staff has grown to over 100 “educators, authors, and recognized authorities” in the fields of not only web design, but graphic design, video, photography, audio and more, and they offer more than 100,000(!) tutorials in all. Certainly worth the price of admission, if you can swing it.

Treehouse

Treehouse’s mission is to “bring affordable technology education to people everywhere, in order to help them achieve their dreams and change the world.” Changing the world sounds like a modest goal, but its become commonplace for sites like these to glorify coding to such an extent that you almost feel guilty not learning how to do it. The hard work and persistence involved in learning these languages is sometimes obscured by the idea that a programming career involves mostly riding around on scooters or jamming out in isolated soundbooths during work hours (take this widely popular video from Code.org, for example).

Still, Treehouse covers all of the major programming languages as well as Android and iOS development, and also provides project-based tutorials such as building a simple Ruby on Rails application or iPhone app. They utilize a badge system to keep users motivated, there’s forum with helpful moderators and experienced users willing to answer questions and they recently added a regularly updated job board. Plus, customer service is top-notch, as I’ve never gone more than 24 hours without a receiving a response to inquires.

Learn by doing

If you’re looking for a more hands-on approach, there are certain websites that offer live text editors that allow you to copy and tinker with what you’re learning, and view results in real time.

Codecademy

If there’s one tutorial site you’re already familiar with, it’s probably Codeacademy. Founded in 2011, it pioneered a more interactive method to teaching that was revolutionary at the time. You don’t just watch others input lines of code on a screen. You become the inputter.

This method of teaching is an excellent idea in theory and quite helpful in a vacuum, however, that’s what learning via Codeacademy is — learning to program within the confines of the instructions you’ve been given, making it a tool that’s far more effective when paired with a book or class. Also, be warned: Their Q&A forum is a mess. It’s constantly littered with confused users who get stuck on certain parts of lessons and can’t move onto the next one, and it’s not uncommon for modules to be buggy.

Mozilla Thimble

Similar to Codecademy in that you can view your results on a split-screen page, Thimble is another tool that’s pretty good for getting started. There’s no actual instruction, though, it’s merely a static text editor on a page. The difference is that it’s a dedicated page with more room to work with, and it allows users to publish finished web pages right from the site. JSFiddle and CodePen are similar resources, and are great for providing links to your work in forums so others can view your code remotely rather than copy and pasting straight from your editor.

Thimble is just one of Mozilla’s kit of Webmaker tools, which also includes timeline-based video editing software called Popcorn Maker, an app written entirely in web standards that allows non-programmers to create dynamic videos, or edit their current ones, using a host of overlays and web-based sources. For instance, you can embed text, images, pop-ups featuring background information about what’s happening in the video, pull quotes from Twitter or Wikipedia or include a live shot of a Google Map. A lot of what can be done is Javascript-based, so it acts as a nice primer for those interested in learning the language.

Journalism-focused

While the above sites take an “anybody can (and should) learn to code,” approach to web development, other resources are emerging that specifically cater to the aspiring code-savvy journalist.

Code with me

Code With Me, co-founded by two Medill alums - New York Times graphics editor Tom Giratikanon and ProPublica news apps developer Sisi Wei - runs two-day workshops in major U.S. cities and promises to “help journalists overcome their fear of code.” Knight Lab sponsored their second workshop in Miami, and the journalists in the area have since started their own Hacks/Hackers chapter and have been hosting weekly open hack nights with the Code For Miami Brigade at one of the city's co-working spaces called The LAB Miami.

For Journalism

For Journalism, a Kickstarter-funded resource, appears to be a promising offering aimed at the “mid-career journalist.” It also features workshops as well as “semester”-long courses (one will be taught by Medill’s own Michelle Minkoff) with innovative topics I’ve yet to see on other sites, like Cybersecurity, Data Science and Statistics and DevOps, as well as many of the usual suspects (Javascript, Ruby, responsive design). Some course outlines are already available on GitHub, and they occasionally post to Twitter with updates about offerings and launch dates (expect the first content to be available in the coming weeks).

A project-based approach to learning

“I think one thing I realized after doing a lot of online tutorials and not really getting it, is that it takes actually making something, even if its small, to really learn anything about coding,” Groeger said. “And it takes longer and is sometimes frustrating, but struggling with a real project is when you really learn.”

Don’t forget YouTube

Let’s face it - learning to make things on the internet can be an expensive venture, with some of the more popular video tut sites asking upwards of $400/year for its services. But it doesn’t have to be. Many people fall into the trap of believing the more they spend, the more they’ll learn (osmosis via credit card). However, there’s an ever-growing library of free tutorials available on YouTube, and it’s a far safer approach if you’re not ready to jump in head first. It may take a some hunting to find a reliable resource, but if you’re okay with a bit less structure, go forth and search, because the videos you’re looking for are probably out there (for a primer in what technologies to learn first, check out this post by Emily Ferber).

However you choose to learn how to make the web, don’t be afraid to ask questions along the way (you will have many). Stackoverflow has emerged as the anointed go-to Q&A outlet because it discourages superfluous discussion, asking users instead to focus on specific questions they’ve encountered. It utilizes a Reddit-esque up-voting system where the best answers to each question rise to the top. And of course, Google makes for a useful companion too.

Sifting through the available options should you choose to traverse down the path to better understand the interwebs can be tricky, if not stiflingly overwhelming business. And while there’s no “wrong” choice, getting started is typically the hardest part. Pressing “play” is an excellent place to begin.