Audience: Complete beginners, self-taught developers, students, and anyone who has written code before but still feels unsure about IDEs, terminals, compilers, interpreters, package managers, virtual environments, PATH, or project setup.

Course goal: By the end of this course, you should be able to set up a new development machine, create isolated projects, install dependencies correctly, run and debug code, understand the files your tools generate, and diagnose the most common environment problems without blindly reinstalling everything.

Course map

How to use this course

This course is designed to be followed slowly. Do not try to install every IDE and every language in one sitting. Choose one language, complete its setup, run the verification project, and then move on.

Each major section contains:

• Plain-language explanations of the ideas behind the tools.
• Step-by-step instructions for Windows, macOS, and Linux where appropriate.
• Commands to type and explanations of what each command does.
• Expected results so you know whether a step worked.
• “You’re done when…” checkpoints that define success.
• Common failure modes with likely causes and fixes.
• Practice tasks that make you use the setup rather than merely read about it.

Recommended order

1. Read Module 0 and Module 1 even if you are eager to start coding.
2. Complete the IDE module that matches your language.
3. Create at least one small command-line project.
4. Learn basic debugging before moving to GUI development.
5. Complete one GUI mini-project.
6. Use the troubleshooting module whenever something behaves differently from the instructions.

Important expectation

The names and locations of buttons can change slightly between software versions. The underlying ideas do not change nearly as often. When a menu name looks different, look for the same concept: interpreter, SDK, toolchain, extensions, packages, build, run, or debug.

Learning objectives

By the end of this module, you should be able to:

• Identify your operating system and processor architecture.
• Open a terminal and understand what the prompt represents.
• Navigate folders using basic terminal commands.
• Explain what administrator privileges are and when they are needed.
• Explain what PATH is at a beginner level.
• Create a clean folder structure for programming projects.

0.1 Know your operating system

Development instructions frequently differ by operating system. Before following a command, determine which family your computer belongs to:

• Windows: Windows 10, Windows 11, or a later Windows desktop release.
• macOS: Apple’s operating system for Mac computers.
• Linux: Ubuntu, Debian, Fedora, Arch, Mint, or another distribution.

A command written for Linux may not work in Windows PowerShell. A Windows path such as C:\Users\Jude\Projects will not exist on macOS or Linux. A macOS package-manager command using Homebrew will not work on Ubuntu.

Check your operating system

Windows

1. Press Windows + R.
2. Type winver.
3. Press Enter.

macOS

1. Open the Apple menu.
2. Select About This Mac.

Linux

Open a terminal and run:

cat /etc/os-release

The output normally includes the distribution name and version.

0.2 Know your processor architecture

Most current desktop systems use a 64-bit architecture. You may see names such as:

• x64, x86_64, or amd64: 64-bit Intel/AMD architecture.
• arm64 or aarch64: 64-bit ARM architecture, used by Apple Silicon Macs and some Windows/Linux computers.
• x86 or i386: older 32-bit architecture.

Why this matters: installers, native libraries, compilers, and GUI frameworks sometimes provide separate downloads for x64 and ARM64. Installing a package for the wrong architecture can cause errors such as “bad executable format,” “incompatible architecture,” or a linker failure.

Check architecture

Windows PowerShell

$env:PROCESSOR_ARCHITECTURE

macOS/Linux

uname -m

Typical output:

x86_64

or:

arm64

0.3 What is a terminal?

A terminal is a text-based interface for giving commands to your computer. Instead of clicking through folders and menus, you type instructions.

Common terminals and shells include:

• Windows Terminal: An application that can host PowerShell, Command Prompt, and other shells.
• PowerShell: A modern Windows command shell and scripting language.
• Command Prompt: The older Windows command shell, commonly called cmd.
• Terminal.app: The built-in macOS terminal application.
• Bash: A common shell on Linux and many development systems.
• Zsh: The default shell on modern macOS versions.

The terminal application is the window. The shell is the command interpreter running inside that window.

What is the prompt?

You may see something like:

PS C:\Users\Jude>

or:

jude@computer:~/Projects$

This is the prompt. It normally tells you:

• Which shell you are using.
• Which user account is active.
• Which folder you are currently inside.
• That the shell is ready for the next command.

Do not type the prompt itself when copying a command. Type only the command after it.

0.4 Essential terminal navigation

Show the current folder

PowerShell

Get-Location

PowerShell also accepts:

pwd

macOS/Linux

pwd

pwd means print working directory.

List files and folders

PowerShell

Get-ChildItem

The shorter aliases below also work:

dir
ls

macOS/Linux

ls

Show hidden files and more details:

ls -la

Enter a folder

cd Projects

cd means change directory.

Go up one folder

cd ..

Two dots mean the parent folder.

Create a folder

All major shells

mkdir Projects

Create and enter a project folder

mkdir hello-project
cd hello-project

Paths with spaces

Use quotation marks:

cd "C:\Users\Jude\My Projects"

cd "/Users/jude/My Projects"

Absolute and relative paths

An absolute path begins from the root of the drive or file system:

C:\Users\Jude\Projects\hello-project

/home/jude/Projects/hello-project

A relative path begins from your current folder:

./hello-project

The . means “the current folder.”

0.5 Administrator privileges

Some installations need permission to modify protected system folders. On Windows, this may produce a User Account Control prompt. On macOS/Linux, instructions may use sudo.

sudo temporarily runs one command with elevated privileges:

sudo apt install build-essential

Use administrator privileges only when the installation genuinely requires them. Do not use sudo as a general response to every permission error. Doing so can create files owned by the administrator account inside your personal project folders, which causes more permission problems later.

A common bad pattern is:

sudo npm install

inside a normal project. Local project packages should generally be installed as your normal user.

0.6 What is PATH?

PATH is an environment variable containing a list of folders that your shell searches when you type a command.

Suppose you type:

python

The shell does not search your entire hard drive. It checks the folders listed in PATH, in order, until it finds a matching executable such as python.exe or python.

This explains several common errors:

'python' is not recognized as an internal or external command

command not found: node

These errors do not always mean the program is absent. The program may be installed, but its folder is not in PATH.

View PATH

PowerShell

$env:Path

macOS/Linux

echo $PATH

Find which executable will run

Windows

where.exe python
where.exe node
where.exe java

macOS/Linux

which python3
which node
which java

Why opening a new terminal matters

Installers often modify PATH. Terminals that were already open may keep the old environment. After installing a language or compiler:

1. Close all terminal windows.
2. Open a new terminal.
3. Run the version command again.

Restarting the entire computer is usually unnecessary, but it can help if a Windows installer or service has not refreshed correctly.

0.7 Recommended project folder structure

Create one main folder for development work. Examples:

Windows

C:\Users\YourName\Projects

macOS/Linux

~/Projects

Inside it, give each project its own folder:

Projects/
├── python-weather-app/
├── java-calculator/
├── electron-notes/
└── cpp-image-tool/

Avoid these habits:

• Saving project files directly to the Desktop forever.
• Mixing several unrelated projects in one folder.
• Naming folders new, new2, final, final-final, or test stuff.
• Putting a project inside a cloud-synced folder when a tool has problems with file locking.
• Using very long paths or unusual symbols while learning native C/C++ toolchains.

Good project names are short, descriptive, and use hyphens or underscores:

expense-tracker
expense_tracker

Module 0 checkpoint

You are ready to continue when you can:

• Open a terminal.
• Display your current folder.
• Create and enter a new folder.
• Identify your operating system and architecture.
• Explain that PATH tells the shell where to look for commands.
• Use where.exe or which to identify which executable is being used.

Practice task

Create a folder named environment-course-labs inside your main Projects folder. Inside it, create these folders:

environment-course-labs/
├── python-lab/
├── node-lab/
├── java-lab/
├── c-lab/
└── cpp-lab/

Do this from the terminal rather than the graphical file manager.

Learning objectives

By the end of this module, you should be able to explain:

• The difference between source code, an interpreter, a compiler, and a runtime.
• The difference between an editor and an IDE.
• What a package, dependency, package manager, manifest, and lock file are.
• Why projects need isolated environments.
• What building, running, and debugging mean.
• Why code can work in one project and fail in another on the same computer.

1.1 Source code

Source code is the human-readable text you write in files such as:

• main.py
• app.js
• Program.cs
• Main.java
• main.c
• main.cpp

Source code is not automatically understandable to the processor. Another program must interpret it, compile it, or transform it into something the machine can execute.

1.2 Interpreter, compiler, and runtime

Interpreter

An interpreter reads and executes code through a language runtime. Python is commonly described as interpreted because you normally run a file like this:

python main.py

You do not usually create a separate native executable before every test. The Python interpreter loads the file and executes it.

Compiler

A compiler translates source code into another form, often machine code or an intermediate representation.

C example:

gcc main.c -o app

This command reads main.c and creates an executable named app or app.exe.

C++ example:

g++ main.cpp -o app

Runtime

A runtime is the software environment that supports a program while it runs.

Examples:

• The Python runtime executes Python bytecode and manages Python objects.
• Node.js provides a JavaScript runtime outside the browser.
• The Java Virtual Machine runs Java bytecode.
• The .NET runtime executes compiled .NET code and provides services such as memory management.

Java’s multi-stage model

Java is useful for understanding that “compiled” and “interpreted” are not always opposites.

1. You write Main.java.
2. javac compiles it into Main.class bytecode.
3. The JVM runs that bytecode.

javac Main.java
java Main

C#/.NET’s multi-stage model

C# is compiled into Intermediate Language. The .NET runtime then executes it, often using just-in-time compilation.

For a beginner, the key idea is simple: every language has a toolchain that turns your text files into running behavior.

1.3 Editor versus IDE

Text editor

A text editor edits files. A development-focused editor may also provide extensions, syntax highlighting, and a terminal.

VS Code begins as an extensible editor. It becomes language-aware after you install extensions and provide a real toolchain.

IDE

IDE means Integrated Development Environment. An IDE usually combines:

• Code editor.
• Project explorer.
• Build system integration.
• Run configurations.
• Debugger.
• Test runner.
• Dependency management.
• Refactoring tools.
• Code completion.
• Version-control integration.

Examples include Visual Studio, IntelliJ IDEA, PyCharm, and Xcode.

Important misconception

Installing an IDE does not always install the language itself.

• Installing VS Code does not automatically install Python, Node.js, Java, GCC, or Clang.
• Installing the VS Code C/C++ extension does not install a compiler.
• Installing a Java extension does not necessarily install a JDK.
• Visual Studio can install full toolchains because its installer uses workloads.
• Xcode includes Apple’s compiler toolchain.

When an IDE says “interpreter not found” or “compiler not found,” the editor may be working perfectly. The external toolchain is missing or incorrectly selected.

1.4 Packages and dependencies

A package is reusable code distributed for other projects to use. A dependency is a package your project relies on.

Examples:

• Python project uses requests to make HTTP requests.
• Node project uses express to build a web server.
• Java project uses JUnit for tests.
• C# project uses a NuGet package for JSON processing.
• C++ project uses Qt for GUI components.

Dependencies can have their own dependencies. These are called transitive dependencies.

Suppose your project installs package A. Package A requires package B. You may never import B directly, but your package manager must still install it.

1.5 Package managers

A package manager downloads, installs, updates, removes, and records packages.

The package manager and the language runtime are different tools. For example:

• python runs Python code.
• pip installs Python packages.
• node runs JavaScript.
• npm manages Node packages.
• java runs Java bytecode.
• Maven or Gradle manages Java builds and dependencies.

1.6 Why environments exist

Imagine two Python projects:

old-report-tool requires requests 2.25
new-api-client requires requests 2.31

If both projects share one global package location, upgrading requests for the new project may break the old project.

An isolated environment gives each project its own dependency space.

Python isolation

A virtual environment contains a project-specific Python executable and package directory.

my-project/
├── venv/
├── main.py
└── requirements.txt

Node isolation

Node dependencies are normally stored inside the project’s node_modules folder.

my-node-project/
├── node_modules/
├── package.json
├── package-lock.json
└── index.js

You do not activate node_modules. Node’s package resolution automatically searches the project structure.

Java isolation

Maven and Gradle record project dependencies in build files. The dependencies are downloaded into caches but associated with the project through the manifest.

The JDK version is a separate concern. Two projects can require different JDK versions even when their dependencies are independently managed.

.NET isolation

NuGet dependencies are recorded in .csproj and restored for the project. There is normally no activation command comparable to Python’s virtual environment.

C and C++ isolation

C and C++ projects often require explicit control of:

• Compiler version.
• Compiler flags.
• Header search paths.
• Library search paths.
• Debug versus Release configuration.
• CPU architecture.
• Native library versions.

Tools such as CMake, vcpkg, and Conan make this more reproducible, but the setup is less automatic than in many managed-language ecosystems.

1.7 Manifest files and lock files

Manifest file

A manifest describes the direct requirements and configuration of a project.

Examples:

• Python: pyproject.toml or requirements.txt.
• Node: package.json.
• Java: pom.xml or build.gradle.
• .NET: .csproj.

Lock file

A lock file records the exact resolved versions, including transitive dependencies.

Examples:

• npm: package-lock.json.
• pnpm: pnpm-lock.yaml.
• Yarn: yarn.lock.
• Poetry: poetry.lock.

Why both matter:

• The manifest may say “use version 4 or any compatible update.”
• The lock file records the precise version that was actually selected.

This makes repeated installations more predictable.

Do not commit generated dependency folders

Usually commit:

requirements.txt
pyproject.toml
package.json
package-lock.json
pom.xml
build.gradle
.csproj
CMakeLists.txt

Usually do not commit:

venv/
.venv/
node_modules/
bin/
obj/
build/

These generated folders can be recreated from the project files.

1.8 Semantic versioning

Many packages use versions such as:

3.7.12

This is commonly read as:

MAJOR.MINOR.PATCH

• Major: potentially breaking changes.
• Minor: new backward-compatible features.
• Patch: backward-compatible bug fixes.

This is a convention, not a universal guarantee. Package ecosystems may interpret version ranges differently.

A beginner-friendly habit is to avoid casually upgrading every dependency in a working project. Upgrade intentionally, read release notes for major versions, and test afterward.

1.9 Build, run, clean, and rebuild

Run

Start the program.

Build

Transform source code and resources into runnable output. Build steps may include compilation, linking, copying assets, and generating files.

Clean

Delete previously generated build output.

Rebuild

Clean and then build again from scratch.

