If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Developing 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:
Khan Academy video wrapper
Editing a webpage in an online editorSee video transcript

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:
Khan Academy video wrapper
Editing webpages in a desktop editorSee video transcript

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:
Khan Academy video wrapper
Editing a webpage from a command line editorSee video transcript

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.
Bar chart of editor preference—VSCode, Sublime, Emacs, VIM, in that order.
Last surveyed in June 2018, editor preferences are very subject to change.
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?

  • blobby green style avatar for user tcoleman27
    How long does it take you to fully know the basics of coding
    (36 votes)
    Default Khan Academy avatar avatar for user
  • mr pink red style avatar for user Sebastian Triana
    how do you make your own url
    (17 votes)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user Urvashi
    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)
    Default Khan Academy avatar avatar for user
  • leafers seed style avatar for user Marcel Lunet
    What operating system do you recommend?
    (6 votes)
    Default Khan Academy avatar avatar for user
    • duskpin ultimate style avatar for user André L. Cardoso Pereira
      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)
  • female robot ada style avatar for user La Cami
    Do you teach command-line on Khan academy? I really like keyboard shortcuts!
    (13 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Hayden Horan
    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)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user Rowan Belt
    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)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Jim E
      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.
      (7 votes)
  • blobby green style avatar for user empedokles
    Is there a live preview in sublime text?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • orange juice squid orange style avatar for user Sean
      There is a live preview in one desktop editor; called Brackets. You have to have Chrome installed for it to work, but when you install brackets, all you have to do is once you have the html saved and stuff, click a lightning bolt icon on the right side of the editor, so then a Google Chrome window will open, with a live preview of your code in it. (Brackets has a built in server).
      ----------------Brackets is free--------------
      (10 votes)
  • duskpin ultimate style avatar for user Tessa
    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)
    Default Khan Academy avatar avatar for user
    • stelly yellow style avatar for user Tony Punnacherry
      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!
      (2 votes)
  • blobby green style avatar for user jebby252
    for others on windows to "Hard reload" press Ctrl shift r then it will Hard reload. Upvote me if this helped :)
    (3 votes)
    Default Khan Academy avatar avatar for user