Ever since creating my moderately popular guide to Twine last year, I’ve been meaning to put together a series of videos explaining the basics of HTML and CSS, the coding languages of the web. Since Twine publishes to these standard web formats, knowing a bit about how they work can be very useful. And even if you have no interest in Twine, understanding some HTML and CSS can be empowering.
So I’ve made some videos. Alas, they’re a little long, but HTML + CSS is such a vast topic that this was bound to happen. I know there are a million videos out there introducing HTML and CSS, but I couldn’t resist making my own, partly because my students said they wanted to be able to replay the stuff I was teaching them in class, and partly because I’ve never seen a video that introduced these topics exactly the way I do.
You will find all four videos below. For a few of these, I’ve included some downloadable code that you can “play along with” as you watch these videos.
1. The Limitations of Plain Text
This video explains why HTML and CSS are needed in the first place. You could probably just skip this video, but I couldn’t resist posting this as a kind of intellectual backstory.
One thing you will want to do now, even if you don’t watch this entire video, is download a good plain text editor. Sublime Text and Atom are popular choices.
The only file I discuss here is the almost pointlessly banal helloworld.txt. While the file itself isn’t very interesting, this is a good time to learn how to download files! I’d recommend right-clicking (or control-clicking) on the link (helloworld.txt) and selecting “Download file as…” or “Save link as…” or whatever option sounds most like that. Another option is just to click on the link, and then, once you see the file, click File –> Save As… Either way, the next step is to save the file somewhere you can easily remember on your hard drive. I’d recommend making a new folder on your desktop — maybe one called “HTMLCSS.”
This is also a good time to turn on file extensions in your operating system. Click here for Windows instructions and here for Mac instructions.
2. What is HTML?
For this video, you’ll want to play along by downloading bareminimum.html (see above for instructions on how to download files… you’ll definitely want to use the right-click approach for html files). Once you have it saved, open it up in both your plain text editor and your favourite web browser (I’m using Chrome in the videos) and start editing!
3. What is CSS?
For this video, just keep on editing along to bareminimum.html, which you downloaded above. If you want to see the file as I edited it, adding panda pictures, etc., you can see (and download) it here: bearminimum.html (pun!). If you’re interested, you can also see (and download!!) the Bikini Kill fanpage I used to demonstrate basic CSS selector types: fanpage.html
4. Making a Multi-Page Website
To follow along with this video, you’ll want to download practicewebsite.zip. This is a “zip file” that you will need to “uncompress” or “unzip.” On a Mac, you just double-click on it, and it will produce a folder like the one I use in the video. On a Windows PC, you need to right-click on it, select “Extract All.” Instructions for making zip files on Windows are here. On a Mac, you just right-click on a folder and select “Compress.”