### Cloning the Web-Dev-For-Beginners Repository (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/README.md

This command clones the main Microsoft Web-Dev-For-Beginners repository from GitHub to your local machine. It downloads all the files and history into a new directory named "Web-Dev-For-Beginners".

```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
```

--------------------------------

### Cloning Your Forked Repository (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/README.md

This command clones your personal copy (fork) of the repository from GitHub to your local machine. Replace <your-repository-url> with the specific URL of your forked repository.

```bash
git clone <your-repository-url>
```

--------------------------------

### Run Development Server with lite-server (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/solution/README.md

This command starts a local development web server using npx and the lite-server package. It serves the current directory ('.') and is used to run the bank app locally in a browser. Requires Node.js and the API server to be running.

```Shell
npx lite-server .
```

--------------------------------

### Starting Project - Bash

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/5-keeping-score/README.md

Navigates into the 'your-work' directory and starts the project using the 'npm start' command, typically launching a local development server.

```bash
cd your-work
npm start
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/start/README.md

Installs all required packages listed in the project's package.json file. This command fetches and installs the necessary libraries and tools for the project to run.

```shell
npm install
```

--------------------------------

### Installing Node.js Dependencies (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/quiz-app/README.md

Runs the `npm install` command to download and install all required Node.js packages and dependencies listed in the project's `package.json` file.

```Bash
npm install
```

--------------------------------

### Navigate and Start Development Server (NPM)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md

Provides the bash commands required to change the current directory to the project folder ('your-work') and start the local development server using the 'npm start' command, which typically serves the 'index.html' file.

```bash
cd your-work
npm start
```

--------------------------------

### Start Space Game Project (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/6-end-condition/README.md

Navigates into the `your-work` directory and starts the local development server for the Space Game project using `npm start`. This typically launches the game on `http://localhost:5000`.

```bash
cd your-work
npm start
```

--------------------------------

### Starting Project Server with npm Bash

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/README.md

These bash commands are used to navigate into the project's working directory and then start a local HTTP server using npm. This server hosts the game files, allowing the user to view the game in a web browser.

```bash
cd your-work
npm start
```

--------------------------------

### Starting the Game Server (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/4-collision-detection/README.md

Navigate into the project directory and start the local development server. This command launches the game application, typically making it accessible via a web browser at a specified address like http://localhost:5000.

```bash
cd your-work
npm start
```

--------------------------------

### Starting the Quiz App Locally (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/quiz-app/README.md

Runs the `dev` script defined in the project's `package.json` file using npm. This command usually starts a local development server with features like hot-reloading for testing the application.

```Bash
npm run dev
```

--------------------------------

### Setting Up Game Initialization and Loop - JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/translations/README.ja.md

Configures the `window.onload` event handler to start the game once the page resources are loaded. It retrieves the canvas and context, loads necessary image textures asynchronously, calls `initGame` to set up the initial state, and starts a game loop using `setInterval` to clear the canvas, redraw the background, and draw all game objects periodically.

```javascript
window.onload = async () => {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  heroImg = await loadTexture("assets/player.png");
  enemyImg = await loadTexture("assets/enemyShip.png");
  laserImg = await loadTexture("assets/laserRed.png");

  initGame();
  let gameLoopId = setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawGameObjects(ctx);
  }, 100)
  
};
```

--------------------------------

### Subscribing to a Pub/Sub Message (Example) in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/1-introduction/README.md

An example snippet showing how to subscribe a specific action (hero movement) to a defined message (`HERO_MOVE_LEFT`) using the `EventEmitter`'s `on` method. This snippet is repeated in the text to illustrate modifying behavior.

```javascript
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.move(5,0);
});
```

--------------------------------

### Check Git Version (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Use this command in your terminal to verify if Git is installed on your system and to see the installed version number.

```Shell
git --version
```

--------------------------------

### Installing Project Dependencies with NPM

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/1-about-browsers/README.md

