This collection pulls together the info you'll need to get a basic website up and running: getting your machine ready, designing an amazing site, easing into a logical workflow, and of course, all the thrills and spills of learning the best of the basic web—HTML and CSS.

Before we begin, you should download:

A text editor is a program that allows users to create and edit plain text files. Plain text files don’t have stylistic formatting; you won’t find code written in Comic Sans or Wingdings, which is one of the ways text editors are different from programs like Microsoft Word. We recommend using SublimeText . It's shareware .

An FTP program transfers computer files from one host to another via the Internet, such as CyberDuck, and FileZilla.

Setting up a work environment might seem like a hassle, but trust us—it will save you headaches down the road. Websites are essentially just a collection of files, so being organized will help prevent errors later on.

What we do

We're setting up a dedicated spot on your machine for all the files you'll create: your technical docs, as well as images, videos, or other assets you're going to display.

Why we do

Putting those files in organized folders enables us to give the browser exact directions to the locations of those files. So, no search or spotlight allowed—know where your files are so you can send the browser down the right path. Broken paths, missing files, or imprecise directions are common reasons things break. Ever seen a 404 message? That’s why!

How we do

  1. Create a new folder somewhere easy, like your desktop.
  2. Give it a name with no spaces or caps.
  3. Open up your text editor (probably Sublime if you're following along) and go to file > new.
  4. Then save it in your new folder as index.html . You must include the file extension! This is our first signal to the browser about what we'll be doing in here.
  5. Head into your browser of choice (Chrome, cough cough), go to file > open, and select the file we just made.
  6. Take a look at your beautiful website? ... Jk there's nothing there. That's good. Proceed!

If you're ever going to move your files around, make sure to close out of your text editor while you do. Poor Sublime will keep editing the old doc, and will keep saving it in the old place. Once again: close Sublime, move files, reopen to edit in Sublime.

Ah, HTML. You've heard so much, and yet, know so little. Let us help. HTML is the backbone of the web, and the beginning of any website. It's our way of telling the browser what's what—this is a paragraph, this is a list, this is an image of Steve Buscemi. Dive into this standalone lesson on HTML to see how it works and to put together your first page.

HTML is the most widely used coding language on the Internet, so you'll need a strong grasp on it before you go any further.

Beginners often think they're stumbling with CSS and JavaScript, but the culprit is actually HTML. Make sure you spend some time really understanding the DOM and bulletproofing your HTML before diving too deep elsewhere. (Or at least return to it when you hit problems.)

Workflow: We learned it the hard way

Here’s the sad truth: When things go south, it’s always your fault.

At least when it comes to building websites. We can’t vouch for that thing with your ex. More than likely, the page is not just acting crazy . It’s acting crazy because you told it to act crazy. So here’s a strategy to help you cut down on the amount of time you spend troubleshooting.

Change, save, refresh, check.

If you make a lot of changes and then notice things are broken, it’s tough to tell what exactly broke, and when. So work in very small bursts . Check the results frequently. Then, when something breaks, you know where things went wrong—it’s what you just did.

  • Change something in your HTML and/or CSS documents.
  • Save every file you touched.
  • Refresh in your browser.
  • Check to make sure you’re seeing what you want to.

Just like we did with HTML, we've got to get our files hooked up and running before we can start to style our pages in earnest. That's right—we're about to finally take the semantically beautiful but ultimately ugly HTML we've written and apply some style to it. First, though, the prep:

What we do

We're creating a stylesheet for our website and linking it to our HTML file.

Why we do

CSS is a critical piece of any site—it's the beautiful part. Without this link, our browser would never know that these styles are associated with this site (aka this HTML file). Once we're done, when the browser reads our HTML file, it will see this link, fetch our styles, and apply them to the site. Good browser. Here's a treat.

How we do

  1. Create a new file in your text editor by going to file > new.
  2. Save it in your site folder as style.css . Don't forget the extension!
  3. To tell your site where it can find your stylesheet, link to it in the <head> of your HTML document.
<head> <link rel='stylesheet' href='style.css'> </head>

It's the moment we've all been waiting for. Time to dress up your HTML and make something people actually want to look at. The enabler here is CSS , aka Cascading Style Sheets, the governing documents for the look and feel of your site. It's a good bit bigger and more complicated than HTML, and with great power comes great responsibility, young Peter. Design wisely.

Wondering why your site’s looking so ugly? HTML just says what’s what and gives the page structure. CSS is where the real fun starts–it will fix things faster than Fix-it Felix.

Thus far, we've just been building the site on your machine—which nobody can access, with good reason. (Hello, embarrasing search history from that time you got obsessed with you know what.) So to get your site out to the rest of the world, you've got to get a copy of your files onto a server that others can access. This means securing a domain name (your URL) and hosting your files somewhere.

When your site is ready, you’ll upload your files to your hosting server using a File Transfer Protocol (FTP) client. (We like Cyberduck and FileZilla.) Make sure that your files appear on your server the same way that they do in the site folder on your computer, or else your site may not work properly.

A server is a special computer dedicated to holding and serving up web files. Every time you type a URL into your browser, it makes a request—several, actually—for your website's files. The server then sends them along and your browser (aka the client) assembles everything into the visual experience you know the web to be.

Now that your website is live, check it out! Click on all of the links to make sure they’re directing to the right places and that all the images are showing. If you have to fix something, change it on your computer, save, then re-upload the edited file onto your hosting server. Did we say good job yet? No? Good job!