Introduction

This page was created primarily for people who have learned HTML/CSS and possibly JavaScript+Processing.js on Khan Academy. Users there are constantly asking "how do I create my own web site?" Khan Academy provides a great "sandbox" for educational purposes, but it is not a web hosting provider.

This guide will explain how to use other services to create a web site that anyone on the Internet can browse. In fact, this page was originally set up using the exact instructions described here.

What Should I Have Learned Before Proceeding?

You should have completed at least the Intro to HTML/CSS: Making webpages lessons on Khan Academy, or completed similar lessons elsewhere. This is the absolute minimum level of knowledge required.

These optional lessons will also be useful to you, but it is not necessary to complete them before continuing here:

If you still just want to experiment and you want a less restrictive environment to do so, there's an excellent free service called Mozilla Thimble that you can try. This provides you with an online editor, but your projects can consist of multiple files (including images) and you are less restricted in what you can do. It also provides you with a URL for each of your projects that allows them to be viewed as full-size web sites. The main problem with it is that all projects are public on Thimble and anyone can "remix" (spin off) your project. You also can't use your own domain name with it. While it's more powerful than the HTML editor on Khan Academy, it isn't a substitute for a regular web site.

So if you've at least finished the Intro to HTML/CSS class on Khan Academy, keep reading.

How does this work? How much does it cost?

These instructions will describe how to set up a very simple web site using the cloud file storage service Dropbox.com and the web hosting service KISSr. Both are free for a basic level of service.

While the name "KISSr" sounds very strange for a web hosting service, the name would appear to be based on the acronym KISS which stands for "Keep It Simple, Stupid." The service does live up to its name in that it makes it very simple to host a web site, at least for anyone who knows a little bit of HTML and CSS.

Dropbox will give you 2GB of cloud storage for free, and KISSr will let you set up one site that provides 1,000 web requests per month for free. This is plenty to get started with.

Site Setup for HTML/CSS/JS

Below are the instructions for setting up your static web site. A static web site is the simplest type of web site. There are no scripts or SQL databases running on the server, but it is sufficient for front-end web development. This means that SQL is not supported on this type of site.

Anything you have learned about HTML, CSS, and JavaScript will work in this environment. You can write JavaScript that will work in the browser of anyone visiting your site.

Create a Dropbox Account

First, you will need a Dropbox account. This will provide network storage space for your web site, and you can use it for storing other files too. If you already have a Dropbox account, you can skip this part since you can use your existing Dropbox account with KISSr.

  1. Create an account on Dropbox.com - Please use this link to help the author of this guide. That way he will get referral credit which increases the storage limit on his own Dropbox account. (Thank you in advance for your help!)
  2. Install the Dropbox Software on your computer. The Dropbox software automatically syncs the Dropbox folder on your computer to your Dropbox account. This means you won't have to manually upload files.

Here is a video about how to install Dropbox if you need help, but it is not very difficult.

Log in to KISSr

Log in to KISSr using your Dropbox account. This will not disclose your Dropbox password to KISSr.

Create your subdomain of the form: yoursitename.kissr.com where yoursitename is replaced with a name you choose. Pick something good because you can't easily change it once you tell everyone about it.

Download and Install a Code Editor

To edit the code for your site, you will need a text editor. Using a code editor, a type of text editor that is designed with HTML and other code editing in mind, is essential for making it easier to write code. Here are some options which range from easiest to more difficult. All of these are free.

You can use any text editor, even Windows Notepad or OS X TextEdit, but the rest of this tutorial will assume you are using one of the code editors listed above. Your editor doesn't need any special file upload features because you're just going to edit your files locally and Dropbox Sync will automatically upload your changes to your Dropbox storage. Once uploaded to Dropbox, your files automatically become available to the web server.

Here is a beginner's level video about Brackets that introduces you to its features.

Launch the Editor and Open Your Site Folder

Launch your editor, use the File->Open Folder menu option, then navigate to the Dropbox\Apps\KISSr folder on your local hard drive. Select the folder inside that has the same name as your web site and click the Open button.

Edit Your index.html File

