Skip to content

Commit e84ccfc

Browse files
Update to 1 in STEP and README.md
1 parent dccc51e commit e84ccfc

File tree

2 files changed

+54
-34
lines changed

2 files changed

+54
-34
lines changed

.github/steps/-step.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
0
1+
1

README.md

+53-33
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,69 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_
1616
</header>
1717

1818
<!--
19-
<<< Author notes: Course start >>>
20-
Include start button, a note about Actions minutes,
21-
and tell the learner why they should take the course.
19+
<<< Author notes: Step 1 >>>
20+
Choose 3-5 steps for your course.
21+
The first step is always the hardest, so pick something easy!
22+
Link to docs.github.com for further explanations.
23+
Encourage users to open new tabs for steps!
2224
-->
2325

24-
## Welcome
26+
## Step 1: Create your first codespace and push code
2527

26-
GitHub Codespaces is a development environment that's hosted in the cloud.
28+
_Welcome to "Develop code using GitHub Codespaces and Visual Studio Code"! :wave:_
2729

28-
- **Who this is for**: Developers, DevOps Engineers, Engineering Managers, Product Managers.
29-
- **What you'll learn**: How to create a codespace, push code from a codespace, select a custom image, and customize a codespace.
30-
- **What you'll build**: A codespace with devcontainer.json files, customizations, and personalizations.
31-
- **Prerequisites**: If you need to learn about Visual Studio Code, read [Visual Studio Code Docs](https://code.visualstudio.com/docs) first.
32-
- **How long**: This course can be completed in less than an hour.
30+
**What's the big deal about using a codespace for software development?** A codespace is a development environment that's hosted in the cloud. You can customize your project for GitHub Codespaces by committing configuration files to your repository (also known as configuration-as-code), which creates a repeatable codespace configuration for all users of your project. Each codespace you create is hosted by GitHub in a Docker container that runs on a virtual machine. You can choose the type of machine you want to use depending on the resources you need.
3331

34-
In this course, you will:
32+
GitHub offers a range of features to help your development team customize a codespace to reach peak configuration and performance needs. For example, you can:
3533

36-
1. Create your first codespace
37-
2. Add a custom image
38-
3. Customize your codespace
39-
4. Personalize your codespace
34+
- Create a codespace from your repository.
35+
- Push code from the codespace to your repository.
36+
- Use VS Code to develop code.
37+
- Customize the codespace with custom images.
38+
- Manage the codespace.
4039

41-
### How to start this course
40+
To begin developing using GitHub Codespaces, you can create a codespace from a template or from any branch or commit in a repository. When you create a codespace from a template, you can start from a blank template or choose a template suitable for the work you're doing.
4241

43-
<!-- For start course, run in JavaScript:
44-
'https://github.com/new?' + new URLSearchParams({
45-
template_owner: 'skills',
46-
template_name: 'code-with-codespaces',
47-
owner: '@me',
48-
name: 'skills-code-with-codespaces',
49-
description: 'My clone repository',
50-
visibility: 'public',
51-
}).toString()
52-
-->
42+
### :keyboard: Activity: Start a codespace
43+
44+
**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.**
45+
46+
1. Start from the landing page of your repository.
47+
1. Click the green **Code** button located in the middle of the page.
48+
1. Select the **Codespaces** tab in the box that pops up and then click the **Create codespace on main** button.
49+
50+
> Wait about 2 minutes for the codespace to spin itself up.
51+
> **Note**: It's a virtual machine spinning up in the background.
52+
53+
1. Verify your codespace is running. The browser should contain a VS Code web-based editor and a terminal should be present such as the below:
54+
![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png)
55+
56+
### :keyboard: Activity: Push code to your repository from the codespace
57+
58+
1. From inside the codespace in the VS Code explorer window, select the `index.html` file.
59+
1. Replace the **h1** header with the below:
60+
61+
```html
62+
<h1>Hello from the codespace!</h1>
63+
```
64+
65+
1. Save the file.
66+
> **Note**: The file should autosave.
67+
1. Use the VS Code terminal to commit the file change by entering the following commit message:
68+
69+
```shell
70+
git commit -a -m "Adding hello from the codespace!"
71+
```
72+
73+
1. Push the changes back to your repository. From the VS Code terminal, enter:
5374

54-
[![start-course](https://user-images.githubusercontent.com/1221423/235727646-4a590299-ffe5-480d-8cd5-8194ea184546.svg)](https://github.com/new?template_owner=skills&template_name=code-with-codespaces&owner=%40me&name=skills-code-with-codespaces&description=My+clone+repository&visibility=public)
75+
```shell
76+
git push
77+
```
5578

56-
1. Right-click **Start course** and open the link in a new tab.
57-
2. In the new tab, most of the prompts will automatically fill in for you.
58-
- For owner, choose your personal account or an organization to host the repository.
59-
- 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).
60-
- Scroll down and click the **Create repository** button at the bottom of the form.
61-
3. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README.
79+
1. Your code has been pushed to your repository!
80+
1. Switch back to the homepage of your repository and view the `index.html` to verify the new code was pushed to your repository.
81+
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
6282

6383
<footer>
6484

0 commit comments

Comments
 (0)