Why cleaning helps: build tools sometimes reuse stale generated output. A clean rebuild can eliminate inconsistencies caused by old binaries or cached intermediate files.

Do not use clean/rebuild as a substitute for understanding every error, but it is a valid diagnostic step.

1.10 Debugging

A debugger allows you to pause a program and inspect its state.

Important terms:

• Breakpoint: A marked line where execution should pause.
• Step over: Run the current line without entering called functions.
• Step into: Enter the function called on the current line.
• Step out: Finish the current function and return to its caller.
• Call stack: The chain of function calls that led to the current line.
• Watch: An expression the debugger reevaluates while paused.
• Variables panel: Displays current local and sometimes global values.

Beginners often rely entirely on print() statements. Printing is useful, but learning a debugger early will save hours.

1.11 Environment variables

An environment variable is a named value available to programs running in a particular environment.

Examples:

• PATH: locations searched for executables.
• JAVA_HOME: location of a JDK.
• PYTHONPATH: additional Python import locations; beginners should rarely modify it globally.
• NODE_ENV: commonly indicates development, test, or production mode.

Applications also use environment variables for secrets and configuration:

DATABASE_URL
API_KEY
PORT

Do not hard-code secrets into source files that will be committed to Git.

A .env file is often used for local development, but it should normally be added to .gitignore when it contains secrets.

1.12 Toolchain map by language

Module 1 checkpoint

You are ready to continue when you can answer these questions in your own words:

1. Why is VS Code not automatically a Python or C++ environment?
2. What is the difference between python and pip?
3. Why should node_modules not be committed to Git?
4. What problem does a Python virtual environment solve?
5. What is the difference between a manifest and a generated dependency folder?
6. What is a breakpoint?
7. Why can the same command run a different executable on two computers?

Practice task: Draw your toolchain

Pick one language you plan to learn. Write down:

• Your source-code extension.
• Your interpreter or compiler.
• Your package manager.
• Your IDE or editor.
• Your project manifest.
• Your environment or isolation method.
• The command used to verify the installed version.

Learning objectives

By the end of this module, you should be able to:

• Install and navigate VS Code.
• Open a project folder correctly.
• Install trusted language extensions.
• Use the integrated terminal.
• Configure Python, Node.js, C/C++, and Java toolchains.
• Create launch and build configurations.
• Run and debug a small project.

2.1 What VS Code is

Visual Studio Code is a lightweight, cross-platform code editor. It provides a common interface, but language support comes from extensions and separately installed toolchains.

Think of VS Code as a workshop building:

• VS Code provides the benches, lights, cabinets, and controls.
• Extensions provide specialized gauges and instructions.
• The compiler, interpreter, JDK, or runtime is the actual machinery.

If autocomplete works but the program will not run, the extension may be installed while the runtime is missing. If the program runs in the terminal but VS Code shows errors, the editor may be using the wrong language server or selected interpreter.

2.2 Installing VS Code

Windows

1. Download the user installer from the official VS Code site.
2. Run the installer.
3. Read each option rather than pressing Next automatically.
4. Enable Add to PATH if offered.
5. Enable Open with Code context-menu options if you want to right-click folders.
6. Finish the installation.
7. Close existing terminals.
8. Open a new PowerShell window.
9. Verify:

code --version

If code is not recognized, VS Code may still work from the Start menu. The command-line launcher simply has not been added to PATH.

macOS

1. Download VS Code.
2. Move it into the Applications folder.
3. Open VS Code.
4. Press Command + Shift + P.
5. run Shell Command: Install 'code' command in PATH.
6. Open a new terminal and verify:

code --version

Linux

Use the package recommended for your distribution. After installation:

code --version

2.3 VS Code interface tour

Activity Bar

Usually located on the far left. Common icons include:

• Explorer.
• Search.
• Source Control.
• Run and Debug.
• Extensions.

Side Bar

Displays the panel selected from the Activity Bar, such as your files or installed extensions.

Editor area

The main area where files open in tabs.

Panel

Usually at the bottom. It can display:

• Problems.
• Output.
• Debug Console.
• Terminal.

Status Bar

The strip along the bottom. It may show:

• Current Git branch.
• Errors and warnings.
• Selected Python interpreter.
• Line and column.
• File encoding.
• Language mode.

The Status Bar is not decorative. It often reveals which environment or language mode VS Code is currently using.

2.4 Open a folder, not just a file

A major beginner mistake is opening one source file by double-clicking it instead of opening the project folder.

Use:

cd path/to/project
code .

The dot means “open the current folder.”

Why opening the folder matters:

• VS Code can find project settings.
• Extensions can discover virtual environments and manifests.
• Relative file paths resolve from a predictable project root.
• Debug configurations can be saved in .vscode.
• Git integration can recognize the repository.

The window title or Explorer should show the project folder, not merely one loose file.

2.5 Installing extensions safely

1. Open the Extensions view.
2. Search by exact extension name.
3. Check the publisher.
4. Review the install count, rating, and description.
5. Install only what you need.

Recommended starter extensions:

Do not install ten overlapping formatter or language-server extensions. Multiple tools trying to format or diagnose the same file can create confusing conflicts.

2.6 Settings: user versus workspace

User settings

Apply to every project you open.

Examples:

• Font size.
• Theme.
• General editor behavior.

Workspace settings

Apply only to the current project and are stored in .vscode/settings.json.

Examples:

• Project-specific formatter.
• Python testing framework.
• C++ compiler path.

Use workspace settings when a project needs configuration that should not affect every other project.

2A.1 Install Python separately

The Python extension does not contain Python itself.

After installing Python, open a new terminal and run:

Windows

py --version
python --version

macOS/Linux

python3 --version

On Windows, the py launcher is often the most reliable way to select an installed Python version.

If one command works and another does not, that is not automatically a problem. Record which command works on your computer and use it consistently.

2A.2 Create the project

Open a terminal:

cd path/to/environment-course-labs/python-lab

Create a file named main.py:

name = input("What is your name? ")
print(f"Hello, {name}! Your Python environment is working.")

Run it before adding packages:

Windows

py main.py

macOS/Linux

python3 main.py

Expected behavior: the program asks for your name and prints a greeting.

2A.3 Create a virtual environment

From the project root:

Windows

py -m venv .venv

macOS/Linux

python3 -m venv .venv

What each part means:

• py or python3: run Python.
• -m: run a Python module as a command.
• venv: the standard-library module for creating virtual environments.
• .venv: the folder to create.

Why use .venv instead of venv? Both are valid. .venv is a common convention and is easy for editors to recognize. The leading dot also marks it as hidden on many systems.

Do not manually copy a virtual environment from another computer. Create a fresh one using the project’s dependency file.

2A.4 Activate the environment

Windows PowerShell

.\.venv\Scripts\Activate.ps1

Windows Command Prompt

.venv\Scripts\activate.bat

macOS/Linux

source .venv/bin/activate

Expected prompt:

(.venv) ...

Activation modifies the current shell session so python and pip point to the environment.

PowerShell execution-policy error

You may see an error saying scripts cannot be loaded. A commonly used per-user setting is:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Read the prompt and confirm only if you understand that this changes script execution for your user account. An alternative is to use Command Prompt activation or run the environment’s Python executable directly.

Deactivate later

deactivate

This returns the shell to its previous Python selection.

2A.5 Verify the active interpreter

Windows

where.exe python
python -c "import sys; print(sys.executable)"

macOS/Linux

which python
python -c "import sys; print(sys.executable)"

The printed path should be inside your project’s .venv folder.

This command is one of the best ways to diagnose Python environment confusion:

python -c "import sys; print(sys.executable)"

It asks the running Python interpreter to report its own location.

2A.6 Select the interpreter in VS Code

1. Open the project folder in VS Code.
2. Install the Python extension.
3. Press Ctrl + Shift + P or Command + Shift + P.
4. Run Python: Select Interpreter.
5. Choose the interpreter located inside .venv.
6. Check the Status Bar.
7. Open a new integrated terminal.

The terminal may need to be recreated after changing the interpreter. Existing terminals do not always automatically update.

2A.7 Install a package correctly

With the environment active:

python -m pip install requests

Using python -m pip is slightly more explicit than typing pip. It guarantees that the selected Python interpreter runs its associated pip module.

Verify:

python -m pip show requests

Create package_test.py:

import requests

print("requests version:", requests.__version__)
print("Package import succeeded.")

Run:

python package_test.py

2A.8 Record dependencies

python -m pip freeze > requirements.txt

Inspect the file. It will contain exact installed versions.

To rebuild later:

python -m pip install -r requirements.txt

Important beginner note

pip freeze records all installed packages in the environment, including transitive dependencies. This is useful for reproducing the environment, but larger professional projects may use pyproject.toml and more structured dependency tools.

2A.9 Add .gitignore

Create a file named .gitignore:

.venv/
__pycache__/
*.pyc
.env
.vscode/

Whether .vscode/ should be ignored depends on the team. Some workspace settings are useful to share. For a beginner personal project, ignoring it avoids committing machine-specific settings until you understand them.

2A.10 Run and debug

Open main.py and click in the left gutter beside a line to create a red breakpoint.

Then:

1. Open Run and Debug.
2. Choose Python File when prompted.
3. Enter a value when the program asks.
4. When execution pauses, inspect the Variables panel.
5. Use Step Over to advance one line.
6. Continue to finish the program.

Why use the debugger here?

This small project lets you learn the debugger before the code becomes complicated. You should know how to pause and inspect a variable before debugging a hundred-line program.

2A checkpoint

You are done when:

• .venv exists inside the project.
• The selected VS Code interpreter points into .venv.
• python -c "import sys; print(sys.executable)" reports the .venv path.
• requests imports successfully.
• requirements.txt exists.
• You can hit a breakpoint and inspect a variable.

Common failure modes

“No module named requests” after installing requests

Likely cause: the package was installed into one Python environment while the program ran with another.

Check:

python -c "import sys; print(sys.executable)"
python -m pip show requests

The terminal prompt shows .venv, but VS Code still underlines imports

Likely cause: the editor’s selected interpreter differs from the terminal interpreter. Use Python: Select Interpreter and reload the window.

python opens the Microsoft Store on Windows

Use py and review Windows App Execution Aliases if necessary. Confirm the official Python installation and its PATH options.

The environment was deleted

Recreate it:

py -m venv .venv

or:

python3 -m venv .venv

Then reinstall:

python -m pip install -r requirements.txt

Practice task

Create a program that imports random, asks for a maximum number, and prints a random integer from 1 to that maximum. Set a breakpoint after reading the user input and inspect the converted number.

2B.1 Browser JavaScript versus Node.js

JavaScript can run in different environments:

• A browser provides objects such as window, document, and browser storage.
• Node.js provides server-side and operating-system APIs such as file access and process information.

Code written for one environment does not automatically work in the other. document.querySelector() is a browser API. require('fs') or importing Node’s file-system module is a Node capability.

2B.2 Install and verify Node.js

Install a current Long-Term Support release unless a project requires a specific version.

Verify:

node --version
npm --version

What these commands check:

• node: JavaScript runtime.
• npm: package manager distributed with Node.js.

If one works and the other does not, the installation is incomplete or PATH is inconsistent.

2B.3 Create a project

Enter your lab folder:

cd path/to/environment-course-labs/node-lab

Initialize:

npm init -y

This creates package.json.

Open it and identify:

• name: package/project name.
• version: project version.
• main: conventional entry file.
• scripts: named commands.
• dependencies: runtime packages.
• devDependencies: development-only packages.

Create index.js:

const name = "Beginner Developer";
console.log(`Hello, ${name}! Node.js is working.`);

Run:

node index.js

2B.4 Add npm scripts

Edit package.json:

{
  "name": "node-lab",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node index.js",
    "check": "node --check index.js"
  }
}

Run:

npm start
npm run check

An npm script gives the project a documented command that other developers can use without memorizing the raw invocation.

"private": true helps prevent accidentally publishing the project as an npm package.

2B.5 Install a dependency

npm install chalk

This normally:

• Creates or updates node_modules.
• Adds the package to dependencies.
• Creates or updates package-lock.json.

Depending on the installed version and module format, import syntax may differ. For a simple CommonJS example, install a compatible package or use a package documented for your module system. The larger lesson is to read the package’s current usage documentation rather than copying old syntax blindly.

Dependencies versus devDependencies

Runtime package:

npm install express

Development tool:

npm install --save-dev eslint

A production deployment generally needs runtime dependencies but may not need linters, test runners, or packaging tools.

2B.6 Understand package-lock.json

package.json states what your project requests. package-lock.json records the exact dependency tree npm resolved.

Commit both files.

For a clean installation based on the lock file, automated environments commonly use:

npm ci

npm ci expects the lock file to match the manifest and replaces the existing node_modules folder with a clean installation. It is useful in continuous integration and when reproducing a known state.

2B.7 Add .gitignore

node_modules/
.env
dist/
build/

Do not commit node_modules. It can contain thousands of generated files and platform-specific binaries.

2B.8 Debug Node.js in VS Code

Create debug_example.js:

function calculateTotal(price, quantity) {
  const total = price * quantity;
  return total;
}

const result = calculateTotal(12.5, 4);
console.log("Total:", result);

1. Set a breakpoint inside calculateTotal.
2. Open Run and Debug.
3. Choose a Node.js launch option.
4. Inspect price, quantity, and total.
5. Step out of the function.

2B.9 Node version managers

Different projects may require different Node major versions. A version manager lets you install and switch versions.

Typical workflow:

nvm install <version>
nvm use <version>
node --version

Windows commonly uses a separate Windows implementation of nvm. macOS/Linux commonly use the shell-based nvm project. Follow the documentation for the tool you install because their installers and commands are not identical in every detail.

Some projects include an .nvmrc file containing the expected Node version. This documents the runtime requirement for contributors.

2B checkpoint

You are done when:

• node --version and npm --version work.
• package.json contains a working start script.
• package-lock.json exists.
• node_modules exists locally but is ignored by Git.
• npm start runs the project.
• You can debug a Node function in VS Code.

Common failure modes

npm is not recognized

Close and reopen the terminal. Verify the Node installation and PATH.

A package import example from a tutorial fails

The tutorial may use CommonJS while the package now expects ES modules, or vice versa. Check package.json for "type": "module" and read the package’s current examples.

Permission errors during global installation

Do not repeatedly use administrator commands without understanding the ownership problem. Prefer a Node version manager or a user-owned global package directory.

Different result on another machine

Confirm that package-lock.json is committed and use npm ci for a clean reproduction.