This command-line snippet uses the Node Package Manager (npm) to install the project's dependencies as listed in the `package.json` file. This is necessary to set up the development environment, including tools like webpack which is used for bundling the extension's code.

```Shell
npm install
```

--------------------------------

### Switch Statement Example in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/3-making-decisions/README.md

Provides a concrete example of a `switch` statement in JavaScript, demonstrating how it evaluates a variable (`a`) and executes the code block corresponding to the matching `case` value. Includes `break` and `default`.

```JavaScript
// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);
```

--------------------------------

### Creating a Simple JavaScript Function

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/2-functions-methods/README.md

This example demonstrates creating a basic JavaScript function named `displayGreeting` that logs a fixed string 'Hello, world!' to the console when called.

```JavaScript
function displayGreeting() {
  console.log('Hello, world!');
}
```

--------------------------------

### Installing Dependencies npm

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/solution/README.md

This command uses npm (Node Package Manager) to install all the project dependencies listed in the package.json file. It is a necessary step after cloning the repository to ensure all required libraries and tools are available for building and running the project.

```bash
npm install
```

--------------------------------

### Add Start Button Event Listener - JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/4-typing-game/typing-game/README.md

Adds an event listener to the element with the ID 'start'. When clicked, it selects a random quote, splits it into words, resets the word index, updates the UI to display the quote with the first word highlighted, clears the input box, sets focus to the input box, and starts the game timer.

```javascript
// at the end of script.js
document.getElementById('start').addEventListener('click', () => {
  // get a quote
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
  // Put the quote into an array of words
  words = quote.split(' ');
  // reset the word index for tracking
  wordIndex = 0;

  // UI updates
  // Create an array of span elements so we can set a class
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
  // Convert into string and set as innerHTML on quote display
  quoteElement.innerHTML = spanWords.join('');
  // Highlight the first word
  quoteElement.childNodes[0].className = 'highlight';
  // Clear any prior messages
  messageElement.innerText = '';

  // Setup the textbox
  // Clear the textbox
  typedValueElement.value = '';
  // set focus
  typedValueElement.focus();
  // set the event handler

  // Start the timer
  startTime = new Date().getTime();
});
```

--------------------------------

### If Statement Example with Variables in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/3-making-decisions/README.md

Provides a practical example of an `if` statement using variables `currentMoney` and `laptopPrice` to check if a condition (`currentMoney >= laptopPrice`) is met before executing a code block.

```JavaScript
let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}
```

--------------------------------

### Example Account Object Structure (JSON)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/3-data/README.md

Provides a sample JSON object representing an account structure received from the server. It includes fields for user, currency, description, balance, and an array of transaction objects, illustrating the data format to be displayed on the dashboard.

```JSON
{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}
```

--------------------------------

### Initial Body and H1 Styles (CSS)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/3-terrarium/2-intro-to-css/translations/README.zh-cn.md

Provides the starting CSS rules for the body (setting font family) and h1 (setting color and text alignment). This shows basic tag selectors before introducing more specific selectors like IDs and Classes.

```CSS
body {
	font-family: helvetica, arial, sans-serif;
}

h1 {
	color: #3a241d;
	text-align: center;
}
```

--------------------------------

### Setting up Window Load and Game Loop (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/README.md

Provides the beginning of the `window.onload` function. This function is intended to run once the page has fully loaded. It retrieves the canvas and its 2D context, loads necessary image assets asynchronously, calls `initGame` to set up the initial state, and starts a game loop using `setInterval`.

```javascript
window.onload = async () => {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  heroImg = await loadTexture("assets/player.png");
  enemyImg = await loadTexture("assets/enemyShip.png");
  laserImg = await loadTexture("assets/laserRed.png");

  initGame();
  let gameLoopId = setInterval(() => {
```

--------------------------------

### Loading Image Asset with Promise Pattern (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md

Provides a recommended pattern for loading image assets using a JavaScript Promise, making asynchronous loading easier to manage, especially when loading multiple assets, and shows an example of how to use the async function with await.

