Some program types on CodeHS, such as Java and HTML, allow you to create multiple files for your program. This article will show you how you can create, rename, delete, and manage your files on CodeHS.

To view the File Tree, click the file icon on the left-hand pane in the Code Editor:

file icon with pointed brackets

The Main File

All programs have a Main file that had a filename in bold. This is the file that executes, or runs, when you click Run Code. In this HTML program, index.html is the main file.

You can change the main file in your program by: clicking on the down arrow > Change to Main File

arrows point to green Change Main File option

While working through your CodeHS assignments, you might not be able to change or rename the Main file. (You can rename the Main file on your Sandbox programs). In general, if an assignment has files already created in the file tree, you should leave those unchanged.

Creating a New File or Folder

To create a new file or folder:

  1. At the top of the file navigation pane, click New +

  2. Choose File or Folder

  3. Enter the name for your new file or folder and click Add Folder or Add File

Don't forget the extension for your file! (Example: about.html, example.java, style.css)

gif shows creating file

Renaming a File

To rename a file, click the down arrow next to the file name and choose Rename. Enter the new file name and click Save.

Don't forget the extension for your file! (Example: about.html, example.java, style.css)

shows how to rename a file

Deleting a File

To delete a file, click the down arrow next to the file name and choose Delete. A pop-up will ask you to click OK to confirm that you want to delete the file.

shows deleting a file

Recovering a Deleted File

If you delete a file by mistake, you can restore it by using your Code History.

  1. Go to More > History

  2. Select the timestamp you'd like to go back to

  3. Click Restore from Snapshot

This .gif demonstrates restoring a file called contact.html by going to the Code History, finding a timestamp where this file existed, and then clicking Restore:

shows restoring a file

Still have questions? Ask your teacher!

Did this answer your question?