For students of https://projects.propublica.org/graphics/ida-propublica-data-institute

Friday, July 22

Exercises

• Inspecting Sisi's website!, view source
• Warm up:
• 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
• HTML exercise: Copy and paste the code on this page into a file called `supreme-court.html` on your computer and follow the instructions inside to format the page.
• CSS exercise: Now that your Supreme Court article has HTML, make a new `style.css` file, link it up to your HTML, and try to do the following:
• 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

• Commenting in HTML and CSS
• 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!

Without Code In-Class Demos

• Visualping.io
• Using Google Sheet's import functions, specifically, "importHTML"
• Scraper Chrome Extension

Resource for learning on your own

• First Web Scraper — this step-by-step tutorial covers not only how to write your own web scraper from scratch in Python, but how to install Python, how to write basic code (that you'll use to build your scraper) and also how to actually build the final scraper. I highly recommend that coordinate with someone else who is interested in learning, so you can work on it together. To give you a sense of how long it takes, during the 2-week Data Institute we spend 2 entire days going through this tutorial. So there's no need to rush!

Thursday, July 21

Lecture

• Design for Journalists

Exercises

• Align This!
• Resume Redesign

Exercises

• Making a website

Lecture

• An intro to charts and data visualization

In-Class Demos

• From data to charts in Data Wrapper

Wednesday, July 20

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>
• Let's look up together:
  • <img>
  • <a>
• Can you figure out:
  • How do you make a bulleted list?

Exercises

• Can you fix this broken code?

In-Class Demos

• How to create your first CSS file
• Shortcut to linking to your CSS file
• How CSS styles work

Copy and paste this code and follow the instructions inside to format the page.

Tuesday, July 19

Exercise: Rural Hosptial Closures

Data from the Sheps Center, and a version already in Google Sheets for you.

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
• Pivot table tutorial
• Video on how to split text to columns in Google Sheets.
• A currated list of great functions in Google Sheets
• Open Refine tutorial slides (We don't have time to cover this tool in class, but it's a good one! It's helpful for cleaning messy data.)
• Tabula: screencast demo (We don't have time to cover this either, but it's also a great tool. Helps turn PDFs into spreadsheets.)

Monday, July 18

Resources In our "advanced spreadsheets" section, we talked about splitting text to columns, making pivot tables, and using formulas. Here is a writeup of what we did, with links to other online resources.

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 (Open Refine's page, 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.