```javascript
function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}
```

--------------------------------

### JavaScript Function with One Parameter

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/2-functions-methods/README.md

This example updates the `displayGreeting` function to accept a `name` parameter, allowing the greeting message to be customized using a template literal.

```JavaScript
function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}
```

--------------------------------

### Testing Local API Endpoint (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/4-state-management/translations/README.zh-tw.md

Command to test if the local server API is running correctly by making a GET request to the /api endpoint.

```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```

--------------------------------

### Calculate Fibonacci Sequence in ARM Assembly

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/1-intro-to-programming-languages/README.md

This ARM assembly snippet performs the same task as the JavaScript example: calculating and printing the first 10 numbers of the Fibonacci sequence. It illustrates a low-level language implementation, directly manipulating registers and memory addresses.

```c
 area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end
```

--------------------------------

### Centralized State Object Initialization (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/4-state-management/translations/README.zh-tw.md

Refactoring the state management by introducing a centralized `state` object to hold application data, starting with the `account` property.

```js
let state = {
  account: null
};
```

--------------------------------

### Initial HTML Structure for Accessibility Challenge

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/3-accessibility/README.md

This HTML snippet provides the starting point for an accessibility challenge. It uses non-semantic elements like `div` and `p` for structure and navigation, which should be refactored using more appropriate semantic HTML5 tags to improve accessibility.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
    </title>
    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="site-header">
      <p class="site-title">Turtle Ipsum</p>
      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
    </div>
    <div class="main-nav">
      <p class="nav-header">Resources</p>
      <div class="nav-list">
        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
      </div>
    </div>
    <div class="main-content">
      <div>
        <p class="page-title">Welcome to Turtle Ipsum. 
            <a href="">Click here</a> to learn more.
        </p>
        <p class="article-text">
          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
      </div>
    </div>
    <div class="footer">
      <div class="footer-section">
        <span class="button">Sign up for turtle news</span>
      </div><div class="footer-section">
        <p class="nav-header footer-title">
          Internal Pages
        </p>
        <div class="nav-list">
          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
        </div>
      </div>
      <p class="footer-copyright">&copy; 2016 Instrument</span>
    </div>
  </body>
</html>
```

--------------------------------

### Generating Fibonacci Sequence in ARM Assembly

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md

This ARM Assembly snippet performs the same task as the JavaScript example: calculating and printing the first 10 Fibonacci numbers. It serves as a comparison to show how the same logic is implemented in a low-level language, requiring more explicit memory and register manipulation.

```Assembly
 area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end
```

--------------------------------

### Test Local Bank API (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/4-state-management/README.md

Command to verify that the local bank API server is running correctly by making a simple GET request to its root endpoint. It is a prerequisite for the lesson.

```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```

--------------------------------

### Extending GameObject for Hero (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/README.md

Provides a placeholder example showing how to extend the base GameObject class to create a Hero class. The constructor is noted as needing properties for position (x, y), type, and speed, inheriting basic properties from GameObject.

```javascript
class Hero extends GameObject {
  constructor(x, y) {
    ...it needs an x, y, type, and speed
  }
}
```

--------------------------------

### Concatenating Strings with Plus Operator in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/1-data-types/README.md

Demonstrates how to join two or more strings together using the '+' operator. Shows examples with and without adding spaces or punctuation.

```javascript
let myString1 = "Hello";
let myString2 = "World";