The index.html file is the main page on your site. In your editor in the sidebar on the left, you will see the index.html file. Click on it to start editing. You can put other html files in the same directory, or create them from within the editor and save them in your site directory, and they will show up here.

KISSr automatically creates an index.html file for you as a template, but you can delete the entire contents of the file and start over if you want. There is nothing special about the code in the file, and no reason to keep any of it if you do not want it.

Changes you make to the file, or any other files, will not be available on your web site until:

  1. You save the file, and
  2. Dropbox Sync has a few seconds to upload the file.

Small files like text files sync very quickly so it will probably happen too fast for you to notice. If you have any problems, check the Dropbox status icon to see if there are any warnings or error messages.

Verify Operation

Now that you've made some sort of change to your index.html file, load your new site in your browser to see if it's working. By now you have probably figured out that the URL will be http://yoursitename.kissr.com/ where yoursitename is the subdomain name you used.

You don't need to put a filename at the end of the URL. This is because index.html is a special filename that the server knows to look for when a specific filename is not in the URL. Any other files in the same directory will need to have their filename specified in the URL.

If you create a subdirectory in your site folder then you can put an index.html file in the subdirectory, and it will return that file if someone uses the URL http://yoursiename.kissr.com/subdir/ where "subdir" is the name of the directory. Practically every single web server works ths way, so you can assume this works on any web server.

Notice that when you make changes to an HTML file you will need to use the page reload button on your web browser before they become visible.

TIP: You can also just double-click on an html file from a file browser window on your desktop and this will load the file into your browser from the local hard drive. This is a good way of checking your code more quickly when you are editing it. The code editors mentioned above also have functions or extensions that will do this for you automatically every time you save a file. Brackets has a live preview feature that will update your browser as you type so you don't even have to save the file to see the preview.

Upload Images for Your Site

To upload images, open a file browser window (File Explorer in Windows or Finder in OS X) on your desktop, go to the Dropbox\Apps\KISSr\yoursitename.kissr.com folder and just copy your images in there.

It is strongly recommended that you create a subdirectory called img in your site folder and place all images in there. That will help prevent your site folder from getting too messy.

Once your image or images have been uploaded, you can use them with a an image element like <img src="img/myimage.jpg">.

Create Your Site Content

You are now done with the initial setup of your new web site! Now all you have to do is keep creating your site content using your HTML, CSS, and possibly JavaScript skills. Don't forget to tell tell everyone about it.

Register a Domain Name

This is completely optional and it's the only thing here that costs money, but some domains are extremely cheap (less than US$1/year).

If you don't like the domain name kissr.com (most people wouldn't blame you) you can register your own domain name. NameCheap will register some domains for less than US$1 per year, but the catch with them is that the price goes way up after a year. Fortunately domains can be transferred to a different registrar.

The best thing to do is check out Registrar Owl for a massive price comparison list. Don't forget to take Whois Privacy into account because many registrars charge money to keep your name and address out of the whois database. (Thanks to John Resig for pointing this out on his blog.)

Once you have registered a domain name, you will need to point a DNS record to the web server. Instructions on how to do that are available here. You can also use a URL redirect if necessary.

Domain names are useful not just because you can pick your own name, but also because they allow you to move your site to a different server without changing the URL. So if you later decide to move your site to a web server with more features, all you will need to do is update the DNS record for the domain to point to the new server. Nobody will even notice that you moved your site to a different service because the URL for your site will stay the same.

Oh Noes! Where is Oh Noes! the Error Buddy?

He needs some rest and is sitting this one out. Actually, there is no "Oh noes! the error buddy" in a standard web browser environment!

The training wheels are off now, but the good news is you are in the same browser environment as professional web developers. To see errors, look for the JavaScript Console in your browser menus. On Firefox it is under Tools->Web Developer->Web Console. For this option to appear in the menus you may need to enable developer or debugging options in your browser configuration depending on which browser you are using.

You can also learn more about how to access the web developer tools in your browser at this web site or this one.

