Merge branch 'develop' of https://github.com/zenml-io/vscode-tutorial-extension into develop

Author: safoinme

.devcontainer/extensions/zenml-codespace-tutorial-0.0.1.vsix

@@ -1,98 +1,80 @@
-# ZenML VS Code Tutorial Extension - Developer Guide
+# Welcome to the ZenML Interactive Tutorial Extension 👋
 
-Development repository for contributors working on the ZenML VSCode Tutorial Extension.
+This VS Code extension provides an interactive, hands-on learning experience for ZenML - the open-source MLOps framework. Master ZenML fundamentals through 10 guided pipeline examples with step-by-step tutorials and one-click execution!
 
 <div style="display: flex; justify-content: center;">
   <img src=".devcontainer/assets/welcome-page.png" alt="Welcome page screenshot" width="1000" />
 </div>
 
-## 🚀 Quick Start
 
-### Prerequisites
 
-- [Node.js](https://nodejs.org/en/download/)
-- [VS Code](https://code.visualstudio.com/Download)
-- [Docker](https://www.docker.com/get-started/)
-- [Dev Containers Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
-
-### Setup
-
-1. **Clone & install**:
-
-   ```bash
-   git clone https://github.com/zenml-io/vscode-tutorial-extension
-   cd vscode-tutorial-extension
-   npm install && npm run compile
-   ```
-
-2. **Open in VS Code** and reopen in dev container when prompted
-
-3. **Test the extension**: Press `F5` or use Run and Debug panel → "Run Extension"
-
-**⚠️ Important**: Always run in dev container - the extension expects this environment.
-
-## 🛠️ Development Workflow
 
-### Making Changes
+## ✨ What You'll Learn
 
-The extension runs in two places:
+- **Pipeline Fundamentals** - Create your first ZenML pipeline
+- **Data Flow** - Pass data between pipeline steps
+- **Parameters** - Make pipelines flexible with parameters
+- **Organization** - Tag and organize your pipeline runs
+- **Tracking** - Log metadata to record useful facts about runs
+- **Visualizations** - Create automatic & custom charts
+- **Performance** - Use caching and parallel processing
+- **Reliability** - Handle errors with retries and hooks
+- **Configuration** - Use YAML to separate configuration from code
 
-- **Development** (this repo)
-- **User-facing** ([vscode-tutorial repo](https://github.com/zenml-io/vscode-tutorial))
+**10 Progressive Tutorials** that build from basic concepts to advanced ZenML patterns.
 
-**After making changes**, you need to:
-
-1. **Build extension**:
-
-   ```bash
-   npm run buildExtension
-   ```
-
-   _This packages the extension and replaces the current one in `.devcontainer/extensions/`_
-
-2. **Test in user environment**: Test changes in both GitHub Codespaces and local dev containers
-
-### File Structure
-
-- **Extension code**: Main TypeScript files
-- **Tutorial content**: `pipelines/` directory
-- **Tutorial structure**: `tutorialMetadata.json`
-- **Entry point**: `extension.ts` → `Tutorial` class
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+  <img src="assets/architecture.png" alt="Architecture"  />
+</div>
 
-### Editing Content
+## 🚀 Get Started
 
-**Quick text edits**:
+### GitHub Codespaces (Recommended)
 
-- Uncomment the "edit text" button in WebView HTML
-- Edit markdown files directly
-- Save (`Cmd+S`) → Reload extension (`Cmd+R`)
+The fastest way to get started - no local setup required.
 
-**Adding/reorganizing steps**:
+1. Click **Code ▶ Codespaces ▶ Create codespace on develop**
+2. Wait ~2 min for setup (container, dependencies, extension)
+3. The extension will launch automatically
 
-- Edit `tutorialMetadata.json`
-- Each section has steps with optional `doc` (markdown) and `code` (Python) files
+### 💻 Alternative: Local Setup
 
-### 🔔 Pipeline Health Checks
+**Requirements:**
 
-**Workflow**: [`.github/workflows/test-pipelines.yml`](.github/workflows/test-pipelines.yml)
+- [Docker Desktop](https://www.docker.com/products/docker-desktop)
+- [VS Code](https://code.visualstudio.com/)
+- [Dev Containers Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
 
-| Trigger                                            | Action                                       | Alert                                                                             |
-| -------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------- |
-| Daily @ 09:00 UTC + on push/PR to `main`/`develop` | Run all tutorial pipelines with latest ZenML | On any failure, sends a single message to `#sre-alerts` via `DISCORD_WEBHOOK_SRE` |
+**Steps:**
 
-This ensures we catch any breaking changes in ZenML or our tutorials before users do.
+1. Clone this repo & open in VS Code
+2. Click **Reopen in Container** when prompted
+3. Extension starts automatically
 
-## 🐳 Docker Image
+## 🎓 Tutorial Structure
 
-The user-facing repository uses a pre-built Docker image for faster startup.
+| Tutorial | Topic           | Skills                   |
+| -------- | --------------- | ------------------------ |
+| 1        | Hello World     | Basic pipeline creation  |
+| 2        | Step I/O        | Data flow between steps  |
+| 3        | Parameters      | Pipeline configuration   |
+| 4        | Tagging         | Run organization         |
+| 5        | Metadata        | Logging and tracking     |
+| 6        | Caching         | Performance optimization |
+| 7        | Visualizations  | Charts and plots         |
+| 8        | Fan-out/Fan-in  | Parallel processing      |
+| 9        | Retries & Hooks | Error handling           |
+| 10       | YAML Config     | Configuration management |
 
-**To update the image**:
+## 🎮 How to Use
 
-1. Switch to `docker-image-build` branch
-2. Build and push following [Docker's guide](https://docs.docker.com/guides/getting-started/build-and-push-first-image/)
-3. Update `devcontainer.json` to reference new image: `"image": "zenml/tutorial:latest"`
+- **Run** pipelines via the “Run Pipeline” button
+- **Navigate** with Previous/Next buttons
+- **Inspect** output in the terminal and Dashboard link
+- **Experiment** by editing any example code
 
-## 📚 Resources
+## 🛟 Getting Help
 
-- [ZenML Documentation](https://docs.zenml.io/)
-- [VS Code Extension API](https://code.visualstudio.com/api)
+- **📖 ZenML Docs**: [docs.zenml.io](https://docs.zenml.io)
+- **💬 Community**: [ZenML Slack](https://zenml.slack.com/ssb/redirect)
+- **🐛 Issues**: [GitHub Issues](https://github.com/zenml-io/vscode-tutorial/issues)