myString1 + myString2 + "!"; //HelloWorld!
myString1 + " " + myString2 + "!"; //Hello World!
myString1 + ", " + myString2 + "!"; //Hello, World!
```

--------------------------------

### If...Else Statement Example in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/3-making-decisions/README.md

Illustrates the use of an `if...else` statement in JavaScript. The `if` block runs if the condition is true, and the `else` block runs if the condition is false, providing alternative execution paths.

```JavaScript
let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}
```

--------------------------------

### Test Local Bank API Server (sh)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/3-data/README.md

This command uses `curl` to send an HTTP GET request to the local bank API server endpoint `/api`. It is used to verify that the server is running correctly and accessible, expecting the response "Bank API v1.0.0".

```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```

--------------------------------

### Adding Event Listeners and Initializing App (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/2-forms-browsers-local-storage/README.md

Adds event listeners to the form for submission, triggering the `handleSubmit` function, and to the clear button for resetting, triggering the `reset` function. It also calls an `init` function to start the application logic when the script loads.

```JavaScript
form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();
```

--------------------------------

### Progressive Enhancement Task - HTML Placeholder

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/lesson-template/README.md

This code block is a placeholder within a 'Task' section, intended to contain code examples for progressively enhancing a codebase collaboratively. The actual code content is expected to replace the 'code blocks' placeholder.

```html
code blocks
```

--------------------------------

### Creating Hero Object in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/README.md

This function creates a single hero object. It calculates the hero's starting position near the bottom center of the canvas, instantiates a `Hero` object, assigns an image (`heroImg`), and adds it to the `gameObjects` array. It depends on `canvas`, `Hero` class, `heroImg`, and `gameObjects` array.

```javascript
function createHero() {
      hero = new Hero(
        canvas.width / 2 - 45,
        canvas.height - canvas.height / 4
      );
      hero.img = heroImg;
      gameObjects.push(hero);
    }
```

--------------------------------

### Building Extension webpack npm

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/solution/README.md

This command executes a script defined in the package.json file, typically configured to run webpack. Webpack bundles the project's source code and assets into a format suitable for a browser extension, usually outputting the result into a 'dist' folder. This step prepares the extension for installation in a browser.

```bash
npm run build
```

--------------------------------

### Initialize Git Repository in Bash

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Run `git init` inside your project folder to create a new, empty Git repository or reinitialize an existing one. This command creates the necessary `.git` directory to track changes.

```bash
git init
```

--------------------------------

### Testing Bank API Endpoint (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/2-forms/README.md

This shell command uses `curl` to send an HTTP GET request to the local Bank API server running on port 5000. It is used to verify that the API server is running and accessible, expecting the response "Bank API v1.0.0".

```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```

--------------------------------

### Stage All Changes in Git with Bash

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Use `git add .` to add all changes in the current directory and its subdirectories to the staging area. This prepares all modified and new files for the next commit.

```bash
git add .
```

--------------------------------

### Creating Enemy Objects in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/README.md

This function initializes a grid of enemy objects. It calculates starting and stopping X coordinates based on canvas width and a fixed monster width, then iterates through X and Y positions, creating new `Enemy` instances, assigning an image (`enemyImg`), and adding them to a `gameObjects` array. It depends on `canvas`, `Enemy` class, `enemyImg`, and `gameObjects` array.

```javascript
function createEnemies() {
      const MONSTER_TOTAL = 5;
      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
      const STOP_X = START_X + MONSTER_WIDTH;
    
      for (let x = START_X; x < STOP_X; x += 98) {
        for (let y = 0; y < 50 * 5; y += 50) {
          const enemy = new Enemy(x, y);
          enemy.img = enemyImg;
          gameObjects.push(enemy);
        }
      }
    }
```

--------------------------------

### Project File Structure

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md

Shows the initial file and folder structure provided for the project, including asset files, the main HTML file, the JavaScript application file, and the npm package configuration.

```bash
-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json
```

--------------------------------

### List Git Configuration (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Execute this command in the terminal to display your current Git configuration settings, including the global username and email you previously set.

```Shell
git config --list
```

--------------------------------

### Create Project Directory and Navigate

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/4-typing-game/typing-game/README.md

These commands create a new directory named 'typing-game' and then change the current directory to the newly created one. This is the first step in setting up the project structure for the typing game.

```bash
# Linux or macOS
mkdir typing-game && cd typing-game