The code editors mentioned above also have syntax checking features that can warn you of some types of errors as soon as you type them. Read the manual for your code editor to find out more about these. You may need to download and install extension packages to get some of these features.

And if you don't like Oh Noes! on Khan Academy and want to get rid of him, see here for instructions on how to do that.

Running Processing.js Programs from Khan Academy on Your Site

This part is optional. It only applies if you have created your own programs using JavaScript+Processing.js on Khan Academy and want to embed them in your site's pages.

Khan Academy Processing.js Template

You can use your programs from Khan Academy on your own web site, but you will need to add a little extra code to them to make them work. The main thing you need is the Processing.js Template from the Khan Academy web site. Here is a stripped-down version of it with the important parts:

    <body>
        <!--Place the canvas element where you want the canvas to appear -->
        <canvas id="mycanvas"></canvas>

        <!-- This causes the browser to load the Processing.js library -->
        <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
        <script>
            var sketchProc = function(processingInstance) {
                with (processingInstance) {
                    size(400, 400);
                    frameRate(30);

                    // YOUR CODE STARTS HERE

                    /***** Replace this line with your code from KA. *****/

                    // YOUR CODE ENDS HERE
                }};
            var canvas = document.getElementById("mycanvas");
            var processingInstance = new Processing(canvas, sketchProc);
        </script>
    </body>

Just copy the needed parts of this snippet to your HTML file and replace the indicated comment line with your code.

Put the <canvas> tag wherever you want the program's canvas to appear. There is an example program below so you can see what it will look like. If it helps any, you can also use the View Page Source function in your browser to view the HTML of this page to see how it is coded.


This is Paint Splatter from Khan Academy.

