For students of https://projects.propublica.org/graphics/ida-propublica-data-institute
Here are all of the materials we used to teach the 2021 Data Institute: slides, exercises, links, and homework.
Want to use our slides? Our teaching materials fall under the same Creative Commons license we use across our site. Get more details here.
Friday, July 16
In-Class Demos
- How to create your first CSS file
- Shortcut to linking to your CSS file
- How CSS styles work
Exercises
- Using your practice HTML file from before, add CSS styles to it such you change the:
- color
- font-family
- font-size
- On your own, look up how to do the following in CSS, and add it to your HTML file as well:
- underline text
- bold text
- italicize text
- Going back to the Supreme Court article you formatted earlier, do the following using CSS:
- Make the main headline dark red.
- Use the font family "Georgia" for the main headline and the subheadline.
- Center the text of the main headline and the subheadline.
- Give the paragraphs a line height of 19 pixels.
- Remove the underline from the links.
- Make the "Related articles" label all uppercase.
- Bonus: Make an underline appear when you hover over a link.
In-Class Demos
- How to write your own CSS Class
- How CSS deals with conflict
Only for those of you who have time and are looking for an extra challenge. This is 100% optional because we will not be talking about this in class tomorrow. Instead, if you do it, I'll give you an individual response via email or Slack.
- Save this HTML onto your computer. Link to a new CSS file that you create. Write CSS to make the end result look like this image. You may only write CSS. You cannot edit the HTML file. When you're done, send me your files or send me the links of your files on Github and I'll give you feedback on how it went!
Review
- Making a Website with Cards
♠️
Thursday, July 15
In-Class Demos
- What coding languages have you heard of?
- Using the web inspector
In-Class Demos
- How the Internet passes websites around
- What HTML, CSS and Javascript contribute to a webpage
In-Class Demos
- How to create your first HTML file
- Shortcut to the basic HTML template
- How to use:
<h1><h2><h3><p><img><a><ul>
Exercises
- Can you fix this broken code?
Copy and paste this code and follow the instructions inside to format the page.
Wednesday, July 14
Lecture
Exercises
Exercises
Lecture
In-Class Demos
Tuesday, July 13
Exercises
- Evaluating data with PPP loan applications
- Analyzing one variable with school reportcards
Resources
- Numbers in the Newsroom: Using Math and Statistics in News by Sarah Cohen (You should have received a copy!)
- Precision Journalism: A Reporter's Introduction to Social Science Methods by Philip Meyer
- Google Sheets Tutorials
No Homework!
Monday, July 12
Exercises
- Learning how to sort with PPP loan applications
- String Functions: We combined street, city and state into one address using the Ampersand operator and the UPPER function in google sheets. Here is a writeup of the formula we used.
- Pivot Tables to summarize your data
- Tabula: screencast demo
No Homework!
Before class begins on Monday, you'll need to have signed up for the following accounts, and installed the following software on your computer.
ACCOUNTS
Go to each of these links and sign up for an account:
- Github.com
After signing up, make sure to confirm your e-mail address too, otherwise you won't be able to use the account. Github is the site we'll be using to share code and teach you how to publish your own webiste. - Google.com
You probably already have Google account (if you have a gmail account, you're good). We'll be using Google Spreadsheets the most, which you'll have access to from any Google account. - Datawrapper
A great website for creating data visualizations without needing to code. - Codepen
We'll be using this website to share your in-class exercises, so your instructor can check your work.
SOFTWARE
Go to each link and download the app onto your computer:
- Google Chrome
Everything we'll be teaching you about previewing and testing code will work in other browsers like Firefox, Safari, and Internet Explorer, but each browser designs how it works a little differently. Since we'll be demoing everything in Chrome, it'll be easiest for you to follow along. - Slack (Mac, Windows)
All of you should have received an invite to join the Data Institute Slack. If you've never used Slack before, it's basically a place where you can message with a group of people. You need both an account (which you should be able to set up based on your email invitation) and we want you to download the desktop app (which you can do by clicking on the Mac or Windows link above). - Sublime Text (Mac, Windows)
This app is where we're going to be writing all our code. It's completely free, and will occassionally ask you if you'd like to pay, but payment is not required. For both beginners and experts, Sublime is one of the best apps for coding.
OPTIONAL
We won't be teaching these tools during class, but we highly recommend them and we want you to have easy access to them in case you need them in the near future. Your instructors will also be providing demo videos for how to use some of these tools.
- Tabula (Mac, Windows)
Your best friend for when you have a huge stack of data tables in PDF format and need to turn it into actual data you can use. - Open Refine (Mac, Windows)
A great tool to help you clean data (ex: it can recognize that "Saint Paul" and "St. Paul" maybe refer to the same city in Minnesota)- If you're on a Mac, and you get the error that Google/Open Refine is damaged, follow these instructions.