Week 1 – Review and Intro to Programming

July 10 Welcome to the class!

Why should you learn to code?


The World of Web Development


What do you want to learn? What do you already know? Fill out this form


  • FTP/Reclaim Hosting Review
    • Fetch – can download newest version from TXST Technology Resources.
    • FireFTP – Firefox extension
    • FileZilla – can download from TXST Technology Resources
    • Reclaim Hosting File Manager
  • Responsive Design Review

Responsive vs. Mobile Site vs. Mobile App



Spin up a quick Bootstrap site with one page. This is only an exercise, so you can pick any topic. You won’t be uploading it to the Web.

  • One page
  • Use navigation to different areas of the page.
  • Include several different sections:
    • Top section should have a dominant visual or carousel
    • One section that spans all columns
    • At least one section should have a background image.
    • One section should have three equal columns
    • One section should have two unequal columns.
    • A footer
  • Apply scroll-to-anchor and parallax scrolling scripts. I will review these methods in class on Tues, but try to get them to work on your own. You can find the custom.js.

Use any images you want, but you may need to size them appropriately in Photoshop. For this exercise, you can use greeking (fake text) for text. Get started at getbootstrap.com.

Watch HTML Forms Tutorial Videos on CodeActually.com. We will finish up Bootstrap and begin there tomorrow.

Read Code and Journalism Today

July 11

Bootstrap, continued. Finish up your Bootstrap exercise and review features.

HTML Forms – we’ll go over the elements to make an html form for text inputs, radio buttons, checkboxes and dropdowns. This is the foundation of a user interaction interface.


Make a well designed form for any topic you would like. Use any html/css features you need to create the well-designed form. Consider the data you would like to collect from the user. Use each of the form elements we discussed at least once in your form. The page you create with the form should include an intro and some explanatory text. Develop it in Bootstrap, putting it in the sample project from yesterday, in the larger of the two uneven columns.

Watch the JavaScript Tutorial: Intro to Programming


July 12

JavaScript – Intro to Programming Concepts – we will go through the tutorial, and you will do the exercises in class. Feel free to try them on your own ahead of time.


Review the Interactive JavaScript Tutorial on CodeActually.com


July 13
Interactive JavaScript

Review the Make An Interactive Quiz Tutorial


July 14

Take Quiz 1 on TRACS in class – this will cover HTML/CSS Review, Bootstrap, WordPress and Intro to Programming.  You will have 30 minutes to take the quiz once you start it. MC/T or F.

Document Object Model
Document Object Model Handout
What is the DOM? – CSS Tricks
What is the Document Object Model – W3C

Using the Chrome Developer Tools

Manipulate the DOM with JavaScript chart

Interactive Quiz Exercise

Work on your Project 1 Interactive Quiz. Develop an appropriate scoring method and any other interactivity you’d like to demonstrate in the Quiz. This can be a quiz that calculates or scores correct answers or it can be a Buzzfeed-style quiz where you provide different results based on the answers. Put some thought into the scoring and interactivity. Add any design elements to make this a well designed quiz. Upload this to a new subdomain.


Review the More Interactive Examples  (no video for this, just reference and code) tutorial on CodeActually.com. You will want to take a close look at the Buzzfeed Quiz examples, if you are doing a project of this nature.

Work on Interactive Quiz Project. Be ready to finish it in class on Monday.


Week 2 – More Advanced Programming 

July 17

More Interactive Examples – some of these techniques may help you with your Interactive Quiz project.

Complete Interactive Quiz Project – due by end of class – July 17

Data Journalism – Pinterest Data Viz examples


Research Assignment – find three professional data journalism projects and assess on storytelling, design and data. Write a paragraph or more on each project and then discuss how you will implement these best practices into your final project. You can find these projects in many places, including ProPublica, NY Times, Texas Tribune and more. You can do this in a Word document, save as a pdf and upload to the #datajournalism Slack channel. Due July 24.

Review Tutorial for Interactive Charting Example


July 18

Interactive Charting Example – this is a comprehensive example that demonstrates the power of several items we have covered in the class.

Assignments: Review Tutorial for Google Chart Examples


July 19

Making Interactive Charts with Google Charts

Assignments: Review Filtering Large Data Sets

Think about the type of final project you’d like to do for this class. The session will be over before we know it!  You will need to find a data source that has good data and has the potential to tell a story.  Write a Slack post about the type of data story you’d like to tell for the final project. Where is the data? Why is it interesting? What do you think you will find? What do you need to know to use it. This is due on Tues, July 25 in the #finaldata Slack channel.


July 20

Filtering Large Data Sets


July 21

  • Quiz 2 in class


Assignments: Review the JQuery tutorial on CodeActually.com.

Work on Project 2 – Interactive Charting Project – create a page that provides two interactive charts or maps and one table that filters a data set using a dropdown. Use your own data. This could contribute to the start of your final project.

Week 3 – Finding and Working with Data

July 24


Complete Project 2 Interactive Charting

July 25



July 26

Using Excel

Excel Handout



Basic Scraping with Google Sheets and Chrome Scraper Extension

Scraping with Python and Beautiful Soup


  • Watch API tutorial below.


July 27




July 28

  • Guest speaker Carolee Mitchell from data.world
  • Take Quiz 3 in class
  • Git/GitHub
  • Work on Data Analysis Project –  take the data you pulled from the Twitter API, associated with your final project. Analyze the data for frequency of terms and users (and anything else that is interesting). Create at least two visualizations to demonstrate trends in the data and include a description of the analysis. You will submit this analysis as a Slack post in the #twitterapi channel with images you created as screenshots from a spreadsheet or other (TagCrowd.com) program. Do at least two different kinds of analysis.

Agile Methodology for Development

Week 4 – More Advanced Applications

July 31

Complete Data Analysis Project

News Application Exercise

Assignment: Review d3 exercises

Aug. 1

Chloropeth/Shape File Mapping with Google Fusion Tables

Introduction to d3

Aug. 2

Work on Final Projects

Aug. 3

Work on Final Projects

Aug. 4

Work on Final Projects

Future Concepts – ways you can continue to learn to code


Aug. 7-8

Final Project – Use more advanced data concepts in an interactive presentation. Find some interesting data and figure out an interactive way to present it on a website. A story (to include text and that can include interviews, images, multimedia) should accompany. Data must be interactive (manipulate the DOM), which can include ways to sort and filter data or present it interactively with charts. Site should have both an interactive table generated by json data with form to select and an interactive chart. Site should use responsive techniques that we discussed (fluid layout, fluid images and media queries).

Final Project due Aug. 9