Posted on February 16, 2013
Get started with Web coding. Part 1: HTML and CSS
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:
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.
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.
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’?
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.
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.