Practice task

Create a Node script that reads an array of prices, calculates the subtotal, applies a tax rate, and prints the result. Put the calculation in a function and inspect it with the debugger.

2C.1 Understand the extra moving parts

C and C++ setup feels harder because the extension, compiler, linker, debugger, build system, and native libraries are separate components.

A typical flow is:

source code → preprocessor → compiler → object files → linker → executable

• The preprocessor handles directives such as #include.
• The compiler translates source code into object code.
• The linker combines object files and libraries into an executable.
• The debugger controls the running program and reads debug symbols.

An “undefined reference” error is usually a linker problem, not a syntax problem.

2C.2 Choose a Windows toolchain

Option A: MSVC

MSVC is Microsoft’s C/C++ compiler toolchain. It integrates naturally with Visual Studio and Windows development.

Install either:

• Visual Studio with Desktop development with C++, or
• Standalone Visual Studio Build Tools with the relevant C++ workload.

The standard compiler command is cl, normally used from a Developer Command Prompt or a configured environment.

Option B: GCC through MSYS2

MSYS2 provides package management and MinGW-w64 toolchains.

A UCRT64 GCC installation typically uses a package command similar to:

pacman -S mingw-w64-ucrt-x86_64-gcc

Then add the matching toolchain bin folder to PATH or launch VS Code from the correctly configured MSYS2 environment.

Do not mix headers and libraries from unrelated MSYS2 environments such as UCRT64 and MINGW64 in one build.

Which should a beginner choose?

• Choose Visual Studio/MSVC for Windows-native applications, Microsoft libraries, and the smoothest full-IDE experience.
• Choose MSYS2/GCC when following GCC-oriented courses or targeting a more Unix-like toolchain.

Both are legitimate. Pick one first instead of installing several and letting VS Code guess.

2C.3 macOS compiler setup

Install Apple Command Line Tools:

xcode-select --install

Verify:

clang --version
clang++ --version

On macOS, commands named gcc may map to Apple Clang. Read the version output rather than assuming the command name identifies the implementation.

2C.4 Linux compiler setup

On Debian/Ubuntu-based systems:

sudo apt update
sudo apt install build-essential gdb

Verify:

gcc --version
g++ --version
gdb --version
make --version

Other distributions use different package managers.

2C.5 Create and compile a C program

Create main.c:

#include <stdio.h>

int main(void) {
    printf("Hello from C!\n");
    return 0;
}

Compile with GCC or Clang:

gcc main.c -Wall -Wextra -pedantic -g -o c_lab

Run on macOS/Linux:

./c_lab

Run on Windows:

.\c_lab.exe

Flag explanations:

• -Wall: enables a useful group of warnings.
• -Wextra: enables additional warnings.
• -pedantic: warns about non-standard language extensions.
• -g: includes debug information.
• -o c_lab: names the output executable.

Treat warnings as valuable information. A program can compile and still contain a serious bug.

2C.6 Create and compile a C++ program

Create main.cpp:

#include <iostream>
#include <string>

int main() {
    std::string name;
    std::cout << "What is your name? ";
    std::getline(std::cin, name);
    std::cout << "Hello, " << name << "! C++ is working.\n";
    return 0;
}

Compile:

g++ main.cpp -std=c++20 -Wall -Wextra -pedantic -g -o cpp_lab

-std=c++20 requests a specific C++ language standard. A course or project may require another standard.

2C.7 Configure VS Code

1. Install the Microsoft C/C++ extension.
2. Open the C or C++ project folder.
3. Open the Command Palette.
4. Run C/C++: Edit Configurations (UI).
5. Set the compiler path to the compiler you verified in the terminal.
6. Confirm IntelliSense mode matches the compiler and architecture.
7. Use Run and Debug to create a launch configuration.

VS Code may generate:

.vscode/
├── c_cpp_properties.json
├── launch.json
└── tasks.json

What these files do

• c_cpp_properties.json: IntelliSense compiler and include configuration.
• tasks.json: commands used to build the program.
• launch.json: instructions for launching or attaching the debugger.

The build task creates the executable. The launch configuration starts that executable under the debugger. They are related but not the same.

2C.8 Basic tasks.json concept

A build task may run a command such as:

g++ main.cpp -std=c++20 -g -o cpp_lab

The generated JSON can look intimidating because it contains labels, command arguments, problem matchers, and path variables. Read it as a structured version of the same command you already tested manually.

Always verify compilation in a terminal before debugging a complicated VS Code configuration. If the raw compiler command fails, changing launch.json will not fix the compiler error.

2C.9 Header and linker errors

Header-not-found example

fatal error: library.h: No such file or directory

Meaning: the compiler cannot find a header file.

Possible fixes:

• Install the development package.
• Add the correct include directory.
• Use the correct toolchain environment.
• Correct the header name or case.

Undefined-reference example

undefined reference to function_name

Meaning: code was compiled with a declaration available, but the linker could not find the implementation.

Possible fixes:

• Add the library to the link command.
• Add the missing source file.
• Put library flags in the correct order for the toolchain.
• Ensure architecture and compiler runtime match.

IntelliSense error with successful compilation

Meaning: the code model and real compiler are using different include settings. Fix compilerPath and configuration rather than changing valid code just to silence the editor.

2C checkpoint

You are done when:

• A compiler version command works in a fresh terminal.
• You can compile and run one C program manually.
• You can compile and run one C++ program manually.
• VS Code’s compiler path points to the same toolchain.
• You can set a breakpoint and inspect a variable.
• You understand the difference between a compile error and a linker error.

Common failure modes

gcc or g++ is not recognized

PATH is missing the toolchain directory, or the terminal was open before installation.

The executable cannot be found during debugging

The build task failed, output to a different location, or launch.json points to the wrong filename.

Works in one terminal but not another

The terminals may initialize different environments. This is common when comparing MSYS2 shells, PowerShell, and Developer Command Prompt.

32-bit/64-bit or ARM/x64 mismatch

All linked native libraries must be compatible with the target architecture.

Practice task

Write a C++ program that stores five integers in a vector, calculates the total, and prints the average. Compile with warnings enabled and debug the loop.

2D.1 JDK, JRE, and JVM

• JVM: Executes Java bytecode.
• JRE: Historically described the runtime components needed to run Java applications.
• JDK: Includes the tools needed to develop Java applications, including the compiler.

For programming, install a JDK rather than only a runtime.

2D.2 Install and verify a JDK

Use a maintained OpenJDK distribution and select a version appropriate for the course or project. Prefer a current Long-Term Support version for general learning unless you have a specific requirement.

Verify:

java --version
javac --version

Both commands should work. java alone is not enough for development; javac confirms the compiler is available.

Check locations:

Windows

where.exe java
where.exe javac

macOS/Linux

which java
which javac

2D.3 Understand JAVA_HOME

JAVA_HOME should normally point to the JDK’s root folder, not the bin folder itself.

Conceptual example:

JAVA_HOME=C:\Program Files\Java\jdk-xx
PATH includes %JAVA_HOME%\bin

Tools such as Maven and Gradle may use JAVA_HOME to find the JDK.

Verify:

PowerShell

$env:JAVA_HOME

macOS/Linux

echo $JAVA_HOME

2D.4 Compile a single Java file manually

Create Main.java:

public class Main {
    public static void main(String[] args) {
        String name = "Beginner Developer";
        System.out.println("Hello, " + name + "! Java is working.");
    }
}

Compile:

javac Main.java

This creates:

Main.class

Run:

java Main

Do not type java Main.class. The java command expects the class name, not the filename.

The public class name and source filename must match exactly, including capitalization.

2D.5 Install the Java Extension Pack

The Java extension pack provides language support, debugging, testing, Maven integration, and project management.

After installation:

1. Open the Java project folder.
2. Allow the language server to initialize.
3. Check the Java Projects view.
4. Confirm VS Code discovered the intended JDK.
5. Run Java: Configure Java Runtime if needed.

Do not assume that a Java file underlined in red means the code is wrong. The language server may still be importing the project or using the wrong JDK.

2D.6 Single-file projects versus real projects

A single .java file is useful for learning syntax. A multi-file application should use a project structure and a build tool.

Maven convention:

my-app/
├── pom.xml
└── src/
    ├── main/
    │   └── java/
    └── test/
        └── java/

Gradle uses a similar source layout.

2D.7 Maven basics

A simplified pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>beginner-app</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.release>21</maven.compiler.release>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
</project>

Concepts:

• groupId: organization or namespace.
• artifactId: project name.
• version: project version.
• compiler release: Java language/runtime target.

Common commands:

mvn compile
mvn test
mvn package
mvn clean

2D.8 Gradle basics

A simple Gradle build file may include:

plugins {
    id 'java'
    id 'application'
}

java {
    toolchain {
        languageVersion = JavaLanguageVersion.of(21)
    }
}

application {
    mainClass = 'com.example.Main'
}

Use the project’s Gradle wrapper when present:

Windows

.\gradlew.bat build

macOS/Linux

./gradlew build

The wrapper documents and downloads the Gradle version expected by the project.

2D checkpoint

You are done when:

• java --version and javac --version work.
• You can compile and run Main.java manually.
• VS Code detects the intended JDK.
• You can create or open a Maven/Gradle project.
• You understand that the JDK version and dependency versions are separate concerns.

Common failure modes

javac is missing while java works

A runtime-only installation or incomplete PATH is likely being used. Install/select a full JDK.

“Could not find or load main class”

Possible causes include wrong working directory, wrong package/class name, or an incorrect classpath.

“Unsupported class file major version”

The code was compiled with a newer JDK than the runtime used to launch it.

Maven/Gradle reports JAVA_HOME is invalid

Confirm that it points to the JDK root and that the directory still exists.

Practice task

Create a Java class containing a method that calculates the area of a rectangle. Call it from main, set a breakpoint inside the method, and inspect both parameters.

Learning objectives

By the end of this module, you should be able to:

• Create a PyCharm project with a dedicated virtual environment.
• Attach an interpreter to an existing project.
• Install packages through the interface or terminal.
• Create and understand a run configuration.
• Use breakpoints, watches, and the Python console.
• Repair a project whose interpreter was moved or deleted.

3.1 Why use PyCharm?

PyCharm is a Python-focused IDE. Compared with a general editor, it integrates Python project structure, interpreters, refactoring, tests, inspections, debugging, and environment management more deeply.

A beginner may find PyCharm visually busier, but it reduces the number of separate configuration steps once the project is set up correctly.

3.2 Install and first launch

Choose the edition appropriate to your needs and current licensing options. For general Python learning, the free functionality is sufficient for standard scripts, environments, debugging, and tests.

On first launch:

1. Select a theme you can read comfortably.
2. Do not import random settings from another installation unless you know what they contain.
3. Review the privacy and data-sharing prompts.
4. Open the Plugins page only when you need additional technology support.

Avoid installing many plugins on day one. Start with the built-in Python experience.

3.3 Create a new project

1. Choose New Project.
2. Select a project location inside your Projects folder.
3. Choose a new Virtualenv environment.
4. Select the base Python installation.
5. Place the environment inside the project as .venv when possible.
6. Avoid inheriting global site packages while learning.
7. Create the project.

Base interpreter versus project interpreter

The base interpreter is the installed Python used to create the environment.

The project interpreter is the Python executable inside .venv that PyCharm uses after creation.

You can update or replace the project environment without uninstalling the system Python.

3.4 PyCharm interface tour

Project tool window

Shows files and folders. The view may hide some generated folders by default.

Editor

Where source files are opened and edited.

Run tool window

Displays standard output and program termination status.

Debug tool window

Displays frames, variables, watches, threads, and debugger controls.

Terminal

Runs your system shell. PyCharm normally activates the project environment when configured to do so.

Python Console

An interactive Python session tied to the project interpreter. Useful for testing expressions and inspecting objects.

Status bar/interpreter indicator

Check it whenever package imports behave unexpectedly.

3.5 Create and run a file

Create main.py:

def calculate_total(price: float, quantity: int) -> float:
    return price * quantity


total = calculate_total(9.99, 3)
print(f"Total: ${total:.2f}")

Right-click in the editor and choose Run 'main'.

The first run may create a run configuration automatically.

3.6 Run configurations

A run configuration records how a program should start.

It may include:

• Script path or module name.
• Working directory.
• Interpreter.
• Command-line arguments.
• Environment variables.
• Whether to add source roots to the Python path.

Working directory matters

Suppose your program opens:

open("data/config.json")

That relative path is resolved from the working directory, not necessarily from the source file’s location. A program can work when launched one way and fail another way because the working directory changed.

Inspect the run configuration before changing file paths throughout your code.

3.7 Install packages

Through the interface

1. Open project interpreter settings.
2. Search for the package.
3. Review the selected version.
4. Install.

Through the terminal

python -m pip install requests

Both methods should target the same project interpreter. Verify with:

python -c "import sys; print(sys.executable)"

3.8 Open an existing project

1. Open the project folder, not a random file inside it.
2. If .venv is present and valid, select its interpreter.
3. If no environment exists, create one.
4. Install dependencies from requirements.txt or the project’s packaging file.
5. Confirm the working directory in the run configuration.

Rebuild a missing environment

Virtual environments are disposable. If .venv is corrupted or points to a Python installation that no longer exists:

1. Remove the broken environment folder.
2. Create a new environment.
3. Attach it to the project.
4. Reinstall dependencies.
5. Run tests.

Do not try to repair every internal file in a virtual environment manually.

3.9 Debugging in PyCharm

1. Click in the gutter to create a breakpoint.
2. Right-click and choose Debug 'main'.
3. Inspect variables.
4. Step over calculations.
5. Add a watch such as price * quantity.
6. Evaluate an expression while paused.
7. Resume execution.

Conditional breakpoint

A conditional breakpoint pauses only when an expression is true.

Example condition:

quantity > 100

This is useful when a loop runs many times and the problem occurs only for one case.

3.10 Code inspections versus runtime errors

PyCharm may underline code before you run it. These are static inspections. They can identify:

• Unused variables.
• Unresolved imports.
• Type inconsistencies.
• Style problems.
• Possible logical mistakes.

A static warning is not the same as a runtime exception. Read the message and decide whether the inspection is correct. Do not disable all warnings merely to make the editor look clean.

3.11 Testing basics

Create calculator.py:

def add(a: float, b: float) -> float:
    return a + b

Create test_calculator.py:

from calculator import add


def test_add():
    assert add(2, 3) == 5

Configure a test framework if PyCharm does not detect one. Run the test from the gutter icon.

The purpose is not merely to see green output. Tests provide a repeatable way to verify that environment or dependency changes did not break behavior.

Module 3 checkpoint

You are done when:

• The project interpreter points into the project’s .venv.
• Running through PyCharm uses the same interpreter as the terminal.
• You can install a package and import it.
• You can inspect and edit a run configuration.
• You can debug a function and add a watch.
• You can run one automated test.

Common failure modes

“No interpreter configured”

The selected interpreter was removed or the project was opened without its environment settings. Add a local interpreter or create a new environment.

PyCharm is indexing for a long time

Initial indexing can take time, especially for large projects. Exclude huge generated folders that do not need analysis, and verify that the project does not accidentally include an entire home directory.

Imports work in the terminal but not in Run

The run configuration may use a different interpreter.

Run works but relative files are missing

Check the working directory.

Practice task

Create a small expense calculator with two functions and three tests. Deliberately change one expected result so a test fails, then use the failure output to locate and correct it.

Learning objectives

By the end of this module, you should be able to:

• Select the correct Visual Studio workloads.
• Explain the difference between a solution and a project.
• Create, build, run, and debug a .NET console application.
• Add and restore NuGet packages.
• Explain Debug and Release configurations.
• Connect Visual Studio to Unity and repair stale project files.

4.1 Visual Studio versus VS Code

Visual Studio and Visual Studio Code are separate products.

Visual Studio is a full IDE with integrated project systems, compilers, designers, debuggers, profilers, and workload-based installation. It is especially strong for .NET, Windows C++, and Unity workflows.

VS Code is smaller and cross-platform, but relies more heavily on extensions and external toolchains.

4.2 Install through workloads

The Visual Studio Installer groups features into workloads.

Common choices:

• .NET desktop development: C# console, Windows Forms, WPF, and related desktop tools.
• Desktop development with C++: MSVC compiler, Windows SDK, CMake tools, and native debugging.
• Game development with Unity: Visual Studio Tools for Unity and Unity-oriented debugging support.
• ASP.NET and web development: .NET web applications and services.

You can reopen the Visual Studio Installer later to modify the installation. You do not need to uninstall Visual Studio just to add a missing workload.

Beginner strategy

Install only the workloads needed for your current course. Large workloads use significant disk space and add templates you may not need yet.

4.3 Solutions and projects

Project

A project produces or supports one logical output, such as:

• Console application.
• Class library.
• Desktop application.
• Test project.
• Web application.

A C# project is normally described by a .csproj file.

Solution

A solution groups related projects in a .sln or newer solution format.

Example:

StoreApp solution
├── StoreApp.Core        class library
├── StoreApp.Console     executable
└── StoreApp.Tests       test project

The console project can reference the core library. The test project can test the core library. The solution lets Visual Studio manage them together.

4.4 Create a C# console application

1. Choose Create a new project.
2. Search for Console App.
3. Select the C#/.NET template.
4. Choose a project name such as EnvironmentLab.
5. Choose a location inside your Projects folder.
6. Select an appropriate target framework.
7. Create the project.

A simple Program.cs:

Console.Write("Enter your name: ");
string? name = Console.ReadLine();
Console.WriteLine($"Hello, {name}! .NET is working.");

Run without debugging:

Ctrl + F5

Run with debugging:

F5

4.5 Understand the generated folders

After building, you may see:

bin/
obj/

• bin: final build output organized by configuration and target framework.
• obj: intermediate build files, generated metadata, and caches.

These folders are generated. They are normally excluded from Git.

4.6 Build commands

Build Solution

Builds projects that require building based on the current state.

Rebuild Solution

Cleans and builds again.

Clean Solution

Removes generated output for the selected configuration.

Build errors versus warnings

Errors stop a successful build. Warnings do not always stop it, but they should be reviewed. A nullable-reference warning, obsolete API warning, or package vulnerability warning may indicate a real issue.

4.7 Debug and Release

Debug configuration

Designed for development:

• Debug symbols included.
• Optimizations reduced or changed.
• Easier variable inspection.
• Often more assertions or diagnostic behavior.

Release configuration

Designed for shipping or performance testing:

• Optimizations enabled.
• Different output path.
• Potentially different conditional compilation behavior.

Always test the Release build before distribution. Do not assume that a successful Debug run proves the packaged application is correct.

4.8 NuGet packages

NuGet is the .NET package manager.

Add a package through:

• Manage NuGet Packages in the project context menu.
• Package Manager Console.
• dotnet CLI.

CLI example:

dotnet add package Newtonsoft.Json

The project file records the reference. Other developers can restore dependencies from the project definition.

Restore:

dotnet restore

Build:

dotnet build

Run:

dotnet run

Package version caution

Before adding a package, confirm:

• It supports your target framework.
• It is maintained.
• Its license fits your project.
• You are reading documentation for the installed major version.

4.9 Debug a C# method

static decimal CalculateTotal(decimal price, int quantity)
{
    decimal total = price * quantity;
    return total;
}

var result = CalculateTotal(14.50m, 3);
Console.WriteLine(result);

1. Set a breakpoint on the calculation.
2. Press F5.
3. Inspect price, quantity, and total.
4. Step out.
5. Add price * quantity to Watch.

The m suffix creates a decimal literal, commonly used when exact decimal arithmetic is preferable for money.

4.10 C++ in Visual Studio

When the C++ workload is installed, Visual Studio can create native projects with MSVC.

A beginner C++ console workflow:

1. Create Console App with C++.
2. Confirm the platform is x64 unless you intentionally need another target.
3. Build the solution.
4. Run without debugging.
5. Add a breakpoint and run with debugging.

Visual Studio manages compiler and linker settings through project properties. Pay attention to which configuration and platform you are editing. A property set for Debug/x64 may not apply to Release/x64 or Debug/Win32.

4.11 Unity setup

Unity is installed through Unity Hub. Visual Studio supplies the code-editing and debugging integration.

Install components

• Install a Unity Editor version through Unity Hub.
• Ensure the Unity editor installation includes the desired platform modules.
• Install Visual Studio’s Unity workload.

Select Visual Studio in Unity

1. Open the Unity project.
2. Open Unity Preferences.
3. Open External Tools.
4. Select Visual Studio as the external script editor.
5. Regenerate project files if the option is available.

Test integration

Create a script:

using UnityEngine;

public class EnvironmentCheck : MonoBehaviour
{
    private void Start()
    {
        Debug.Log("Unity and Visual Studio are connected.");
    }
}

Attach it to a GameObject and enter Play mode. Confirm the message appears in the Unity Console.

Important Unity concept

Unity generates .csproj and solution files from project assets and package configuration. Manual changes to generated project files may be overwritten. Project logic belongs in your scripts and supported configuration paths, not random edits to generated files.

4.12 Unity debugging

1. Open the Unity project and Visual Studio solution.
2. Set a breakpoint in a script method that will execute.
3. Use Attach to Unity or the Unity debug option.
4. Enter Play mode in Unity.
5. Trigger the method.
6. Inspect fields and local variables.

A breakpoint in a method that never runs will never be hit. Confirm the component is attached, enabled, and on an active GameObject.

Module 4 checkpoint

You are done when:

• The needed workloads are installed.
• You can explain project versus solution.
• A C# console app builds and runs.
• You can add and restore a NuGet package.
• You can switch between Debug and Release.
• You can hit a breakpoint.
• Unity opens scripts in Visual Studio with Unity-aware completion.

Common failure modes

Project template is missing

The required workload or individual component is not installed. Modify the installation through Visual Studio Installer.

NuGet restore fails

Check network access, package sources, proxy settings, target-framework compatibility, and any custom nuget.config.

Unity IntelliSense is missing

Confirm Visual Studio is selected in Unity, regenerate project files, verify the Unity workload, and reopen the solution from Unity.

Breakpoint is hollow or never hit

The loaded binary may not match the source, the script may not execute, or the debugger may not be attached to the correct process.

Practice task

Create a C# class library containing a TemperatureConverter class, a console project that uses it, and a test project with at least three conversion tests. Build the entire solution in Debug and Release.

Learning objectives

By the end of this module, you should be able to:

• Create a Java project with a selected JDK and language level.
• Explain the difference between the project SDK, language level, and build tool.
• Create Maven and Gradle projects.
• Read the standard Java project layout.
• Add dependencies and synchronize the project.
• Run, debug, and test Java code.
• Repair common indexing, SDK, and build-sync problems.

5.1 Why use IntelliJ IDEA?

IntelliJ IDEA is a Java-first IDE. It understands Java project structure, Maven, Gradle, JUnit, refactoring, code navigation, inspections, debugging, and multiple JDKs.

VS Code can provide a good Java experience, but IntelliJ places more of the Java project model directly inside the IDE. This is especially helpful when a project contains many modules, generated sources, tests, resources, and build tasks.

5.2 First-launch setup

On first launch:

1. Choose a theme with readable contrast.
2. Decide whether to import old settings.
3. Review plugin suggestions rather than installing everything.
4. Leave the default keymap unless you already prefer another IDE’s shortcuts.
5. Open the Learn or Welcome screen if you are completely new.

IntelliJ may show many tool windows. You do not need to learn them all immediately. Focus first on:

• Project.
• Editor.
• Run.
• Debug.
• Terminal.
• Maven or Gradle.
• Problems.

5.3 Create a plain Java project

1. Choose New Project.
2. Select Java.
3. Select a JDK.
4. If no JDK is installed, use the IDE’s JDK download option or install one separately.
5. Choose whether to use IntelliJ’s simple build system, Maven, or Gradle.
6. Give the project a descriptive name.
7. Place it inside your Projects folder.
8. Create the project.

Project SDK

The project SDK tells IntelliJ which JDK provides the compiler, runtime libraries, and tools.

Language level

The language level controls which Java syntax and language features the editor/compiler should allow.

A project can accidentally have:

• JDK 21 selected.
• Language level set to Java 17.

In that situation, syntax introduced after Java 17 may be rejected even though a newer JDK is installed.

Build-tool Java version

Gradle or Maven may also use a specific Java version. Therefore, check three places when versions seem inconsistent:

1. IntelliJ Project SDK.
2. Project language level.
3. Maven/Gradle toolchain or compiler settings.

5.4 Standard Java folder layout

A typical project looks like:

my-java-app/
├── build.gradle or pom.xml
├── gradlew / gradlew.bat
├── gradle/
└── src/
    ├── main/
    │   ├── java/
    │   │   └── com/example/Main.java
    │   └── resources/
    └── test/
        ├── java/
        │   └── com/example/MainTest.java
        └── resources/

src/main/java

Production Java source code.

src/main/resources

Files packaged with the application, such as configuration templates, images, and text resources.

src/test/java

Automated test source code.

Package path

If a class begins with:

package com.example.app;

its conventional folder path is:

src/main/java/com/example/app/

IntelliJ can create package folders for you. Right-click the Java source root and choose New → Package rather than manually creating confusing nested folders.

5.5 Create and run a class

Create Main.java:

package com.example;

public class Main {
    public static void main(String[] args) {
        String message = "IntelliJ is configured correctly.";
        System.out.println(message);
    }
}

A green run icon should appear beside main.

Click it and choose Run. IntelliJ creates a run configuration.

Expected result:

IntelliJ is configured correctly.

and a successful process exit code.

5.6 Maven project in IntelliJ

What Maven does

Maven provides:

• A standard project layout.
• Dependency resolution.
• Build lifecycle commands.
• Plugins for compilation, testing, packaging, and deployment.

Minimal dependency example

Inside pom.xml:

<dependencies>
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter</artifactId>
        <version>5.11.0</version>
        <scope>test</scope>
    </dependency>
</dependencies>

The version above is an example. For a real project, select a version compatible with the project and verify it in current official package documentation.

What happens after editing pom.xml

IntelliJ must reimport or synchronize the Maven model. You may see a notification or a Maven refresh icon.

If the import remains red:

1. Save pom.xml.
2. Open the Maven tool window.
3. Click Reload All Maven Projects.
4. Check the Build output for the actual error.
5. Confirm network and repository access.

Maven lifecycle overview

mvn clean
mvn compile
mvn test
mvn package
mvn verify

• clean: removes prior build output.
• compile: compiles production source.
• test: compiles and runs tests.
• package: creates a JAR or other package.
• verify: performs later validation phases configured by the project.

5.7 Gradle project in IntelliJ

What Gradle does

Gradle is a flexible build-automation system. It uses Groovy or Kotlin build scripts.

Groovy example:

plugins {
    id 'java'
    id 'application'
}

repositories {
    mavenCentral()
}

dependencies {
    testImplementation platform('org.junit:junit-bom:5.11.0')
    testImplementation 'org.junit.jupiter:junit-jupiter'
}

application {
    mainClass = 'com.example.Main'
}

test {
    useJUnitPlatform()
}

Kotlin DSL files use the .gradle.kts extension and different syntax.

Use the wrapper

A Gradle project normally contains:

gradlew
gradlew.bat
gradle/wrapper/

Run:

Windows

.\gradlew.bat build

macOS/Linux

./gradlew build

The wrapper helps every contributor use the project’s expected Gradle version.

Gradle JVM

IntelliJ has a Gradle JVM setting. If Gradle sync fails with an unsupported Java error, check whether Gradle is running on a different JDK from the project.

5.8 Add a dependency without guessing

Before adding a dependency, identify:

1. The package’s group ID.
2. Artifact ID.
3. Version.
4. Repository.
5. Required Java version.
6. Whether it belongs in production or test scope.

Do not paste a dependency from an old blog and assume it is current.

After adding it:

• Synchronize Maven/Gradle.
• Confirm the package appears under External Libraries.
• Import the class in source code.
• Build the project.
• Run the relevant test.

5.9 Debugging in IntelliJ

Create:

package com.example;

public class Calculator {
    public static int multiply(int a, int b) {
        int result = a * b;
        return result;
    }

    public static void main(String[] args) {
        int answer = multiply(6, 7);
        System.out.println(answer);
    }
}

1. Set a breakpoint on int result = a * b;.
2. Choose Debug.
3. Inspect a and b.
4. Step over.
5. Inspect result.
6. Step out.
7. Resume.

Smart Step Into

When one line calls multiple methods, Smart Step Into lets you choose which call to enter.

Evaluate Expression

While paused, evaluate:

a * b + 10

This does not permanently change the source file. It helps test a hypothesis while the program is paused.

5.10 JUnit test example

