Intro to Coding News Packages Spring 2019

Story Assignments

Story Slug Students
TRIBAL CASINO Laurence, Christian
HAYWARD FAULT Christi, Gisela, Wesaam
MILPITAS SMELL Newsha, Barbara, Bo
FINDING HOME Carlos, Drew, Amy
SFUSD Teachers Aksaule, Jennifer, Orion
CRAB Nick, Maria
ARMS SALES Ali, Anjali, Wessam

Course Objective

This is a class that teaches students how to report, produce, and construct multifaceted news packages for both mobile and desktop. Students will work in teams to pitch and report on in-depth stories using a variety of media — text, photos, video, graphics, interactives. They will learn how to design a longform story in a way that connects all pieces of of media into a cohesive narrative structure that is optimized for web, mobile, and social consumption. Focus will be on both design of the project, as well as research skills for reporting.

A major component of this course includes learning how to code HTML, CSS, entry-level JavaScript, RegEx, and Bootstrap. These are used both in designing the package, as well as understanding data research methods for reporting the stories.

This is a forward-thinking course. We aim to foster an environment that encourages experimentation and innovative thinking. Come prepared with big ideas, and plenty of ambition. This is your opportunity to try new things, and make your mark on a burgeoning area of the industry.

Course Outcomes

Students will learn about storytelling through digital media. They will learn how a story's structure differs from legacy formats like. print, radio, and TV, and understand how to harness new methods that only a digital platform can offer.

Particular focus will be paid to a story's visual design, how it's consumed, from which device it's consumed, and the context which it's consumed. All of these factors influence the way a story is told.

Students will learn basic web coding skills, like HTML, CSS, and JQuery. They will learn how to conceive and construct a story from scratch, relying on only a few tools. Most of these skills are quickly becoming antiquated in normal practice, but are still essential for setting a foundation of understanding how the web works or advancing to more sophisticated tools.

Alums of this class have gone on to become web developers, multimedia producers, and digital editors at national news organizations.

In this course students will:

  • Demonstrate a firm understanding of methods, skills, tools and systems used in the interdisciplinary construction of digital stories and reports.
  • Demonstrate the ability to choose appropriate technologies to communicate about topics and questions and to formulate a project that leverages their understandings of emerging digital platforms and software.
  • Communicate effectively, through visual and oral communication.
  • Demonstrate understanding of the interconnections of knowledge production within and across disciplines and digital forms.
  • Learn how to build web pages for the good of humanity.

Attendance Policy

Two unexcused absence from class will drop you one letter grade; three unexcused absences will drop you two letter grades; a fourth unexcused absence will result in an F. Excused absences will only be permitted in extraordinary circumstances. Regardless of the reason for an absence, students will be responsible for any assignments due and for learning material covered in class. As quoted by UC Berkeley guidelines on absences:

Students are responsible for material covered during missed classes whether or not they have been formally excused; therefore it is the student’s responsibility to inform themselves about the material is not the instructor’s or the GSI’s responsibility to tutor students in missed material. For this reason it is recommended that students absent from class for any reason make timely contact with several other students in the class to arrange for thorough briefing on the material they missed.


Assignments are listed in the course schedule, and include the following three types of assignments.

  • Story pitch session
  • In-class assignments
  • A final project to build a web-package based on a reported story

Grading Policy

Grades for this course will be divided into the following criteria. All grading, attendance, and assignments will be done through bCourses.

Class participation/Homework Assignments/Quizzes20%
Final Project60%

Class Meeting Times

Class meets on Tuesdays 9:30am—12:00pm in the Lower Newsroom of North Gate Hall (room 106). Class will generally run for one-and-a-half to two hours on most weeks, with the second hour devoted to workshopping and lab. However, there may be a few class sessions were we run a full two hours.

Jan 22
Class overview and anatomy of a multimedia story — An overview the class, syllabus, and expectations. This will be followed by a lecture on the anatomy of online multimedia packages. We’ll look at examples of previous story packages produced in this class.
Homework: Submit story pitches for class on this Google Doc
Jan 29
Story Pitch Session — During this class session, we will initiate our first round of story pitches. Please add your story pitches to the Google Doc before this class.
Feb 5
Guest Speaker Josh Williams (Initial Story Pitches) — Guest speaker, Josh Williams, an interactive/multimedia producer from the New York Times, will be presenting. This will be followed by a pitch session to bounce story ideas off Josh and get his input.
Feb 12
Introduction to HTML — This is our first introduction to HTML. We will do an activity, and build a basic webpage.
Homework: Submit the website you built in today's class on bCourses (Due before next class).
Homework: Take the study quiz on HTML (Due before next class).
Feb 19
Introduction to CSS — This class will cover Cascading Style Sheets, including how to select HTML tags in a document using classes, ids and type selectors. We will build a webpage in class.
Homework: Turn in recipe assignment on bCourses (due before next class).
Homework: Complete quiz on CSS basics (due before next class).
Feb 26
CSS Part 2 — Lesson will cover more in-depth CSS lessons on styling a web page, understanding the box model better, certain layout rules and styling properties.
Homework: Turn in the in-class exercise on bCourses.
Mar 5
CSS Part 3 — Class will cover how to use CSS for changing the look of boxes, lists, tables, and forms. We will talk about prefixes and pseudo-selectors, layout items, and mobile queries.
Homework: Design a web form to look like one of the images given.
Mar 12
Bootstrap Part 1 — We will dive into the Bootstrap 4 framework. This lesson will cover various CSS helper classes, the grid, columns, and markup patterns.
Homework: Design a mockup of a pretend story using the information given in class.
Mar 19
Web Design and Story Check-in — Each group will present their progress, design mock-ups and get feedback from the rest of the class.
Homework: Create a moodboard and mock-up of your final project. Pay special attention to C.R.A.P. principles.
Mar 26
Spring Break — No class this week.
Apr 2
Bootstrap Part 2 — The next part of the Bootstrap 4 framework. This lesson will cover various CSS helper classes, the grid, columns, and markup patterns.
Apr 9
Introduction to jQuery — Introduction to jQuery for manipulating content after page load. Make a basic button handler. Go over Chrome Inspector.
Apr 16
NPM and GitHub — Class will cover how to use Github, which can be used to publish your stories. We will then install NPM, and learn how to download the story template packages and run them on your computers. This is where you should start to build your final project.
Homework: Submit your Github Repository URL
Apr 23
Workshop Stories — Time in class to work with the instructor on the design and production of stories.
Apr 30
Workshop Stories — Time in class to work with the instructor on the design and production of stories.
May 7
Presentation of Stories — Students will present stories to the school in the lower newsroom.

Classroom Decorum Policy

Students must turn off the ringers on their cell phones before class begins. Students may not check e-mail, social media sites like Facebook, Twitter or other websites during the lecture portions of the class. Anyone caught visiting these sites will be publicly admonished, and will be given marks against their class participation grade at the discretion of the instructor.

Instructor Contact/Office Hours

Assistant Dean for Academics Jeremy Rue
Office Hours: Wednesday, 10:30 a.m. – 1pm.

Academic Dishonesty and Plagiarism

Students will abide by the Student Code of Conduct There is a zero-tolerance policy for work that is submitted without proper attribution and that constitutes plagiarism. If students are unsure about the expectations regarding the Student Code of Conduct, please seek advice from the instructors.