Setting up a local development environment

So you’re all ready to dive in eh? Well hold up there Superman, you’ve gotta get a few things set up first. In order to start writing and testing out code, you need to have some kind of development environment. This includes the software you’ll be using to write your code, the location where all the files will live, and the browser(s) you plan to use to test your code with.

Where do I actually write HTML code?

Good news! There is software on your computer for this already! If you’re on Windows, you’ll have a program called Notepad, and if you’re on a Mac you’ll have a program called TextEdit. If you’re on Linux, you probably helped write the code for whatever code writing software is on your computer, so I won’t even bother.

The reason for using either Notepad or TextEdit rather than say Wordpad or MS Word is because these editors are plain-text editors. They don’t add any extraneous bits of proprietary code to the saved file, they just make a perfectly clean document. There are a number of third party programs for writing code as well. I personally use a program called Coda 2 (Mac software), but I’ve heard great things about some more basic ones like TextWrangler (also for Mac). Sorry Windows folks, you’ll have to google it if you want to find other good text editors.

To save out HTML files from any of these programs, you need only add the extension .html to the end of the file name. There are a few rules to keep in mind. For HTML files, the file name shouldn’t use any spaces. The files are case sensitive, so you should always use lowercase letters for the sake of keeping it simple, and avoid using special characters as much as possible, with the exception of – and _.

Where should I put my HTML files?

Well, this is up to you. For learning, I don’t think it’s worth buying any kind of web hosting. For this series, I’m going to assume you’re working locally on your own machine; I will get into FTP and web hosting later on. For now, the best thing you can do is create a folder in your documents (or on your desktop if you’re lazy) and pretend that that folder is your web host. This is where all the files for your website will live.

File setup and management

Once we get into linking pages to each other, we’ll want to be really clear on where all of our files are. Images, style sheets, javascript files, and the actual html files are all pretty common things you’ll want to be prepared to have. Here’s my setup recommendation:

In your main folder, which we’ll call “My First Website”, you’ll want to have a folder called “css”, another called “js”, and one called “images”. If you want to be ambitious and change the names to something else that you think is more spectacular, do feel free, just make sure they’re lowercase and don’t have any crazy special characters. You don’t want the file names to be very long because we’re going to have to type them out a few times, so keep it simple. This is the way I do it, so this is the way I’ll demonstrate it.

Create the homepage

There is one very important HTML file you absolutely must create in order to have a website. That file is for the home page. So when you go to a website, you’ll type in some web address like “http://kristi-lynn.org” and your web browser immediately searches for the index file. The index file is the home page. It can be index.html or index.php depending on what language you’re using to write the page code. For our purposes, we’ll stick with index.html for now. You’ll need to create this file in your text editor. Grab my basic example of an HTML page from the introduction, and paste it into your document. Save that document as “index.html” into the top level of your “My Website” folder.

Does it matter which web browser I use?

Not much, no. But for learning, I would recommend a browser that’s somewhat forgiving. I prefer browsers built on WebKit, which would include Chrome or Safari, but if you absolutely love Firefox, don’t let me stop you. I wouldn’t recommend using IE to my worst enemy, but if you must, please use IE9 or higher. Don’t waste your time with anything lower. We’re looking to the future here.

As you get more advanced, it’s a good idea to test your code in multiple browsers as each browser will render things slightly differently. This is just the nature of the web. As I mentioned in the introduction, HTML is a markup language; it has standards, but those are often open to interpretation. Some browsers are very strict in their interpretations, others give you some leeway. Others decide willy-nilly which rules they’re going to follow *cough*IE*cough*.

Action steps for this article

Goal: Set up your development environment

  1. Create a folder on your computer and call it “My Website”.
  2. Create a file using your plain text editor, add the HTML code from this page to it, and save it in your My Website folder as “index.html” (no quotes).
  3. Create folders in the My Website folder called “css”, “js”, and “images”.