Student Homepage
The Student Homepage is the first page you'll see when you log in 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 pick up 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 section in the left-hand navigation bar to access your notes, conversations with your teacher, Due Dates page, and more
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 completed for each Module as well as the color-coded Assignment bubbles.
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 / Gray: 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, click 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: switch 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
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 at the bottom left to return to your Assignments page for this course
Click the Module name to view all of the Lessons and Assignments 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.
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 white Layout menu in the lower left-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 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:
Conversation: send a message to your teacher if you need help with the exercise you're working on. Check out this article for more info on using the Conversation feature
History: view all of the changes and revisions that have been made to a certain program. You can also restore a program to any previously saved version, which is helpful if you make a change to your code and it's no longer running as expected
Share: create a shareable link to your program. Check out this article to learn more about sharing a program and controlling access to your shared programs
Slides: review slides from the assignment's lesson. You can also access My Notes via the Slides tab
Textbook: view the course textbook, if there's a textbook for your course
Print a copy of your code if you need to hand in a physical copy or work on it offline
Download your code as a .zip or .txt file. Check out this article to learn more about downloading your code
About: view the programming language and version used for this assignment
Still have questions? Ask your teacher to learn more!