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

Here’s a fact: The occupation of newspaper reporter was recently rated by one career services website as the No. 1 worst job of 2013. With a negative six percent projected job growth and a painfully low median salary, it's become clear that the concept the “traditional” journalist is a dying breed. As a student myself, this translates into, “If you leave j-school with only an improved comprehension on how to write words on a page, you’re in trouble.”

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

www.lynda.com
$25/month, $250/year

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

www.TeamTreehouse.com
“Silver” plan: $25/mo., $250/yr. “Gold” plan: $49/mo., $490/yr.
Provide proof of university enrollment $9/mo.

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

www.codecademy.com
Free

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

thimble.webmaker.org
Free

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

@codewithme
$85 for two-day workshop

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

@forjournalism
Cost TBD

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

As valuable as these online learning tools can be, there’s a strong feeling within the journalism-tech, hive-mind community that tutorials can only take you so far. I spoke with Lena Groeger, a self-taught designer and science journalist at ProPublica, and she emphasized the importance of having a specific goal or project in mind.

“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.

Latest Posts

  • Building a Community for VR and AR Storytelling

    In 2016 we founded the Device Lab to provide a hub for the exploration of AR/VR storytelling on campus. In addition to providing access to these technologies for Medill and the wider Northwestern community, we’ve also pursued a wide variety of research and experimental content development projects. We’ve built WebVR timelines of feminist history and looked into the inner workings of ambisonic audio. We’ve built virtual coral reefs and prototyped an AR experience setting interviews...

    Continue Reading

  • A Brief Introduction to NewsgamesCan video games be used to tell the news?

    When the Financial Times released The Uber Game in 2017, the game immediately gained widespread popularity with more than 360,000 visits, rising up the ranks as the paper’s most popular interactive piece of the year. David Blood, the game’s lead developer, said that the average time spent on the page was about 20 minutes, which was substantially longer than what most Financial Times interactives tend to receive, according to Blood. The Uber Game was so successful that the Financial...

    Continue Reading

  • With the 25th CAR Conference upon us, let’s recall the first oneWhen the Web was young, data journalism pioneers gathered in Raleigh

    For a few days in October 1993, if you were interested in journalism and technology, Raleigh, North Carolina was the place you had to be. The first Computer-Assisted Reporting Conference offered by Investigative Reporters & Editors brought more than 400 journalists to Raleigh for 3½ days of panels, demos and hands-on lessons in how to use computers to find stories in data. That seminal event will be commemorated this week at the 25th CAR Conference, which...

    Continue Reading

  • Prototyping Augmented Reality

    Something that really frustrates me is that, while I’m excited about the potential AR has for storytelling, I don’t feel like I have really great AR experiences that I can point people to. We know that AR is great for taking a selfie with a Pikachu and it’s pretty good at measuring spaces (as long as your room is really well lit and your phone is fully charged) but beyond that, we’re really still figuring...

    Continue Reading

  • Capturing the Soundfield: Recording Ambisonics for VR

    When building experiences in virtual reality we’re confronted with the challenge of mimicking how sounds hit us in the real world from all directions. One useful tool for us to attempt this mimicry is called a soundfield microphone. We tested one of these microphones to explore how audio plays into building immersive experiences for virtual reality. Approaching ambisonics with the soundfield microphone has become popular in development for VR particularly for 360 videos. With it,...

    Continue Reading

  • Audience Engagement and Onboarding with Hearken Auditing the News Resurrecting History for VR Civic Engagement with City Bureau Automated Fact Checking Conversational Interface for News Creative Co-Author Crowdsourcing for Journalism Environmental Reporting with Sensors Augmented Reality Visualizations Exploring Data Visualization in VR Fact Flow Storytelling with GIFs Historical Census Data Information Spaces in AR/VR Contrasting Forms Of Interactive 3D Storytelling Interactive Audio Juxtapose Legislator Tracker Storytelling with Augmented Reality Music Magazine Navigating Virtual Reality Open Data Reporter Oscillations Personalize My Story Photo Bingo Photojournalism in 3D for VR and Beyond Podcast Discoverability Privacy Mirror Projection Mapping ProPublica Illinois Rethinking Election Coverage SensorGrid API and Dashboard Sidebar Smarter News Exploring Software Defined Radio Story for You Storyline: Charts that tell stories. Storytelling Layers on 360 Video Talking to Data Visual Recipes Watch Me Work Writing and Designing for Chatbots
  • Prototyping Spatial Audio for Movement Art

    One of Oscillations’ technical goals for this quarter’s Knight Lab Studio class was an exploration of spatial audio. Spatial audio is sound that exists in three dimensions. It is a perfect complement to 360 video, because sound sources can be localized to certain parts of the video. Oscillations is especially interested in using spatial audio to enhance the neuroscientific principles of audiovisual synchrony that they aim to emphasize in their productions. Existing work in spatial......

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More