Instructions to help Khan Academy students and others create a working public web site using what they've learned about HTML, CSS, and JavaScript.
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. (Glitch actually does support a node.js backend including different databases. But this is a bit more complex to use.)
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.
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 KISSt.
Here is a video about how to install Dropbox if you need help, but it is not very difficult.
First make sure you are already logged in to your DropBox account. Then, after logging in to dropbox via dropbox.com, go to KISSr and authorize it to link to 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 people about it.
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 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.
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:
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.
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.
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">.
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.
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 most 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.
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.