You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1. Select the **Codespaces** tab and click the **Create codespace on main** button. A new window will open running VS Code and it will connect to the remote Codespace. Wait a few minutes for the codespace to be created.
39
39
40
40
1. Look in the bottom left of the VS Code window see the remote connection.
41
41
42
-
<imgwidth="350"alt="remote connection status in VS Code"src="../images/remote-connection-status.png"/>
42
+
<imgwidth="350"alt="remote connection status in VS Code"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/remote-connection-status.png?raw=true"/>
43
43
44
44
> [!TIP]
45
45
> GitHub uses the [universal](https://github.com/devcontainers/images/tree/main/src/universal) Codespace image if the repository doesn't include a configuration. It includes several useful and commonly used tools.
@@ -50,11 +50,11 @@ Let's get started! We'll start up a Codespace, run the application, make a chang
50
50
51
51
1. In the left sidebar, select the file **Explorer** tab and open the file `src/hello.py`.
52
52
53
-
<imgwidth="250"alt="vs code explorer tab"src="../images/vs-code-explorer-tab.png" />
53
+
<imgwidth="250"alt="vs code explorer tab"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/vs-code-explorer-tab.png?raw=true" />
54
54
55
55
1. In the lower panel, select the **TERMINAL** tab.
1. Paste the following command in the Codespace's remote terminal to show the installed versions of several tools. Note the versions for comparison later.
Copy file name to clipboardExpand all lines: .github/steps/2-custom-image.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -40,7 +40,7 @@ Let's create this file and set a few of the most common settings. For other opti
40
40
41
41
1. After saving, VS Code likely popped up a notification that it detected a configuration change. You can **Accept** that option to rebuild the development container or manually use the Command Palette (`CTRL`+`Shift`+`P`) and run the command `Codespaces: Rebuild Container`. Select the **Rebuild** option. A full build is not necessary.
1. Search for `python` and find entries for `Python` and `Python Debugger`.
45
45
46
-
<imgwidth="250"alt="python extensions for vs code"src="../images/python-extensions.png" />
46
+
<imgwidth="250"alt="python extensions for vs code"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/python-extensions.png?raw=true" />
47
47
48
48
1. Right click on each entry and select the `Add to devcontainer.json` option.
49
49
50
-
<imgwidth="250"alt="add to devcontainer config button"src="../images/add-to-devcontainer-button.png" />
50
+
<imgwidth="250"alt="add to devcontainer config button"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/add-to-devcontainer-button.png?raw=true" />
51
51
52
52
1. Navigate to and open the `.devcontainer/devcontainer.json` file.
53
53
@@ -116,7 +116,7 @@ The Dev Container specification provides multiple locations to run [lifecycle sc
116
116
117
117
1. Open the VS Code Command Palette (`CTRL`+`Shift`+`P`) and run the `Codespaces: Rebuild Container` command. Select the **Rebuild** option. A full build is not necessary.
1. Wait a few minutes for the Codespace to rebuild and VS Code to reconnect.
122
122
@@ -133,11 +133,11 @@ Now that you've rebuilt the codespace, let's verify the python extension, python
133
133
134
134
1. In the left sidebar, click the extensions tab and verify that the Python extensions are installed and enabled.
135
135
136
-
<imgwidth="250"alt="python extensions for vs code"src="../images/python-extensions.png" />
136
+
<imgwidth="250"alt="python extensions for vs code"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/python-extensions.png?raw=true" />
137
137
138
138
1. In the left sidebar, select **Run and Debug** tab and then press the **Start Debugging** icon. VS Code will open the lower panel and show the run logs.
139
139
140
-
<imgwidth="250"alt="run and debug tab pointing to start button"src="../images/run-and-debug-start-button.png"/>
140
+
<imgwidth="250"alt="run and debug tab pointing to start button"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/run-and-debug-start-button.png?raw=true"/>
141
141
142
142
1. In the lower panel, switch to the **TERMINAL** tab.
Copy file name to clipboardExpand all lines: .github/steps/4-use-codespace.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,11 +12,11 @@ The final test of our Codespace is to put ourselves in the position of an onboar
12
12
13
13
1. Select the **Codespaces** tab to show the list of created Codespaces.
14
14
15
-
<imgwidth="250"alt="list of codespaces"src="../images/codespaces-list.png" />
15
+
<imgwidth="250"alt="list of codespaces"src="https://github.com/Meryem-Code2/skills-code-with-codespaces/blob/main/.github/images/codespaces-list.png?raw=true" />
16
16
17
17
1. Find the active entry, select the three dot menu `...`, and select the **Delete** command.
GitHub Codespaces is a development environment that is hosted in the cloud.
7
+
Mona here. I'm done preparing your exercise. Hope you enjoy! 💚
8
8
9
-
-**Who this is for**: Developers, DevOps Engineers, Engineering Managers, Product Managers.
10
-
-**What you'll learn**: How to create, configure, and use a codespace.
11
-
-**What you'll build**: A codespace configuration with customizations tailored to a repository.
12
-
-**Prerequisites**: Familiar with [Visual Studio Code Docs](https://code.visualstudio.com/docs).
13
-
-**How long**: This exercise can be completed in less than an hour.
9
+
Remember, it's self-paced so feel free to take a break! ☕️
14
10
15
-
In this exercise, you will:
16
-
17
-
1. Create your first codespace and change some code
18
-
1. Customize your codespace
19
-
1. Practice using the codespace
20
-
21
-
### How to start this exercise
22
-
23
-
Simply copy the exercise to your account, then give your favorite Octocat (Mona) **about 20 seconds** to prepare the first lesson, then **refresh the page**.
When copying the exercise, we recommend the following settings:
31
-
32
-
- For owner, choose your personal account or an organization to host the repository.
33
-
- We recommend creating a public repository, as private repositories will [use Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions).
34
-
35
-
If the exercise isn't ready in 20 seconds:
36
-
37
-
1. After your new repository is created, wait about 20 seconds, then refresh the page.
38
-
2. Follow the step-by-step instructions in the issue created in your repository.
39
-
3. If the page doesn't refresh automatically, please check the [Actions](../../actions) tab.
40
-
- Check to see if a job is running. Sometimes it simply takes a bit longer.
41
-
- If the page shows a failed job, please submit an issue. Nice, you found a bug! 🐛
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments