Tutorial

Your first project in Zide

Start with a weather page, make your first commit, and try an AI-assisted change you can check yourself.

Based on Zide v0.7.6.

The sample already has files and Git history, so you can get started without setting up a project. First you will change its heading. Then you will fix a wrong temperature and finish its forecast. Work through the chapters in order and keep the same sample between chapters.

Start with the sample →

Before you begin

  • Install the current version from Download Zide. If Zide reports that Git is missing, follow its setup guidance before creating the sample.
  • The sample is plain HTML, CSS, and JavaScript. No package installation, weather API key, or Git hosting account is needed for the local exercises.
  • For the AI chapters, check that your Zide account has AI access and that your selected model is available. Requests through Zide use credits.
  • The CLI Agent chapter needs Claude Code or Codex installed and signed in separately. Allow extra time for that setup.

The main walkthrough works in the default single-pane layout. Custom panes and questions beside a file are optional exercises, with their setup explained where you need it. When a button shows only an icon, hold the pointer over it to read its name.

Follow the walkthrough

  1. Start with the sample

    Create your weather project and see it run. 5 minutes.

  2. Find your way around

    Get comfortable with Project Tabs, activities, and panes. 5 minutes.

  3. Make your first commit

    Edit, inspect, stage, and record a change with Git. 10 minutes.

  4. Get answers with Ask Zide

    Ask about the app, a file, or a commit beside your work. 5 minutes.

  5. Build with Zide Assist

    Fix a bug, finish the forecast, and check the result. 15 minutes.

  6. Use Claude Code or Codex

    Run your own AI tool in a CLI Agent tab. 10 minutes, plus tool setup.

  7. Take the workflow further

    Try branches, worktrees, and a repository of your own. Choose an exercise.

Keep the activity bar reference nearby when you want to know what an item does.

Keep learning

  • Work in parallel with QuickTree

    Fix the temperature and build the forecast in separate copies of the sample, then merge both changes into one finished page. 35–50 minutes, plus AI response time.

  • Issue to release with GitHub

    Track a bug, inspect a failed GitHub Actions run, review a pull request, and publish a practice release from Zide. 45–60 minutes, plus account setup and CI time.

When something looks different

Click the circled question mark button in the upper right corner of the app to open the guides bundled with your installed version. AI replies will vary; compare the files, page, and test results with the examples in each chapter.