Want to learn some basic coding skills? Read on.
Here’s a phrase I hate more than anything: “I’m not smart enough to code.”
I hear it countless times whenever I give talks, to journalists still in school or those who have years of experience. It’s just not true, and I’m going to prove it to you.
Before I actually make you type anything, let’s do a quick thought experiment. If I write the word “meow,” I want you to, in real life, raise your hand. And if I write the word “woof,” I want you to clap your hands.
Keep score at home, or get a friend to double-check your work. Let’s try this out:
woof
meow
cough cough cough
Now, did you first clap your hands? Then did you raise your hand? And did you just read “cough cough cough” and sit there, wondering why I wrote that? If you did, then congratulations! You understand basic logic and reasoning well enough to learn how to code.
If you’re still not convinced, here’s more proof: Do you know any language (English, Spanish, German, Klingon) well enough to communicate with others? (Hint: You’re reading this right now, so yes.) Congratulations. You were able to learn the syntax of a language once, which means you can definitely learn it a second time, only this time it’ll be geared more toward computers.
If that’s still not enough, think of it this way: No one was born knowing how to play the piano. No one instinctively knew how to paint a tree, either. And no one just figured out how to code by turning on a computer.
Mozart practiced the piano, had great teachers and failed a lot. Bob Ross practiced a lot, studied under a German painter and failed at making many trees, however “happy” they were. You will learn the same way, by practicing a lot, having someone (or something) provide guidance and failing many, many times.
Now that you know you’re smart enough to learn to code, let me point out a few reasons why you should.
Why You Should Learn to Code
If you don’t see the obvious benefits to learning how to code, let me spell it out to you in one word: Employment.
If you know how to program and make a website, your chances for becoming employed — or staying employed — in or outside of journalism skyrocket. NewsNerdJobs.com has more than 100 listings, with about 25 in the past two years. Many are at larger news organizations, where getting in the traditional way — working your way up from smaller to much larger news organizations — has become quite difficult.
While that may not sound like a lot of jobs, news organizations will become more and more dependent on Web developers for their Web strategies in years to come. And if you have the right skills, even at a basic level, you will be needed.
Not only will you be employable, you’ll probably be able to make more than the average journalist. A fellow Web developer I talked to a few years ago had this to say: “I make between $70,000 and $80,000 with two years’ experience. Reporters with the same experience (at my office) make around $50,000 to $55,000.”
And because money isn’t everything, you also occasionally work on amazing projects. Most news organizations realize they need a great Web presentation for their heavy-hitting projects, which reporters, photographers and others spend months, sometimes years on. And you may get to work side-by-side with these folks, helping their work have an even greater impact and reach a potentially larger audience.
If that doesn’t fill up your journalistic gas tank, learning to code will keep your brain forever updating. I got into journalism to learn something new every day. Chasing a story, you’d discover some new facts, or hear a police officer at a scene of a crime give some new detail, or find an amazing email from a city administrator that changes everything. Coding works the same way: Every day I learn a new way to code, a new tool to make my life easier, a smarter way to do in five lines what I had done in 30.
Your daily work should always be interesting, as you’re learning to solve new problems and learn new tools. The Internet is always changing, updating, becoming better. You’ll get to be a part of that, which can enrich your whole career.
So let’s do some basic exercises to get you started.
Inspecting an element in Chrome
For this, you will need Google’s Chrome Web browser. If you want to use another browser, the process may differ.
What we’re going to do is alter the appearance of a website. This is going to show you that a website is kind of like a really, really fancy word processor. Your browser is basically downloading a version of the website, putting it together and displaying it based on how it thinks everything should go. And just like when you open a file with word processors like OpenOffice, Microsoft Word or Google Drive, you have the ability to edit it. Let’s do that!
Go to nytimes.com. They just updated their website in early January. Isn’t it pretty? Well, let’s make it less pretty, just for a few minutes.
Right click on the masthead — The New York Times — at the top. You’ll be given some options; pick “Inspect Element.”
A box should show up near the bottom of the Chrome browser.
On the left, you’ll see a line highlighted in blue. It starts with 
And as Keyser Soze would say, and like that, it’s gone. If you want it back, just refresh the page. See that it changes back? It’s like you edited a Word document and then redownloaded the original. It brings back everything.
Let’s right click and inspect element on the masthead again. Now, double click on the src portion of the line, which I’ve bolded for you.
src=” src=”http://i1.nyt.com/images/misc/nytlogo379x64.gif”>
It should now highlight that part (you may need to scroll down a bit, depending on your browser window). Delete the part between the quotation marks and then paste or type this in: http://www.chicagotribune.com/images/logo.png
It should now look like this: 
Hit enter. Look at that! You just changed the top of The New York Times to look like another amazing newspaper (OK, it’s the one for which I work).
And now let’s edit a headline. Right click on the main headline, the top left one. It currently looks like this for me:
Older Pool of Health Care Enrollees Stirs Fears on Costs
Double-click on the area with the actual text of the headline, in this case the “Older Pool of Health Care Enrollees Stirs Fears on Costs” part. Change it to anything you’d like and hit enter. I changed it to “Andy Boyle Is Real Cool, Handsome” because it’s news the Times should be covering.
This is one of the most powerful tools we use in Web development. I use it every day at my job, and I’m sure many others do, too. With this you can edit text, you can make things bigger or smaller, you can fiddle around with fonts and colors and much more. It’s a way to test your code and see how it would look. Really, it just saves you a step. And it’s fun to fiddle with other websites and see how they work.
Almost anything you see on the Internet, whether it’s a website cataloging types of Chicago crime or the login page to a social networking site, was made by someone, or a group of someones, who failed many times to create the working version you see. For almost every website, someone usually had to make hundreds of mistakes. The mistakes are how you learn. And fiddling around like this creates fun, pleasant mistakes, which sometimes lead you down the path you want to go.
Simple JavaScript
Now that you’ve discovered you can edit a website, I’m going to show you some simple JavaScript, further proving you can code. If you don’t know, JavaScript is, in basic terms, code that “runs” and then can change how your website looks. Think of it like the find and replace function in a word processor — you tell it “hey, find everywhere that it says ‘Andy Sucks’ and change it to ‘Andy Rules,’” and it runs and does that.
This is what JavaScript does to regular websites. For this example, we’re going to do some rudimentary scripts. (None of these will hurt your computer or a website.)
Open up a new Chrome window (Command + N for Mac, or Ctrl + N for Windows). Right click in an open area and click Inspect Element, just like in the last exercise. On the right side of the bottom navigation bar, click on Console.
This is the JavaScript console. You may see some stuff in here already, but don’t worry about it. Click to the right of the >, which we will call a prompt. You should now see a blinking cursor. Know what this means? It means you can type commands in.
Let’s do a basic one. Type:
var name = “Andy”;
Make sure you include the semicolon at the end, as that’s how the prompt knows this line is finished. Then hit enter. It may say “undefined,” but don’t worry about that. Now type:
name
It should respond: “Andy”
What you did here was make a variable — the var — in JavaScript. Think of it like basic algebra, where n = 24 or something. Except here, you can make it text, a number or even another variable. Let’s try something else:
var last_name = “Boyle”;
Hit enter. Now type:
last_name
It returns “Boyle” and you holler with glee. Let’s do something fancy, to show you that a variable can equal another variable:
var first_name = name;
first_name
Boom. It returns “Andy” and you jump for joy. Let’s do some basic math, hitting enter after each of these:
age = 28;
age + 4
age – 15;
age * 2;
age / 14;
See how it’s using age always as a variable equally 28? Let’s change that.
age = age + 2;
age
“Age” now equals 30. You can do all sorts of math. I bet you’re wondering what happens if you try to do math on one of those name variables. Let’s try it:
last_name – 14;
It returns “NaN,” which means “Not a Number.” If you type last_name again, it’ll still show up as “Boyle” because you still haven’t affected the memory of that variable. But let’s do a few more exercises:
full_name = first_name + last_name;
full_name
Now the response isn’t exactly what you figured, is it? Yes, you can add these two together, but because they’re strings — which is another way of saying “not numbers or another variable,” they just get smooshed together. Is there a way to fix this? You bet, and it’s by adding a string in the middle of it:
full_name = first_name + ” ” + last_name;
See the space in the middle, between the two quotation marks? That’s you telling it to add a space between the two other variables, making full_name be what you want.
Try experimenting with your own name. Add a variable for a middle name, or a middle initial. Make a variable that has a full sentence, something that looks like this:
var sentence = “This person is awesome: “;
var person = “Andy Boyle”;
var full_sentence = sentence + person;
The last thing I’m going to show you is an alert. This makes a window pop up. It’s pretty simple:
alert(’This is an alert! Holy cow!’);
After you hit enter, a pop-up should appear, which you can close by clicking “OK.” Try putting your own message in there. Can you figure out how to include a variable?
How to learn on your own
The best way to learn is to have a project you want to make real. Do you have a lot of books or movies? Make a website that lists them. Don’t worry about it looking pretty in the beginning. Just make it do what you want first, then worry about making it look nice. Figure out a project and make the smallest version of it that you can. No need for fanciness just yet; make it basic.
Next, whenever you are curious about how something looks or works on the Internet, right-click and Inspect Element. This will give you a little more insight into how it works. You will learn more advanced techniques eventually — looking at and adjusting the CSS on the right-side of the inspector, for one — but for now use that inquisitive mind and investigate the code behind the elements you think look cool.
When you run into a problem, Google it. If you see an error message, copy and paste it into Google. Most likely someone has posted online about this problem before and someone else has answered them. Almost 99 percent of my problems are solved this way. A great resource is stackoverflow.com, where people ask and answer these questions on a regular basis.
A good resource, which costs a few bucks, is teamtreehouse.com. This will do a lot better job of showing you the Web fundamentals than I can in this article.
Last, find a mentor. This could be someone in your newsroom, it could be someone on Twitter, maybe it’s someone you met at a conference. Find someone who’s willing to let you ask questions. Check meetup.com and see if there are any local programming groups that meet regularly. Look for national listservs you can join. Having someone to answer the occasional “I can’t find this on the Internet!” question is always helpful. And then, when you’ve started developing some skills, be sure to give back to the community, answer questions and take others under your wing, too.
You can do this. So many have done it before you, and many will do it after you. Jump in, start breaking stuff and learn to make the Internet. Journalism needs you.
Andy Boyle is a developer for the Chicago Tribune’s TribApps team, a journalism graduate of the University of Nebraska and an SPJ trainer. Reach him at andymboyle@gmail.com or interact on Twitter: @andymboyle