Production class:

package com.example;

public class Calculator {
    public int add(int a, int b) {
        return a + b;
    }
}

Test:

package com.example;

import org.junit.jupiter.api.Test;

import static org.junit.jupiter.api.Assertions.assertEquals;

class CalculatorTest {
    @Test
    void addsTwoNumbers() {
        Calculator calculator = new Calculator();
        assertEquals(5, calculator.add(2, 3));
    }
}

IntelliJ should show a run icon beside the test. A green test means the assertion passed; it does not prove the entire application is correct.

5.11 Refactoring safely

Refactoring changes code structure without intentionally changing behavior.

Use IntelliJ’s Rename refactoring rather than search-and-replace when renaming:

• Classes.
• Methods.
• Fields.
• Packages.

The IDE can update references across the project. Run tests after refactoring.

5.12 Indexing and caches

IntelliJ indexes project files to provide navigation and code analysis.

During indexing:

• Some completion may be incomplete.
• Searches may be slower.
• Imports may temporarily appear unresolved.

Do not immediately invalidate caches whenever completion is slow. First:

1. Wait for indexing to finish.
2. Check build-tool sync.
3. Confirm the SDK.
4. Review actual build errors.
5. Restart the IDE normally.

Invalidating caches is a later troubleshooting step, not the first one.

Module 5 checkpoint

You are done when:

• IntelliJ shows the correct Project SDK.
• The language level matches your intended Java target.
• A Maven or Gradle project synchronizes without errors.
• You can add a dependency and import it.
• You can run and debug a Java class.
• You can run a JUnit test.
• You can explain the purpose of the Gradle wrapper.

Common failure modes

<No SDK> appears

Register or download a JDK through Project Structure and select it for the project.

Cannot resolve symbol after adding dependency

Reload the Maven or Gradle project and check whether dependency download failed.

Gradle daemon uses the wrong Java version

Check the Gradle JVM setting, toolchain configuration, and JAVA_HOME.

Package declaration does not match folder

Move the class using IntelliJ refactoring or correct the package structure.

Works in the IDE but command-line build fails

The IDE may use a different JDK or build process. Run the wrapper command and compare Java versions.

Practice task

Create a Gradle Java application with a BankAccount class, methods for deposit and withdrawal, and JUnit tests for valid and invalid transactions. Debug a failing withdrawal test.

Learning objectives

By the end of this module, you should be able to:

• Install and verify Xcode and the Command Line Tools.
• Explain projects, workspaces, targets, schemes, and build configurations.
• Create and run a command-line or Swift application.
• Use breakpoints and the debug area.
• Add a Swift Package dependency.
• Understand the basic role of signing and provisioning.

6.1 What Xcode includes

Xcode is Apple’s IDE for building software for Apple platforms. It includes:

• Source editor.
• Clang compiler toolchain.
• Swift compiler.
• Debugger.
• Simulators.
• Interface tools.
• Testing tools.
• Signing and deployment integration.

The full application is large. Keep sufficient disk space available for Xcode, simulators, archives, and derived build data.

6.2 Install Xcode

Install through Apple’s supported distribution channel for your macOS version.

After first launch, Xcode may install additional components.

Verify Command Line Tools:

xcode-select -p

Check compiler:

clang --version
swift --version

If a command-line tool reports that the active developer directory is invalid, select the Xcode installation:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Use the actual application path if Xcode is installed elsewhere.

6.3 Command Line Tools without full Xcode

For basic C/C++ command-line development, install:

xcode-select --install

This provides tools such as Clang and Git without all simulators and platform development features.

You still need full Xcode for most iOS/macOS graphical app workflows and simulator use.

6.4 Xcode terminology

Project

Contains source files, settings, targets, and references.

Workspace

Groups projects and dependencies. Dependency managers may generate or require a workspace.

Target

Defines one product to build, such as:

• iOS app.
• macOS app.
• Framework.
• Test bundle.

Scheme

Defines what target to build, run, test, profile, archive, or analyze.

Build configuration

Usually Debug or Release, with corresponding compiler and optimization settings.

Destination

The device or simulator where the program should run.

When the Run button is disabled or the wrong product launches, inspect the active scheme and destination.

6.5 Create a command-line tool

1. Create a new Xcode project.
2. Choose a macOS Command Line Tool template.
3. Select Swift, C, C++, or Objective-C as needed.
4. Name the project.
5. Choose a location.
6. Run the project.

Swift example:

let name = "Beginner Developer"
print("Hello, \(name)! Xcode is working.")

C++ example:

#include <iostream>

int main() {
    std::cout << "Hello from C++ in Xcode!\n";
    return 0;
}

6.6 Create a basic SwiftUI application

A generated SwiftUI app commonly includes an app entry type and a content view.

Example:

import SwiftUI

@main
struct EnvironmentLabApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

import SwiftUI

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack(spacing: 16) {
            Text("Count: \(count)")
                .font(.title)

            Button("Increase") {
                count += 1
            }
        }
        .padding()
    }
}

What @State means here

@State stores view-owned mutable data. When count changes, SwiftUI recalculates the view’s body and updates the interface.

For this course, focus on verifying that the app builds and the button changes the displayed number.

6.7 Simulator basics

A simulator imitates an Apple device environment. It is not a perfect replacement for testing on real hardware.

If the first launch is slow, Xcode may be preparing or booting the simulator.

Common simulator steps:

• Select a device from the destination menu.
• Press Run.
• Wait for installation.
• Interact with the app.
• Stop the running scheme before making major configuration changes.

If no simulator is available, install the appropriate platform runtime through Xcode settings.

6.8 Swift Package Manager

Swift Package Manager is integrated into Xcode.

General flow:

1. Choose Add Package Dependencies.
2. Enter the package repository location.
3. Select a version rule.
4. Choose the target that should link the package.
5. Wait for package resolution.
6. Import the package module in code.

The project records the dependency relationship. Commit the appropriate project and resolved-version information according to the project’s collaboration policy.

6.9 CocoaPods concept

Some older or existing projects use CocoaPods.

Typical files:

Podfile
Podfile.lock
Pods/
MyApp.xcworkspace

When CocoaPods creates a workspace, open the .xcworkspace, not the original .xcodeproj. Opening the wrong file is a common reason package imports fail.

For new Swift projects, prefer the current native package workflow when it satisfies the project’s needs.

6.10 Debugging in Xcode

1. Click the gutter to create a breakpoint.
2. Run the application.
3. Trigger the code path.
4. Inspect variables in the debug area.
5. Use the LLDB console for expressions.
6. Step over or into functions.

Example LLDB expression while paused:

po variableName

po prints an object description.

6.11 Signing and provisioning basics

To run on a real Apple device or distribute an application, the build must be signed.

At a beginner level, understand these terms:

• Bundle identifier: Unique app identity, such as com.example.MyApp.
• Development team: Apple developer account/team used for signing.
• Certificate: Cryptographic identity used to sign.
• Provisioning profile: Connects app identity, permissions, signing identity, and allowed devices or distribution method.
• Entitlements: Capabilities such as push notifications or iCloud access.

For local simulator testing, signing is usually less visible. Real-device and distribution workflows require correct account and project settings.

Do not randomly change bundle identifiers or signing teams in a shared project without understanding the deployment setup.

6.12 Derived Data

Xcode stores generated build information in Derived Data.

Clearing Derived Data can help when generated output is stale, but it forces Xcode to rebuild indexes and products.

Before deleting it:

1. Read the build error.
2. Clean the build folder.
3. Confirm the active scheme and destination.
4. Restart Xcode.
5. Then consider clearing Derived Data.

Module 6 checkpoint

You are done when:

• clang --version and swift --version work.
• You can explain project, workspace, target, and scheme.
• A command-line or SwiftUI project runs.
• You can select a simulator.
• You can set a breakpoint.
• You understand why a CocoaPods project may require opening a workspace.
• You can describe signing at a basic level.

Common failure modes

The selected simulator is unavailable

Install the required runtime or choose an installed destination.

Package resolution fails

Check network access, package URL, version requirements, and whether the package supports the target platform.

Signing requires a team

Add the appropriate Apple account and choose a team, or use simulator testing until device deployment is required.

Header or module is missing in an older dependency-managed project

Confirm that you opened the correct workspace and installed dependencies.

Practice task

Create a small SwiftUI counter with Increase, Decrease, and Reset buttons. Add a breakpoint inside one button action and inspect the counter before and after it changes.

Learning objectives

By the end of this module, you should be able to:

• Explain what a GUI toolkit provides.
• Explain the event loop, widgets, layout, callbacks, and application state.
• Avoid blocking the GUI thread with long work.
• Build a small GUI in Python, JavaScript/Electron, Java, C, or C++.
• Identify whether an error occurs during compilation, linking, startup, or event handling.

7.1 What a GUI framework does

A Graphical User Interface framework provides reusable visual and behavioral components such as:

• Windows.
• Buttons.
• Labels.
• Text boxes.
• Lists.
• Menus.
• Dialogs.
• Layout containers.
• Mouse and keyboard events.
• Drawing surfaces.

Without a framework, you would need to communicate directly with operating-system windowing APIs and implement much more behavior yourself.

7.2 Event-driven programming

A command-line program often follows a direct sequence:

start → ask for input → calculate → print → exit

A GUI program usually follows an event-driven model:

create interface → start event loop → wait → respond to events → keep waiting

The program does not know which button the user will click first. It registers callback functions for possible events.

7.3 The event loop

The event loop processes events such as:

• Mouse clicks.
• Keyboard input.
• Window resizing.
• Timers.
• Repaint requests.
• Operating-system messages.

Examples:

• Tkinter: root.mainloop().
• Qt/PySide: app.exec().
• Swing: managed through the AWT event-dispatch system.
• GTK: application run loop.
• Electron: Chromium and Node event loops managed through Electron lifecycle APIs.

If the event loop is never started, a window may appear briefly and close or never respond.

7.4 Widgets

A widget is a GUI element.

Examples:

• Button.
• Label.
• Entry field.
• Checkbox.
• Slider.
• Table.
• Tree view.

Widgets commonly have:

• Properties: text, size, enabled state.
• Events: clicked, changed, selected.
• Methods: show, hide, focus, clear.

7.5 Layout managers

Avoid placing every widget at fixed pixel coordinates while learning. Layout managers arrange widgets based on rules.

Common layout concepts:

• Vertical stack.
• Horizontal row.
• Grid.
• Border regions.
• Flexible expansion.
• Margins and spacing.

A responsive layout can survive window resizing and different text sizes better than absolute positioning.

7.6 Application state

State is data that changes while the application runs.

Examples:

• Current counter value.
• Text entered by the user.
• Selected file.
• List of tasks.
• Whether dark mode is enabled.

When state changes, the UI needs to reflect it. Frameworks differ in how this connection is managed:

• Directly update a widget.
• Bind a variable to a widget.
• Use observable properties.
• Re-render a declarative view.

7.7 Do not block the GUI thread

Suppose a button callback performs a 30-second operation. If it runs directly on the GUI thread, the window may freeze because the event loop cannot process repaint or input events.

Long work should usually use:

• A worker thread.
• An asynchronous operation.
• A background process.
• A task system provided by the framework.

The worker must communicate results back safely. Many GUI frameworks require widget updates to happen on the main GUI thread.

Start with short tasks. Learn your framework’s threading model before adding network requests, large file processing, or AI inference.

7A.1 Why start with Tkinter?

Tkinter is included with many standard Python installations and provides a low-friction introduction to event-driven programming.

It is suitable for:

• Learning GUI concepts.
• Internal tools.
• Small utilities.
• Simple forms.

It is not always the best choice for highly polished modern interfaces, but it is an excellent teaching toolkit.

7A.2 Verify Tkinter

Run:

python -m tkinter

A small demonstration window should open.

On some Linux distributions, install the separate Tk package, for example:

sudo apt install python3-tk

Use the package command appropriate for the distribution.

7A.3 Build a beginner counter

Create counter_app.py:

import tkinter as tk
from tkinter import ttk


class CounterApp:
    def __init__(self, root: tk.Tk) -> None:
        self.root = root
        self.root.title("Beginner Counter")
        self.root.geometry("360x240")

        self.count = tk.IntVar(value=0)

        container = ttk.Frame(root, padding=20)
        container.pack(fill="both", expand=True)

        title = ttk.Label(container, text="Counter", font=("Arial", 20))
        title.pack(pady=(0, 16))

        self.count_label = ttk.Label(
            container,
            textvariable=self.count,
            font=("Arial", 32),
        )
        self.count_label.pack(pady=8)

        button_row = ttk.Frame(container)
        button_row.pack(pady=16)

        decrease_button = ttk.Button(
            button_row,
            text="Decrease",
            command=self.decrease,
        )
        decrease_button.pack(side="left", padx=6)

        reset_button = ttk.Button(
            button_row,
            text="Reset",
            command=self.reset,
        )
        reset_button.pack(side="left", padx=6)

        increase_button = ttk.Button(
            button_row,
            text="Increase",
            command=self.increase,
        )
        increase_button.pack(side="left", padx=6)

    def increase(self) -> None:
        self.count.set(self.count.get() + 1)

    def decrease(self) -> None:
        self.count.set(self.count.get() - 1)

    def reset(self) -> None:
        self.count.set(0)


def main() -> None:
    root = tk.Tk()
    CounterApp(root)
    root.mainloop()


if __name__ == "__main__":
    main()

Run:

python counter_app.py

7A.4 Understand the code

tk.Tk()

Creates the main application window.

ttk

Provides themed widgets that generally follow the operating system’s visual style better than classic Tk widgets.

IntVar

A Tkinter variable object. The label observes it through textvariable. When the value changes, the label updates.

command=self.increase

Passes the function as a callback. Do not write:

command=self.increase()

The parentheses would call the function immediately during setup and pass its result instead of the callback.

mainloop()

Starts the event loop and keeps the application responsive.

if __name__ == "__main__"

Runs main() when the file is launched directly, while allowing the file to be imported without automatically opening a window.

7A.5 Input validation example

import tkinter as tk
from tkinter import messagebox, ttk


def calculate() -> None:
    try:
        width = float(width_entry.get())
        height = float(height_entry.get())
    except ValueError:
        messagebox.showerror("Invalid input", "Enter numbers for width and height.")
        return

    area = width * height
    result_label.config(text=f"Area: {area:.2f}")


root = tk.Tk()
root.title("Rectangle Area")