# Windows
md typing-game && cd typing-game
```

--------------------------------

### Cloning Repository and Navigating to Quiz App Directory (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/quiz-app/README.md

Provides the bash commands to clone the repository created from the template and then change the current directory into the `quiz-app` subdirectory where the project is located.

```Bash
git clone https://github.com/your-github-organization/repo-name
cd repo-name/quiz-app
```

--------------------------------

### Creating HTML Structure for Resume Website (HTML)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md

Provides the foundational HTML markup for a personal resume website. It includes sections for contact information, skills, education, an 'About' section, and work experience. The code links to an external CSS file (`style.css`) and the Font Awesome library for icons.

```HTML
<html>

    <head>
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <title>Your Name Goes Here!</title>
    </head>
    <body>
        <header id="header">
            <!-- resume header with your name and title -->
            <h1>Your Name Goes Here!</h1>
            <hr>
            Your Role!
            <hr>
        </header>
        <main>
            <article id="mainLeft">
                <section>
                    <h2>CONTACT</h2>
                    <!-- contact info including social media -->
                    <p>
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                        <a href="mailto:username@domain.top-level domain">Write your email here</a>
                    </p>
                    <p>
                        <i class="fab fa-github" aria-hidden="true"></i>
                        <a href="github.com/yourGitHubUsername">Write your username here!</a>
                    </p>
                    <p>
                        <i class="fab fa-linkedin" aria-hidden="true"></i>
                        <a href="linkedin.com/yourLinkedInUsername">Write your username here!</a>
                    </p>
                </section>
                <section>
                    <h2>SKILLS</h2>
                    <!-- your skills -->
                    <ul>
                        <li>Skill 1!</li>
                        <li>Skill 2!</li>
                        <li>Skill 3!</li>
                        <li>Skill 4!</li>
                    </ul>
                </section>
                <section>
                    <h2>EDUCATION</h2>
                    <!-- your education -->
                    <h3>Write your course here!</h3>
                    <p>
                        Write your institution here!
                    </p>
                    <p>
                        Start - End Date
                    </p>
                </section>            
            </article>
            <article id="mainRight">
                <section>
                    <h2>ABOUT</h2>
                    <!-- about you -->
                    <p>Write a blurb about yourself!</p>
                </section>
                <section>
                    <h2>WORK EXPERIENCE</h2>
                    <!-- your work experience -->
                    <h3>Job Title</h3>
                    <p>
                        Organization Name Goes Here | Start Month – End Month
                    </p>
                    <ul>
                            <li>Task 1 - Write what you did!</li>
                            <li>Task 2 - Write what you did!</li>
                            <li>Write the outcomes/impact of your contribution</li>
                            
                    </ul>
                    <h3>Job Title 2</h3>
                    <p>
                        Organization Name Goes Here | Start Month – End Month
                    </p>
                    <ul>
                            <li>Task 1 - Write what you did!</li>
                            <li>Task 2 - Write what you did!</li>

