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

Editing webpages in a desktop editor

Learn how to edit your Khan Academy webpages in a desktop editor like Sublime Text.

Want to join the conversation?

No posts yet.

Video transcript

- [Voiceover] Alright so I'm editing this webpage on Kahn Academy, and of course it's All about rabbits. I've decided I wanna edit it inside my desktop editor instead. So what I will do is select all of it, and then copy it, and then head on over to my desktop editor. I'm using Sublime Text, but you could be using some other editor. Next I'm going to paste in that html, and see that it all came out very nice. Now you'll notice the syntax highlighting, so we got all the colors showing us the structure of our html. The colors in my editor are actually different from the colors on Kahn Academy. And this is just the particular theme that I picked, you can pick whatever theme you like best in your editor. Alright so now I'm going to save this file, and I'll save it as allaboutrabbits.html. So generally you wanna save your file names with no spaces, all lower case. It's a nice file name. Okay, now I'll go on over to my browser, open a new tab, and then Open File, and find where I saved it on the desktop, open that up. Here we go, we've got it. So it's showing the file from my file system, but now I wanna edit it. For that, I'm going to go back to my page, change it to adorable widdle bunny rabbits! And I'll save it, and then I go back over and I reload the page, and here's my change. Now when I reloaded the page, I did what's called a hard reload, using the keyboard shortcut command shift r, for the Mac. A hard reload, both reloads a page and tells the browser to ignore whatever it has cached locally. Browsers often like to hold on to old versions of web pages so that they can deliver them faster, but when you're debugging, you really wanna have the very latest version. So you wanna do a hard reload, command shift r. Okay, so then if we wanna make another change, make the change, command save, come on over, reload, ta-da. And that's generally the cycle when you're using a desktop editor, is you're going to make the change, save, go back over to your browser, reload, and you just get used to doing that pretty quickly. Now you could even get lucky and find that you're editor has a tool for like preview, in which case your editing cycle gets even faster. You'll just have to explore whatever editor you decide to use, and see what functionality it has.