Coding for journalists

This semester, I’ve started teaching a new class at KU, Tech Tools: Web Coding, which is essentially coding for journalists. (Although there are nonjournalism students in the class.)

aI did all the initial prep work for starting this class as part of the William Allen White School’s move to make 3 hours of Tech Tools classes part of the journalism core. Students take a couple of 5-week-long 1 credit. hour classes in things like video editing, graphic design, coding, etc.

The idea behind my class is that journalists benefit from having some knowledge of coding and also how the backend of a common CMS works — although the class is just an introduction. I tell students that they won’t be able to take my class and then site down and code a website the next weekend.

But I also know that I benefited at the newspapers I worked at from understanding the computer system and being able to troubleshoot bad code on the website. Having an interest in that lead to at least one promotion.

My students are doing their coding work in one of two code learning/testing sites, either JSFiddle or Codepen. While I’m showing them how to set up a project correctly (with a nested folder system, and index file, and a regular text editor), they’re not really coding a site and these “playground” sites work well for them.

They’re using their WordPress portfolio websites (our students have to create online portfolios) to display some of their work using the custom HTML block and some custom CSS.

I wanted to post some examples here, but my version of WordPress won’t allow the custom HTML (I’m not paying for bells and whistles). But the class blog will, and we’ll be posting some of the student work there.

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #05488C; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: left; border-right: 1px solid white; } li:last-child { border-right: none; } li a { display: block; color: white; font-family: ‘Rubik Mono One’, sans-serif; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #04AA6D; } h1 { font-family: ‘Helvetica’, sans-serif; font-size: 48px; }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.