Tech 101: The Visual Cheat Sheet Guide to Hardware, Software, and the Web

Vocabulary

• CPU (Processor) — the chip that executes instructions; every calculation your computer does happens here.
• RAM (Memory) — fast, temporary workspace. Wiped clean when the power goes off.
• Motherboard — the main circuit board that connects every component together.
• SSD / HDD (Storage) — permanent storage for files and programs. Survives power-off.
• GPU (Graphics) — a specialist chip for drawing pixels and doing many small calculations at once.

Rule of Thumb

Vocabulary

• Operating System (OS) — the manager software that runs everything else: Windows, macOS, or Linux.
• Kernel — the innermost core of the OS. Talks directly to hardware and shares it out fairly.
• Process Management — the OS juggling dozens of running programs so each gets a turn on the CPU.
• UI / GUI — the visual layer (windows, icons, cursor). Just one part of the OS, not the whole thing.

The Big Three

Vocabulary

• Directory — a folder. A container that holds files and other directories.
• Root — the very top of the tree: / on macOS/Linux, C:\ on Windows.
• Absolute Path — full directions from the root: /home/ada/notes.txt. Works from anywhere.
• Relative Path — directions from where you are now: ./notes.txt or ../other/file.txt.
• File Extension — the suffix (.txt, .py, .html) that hints at what's inside.

Path Shorthand

# the special path symbols
/        # root of the whole drive
~        # your home directory
.        # the directory you are in now
..       # one directory up
./x      # x, inside the current dir
../x     # x, in the parent dir

Vocabulary

• Terminal — the window/app where you type commands.
• CLI — Command Line Interface: controlling the computer with text instead of clicks.
• Prompt — the text (often ending in $ or %) that means "type your next command."
• Flags / Arguments — extras after a command: flags change behavior (-la), arguments say what to act on (cd projects).

Commands

pwd            # where am I?
ls             # list files here
cd projects    # move into a folder
cd ..          # move up one level
mkdir site     # make a new folder
cp a.txt b.txt # copy a file
rm old.txt     # delete — permanently!

Vocabulary

• ISP — Internet Service Provider: the company you pay for your connection.
• Router — a device that reads each packet's address and forwards it one hop closer.
• Data Packet — a small chunk of your data with a destination address stamped on it.
• TCP/IP — the shared rulebook: IP addresses and routes packets; TCP checks they all arrived and reassembles them.
• Bandwidth — how much data can flow per second (the width of the pipe, not the speed of light in it).

Commands

ping example.com
# "are you there?" — sends a tiny packet
# and times the round trip

traceroute example.com
# show every router hop on the way

Vocabulary

• HTTP / HTTPS — the language browsers and servers speak. The S means the conversation is encrypted.
• DNS — Domain Name System: the phonebook that maps readable names to IP addresses.
• URL — the full address: https://site.com/page?q=hi (protocol + domain + path + query).
• IP Address — the numeric address of a machine, like 142.250.4.101.
• Browser — the app that sends requests and turns the HTML/CSS/JS answer into pixels.

Anatomy of a URL

https://code.hibot.space/learn.html?tier=2
└protocol └domain (DNS looks this up)
          └path on the server
                     └query string

Vocabulary

• Server — a computer whose job is to answer requests. Physical, not magical.
• Client — any device asking for something: your browser, your phone, another server.
• Web Host — a company that rents you space on their servers so your site is always online.
• Port — a numbered door on a server: 80 for HTTP, 443 for HTTPS, 22 for SSH.
• Localhost — your own machine acting as a server, reachable at 127.0.0.1.

Hosting Flavors

Static hosting
# pre-made files served as-is
# (GitHub Pages, Netlify, Vercel)

Dynamic hosting
# a program builds each response
# (Railway, a VPS, the cloud)

python3 -m http.server 8000
# your laptop is now a web server
# visit http://localhost:8000

Vocabulary

• Variable — a named box that holds a value: score = 10.
• Function — a reusable, named block of instructions you can call with inputs.
• Loop — "repeat this block" — for each item, or while a condition holds.
• Conditional (if/else) — "do this only when that is true; otherwise do something else."
• Syntax — the grammar rules of the language. Break them and the code won't even start.

The Universal Pattern

if (x > 5) { doSomething(); }

# every language has some form of:
#   store data      → variables
#   make decisions  → if / else
#   repeat work     → loops
#   name and reuse  → functions

Vocabulary

