Skip to main content
All CollectionsResources for StudentsUsing the CodeHS Code Editor
For Students: Creating and Managing Multi-File Programs
For Students: Creating and Managing Multi-File Programs

Create, rename, and delete program files

Lea Sloan avatar
Written by Lea Sloan
Updated over 5 months ago

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:

Screenshot of the Code Editor with an arrow pointing to the file icon. Click on this icon to view all the files associated with the project.

Using the File Tab Bar

In addition to viewing files in the File Tree, you can also use the File Tab Bar to easily view different files in the Code Editor. Clicking the file in the file tree will open the file in the bar. Click the x to close the file. You can disable the File Tab Bar if you prefer to only view the files using the File Tree.

To disable the File Tab Bar:

  1. Click the gear icon to open the IDE Settings

  2. Click Other

  3. Toggle off the Show File Tab Bar

Animated .gif showing how to access and use the file tab bar

The Main File

All programs have a Main file that has a filename in bold. This is the file that executes, or runs, when you click Run Code. In this Java program, MyFarm.java is the main file.

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

Annotated screenshot with an arrow pointing to the dropdown arrow to open up a file's contextual menu, and an arrow pointing to the Change to Main File option

While working through your CodeHS assignments, you might not be able to change or rename the Main file (but you can always rename the Main file in 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)

Animated GIF of the CodeHS Code Editor showing hot to create a new file by clicking the New+ button in the top left corner

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)
โ€‹

Animated GIF demonstrating how to rename a file by clicking the down arrow next to a file name > Rename

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.

Screenshot demonstrating how to delete 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 newPython.py by going to the Code History, finding a timestamp where this file existed, and then clicking Restore:

Animated GIF showing how to restore a deleted file

Using the URL Bar

When creating HTML programs hosted on CodeHS, like your CodeHS.me homepage, you can use the URL Bar to navigate and run your programs. The URL Bar replaces the standard Run bar with one for navigating URLs.

To enable the URL Bar:

  1. Click the gear icon in the upper left corner of the Code Editor to access the Editor Settings

  2. Under Other > Code Running Environment choose Show URL bar.

  3. When running your program, use the bar to view output from the different pages you've created.

๐Ÿ’ก Note: To view any page other than the one designated as your Main File, you will need to manually type its name in the URL bar before clicking the refresh or go button.

Animated GIF demonstrating how to enable the URL bar in the Code Editor


Reach out to your teacher if you have additional questions!

Did this answer your question?