index.qmd

# Preface {.unnumbered}

::: callout-warning
This class is being rewritten for Spring 2025 and will likely update throughout the semester.
:::

This is the course material for the UT-Austin School of Journalism and Media course *Intro to 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

::: callout-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 _show_ the steps as I walk though the book. 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.
1. 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:

```bash
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.

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

::: callout-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.

::: {.panel-tabset}

### macOS

I use macOS so most directions are from that perspective.

### Windows

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

:::