Create Your First Codelab in Your Playgrounds Repo

When logged into dev-docs.io click the gear icon on the right side of the page to open the Side Drawer.

Click Live Playground Examples.

Find the link with the text Codespace Url and click on it.

We are going to edit our playground in a Github Codespace (but you can do it locally as well).

Click the Create codespace button. This will initialize your Github Codespace, which takes about one minute to complete.

When the tutorial Dialog, comes up Click the Cancel button since we are creating a tutorial not running one.

With Shift Command P open the Command Palette and find the Dev-Docs Command called Sign in With Dev-Docs.

Select your Org.

Click the Dev-Docs button.

Click the "Open Dev-Docs" button.

When Dev-Docs notion type editor open, click hit the pencil icon on the right hand side.

Create a codeblock, either with backticks or using the typing / and selecting a codeblock.

Double click the codeblock and select the language. What you select decides what base folder is created, for example if you select javascript it will be javascript/your_tutorial_name.

When the modal opens go to the playgrounds tab and fill out the tutorial name, and the name of the first code file which is usually just the name of the tutorial followed by the extension, in this case js.

Select Update Snippet.

Now in the terminal check if your tutorial was created by running git pull origin main.

Find the new folder and code file created. In this example the tutorial codefile was javascript/test/test.js.

Now right click on the the file and select Open Dev-Doc for current file.

Then start typing your content.

Congrats you just wrote your first tutorial.

Do not forget to commit your progress.