Merge branch 'main' of https://github.com/adeelumar-17/skills-code-wi…

…th-codespaces

Eliminate error

.devcontainer/devcontainer.json

@@ -0,0 +1,25 @@
+{
+  // Name this configuration
+  "name": "Codespace for Skills!",
+  // Use the base codespace image
+  "image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
+
+  "remoteUser": "codespace",
+  "overrideCommand": false
+   ,
+ // Add the IDs of extensions you want installed when the container is created.
+ "customizations": {
+     "vscode": {
+         "extensions": [
+             "GitHub.copilot"
+         ]
+     },
+     "codespaces": {
+         "openFiles": [
+             "codespace.md"
+         ]
+     }
+ }
+   ,
+ "postCreateCommand": "echo '# Writing code upon codespace creation!'  >> codespace.md"
+}

.github/steps/-step.txt

@@ -1 +1 @@
-1
+4

README.md

@@ -16,58 +16,62 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_
 </header>
 
 <!--
-  <<< Author notes: Step 1 >>>
-  Choose 3-5 steps for your course.
-  The first step is always the hardest, so pick something easy!
-  Link to docs.github.com for further explanations.
-  Encourage users to open new tabs for steps!
+  <<< Author notes: Step 4 >>>
+  Start this step by acknowledging the previous step.
+  Define terms and link to docs.github.com.
 -->
 
-## Step 1: Create your first codespace and push code
+## Step 4: Personalize your codespace!
 
-_Welcome to "Develop code using GitHub Codespaces and Visual Studio Code"! :wave:_
+_Nicely done customizing your codespace!_ :partying_face:
 
-**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.
+When using any development environment, customizing the settings and tools to your preferences and workflows is an important step. GitHub Codespaces offers two main ways of personalizing your codespace: `Settings Sync` with VS Code and `dotfiles`.
 
-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:
+`Dotfiles` will be the focus of this activity.
 
-- Create a codespace from your repository.
-- Push code from the codespace to your repository.
-- Use VS Code to develop code.
-- Customize the codespace with custom images.
-- Manage the codespace.
+**What are `dotfiles`?** Dotfiles are files and folders on Unix-like systems starting with . that control the configuration of applications and shells on your system. You can store and manage your dotfiles in a repository on GitHub.
 
-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.
+Let's see how this works!
 
-### :keyboard: Activity: Start a codespace
+### :keyboard: Activity: Enable a `dotfile` for your codespace
 
-**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.**
+1. Start from the landing page of your repository.
+1. In the upper-right corner of any page, click your profile photo, and then click **Settings**.
+1. In the **Code, planning, and automation** section of the sidebar, click **Codespaces**.
+1. Under **Dotfiles**, select **Automatically install dotfiles** so that GitHub Codespaces automatically installs your dotfiles into every new codespace you create.
+1. Click **Select repository** and then choose your current skills working repository as the repository from which to install dotfiles.
+
+### :keyboard: Activity: Add a `dotfile` to your repository and run your codespace
 
 1. Start from the landing page of your repository.
-1. Click the green **Code** button located in the middle of the page.
-1. Select the **Codespaces** tab in the box that pops up and then click the **Create codespace on main** button.
+1. Click the **Code** button located in the middle of the page.
+1. Click the **Codespaces** tab on the box that pops up.
+1. Click the **Create codespace on main** button.
 
-   > Wait about 2 minutes for the codespace to spin itself up.
-   > **Note**: It's a virtual machine spinning up in the background.
+   > Wait about **2 minutes** for the codespace to spin itself up.
 
 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:
+
    ![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png)
 
-### :keyboard: Activity: Push code to your repository from the codespace
+1. From inside the codespace in the VS Code explorer window, create a new file `setup.sh`.
+1. Enter the following code into the file:
 
-1. From inside the codespace in the VS Code explorer window, select the `index.html` file.
-1. Replace the **h1** header with the below:
+   ```bash
+   #!/bin/bash
 
-   ```html
-   <h1>Hello from the codespace!</h1>
+   sudo apt-get update
+   sudo apt-get install sl
+   echo "export PATH=\$PATH:/usr/games" >> ~/.bashrc
    ```
 
 1. Save the file.
    > **Note**: The file should autosave.
-1. Use the VS Code terminal to commit the file change by entering the following commit message:
+1. Commit the file changes. From the VS Code terminal enter:
 
    ```shell
-   git commit -a -m "Adding hello from the codespace!"
+   git add setup.sh --chmod=+x
+   git commit -m "Adding setup.sh from the codespace!"
    ```
 
 1. Push the changes back to your repository. From the VS Code terminal, enter:
@@ -76,8 +80,21 @@ To begin developing using GitHub Codespaces, you can create a codespace from a t
    git push
    ```
 
-1. Your code has been pushed to your repository!
-1. Switch back to the homepage of your repository and view the `index.html` to verify the new code was pushed to your repository.
+1. Switch back to the homepage of your repository and view the `setup.sh` to verify the new code was pushed to your repository.
+1. Close the codespace web browser tab.
+1. Click the **Create codespace on main** button.
+
+   > Wait about **2 minutes** for the codespace to spin itself up.
+
+1. Verify your codespace is running, as you did previously.
+1. Verify the `setup.sh` file is present in your VS Code editor.
+1. From the VS Code terminal, type or paste:
+
+   ```shell
+   sl
+   ```
+
+1. Enjoy the show!
 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.
 
 <footer>