The Firefox web browser will be our go-to browser for these workshops — you should install it even if you usually use another browser, because it offers specific features that we'll eventually depend on. Available for basically every operating system you might ever consider using.
Demoroniser is a Perl script for more technically savvy users and can also help to clean up some of the awful cruft that Word shoves into the HTML that it exports. French speakers will appreciate the pun in the script's name.
Useful, free graphics software
If you already have graphics software you like, why, by all means, you should use it. If you're looking for good free software, though, I have some suggestions.
Inkscape is a free, powerful vector graphics creation program for Windows, Mac OS X, and Linux.
Dia is a useful diagram-creation program for Windows, Mac OS X, and Linux.
Scribus is a powerful (and free) page-layout program that can also be used to create vector graphics. Available for Windows, Mac OS X, and Linux.
Hosting providers for non-HTML external content
There are a lot of upsides to hosting many types of content externally: you can leverage other peoples' work in preparing a functional user interface, you don't have to (or, at least, may not have to) pay for storing your content or the bandwidth involved in transferring it, and the external host may have tied social network–sharing functions to your content at no additional work on your part. However, there are also downsides: you're relying on someone else to hold on to and serve your content, so you need to ensure that they're reliable and likely to continue providing the service, and you need to abide by someone else's terms of service, which may or may not have hidden gotchas or prohibit certain types of content or otherwise restrict you. (A case in point: in February 2016, I discovered that ImageShack had changed their terms of service without even bothering to notify me, and that images I'd used them to host had silently disappeared from my website. Hey ImageShack: silently dumping all of my content with no warning is a poor way to get me to convert to a paid account, or to get me to continue recommending you.)
That being said, I tend to find it worthwhile to save money and gain other benefits by hosting large files elsewhere, provided that I keep my own local copy. Here are some service providers who will store and serve content for you, presented with the caveat that you should read the fine print and make decisions about who is a trustworthy provider on your own.
If possible, you should install these programs before you come to the workshops … but don't let installation woes or lack of time keep you from attending!
You'll probably still want to use a good text editor — I still recommend Bluefish (installation instructions are here), which is available for Windows, Mac OS X, Linux, and other Unix-like OSes. If you don't like Bluefish or it won't work for you, Wikipedia has a comparative list of text editors. Really, any plain-text editor (and not a full-featured word processor) will work, and you'll probably benefit from picking one that's focused on the needs of coders.
The Firefox web browser will be our go-to browser for these workshops — you should install it even if you usually use another browser, because it offers specific features that we'll start to depend on in this workshop. Available for, probably, every operating system you've ever considered using.
You'll eventually want to transfer your files to a web server, and will probably want to do so with an FTP program. I recommend one of …
CSS Structure and Rules provides a terse overview of how CSS selectors work. It's not a great introduction simply because it is so terse, but might be a good quick reference once you're already familiar with the rules. One point in its favor: its last section provides the shortest good explanation I've seen of how CSS parsers resolve competing definitions when multiple selectors apply to a single element.
Gridlover helps you generate pleasing ratios of text sizes and element spacing in websites, and writes some of your CSS for you.
Where do you go when you have a good grasp of CSS and want to work around some of its weaknesses? You might plausibly learn a more complex stylesheet language, such as SASS or its extension SCSS. (This might especially make sense if you're a coder or have coding experience.)
Once you've gotten some basic experience with CSS, you can save a lot of time by starting with an existing framework that sets up a cohesive and attractive set of CSS declarations that you can then modify, so that you don't have to be a designer and build up an attractive setup from scratch.
Skeleton is a free set of CSS boilerplate that can get you started building websites quickly.
Though this very website that you are looking at right now is not built with Skeleton, in its current incarnation, as of this writing (18 September 2015), it draws a fair amount of its design aesthetic from the framework.
FontSquirrel lets you convert your existing font files to a web-friendly format so that you can use them on web pages. (But remember that fonts are creative works, too, and take a huge amount of time to design well; they're subject to copyright. You shouldn't do this unless you've licensed the fonts in a way that allows you to do so.)
Breadcrumbs are a way of semantically marking up user-visible navigation elements.
COinS (ContextObjects in Spans) provides a way to embed citation information in your HTML documents. Zotero can both read and generate COinS that can be embedded in a web page; those not using Zotero will be comforted to know that other software can also understand COinS (a [partial?] list is here), and there is a web-based COinS generator so that you don't have to write them yourself.
About Twitter Cards explains how to get started including metadata to enhance the presentation of a site when it's shared on Twitter. Note that, once you've set this up, Twitter has to approve your site.
Rich Pins for Pinterest. Explains how to enhance what Pinterest users see when they pin your content. As with Twitter, Pinterest has to approve your content before the markup starts working.
Schema.org is a community-driven vocabulary for rich data led by a consortium consisting of Google, Yahoo!, Microsoft, and others. This vocabulary can be used through several different implementations (not via microformats, though). It also requires the use of HTML5 as the markup language.
RDFa (Resource Description Framework in Attributes), a system for using URLs as identifiers to classify and point to locations of data embedded in web pages. Widely used by publishers and libraries, and notably understood rather well by search engines in many cases (here is Google's write-up on how they use it); more sophisticated and nuanced than microformats.
Microdata (not the same thing as microformats) is another system for annotating text that aims to be simpler than RDFa and microformats. (Here's Google's write-up on how they use microdata.)
Barnaby Walters's Microformats Parser, which parses microformat-based semantic data and outputs JSON. (JSON is perhaps not a data format you're familiar with if you're not a technical person, but it's clearer than the semantic HTML itself, and is quite readable for those familiar with it.)
Aaron Parecki's Microformats Parser, which also parses microformat-based semantic data and outputs JSON.
Exposing metadata to Zotero [using COinS] explains a technique for embedding metadata so that Zotero (and other bibliographic software, and other software of other types) can understand it as a bibliographic entity. Zotero is great free bibliographic software that lives in your web browser, and you may already be familiar with it; if not, their introductory video provides a quick overview.
How to create a favicon.ico with GIMP shows you how to create that little icon that appears in the address bar of your browser. Targeted at Linux users but adaptable to Mac and Windows people with a bit of effort.
Favicon from Pics provides a way to generate the necessary graphics file online (though you still need to do a bit of HTML coding to get it to work).
Optimizing Animated GIFs gives a detailed overview of how you can keep these files as small as possible (and is totally unnecessary to use if you're following the previous tutorial on creating animated GIFs with The GIMP).