How to Create a New Web Project

Web projects are made in Web Studio ⎋, Codecraft Works’ online editor for HTML, CSS, and JavaScript.

Web projects are no longer created at app.codecraftworks.com/web. Use studio.codecraftworks.com instead. Projects you made before the move are already in Web Studio. Sign in with the same account you used before, and see How to Sign In to Web Studio for help.

Instructions

  1. Go to studio.codecraftworks.com ⎋ and make sure you are signed in. If you see a Sign in button in the upper right corner, select it and sign in first. See How to Sign In to Web Studio.

  2. On the Web Studio home page, select the New web project button.

    The Web Studio home page with the heading "Build something for the web" and a blue "New web project" button below it.

  3. Your new project opens in the editor. It starts with a little bit of sample code, and Web Studio gives it a random name, like “Cheerful Plum Walrus.” You can rename it at any time.

    A brand new project in the Web Studio editor. The HTML pane contains "Welcome to your web project canvas!" and the project is labeled "Private."

  4. Write your code in the HTML, CSS, and JS panes on the left. The preview on the right updates as you type.

  5. To save your work, select the Save button in the toolbar, or press Ctrl+S (Windows/Chromebook) or Command+S (Mac). Web Studio does not save automatically, so remember to save often! A “Saved” message lets you know your changes are saved.

    The "Saved" pop-up, which reads "Your changes are saved. The published page updates a moment later." with a "Keep working" button.

Rename Your Project

  1. Select the Settings toggle in the toolbar.
  2. Type a new name in the Project name field.
  3. Select Save settings.

Private and Public Projects

New projects are private: only you and your Codecraft Works instructors can open them, and they don’t appear in the gallery. When you are ready to show your project to others, open Settings, set Visibility to Public, and select Save settings. Public projects appear in the Web Studio gallery and on your profile, and can be shared with a link. See How to Create and Use Share Links.

Find Your Projects Later

Every project you make is listed under Your projects on the Web Studio home page ⎋ when you are signed in, with the most recently changed projects first.