Get started with Web coding. Part 1: HTML and CSS

See all posts in this series.

There’s been a lot of talk about journalists learning to code, and that conversation mainly centers on programming. When we say programming, we mean the use of computer programming languages, which cause things to happen. Things happen because a user — a member of the audience — touches something or adds some information. Interaction. Programming makes things happen.

I want to write a short series of posts about coding, for journalists. That includes journalism students. And yes — it includes the journalism educators too.

Today I’m starting with something we call code, but most people would agree it is not programming. The system we use to present information on Web pages begins with HTML, a markup language that structures the content of the page.

I’m starting with HTML because I know a heck of a lot of journalism educators have never tried to learn HTML, and that’s just wrong. You know how to use a comma? Good, I would expect that. The basic use of HTML is just as important as correct use of commas, and it’s certainly not harder to learn.

In fact, it’s probably easier.

Introducing HTML to the timid, the skeptical, the downright terrified

When you think about a magazine or newspaper article, you know it probably has a headline, a byline and paragraphs. HTML is used to identify each of those things, to mark each one as a structural element of the document. Each element is surrounded by a pair of tags. Tags look like this:

<html> </html>

Similarly, when some text in a paragraph appears as bold or italic, or as a functional link to another Web page, that bit of text is surrounded by a pair of tags.

You can be fairly fluent in HTML if you memorize about seven basic tags. Go ahead, click that right now and show yourself how un-scary this is.

Codecademy Web Fundamentals - HTML Basics (Section 3 of 3)

Now, thanks to the brilliant folks at Codecademy, you can learn HTML in a painless, even fun, way — free, online. Go there, sign up for a 100 percent free account, and get started with their Web Fundamentals track. I’ve tested this with real live journalism students, and it is just great. Go. Go now. Start at the top, do everything from top to bottom, and don’t skip anything.

A strategy for success

Most people will tell you that the key to learning how to program is to have a project in mind. Something you want to build or make, with code. This is great advice, but I think sometimes we first need to find out whether we can even learn the basics.

So you go to Codecademy. Good! You complete a few exercises on a Sunday afternoon. Good! And then … you don’t look at any code again for two months.

Bad! Very bad!

Even more important than having a nice little project in mind is coding every day. Yes. I said every day.

Yes, of course, you’re going to miss a day now and then. But here’s my biggest, best tip ever: NEVER miss two days in a row. Never. We forget this stuff even faster than we forget foreign language vocabulary when we fail to use it.

Also, don’t exhaust yourself by working on your code-learning goals for too long at one stretch. This makes it a chore, and tedious — and you will start to associate feeling grumpy with learning code. And then you won’t learn it.

I’ve been telling my students to aim for one hour a day. Some days you’ll do less. Some days, you’ll do much more. And those are great days, when you want to keep working! I got this idea from Zed Shaw, who wrote about this idea in his introduction to his online book Learn Python the Hard Way. He compares it to learning to play the guitar. Practice, practice, practice. It’s a fine analogy.

Introducing CSS, the style that dresses up the structure

I have one complaint about the current Codecademy exercises for Web Fundamentals, and that’s the way they introduce CSS styles.

CSS can be added to HTML directly in three ways (and there are other, indirect ways too). But first, let me give you an analogy.

HTML makes the structure of a document explicit, so it’s rather like a skeleton, or the girders and beams that frame a building. On top of that skeleton, we add muscles and skin and hair. On top of the frame, we add plaster and paint and decorative flourishes. CSS is the code that governs colors and font families, size and shape, the way it all looks. This is HTML. And this is HTML with CSS.

So this code can be inserted directly into the structural areas of a document — right inside the HTML tags. This is the worst approach, because it’s a pain in the neck to change it. Codecademy starts you out with this way of inserting CSS, and that’s what I don’t like.

The second way to add CSS to HTML is to place all the styles at the top of the document, inside an area called the head (not to be confused with headings). This is slightly better, but it still means that if you needed to update or change your styles, you would have to go in and open every darned page on your website. Yeah. Imagine doing that at The New York Times.

The third way is the best way, and (I would say) the right way: All the CSS code is written in a separate document, a separate file. This way, when you have to make a change, you change it once, in one single document, and instantly it changes all the instances of that style everywhere it is used, on every page in your website.

By completely separating the style from the structure, we make it easy to update, correct and improve the styles.

Codecademy - Clickable Photo Page (Section 1 of 1)

But I don’t mean any disrespect toward Codecademy — they’ve done a great job overall, and the second half of their excellent Web Fundamentals track is all about using CSS in a separate document.

Why start with HTML and CSS if these are not ‘programming’?

This is an excellent question, and there is not complete agreement on the answer. In the fantastic journalism-based project Code With Me, everyone starts with HTML and CSS. Then they move on to JavaScript. Tom Giratikanon (@giratikanon) of The New York Times and Sisi Wei (@sisiwei) of ProPublica decided to match brand-new coders with mentors who agree to be available after the workshop ends. (Read more about Code With Me and check out their lovely online materials.)

ScriptEd, a program to teach code in the New York City public schools, starts with JavaScript. Here’s more information about ScriptEd.

My thought is that most journalism people — students, teachers, reporters, editors — work a lot with words. If you start them out with words, and formatting that makes their headlines look pretty and lets them incorporate photos and captions, then they are starting from a place where they already have some level of comfort. If you start them out with code, the alien nature of that world might seem to be too great a leap.

JavaScript is definitely necessary, and I’ll be writing about that in this series, a little later.

I’m not saying everyone needs to memorize massive quantities of HTML and CSS, or master these to the extent that you could code an entire 10,000-page website. No. I am saying you need to understand how this stuff works, because all the Web uses HTML and CSS.

And note, I have not mentioned any software programs in this post. This is not about software. This is like learning how to use commas.

Update: New Resource for Learning HTML and CSS

(May 4, 2013) Recently I discovered that an old favorite of mine, the HTML Dog site, has redone all their tutorials for HTML5 and CSS. Everything has been updated to reflect today’s new coding environment! Highly recommended!! Note: This site is vastly better than the W3 Schools site, where you will likely be misled by some outdated materials.

(Oct. 27, 2013) If you want an explanation of why W3 Schools is a poor reference, read this.

Do not confuse W3 Schools with the official W3 Consortium site.

11 Comments on “Get started with Web coding. Part 1: HTML and CSS

  1. Thank you so much for doing this. A great resource for me as a journalism educator and a great resource for students. It’s still an uphill struggle to convince journalists/journalism students to learn code but people like you help us get the message across.
    I like your approach – getting students to use HTML where they can see the results instantly on their pretty web pages.
    I look forward to yr future postings in this series.

  2. Kudos as usual, Mindy… but especially for “This is not about software. This is like learning how to use commas.” Those CopyDesk genes at work!

    I’m afraid I’m too verbose in introducing the basics. But I offer students alternatives, including your neat bulleted intro pages. In comparison, mine read a bit like “The New Yorker,” I’m afraid. 🙂

  3. Bob, I think we have to think strategically about how we introduce these things, especially code. If we alienate 80 percent of the class, we’re not doing it right.

  4. Journalism students not only need to learn html and css but also become good at them because the digital world is where their platform will be…Thanks for the great series of posts. I enjoyed them and will share with my students…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.