frame = ttk.Frame(root, padding=20)
frame.grid()

width_entry = ttk.Entry(frame)
height_entry = ttk.Entry(frame)
result_label = ttk.Label(frame, text="Area: —")

ttk.Label(frame, text="Width").grid(row=0, column=0, sticky="w")
width_entry.grid(row=0, column=1)

ttk.Label(frame, text="Height").grid(row=1, column=0, sticky="w")
height_entry.grid(row=1, column=1)

ttk.Button(frame, text="Calculate", command=calculate).grid(
    row=2,
    column=0,
    columnspan=2,
    pady=10,
)
result_label.grid(row=3, column=0, columnspan=2)

root.mainloop()

The callback catches conversion errors instead of letting the GUI crash.

7A.6 Tkinter common failure modes

Window flashes and closes

mainloop() is missing, or the program crashed before reaching it. Run from a terminal to see the traceback.

Button runs during startup

The callback was written with parentheses in command=.

Interface freezes

A callback is performing long work on the GUI thread.

Layout overlaps or behaves strangely

Avoid mixing pack and grid for widgets that share the same parent container. They can be used in different nested containers.

Image disappears

Tkinter images may need a persistent Python reference. A local variable can be garbage-collected.

7A checkpoint

You are done when:

• python -m tkinter opens a window.
• The counter app remains open and responds.
• You can explain callback versus function call.
• You can validate text input without crashing.
• You can use a layout manager.

Practice task

Create a unit-converter GUI with an input, a conversion-selection control, a Convert button, a result label, and validation for blank/non-numeric input.

7B.1 Why PySide6?

PySide6 provides Python bindings for Qt. It offers a large widget library, layouts, signals and slots, model/view controls, styling, and cross-platform application support.

For a project that may become a polished desktop application, PySide6 is often a better long-term foundation than Tkinter.

Always review the framework’s current licensing and deployment terms for commercial distribution.

7B.2 Create a project environment

mkdir pyside-counter
cd pyside-counter
python -m venv .venv

Activate it, then install:

python -m pip install PySide6
python -m pip freeze > requirements.txt

Verify:

python -c "import PySide6; print(PySide6.__version__)"

7B.3 Build the counter

import sys

from PySide6.QtCore import Qt
from PySide6.QtWidgets import (
    QApplication,
    QHBoxLayout,
    QLabel,
    QPushButton,
    QVBoxLayout,
    QWidget,
)


class CounterWindow(QWidget):
    def __init__(self) -> None:
        super().__init__()
        self.count = 0

        self.setWindowTitle("PySide6 Counter")
        self.resize(420, 260)

        self.label = QLabel("0")
        self.label.setAlignment(Qt.AlignmentFlag.AlignCenter)

        decrease_button = QPushButton("Decrease")
        reset_button = QPushButton("Reset")
        increase_button = QPushButton("Increase")

        decrease_button.clicked.connect(self.decrease)
        reset_button.clicked.connect(self.reset)
        increase_button.clicked.connect(self.increase)

        button_layout = QHBoxLayout()
        button_layout.addWidget(decrease_button)
        button_layout.addWidget(reset_button)
        button_layout.addWidget(increase_button)

        main_layout = QVBoxLayout()
        main_layout.addWidget(self.label)
        main_layout.addLayout(button_layout)
        self.setLayout(main_layout)

    def refresh(self) -> None:
        self.label.setText(str(self.count))

    def increase(self) -> None:
        self.count += 1
        self.refresh()

    def decrease(self) -> None:
        self.count -= 1
        self.refresh()

    def reset(self) -> None:
        self.count = 0
        self.refresh()


def main() -> None:
    app = QApplication(sys.argv)
    window = CounterWindow()
    window.show()
    raise SystemExit(app.exec())


if __name__ == "__main__":
    main()

7B.4 Signals and slots

A signal announces that something happened. A slot is a callable that responds.

increase_button.clicked.connect(self.increase)

• clicked is the signal.
• connect registers the response.
• self.increase is the slot/callback.

Again, do not add parentheses unless you intentionally want to call the method immediately.

7B.5 Qt Designer concept

Qt Designer allows drag-and-drop interface design. It produces .ui files.

Two common workflows are:

• Load the .ui file at runtime.
• Convert it to Python code.

For learning, build at least one interface in code first so you understand widgets, layouts, and signals. Designer becomes more useful after the concepts are clear.

7B.6 Deployment concept

Running from source requires Python and dependencies. Distributing to users usually requires packaging tools that bundle an executable and required libraries.

Packaging is a separate stage from writing the GUI. Before packaging:

• Confirm the app works in a clean virtual environment.
• Keep dependency versions recorded.
• Use relative resource handling carefully.
• Test on the target operating system.
• Review plugin/platform-library inclusion.

7B checkpoint

You are done when:

• PySide6 is installed inside the project environment.
• The counter window opens.
• All buttons update the state.
• You can explain signals and slots.
• requirements.txt records the environment.

Practice task

Create a simple task-list application that lets the user type a task, add it to a list, select a task, and remove it.

7C.1 Why browser GUI is the easiest visual starting point

A browser already provides:

• Window and rendering engine.
• Buttons and form controls.
• CSS layout.
• Event system.
• Developer tools.

You can build a GUI without installing a desktop framework.

7C.2 Create the project

web-counter/
├── index.html
├── styles.css
└── app.js

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Counter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="card">
    <h1>Counter</h1>
    <p id="count" aria-live="polite">0</p>

    <div class="buttons">
      <button id="decrease" type="button">Decrease</button>
      <button id="reset" type="button">Reset</button>
      <button id="increase" type="button">Increase</button>
    </div>
  </main>

  <script src="app.js"></script>
</body>
</html>

styles.css

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background: #f3f4f6;
}

.card {
  width: min(92vw, 440px);
  padding: 2rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
  text-align: center;
}

#count {
  margin: 1rem 0;
  font-size: 3rem;
  font-weight: 700;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

button {
  padding: 0.7rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.6rem;
  background: #ffffff;
  cursor: pointer;
}

button:hover {
  filter: brightness(0.96);
}

button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

app.js

let count = 0;

const countDisplay = document.querySelector("#count");
const decreaseButton = document.querySelector("#decrease");
const resetButton = document.querySelector("#reset");
const increaseButton = document.querySelector("#increase");

function render() {
  countDisplay.textContent = String(count);
}

decreaseButton.addEventListener("click", () => {
  count -= 1;
  render();
});

resetButton.addEventListener("click", () => {
  count = 0;
  render();
});

increaseButton.addEventListener("click", () => {
  count += 1;
  render();
});

render();

Open index.html in a browser.

7C.3 Use browser developer tools

Open Developer Tools and learn these tabs:

• Elements: Inspect HTML and applied CSS.
• Console: View errors and log values.
• Sources: Set JavaScript breakpoints.
• Network: Inspect loaded files and requests.
• Application/Storage: Inspect local storage and related browser data.

Set a breakpoint inside the Increase click handler and inspect count.

7C checkpoint

You are done when:

• HTML, CSS, and JavaScript are in separate files.
• The buttons work.
• The layout responds to a narrow window.
• The browser Console has no errors.
• You can set a JavaScript breakpoint.

Practice task

Add a numeric step-size input and make Increase/Decrease change by that amount. Validate the value and display an accessible error message when it is invalid.

7D.1 What Electron is

Electron combines a Chromium-based renderer with Node.js-powered main-process capabilities so web technologies can form a desktop application.

An Electron application has separate responsibilities:

• Main process: Application lifecycle, windows, menus, native capabilities.
• Renderer process: HTML/CSS/JavaScript interface.
• Preload script: Carefully exposes approved capabilities from the privileged side to the renderer.

Treating the renderer as fully trusted and enabling unrestricted Node access is a dangerous beginner shortcut. Use isolation and a narrow preload API.

7D.2 Create the project

mkdir electron-counter
cd electron-counter
npm init -y
npm install --save-dev electron

Create:

electron-counter/
├── package.json
├── main.js
├── preload.js
├── index.html
├── renderer.js
└── styles.css

7D.3 Configure package.json

{
  "name": "electron-counter",
  "version": "1.0.0",
  "private": true,
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "YOUR_INSTALLED_VERSION"
  }
}

Do not manually replace the installed version with random text. npm writes the actual dependency entry. The example shows the intended shape.

7D.4 Secure main process

main.js:

const path = require("node:path");
const { app, BrowserWindow, ipcMain } = require("electron");

function createWindow() {
  const window = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false,
      sandbox: true
    }
  });

  window.loadFile("index.html");
}

ipcMain.handle("app:get-version", () => app.getVersion());

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

7D.5 Preload bridge

preload.js:

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("desktopAPI", {
  getAppVersion: () => ipcRenderer.invoke("app:get-version")
});

This exposes one narrow function. It does not expose the entire ipcRenderer object or arbitrary file-system access.

7D.6 Renderer interface

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self'; style-src 'self'">
  <title>Electron Counter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Electron Counter</h1>
    <p id="count">0</p>
    <div>
      <button id="decrease" type="button">Decrease</button>
      <button id="reset" type="button">Reset</button>
      <button id="increase" type="button">Increase</button>
    </div>
    <p id="version"></p>
  </main>
  <script src="renderer.js"></script>
</body>
</html>

renderer.js:

let count = 0;

const countDisplay = document.querySelector("#count");
const versionDisplay = document.querySelector("#version");

function render() {
  countDisplay.textContent = String(count);
}

document.querySelector("#decrease").addEventListener("click", () => {
  count -= 1;
  render();
});

document.querySelector("#reset").addEventListener("click", () => {
  count = 0;
  render();
});

document.querySelector("#increase").addEventListener("click", () => {
  count += 1;
  render();
});

window.desktopAPI.getAppVersion().then((version) => {
  versionDisplay.textContent = `App version: ${version}`;
});

render();

Run:

npm start

7D.7 Understand the security boundary

The renderer displays the interface. It should not automatically receive unrestricted operating-system access.

The preload bridge should:

• Expose only required functions.
• Validate arguments.
• Avoid exposing raw IPC methods.
• Avoid loading untrusted remote content.
• Keep Electron updated.

A desktop app built with web technology still requires desktop security thinking.

7D.8 Development tools

During development, you can open Chromium Developer Tools from the window or application menu.

Use them to inspect:

• Renderer console errors.
• DOM and CSS.
• Network activity.
• Renderer breakpoints.

Main-process errors appear in the terminal that launched Electron. Renderer and main logs may therefore appear in different places.

7D checkpoint

You are done when:

• npm start opens a desktop window.
• contextIsolation is enabled.
• nodeIntegration is disabled.
• The preload script exposes one narrow API.
• The renderer displays the application version.
• You know where main-process and renderer errors appear.

Common failure modes

Blank window

Check the renderer DevTools Console and the terminal. Confirm loadFile points to the correct file.

window.desktopAPI is undefined

The preload path is incorrect, the preload script crashed, or context bridge setup is wrong.

Electron command not found

Use the npm script or npx electron . rather than assuming a global installation.

App closes immediately

Read the terminal for a main-process exception.

Practice task

Extend the app so the main process safely returns the operating-system platform through a second narrow preload function. Display it in the renderer.

7E.1 Why Swing remains useful

Swing is bundled with the JDK and offers a straightforward path to a desktop window without external dependencies.

It is useful for:

• Learning Java GUI concepts.
• Internal tools.
• Traditional desktop interfaces.
• Understanding event listeners and layout managers.

7E.2 Event Dispatch Thread

Swing components should be created and modified on the Event Dispatch Thread, commonly called the EDT.

Use:

SwingUtilities.invokeLater(() -> {
    // Create and show GUI here.
});

Long operations should not run on the EDT because they freeze the interface.

7E.3 Swing counter

import javax.swing.*;
import java.awt.*;

public class CounterApp {
    private int count = 0;
    private final JLabel countLabel = new JLabel("0", SwingConstants.CENTER);

    private void createAndShow() {
        JFrame frame = new JFrame("Swing Counter");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(420, 240);
        frame.setLocationRelativeTo(null);

        countLabel.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 36));

        JButton decreaseButton = new JButton("Decrease");
        JButton resetButton = new JButton("Reset");
        JButton increaseButton = new JButton("Increase");

        decreaseButton.addActionListener(event -> {
            count--;
            refresh();
        });

        resetButton.addActionListener(event -> {
            count = 0;
            refresh();
        });

        increaseButton.addActionListener(event -> {
            count++;
            refresh();
        });

        JPanel buttons = new JPanel(new FlowLayout());
        buttons.add(decreaseButton);
        buttons.add(resetButton);
        buttons.add(increaseButton);

        frame.setLayout(new BorderLayout(10, 10));
        frame.add(countLabel, BorderLayout.CENTER);
        frame.add(buttons, BorderLayout.SOUTH);

        frame.setVisible(true);
    }

    private void refresh() {
        countLabel.setText(Integer.toString(count));
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new CounterApp().createAndShow());
    }
}

7E.4 Layout managers

Common Swing layouts:

• BorderLayout: north, south, east, west, center.
• FlowLayout: left-to-right flow.
• GridLayout: equal-sized cells.
• BoxLayout: one horizontal or vertical axis.
• GridBagLayout: flexible but more complex grid constraints.

Use nested panels, each with a suitable layout, rather than forcing one layout to solve the entire window.

7E.5 Long tasks with SwingWorker

A SwingWorker can perform background work and publish results back to the interface.

Do not update Swing widgets directly from arbitrary worker threads. Use the framework’s supported handoff methods.

For your first GUI, avoid long work. Add threading only after the base interface is stable.

7E checkpoint

You are done when:

• The Swing window is created on the EDT.
• Buttons update the count.
• Closing the window exits the program.
• You can identify the layout managers in use.
• You understand why long work freezes the EDT.

Practice task

Create a Swing temperature converter with two input fields or a direction selector, validation, and a result label.

7F.1 What JavaFX adds

JavaFX offers:

• Modern scene graph.
• CSS styling.
• Properties and binding.
• FXML markup.
• Media and animation APIs.

JavaFX is distributed separately from the base JDK in modern workflows. A build tool is usually the most reproducible way to add it.

7F.2 Prefer build-tool setup

Instead of manually configuring module paths for every machine, use a documented Maven or Gradle project template compatible with your selected JavaFX and JDK versions.

A Maven project typically includes JavaFX dependencies and a plugin that can run the application.

Conceptual dependency:

<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-controls</artifactId>
    <version>YOUR_COMPATIBLE_VERSION</version>
