Main content
Course: Unlisted resources area > Unit 1
Lesson 1: Unlisted videos- A message from Sal on school closures and distance learning with Khan Academy
- Video tour: Teaching programming in the classroom
- Video tour: Khan Academy AP®︎ Computer Science Principles
- Adding two 16-bit binary numbers
- Editing a webpage in an online editor
- Editing webpages in a desktop editor
- Editing a webpage from a command line editor
- Using inspect element for HTML
- Using inspect element for CSS styles
- A Tour of Programming on Khan Academy
- John Resig: Building jQuery
- Genesis effect
- Online Python Tutor (1-minute demo)
- Tetrilingo
- LXJS 2013 - Bill Mills and Angelina Fabbro - JavaScript for Science
- AP CSP example: Traffic simulation
- Scientific simulations: IllustrisTNG Single Galaxy Formation
- Memoized Fibonacci visualization
- Memoized factorial visualization
- Bottom-up Fibonacci visualization
- Recursive Fibonacci Calls (Diagrammed)
- Memoized Recursive Fibonacci Calls (Diagrammed)
- A message from Sal on school closures and Khan Academy remote learning.
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Editing webpages in a desktop editor
Learn how to edit your Khan Academy webpages in a desktop editor like Sublime Text.
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.