How do I set up a basic working environment?

Summary

Especially when working on your first web project, you'll want to test it locally before you show it to the world. You can do this by setting up a local server. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.

Active Learning

There is no active learning available yet. Please, consider contributing.

Dig deeper

Setting up your text editor

We're assuming you already have a text editor installed properly. If not, please do that first. Here are a few pointers.

Setting up a local web server

Understanding localhost

In the world of DNS, there is one special address that every machine knows: localhost. This is a reference to your own server, located on your personal machine. You can hit localhost with your browser without even being connected to the Internet.

Try accessing your localhost: https://localhost. If you see something similar to the image below, then Congratulations! You already have a web server installed on your machine. (Mac OS X, for example, comes with Apache preloaded.)

If not, we'll have to install Apache.

Either way, you should configure Apache to point to your working directory. We document both these procedures below. They are fundamentally the same, but differ in detail based on your operating system, so we discuss Windows right here. If you aren't using Windows, feel free to skip down to the Ubuntu/Linux or Mac OS X sections of this article.

Getting your server up and running: Windows

Installing Apache

Installing Apache is a bit complicated under Windows. Go here for a thorough walkthrough of installing precompiled Apache binaries.

After installing, access https://localhost/ to see if your server is working. If not, please try your friendly neighborhood search engine or a community support site. There are loads of questions already asked and answered.

Moving the localhost root to your working folder

Behind the curtain, your web server uses http to display files located on a machine. In our example, Apache is showing a file called index.html located in a subdirectory of our Apache installation. It would be better if we could work in whatever directory we please. (The file's actually called index.html.en because of language switching, but let's stick to index.html for now.)

First let's make a folder and then we'll point our web server to this folder:

1. Make a folder called htdocs in your home folder, namely at C:\Users\username\htdocs, where username stands for your user account's real user name. (If you're still using a Windows version older than Vista, keep in mind from now on that your home folder is at C:\Documents and Settings\username\htdocs.)
2. Open your Apache configuration file, located at C:\Program Files\Apache Software Foundation\conf\httpd.conf. Provide administrator credentials as needed.
3. Within the file, find the following line: DocumentRoot "C:\Users\Apache Software Foundation\htdocs". Change this line so that it points to your own htdocs folder: DocumentRoot "C:\Documents and Settings\username\htdocs"
4. Further on in the same file, find the <Directory> instruction: <Directory "C:\Users\Apache Software Foundation\htdocs"> Change this line like this:  <Directory "C:\Documents and Settings\username\htdocs">
5. Save the file.
6. Restart Apache: Start ➤ Apache ➤ Restart Apache.
7. Reload localhost in your browser. If all went according to plan, you'll see the folder's index. By default the index is a list of all the files in the folder, but we'll show you next how to customize the index page. Feel free to skip past the Ubuntu and Mac instructions.

Getting your server up and running: Ubuntu (or Linux in general)

Installing Apache

Under Ubuntu, simply fire up a terminal (Ctrl + Alt + T) and run these commands (providing your password as needed):

sudo apt-get update
sudo apt-get install apache2

After installing, access https://localhost/ to see if your server is working. If not, please try your friendly neighborhood search engine or a community support site. There are loads of questions already asked and answered.

Moving the localhost root to your working directory

Behind the curtain, your web server uses http to display files located on a machine. In our example, Apache is showing a file called index.html located in a subdirectory of our Apache installation. It would be better if we could work in whatever directory we please. (The file's actually called index.html.en because of language switching, but let's stick to index.html for now.)

Let's create a directory and point our web server to the directory:

• Create a directory called htdocs in your home directory, namely at /home/username/htdocs, where username stands for your user account's real user name.
• Open your Apache configuration file, located at /etc/apache2/sites-available/000-default.conf. Provide administrator credentials as needed. (If you aren't using a recent version of Ubuntu or another Debian-based distro, try looking under /etc/apache2/httpd.conf or /etc/httpd/conf/httpd.conf.)
• Within the file, find the following line: DocumentRoot /var/www/html. Change this line so that it points to your own htdocs directory: DocumentRoot /home/username/htdocs
• At this point you should add some file access restrictions. Add the following lines under the DocumentRoot line, substituting your name for USERNAME:

        <Directory />
                Options FollowSymLinks
                AllowOverride None
                Require all denied
        </Directory>
        <Directory /home/USERNAME/htdocs/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Require all granted
        </Directory>

• Save the file.
• Restart Apache with this terminal command: sudo apachectl restart. Provide your administrative password when prompted.
• Reload localhost in your browser. If all went according to plan, you'll see the directory's index (as pictured below). By default the index is a list of all the files in the directory, but we'll show you next how to customize the index page. Feel free to skip past the Mac instructions.

Getting your server up and running: Mac OS X

Apache comes bundled with Mac OS X. But we still need to move the localhost root to your working directory.

Behind the curtain, your web server uses http to display files located on a machine. In our example, Apache is showing a file called index.html located in a subdirectory of our Apache installation. It would be better if we could work in whatever directory we please. (The file's actually called index.html.en because of language switching, but let's stick to index.html for now.)

Let's create a directory and point our web server to the directory:

1. Create a directory called htdocs in your home directory, namely at /Users/username/htdocs, where username stands for your user account's real user name.
2. Open your Apache configuration file, located at /etc/apache2/httpd.conf.
3. Within the file, find the following line: DocumentRoot "/Library/WebServer/Documents". Change this line so that it points to your own htdocs directory: DocumentRoot "/Users/username/htdocs"
4. Further on in the same file, find the <Directory> instruction: <Directory "/Library/WebServer/Documents"> Change this line like this:  <Directory "/Users/username/htdocs">
5. Save the file.
6. Restart Apache with this terminal command: sudo apachectl restart. Provide your administrative password when prompted.
7. Reload localhost in your browser. If all went according to plan, you'll see the directory's index, which by default is a list of all the files in the directory:

Add an index page

When you visit somebody's website, you expect to see more than just a list of files. We should add a custom index page to our local web site. The index is an HTML file. It must be named index.html and placed within our htdocs directory.

Just open up your text editor and copy the following html code into a new file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>This an index page</title>
</head>

<body>
  <p>This is my own custom index</p>
</body>
</html>

Save the file in your htdocs directory as index.html:

Now, if you open your local web server at https://localhost, you'll get:

A basic file organization

Structure is critical in any website. A website is rarely made up of only HTML files. We also incorporate images, CSS styling, and JavaScript functionality. From the start you should organize all those files somehow so you don't get lost.

Obviously you're free to organize yourself any way you want, but it's most common to create at least three subdirectories: images for images, styles for CSS files,  and scripts for scripts. Simple and straightforward.

Placeholders

Soon we'll discuss how to create a web page, how to use CSS, and later on how to use JavaScript. But you don't need to know anything about those technologies to throw together a few placeholders to prepare the ground.

Let's create a new file, which will be your main stylesheet where you write all CSS style rules. Just copy the following code into a text editor:

body {
  font-family: sans-serif;
}

Save this file into the styles directory as basic.css:

Go back into your index page to link it to the stylesheet. We'll rely on the convenient <link> tag:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>This an index page</title>

  <link rel="stylesheet" href="/styles/basic.css">
</head>

<body>
  <p>This is my own custom index</p>
</body>
</html>

Now, if you reopen your local website (or refresh it if you left your browser open), you'll see that the stylesheet has changed the font:

Final project structure

To recap, by now your file/directory-structure should look like this:

• htdocs (the root directory for the project)
  • images (the directory for your images)
  • scripts (the directory for all your JavaScript)
  • styles (the directory for your CSS files)
    • basic.css (your main stylesheet)
  • index.html (the index page of your local website)

That's the minimum directory structure you should have in place to successfully scale your project as it grows. As your project develops, feel free to enhance your structure so it works optimally for you.

Next steps

Now that you are ready to start working and to learn what we've been doing with the placeholders, it's time to write your very first webpage.