refactored the training layout

README.md

@@ -1,20 +1,20 @@
-![Static Badge](https://img.shields.io/badge/NodeJS-v19.7.0-blue) ![Static Badge](https://img.shields.io/badge/npm-v9.5.0-yellow) ![Static Badge](https://img.shields.io/badge/IDE-VS_Code-green) ![Static Badge](https://img.shields.io/badge/Extension-CodeTour-lightgrey) ![Static Badge](https://img.shields.io/badge/Extension-Copilot-lightgrey) ![Static Badge](https://img.shields.io/badge/Extension-Copilot_Chat-lightgrey)
+![Static Badge](https://img.shields.io/badge/NodeJS-v19.7.0-blue) ![Static Badge](https://img.shields.io/badge/npm-v9.5.0-yellow) ![Static Badge](https://img.shields.io/badge/IDE-VS_Code-green)  ![Static Badge](https://img.shields.io/badge/Extension-Copilot-lightgrey)
 
-<img width="256px" src="docs/images/copilot-flavors.png">
+<img width="256px" src="docs/images/copilot.png">
 
-# Copilot Operations Demo
+# Copilot Fundamentals Training Exercises
 
 ## Introduction
 
-### :warning: Note: The primary objective of this demo Repository is not to complete all the exercises such as the calculator app; that aspect serves as a guide for walking you through the exercise steps. If you don't achieve the exact results by the end, that's perfectly fine! What matters most is that users gain insight into how to use Copilot and Copilot Chat effectively.
+### :warning: Note: The primary objective of this demo Repository is not to complete all the exercises. If you don't achieve the exact results by the end, that's perfectly fine! What matters most is that you gain insight into how to use Copilot effectively.
 
 ## Overview
 
 Our goal is to **acquaint you with Copilot's functionalities** and demonstrate diverse ways to interact effectively with Copilot.
 
 Copilot and Copilot Chat, while built on the same backend technology, serve distinct roles within your integrated development environment (IDE). To put it simply, **Copilot functions as a coding assistant**, responding to your in-code context, while **Copilot Chat operates as your research assistant**, enabling chat-based communication for more interactive collaboration with Copilot.
 
-As this exercise leverages Copilot for code suggestions, please note that Copilot's responses may vary depending on the context. We welcome this variability, as it showcases the dynamic capabilities of Copilot.
+As these exercises leverage Copilot for code suggestions, please note that Copilot's responses may vary depending on the context. We welcome this variability, as it showcases the dynamic capabilities of Copilot.
 
 For effective interaction with Copilot, it's essential to keep in mind that **Copilot benefits from your guidance and supervision!**
 
@@ -23,96 +23,172 @@ For effective interaction with Copilot, it's essential to keep in mind that **Co
 ![copilot](docs/images/copilot32.png) 
 ***"I’m powered by AI, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions, and share feedback so that we can learn and improve."***
 
+# Let's Build From Here...
 ---
-## We Offer 2 Examples 
+![copilot-cover](docs/images/copilot-cover-wide.png)
+# Copilot Fundamentals - Training Exercises
+
+### How to use it !
+
+- Each of the exercise **`categories`** is indicated by a Copilot icon ![](docs/images/copilot32.png)
+- *'Inside'* these categories you will see the individual **`exercises`** marked with, :pencil2:
+  - We provide an estimate on what we think the exercise will take to complete, :clock10:<br>(it's just an estimate :smile:)
+
+- Each exercise contains two main sections!
+   - **Description** - What is the exercise about and how to do it
+   - **Repository Link:** - If possible we provided a reference to additional instructions or prepaed setups, to help you with the task. **Note:** not all exercises require/provide a link 
+<br><br>
+---
+
+## ![](docs/images/copilot32.png) Getting Started
 
-### [REACT Calculator App](#react-calculator)
-### [Node Calculator App](demos/Node-calculator/README.md)
+>*Prompt engineering is the process of designing and creating high-quality prompts that can be used to generate accurate and useful code suggestions with Copilot.*
+
+**GitHub**
 
 ---
 
-These are demonstrations for utilizing GitHub Copilot within Visual Studio Code. This demo highlights essential features of the Copilot extension for the benefit of class attendees.
+### :pencil2: Copilot First Steps (🕙 5 min)
+
+- **Description:**
 
-We employ the [CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) extension to guide you through an example of a React Calculator App. 
+  - **Configurations**
+    - Check the configuration options of your Copilot Plugin
 
-## Prerequisites & Options
+      ![copilot-config](docs/images/copilot-first-config-steps.png)
 
-Here are some options and requirements on how to run this demo.
-> **Note:** we are using VS-Code
+    - Check the Copilot keyboard shortcuts in your IDE. A link to them should be listed in the config options.
+      - Specifically have a look at the Keyboard shortcut for the `Copilot Suggestions Tab`
 
-### Option 1: [GitHub Codespaces](https://github.com/features/codespaces)
+  - **Copilot Suggestions**
 
-We recommend to run this via [GitHub Codespaces](https://github.com/features/codespaces). We provide a [Devcontainer](https://code.visualstudio.com/docs/devcontainers/containers) configuration that provides all the required IDE components (VS Code).
+    - Use `Inline help`
+      - Open a code file in your IDE (eg.: [phoneNumberValidator.py](/demos/copilot-operations/phoneNumberValidator.py))
+      - Start typing a comment, to tell Copilot what you want it to do
+      - **Example:**
 
-### Option 2: VS Code + [Devcontainers](https://code.visualstudio.com/docs/devcontainers/containers)
+        ```python
+        # function to validate phone numbers and to return a true or false value
+        ```
+        > Hit return to 'trigger' Copilot Suggestions
 
-If you don't want to use Codespaces, just clone this Repo and use a local [Devcontainer](https://code.visualstudio.com/docs/devcontainers/containers) in your VS-Code IDE.
+    - Use the `Suggestions Tab`
+      - The default shortcut for VS-Code is: `control` + `enter`
+      - IntelliJ Jetbrains does not have shortcut defined by default, please create one.
 
-### Option 3: VS Code + CodeTour extension (Local)
+- **Repository Link:** Inside the `/copilot-fundamentals-training` Repo open, [/demos/copilot-operations/phoneNumberValidator.py](/demos/copilot-operations/phoneNumberValidator.py)
 
-If you want to run this Demo on your local platform (no Codespaces, no Devcontainers), please have look a at the required tools.
+![](docs/images/line.png)
+
+---
+
+<br><br>
+## ![](docs/images/copilot32.png) Prompt Techniques
 
-**Here are some requirements you'll need:**
-- NodeJS: v19.7.0
-- NPM: v9.5.0
-- VSCode Extensions:
-  - [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
-  - [Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)
-  - [CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour)
 
 ---
 
-## REACT-Calculator
+### :pencil2: Prompt Techniques & Neighboring Tabs  (🕙 5 min)
 
-## Before you Start the Tour
+- **Description**: Practice Zero-Shot, One-Shot prompting etc.
 
-We provide you with several **Code Tour** exercises, to practice Copilot interactions. The first step is to setup/start the `calculator` app.
+- **Repository Link:** Inside the `/copilot-fundamentals-training` Repo open, [/demos/copilot-prompt-engineering-1.md](/demos/copilot-prompt-engineering-1.md)
 
 ---
 
-### Start the `Calculator` App
+### :pencil2: Think step by step (:clock10: 10 min)
 
-```bash
-npm install
-npm start
-``` 
 
-- Open a browser window (http://localhost:3000), to see the App.
+- **Description**: Create a NodeJS calculator, with the help of Copilot
 
-> **Note:** At the start of the CodeTour your browser should not show the calculator, yet, adding this is part of the Demo. This is what you should see...
+  - Open the `/demos/Node-Calculator/README.md`
 
-![calculator](docs/images/calculator2.png)
+  - **Follow the instructions in that file.**
+    - The ':arrow_forward: Help' sections provide solution examples, click them to expand.
+    ...
 
-> **Note:** By the time the Demo is completed, the App should look like this...
+- **Repository Link:** Inside the `/copilot-fundamentals-training` Repo open, [/demos/Node-Calculator/README.md](/demos/Node-Calculator/README.md)
 
- ![calculator](docs/images/calculator1.png)
+---
 
+![](docs/images/line.png)
+
+
+## ![](docs/images/copilot32.png) Tips & Techniques
 ---
 
-## :warning: TO RUN THE TOUR 'MANUALLY', PLEASE REFER TO [COPILOT-OPERATIONS.MD](./copilot-operations.md)
+### :pencil2: Copilot Mulitlingual Features (:clock10: 5 min)
+
+- **Description**: Test Copilots Multilingual features. For this exercise we don't require any pre-set files from the Repo, simply open a new file in your IDE and follo the instructions below.
+
+
+  - Choose any language and instruct Copilot to create code. For example import statements, functions etc.
+    - Choose any coding-language you prefer
+
+    - **Spanish:**
+
+    ```
+    // Importar todas las bibliotecas 
+    // necesarias para FileStreaming
+    ```
+
+    - **German:**
+
+    ```
+    // Importiere alle erforderlichen 
+    // Bibliotheken für FileStreaming
+    ```
+
+  - **Optional:** Create a class that provides greetings or form labels in multiple languages
+Choose any coding-language you prefer
+Try non-ASCII character sets 
+(eg.: Chinese, Hebrew, ...)
+
+
+- **Repository Link:** None, simply use a new file in your IDE
+
 
 ---
 
-## Start the tour ...
+### :pencil2: Offering Alternatives (:clock10: 5 min)
+
+#### If at first you don’t succeed, try again
 
-Here is a screenshot of what the CodeTour extension looks like in the IDE (VS-Code).
+- **Description**
+  - Create a NEW file in your IDE, with a description comment
 
-![codetour](docs/images/codetour.png)
+  - :warning: **NOTE:** The file extension you choose determines the code language that Copilot provides suggestions for!
 
-By **clicking the 'play' button**, CodeTour will open a code Tab (App.js) showing the first CodeTour steps...
 
-![codetour-start](docs/images/codetour-start.png)
+    **For example:** `myfunction.js` will tell Copilot to use Javascript/Node as the suggestion language.
+
+    - Use this sample
+    ```node
+    // @description This function sorts numbers based on a given order.
+    ```
+
+  - Have a look what Copilot suggests
+
+  - Modify the “description comment”, for example provide more details and check the provided suggestions again
+
+- **Repository Link:** None, simply use a new file in your IDE
+
 ---
 
-### Note: These are exercise items that should be addressed in the Demo
+### :pencil2: Use Copilot to Understand / Explain Code (:clock10: 5 min)
+
+- **Description**
+
+  - Open the [/demos/document-code/README.md](/demos/document-code/README.md) file and follow the instructions
 
-|Copilot|Copilot Chat|
-|---|---|
-|Inline help|Say Hello|
-|Open the Completions Panel|Check its limits|
-|Fix using Copilot|Test its knowledge|
-|Explain using Copilot|Topics ‘/’|
+  - Remember to "ask Copilot at every level”
+    - Class
+    - Method / Function
+    - Single instruction
 
 
+- **Repository Link:** Inside the `/copilot-fundamentals-training` Repo open, [/demos/document-code/README.md](/demos/document-code/README.md)
 
+---
 
+![](docs/images/droidtocat.png)

demos/Node-calculator/README.md

@@ -12,13 +12,12 @@ A small demo project to exercise the basic capabilities of Copilot in your IDE.
 
 ## Pre-Requisits
 
-- Make sure to have...
+- Make sure to have **Copilot**, correctly installed & working in your IDE !
 
-<img width="10%" src="images/copilot.png">
+### NOTE:
+:warning: If you need help with the exercise prompts, click on the **':arrow_forward: Help'**, to get some additonal information.
 
-...correctly installed in your IDE
-
-----
+---
 ### Steps
 - create a project folder (eg.: `myCalulator/`, either in side this Repo or in a new project)
 - initialize the npm project (create package.json) 

demos/copilot-prompt-engineering-1.md

@@ -2,7 +2,7 @@
 
 ## Prompt Techniques & Neighboring Tabs
 
-(Zero-shot, One-shot, etc.)
+### GOAL: Practice Zero-shot, One-shot prompting etc.
 
 ### Step 1: Requirements
 

docs/.nojekyll

@@ -0,0 +1 @@
+

docs/README.md

@@ -1 +1,31 @@
-# Documentation
+# Docs Folder Content
+
+## This repository provides documentation via GitHub pages using [Reveal JS](https://revealjs.com)
+
+## To use these documents in GitHub Pages, simply activate the GitHub Pages for this repository 
+(see the GitHub Docs on [GitHub Pages configuration](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site))
+
+## To Run the Presentation in Development Mode
+
+Inside the `/docs` folder run,
+
+```bash
+npm init
+npm install
+npm start
+```
+
+### Open Local Pages
+
+http://localhost:9000/
+
+## Content Description
+
+|Files/Folders|Description|
+|---|---|
+|images/|Documentation images + source (drawio)|
+|node_modules/reveal.js/|[reveal js](https://revealjs.com) code to build GitHub pages (not checked in)|
+|slides/|Source Markdown + HTML slide files, This is the content of the presentation|
+|index.html|Reveal JS start page|
+|.nojekyll| disable Jekyll for GitHub pages|
+