The interface consists of three major segments: the code editor, project preview, and navigation bar.
The navigation bar allows users to move between the project’s different views, change its settings, and edit its content.
The Save button allows you to save the current state of your code.
The Clone button allows you (and other users with access to the project) to make a copy of the project. This is especially useful in situations where users want to edit a project while keeping the original copy as-is. The Clone button will only appear if you are logged into the platform.
The Media button allows you to upload images to a cloud server and provides a link that can be used to reference those images in your project. For example, the links provided could be used to display the image in your project via <img> tag.
The Cloud Variable button will allow you to create a cloud variable that will be accessible though a provided link. Each project you create has its own cloud variable with a limit of 1 kb of data.
The Share button gives you a link to a preview-only version of your web project. When someone visits a web project through the shareable link, the project’s code will not be visible.
Note that the Settings toggle and the Save, Media, and Cloud Variable buttons will only appear if you are the owner of the project. Also, the Share button will not appear unless the project has been marked “Public” in its settings.
The Settings toggle will only appear if you are the owner of the project being viewed. Clicking on this button will open the Settings view with four major sections: Project Settings, Project Metadata, Project README.md, and Project README.md Preview.
In your Project Settings, you can change the project name and set the project to public or private, which determines visibility on shared projects list. You can also lock or unlock it, which will remove edit access, and use Collab mode, which allows the project owner and instructors viewing the project at the same time to see and make code changes in real-time.
Your Project Metadata displays the project author, date created, and last modified date, as well as provides access to a Delete Project button.
The Project Readme is where you can write documentation for your project. A readme tells viewers information about the project, like instructions, credits, or other information that will be useful to the user.
The Readme toggle will switch between showing and hiding the Readme view. Note that clicking the Readme toggle will have no effect if project does not have a saved readme.
Clicking on the Editor toggle will switch between showing and hiding the code editor. If the code view is hidden, any other view on the screen will expand to take its place.
The project preview displays the product of code written in the editor. This preview updates with code changes in real-time.
Clicking on the Preview toggle will switch between showing and hiding the project preview. If the project preview is minimized, any other view on the screen will expand to take its place.