</dependency>

Use a version compatible with the JDK and platform. Do not copy an arbitrary version from this course into a real project without checking current documentation.

7F.3 JavaFX counter

package com.example;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CounterApp extends Application {
    private int count = 0;
    private final Label countLabel = new Label("0");

    @Override
    public void start(Stage stage) {
        Button decrease = new Button("Decrease");
        Button reset = new Button("Reset");
        Button increase = new Button("Increase");

        decrease.setOnAction(event -> {
            count--;
            refresh();
        });

        reset.setOnAction(event -> {
            count = 0;
            refresh();
        });

        increase.setOnAction(event -> {
            count++;
            refresh();
        });

        HBox buttons = new HBox(10, decrease, reset, increase);
        buttons.setAlignment(Pos.CENTER);

        VBox root = new VBox(20, countLabel, buttons);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(24));

        stage.setScene(new Scene(root, 420, 240));
        stage.setTitle("JavaFX Counter");
        stage.show();
    }

    private void refresh() {
        countLabel.setText(Integer.toString(count));
    }

    public static void main(String[] args) {
        launch(args);
    }
}

7F.4 Stage, Scene, and nodes

• Stage: Top-level window.
• Scene: Container for the visual tree.
• Node: Visual object in the scene graph.
• Layout pane: Node that arranges child nodes.

The scene graph is a hierarchy. A button belongs to a layout, the layout belongs to a root, the root belongs to a Scene, and the Scene belongs to a Stage.

7F.5 CSS styling

JavaFX can load CSS:

.root {
    -fx-font-family: "System";
    -fx-background-color: #f3f4f6;
}

.label {
    -fx-font-size: 32px;
    -fx-font-weight: bold;
}

Keep functionality working before investing heavily in styling.

7F checkpoint

You are done when:

• The JavaFX dependency resolves through the build tool.
• The app launches through the documented build command or IDE task.
• Buttons update the label.
• You can explain Stage, Scene, and Node.

Common failure modes

“JavaFX runtime components are missing”

The launch configuration or build-tool plugin is not providing JavaFX modules correctly.

Module-access errors

The module declaration, dependency modules, or runtime arguments are incomplete.

IDE runs but wrapper command fails

The IDE may use hidden runtime options. Make the build-tool configuration complete so it works outside the IDE.

Practice task

Create a JavaFX form that accepts a name and displays a personalized greeting. Disable the submit button while the input is blank.

7G.1 Why C GUI setup is harder

C does not include a standard cross-platform GUI toolkit. You must install:

• Header files for compilation.
• Libraries for linking.
• Runtime libraries for execution.
• Tooling such as pkg-config to provide compiler flags.

Native-library setup is sensitive to operating system, architecture, compiler, and package-manager environment.

7G.2 Install GTK development files

Examples vary by platform.

Debian/Ubuntu GTK 3 development package:

sudo apt update
sudo apt install libgtk-3-dev pkg-config

Verify:

pkg-config --modversion gtk+-3.0

On Windows, use one consistent MSYS2 environment and install the GTK package built for that environment. Launch or configure the compiler from the same environment.

On macOS, a package manager can install GTK, but the exact package and environment may differ by GTK major version.

7G.3 GTK window with a button

main.c:

#include <gtk/gtk.h>

static int count = 0;
static GtkWidget *count_label;

static void refresh_label(void) {
    char text[32];
    g_snprintf(text, sizeof text, "%d", count);
    gtk_label_set_text(GTK_LABEL(count_label), text);
}

static void on_increase_clicked(GtkButton *button, gpointer user_data) {
    (void)button;
    (void)user_data;
    count++;
    refresh_label();
}

static void activate(GtkApplication *app, gpointer user_data) {
    (void)user_data;

    GtkWidget *window = gtk_application_window_new(app);
    gtk_window_set_title(GTK_WINDOW(window), "GTK Counter");
    gtk_window_set_default_size(GTK_WINDOW(window), 420, 240);

    GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 12);
    gtk_container_set_border_width(GTK_CONTAINER(box), 24);

    count_label = gtk_label_new("0");
    GtkWidget *increase_button = gtk_button_new_with_label("Increase");

    g_signal_connect(
        increase_button,
        "clicked",
        G_CALLBACK(on_increase_clicked),
        NULL
    );

    gtk_box_pack_start(GTK_BOX(box), count_label, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(box), increase_button, FALSE, FALSE, 0);

    gtk_container_add(GTK_CONTAINER(window), box);
    gtk_widget_show_all(window);
}

int main(int argc, char **argv) {
    GtkApplication *app = gtk_application_new(
        "com.example.gtkcounter",
        G_APPLICATION_DEFAULT_FLAGS
    );

    g_signal_connect(app, "activate", G_CALLBACK(activate), NULL);
    int status = g_application_run(G_APPLICATION(app), argc, argv);
    g_object_unref(app);
    return status;
}

Compile:

gcc main.c -o gtk_counter $(pkg-config --cflags --libs gtk+-3.0)

Run:

./gtk_counter

PowerShell command-substitution syntax differs from POSIX shells. On Windows, it may be easier to compile inside the matching MSYS2 shell or use a build system.

7G.4 Understand pkg-config

Run:

pkg-config --cflags gtk+-3.0

This prints compiler include flags.

Run:

pkg-config --libs gtk+-3.0

This prints linker flags.

The combined command substitution inserts both into the GCC command.

If pkg-config cannot find the package, either GTK development metadata is not installed or the search path is wrong.

7G.5 GTK major versions

GTK 3 and GTK 4 have API differences. Code written for GTK 3 may not compile unchanged against GTK 4.

Before following a tutorial, confirm:

• GTK major version.
• Package name.
• pkg-config identifier.
• API documentation version.

Do not “fix” dozens of missing functions until you first confirm that the tutorial and installed GTK major version match.

7G checkpoint

You are done when:

• pkg-config reports the intended GTK version.
• The compiler finds gtk/gtk.h.
• Linking succeeds.
• The window opens and the callback responds.
• You can explain what pkg-config contributes.

Common failure modes

Header missing

The runtime package may be installed without development headers, or pkg-config flags are absent.

Undefined references

Linker flags are missing or ordered incorrectly.

DLL not found on Windows

The runtime library directories are not on PATH or bundled beside the executable.

GTK 3 tutorial with GTK 4 installation

Use matching API instructions.

Practice task

Add Decrease and Reset buttons. Move the count into an application-state structure instead of a global variable.

7H.1 When raylib is a better choice

raylib is suited to:

• Games.
• Simulations.
• Visual demonstrations.
• Custom-drawn tools.

It is not a traditional desktop widget toolkit with native menus, tables, and forms. You draw the interface and handle input in a game loop.

7H.2 Game-loop model

A raylib application repeatedly:

1. Reads input.
2. Updates state.
3. Draws a frame.
4. Repeats until the window closes.

Conceptual code:

#include "raylib.h"

int main(void) {
    const int width = 800;
    const int height = 450;
    int count = 0;

    InitWindow(width, height, "raylib Counter");
    SetTargetFPS(60);

    while (!WindowShouldClose()) {
        if (IsKeyPressed(KEY_UP)) {
            count++;
        }

        if (IsKeyPressed(KEY_DOWN)) {
            count--;
        }

        BeginDrawing();
        ClearBackground(RAYWHITE);
        DrawText(TextFormat("Count: %d", count), 300, 180, 40, DARKGRAY);
        DrawText("Use Up and Down arrows", 260, 250, 20, GRAY);
        EndDrawing();
    }

    CloseWindow();
    return 0;
}

Compile using the flags documented for your operating system and installation method.

7H checkpoint

You are done when:

• The raylib header and library are found.
• A window opens.
• The frame loop responds to input.
• The count changes without freezing.
• The window closes cleanly.

Practice task

Draw three clickable rectangles as Decrease, Reset, and Increase buttons. Detect mouse position and click state.

7I.1 Why Qt?

Qt is a mature cross-platform application framework. It includes:

• Widgets.
• Layouts.
• Signals and slots.
• Networking.
• File and settings APIs.
• Model/view architecture.
• Internationalization.
• Designer tools.
• Build and deployment tooling.

Qt offers both widget-based and declarative QML approaches. Start with Qt Widgets for a traditional desktop application.

7I.2 Understand kits

A Qt kit combines:

• Qt version.
• Compiler.
• Debugger.
• CMake/build tool.
• Target architecture.

A kit mismatch is a major source of linker errors.

Examples of incompatible mixing:

• Qt built for MSVC linked with MinGW.
• x64 Qt libraries linked into an ARM64 target.
• Debug application linked against incompatible Release-only binaries.

Select a Qt kit that matches the compiler and architecture you intend to use.

7I.3 Create a Qt Widgets project

In Qt Creator:

1. Create a Qt Widgets Application.
2. Select a matching desktop kit.
3. Choose CMake if offered for a modern portable build.
4. Build the generated template before changing it.
5. Run the blank window.

This establishes that the kit works before your own code adds complexity.

7I.4 Minimal CMake configuration

Conceptual CMakeLists.txt:

cmake_minimum_required(VERSION 3.21)
project(QtCounter LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_AUTOMOC ON)

find_package(Qt6 REQUIRED COMPONENTS Widgets)

qt_add_executable(QtCounter
    main.cpp
)

target_link_libraries(QtCounter PRIVATE Qt6::Widgets)

Use the Qt and CMake configuration generated by your installed Qt version as the primary reference. Build APIs can evolve.

7I.5 Qt counter

main.cpp:

#include <QApplication>
#include <QHBoxLayout>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    int count = 0;

    QWidget window;
    window.setWindowTitle("Qt Counter");
    window.resize(440, 260);

    auto *label = new QLabel("0");
    label->setAlignment(Qt::AlignCenter);

    auto *decrease = new QPushButton("Decrease");
    auto *reset = new QPushButton("Reset");
    auto *increase = new QPushButton("Increase");

    auto refresh = [&]() {
        label->setText(QString::number(count));
    };

    QObject::connect(decrease, &QPushButton::clicked, [&]() {
        --count;
        refresh();
    });

    QObject::connect(reset, &QPushButton::clicked, [&]() {
        count = 0;
        refresh();
    });

    QObject::connect(increase, &QPushButton::clicked, [&]() {
        ++count;
        refresh();
    });

    auto *buttons = new QHBoxLayout();
    buttons->addWidget(decrease);
    buttons->addWidget(reset);
    buttons->addWidget(increase);

    auto *layout = new QVBoxLayout();
    layout->addWidget(label);
    layout->addLayout(buttons);

    window.setLayout(layout);
    window.show();

    return app.exec();
}

7I.6 Ownership in Qt

Qt uses parent-child object ownership for many QObject-derived objects. When a parent is destroyed, it deletes its children.

Layouts and widgets assigned into the window hierarchy acquire ownership relationships. This reduces manual deletion, but C++ lifetime rules still matter.

Do not assume every pointer is automatically owned. Learn the ownership rules for each API and prefer stack objects or smart pointers where appropriate outside QObject parent ownership.

7I.7 Signals and slots

Qt’s signal/slot system connects events to responses.

QObject::connect(button, &QPushButton::clicked, callback);

This provides type-safe event connections in modern Qt syntax.

7I.8 Deployment

A program that runs inside Qt Creator may rely on Qt DLLs, frameworks, or plugins available through the development environment.

Distribution requires deploying:

• Qt runtime libraries.
• Platform plugins.
• Image-format plugins if used.
• Compiler runtimes if required.
• Your application executable and resources.

Use Qt’s platform deployment tooling and test the packaged application on a clean machine or virtual machine.

7I checkpoint

You are done when:

• The selected kit matches the compiler and architecture.
• The generated template builds before modification.
• The counter app runs.
• Signals update the interface.
• You understand that deployment requires runtime libraries and plugins.

Common failure modes

Unresolved external symbols for Qt classes

The target is not linked to the correct Qt module, or the compiler/kit is mismatched.

Could not find Qt platform plugin

Deployment is incomplete or plugin paths are wrong.

CMake cannot find Qt

The Qt installation prefix/kit is not configured, or the wrong CMake environment is active.

Application compiles but crashes after startup

Read the debugger stack and confirm object lifetime, plugin deployment, and runtime library compatibility.

Practice task

Create a Qt task-list window with an input, Add button, list widget, and Remove Selected button.

8.1 Pairing table

8.2 Suggested path for a complete beginner

Path A — General software development

1. Terminal and file navigation.
2. Python in VS Code or PyCharm.
3. Virtual environments and Git.
4. Debugging and tests.
5. HTML/CSS/JavaScript.
6. Node package management.
7. One GUI framework.
8. Java or C# for larger typed projects.
9. C/C++ after toolchain fundamentals are comfortable.

Path B — Game development

1. C# basics.
2. Visual Studio debugging.
3. Unity Hub and Unity editor.
4. Unity project structure.
5. Scene, GameObject, component, prefab, and script concepts.
6. Version control with Unity-specific ignore rules.
7. Build target modules.
8. Profiling and Release builds.

Path C — Desktop tools

1. HTML/CSS/JavaScript or Python.
2. Package management.
3. Local data storage.
4. GUI event model.
5. Electron or PySide6.
6. Secure file access and settings.
7. Packaging.
8. Clean-machine testing.
9. Updates and signing.

Path D — Native systems development

1. C fundamentals.
2. Compiler warnings.
3. Debugger and memory inspection.
4. Make or CMake.
5. Static and dynamic libraries.
6. C++ language and standard library.
7. Package manager such as vcpkg or Conan.
8. Qt or another native framework.
9. Cross-platform builds and deployment.

8.3 One-IDE temptation

It is natural to want one IDE for every language. VS Code comes closest to a universal editor, but specialized IDEs can reduce friction:

• PyCharm understands Python deeply.
• IntelliJ understands Java/Gradle/Maven deeply.
• Visual Studio understands .NET/MSVC/Unity deeply.
• Xcode is required for much Apple-platform work.
• Qt Creator understands Qt kits and deployment.

Choose tools based on the project, not loyalty to one interface.

8.4 When to use Docker or containers

Containers can make environments reproducible, but they add concepts:

• Images.
• Containers.
• Volumes.
• Ports.
• Networks.
• Dockerfiles.
• Compose files.

Do not use Docker merely because local setup is confusing. First understand the runtime and dependency model. Then containers become a deliberate solution rather than another layer of mystery.

Containers are especially useful for:

• Databases.
• Backend services.
• Linux-based deployment parity.
• Team development with complex system dependencies.

