A Northwestern University joint initiative of Medill School of Journalism, Media, Integrated Marketing Communications and the Robert R. McCormick School of Engineering & Applied Science. Northwestern University joint initiative of Medill & McCormick School of Engineering.

A journalist’s beginner guide to code and web proficiency

It’s really easy to make it through journalism school without picking up a stitch of coding knowledge. But you know this already. Hacker journalists have written article after blog post about how the new crop of journalists needs to sit down, plug in and plain learn the essentials of the web.

Well, some of us are listening.

After watching a few journo-friends go full on hacker in front of my eyes, I decided it was time to progress beyond the standard WordPress site and build my own portfolio site. With the help of Twitter Bootstrap (not to mention some patient programmer friends), I built myself the portfolio site of my dreams. But more importantly, I realized that all of those nonsensical strings I watched my friends type weren’t all that mysterious after all. Even I, a proud hack if there ever was one, could learn how to code, and learn how to code well.

But if you’re anything like me, the skills it takes to become web-proficient (to say nothing of a newsapps team-level programmer) can still seem woefully opaque. So I decided to investigate: Is there a hack-proof path to learning to code like a pro? Consensus says there absolutely is. If you’re looking to shed your hack skin and learn the skills you might need to talk shop with the coders in your newsroom, build a website, or join a newsapps team, all you need is a computer, the Internet and the will power to add some new abilities to your skill set.

I’m no expert, so I know this task might seem a little daunting. But take solace in this: Every news nerd started where you are now and they unanimously recommend a pretty standard path, which you’ll find below.

This is by no means a “just add water” way to learn code (trust me, I’ve looked, and there’s no “easy” way to do this). But it is a roadmap to being web-proficient. Learn this and the possibilities after are just about endless.

HTML

Short for Hypertext Markup Language, HTML is a system of markup tags that classify and describe web page content. It was invented in 1980 by physicist and CERN contractor Tim Berners-Lee as a system for using and sharing documents. Since then, HTML has become the basic backbone language for everything on the web. In fact, it’s actually all you need to create a web page, though it probably won’t look like much – you’ll need some CSS for that.

(Ever wonder what the first-ever, all HTML website looks like? See for yourself.)

In layman’s terms: HTML lets you manipulate text. Bold, italics, underlining – that all happens here. Not to mention the hypertext element of HTML, which allows you to add hyperlinks to a webpage.

Writing HTML is easy. All you need to do is learn to associate the correct tags with your plain text. Tags will indicate how you want the text to be formatted. For example, headings have one tag (<h1>Heading</h1>), while paragraphs have another (<p>Paragraph</p>).

There are specific tags for images, hyperlinks and titles of a webpage. Curious about just how many tags are out there? W3 Schools has a comprehensive reference for all the elements you might not know or remember.

For a more comprehensive look at just what exactly HTML does, watch some videos from the folks at Don’t Fear The Internet. Also check out Codecademy — it’s the best place to get comfortable with HTML basics, as well as more advanced languages like Python and Ruby.

CSS

Now that you can write and manipulate the text of your site, it’s time to make everything else on the site look fantastic with CSS, or Cascading Style Sheets.

CSS was developed in 1997 to allow developers more control over the look and feel of their websites and to give them one file that would change the styling on their entire site at once (as opposed to going through page-by-page and making changes).

CSS will save you loads of time and make your code easier to understand. Think about your ideal website: It might have one page, but it could have dozens. If you want all the pages to maintain the same style, no matter the content, CSS will maintain it quickly and easily.

Everything that has to do with presentation and layout will go in your separate CSS document. If you want everything with a <p> tag to be blue, that’ll be in your CSS so you won’t have to constantly redefine it in HTML. Want all your photos to have a light gray border with a 12-pixel tall type in the caption? That goes in CSS.

With CSS, you can make your text look nice and add elements like boxes, borders and ribbons to your page. Go wild. The styling sky’s the limit.

Think about your CSS file as the place where the overall look and feel of your site is defined.

