Intro to Coding Interactives Spring 2017

Course Objective

This is a class that teaches students how to build multimedia web packages for both mobile and desktop. Students will construct web presentations that combine multiple media forms, and design a longform story in a way that connects each piece into a cohesive narrative structure. Students will learn both the technical skills for building web packages — HTML, CSS and jQuery — as well as design/journalistic concepts for presenting content on different devices, with emphasis on how each medium influences the content.

Technical topics covered in this course include: Using the command line (terminal), RegEx, HTML, CSS, JQuery (entry-level JavaScript), and CSS frameworks like BootStrap.

This is a production class where students will have to build a news package on a real news story they reported on.


The following assignments are listed in the course schedule:

  • Two homework assignments implementing lessons taught in class.
  • Three quizzes (practice quizzes will be given for study)
  • A mid-term assignment to build a sample web project based on tutorial material.
  • A final project to build a web-package based on a real story.

Assignments/Grading Procedures

There will be two assignments due in class: a mid-term and final project

Class participation/Homework Assignments/Quizzes20%
Final Project35%

Class Meeting Times

Class meets on Thursdays 10:30am—12:30pm in the Upper Newsroom of North Gate Hall (room 106). Many times class will end early based on the subject being taught on that week, but students should plan the schedules around the full two hours in order to workshop projects after the main lecture portion of class.


Jan 26
Class overview and HTML refresher — An overview of how the class is structured followed by a brief refresher lesson of what was learned in Web Skills. A study into Chome's developer tools.
Feb 2
More HTML Markup — Class will cover all the HTML tags left off from Web Skills, including some newer HTML5 ones. We will also demystify several technologies and acronyms.
Feb 9
Learning the Terminal — Class will learn about the command-line interface and how to navigate around the computer using the Terminal program. Also, a tutorial on Regular Expressions (RegEx).
Feb 16
Intro to CSS — Class will cover Cascading Style Sheets, including how to select the various HTML tags within a document using classes, ids and type selectors. We will then explore additional selector types and learn to use Chrome's web inspector.
Feb 23
CSS Boxes, Lists, Tables, and Forms — 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.
Mar 2
Guest Speaker — We will have a guest speaker talk about coding.
Mar 9
CSS Layout — Finally, class will cover basic page layout. This will include positioning, floats, and styling a basic web page from the ground-up.
Mar 16
CSS for mobile — Class will cover media queries, viewports, and all the many quirks in doing mobile web design; responsive website design.
Mar 23
Web Design Concepts — Class will talk design. It will cover typography, color theory, CRAP (contrast, repetition, alignment, proximity), a modified Maslow’s hierarchy triangle, mood boards and storyboards.
Mar 30
Spring Break — No class.
Apr 6
Building a Boot Strap Website — This class will cover a soup to nuts lesson on building a Bootstrap website.
Apr 13
Introduction to jQuery Part 1 — Class will cover basic jQuery selections and DOM manipulation.
Apr 20
Introduction to jQuery Part 2 — Class will cover basic jQuery selections and DOM manipulation.
Apr 27
CSS3 Animation, video, and audio — Animation can be done using only CSS. But paired with jQuery, it can be a powerful tool. Class will also cover how to control video and audio using jQuery and CSS.
May 4
Presentation of Stories — Students will present stories to the entire school