TL;DR

OS : Mac M1 Pro

Learning Resources

Solidity: Foundry
Git: Git for Windows (Mac already has Git and thus does not need to install this.)
JavaScript: Node.js
JavaScript development framework: React
Code editor: Visual Studio Code

Git for Windows
- (Suggested) Check "Additional icons (On the Desktop)".
- (Optional) Set your name for Git.
```
git config --global user.name "John Doe"
```
- Set your email for Git.
```
git config --global user.email johndoe@example.com
```
Foundry
- Open a Git Bash (in Windows) or a terminal (in Mac).
```
curl -L https://foundry.paradigm.xyz | bash
```
- Exit the Git Bash or the terminal. Then, open it again.
- Install Foundry
```
foundryup
```
- Note: If you use Mac (especially Intel CPU models), you may encounter the error message when installing Foundry: Library not loaded: /usr/local/opt/libusb/lib/libusb-1.0.0.dylib. You can type brew install libusb to solve this issue.
JavaScript
- Install Node.js.
- Check the installed version.
```
node -v
npm -v
```
Code editor
- Install Visual Studio Code.
- Install the "solidity" extension by Juan Blanco, which provides syntax highlighting, IntelliSense, and debugging support for Solidity.
- (Optional) Install the "Mark for VS Code" extension to create and view slides directly within VS Code using Marp Markdown.

Open a Git Bash (in Windows) or a terminal (in Mac).
Start the test blockchain.
```
anvil
```
Open another Git Bash (in Windows) or another terminal (in Mac).
Create a root folder "Web" and enter it.
```
mkdir Web
cd Web
```
Create a folder "vieweth" and enter it.
```
mkdir vieweth
cd vieweth
```
Initialize an npm project.
```
npm init
```
Install Web3.js.
```
npm install web3
```
Edit "vieweth.js". (You can copy this file from /smart_contracts/code/web/vieweth/vieweth.js.)
View the result.
```
node vieweth
```