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.

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.

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.

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

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.

About the author

Emily Ferber

Undergraduate Fellow