Most HTML tutorials will also cover CSS because the two go hand-in-hand. But because there’s so much CSS to learn, you might want to check out some CSS-specific tutorials and online indexes to see explore all the possibilities. The Mozilla Developer Network has an extensive array of references and tutorials to check out.

JavaScript

Once you’ve mastered writing good-looking static website, you’re ready to move on to learning a programming language like JavaScript.

What’s different about JavaScript than what you’ve already learned? HTML and CSS are used to design the web. With JavaScript, what you build can be dynamic. Your user will be able to interact with the site or application you create.

This doesn’t mean your HTML/CSS basics aren’t important. You will build off of what you learn about HTML and CSS because you’ll often use JavaScript to manipulate what you’ve already written. JavaScript is designed to perform certain functions for already created objects. For example, you can build a button using HTML and CSS, but you can’t make that button work until you hook it up to some JavaScript.

You’ll notice the difference between JavaScript and HTML right off the bat. Instead of tags, JavaScript involves numbers, strings, variables, operators and objects.

Codecademy tutorials are useful for learning Javascript as well. Tutorials on LearnStreet combine teaching the basics with Code Garage, a playground where users can experiment with the code they’ve learned. Before you’re done, you’ll be able to build applications that verify forms or play hangman.

If you’re willing to put some money down, search for a course through Treehouse or Code School. Both programs offer a combination of courses and tutorials for specific problems and are vetted by some of the most well known names in programming.

As you code, you can rely on resources like W3 Schools, an online dictionary of every term or function you might need while writing.

Build something

An often-repeated mantra of web development is that the only way to get better is to build a ton of projects.

A good first project is a portfolio site.  “Most of the things you will do in life are going to be project-based,” said Emily Withrow, a Medill professor, journalist, and self-taught coder. Withrow learned by taking on interactive projects while working at the AV Club, which helped her learn because of its real world application. “Contextual learning helps things stick a little better than learning in a vacuum,” she said.

Moving forward

So those are the basics — HTML, CSS, and JavaScript. From here, the paths diverge. If you wanna be a back-end guy or gal you might learn a server-side language like Python, PHP, or Ruby. Make sure to check out Learn Code The Hard Way, a great resource for Python, C and Ruby.

If you wanna be a front-end developer, you might go back for some deeper CSS or Javascript. But the most important thing to do is to pick a project and get to work.

When in doubt

  • Ask Google — No matter your question, someone’s had it before and Google knows where to find the answer.
  • Ask a human — “There’s a huge community who all started in the same place, which is zero,” Withrow said, “and they’re all willing to help.” Connect with other news nerds on Twitter and at Meet-Ups to gain experience and a support system for coding endeavors. “Join the conversation, because you will easily find mentors willing to help you,” she said.

Even more!

Need more inspiration? “Enroll” in Brian Boyer’s Hacker Journalism 101 course. You won’t learn much in terms of languages, but you’ll read heaps about the theory behind developing news applications and other content for the web. And, as Boyer says, always remember the three virtues of programming:

  • Laziness: Do anything to work less.
  • Impatience: Figure out how to do things faster
  • Hubris: With a computer, you can do anything.

Happy Hacking!

About Posted on May 16, 2013 Posted by

Emily Ferber

Editorial Fellow
@emily_ferber
ejferber@gmail.com
Ferber covers news and tech innovation at the Lab. Previous stints include ELLE and Medill Watchdog. She’ll join New York Mag for summer 2013.

  • Klaus Junginger

    Emily,

    Articles such as yours make us believe there IS a bright future for journalism wether it is on or offline. Once these techniques make part of an individual’s bloodstream he can forget about’em and focus on writing and investigating bravely, sure that these infos aren’t in any way a waste of time.

    I’d like to see an article like this written for editors, whose attributions inlcude metrics.

    Thanks again

    Klaus Junginger
    SEO at Estado de S.Paulo – Brazil

    • Ryan Graff

      Thanks for reading and the feedback, Klaus!

      Emily is one smart student and talented journalist. We’ll see if she’s interested in writing something with editors and in mind.

      Thanks again!