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.
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.
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.
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:
Conversation: Send a message to your teacher if you need help with the exercise you're working. 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 really 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.