Desktop GUI development and hardware/device workflows can require additional container configuration.

Learning objectives

By the end of this module, you should be able to:

• Initialize a Git repository.
• Create an appropriate .gitignore.
• Commit manifests but exclude generated environments.
• Clone a project and rebuild its environment.
• Avoid committing secrets.
• Explain why environment recreation is a key quality test.

9.1 Verify Git

git --version

Configure identity if needed:

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Use the email address appropriate for your repository-hosting identity and privacy preferences.

9.2 Initialize a repository

From the project root:

git init

Check status:

git status

Before the first commit, create .gitignore.

9.3 Common ignore patterns

Python

.venv/
venv/
__pycache__/
*.pyc
.pytest_cache/
.env

Node/Electron

node_modules/
dist/
build/
.env
*.log

Java/Gradle/IntelliJ

.gradle/
build/
out/
*.class
.idea/
*.iml

Teams may choose to commit selected IDE configuration. Learn the project’s convention.

Visual Studio/.NET

.vs/
bin/
obj/
*.user

C/C++/CMake

build/
cmake-build-*/
*.o
*.obj
*.exe
*.dll
*.so
*.dylib

Xcode

Ignore user-specific workspace data and build output while preserving shared project configuration. Use a maintained ignore template appropriate for Xcode and Swift tooling.

9.4 First commit

git add .
git status
git commit -m "Set up project environment"

Always inspect git status before committing. If thousands of dependency files appear, stop and fix .gitignore.

9.5 Never commit secrets

Examples of secrets:

• API keys.
• Passwords.
• Private certificates.
• Database credentials.
• Access tokens.
• Private signing keys.

A .gitignore entry prevents new untracked files from being added. It does not erase a secret already committed in history.

If a real secret is committed:

1. Revoke or rotate it immediately.
2. Remove it from current files.
3. Follow the repository host’s guidance for cleaning history if necessary.
4. Do not assume deleting the latest file makes the secret safe.

9.6 Rebuild test

A strong project should be reproducible from its committed files.

Python rebuild test

python -m venv .venv
# activate
python -m pip install -r requirements.txt

Node rebuild test

npm ci
npm test
npm start

Java rebuild test

./gradlew clean build

or:

mvn clean verify

.NET rebuild test

dotnet restore
dotnet build
dotnet test

CMake rebuild test

cmake -S . -B build
cmake --build build

The exact commands depend on the project, but the principle is universal: delete generated state and prove it can be recreated.

9.7 README setup instructions

Every serious project should document:

• Required runtime/compiler version.
• Required operating-system dependencies.
• Environment creation.
• Dependency installation.
• Run command.
• Test command.
• Build/package command.
• Required environment variables without secret values.
• Common setup issues.

A good README reduces “works on my machine” problems.

Module 9 checkpoint

You are done when:

• git status excludes generated dependency folders.
• Manifest and lock files are tracked.
• Secrets are excluded.
• A fresh clone can rebuild dependencies.
• The README explains setup and run commands.

Practice task

Take one lab project, initialize Git, create .gitignore, commit the source and manifest, copy the repository to another folder without generated dependencies, and rebuild it successfully.

Learning objectives

By the end of this module, you should be able to:

• Diagnose setup problems systematically.
• Separate editor errors from compiler/runtime errors.
• Identify the exact executable and environment in use.
• Read an error from the first meaningful line rather than only the last line.
• Create a minimal reproduction.
• Know when to reset generated state and when not to reinstall everything.

10.1 The beginner troubleshooting ladder

When something fails, follow this order.

Step 1: State the exact goal

Bad description:

It doesn’t work.

Useful description:

Running `python main.py` from the VS Code terminal fails to import requests, but `python -m pip show requests` says it is installed.

Step 2: Capture the exact command

Record what you typed or clicked. “I ran it” is not precise enough when an IDE offers several run configurations.

Step 3: Capture the complete error

Copy the complete error text. The most useful line may appear near the beginning, not the final “build failed” summary.

Step 4: Identify the layer

Ask whether the problem is in:

• Editor/extension.
• Shell/PATH.
• Runtime/compiler.
• Package manager.
• Dependency resolution.
• Build system.
• Linker.
• Application code.
• GUI event handling.
• Deployment/runtime packaging.

Step 5: Verify versions and paths

Run version and location commands.

Step 6: Reduce the problem

Create the smallest program that reproduces the error.

Step 7: Compare with a known-good command

Try the documented raw command outside the IDE.

Step 8: Clear only relevant generated state

Examples:

• Recreate .venv.
• Remove node_modules and run npm ci.
• Run Gradle/Maven clean.
• Clean CMake build folder.
• Clean/rebuild Visual Studio solution.

Step 9: Check project documentation

Use documentation matching the installed major version.

Step 10: Reinstall only after evidence supports it

Reinstalling can hide the root cause and destroy useful evidence. It is appropriate when files are genuinely missing or corrupted, not as the first response to every error.

10.2 Universal diagnostic commands

Python

python --version
python -c "import sys; print(sys.executable)"
python -m pip --version
python -m pip list

Node

node --version
npm --version
npm config get prefix

Java

java --version
javac --version

C/C++

gcc --version
g++ --version
clang --version
cmake --version

.NET

dotnet --info
dotnet --list-sdks
dotnet --list-runtimes

Git

git --version
git status

Executable location

Windows

where.exe python
where.exe node
where.exe java
where.exe gcc

macOS/Linux

which python
which node
which java
which gcc

10.3 “Command not found” or “not recognized”

Likely causes:

• Tool not installed.
• PATH missing installation folder.
• Terminal opened before PATH update.
• Shell initialization file not loaded.
• Version manager not initialized.
• Command name differs by operating system.

Diagnostic process:

1. Search installed applications or package-manager records.
2. Find the executable on disk.
3. Review PATH.
4. Open a fresh terminal.
5. Run with full path as a test.
6. Fix PATH or shell initialization.

Do not create random duplicate PATH entries without understanding which installation should win.

10.4 “Package installed but import fails”

Python

Compare:

python -c "import sys; print(sys.executable)"
python -m pip --version

Both paths should belong to the same environment.

JavaScript

Check:

• Current working directory.
• package.json location.
• node_modules installation.
• Package name and import style.
• CommonJS versus ES module configuration.

Java

Check:

• Dependency scope.
• Maven/Gradle sync.
• Source set.
• Module/classpath configuration.

C/C++

“Installed” may mean the runtime library exists but development headers do not. Confirm header and linker configuration.

10.5 “Works in terminal but not IDE”

The IDE may use:

• Different interpreter.
• Different compiler.
• Different JDK.
• Different working directory.
• Different environment variables.
• Different build configuration.
• Different shell.

Compare the exact paths and commands rather than assuming the IDE uses the terminal’s environment.

10.6 “Works in IDE but not terminal”

The IDE may inject:

• PATH entries.
• Module paths.
• Classpaths.
• Environment activation.
• Working-directory settings.
• Generated build commands.

Inspect the run configuration and build output. Your goal is to make the project build reproducibly, not to depend on invisible IDE state.

10.7 Permission denied

Possible causes:

• File is owned by another user.
• Directory is protected.
• Executable bit is missing on macOS/Linux.
• Antivirus or security policy blocks execution.
• File is in use.
• A previous sudo command created root-owned project files.

Useful checks on macOS/Linux:

ls -l

Make a script executable when appropriate:

chmod +x gradlew

Do not recursively grant full permissions to an entire drive or development folder as a shortcut.

10.8 Port already in use

Web and Electron development servers may fail because another process uses the port.

The error often includes:

EADDRINUSE

Fix options:

• Stop the previous process.
• Choose another port.
• Identify the process using the port.
• Confirm that the app did not launch twice.

Do not kill unrelated system processes without identifying them.

10.9 File not found

Check:

• Current working directory.
• Relative path.
• Filename capitalization.
• File extension.
• Whether the IDE hides extensions.
• Whether the file is included in the packaged application.

Print the current directory when debugging:

Python

from pathlib import Path
print(Path.cwd())

Node

console.log(process.cwd());

Java

System.out.println(System.getProperty("user.dir"));

C#

Console.WriteLine(Environment.CurrentDirectory);

10.10 Compiler errors versus linker errors

Compiler error

Examples:

• Syntax error.
• Type mismatch.
• Missing header.
• Unknown identifier.

The compiler cannot successfully translate one or more source files.

Linker error

Examples:

• Undefined reference.
• Unresolved external symbol.
• Duplicate symbol.

Source files compiled, but the final pieces could not be combined.

Do not search for “syntax fix” when the message is from the linker.

10.11 Debug versus Release differences

Possible causes:

• Undefined behavior in C/C++.
• Race condition or timing issue.
• Conditional compilation.
• Optimization exposing invalid assumptions.
• Missing Release-only resource/deployment setting.
• Different environment variables.

Treat a Release-only bug as real. Use the Release debugger, sanitizers where supported, logging, and tests.

10.12 GUI opens and immediately closes

Likely causes:

• Event loop not started.
• Unhandled exception during startup.
• Main function returns immediately.
• Required runtime library missing.
• Window object destroyed because no reference remains.

Run from a terminal or debugger so the error remains visible.

10.13 GUI freezes

Likely cause: long work is running on the GUI thread.

Confirm by pausing the debugger and examining the call stack.

Fix by moving appropriate work to a worker mechanism and updating the UI through the framework’s safe main-thread method.

10.14 Clean-machine test

A clean-machine or virtual-machine test reveals hidden dependencies:

• Uncommitted files.
• Globally installed packages.
• Missing runtime libraries.
• PATH assumptions.
• Hard-coded absolute paths.
• Missing environment variables.

Before distribution, test installation and first launch in an environment that does not have your development toolchain configured exactly like your main computer.

10.15 Create a support report

When asking for help, provide:

Operating system:
Architecture:
IDE and version:
Language/runtime version:
Project type:
Exact command or button used:
Expected result:
Actual result:
Complete error:
Relevant configuration files:
What already worked:
What changed before the failure:

This makes troubleshooting dramatically faster.

Module 10 checkpoint

You are done when you can diagnose a problem without immediately reinstalling everything. You should be able to identify the layer, verify the executable path, reproduce the error with a small example, and explain the next diagnostic step.

Practice task

Deliberately create and repair these failures:

1. Select the wrong Python interpreter.
2. Remove node_modules and restore it.
3. Change a Java project’s SDK to an invalid location and repair it.
4. Point a C++ debug configuration at the wrong executable.
5. Change a GUI callback so it runs immediately instead of on click, then correct it.

11.1 Capstone A — Reproducible Python utility

Build a Python desktop or command-line utility with:

• Project-local .venv.
• At least one third-party dependency.
• requirements.txt or a modern project manifest.
• .gitignore.
• At least three functions.
• Input validation.
• At least three automated tests.
• Debugger evidence: set and use a breakpoint.
• README with setup, run, and test commands.

Suggested ideas:

• Expense calculator.
• File organizer preview tool.
• Unit converter.
• Study timer.
• Simple notes application.

Completion test

Copy or clone the project without .venv, recreate the environment from the documented files, and run all tests.

11.2 Capstone B — Electron desktop tool

Build an Electron desktop application with:

• Main process.
• Preload script.
• Renderer HTML/CSS/JavaScript.
• contextIsolation: true.
• nodeIntegration: false.
• At least one narrow IPC method.
• Content Security Policy.
• package-lock.json.
• .gitignore excluding node_modules and build output.
• Input validation.
• README.

Suggested ideas:

• Local task tracker.
• Image-dimension viewer.
• Markdown scratchpad.
• Study-session logger.
• Simple project launcher.

Completion test

Delete node_modules, run npm ci, and confirm the app starts from the documented command.

11.3 Capstone C — Java project with build system

Build a Java application with:

• Maven or Gradle wrapper-based build.
• Selected JDK/toolchain version.
• Standard source layout.
• At least three classes.
• JUnit tests.
• One external dependency.
• Debugger use.
• README.

Suggested ideas:

• Inventory manager.
• Grade calculator.
• Library checkout model.
• Text statistics tool.
• Swing or JavaFX calculator.

Completion test

Run the full build using the wrapper or Maven command from a terminal, not only the IDE.

11.4 Capstone D — C++ native GUI

Build a Qt application with:

• CMake project.
• Documented kit/compiler.
• At least one window class.
• Multiple widgets.
• Signals and slots.
• Input validation.
• Debug and Release builds.
• Deployment notes.
• README.

Suggested ideas:

• Task list.
• Color value converter.
• Text-file viewer.
• Small image metadata viewer.
• Equipment checklist.

Completion test

Run the application outside Qt Creator and identify all runtime files required for deployment.

11.5 Capstone E — Unity environment verification project

Create a small Unity project with:

• Correct Unity editor installed through Unity Hub.
• Visual Studio integration.
• One scene.
• At least two C# components.
• A serialized field visible in the Inspector.
• A UI button that changes game state.
• One breakpoint hit while attached to Unity.
• Git ignore rules suitable for Unity.
• A standalone development build and a non-development build.
• README describing editor version and required modules.

Mark each item only after you have performed it.

• I can navigate project folders from a terminal.
• I can explain PATH.
• I can identify which executable a command uses.
• I can explain interpreter, compiler, runtime, and linker.
• I can explain package manager, manifest, lock file, and environment.
• I have created a Python virtual environment.
• I have rebuilt a Python environment from a dependency file.
• I have created a Node project with a lock file.
• I have used npm ci after removing node_modules.
• I have compiled a C or C++ program manually.
• I have built a Java project through Maven or Gradle.
• I have built and debugged a .NET project.
• I have connected Visual Studio to Unity or understand the workflow.
• I have created at least one GUI application.
• I have used a breakpoint and inspected variables.
• I have run at least one automated test.
• I have created an appropriate .gitignore.
• I have committed source and manifests without generated dependencies.
• I have written setup instructions in a README.
• I have reproduced a project from a clean environment.
• I can provide a useful technical support report.

Course conclusion

A development environment is not one application. It is a chain of tools and configuration:

source files
→ editor or IDE
→ selected runtime/compiler
→ package and build system
→ project environment
→ debugger and tests
→ build output
→ deployment runtime

When you understand each link, setup problems stop feeling random. You can ask: Which executable ran? Which environment was active? Which manifest was read? Which build configuration was selected? Which runtime library is missing? Which working directory resolved the path?

That method—not memorizing one perfect installation screen—is the durable skill this course is designed to teach.