• Array / List — an ordered row of values, addressed by number (index), starting at 0.
• Object / Dictionary — a collection of key → value pairs, addressed by name.
• String — text in quotes: "hello".
• Integer — a whole number: 42.
• Boolean — exactly true or false. Powers every if/else.

Code

// array: ordered, indexed from 0
let arr = [1, 2, 3];
arr[0]            // 1  (not 2!)
arr.length        // 3

// object: labeled values
let user = { name: "Ada", age: 36 };
user.name         // "Ada"

Vocabulary

• IDE — Integrated Development Environment (like VS Code): editor + terminal + debugger in one app.
• Text Editor — a plain-text writing tool. Code must be plain text — no fonts, no formatting.
• Debugger — a tool that pauses your program mid-run so you can inspect variables line by line.
• Syntax Highlighting — coloring code by meaning so mistakes jump out visually.

Starter Kit

Vocabulary

• Frontend — everything rendered in the user's browser: layout, styling, interactivity.
• Backend — the code running on servers: business logic, databases, authentication.
• Full-Stack — a developer (or app) that spans both sides.
• Client-Side — code that executes on the visitor's device.
• Server-Side — code that executes on the server before a response is sent.

Who Does What

Frontend
HTML  # structure  (the skeleton)
CSS   # style      (the outfit)
JS    # behavior   (the muscles)

Backend
Python/Node  # the logic
Database     # the memory
Server       # the venue

Vocabulary

• API — a published contract for how one program can ask another for things.
• Endpoint — one specific URL you can call, like /v1/weather.
• JSON — the standard package format: readable text of keys and values.
• REST — the most common API style: URLs name things, HTTP methods say what to do to them.
• HTTP Methods — GET read · POST create · PUT update · DELETE remove.

Code

// call an API from JavaScript
fetch('https://api.example.com/data')
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(err => showError(err));

# or from the command line
curl https://api.example.com/data

Vocabulary

• Repository (Repo) — a project folder that Git is watching, history included.
• Commit — one saved snapshot of your project, with a message saying what changed.
• Staging Area — the "on deck" zone: only staged changes go into the next commit.
• Version Control — the general practice of recording every change so nothing is ever lost.

Commands

git init            # start tracking this folder
git status          # what changed? what's staged?
git add .           # stage everything
git commit -m "add login page"
git log             # show the snapshot history

Vocabulary

• Branch — a parallel line of development; changes there don't touch anything else.
• Main / Master — the trunk line: the version that should always work.
• Merge — folding one branch's commits into another.
• Merge Conflict — two branches edited the same lines; Git asks a human to choose.

Commands

git branch feature/login   # create
git checkout feature/login # switch to it
# ...commit your work...
git checkout main          # back to trunk
git merge feature/login    # fold it in

Vocabulary

• Remote — a copy of the repo hosted elsewhere (usually GitHub), nicknamed origin.
• Clone — download a full copy of a remote repo, history and all.
• Push / Pull — send your commits up / fetch everyone else's down.
• Pull Request (PR) — "please review and merge my branch" — where code review happens.
• Fork — your own copy of someone else's repo, to change freely.

Commands

git clone https://github.com/user/repo.git
git pull              # get latest first
git push origin main  # share your commits
# then open a Pull Request on github.com

Vocabulary

• SDLC — the six-phase cycle: plan → design → develop → test → deploy → maintain.
• Agile — working in short loops (sprints), shipping small pieces and adjusting.
• Waterfall — the older style: finish each phase completely before the next begins.
• Sprint — one short Agile cycle, usually 1–2 weeks.
• Requirements — the agreed list of what the software must do, written before building.

What Each Phase Asks

Vocabulary

• CI (Continuous Integration) — every commit is automatically built and tested.
• CD (Continuous Deployment) — commits that pass every test go live automatically.
• Pipeline — the ordered sequence of automated steps a commit travels through.
• Automated Testing — code that checks the code, on every single change.
• Deployment — the moment new code starts serving real users.

A Minimal Pipeline

# .github/workflows/ci.yml (GitHub Actions)
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm test   # the gate

Vocabulary

• Cloud — someone else's data center, rented by the minute over the internet.
• IaaS — Infrastructure as a Service: raw virtual machines; you install and manage everything.
• PaaS — Platform as a Service: you push code; the platform handles servers, scaling, and TLS.
• SaaS — Software as a Service: finished apps you just use in the browser.
• Scaling — adding capacity when traffic grows: a bigger machine (up) or more machines (out).

The Pizza Analogy