Add workshop materials (dotnetgirls#1)

Author: justinyoo

.github/workflows/publish-gh-pages.yml

@@ -1,6 +1,10 @@
 name: Publish Blazor App to GitHub Pages
 
-on: [ push, workflow_dispatch ]
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - 'src/MyPortfolio/**'
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -31,7 +35,7 @@ jobs:
     # - name: Set basepath on index.html
     #   shell: pwsh
     #   run: |
-    #     $filepath = "./src/BlazorApp/wwwroot/index.html"
+    #     $filepath = "./src/MyPortfolio/wwwroot/index.html"
     #     $repository = "${{ github.repository }}" -replace "${{ github.repository_owner }}", ""
 
     #     $html = Get-Content -Path $filepath
@@ -40,7 +44,7 @@ jobs:
     # - name: Set basepath on JSON objects
     #   shell: pwsh
     #   run: |
-    #     $filepath = "./src/BlazorApp/wwwroot/sample-data"
+    #     $filepath = "./src/MyPortfolio/wwwroot/sample-data"
     #     $repository = "${{ github.repository }}" -replace "${{ github.repository_owner }}", ""
 
     #     Get-ChildItem -Path $filepath -Filter "*.json" | ForEach-Object {
@@ -51,22 +55,22 @@ jobs:
     - name: Restore NuGet packages
       shell: bash
       run: |
-        dotnet restore .
+        dotnet restore ./src
 
     - name: Build solution
       shell: bash
       run: |
-        dotnet build .
+        dotnet build ./src -c Release
 
     - name: Test solution
       shell: bash
       run: |
-        dotnet test . -c Release
+        dotnet test ./src -c Release
 
     - name: Publish artifact
       shell: bash
       run: |
-        dotnet publish src/BlazorApp -c Release -o published
+        dotnet publish ./src/MyPortfolio -c Release -o published
 
     - name: Upload artifact for web
       uses: actions/upload-pages-artifact@v1

MyPortfolio.sln

@@ -0,0 +1,59 @@
+# Prepare your development environment
+
+In this workshop, we will be using [GitHub Codespaces](https://docs.github.com/codespaces/overview).
+
+What is GitHub Codespaces? It's a development environment that's hosted in the cloud. It allows you to develop entirely in the cloud, without needing to install anything on your local machine. It's like Visual Studio Code, but in the cloud.
+
+With GitHub Codespaces, you can create a new development environment in seconds, and start coding right away. You can also share your development environment with others, and collaborate in real-time.
+
+OK. Let's get started!
+
+## Step 1: Fork the GitHub repository
+
+1. First, you need to fork this repository to your GitHub account. To do that, click the "Fork" button at the top-right corner of this page.
+
+    ![Button to fork](./images/00-setup-01.png)
+
+1. You will see the screen below. Select your GitHub account, and click the "Create fork" button.
+
+    ![Create fork](./images/00-setup-02.png)
+
+1. After forking the repository, you will be redirected to your forked repository.
+
+    ![Forked repository](./images/00-setup-03.png)
+
+You have forked the repository to your GitHub account. Now, you can start coding in GitHub Codespaces.
+
+## Step 2: Open the repository in GitHub Codespaces
+
+1. To open the repository in GitHub Codespaces, click the "Code" button at the top-right corner of the repository, and click the "Create codespace on main" button.
+
+    ![Button to create a new codespace](./images/00-setup-04.png)
+
+1. Wait for a few minutes. GitHub initialises the new codespace instance for you. Depending on your network status, it might take 5-10 minutes.
+
+    ![Initialising a new codespace](./images/00-setup-05.png)
+
+1. Your codespace instance is ready when you see the screen below.
+
+    ![Codespace workspace](./images/00-setup-06.png)
+
+1. In the terminal, enter the following commands to see whether your codespace is ready for app development.
+
+    ```bash
+    dotnet --list-sdks
+    ```
+
+1. You should see the .NET SDK version `6.x`, `7.x` and `8.x` like below.
+
+    ```bash
+    6.0.420 [/usr/share/dotnet/sdk]
+    7.0.407 [/usr/share/dotnet/sdk]
+    8.0.202 [/usr/share/dotnet/sdk]
+    ```
+
+---
+
+Congratulations! You have created a new codespace instance. Now, you can start coding in the cloud.
+
+:point_right: [Step 1: Create a new Blazor WebAssembly application](./01-blazor-new.md)

README.md

@@ -0,0 +1,76 @@
+# Create a new Blazor WebAssembly application
+
+In this step, you will create a new [Blazor WebAssembly](https://learn.microsoft.com/aspnet/core/blazor/hosting-models#blazor-webassembly) application using the `dotnet` command-line interface (CLI).
+
+With Blazor WebAssembly, you build a web application purely running on a web browser. It's a modern single-page application (SPA) framework that runs on WebAssembly. It's a new way to build interactive client-side web UI with .NET.
+
+![Blazor WebAssembly](https://learn.microsoft.com/aspnet/core/blazor/hosting-models/_static/blazor-webassembly.png)
+
+👉 Image source: [Microsoft](https://learn.microsoft.com/aspnet/core/blazor/hosting-models#blazor-webassembly)
+
+Generally speaking, web frontend UI applications rely on JavaScript for user interactions. If you don't know JavaScript, you have to learn it first to build an application. However, if you are a new starter building a web frontend UI application and don't know where to start, this Blazor WebAssembly is a good starting point for you because you only need to know C# and .NET for building both frontend and backend applications.
+
+OK. Let's get started!
+
+## Step 1: Create a new Blazor WebAssembly application
+
+1. In the terminal, enter the following commands to setup the workshop folder. Remember that `$CODESPACE_VSCODE_FOLDER` is the root directory of your codespace workspace.
+
+    ```bash
+    cd $CODESPACE_VSCODE_FOLDER
+    mkdir workshop
+    cd workshop
+    ```
+
+1. Enter the following command to create a new Blazor WebAssembly project.
+
+    ```bash
+    dotnet new blazorwasm -n MyPortfolio
+    ```
+
+1. Enter the following commands to create a solution file and add the Blazor WebAssembly project to the solution.
+
+    ```bash
+    dotnet new sln -n MyPortfolio
+    dotnet sln add MyPortfolio
+    ```
+
+## Step 2: Build and run the Blazor WebAssembly application
+
+1. Make sure you're in the `workshop` directory.
+
+    ```bash
+    cd $CODESPACE_VSCODE_FOLDER/workshop
+    ```
+
+1. Build your Blazor WebAssembly project to make sure everything is working fine.
+
+    ```bash
+    dotnet restore && dotnet build
+    ```
+
+1. Run the Blazor WebAssembly project to see the default application.
+
+    ```bash
+    dotnet watch run --project MyPortfolio
+    ```
+
+1. You should see the popup message like below. Click the "Open in Browser" button to open the default Blazor WebAssembly application in your browser.
+
+    ![Blazor WebAssembly popup](./images/01-blazor-new-01.png)
+
+   The screenshot above shows the port number of `5033`, but it might be different from yours.
+
+1. The default Blazor WebAssembly application is open, and should look like below.
+
+    ![Blazor WebAssembly default application](./images/01-blazor-new-02.png)
+
+   The web application's URL should look like `https://{{your-github-codespace-name}}-5033.app.github.dev`, instead of `https://localhost:5033`, where `5033` is your port number, which might be different from yours.
+
+1. Stop the running application by pressing `Ctrl + C` in the terminal.
+
+---
+
+Congratulations! You have created a new Blazor WebAssembly application. Let's add some contents by creating a new component in the next step.
+
+:point_right: [Step 2: Create a Home component](./02-home-component.md)