All Collections
Resources for Students
Using the CodeHS Code Editor
For Students: Navigating CodeHS & the Code Editor
For Students: Navigating CodeHS & the Code Editor

Check out these helpful tips for Navigating the Student Homepage, Assignments page, and Code Editor as a student

Sara Jenis avatar
Written by Sara Jenis
Updated over a week ago

Student Homepage

The Student Homepage is the first page you'll see when you login to CodeHS.
​

Students enrolled in multiple sections should first select the appropriate section to view their Student Homepage:

  • Assignments: Click View All Assignments to go to your Assignments page

  • Messages: Review messages from your teacher, including: feedback on your coding assignments, grades, and responses to questions you've asked your teacher.

  • Resume: Click Next Assignment to pickup where you left off the last time you visited CodeHS

  • Due Soon: Check your upcoming Due Dates or any past due assignments.

  • My Links: Use the My Links navigation bar to access your notes, conversations with your teacher, Due Dates page.

  • Resources: Find links to our Glossary and Textbooks, as well as any course-specific resources.

Student Assignments Page

From your Assignments page, you can access all of your available activities. Each Module is made up of several Lessons. Each Lesson is made up of a video, a check for understanding, examples, and coding exercises.

Track your progress in the course by looking at the percentage complete for each Module as well as the color-coded Assignment bubbles.

image.png [crop output image]

CodeHS Assignment Color Coding:

  • Finalized / Teal: Your assignment has been graded and finalized

  • Submitted After Review / Dark Magenta: Your assignment has been resubmitted and is awaiting further review by your teacher

  • Reviewed / Pink: Your assignment was reviewed by your teacher and was sent back with the status message Needs Work

  • Submitted / Green: You have successfully submitted the assignment and it is ready for review by your teacher

  • Not Submitted / Yellow: You have opened or started the assignment, but it hasn't been submitted yet

  • Unopened / Grey: You have not yet opened the assignment.

The Code Editor

The Code Editor is where you will go to write your programs! You can run and test your code, modify your Code Editor settings, and access additional resources for help.

Code Editor Settings

You can change your default Code Editor settings. To access the settings, clicking the gear icon in the upper left corner of any editor.

  • Editor Font: adjusts the font size of the student's code

  • Console Font: adjusts the font size of the console on the right

  • Editor: adjust between using the Ace and Monaco editor engine. Monaco allows you to use different keyboard shortcuts to autocomplete or format lines of code!

  • Editor Theme: change the color scheme of the Code Editor to a higher contrast theme, such as Terminal or Monokai

  • Console Theme: change the output console to Light or Dark Mode

  • Autocomplete: automatically adds closing brackets while typing code.

  • Auto-Format: Available in Javascript programs. Automatically formats code to a consistent style.

  • Blocks/Text Settings: toggle block coding

  • Wrap Lines: separates lines of code so that they are fully visible within the editor window

  • Show File Tab Bar: Switch between files easily using the File Tab Bar. Read more about the Bar here.

Gif of editor and console settings
Gif showing Karel Program editor settings

Navigating Your Assignments from the Code Editor

Use the bottom navigation bar in the Code Editor to navigate to other assignments in your current Module or to return home to your Assignments page.

  • Use the home icon to return to your Assignments page for this course

  • Click the Module name to view all of the Lessons and Activities in the current Module

  • Expand a Lesson to view and navigate to an assignment.

Using the Code Editor

On the right-hand side of the Code Editor, you'll find several helpful tabs that you can reference as you work on a coding assignment.

The gif shows Karel code running in the code editor and the user presses the check code button to view errors in the code.

  • Run Code: The Run Code tab is where you'll run and test your code before submitting. Use the green Run button to run your code as you work on an exercise.

  • Test Cases: Use the Check Code button to test your code. The Test Cases provide feedback to help you debug your code. For more tips on debugging your code, check out this article.

  • Assignment: Double check the Assignment tab as you work to make sure your code meets all requirements of the assignment and to see a sample program output.

  • Docs: Check the Docs tab for help! This quick reference provides information you may need to finish your program including formulas, functions, commands, and more.

  • Grade: You can view your grades directly from the Grade Tab, see how many points the assignment is worth, and check the status of an assignment. Learn more about viewing your grades on CodeHS.

  • Display Settings: Use the blue Layout menu in the upper right hand corner to configure the layout of your Code Editor. You can hide the left navigation panel and output windows or enter fullscreen mode for the code and output windows.

Format your Code

If you are working in a Javascript program, you can use our Auto-formatter to make sure that all your code conforms to a consistent style. Once the Auto-format setting is turned on, the program will automatically format the code each time you save the program. To enable Auto-Format, click the gear icon in the upper left corner to access the the Editor Settings and toggle the Auto-Format control under Editor.

The More Menu

The More menu allows you to access additional links and resources that may be helpful while you're working on an assignment:

Did this answer your question?