What Is the Code Sandbox?
The Code Sandbox is a browser-based editor for writing HTML, CSS, and JavaScript and seeing the result immediately. It also includes code validation, AI Help, and saved projects.
What Is It For?
Use the sandbox to practice coding, test ideas, troubleshoot problems, or experiment with examples from the lessons. Your code runs inside the sandbox without affecting the rest of the website.
How Do You Use It?
- Write code: Enter HTML, CSS, or JavaScript in the three editors. Press Tab to indent four spaces or Shift + Tab to remove indentation.
- Update the preview: Select Update to run the current code and refresh the result. You can also press Command + Enter on a Mac or Control + Enter on Windows.
- Save a project: Select Save to store the current project in this browser. You can also press Command + S on a Mac or Control + S on Windows.
- Create another project: Select Save New to save the current code as a separate numbered project.
- Modify a saved project: Select Load on a saved project, make your changes, and select Save again. The Sandbox heading shows the active project, and an asterisk appears when it has unsaved changes.
- Delete a project: Select Delete, then Confirm to permanently remove the saved project.
- Recover unsaved work: If the page is accidentally refreshed, the current working code is restored in the same browser tab.
- Start over: Select Reset to clear the editors and leave the current project.
- Get AI help: Use AI Help to ask a question about the code currently in the sandbox.