Intro to Coding News Packages Spring 2018

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 — and learn how to design a longform story in a way that connects each piece 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 medium can offer.

Particular focus will be paid to a story's visual design, how it's consumed, from which device it's consumed, and in what context it's consumed. All of these factors influence the way a story is told, just as they did with a legacy medium like radio, which factored in distracted listeners in a car. Or a newspaper, which had scannable headlines and "jumps" to the inside of the paper. Or a magazine's narrative arc, which considers passing time in a doctor's office or an airport.

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 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 him/herself 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 Thursdays 10:00am—12:00pm in the Upper Newsroom of North Gate Hall (room 106).

Jan 16
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 23
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
Homework: Continue submitting story pitches on the shared Google Doc.
Jan 30
Story Pitches — We will use this class to discuss the story pitches people submitted from the homework. We’ll take turns reviewing each story pitch, and see who is on board with joining each team. We’ll use the remaining time in class for discussion.
Feb 6
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: Create a web page using HTML and CSS of your favorite recipe. See the bottom of class page for additional instructions.
Feb 13
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: Finish recipe assignment, due next week.
Feb 20
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.
Feb 27
Kara Swisher Event — This class is reserved for attending the Kara Swisher event.
Mar 6
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 13
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.
Mar 20
Introduction to jQuery — Introduction to jQuery for manipulating content after page load. Make a basic button handler. Go over Chrome Inspector.
Mar 27
Spring Break — No class this week.
Apr 3
Web Design and Story Check-in — Each group will present their progress, design mock-ups and get feedback from the rest of the class.
Apr 10
GitHub — Class will cover how to use Github, which can be used to publish your stories. This is where you should start to build your final project.
Apr 17
Amazon Web Services (AWS) — A lesson on how to use Amazon Web Services for hosting static websites.
Apr 24
Workshop Stories — Time in class to work with the instructor on the design and production of stories.
May 1
Presentation of Stories — Students will present stories to the school in the library.

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.