```

--------------------------------

### Drawing Basic Shape on Canvas (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/2-drawing-to-canvas/README.md

Demonstrates the steps to draw a red rectangle on an HTML canvas using JavaScript: getting canvas reference, getting 2D context, setting fill style, and drawing the rectangle with specified location and size.

```javascript
// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height
```

--------------------------------

### Setting Up User Preferences in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md

This function initializes user settings by storing the provided API key and region name in local storage. It then updates the UI to show a loading state, clear previous errors, and display a clear button. Finally, it triggers the `displayCarbonUsage` function to fetch and display carbon data using the stored credentials.

```JavaScript
function setUpUser(apiKey, regionName) {
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	//faire un premier appel
	displayCarbonUsage(apiKey, regionName);
}
```

--------------------------------

### Navigate to Working Folder in Bash

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Use the `cd` command to change the current directory in the terminal to the desired working folder for your project. Replace `[name of your folder]` with the actual path to your directory.

```bash
cd [name of your folder]
```

--------------------------------

### Arithmetic Operators in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/1-data-types/translations/README.ja.md

Provides examples of basic arithmetic operations in JavaScript using the addition (`+`), subtraction (`-`), multiplication (`*`), division (`/`), and modulo (`%`) operators.

```javascript
1 + 2 //期待される答えは 3 です。
```

```javascript
1 - 2 //期待される答えは -1 です。
```

```javascript
1 * 2 //期待される答えは 2 です。
```

```javascript
1 / 2 //期待される答えは 0.5 です。
```

```javascript
1 % 2 //期待される答えは 1 です。
```

--------------------------------

### Cloning a Repository with Git (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Copies the contents of a remote GitHub repository to your local machine using the git clone command. Replace 'https://github.com/ProjectURL' with the actual repository URL.

```Shell
git clone https://github.com/ProjectURL
```

--------------------------------

### Demonstrating Case Sensitivity in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/1-data-types/README.md

Provides an example highlighting that JavaScript variable names are case-sensitive, meaning `age` and `Age` are treated as distinct variables.

```javascript
let age = 1; let Age = 2; age == Age
```

--------------------------------

### Declaring String Variables and Literals in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/1-data-types/README.md

Shows examples of string literals using single and double quotes, and how to store a string value in a variable.

```javascript
'This is a string'
```

```javascript
"This is also a string"
```

```javascript
let myString = 'This is a string value stored in a variable';
```

--------------------------------

### Using Pub/Sub EventEmitter for Game Events in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/1-introduction/README.md

Demonstrates how to utilize the `EventEmitter` class to handle game events. It defines message types, creates an emitter instance, subscribes a hero movement action to a message, and emits the message based on keyboard input.

```javascript
//set up a message structure
const Messages = {
  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
};
//invoke the eventEmitter you set up above
const eventEmitter = new EventEmitter();
//set up a hero
const hero = createHero(0,0);
//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.move(5,0);
});

//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
window.addEventListener('keyup', (evt) => {
  if (evt.key === 'ArrowLeft') {
    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
  }
});
```

--------------------------------

### Building the Quiz App (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/quiz-app/README.md

Executes the `build` script defined in the project's `package.json` file using npm. This typically compiles, bundles, or processes the source code for deployment or distribution.

```Bash
npm run build
```

--------------------------------

### Styling Resume Website Layout (CSS)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md

Provides CSS rules to format the layout and appearance of the resume website, including font styles, spacing, grid layout for main content, and basic element styling.

```css
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    max-width: 960px;
    margin: auto;
}
h1 {
    font-size: 3em;
    letter-spacing: .6em;
    padding-top: 1em;
    padding-bottom: 1em;
}

h2 {
    font-size: 1.5em;
    padding-bottom: 1em;
}

h3 {
    font-size: 1em;
    padding-bottom: 1em;
}
main { 
    display: grid;
    grid-template-columns: 40% 60%;
    margin-top: 3em;
}
header {
    text-align: center;
    margin: auto 2em;
}

section {
    margin: auto 1em 4em 2em;
}

i {
    margin-right: .5em;
}

p {
    margin: .2em auto
}

hr {
    border: none;
    background-color: lightgray;
    height: 1px;
}

h1, h2, h3 {
    font-weight: 100;
    margin-bottom: 0;
}
#mainLeft {
    border-right: 1px solid lightgray;
}
```

--------------------------------

### Initializing HTML Structure for Bank App

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/1-template-route/README.md

Sets up the basic HTML5 document structure for the web application, including meta tags, title, and an empty body where content will be dynamically loaded.

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>
```

--------------------------------

### Staging and Committing Git Changes (Bash)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Stages all changes in the current directory for the next commit (`git add .`) and then creates a new commit with the staged changes, including a required descriptive message (`git commit -m`).

```Bash
git add .
git commit -m "my changes"
```

--------------------------------

### Setting User Data and Initiating Display in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/2-forms-browsers-local-storage/README.md

