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.

[sc:pull-right pulltext="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.)

[sc:pull-left pulltext="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 (

Heading

), while paragraphs have another (

Paragraph

).

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.

[sc:pull-left pulltext="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 [sc:pull-right pulltext="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!

Latest Posts

  • A Google Spreadsheets change affecting TimelineJS users

    Google recently changed something about their Sheets service which is causing many people to run into an error when they are making a new timeline. Note: there should be no impact on existing timelines! After this change, many of you click on the "preview" and get this message: An unexpected error occurred trying to read your spreadsheet data [SyntaxError] Timeline configuration has no events. There is a straightforward work-around, but it requires those of you who have...

    Continue Reading

  • How Americans think and feel about gun violence

    A man killed his wife, then himself. I want you to see his face and learn that he enjoyed fishing with his grandchildren. A small-time drug dealer is shot by two men in a parking lot. I find his Facebook profile and a photo shows him striking a playfully irreverent pose, giving the camera the middle finger. The photo’s comments take a mournful turn after a certain date. “Rest easy bro ???” Gun Memorial runs...

    Continue Reading

  • Software developers interested in journalism: Northwestern and The Washington Post want you!

    Northwestern University and The Washington Post are offering a unique opportunity for two talented software developers interested in applying their programming skills in media and journalism. Here’s the proposition: (1) a full-tuition scholarship to earn a master’s degree in journalism at Northwestern University, followed by (2) a six-month paid internship with The Post’s world-class engineering team, with the possibility of subsequent full-time employment. These opportunities are made possible by the John S. and James L....

    Continue Reading

  • What happened when Gun Memorial let anyone contribute directly to victim profiles

    If you’re reporting local or niche news, there’s a good chance that your audience collectively knows more about the story than you do. That’s especially true for us at Gun Memorial, a small publication with a nationwide mission of covering every American who is shot dead. In our latest, mostly successful, experiment, we let readers add to our stories without editor intervention. This article shares some lessons from that experience. Asking for reader contributions A...

    Continue Reading

  • How conversational interfaces make the internet more accessible for everyone

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. In 2004, human-computer interaction professor Alan Dix published the third edition of Human-Computer Interaction along with his colleagues, Janet Finley, Gregory Abowd, and Russell Beale. In a chapter called “The Interaction,” the authors wrote...

    Continue Reading

  • Three tools to help you make colorblind-friendly graphics

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. I am one of the 8% of men of Northern European descent who suffers from red-green colorblindness. Specifically, I have a mild case of protanopia (also called protanomaly), which means that my eyes lack...

    Continue Reading

Storytelling Tools

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

View More