Hi, I’m Quinn Warnick. This is the companion website for a workshop I teach on getting started with HTML and CSS. Large chunks of these workshops aren’t replicated here, so this site might not make sense if you didn’t attend. But I hope some of these links will be useful for novice web designers. I also keep a running list of related bookmarks on my Pinboard account.

Questions? Comments? Drop me a line!

HTML/CSS Editors

To build websites from scratch (or edit pre-existing templates), you’ll need a text editor that is designed to handle markup and code. Avoid using the default text editors on your computer (Notepad/WordPad on Windows; TextEdit on Mac), and never try to edit HTML pages in Microsoft Word or other word processors. Instead, use one of these free programs:

Markup Basics

The basic building blocks of HTML and CSS are well established and don’t need to be typed out by hand each time you create a new site. To use the following snippets of markup, simply copy and paste the samples below into your text editor.

Naming and Managing HTML Files

HTML files are just plain text files with a different file extension (.html). The default file for the “homepage” of a new website will typically be “index.html”. Always name your files using only lowercase letters, and avoid putting any spaces in your file names (e.g., “aboutus.html” or “about-us.html” but not “AboutUs.html” or “about us.html”). Keep all files for your project in the same folder, and if you need to move your project from one computer to another (or to a flash drive), move the entire folder, not just a single file.

Basic Page Structure

At minimum, an HTML page should contain the following items:

<html>
<head>
<title>Title goes here...</title>
</head>
<body>Body goes here...</body>
</html>

Document Type Declarations

Most browsers can display simple webpages without document type declarations (DTDs), but if you want to retain control over how browsers interpret the markup of your websites, you need to tell the browsers what kind of HTML or XHTML you are using. Document Type Declarations appear at the very top of your HTML pages and instruct the browser how to display the rest of the markup in that page. DTDs for the previous versions of HTML and XHTML were long and complex, and you can read more about them on the W3C website. However, HTML 5, which is now in wide use, has an incredibly simple DTD:

<!DOCTYPE html>

This line should be followed by the opening <html> tag, which typically includes a language declaration:

<html lang="en">

Other “Head” Elements

To connect a CSS file to your HTML page, add the following markup to the <head> section of your HTML page, replacing “styles.css” with the name of your style sheet:

<link rel="stylesheet" type="text/css" href="styles.css">

To tell browsers which character encoding system you’re using (ASCII, UTF, etc.), include a <meta charaset> element in the <head> section of your HTML page. Typically, you should encode your HTML pages using the UTF-8 format:

<meta charset="utf-8">

Putting it All Together

Here’s a simple template you can use when you create a new HTML page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Title goes here...</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <!-- Your content goes here -->
</body>

</html>

Naming and Managing CSS Files

Cascading Style Sheets control the appearance of your HTML pages. Like HTML pages, CSS files are just plain text files with a different file extension (.css). Unlike HTML pages, they don’t require any special information at the top of the file; you can begin creating style rules on the first line of your file. Remember to name your CSS file with the same name you used in the <link> element in your HTML file (in this case, “styles.css”), and be sure to save the CSS file in the same folder that contains your HTML file(s).

CSS Markup

Each style rule contains a selector and a declaration, and each declaration contains a property and a value. Each selector can have multiple declarations, and declarations must be separated by semicolons. To make CSS files easier to read, each declaration is typically placed on a new line, like this:

blockquote {
    color: blue;
    font-family: Garamond, "Times New Roman", serif;
    margin: 20px;
}

Website Templates

Even after you’ve gotten comfortable with the basics of HTML and CSS markup, building a website from scratch can be a daunting task. If you need to get a project up and running on the web with limited time or resources, I recommend modifying a template. Before you do so, however, a word of caution: you should only use templates that designers have specifically licensed for public use (typically through a Creative Commons license), and you should check to make sure that the template you’re using doesn’t contain any “junk markup” (i.e., spam links or code that could compromise your site).

Browser Tools for Modifying Templates

Once you find a template you want to use, you can begin modifying it to fit your project. It can tricky figuring out which parts of the HTML and CSS markup need to be modified, so expect a fair bit of trial and error. Several browser plugins/extensions/tools can make the process a little easier:

Working with Images

For most image editing tasks related to building a website, you don’t need an expensive Photoshop license. Here are a few free tools that will get the job done:

  • Pixlr (free web-based image editor)
  • GIMP (free multiplatform image editing software)
  • Awesome Screenshot (browser plugin for annotating screenshots)
  • Skitch (image annotation tool for Windows, Mac, and iOS)

If you’re looking for images that are free (financially and in terms of copyright protection), the following resources are great starting points:

Domain Registration

In order to put your website online, you’ll need to register a domain name. I recommend using one of the following registrars:

Note: Most of these companies also offer web hosting, but I recommend separating your domain registrar from your hosting company, just in case you need to change hosting companies at some point in the future.

If you’re having trouble finding a domain name you like, Domainr can probably help.

Hosting Providers

There are hundreds of web hosting companies out there, and each one has a slightly different plan and slightly different fees. Before you settle on a hosting company, carefully investigate the company’s reputation (i.e., Google them, search for them on Twitter) and make sure that the plan you are signing up for offers the resources you’ll need for your site (e.g., MySQL databases, WordPress support, unlimited subdomains).

FTP Clients

Once you register a domain name and choose a hosting provider, you’re ready to upload your site to a server. To do so, you’ll need a FTP (short for “file transfer protocol”) client. Here are a few good options:

Next Steps

This workshop only scratches the surface of web development. If you’re interested in learning more, I recommend the following books and resources:

Workshop Files

Need a copy of the files we used during the workshop?