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

  • Building a Community for VR and AR Storytelling

    In 2016 we founded the Device Lab to provide a hub for the exploration of AR/VR storytelling on campus. In addition to providing access to these technologies for Medill and the wider Northwestern community, we’ve also pursued a wide variety of research and experimental content development projects. We’ve built WebVR timelines of feminist history and looked into the inner workings of ambisonic audio. We’ve built virtual coral reefs and prototyped an AR experience setting interviews...

    Continue Reading

  • A Brief Introduction to NewsgamesCan video games be used to tell the news?

    When the Financial Times released The Uber Game in 2017, the game immediately gained widespread popularity with more than 360,000 visits, rising up the ranks as the paper’s most popular interactive piece of the year. David Blood, the game’s lead developer, said that the average time spent on the page was about 20 minutes, which was substantially longer than what most Financial Times interactives tend to receive, according to Blood. The Uber Game was so successful that the Financial...

    Continue Reading

  • With the 25th CAR Conference upon us, let’s recall the first oneWhen the Web was young, data journalism pioneers gathered in Raleigh

    For a few days in October 1993, if you were interested in journalism and technology, Raleigh, North Carolina was the place you had to be. The first Computer-Assisted Reporting Conference offered by Investigative Reporters & Editors brought more than 400 journalists to Raleigh for 3½ days of panels, demos and hands-on lessons in how to use computers to find stories in data. That seminal event will be commemorated this week at the 25th CAR Conference, which...

    Continue Reading

  • 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

  • Audience Engagement and Onboarding with Hearken Auditing the News Resurrecting History for VR Civic Engagement with City Bureau Automated Fact Checking Conversational Interface for News Creative Co-Author Crowdsourcing for Journalism Environmental Reporting with Sensors Augmented Reality Visualizations Exploring Data Visualization in VR Fact Flow Storytelling with GIFs Historical Census Data Information Spaces in AR/VR Contrasting Forms Of Interactive 3D Storytelling Interactive Audio Juxtapose Legislator Tracker Storytelling with Augmented Reality Music Magazine Navigating Virtual Reality Open Data Reporter Oscillations Personalize My Story Photo Bingo Photojournalism in 3D for VR and Beyond Podcast Discoverability Privacy Mirror Projection Mapping ProPublica Illinois Rethinking Election Coverage SensorGrid API and Dashboard Sidebar Smarter News Exploring Software Defined Radio Story for You Storyline: Charts that tell stories. Storytelling Layers on 360 Video Talking to Data Visual Recipes Watch Me Work Writing and Designing for Chatbots
  • Prototyping Spatial Audio for Movement Art

    One of Oscillations’ technical goals for this quarter’s Knight Lab Studio class was an exploration of spatial audio. Spatial audio is sound that exists in three dimensions. It is a perfect complement to 360 video, because sound sources can be localized to certain parts of the video. Oscillations is especially interested in using spatial audio to enhance the neuroscientific principles of audiovisual synchrony that they aim to emphasize in their productions. Existing work in spatial......

    Continue Reading

Storytelling Tools

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

View More