Intro to Coding for Journalists

Author

Christian McDonald

Published

June 26, 2023

Preface

Warning

This class is under a major rewrite for Fall 2023. It pulls together a bunch separate lessons and repos.

This is the course material for the UT-Austin School of Journalism and Media course “Intro Coding for Journalists”. The class teaches basic HTML, CSS and JavaScript skills, culminating in a static-page generator app from data.

The Canvas course is your official word on assignment due dates and such, but most lectures, assignment details and files are found here.

The structure of the class

You can see the chapter breakdown, but the book is more or less structured like this:

  • Using command-line tools
  • Computer setup
  • HTML: The skeleton of the web
  • CSS: The skin of the web
  • JavaScript: The muscles of the web
  • Sass: Better web skins
  • Bootstrap: OMG, the web solved
  • Static apps: HFS, I can make it
Important

Many of the chapters in this book have video screencasts where I walk through the practice lesson and explain steps along the way. If you are a visual learner, you might try that. The material is the same as in this book, but I just talk out and show the steps. You’ll find those links in Canvas.

Tips on reading this book

I try to write this book so it is clear when you need to do something vs read something.

To-do steps

For all my lessons I typically put directions for YOU to do in numbered lists:

  1. Do this thing.
  2. Then do that thing.

Sometimes there is code after or among the the directions, but it is in a code block with a grey background.

  1. Run this command:
ls -al

Note that you can roll your cursor over that highlighted block and use the copy button at the top right to copy all the commands within it. I encourage you to type commands unless they are super long. You learn better that way.

Sometimes I show a command and also show Terminal output. In this case, I include the $ on the line with the command. The background is also not highlighted.

$ ls -al
total 32
drwxr-xr-x   3 ccm346  Users     96 Jul 12 16:12 .
drwxr-xr-x@ 22 ccm346  Users    704 Jul 12 16:10 ..
-rw-r--r--   1 ccm346  Users  15642 Jul 12 16:12 data.csv

Not to-do things

I typically use an unordered bullet list for explanations and other non-“do” things:

  • This is just a note about something
  • And this is another

Regular paragraph text such as this one are usually an explanation, background or whatever.

If something is in bold or IN ALL CAPS or in italics for emphasis then there is usually a reason why, so pay attention.

Sometimes I put unimportant but interesting side notes in callouts like this.

Important

But sometimes I’ll put important notes in these callout sections, too. I’ll usually say if they are important in bold at the beginning, like this one.

I try to be consistent about all such things, but I’m human so sometimes I’m not.

macOS vs Windows

On some occasions I may need to give specific directions depending on your operating system or some other division. You would choose the tab that fits your situation.

I use macOS so most directions are from that perspective.

Usually you can use Cntl-whatever as a PC equivalent to Cmd-whatever on a Mac.