Defines the `setUpUser` function which takes an API key and region name as arguments. It saves these values to the browser's local storage, updates the UI to indicate a loading state and clear any previous errors, shows the clear button, and finally calls the `displayCarbonUsage` function with the provided credentials to fetch and display data.

```JavaScript
function setUpUser(apiKey, regionName) {
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	//make initial call
	displayCarbonUsage(apiKey, regionName);
}
```

--------------------------------

### Initializing and Freezing State Object (JS)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/4-state-management/translations/README.ja.md

Initializes the centralized `state` object and immediately freezes it using `Object.freeze()`. This ensures that the initial state is immutable from the start, preventing accidental direct modification.

```js
let state = Object.freeze({
  account: null
});
```

--------------------------------

### Resetting Game State in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/6-end-condition/README.md

Creates a function to reset the game state, clearing the interval, event listeners, re-initializing the game, and starting a new game loop.

```javascript
function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}
```

--------------------------------

### JavaScript Function with Default Parameter Value

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/2-functions-methods/README.md

This example shows how to define a function with a parameter (`salutation`) that has a default value ('Hello'). If no argument is provided for this parameter during the function call, the default value will be used.

```JavaScript
function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}
```

--------------------------------

### Initializing Game State (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/README.md

Defines the `initGame` function responsible for setting up the initial state of the game. It clears the game objects array, creates enemies and the hero, and subscribes hero movement logic to the corresponding key event messages emitted by the EventEmitter.

```javascript
function initGame() {
  gameObjects = [];
  createEnemies();
  createHero();

  eventEmitter.on(Messages.KEY_EVENT_UP, () => {
    hero.y -=5 ;
  })

  eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
    hero.y += 5;
  });

  eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
    hero.x -= 5;
  });

  eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
    hero.x += 5;
  });
}
```

--------------------------------

### Getting Array Length in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/4-arrays-loops/README.md

Explains how to determine the number of elements currently stored in an array using the built-in `length` property. This property returns a numerical value representing the array's size.

```JavaScript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
```

--------------------------------

### Configure Git User Profile (Shell)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

These commands set your global Git username and email address. This information is associated with the commits you make, identifying you as the author. Replace "your-name" and "your-email" with your actual name and email.

```Shell
git config --global user.name "your-name"
```

```Shell
git config --global user.email "your-email"
```

--------------------------------

### Finding Biggest Number with If-Else (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/3-making-decisions/README.md

This snippet shows the equivalent if...else structure for the previous ternary operator example. It explicitly checks if firstNumber is greater than secondNumber and assigns the appropriate value to biggestNumber.

```JavaScript
let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}
```

--------------------------------

### Accessing Array Elements by Index in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/2-js-basics/4-arrays-loops/README.md

Illustrates how to retrieve a specific element from an array using its zero-based index. The index is placed within square brackets after the array variable name to get the value at that position.

```JavaScript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
```

--------------------------------

### Adding HTML Document Head Section

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/3-terrarium/1-intro-to-html/README.md

Includes the `<head>` section within the `<html>` tags, containing essential metadata such as the page title, character set, compatibility settings, and viewport configuration for responsive design.

```HTML
<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
```

--------------------------------

### Initializing Game State and Event Listeners - JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/3-moving-elements-around/translations/README.ja.md

Defines the `initGame` function responsible for setting up the initial state of the game. It clears existing game objects, creates new enemies and the hero, and registers listeners with the `eventEmitter` to update the hero's position when directional key events are emitted.

```javascript
function initGame() {
  gameObjects = [];
  createEnemies();
  createHero();

  eventEmitter.on(Messages.KEY_EVENT_UP, () => {
    hero.y -=5 ;
  })

  eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
    hero.y += 5;
  });

  eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
    hero.x -= 5;
  });

  eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
    hero.x += 5;
  });
}
```

--------------------------------

### HTML Element with ID and Class

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/3-terrarium/2-intro-to-css/translations/README.zh-cn.md

