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.

All you need is a computer, the Internet and the will power to add some new abilities to your skill set.

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.)

The only way to get better at the web is to work on a ton of projects.

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.

The three virtues of programming: laziness, impatience, hubris.

Everything that has to do with presentation and layout will go in your separate CSS document. If you want everything with a

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

Ask Google — No matter your question, someone’s had it before and Google knows where to find the answer.

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 the author

Emily Ferber

Undergraduate Fellow

Latest Posts

  • Prototyping Augmented Reality

    Something that really frustrates me is that, while I’m excited about the potential AR has for storytelling, I don’t feel like I have really great AR experiences that I can point people to. We know that AR is great for taking a selfie with a Pikachu and it’s pretty good at measuring spaces (as long as your room is really well lit and your phone is fully charged) but beyond that, we’re really still figuring...

    Continue Reading

  • Capturing the Soundfield: Recording Ambisonics for VR

    When building experiences in virtual reality we’re confronted with the challenge of mimicking how sounds hit us in the real world from all directions. One useful tool for us to attempt this mimicry is called a soundfield microphone. We tested one of these microphones to explore how audio plays into building immersive experiences for virtual reality. Approaching ambisonics with the soundfield microphone has become popular in development for VR particularly for 360 videos. With it,...

    Continue Reading

  • How to translate live-spoken human words into computer “truth”

    Our Knight Lab team spent three months in Winter 2018 exploring how to combine various technologies to capture, interpret, and fact check live broadcasts from television news stations, using Amazon’s Alexa personal assistant device as a low-friction way to initiate the process. The ultimate goal was to build an Alexa skill that could be its own form of live, automated fact-checking: cross-referencing a statement from a politician or otherwise newsworthy figure against previously fact-checked statements......

    Continue Reading

  • Northwestern is hiring a CS + Journalism professor

    Work with us at the intersection of media, technology and design.

    Are you interested in working with journalism and computer science students to build innovative media tools, products and apps? Would you like to teach the next generation of media innovators? Do you have a track record building technologies for journalists, publishers, storytellers or media consumers? Northwestern University is recruiting for an assistant or associate professor for computer science AND journalism, who will share an appointment in the Medill School of Journalism and the McCormick School...

    Continue Reading

  • Introducing StorylineJS

    Today we're excited to release a new tool for storytellers.

    StorylineJS makes it easy to tell the story behind a dataset, without the need for programming or data visualization expertise. Just upload your data to Google Sheets, add two columns, and fill in the story on the rows you want to highlight. Set a few configuration options and you have an annotated chart, ready to embed on your website. (And did we mention, it looks great on phones?) As with all of our tools, simplicity...

    Continue Reading

  • Join us in October: NU hosts the Computation + Journalism 2017 symposium

    An exciting lineup of researchers, technologists and journalists will convene in October for Computation + Journalism Symposium 2017 at Northwestern University. Register now and book your hotel rooms for the event, which will take place on Friday, Oct. 13, and Saturday, Oct. 14 in Evanston, IL. Hotel room blocks near campus are filling up fast! Speakers will include: Ashwin Ram, who heads research and development for Amazon’s Alexa artificial intelligence (AI) agent, which powers the...

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More