Fundamentals of Multimedia Storytelling Fall 2019

Video, audio and text aren't the only storytelling devices available to journalists. This course will teach you how to think about interactive storytelling and will give you the fundamental skills to do so. You will learn to code with HTML and CSS, how to wrangle data with Excel and how to visualize data with charts and graphs.

TC McCarthy | [email protected] | 5:30 - 8:20 Thu | Room 330


| Download this calendar

Class 1 - Intro

Welcome! Intros and goals

Code Academy: Intro to HTML

In Code Academy's Introduction to HTML course complete the following sections:

Learn HTML: Elements and Structure

Learn HTML: Tables

HTML/CSS Icon Graphic

Create a graphic related to a news story you are working on.

  • Your graphic should include the following elements:
    • Headline.
    • Dateline and byline.
    • At least four icons that represent some important facet of your story.
    • Write a short paragraph that conveys an important data point attached to each icon as it relates to the news story.
    • Build the graphic using ONLY HTML and CSS.
    • Use pre-designed, royalty-free icons (font awesome!).
    • Include a link to your data at the bottom of your page.
    • You MUST use the design principles we’ve discussed — pay attention to font, hierarchy, spacing and color.

Class 2 - Intro to HTML

HTML powers every webpage you use.

Find 5 news sites you find appealing

Find 5 news sites you find appealing and write a paragraph about what you like and dislike about the site's design and user experience.


Class 3 - Design principles

Think about the best visual experience for your users before you code!

Learn CSS: Selectors and Visual Rules

Complete Part 1 of Code Academy's CSS lesson:

CSS Setup and Selectors 

CSS Visual Rules

Learn CSS: The Box Model & CSS Display and Positioning

Complete Part 2 of Code Academy's CSS lesson

The Box Model 

CSS Display and Positioning.

Class 4 - Intro to CSS

Colors, sizes, spaces, fonts -- all of the things that make your site look good are powered by CSS

Complete your about me page

Below is the criteria for the about me page:

  • One <h1> tag
  • At least one <h2> tag in a proper section.
  • At least one <h3> tag in a proper section.
  • One Unordered List or One Ordered List.
  • A brief bio that uses at least four <p> tags.
  • At least one <img> tag.
  • At least two <a> tags.

Build a CSS robot

General Assembly's DASH online learning program has a great exercise to help you learn the relationship between CSS and HTML. Go to, set up an account and then do Project 4: Build a CSS Robot. You do not need to do projects 1-3. This is a fun but lengthy exercise. Please take a screen grab of the completed product (of your entire screen) when you're done and email it to me along with the HTML from the exercise. It's ok if the HTML doesn't work outside of DASH, I just need it for review. The metadata of the screen grab and other elements will be inspected to prevent plagiarism.

Class 5 - Finding the story in the data

Data tells a story -- sometimes it's on reporters to find out what that is.

Class 6 - Finding the story in the data, part II

Class 7 - Maps

Class 8 - Data visualizations

Pivot tables, charts and graphs -- some of the core visualizations we can tap into to help our users understand the more complicated points of our stories.

Class 9 - Data visualizations, part 2

Class 10 - Free tools to help you visualize

There are some great platforms and libraries that will help you churn out a visualization in minutes. Even if it's not refined, it can still help journalists with analysis.


Class 11 - Mapping workshop

Class 12 - Workshop

Class 13 - Workshop

Class 14 - Final presentations



If circumstances prevent your attending class, the instructor must be informed by phone or email on or before the day of class or within 24 hours afterward.

Deadlines in Journalism Matter

You must meet Deadlines by filing your assignments no later than due date and time. Missing a deadline results in an automatic half-grade reduction. Your grade will continue to drop by half a grade for each subsequent day after the deadline until you file your assignment. Plan ahead and remember that in journalism: done is better than perfect. It will always be better to hand in something than nothing. If you are having trouble with your assignment let me know immediately, do not wait until it is too late.


It is a serious ethical violation to take any material created by another person and represent it as your own original work. Any such plagiarism will result in serious disciplinary action, including possible dismissal from the CUNY J-School. Plagiarism may involve copying text from a book or magazine without attributing the source, or lifting words, photographs, videos, or other materials from the Internet and attempting to pass them off as your own. Student work may be analyzed electronically for plagiarized content. Please use comments in your HTML/CSS/JS to attribute code snippets you have found on support forums or elsewhere. For example:

Sample markup happens here


You can email me at [email protected]. The class also has a slack team you must sign up for using your email address.


Final interactive