Shows an example of an HTML div element having both an id (left-container) and a class (container). This is used to illustrate how elements can be targeted by either ID (unique) or Class (reusable) selectors in CSS, and how to potentially refactor repetitive CSS.

```HTML
<div id="left-container" class="container"></div>
```

--------------------------------

### Creating Basic HTML Document Structure

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/3-terrarium/1-intro-to-html/README.md

This snippet provides the initial boilerplate HTML structure for the virtual terrarium page, including the doctype, html, head (with title, charset, compatibility, and viewport meta tags), and an empty body. It sets up the basic framework for the web page.

```HTML
<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>
```

--------------------------------

### Codeswing Configuration (JSON)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md

Provides a basic configuration file for the Codeswing VS Code extension, typically used to define scripts and styles to be included or processed by the extension.

```json
{
    "scripts": [],
    "styles": []
}
```

--------------------------------

### Build Extension with Webpack

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/5-browser-extension/start/README.md

Executes the build script defined in package.json, which typically uses Webpack to compile and bundle the extension's source code into a distribution folder (usually 'dist'). This prepares the code for deployment.

```shell
npm run build
```

--------------------------------

### Get Rectangle Representation (JavaScript)

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/6-space-game/4-collision-detection/README.md

Adds a method to a GameObject class to return its bounding box as a rectangle object. This representation is crucial for implementing collision detection by providing the top, left, bottom, and right coordinates of the game object.

```javascript
rectFromGameObject() {
    return {
      top: this.y,
      left: this.x,
      bottom: this.y + this.height,
      right: this.x + this.width,
    };
  }
```

--------------------------------

### Creating HTML Registration Form

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/2-forms/README.md

Adds a second HTML form for user registration, including fields for username, currency, description, and balance. Demonstrates setting a default value using the value attribute and using the number input type.

```HTML
<hr/>
<h2>Register</h2>
<form id="registerForm">
  <label for="user">Username</label>
  <input id="user" name="user" type="text">
  <label for="currency">Currency</label>
  <input id="currency" name="currency" type="text" value="$">
  <label for="description">Description</label>
  <input id="description" name="description" type="text">
  <label for="balance">Current balance</label>
  <input id="balance" name="balance" type="number" value="0">
  <button>Register</button>
</form>
```

--------------------------------

### Initializing Immutable State Object in JavaScript

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/7-bank-project/4-state-management/README.md

Initializes the application's state object with an account property set to null. The Object.freeze() method is immediately applied to the initial state object, making it immutable from the start and preventing direct modification.

```JavaScript
let state = Object.freeze({
  account: null
});
```

--------------------------------

### Add Remote GitHub Repository in Git with Bash

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/1-getting-started-lessons/2-github-basics/README.md

Use `git remote add origin [URL]` to connect your local Git repository to a remote repository, typically hosted on GitHub. 'origin' is the conventional name for the primary remote, and the URL points to the remote repository.

```bash
git remote add origin https://github.com/username/repository_name.git
```

--------------------------------

### Demonstrating JavaScript Closures and Scope

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/3-terrarium/3-intro-to-DOM-and-closures/README.md

This example illustrates the concept of a JavaScript closure, where an inner function (`addCandy`) can access variables (`candy`) from its outer function's scope (`displayCandy`). It also shows that variables declared inside the closure are not accessible from outside.

```javascript
function displayCandy(){
	let candy = ['jellybeans'];
	function addCandy(candyType) {
		candy.push(candyType)
	}
	addCandy('gumdrops');
}
displayCandy();
console.log(candy)
```

--------------------------------

### Open Project in VS Code

Source: https://github.com/microsoft/web-dev-for-beginners/blob/main/4-typing-game/typing-game/README.md

This command opens the current directory (which should be 'typing-game' after the previous step) in Visual Studio Code. This allows the user to easily create and edit the project files (index.html, script.js, style.css).

```bash
code .
```