Getting Started with jQuery, HTML, and CSS

An Infinity Blade Review How To

A while ago, someone asked me how to get started making something like my Infinity Blade Review over at Kill Screen. I started writing her an email, and it became huge, so I decided I’d post it here in case it might be of use to somebody else, as well. Here it is.

The short answer to your question is that while I think the stuff I used–jQuery, mostly–will do exactly what you need it to do, it’s probably kind of a long road from just starting out to being able to do something like that. I’ve been programming for most of my life (wow, I just realized that’s true. I’m old), and still, the programming part of that review took longer–significantly longer, I think–than the writing part.

But I am absolutely no good at short answers, so here’s a much longer one.

I don’t know what your level of experience with web technologies is, or what exactly you mean when you say “programming novice,” so forgive me if I assume you don’t know stuff you already do. I’m going to assume that you’ve never made a web page or written a program before. That said, here are some things you’ll need to understand and, after that, some things to look at to help you get there.

First and most fundamental is HTML, the language that web pages are made of. You don’t have to know all the fancy stuff, but in order to get what you want going, you need to be able to use HTML at least on a basic level. (HTML is the tool you’ll use to establish the structure of your document.)

Second, and most important, is jQuery. jQuery is what’s called an API for Javascript,1 and this is what’ll move stuff around, hide stuff, show stuff, etc. In my Infinity Blade review, jQuery is what fades stuff in and out, and basically makes the whole thing go.

Third, and probably least important (but still significant) is CSS. CSS is what will allow you to decide how things look. (jQuery hides and shows things in my review by changing the CSS properties, which tells your browser what things should look like.)

And, to make things even more complicated, each of these tools requires a completely different way of thinking. jQuery is closest to normal programming, but HTML and CSS are their own beasts.

I don’t say any of this to discourage you; quite frankly, anybody who can beat SMB, no warps, one life is probably capable of handling any challenge, and should probably be an astronaut or a surgeon or president or something. I’m sure you can handle this, and what you’re wanting is actually pretty simple–it’s just a simple combination of what might be three unfamiliar technologies.

Here’s basically what your process will look like:

  • lay out your document in HTML.

  • use jQuery to do stuff with the HTML, probably either moving stuff around or adding/removing CSS properties or classes.

  • use CSS to make everything look the way you want.

That’s a big process, I know, so here are some resources to help you get started:

Last thing I’ll say is this: jQuery is really powerful, and pretty simple. It can do all kinds of things, so try to keep in mind that what you saw in my review is really just an example of things that you can do, and there are probably much cooler things that you can do in your situation.

  1. You don’t need to know what this means, except to understand that jQuery is an extension of Javascript. For your purposes, you don’t need to worry about plain Javascript; jQuery will make that way easier for you.