Main content
Computer programming
Course: Computer programming > Unit 2
Lesson 5: Web development toolsDeveloping webpages outside of Khan Academy
We provide an in-browser coding editor for you here on Khan Academy to make it easy for you to try out HTML, get immediate feedback, and share your work.
However, our coding editor doesn't let you try everything—both for security reasons and because it's hard to host a full-featured editor in such a small space!
Once you learn HTML/CSS here, you will likely want to start developing webpages in a more full-featured editor outside of Khan Academy, which would add features like multiple files, file search, and custom plugins. In any editor that you use, make sure you save your file with a filename that ends in ".html"— that's the file extension that is used for all HTML pages to make sure that both editors and browsers know what they are.
Online editors
One option is to use an online editor, similar to ours but with additional features. You might want to use an online editor if you have a computer that doesn't let you download apps or you want to use the same editor across multiple computers. Popular online editors are JSBin, Repl.it, Glitch, and CodePen. If you're on a ChromeBook, you can install a Chrome web app like Caret or Zed. Here's a video of me editing a webpage in Cloud9:
Desktop editors
Another option is to use a desktop editor. An app is downloaded to your computer and saves the files to your hard drive. There are lots of desktop editors for you to pick from, depending on what OS and price you're looking for. Some popular desktop editors are Visual Studio Code, Atom, Sublime Text, Adobe Brackets, and Notepad++ (for Windows). Here's a video of me editing a webpage in Sublime Text:
Command-line editors
A third option is to use a command-line editor. If you're not already familiar with the command line, you probably don't want to go down this route since you'll also need to learn a lot about the command line first. On the other hand, if you love typing and navigating with your keyboard instead of your mouse, you might find you love command-line tools. Two popular command-line editors are Emacs and Vim, and they are often already installed on Unix-based systems like Macs and Linux. Here's a video of me editing a webpage in Vim:
Picking an editor
Which one should you pick? Well, you're welcome to just keep using the Khan Academy HTML/CSS editor for now. Eventually though, you'll want to get comfortable with at least one other editor. You might want to try out a couple different free options and see which one you like the most. You can also ask around to see what friends and colleagues use. It's often helpful to use whichever tool is most popular with your peers because then you can ask them for help.
For example, here's a graph of what my Khan Academy colleagues use. Some of them don't write HTML/CSS, so their favorite editor might not be a good choice for you.
If you're reading this and already use a different editor to develop webpages, you can share what you're using and why you like it in the Tips below. If you have any favorite editor plugins or browser development tools, share those too. Sharing is caring. 😊
Want to join the conversation?
How long does it take you to fully know the basics of coding(38 votes)
Well it depends on your prior knowledge, you ability to do work, your free time, your enthusiasm, and other factors. I'd say if you really want to learn, and you can put in an hour a day, you'll be up and running in a matter of weeks. You might want to start with the "Hour of Code" if you want to cover the basics quickly. (It doesn't really take an hour. You can be done in half.)(128 votes)
- Is there a live preview in sublime text?(34 votes)
No, but you can open the HTML file you're editing right in your web browser. Be sure to refresh when you make updates.(35 votes)
how do you make your own url(17 votes)
You'll have to buy a domain. It's fairly expensive, so saving your own webpages onto Khan Academy or other online editors like c9.io is probably the best thing to do.(41 votes)
If I use the editor, is it free? The ones that Khan Academy has mentioned in this article?
I think notepad++ is only on windows and I work on a Mac.(13 votes)- I am using Brackets on Mac and it is free. I just finished a really big project using it and I have no complaints :)(9 votes)
What operating system do you recommend?(6 votes)- Like Dalendrion said, many system would do the job. But I recommend Linux, (I use Ubuntu 14.04, found it easy to learn and use), because it's free, a little faster than windows (specially after some months of use), almost invulnerable to the great majority of existing viruses, and have some amazing free tools. Also, bugs usually gets solved way faster than non-free systems.
But the most important is that you must feel comfortable with your operational system so you can focus in your coding, instead of having headaches prepare your computer to use it.(25 votes)
Do you teachcommand-lineon Khan academy? I really like keyboard shortcuts!(13 votes)
If you'd like to learn about the command line I suggest you check out this tutorial: https://ryanstutorials.net/linuxtutorial/. If you're on a Mac, that works. Otherwise you'll want to install a Linux distribution. Xubuntu is an easy one to get started with: http://xubuntu.org/.(16 votes)
- First of all, these are great tutorial videos. However, I am having a little trouble implementing the javascript (using processing.js) that we learned on Khan Academy into an html file. It would be super helpful if somebody were to make a video demonstrating how to do this.(7 votes)
- save the JavaScript file in the same folder as the HTML file. Then (let's say your JavaScript file is named myfile.js) just before the closing </body> tag at the bottom of your html document add <script src="myfile.js"></script>(18 votes)
- What makes these editors better than Khan Academy's editor or Notepad (which comes as a part of Windows)? Also, is there a way to have a color picker inside the editor? That seems like a useful feature. Thanks!(6 votes)
They are better than KA editor because they are installed localy, so no need to copy paste the code from KA when ready (unless you make a KA project).
They are better than Notepad because they have functionality for formatting and visualizing code.(8 votes)
- I am building a website outside of khan academy (thimble.mozilla.org) and was wondering how to make a sign up/log in page, and how websites keep track of who makes what log in. Is this something I need a web liscense to make? Or am I just doing it wrong? I've tried so many wikihow articles, and none have helped. Thank you!(5 votes)
As Mr. Hartley said, it is complicated. While making a login system may be simple coding-wise, you have to deal with security very seriously, especially if the site collects confidential information like emails or credit card. Many sites use external services instead such as using Google to login, or PayPal for payments so they don't have to deal with the hassle.
If your project is small, any beginner can figure out how to make a login system. You need to learn about back-end programming first though, and how to get it working on your computer and on a service like Heroku. Unlike the web, where you can only use JavaScript efficiently, on the back-end you can use whatever you want: Java, Python, Rust, Go, Ruby, etc. You can also use JavaScript using Node.js, which integrates very well with the front-end!(5 votes)
- for others on windows to "Hard reload" press Ctrl shift r then it will Hard reload. Upvote me if this helped :)(6 votes)
I think there are people across the globe on Khan Academy.
If you sort the questions by Recent (instead of most voted) then you'll see the last question was just two days ago :)(5 votes)
