Though more than a thousand people have applied to ProPublica’s Data Institute, we’ve only been able to accept about 24 in the two years it’s been running. Faced with such a high demand, we’ve looked for ways to help more journalists trying to learn data journalism and interactive database design. In past years, we’ve put our slides and homework assignments online (here’s 2016 and 2017 ), but we also know how valuable it is to be able to see and hear what’s happening in the classroom.
Data Institute Overview
Watch the Class of 2017 and ProPublicans talk about how the Institute teaches data journalism.
So this year, we recorded videos of five of the lessons from the Data Institute and are releasing them publicly today. You can watch them here:
These five lessons, which took place over the summer, are from the coding portion of the Institute. They introduce basic concepts in programming and how to build websites.
We’re also releasing one of our most popular exercises — an educational game.
Lesson 1: Introduction to Code
When it comes to coding for journalism, I get asked this question a lot by people who are just starting out: What programming languages should I learn?
I always answer the question with one of my own: What do you hope to accomplish?
When it comes to teaching somebody how to program, our first job is to demystify and to help the student make good choices about what they should be learning. The most helpful lesson — and one that is rarely taught, even to advanced students — is one that describes the entire lay of the land. With so much programming jargon, it’s hard for beginners to figure out which coding languages, open source tools, communities and libraries will be able to help them the most. That’s where we come in.
Introduction to Code
Instructor Sisi Wei teaches code, or “how to talk to computers.”
During the Intro to Code lesson, I introduce the concept of coding as a whole, but the bulk of the time is me at a white board, asking every person in the room to shout out every word they think might relate to programming or data journalism.
As they say the words, I group them loosely on the board, and when they run out of terms, I prompt them with new ones: “If you’ve heard the term Python, has anyone heard the term Django?”
Once I know we’ve collected terms from all the major areas: “front-end,” “back-end,” “databases,” “mapping,” “frameworks,” and whatever else the students have come up with, we usually end up with something like this:
We talk about every category of terms that’s on the board and the students are free to add more as we go along. If I don’t know a term they bring up, I write it off to the side and get back to the class later about what it means. Most importantly, I try to make sure to explain more than just the terms themselves, but also what they’re useful for and why a journalist would want to learn something like HTML or R.
Students have routinely told us that this interactive exercise has helped them finally understand how the puzzle pieces fit together.
Lesson 2: How Websites Work
How Websites Work
Sisi shows the students how a website comes to be.
Right after students learn about all the different coding languages, we shift to talking about how websites are built. We break down how a web browser works and show students how HTML, CSS and JS files are like Ikea-style instruction manuals for a piece of software called a web browser — instructions that tell it how to draw what the page should look like. To drive home how literal computers can be, we do this as a real-world exercise: Everyone in the class helps one student draw a website that he/she can’t see onto the whiteboard.
Lessons 3, 4 and 5: HTML, Basic CSS and CSS Classes
The first three lessons in our HTML and CSS curriculum are short lectures, followed by exercises that help students solidify what they’ve learned.
HTML
Watch the Data Institute class on basic HTML.
Basic CSS
Watch the Data Institute class on basic CSS.
CSS Classes
Watch the Data Institute class on writing CSS.
Exercise: Paper Code
Our most popular exercise at the Data Institute isn’t in the videos, but we’re making it possible to use it outside the program. To help students review the HTML and CSS they’ve learned the previous day, we start off the morning with a review exercise completely made of physical puzzle pieces. Originally created by Tom Giratikanon and me for a code training program we called Code With Me, it’s called Paper Code.
In groups of two or four, students are given a deck of mini playing cards. Each card has a little snippet of HTML or CSS on it, such as <img> or </p> and on a large table or desk (or the floor) students are asked to organize the cards so that the code would create a functional website. Every single card must be used and while some cards must go in the same order no matter what, others are more flexible, and students can get creative about the “website” they’re creating.
The most illuminating part for the students, and most useful for us as teachers, is when students slow down and realize which cards they don’t know how to use. That tells any instructor walking around which concepts need to be reviewed. When all the groups say they’re done, we go over the solutions as a class.
This exercise also allows students to stop worrying about whether they’ve memorized HTML tags and instead focus on whether they understand the basics. If you open a new tag, you need to close it; <img> tags need a source attribute, etc. At the end of the day, every obstacle the students run into helps them see what concepts they don't yet understand, and we review those concepts together.
Plus, it’s just a fun game.
My favorite puzzle! Beautiful work with @yezyes at ProPublica's #datainstitute. pic.twitter.com/yIl9Z4fZwO
— April Ehrlich (@AprilEhrlich) June 13, 2017
If you’re interested in running this exercise yourself, feel free to make your own using a sharpie and index cards (like I did when doing this for the first time), or you can buy them straight from ProPublica. (Update: Sold out! If you’d like to get on the waiting list for reprints, email Celeste LeCompte.)
Cynthia Gordy, ProPublica’s director of marketing, organized and supervised the video production, and Matt McNevin at Performedia filmed us. The Data Institute is organized by Lena Groeger and me, and is taught by the News Apps and Data team here at ProPublica.
We’ve learned a lot from running the Data Institute for two years and are currently figuring out where we want to go with the program next. In the meantime, we hope that these videos, the Paper Code exercise and the rest of the ProPublica Data Institute curriculum are helpful to teachers and mentors, as well as the beginners out there who are learning to code, use data or design stories online.
