Merge pull request #239 from microsoft/day-1-review

Draft: Suggested changes

frontend/src/views/Home.vue

@@ -6,7 +6,7 @@
         <div id="right"></div>
         <div id="top"></div>
         <div id="bottom"></div>
-        <b-navbar-item id="fontnavbar" class="title is-2" style="color: green">
+        <b-navbar-item id="fontnavbar" class="title is-2">
           Milligram
         </b-navbar-item>
       </template>

instructions/day1/ApplicationPart1/README.md

@@ -15,7 +15,7 @@ Today you will learn how to:
 ## Table Of Contents
 
 1. [Create a new branch in your project](#create-a-new-branch-in-your-project)
-2. [Change the title and it's color of your App](#change-the-title-and-its-color-of-your-app)
+2. [Change the title and its color of your App](#change-the-title-and-its-color-of-your-app)
 3. [Test your changes in your codespace](#test-your-changes-in-your-codespace)
 4. [Commit & push your changes](#commit--push-your-changes)
 5. [Open a pull request and merge it](#open-a-pull-request-and-merge-it)
@@ -26,6 +26,16 @@ Go to your repository on GitHub. Click on the "main" dropdown and type in the na
 
 ![Create a new branch](./images/create-branch.png)
 
+Let's type a few git commands in the terminal to create a new branch.
+![Terminal](./images/terminal.png)
+
+<details>
+<summary>What is a terminal?</summary>
+
+You are probably used to getting things done on your computer by moving your mouse around and clicking on things. There is actually a different way with which you can use your computer: The terminal!\ Instead of moving your mouse you can type a command in the terminal and the computer will execute it. Say, you want to go to a specific folder on your computer - we have a command for that, namely, `cd <path-to-your-folder>` (cd stands for change directory). There are many other commands that can do many different things. We call the set of all commands and their combinations the Shell Scripting language. You can try them out for yourself, go to the terminal (the little box as shown in the picture) and type `help` - this will list all the built-in commands. Feel free to play around and give them a try to familiarize yourself with the environment. For some handy common commands you can try: `pwd` (outputs the path of your current directory, pwd stands for print working directory) and `ls` (lists all the files in the current repository)
+
+</details>
+
 Go back into your codespace and type into the terminal:
 
     git pull
@@ -40,7 +50,7 @@ It should look similar to this:
 
 Congrats! You just created a new branch and switched to it successfully. Now you can start making changes to your code!
 
-## Change the title and it's color of your App
+## Change the title and its color of your App
 
 Open the file `Home.vue` from the folder `frontend/src/views`. On top you find a so called `<template>` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `<b-navbar-item>` tags.
 
@@ -61,6 +71,14 @@ To change the color we need to add a new attribute to the `<b-navbar-item>` tag.
 
 ![Browse to test site](./images/browse-test.png)
 
+
+
+| :warning: Troubleshooting          |
+|:---------------------------|
+| if the `open in browser`pop-up does not show up at the bottom of your window, refresh the page and retry    |
+
+
+
 ## Commit & push your changes
 
 Click on the `+` sign on the upper right of your terminal to create a new one. We do not want to stop our app from running, so we will use a new terminal for the next steps.
@@ -71,7 +89,7 @@ After verifying your changes, it's time to commit and push. At first we want to
 
 ![Git status](./images/git-status.png)
 
-Now run first `git add .` what will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
+Now first run `git add .` this will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
 
 ![Git commit and push](./images/git-commit-push.png)
 

instructions/day1/ApplicationPart2/README.md

@@ -84,7 +84,7 @@ it to serve the frontend for Milligram.
 - Go to your repository settings-
   ![Repository Settings](./images/RepoSettingsTab.png)
 - Navigate to **Pages**, select the branch _gh-pages_ and hit the save button.
-  ![Enable Pages](./images/FrontendPages.png)
+  ![Enable Pages](./images/FrontendPagesUpdated.png)
 - The deployment will take 1-2 minutes. After that, the Milligram website is
   accessible through `https://<your github username>.github.io/everyonecancode/`.
 
@@ -157,8 +157,8 @@ Just like the disk or storage on your computer. A cool fun fact is that you can
 - Select your subscription & the resource group with the name that you used to log into the Azure Portal.
 - The name of your Azure Storage account needs to be globally unique. It also has to use small letters and no special characters.
 - Make sure to select `Standard` for _Performance_ and `Locally-redundant storage (LRS)` for _Redundancy_.
-  ![Storage](./images/light/BackendStorage0.png)
-- Hit _Review & create_ and after that _Create_ to finish creating the storage account.
+  ![Storage](./images/light/BackendStorage1.png)
+- Hit _Review_ and after that _Create_ to finish creating the storage account.
 - Once the storage account is created there should be a button _Go to resource_. Click on it.
 - Now you should see your storage account. Select _Containers_ on the left hand side.
 - Click the _New Container_ button and create a container named `images`. Leave everything in the preconfigured settings as is.
@@ -182,8 +182,7 @@ Our [Azure Web App](https://learn.microsoft.com/en-us/azure/static-web-apps/) is
     ![backend 0](./images/light/BackendApp0.png)
 - Create a new App Service Plan and `<pick your own name>`.
   ![backend 1](./images/light/BackendApp1.png)
-- Click on _Change size_ and then click the _Dev/Test_ tab and select the **F1** which is free, otherwise you might be charged when creating a larger plan.
-  ![backend 2](./images/light/BackendApp2.png)
+- In the pricing plan dropdown menu, select **Free F1** which is free, otherwise you might be charged when creating a larger plan.
 - Click _Review + Create_ at the bottom of the screen.
 - Review the displayed information and click _Create_ on the next screen to spin up the backend application.
 
@@ -234,7 +233,7 @@ Let's pause a second. To make sure that you are on track, test if our app's fron
 
 - Navigate to the _Overview_ tab on the left hand side of the Web App Service.
   ![App Service URL](./images/light/AppServicesDocLink.png)
-- Hit the URL, add `/docs` to the end, then test the website using the interactive documentation to figure out if the features of our Milligram will work.
+- Hit on Default Domain, add `/docs` to the end, then test the website using the interactive documentation to figure out if the features of our Milligram will work.
 - In your browser you will have the following view:
   ![Test API Page](./images/light/TestAPIGetImages.png)
 
@@ -248,13 +247,18 @@ Let's pause a second. To make sure that you are on track, test if our app's fron
   📝 Look at the HTTP Response Codes at [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). 2xx Codes generally mean success, where as 4xx and 5xx Codes show different kinds of errors. You probably know 404 - Not Found.
   :::
 
+### Clarifications, What have we done so far?
+
+Congratulations, you have just deployed the backend to your web application! Let us summarize what we have done so far.\
+First, we have deployed the frontend (user interface) of our web app using github pages. This is what you see when you go to your github pages link. The frontend needed a server to serve images and run some logic. This is where the azure part came in. First, we created a storage resource, this is responsible for storing our images. Second, we created a web app resource, here we will run our server logic. The server logic is written in Python using a framework called FastAPI. The server logic code is hosted in the everyonecancode github repository. We connected our web app to the github repository and we instructed the server to run a specific command upon starting the web app. This command will start running our server logic, this is why you can see the docs in your browser under `/docs`.  Next up, we will try to connect the Frontend to the Backend.
+
 ### Integrate Azure Web App URL in GitHub Secrets
 
 Now that we are sure that our backend service works as expected, we can bring everything together.
 
 To do this, we will use a GitHub feature called _Secrets_, where you can store your backend URL to make your frontend talk to the backend service.
 
-- On your Repository page in GitHub select _Settings_ and navigate to _Secrets_ > _Actions_.
+- On your Repository page in GitHub select _Settings_ and navigate to _Secrets and Variables_ > _Actions_.
 - Add a _New repository secret_ named `VITE_IMAGE_API_URL` and as value set `<your WebApp's URL>`.
   > ⚠️⚠️ Your URL should end on a **/**. It should look like this: `https://xxxx.azurewebsites.net/` > ![GitHub Secrets Create](./images/light/VITE_IMAGE_API_URL.png)
 

instructions/day2/Vision/README.md

@@ -23,9 +23,9 @@ In this challenge you will learn how to:
 ## Getting started
 
 - Navigate to your **Resource Group** we created on Day 1 during the previous challenges.
-- Create a new **Resource** and search for **Cognitive Services**.
+- Create a new **Resource** and search for **Azure AI services**.
 
-  ![Screenshot of how to create a resource](./images/createresource.png)
+  ![Screenshot of how to create a resource](./images/createresource1.png)
 
 ## Create Computer Vision Cognitive Service