You can CSS style the <canvas> element to control things like the placement and margin of the canvas. If you want a different canvas size or frame rate, change the numbers in this part of the code:

        ...
        with (processingInstance) {
            size(400, 400);
            frameRate(30);
        ...

Differences Between Khan Academy's Processing.js and the Standard Version

There are some differences between the Processing.js library used by Khan Academy and the standard one that you will be using on your own web pages.

The good news: You can now use some Processing.js functions and JavaScript features that don't work on Khan Academy! See the following documentation for all the cool stuff you can do now:

The bad news: You might need to make some minor code changes to get your code working outside of KA. Fortunately, this usually only means adding a line or two of code. See here for some differences between KA and the standard Processing.js library.

What Should I Learn Next?

Beginners

For now you should focus on getting really confortable creating your own site with the static web server environment described above, especially if you are still in middle school, but eventually you may want to get more advanced. Here are some suggestions on what to do and learn next.

Learn More JavaScript

If you have not done these Khan Academy tutorials yet then do these before continuing:

Get Familiar With the Full HTML/CSS Documentation

Read over, or at least poke around in, the reference documentation to see just how many things you can do with HTML and CSS:

Learn About the Internet

At some point you'll probably want to know more about how the Internet works. Consider watching the Internet 101 lessons on Khan Academy. This is useful because it will help you understand some of the more advanced things described below, and some things mentioned above such as domain names.

Consider Using GitPages

KISSr limits your usage to 1,000 page views per month with the free account. While you can pay them $5/month to remove this restriction and gain the ability to create as many subdomains as you want, you might want to try using GitPages which doesn't have the usage limitations.

GitPages is slightly harder to use because you will need to learn to use Git to upload your files.

While you can just upload files to a Git project using your web browser, learning Git is worthwhile because this knowledge will come in very handy for the more advanced server hosting environments described below. At first, at least learn to use the GUI Git client provided by GitHub.

GitPages has the limitation that you can only have one domain name per user and it has to be your username. Also, everything you upload there is public to the world unless you pay a subscription fee. So be warned about that. You can use your own domain name with GitPages.

Intermediate Difficulty

This is where things start to get more difficult, but you don't need to be a professional web developer yet.

Things at this level are recommended for people who are at least in high school.

From this point on, everything will be divided into one of two categories: front end and back end. Here's what these terms mean:

Any time you hear about something new, like Express.js, you should ask yourself "is this front end or back end stuff?" If something falls into the back end category then you need a server that will support it. Express.js is a back end framework.

Not all servers support everything. KISSr, for example, doesn't support any back end development at all. All it will do is send your files to the browser and any code will have to run in the browser. Other web hosting services may only support PHP and the MySQL database. Yet others might support almost anything if you know what you're doing.

More Advanced Web Tutorial Communities

Before moving on, check out both of the following:

Learn Bootstrap

Bootstrap is a HTML, CSS, and JavaScript front-end framework that improves layout across devices with different screen sizes and provides a large number of HTML/CSS components for you to use. This may sound complicated, but it makes it easy to create some very professional looking web pages. In fact, this page was created using Bootstrap 4.

One of the biggest advantages of using Bootstrap is responsive design which means that anything created with it almost automatically looks good on everything from a mobile phone screen to a desktop web browser.

Bootstrap tutorials are available at w3schools.com and tutorialspoint.

Learn Server-Side Scripting

Learn server-side scripting with Node.js, PHP, or another server-side scripting language. Why? Because for many purposes you need to be able to write server-side code. This is especially true if you need to store information in a database.

You can learn Node.js at tutorialspoint.

There are other server-side scripting environments you can use that are based on python, ruby, and other languages.

Learn AngularJS

AngularJS is a front-end web application framework. It saves you from having to write as much front-end JavaScript when creating web applications. Tutorials are available at CodeAcademy, w3schools, and tutorialspoint.

Other Code Testing Sandboxes and Playgrounds

Here are some sites where you can play around with JavaScript, Bootstrap, AngularJS and even experiment with server-side scripting using Node.js and Express.js:

Learn SQL

If you haven't already, learn SQL with the Intro to SQL: Querying and managing data lessons on Khan Academy or something similar.

After learning SQL, you might want to install some free SQL relational database software on your own computer. The two most popular free and open source SQL relational databases are MySQL and PostgreSQL. Both of these come with installers and excellent GUI management tools.

SQLFiddle can be used for sharing code you're having trouble with or testing things out without having to install database software.

Get a Free Cpanel and LAMP-Based Web Hosting Account

LAMP stands for Linux, Apache, MySQL, and PHP. Cpanel is a site management interface that is easier to use than a command line interface.

While PHP is a bit "old school" at this point (it was one of the first server-side scripting languages) it's one of the few languages commonly supported for scripting on free web hosting accounts.

This is the point where the Intro to SQL: Querying and managing data lessons on Khan Academy become useful, because now you will be able to write back end code that uses a database server with SQL.

Here are two major web hosting providers that provide free accounts of this type:

There are plenty of others that you can find by searching around. All services of this type provide PHP scripting and SQL-based database servers. Files are typically uploaded using an FTP client or via your web browser. (Few have Git or ssh upload support.) The only major disadvantage is that usually the only server-side scripting language they support is PHP. You can learn PHP here at tutorialspoint.

You can also use this type of free account to serve static HTML pages with no PHP or database usage. They may be a better alternative to using KISSr or GitPages.

Advanced Difficulty Level

This section is very advanced, so be prepared to learn a lot of stuff if you want to do any of this.

This section is recommended for adults or possibly some high school students who are hard-core computer geeks.

Before continuing, you should learn how to use command line interfaces (CLIs), also called shells. Which one you use will depend on which operating systems you are using. Web servers most frequently use Linux, so you will need to learn that no matter what. Fortunately for Mac users, OS X uses essentially the same command line interface as Linux with a few minor differences. Windows is a little different since PowerShell is now the preferred CLI, but you can install bash or another Unix/Linux style shell in Windows if you want.

Here are some resources that will help:

Install Node.js and a Database Server on Your Desktop or Laptop

You can install Node.js on your Windows, Mac, or Linux computer, run applications from the command line, and use your browser to view them. This is useful for developing and testing your code offline until you're ready to deploy (upload) it.

It is also possible to install Apache, PHP, python, ruby, and other languages with web application frameworks on your local computer for purposes of learning and testing.

If you haven't already then you probably want to install a database such as MySQL or PostgreSQL on your local computer. See above for links to some free database software.

Get a Free Containerized Cloud Hosting Account at Heroku

Now that you know the CLI and know some things about both server-side scripting and databases, you might want to try out containerized cloud computing services. There is one that allows you to use Node.js and PostgreSQL for free called Heroku and what they give you for free is pretty impressive.

You will need to know how to use the CLI on your local computer because it's pretty much impossible to use Heroku without the CLI, but they have excellent step-by-step tutorials on how to deploy and manage applications on their service. You will also need to learn to use Git from the command line.

Heroku is a PaaS (Platform as a Service) type service which doesn't offer you true virtual machines like an IaaS (Infrastructure as a Service) type service. So don't expect to be able to upload your own virtual machine images.

Experiment With Local Virtual Servers

You can simulate an IaaS cloud hosting server on your local computer using free virtual machine software. This is helpful because it gets you used to using a virtual server the same way you would using a virtual server hosting service.

Download VirtualBox (Virtual Machine hypervisor) and run a virtual machine image installed with MEAN.JS for example. There are a lot of other virtual machine images that you can experiment with including LAMP images.

Once you have a virtual machine running, you will want to treat it like it's running on an unknown rack mount server in some unknown location where you will never see it, because this is the situation with actual virtual machine hosting services. In other words, you want to treat your VM like a "headless" machine (one with no monitor or keyboard).

To access and control your VM, you will need to use ssh which is a way to get a command line on remote computers and upload files. Hopefully your VM image has git installed on it already because the best practice for uploading changes to a site is to use git.

Virtual Web Server Hosting

These days most people are actually happy with CaaS (Container as a Service) and PaaS type services because they do almost everything one could want but are less trouble to deal with than full virtual machines. But, once you're familiar with virtual machine servers, you might want to create your own web site based on one and possibly run other types of servers on it such as game servers.

This is very advanced, so you will need to learn a lot about system administration and web devlopment before you can make good use of an environment like this. Get comfortable with running a virtual server on your own computer first. Here are some recommendations.

A virtual server hosting account running a LAMP (Linux, Apache, MySQL, PHP) installation will do pretty much anything that one could want, but it isn't much different than the free LAMP-based web hosting accounts mentioned above. The main advantage is that you will have command line access and can do whatever you want with the virtual server.

A virtual server hosting account running MEAN.JS provides an environment with MongoDB and Express.js plus Node.JS for server-side scripting. This is a little more sophisticated than the previous option but it entirely uses JavaScript so learning PHP isn't necessary. Learning the JavaScript frameworks (Express.js, Node.js, and Angular.js) is necessary though, and you can learn more about some of those on CodeAcademy. You can experiment with Node.js and Express.js at HyperDev.

Cross-Platform HTML/CSS/JS Desktop and Mobile Application Frameworks

Not only can you make web sites and web applications using HTML/CSS/JavaScript technology, but you can also make both desktop and mobile applications using these things. Desktop and mobile app development is significantly different than web development so it will require some additional learning.

These will all take quite a bit of experimenting with to get used to. They are usually more complicated than just creating web pages, but easier to learn for those already familiar with HTML/CSS/JS. But, since they are cross platform, you don't have to write a completely different version of your application for each operating system.

Desktop Application Frameworks

If you want to make a desktop app using HTML/CSS/JS then you might want to check out Electron, a desktop application framework that uses Node.js under the hood. The code editors Atom and VSCode were created with Electron, as were many other desktop applications, so it seems to be a pretty solid choice.

Once you create something with Electron you will be able to generate a Windows, OS X, and Linux version of your application with little to no additional work.

Mobile Application Frameworks

For mobile applications the most popular JavaScript frameworks seem to be:

Once you know how to use them you will be able to generate both Android, iOS, and even Windows Phone versions of your application with little or no additional work.

Conclusion

If you've made it this far and managed to at least tinker with everything mentioned here then congratulations! But you're still not a professional web developer just yet. There's stil quite a bit to learn about things like user interaction, usability, software engineering practices, and application design. But hopefully all of this has at least gotten you started toward creating the next killer application of some sort.