HackYourFutureBelgium · danielhalasz · Oct 20, 2023 · Oct 26, 2023 · Nov 3, 2023 · Nov 6, 2023
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -9,9 +9,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - run: npm install
+      - name: Install dependencies
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.11.1' # Install the latest LTS (Long-Term Support) version
 
       - run: npm run format:check
 

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -109,7 +109,7 @@
 
   // Defines a default markdown formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter
   "[markdown]": {
-    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
 
   // Enable/disable update table of contents on save

diff --git a/1-what-is-programming/0-javascript/README.md b/1-what-is-programming/0-javascript/README.md
@@ -62,7 +62,7 @@ alert('hello user (alert)');
 
 You can also write your code in a script tag of an HTML file then open the HTML
 file in your browser. The JavaScript will run automatically when the page is
-loaded. See this in action with `./inline.html`.
+loaded. See this in action with `./1-inline-script-tag.html`.
 
 You will learn about this later in the course for examples and exercises that
 introduce how JavaScript interacts with the DOM. It's easier to understand "the
@@ -74,8 +74,9 @@ big picture" when you can see everything in one document.
 
 You can also write your code in a separate `.js` file, then load the file into
 your HTML to execute the code. There are two different ways you can load a `.js`
-file into your HTML, you can see them in action with `./separate-script` and
-`./separate-modules` (you'll learn more about scripts vs. modules later on).
+file into your HTML, you can see them in action with `./2-separate-script-file`
+and `./3-separate-module-files` (you'll learn more about scripts vs. modules
+later on).
 
 You will use this for larger projects and for collaboration. Separating code
 into smaller files each with a clear purpose makes your code base easier to
@@ -113,8 +114,7 @@ in a browser, each one has a specific use case:
   [code.org](https://code.org/) (develop and play games with JS),
   [editor.p5js.org](https://editor.p5js.org/) (create interactive artwork),
   [PencilCode](https://pencilcode.net/edit/myprogram) (write your code as blocks
-  or text), [Ocelot](https://code.ocelot-ide.org/) (disallows "bad" language
-  features and has helpful error messages).
+  or text).
 
 ---
 
@@ -135,11 +135,9 @@ secure and developer-friendly alternative to Node.js.
 
 - [javascript.info/intro](https://javascript.info/intro)
 - [The Net Ninja](https://www.youtube.com/watch?v=VB7y0yxZjro)
-- [MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
 - [Andrew Mosh](https://www.youtube.com/watch?v=W6NZfCO5SIk) \(first 5 minutes\)
 - [Code School](https://www.youtube.com/watch?v=nItSSTwBvSU)
 - [MDN: First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
-- [javascript.info](https://javascript.info/intro)
 - [Danielle Thé](https://www.youtube.com/watch?v=gT0Lh1eYk78)
 
 ---
@@ -148,4 +146,4 @@ secure and developer-friendly alternative to Node.js.
 
 JavaScript is the language used to write the Source Code in this diagram:
 
-[![program diagram](../../assets/a-program.svg)](https://excalidraw.com/#json=_cj6JYwuO38PPGKxXN_cQ,3910Z7e2jGLZu4vjueG-Bg)
+[![program diagram](../../assets/a-program.png)](https://excalidraw.com/#json=_cj6JYwuO38PPGKxXN_cQ,3910Z7e2jGLZu4vjueG-Bg)
diff --git a/1-what-is-programming/0-javascript/some-history.md b/1-what-is-programming/0-javascript/some-history.md
@@ -40,7 +40,6 @@ grow, but this is the case for JavaScript.
 
 - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch1.md#backwards--forwards)
 - [Why is JavaScript backwards compatible to a fault?](https://stackoverflow.com/questions/4937245/why-is-javascript-backwards-compatible-to-a-fault)
-- [edytawrobel](https://www.edytawrobel.com/js-compatibility/)
 - [tonsky.me](https://tonsky.me/blog/compatibility/)
 - [rohitdhatrak](https://www.rohitdhatrak.com/backwards-forwards-compatibility/)
 - [Chrome Breaks the Web](https://www.theregister.com/2021/10/04/chrome_breaks_web/)

diff --git a/1-what-is-programming/1-the-developers/README.md b/1-what-is-programming/1-the-developers/README.md
@@ -23,4 +23,4 @@ Users and on the left in this diagram, developers are on the right.
   - **Dynamic**: Logs and error messages help developers understand what is
     happening inside the computer as it follows the code's instructions.
 
-[![program diagram](../../assets/a-program.svg)](https://excalidraw.com/#json=40qMI89WByj9Yhhh94Ghg,4zpL-AmDgpnbyFJWJfNQhg)
+[![program diagram](../../assets/a-program.png)](https://excalidraw.com/#json=40qMI89WByj9Yhhh94Ghg,4zpL-AmDgpnbyFJWJfNQhg)
diff --git a/1-what-is-programming/2-the-computer/README.md b/1-what-is-programming/2-the-computer/README.md
@@ -53,4 +53,4 @@ developer.
 Tracing code is a very good way to begin understanding how the computer follows
 your instructions one step at a time:
 
-[![program diagram](../../assets/a-program.svg)](https://excalidraw.com/#json=_cj6JYwuO38PPGKxXN_cQ,3910Z7e2jGLZu4vjueG-Bg)
+[![program diagram](../../assets/a-program.png)](https://excalidraw.com/#json=_cj6JYwuO38PPGKxXN_cQ,3910Z7e2jGLZu4vjueG-Bg)
diff --git a/1-what-is-programming/2-the-computer/guide-tracing.mp4 b/1-what-is-programming/2-the-computer/guide-tracing.mp4
diff --git a/1-what-is-programming/3-the-users/README.md b/1-what-is-programming/3-the-users/README.md
@@ -27,4 +27,4 @@ Users and on the left in this diagram, developers are on the right.
   - **Outputting Data**: `alert` is a simple way for the computer to display
     data to a user.
 
-[![program diagram](../../assets/a-program.svg)](https://excalidraw.com/#json=40qMI89WByj9Yhhh94Ghg,4zpL-AmDgpnbyFJWJfNQhg)
+[![program diagram](../../assets/a-program.png)](https://excalidraw.com/#json=40qMI89WByj9Yhhh94Ghg,4zpL-AmDgpnbyFJWJfNQhg)
diff --git a/1-what-is-programming/4-data-in-data-out/README.md b/1-what-is-programming/4-data-in-data-out/README.md
@@ -2,7 +2,7 @@
 
 So what is a program? It's something like this:
 
-![program diagram](../../assets/a-program.svg)
+![program diagram](../../assets/a-program.png)
 
 The basic job of a computer program is to process data. Even the most beautiful
 and interactive programs are just processing data behind the scenes. One of the
@@ -90,7 +90,7 @@ Practice explaining what is happening in each program using these terms:
   out.
 
 In the `/examples` folder you will find a few programs with a comment describing
-the **behavior**, **data in** and **data out**. Your challenge in `/exericses`
+the **behavior**, **data in** and **data out**. Your challenge in `/exercises`
 is to fill in the same information for new programs.
 
 Be _very careful_ about your formatting! Study the example comments closely and

diff --git a/1-what-is-programming/README.md b/1-what-is-programming/README.md
@@ -24,7 +24,7 @@ then communicating with everyone involved to deliver quality software within
 your project's constraints. This diagram shows the different channels of
 communication in a software project:
 
-![rhetorical situation](../assets/the-big-picture.svg)
+![rhetorical situation](../assets/the-big-picture.png)
 
 ---
 
@@ -42,7 +42,7 @@ perfectly structured and do exactly what we want. The computer just _parses_
 (interprets) our code and follows the instructions without any understanding or
 thinking.
 
-You can think of a programing language as the developer's UI for the computer.
+You can think of a programming language as the developer's UI for the computer.
 Because this UI isn't very intuitive you will need to spend a lot of time
 studying syntax and other details before you can program with ease. This is why
 you will be focusing on _understanding_ programs before writing them.

diff --git a/2-just-enough-javascript/02-primitive-values/README.md b/2-just-enough-javascript/02-primitive-values/README.md
@@ -45,6 +45,8 @@ console.log(null);
 'use strict';
 console.log('--- numbers: numbers that are not wrapped in quotation marks ---');
 console.log(12);
+console.log(3.14);
 console.log(0);
 console.log(-12);
+console.log(10_000_000_000);
 ```
diff --git a/2-just-enough-javascript/07-variables/README.md b/2-just-enough-javascript/07-variables/README.md
@@ -304,7 +304,7 @@ many rules and the rules aren't very complicated, you just need to learn them:
 
 - [javascript.info](https://javascript.info/variables#variable-naming)
 - [nexTRIE](https://www.youtube.com/watch?v=O5WlRR-lEDE)
-- [launchcode](ntro-to-professional-web-dev/chapters/data-and-variables/more-on-variables.html#naming-variables)
+- [launchcode](https://education.launchcode.org/intro-to-web-dev-curriculum/data-and-variables/reading/more-on-variables/index.html#naming-variables)
 
 <details>
 <summary>🥚 variable names <strong>can</strong> use numbers, letters, $, or _</summary>