A quick reference for the languages of the web, data, and the command line — plus the tools and protocols that connect them. What each one is, how it runs, and the syntax you actually use. Built to grow: ask Claude to add a language and this page updates in place.
Not everything here is a "programming language" in the strict sense — and the differences matter. Markup languages describe structure and formatting; style sheet languages describe appearance; programming languages give the computer instructions; query languages ask questions of stored data; data formats carry information between systems.
Language
Kind
First appeared
Runs where
Best at
Files
HTML
Markup
1991
Any web browser
The structure and content of web pages
.html
CSS
Style sheet
1996
Any web browser
The look and layout of web pages
.css
JavaScript
Programming
1995
Browsers + Node.js
Interactivity on pages; full web apps
.js
Python
Programming
1991
Anywhere with the Python interpreter
Automation, data analysis, servers, scripting
.py
SQL
Query
1974
Inside database engines & warehouses
Storing, filtering, and summarizing data
.sql
Shell (Bash)
Command + scripting
1989
Terminal on Linux / macOS (WSL on Windows)
Controlling the computer; chaining tools
.sh
Markdown
Lightweight markup
2004
Anywhere text is rendered (GitHub, docs, chat)
Formatted writing in plain text
.md
JSON
Data format
2001
Everywhere data moves (APIs, configs)
Exchanging structured data
.json
YAML
Data format
2001
Config files (Docker, CI/CD, settings)
Human-friendly configuration
.yml
Where each language lives. A typical web request touches all four zones: the browser renders HTML/CSS/JS, the server runs Python, the database answers in SQL, and the shell manages the machines underneath.
Which language does the job?
You want to…
Reach for
Why
Put content on a web page
HTML
Every page is an HTML document; everything else attaches to it
Change how a page looks
CSS
Colors, fonts, spacing, and layout are all CSS's job
JSON's job, but easier for humans to read and edit
Tools & protocols in this codebook
Four tabs aren't languages at all — they're the connective tissue every developer and ops person works in daily. One more is a tool for taking apart code you meet:
Tab
What it is
Why it's here
Git
Version control system (2005)
How code is saved, shared, and un-broken — the first tool you touch on any project
HTTP & APIs
The web's request/response protocol
The glue between browser, server, and every API; status codes are the web's vital signs
Networking
IPs, ports, DNS, TLS
The plumbing underneath everything — and the first place things break in ops
Regex
Pattern-matching mini-language
Lives inside JS, Python, SQL, and grep; one syntax, used everywhere
Code Explainer
Interactive tool
Paste any command or snippet; every piece gets a number, a plain-English job, and the safety habits that apply
Reading an error message — the most valuable skill on this page
Errors aren't scoldings; they're the computer telling you exactly where it gave up. Every language formats them differently, but the recipe is the same: find the error type, the message, and the file + line number — then read your own code at that line.
Traceback (most recent call last):
File "report.py", line 12, in <module>
total = price * qty ← the line that failed
NameError: name 'qty' is not defined
└ type ────┘└──────── message ────────┘
Python: read BOTTOM-UP. Last line = what
went wrong; lines above = where. A long
"traceback" is just the trail of function
calls that led there — yours are usually
near the bottom.
Uncaught TypeError: Cannot read
properties of null (reading 'value')
at save (app.js:24:31)
└ file ┘ └ line:column
JavaScript (browser console, F12):
read TOP-DOWN. "null" errors almost
always mean querySelector found
nothing — check the selector first.
SQL & shell errors are one-liners:
syntax error at or near "FORM"
command not found: pyhton
— both are usually typos. Read the
exact word the error quotes.
The debugging recipe: read the error type + message aloud → go to the file and line it names → if it still makes no sense, paste the entire error into a search or into Claude. Never paraphrase an error; the exact wording is the clue.
How to read this codebook
Each language tab follows the same pattern, so the layout itself becomes familiar:
At a glance
Type, purpose, origin, where it runs, and its codependent languages — the identity card
Ground rules
The syntax rules that apply to everything in the language: comments, case, how blocks work
Anatomy diagram
One labeled picture of the language's core construct
Reference tables
Common tags / keywords / commands grouped by category, each with a plain-English job and an example
Watch out
The mistakes every beginner makes once — so you only make them once
HTML
HyperText Markup Language
The skeleton of every web page. HTML doesn't compute anything — it marks up content with tags so the browser knows what each piece is: a heading, a paragraph, a link, an image.
TypeMarkup languageOrigin1991, Tim Berners-Lee (CERN)StandardWHATWG "living standard"Runs onAny web browserFiles.html .htm
Purpose
Define the structure and content of web pages and apps — the one format every browser understands
Use cases
Websites, web apps, email templates, browser-based UIs, this very document
How it runs
No compiler, no installs: the browser reads the file top-to-bottom and renders it. Save as .html, double-click, done.
Codependent with
CSS (styles it) and JavaScript (makes it interactive) — the three are designed as a trio. Markdown converts to HTML.
Current version
"HTML5" era — versionless living standard since 2019
Ground rules
Tags
Content wrapped in angle-bracket tags: <p>text</p>. Most tags come in open/close pairs.
Void elements
Some tags stand alone with no closing tag: <img>, <br>, <hr>, <input>, <meta>, <link>
Attributes
Extra settings inside the opening tag: name="value", always double-quoted by convention
Case
Not case-sensitive, but lowercase is the universal convention
Comments
<!-- ignored by the browser -->
Required skeleton
Start with <!DOCTYPE html>, then <html> containing <head> (info about the page) and <body> (visible content)
Nesting
Tags close in reverse order opened: <b><i>text</i></b> ✓ — never interleaved
Anatomy of an element — the pattern behind every tag in the tables below.
Watch out: unclosed tags break layout in confusing ways · class can repeat across elements, id must be unique · semantic tags (<nav>, <main>) beat a page of anonymous <div>s for accessibility and SEO · always fill in alt on images.
CSS
Cascading Style Sheets
The wardrobe and floor plan of the web. CSS takes the structure HTML provides and decides how it looks — colors, fonts, spacing, and where everything sits on the screen.
Separate presentation from content — one stylesheet can reskin a thousand pages
Use cases
Web page styling, responsive mobile layouts, print styles, animations, design systems
How it runs
The browser reads style rules and applies them to matching HTML elements as it renders. Three ways in: an external .css file via <link> (best), a <style> block, or an inline style="" attribute (last resort).
Codependent with
HTML — CSS has nothing to style without it. JavaScript often toggles CSS classes to animate state changes.
The "cascade"
When rules conflict, the winner is decided by specificity (inline > #id > .class > element) and, on ties, whichever rule comes last
Ground rules
Rule shape
selector { property: value; } — find elements, then declare styles for them
Declarations
End each property: value pair with a semicolon; colon between property and value
Comments
/* only this form — no // in CSS */
Case
Properties are lowercase; class/id names are case-sensitive because HTML attributes are matched exactly
Units
px fixed · % of parent · em/rem relative to font size · vw/vh % of screen
Anatomy of a rule — every stylesheet is a stack of these.The box model — every element is these four nested layers. box-sizing: border-box makes width include padding + border.
Selectors — finding the elements to style
Selector
What it matches
Example
p
Every element of that tag type
p { line-height: 1.5; }
.card
Everything with class="card" — reusable
.card { border: 1px solid gray; }
#logo
The one element with id="logo"
#logo { height: 40px; }
nav a
Descendant: <a> anywhere inside <nav>
nav a { color: white; }
ul > li
Direct children only
ul > li { margin: 4px; }
h1, h2
Either one — comma means "and also"
h1, h2 { font-weight: 700; }
a:hover
State ("pseudo-class"): mouse over; also :focus, :first-child, :nth-child(2)
a:hover { text-decoration: underline; }
p::first-line
Part of an element ("pseudo-element"); also ::before, ::after
p::first-line { font-weight: 600; }
*
Everything (use sparingly)
* { box-sizing: border-box; }
Properties — text & color
Property
What it does
Example
color
Text color
color: #1a1c1e;
background
Background color, image, or gradient
background: #f3f4f6;
font-family
Typeface, with fallbacks left to right
font-family: Georgia, serif;
font-size
Text size
font-size: 1.1rem;
font-weight
Thickness: 400 normal, 700 bold
font-weight: 600;
line-height
Vertical space between lines
line-height: 1.5;
text-align
left · center · right · justify
text-align: center;
text-decoration
Underlines and strikethroughs
text-decoration: none;
Properties — the box
Property
What it does
Example
widthheight
Box dimensions; max-width caps growth
max-width: 700px;
padding
Space inside the border
padding: 8px 16px;(vertical, horizontal)
margin
Space outside the border; margin: 0 auto centers a block
margin: 0 auto;
border
Width, style, color in one line
border: 1px solid #d6d9dc;
border-radius
Rounds the corners
border-radius: 6px;
box-shadow
Drop shadow: x, y, blur, color
box-shadow: 0 2px 6px rgb(0 0 0 / .15);
overflow
What happens when content doesn't fit: hidden, scroll, auto
overflow-x: auto;
Properties — layout & responsive
Property
What it does
Example
display
How the box behaves: block (full-width), inline (in-text), flex, grid, none (removed)
display: flex;
display: flex
One-direction layout; children line up in a row or column
display: flex; gap: 12px;
justify-content
Flex: spacing along the main axis
justify-content: space-between;
align-items
Flex: alignment on the cross axis
align-items: center;
display: grid
Two-dimensional layout in rows and columns
grid-template-columns: 1fr 2fr;
gap
Space between flex/grid children — cleaner than margins
Apply rules only at certain screen sizes — the heart of responsive design
@media (max-width: 600px) { nav { display: none; } }
Watch out: a more specific selector silently beats yours — check specificity before assuming a rule is "broken" · margin between stacked elements collapses to the larger value, it doesn't add · start every project with box-sizing: border-box · display: none removes; visibility: hidden hides but keeps the space.
JavaScript
standardized as ECMAScript (ES)
The web's engine room. HTML says what's on the page, CSS how it looks — JavaScript makes it do things: respond to clicks, fetch data, update the page without reloading. Despite the name, it is unrelated to Java.
Print to the browser console (F12) — debugging tool #1
console.log("total:", total);
fetch() + await
Request data over the network; await pauses until it arrives (inside an async function)
const r = await fetch(url); const data = await r.json();
JSON.parse() / stringify()
JSON text → object / object → JSON text
JSON.parse('{"a":1}').a // 1
map / filter / reduce
Transform / keep-some / boil-down an array without a loop
prices.filter(p => p < 20)
setTimeout()
Run a function after a delay (milliseconds)
setTimeout(hide, 3000);
import / export
Modules: split code across files. export shares, import pulls in. In pages, needs <script type="module">.
import { area } from "./math.js";
npm
Node's package manager: npm install reads package.json (the project's package list) into node_modules/ — how every real JS project is set up
npm install; npm run dev
Watch out:== converts types before comparing ("5" == 5 is true) — use === · const stops reassignment, not mutation: you can still push to a const array · arrays and objects are copied by reference, so two names can point at the same data · a <script> at the top of the page runs before the HTML below it exists — put it at the end of <body> or use the defer attribute.
Python
named after Monty Python, not the snake
The most readable general-purpose language — often described as "executable pseudocode." The go-to for automation, data analysis, and learning to program, because the syntax gets out of your way.
TypeProgramming — general-purpose, dynamically typedOrigin1991, Guido van RossumStewardPython Software FoundationRuns onWindows / macOS / Linux via the interpreterFiles.py .ipynb (notebooks)
Purpose
A single readable language that stretches from ten-line scripts to production systems
Use cases
Automation & scripting, data analysis (pandas), AI/ML, web backends (Django, Flask), spreadsheet wrangling, glue between other tools
How it runs
Interpreted: python3 script.py in a terminal. Comes with macOS/Linux; free from python.org for Windows. Interactive mode (type python3 alone) lets you experiment line by line; Jupyter notebooks mix code with notes.
Related languages
Talks to SQL databases, gets launched from the Shell, reads/writes JSON, YAML & CSV constantly; its C extensions power the fast math libraries
Python 3.x only — Python 2 is long dead; ignore tutorials that print "like this"
Ground rules
Indentation IS structure
Blocks are defined by indenting (4 spaces standard) — no braces. Wrong indent = different program or an error.
Colons open blocks
Lines that introduce a block end with : — if x > 5:, def f():, for i in items:
Statements
One per line; no semicolons needed
Case
Case-sensitive; snake_case for variables/functions, CapWords for classes
Comments
# one line · triple-quoted """docstrings""" document functions
Variables
No declaration keyword — x = 5 creates x; type is inferred and can change
Indentation replaces braces: how far a line is indented decides which block owns it.
Variables & data types
Type
What it is
Example
int / float
Whole numbers / decimals
count = 3; ph = 7.4
str
Text; f-strings embed values
f"pH is {ph}"
bool
True or False — capitalized!
is_safe = True
list
Ordered, changeable collection
tanks = ["55g", "29g"]; tanks[0]
dict
Key–value pairs — Python's workhorse
dog = {"name": "Bella"}; dog["name"]
tuple
Ordered and unchangeable
point = (3, 4)
set
Unordered, no duplicates
seen = {"a", "b"}
None
Deliberate "no value"
result = None
Operators
Operator
What it does
Example
+ - * / % **
Math; / always gives a float, // floors, ** is power
7 // 2 # 3 · 2 ** 10 # 1024
== !=
Equal / not equal (one = assigns)
ph == 7.0
and or not
Logic — written as words
is_open and not is_full
in
Membership test — works on lists, strings, dicts
"55g" in tanks # True
slicing
Cut sequences: [start:stop], stop excluded; negatives count from the end
name[0:3] · items[-1]
Control flow
Construct
What it does
Example
if / elif / else
Branching — note elif, not "else if"
if ph < 6.5: … elif ph < 7.5: … else: …
for … in
Loop over each item of any collection
for tank in tanks: print(tank)
range()
Generate numbers to loop over; stop excluded
for i in range(5): # 0..4
while
Loop while a condition holds
while n < 100: n *= 2
break / continue
Exit loop / skip to next pass
if found: break
try / except
Attempt code that may fail; handle the error
try: int(text) except ValueError: …
Functions, imports & built-ins
Tool
What it does
Example
def
Define a function; return hands back the result
def area(w, h): return w * h
default args
Parameters with fallbacks; call by name for clarity
def greet(name="friend"): … · greet(name="Jim")
import
Load a module from the standard library or pip
import csv · from math import sqrt
print() / input()
Show output / ask the user for text
name = input("Name? "); print("Hi", name)
len() / type()
Count items / inspect a value's type
len(tanks) # 2
int() str() float()
Convert between types — input() always gives text!
age = int(input("Age? "))
open()
Read or write files; with closes them automatically
with open("log.txt") as f: text = f.read()
.append() / sorted()
Add to a list / get a sorted copy of anything
tanks.append("10g"); sorted(prices)
list comprehension
Build a filtered/transformed list in one readable line — very Pythonic
doubles = [x * 2 for x in nums if x > 0]
class
Define your own type bundling data + behavior (object-oriented Python)
class Tank: def __init__(self, gal): self.gal = gal
Environments & packages — actually running Python
Real projects isolate their packages in a virtual environment so project A's library versions can't break project B. The ritual, once per project:
Command
What it does
python3 -m venv .venv
Create the environment (a .venv folder inside your project)
source .venv/bin/activate
Turn it on — your prompt grows a (.venv) prefix and pip/python now point inside it (Windows: .venv\Scripts\activate)
pip install pandas
Install a package into the active environment only
pip freeze > requirements.txt
Snapshot your exact package list to a file others (or future-you) can restore with pip install -r requirements.txt
deactivate
Switch the environment off
Watch out: mixing tabs and spaces breaks indentation — set your editor to spaces · = assigns, == compares · list indexes start at 0 and range(5) stops at 4 · True/False/None are capitalized · copying a list with b = a copies the reference; use b = a.copy() for a real copy.
SQL
Structured Query Language — "sequel" or "S-Q-L", both correct
The language of data. SQL is declarative: you describe the result you want — which rows, filtered how, summarized how — and the database engine works out the fastest way to get it.
TypeQuery language — declarative, domain-specificOrigin1974, Chamberlin & Boyce (IBM)StandardANSI/ISO SQLRuns onInside a database engine or warehouseFiles.sql
Purpose
Create, read, update, and delete data in relational databases — data organized into tables of rows and columns, linked by keys
Use cases
Business reporting, app backends, accounting & ERP systems, analytics, any "how many / how much / which ones" question about stored data
How it runs
SQL never runs alone — you send statements to an engine: SQLite (single file, great for learning), PostgreSQL / MySQL (servers), SQL Server / Oracle (enterprise), or cloud warehouses like Snowflake and BigQuery
Related languages
Python and JavaScript apps send SQL to databases; results often travel onward as JSON
A query inside a query — its result feeds the outer one
SELECT name FROM customers WHERE id IN (SELECT customer_id FROM orders WHERE total > 500);
WITH (CTE)
Name a sub-result, then use it like a table — readable subqueries. Chain several for step-by-step logic.
WITH big AS (SELECT * FROM orders WHERE total > 500) SELECT COUNT(*) FROM big;
CASE WHEN
If/else inside a query — build labeled columns
SELECT total, CASE WHEN total > 500 THEN 'big' ELSE 'small' END AS size
Window functions
Aggregate without collapsing rows — running totals, rankings per group
SELECT name, total, RANK() OVER (ORDER BY total DESC) AS rk
PRIMARY KEY / FOREIGN KEY
PK: each row's unique ID. FK: a column that points at another table's PK — how tables relate.
customer_id INTEGER REFERENCES customers(id)
CREATE INDEX
A lookup structure that makes filtering/joining on a column fast — the #1 fix for a slow query. Costs a little on every write, so index what you search, not everything.
CREATE INDEX idx_orders_customer ON orders(customer_id);
Transactions
Group statements so they succeed or fail together — the accounting classic: a transfer must debit AND credit, never just one
BEGIN; UPDATE acct SET bal = bal - 100 WHERE id = 1; UPDATE acct SET bal = bal + 100 WHERE id = 2; COMMIT; — or ROLLBACK; to undo all of it
EXPLAIN
Ask the engine how it plans to run your query — the diagnosis tool for slowness
EXPLAIN SELECT …;
SQL injection — the security lesson: never build a query by gluing user input into the SQL string. If an app runs "… WHERE name = '" + userInput + "'" and someone types '; DROP TABLE orders; --, that becomes part of the query. The fix is parameterized queries: write placeholders and let the driver pass values safely — Python: cur.execute("SELECT * FROM users WHERE name = ?", (name,)). Every language's database library supports this; there is never a good reason to concatenate.
Dialects — one language, many accents (incl. Snowflake)
Snowflake isn't a language — it's a cloud data warehouse, and the language you speak to it is SQL. Its dialect is close to the ANSI standard with analytics extras (QUALIFY for filtering window functions, FLATTEN for JSON, "time travel" to query past data). Learn standard SQL and you're ~95% of the way to Snowflake, Postgres, and the rest.
Engine
Kind
Notable dialect quirks
SQLite
Embedded single-file DB
Loose typing; perfect for learning and small apps (it's inside your phone)
PostgreSQL
Open-source server
Closest to the standard; rich types (JSON, arrays); ILIKE for case-insensitive match
MySQL / MariaDB
Open-source server
Backtick `identifiers`; ubiquitous in web hosting
SQL Server (T-SQL)
Microsoft enterprise
TOP 10 instead of LIMIT; [bracket] identifiers; common in accounting/ERP shops
Snowflake
Cloud warehouse
ANSI + QUALIFY, semi-structured data via VARIANT/FLATTEN, zero-copy cloning, time travel
BigQuery
Cloud warehouse
GoogleSQL dialect; billed by data scanned — SELECT * costs real money
Watch out: an UPDATE or DELETE without a WHERE hits every row — no undo · NULL = NULL is not true; use IS NULL · WHERE filters rows, HAVING filters groups · joining without a proper ON multiplies rows explosively.
Shell
Bash — the Bourne Again SHell
Your direct line to the operating system. The shell is both an interactive command line — type a command, get a result — and a scripting language for gluing programs together into automated pipelines.
TypeCommand language + scriptingOrigin1989, Brian Fox (GNU) — successor to Bourne's 1979 shRuns onLinux & macOS terminals · Windows via WSL or Git BashFiles.sh
Purpose
Navigate the filesystem, run and combine programs, automate repetitive machine tasks
Use cases
File wrangling, installs, server admin, deploy scripts, cron jobs, searching huge logs in seconds
How it runs
Open a terminal app and it's already running, waiting at the prompt ($). Scripts: save commands to deploy.sh, run bash deploy.sh.
Relatives
zsh — macOS's default, Bash-compatible for everything here · PowerShell — Windows' native shell, different syntax · Python — the better tool once a script passes ~50 lines
Command shape
program -flags arguments → e.g. ls -la /home — flags tweak behavior, arguments say what to act on
Ground rules
Case & spaces
Case-sensitive, and spaces separate arguments — file name.txt is two arguments unless quoted "file name.txt"
Comments
# everything after the hash
Variables
NAME=value with no spaces around =; read back with $NAME
Shebang
Scripts start with #!/bin/bash so the OS knows what runs them
Paths
/ root · ~ your home folder · . here · .. one level up
Exit codes
Every command reports success (0) or failure (non-zero) — && chains on success
The pipeline: small programs chained by |, each doing one job well.
Commands — navigating
Command
What it does
Example
pwd
Print which folder you're in
pwd → /home/james
ls
List contents; -l details, -a hidden files
ls -la
cd
Change folder; cd alone goes home
cd ~/projects
mkdir
Make a folder; -p creates the whole path
mkdir -p reports/2026
Commands — files
Command
What it does
Example
cp
Copy; -r for folders
cp report.txt backup/
mv
Move — and also how you rename
mv draft.txt final.txt
rm
Delete — permanently, no trash; -r for folders
rm old.txt
touch
Create an empty file
touch notes.md
cat
Print a whole file; less pages through big ones (q quits)
Run one command as administrator — think before you type it
sudo apt install git
man / which
Manual for any command / where a program lives
man grep
echo
Print text or a variable
echo "Done: $FILE"
Pipes, redirection & chaining
Symbol
What it does
Example
|
Pipe: send one command's output into the next
ls | wc -l
>
Write output to a file (overwrites!)
ls > files.txt
>>
Append to a file instead
echo "row" >> log.txt
<
Feed a file in as input
sort < names.txt
&&
Run the next command only if the last succeeded
mkdir out && cd out
*
Wildcard: matches any characters in filenames
rm *.tmp
Scripting basics
Construct
What it does
Example
variables
Set and use; $(…) captures a command's output
TODAY=$(date +%F); echo $TODAY
if
Branch; [ ] is the test — spaces required inside
if [ -f "$FILE" ]; then echo "exists"; fi
for
Loop over files or values
for f in *.csv; do wc -l "$f"; done
$1 $2 …
Arguments passed to your script
bash backup.sh reports # $1 = reports
The ops toolkit — remote, scheduled & packaged
Command
What it does
Example
ssh
Open a secure shell on another machine — how all servers are administered. Key-based login (ssh-keygen) beats passwords.
ssh james@server.example.com
scp
Copy files over SSH (also rsync for smart syncing)
scp report.pdf james@server:/backups/
curl
Make an HTTP request from the terminal — test APIs, download files, check if a site is up. -I = headers only.
curl -I https://example.com
cron
Run a command on a schedule. crontab -e edits your jobs; each line is five time fields + a command: minute, hour, day-of-month, month, day-of-week (* = every).
0 6 * * 1 bash ~/backup.sh(Mondays 6:00am)
tar
Bundle + compress folders: -czf creates a .tar.gz, -xzf extracts one
tar -czf logs.tar.gz logs/
apt / brew
Package managers — install software from the command line (apt on Debian/Ubuntu Linux, Homebrew on macOS)
brew install python
df -h / du -sh
Disk space free / how big is this folder — the "server is full" first responders
du -sh ~/Downloads
top
Live view of CPU/memory by process (q quits); htop is the nicer version
top
Environment variables, PATH & permissions decoded
Environment variables
Named values every program can read — config that lives outside your code. export API_KEY=abc123 sets one for this session; env lists them all; put exports in ~/.bashrc / ~/.zshrc to make them permanent. Apps read secrets this way instead of hard-coding them.
PATH
The list of folders the shell searches when you type a command. command not found almost always means the program isn't installed or its folder isn't on PATH. See it with echo $PATH; find where a command lives with which python3.
Permissions
Every file has read/write/execute rights for owner, group, and everyone: rwxr-xr--. Each trio is a number — r=4, w=2, x=1, added up — so rwx=7, r-x=5, r--=4, and chmod 755 deploy.sh means "owner: everything; everyone else: read + run." ls -l shows them; 644 is the normal file default, 755 for scripts and folders.
Watch out:rm is forever — there is no undo and no recycle bin · one stray space (rm -r / tmp) can be catastrophic; read destructive commands twice · always quote variables that might contain spaces: "$FILE" · > silently overwrites; you probably meant >> · macOS defaults to zsh — everything on this page still works.
Code Explainer
paste a command or snippet · get every piece numbered and explainedLive AI · written by Claude
The fastest way to learn syntax is to take apart code you actually meet: an install line from a README, a command Claude hands you, a query a coworker sent. Paste it here and each piece gets a number that matches a row in the legend, plus a plain-English summary, the same job written as an instruction to a person, and the safety habits that apply.
TypeInteractive toolReadsShell, Git, SQL, Python, JavaScript, regex, config…EngineClaude for live breakdowns · hand-written examplesRunsNothing — it only explains
Break down a command or snippet
0 / 6000
Worked examples
This looks like it contains a secret (). Anything you send is read by Claude, so keys, tokens and passwords should never be in it.
Claude is writing
Join free for more breakdowns
That’s today’s free live breakdowns. Members get more every day with one Google sign-in, and the pasted code is never stored. The worked examples above stay open to everyone.
Where the answers come from: the four worked examples are hand-written and work on every copy of this page. Live breakdowns are written by Claude and appear on copies where the explainer is switched on; you'll be asked for permission before the first one. Because live breakdowns are generated, confirm the key flags with man <command> or <command> --help before you run anything marked Caution or Danger.
How to read a breakdown
Numbered code
Each piece of the code carries a small number. Hover or tap a number and its legend row lights up, and the other way round.
Legend
What it is: the piece's job in plain words, with acronyms spelled out. Why it matters: what changes if it's missing, or what it protects you from.
Risk
Low risk: reads or displays only. Caution: changes files or state, publishes something, or runs downloaded code from a trusted source. Danger: deletes or overwrites in bulk, runs as administrator, or is hard to undo.
In plain English
What the whole thing does, in one or two sentences.
Instruction to a person
The same job, phrased the way you'd ask an assistant to do it by hand. If you couldn't say that sentence out loud, you're not ready to run the command.
Safer way to run it
A version with a preview step, narrower scope, or a check first. It's left out when the code already follows the safe pattern.
Safety habits for any code you didn't write
Habit
What to do
Why
Read before you run
Save a script instead of piping it: curl -fsSL URL -o install.sh, read it with less install.sh, then bash install.sh
A pipe into bash runs code you never saw, with your account's permissions
Spot the destructive verbs
Slow down at rm, >, mv onto an existing name, git reset --hard, push --force, DROP, and DELETE or UPDATE without WHERE
None of them has an undo
Treat sudo as a red flag
Only use sudo when the official docs say the step needs it
It runs the whole command as administrator, typos included
Preview first
Use the dry-run flag where one exists (rsync -n, git clean -n); run a SELECT with the same WHERE before a DELETE
You see exactly what will be hit before anything changes
Quote paths and variables
"$FILE", "My Folder/notes.txt"
An unquoted space splits one path into two arguments, and the command acts on the wrong thing
Keep secrets out of commands
Put keys in environment variables or a .env file listed in .gitignore. Never paste them into chats, forums or tools like this one.
Typed secrets land in your shell history (~/.zsh_history on a Mac) and in anything you paste them into
Paste into a text editor first
Before running a command copied from a website, paste it somewhere plain and read it
A page can hide extra text in what you copy ("pastejacking"), including a line break that runs it the moment you paste
Have an undo plan
Commit or back up before a big change; know how you'd reverse it
"How do I get back?" is easier to answer before, not after
Watch out: never paste passwords, API keys or tokens into an explainer or a chat. This page catches the common formats and offers to redact them, but it can't catch everything · a Low risk rating isn't permission to run code you don't understand · a breakdown describes what the code is supposed to do; the URL, file or database it points at can still surprise you · the explainer never runs anything, so trying a breakdown is always safe.
Git
distributed version control — not a language, but tool #1
A time machine for your files. Git records snapshots (commits) of a project so you can see every change, undo anything, try ideas on side branches, and collaborate without overwriting each other. GitHub is a website that hosts Git repositories — related, not the same thing.
TypeVersion control systemOrigin2005, Linus Torvalds (built to manage Linux)Runs onAny OS, from the shell (git CLI) or GUIsHostsGitHub · GitLab · Bitbucket
Purpose
Full history of a project, safe experimentation, and the standard mechanism for teams to merge work
Use cases
All software, but also docs, configs, infrastructure files — anything text-based worth tracking
How it runs
A repository ("repo") is just a folder with a hidden .git subfolder holding the entire history. Commands run in the shell from inside that folder.
Core vocabulary
commit — one saved snapshot with a message · branch — an independent line of work · merge — combine branches · remote — the copy on a server · clone — download a repo · pull request (PR) — GitHub's "please review & merge my branch"
Git's four zones — every command below moves changes between them.
Starting out
Command
What it does
Example
git init
Turn the current folder into a repo
git init
git clone
Download an existing repo, history and all
git clone https://github.com/user/proj.git
git status
What's changed, what's staged — run it constantly
git status
git log
Browse the commit history; --oneline for the compact view
git log --oneline
The everyday loop
Command
What it does
Example
git add
Stage changes for the next commit; . = everything changed
git add report.py
git commit
Snapshot what's staged, with a message saying why
git commit -m "Fix tax rounding"
git push
Upload your new commits to the remote
git push
git pull
Download others' commits and merge them into your copy — do this before you start working
git pull
git diff
Show exactly what changed, line by line; --staged for what's about to commit
git diff
Branching & merging
Command
What it does
Example
git branch
List branches (* marks yours); the default is main
git branch
git switch -c
Create and jump to a new branch (older tutorials say checkout -b — same thing)
git switch -c fix-login
git merge
Fold another branch's commits into the current one
git switch main; git merge fix-login
merge conflict
When both branches changed the same lines, Git marks the file with <<<<<<< / >>>>>>>; you edit to keep what's right, then add + commit. Annoying, normal, fixable.
—
git stash
Shelve uncommitted changes to come back to (stash pop restores)
git stash
Undoing things — safely
Command
What it does
Example
git restore
Throw away uncommitted edits to a file (back to last commit)
git restore report.py
git restore --staged
Un-stage a file without losing the edits
git restore --staged report.py
git revert
Undo a commit by adding a new opposite commit — history stays intact; the safe choice on shared branches
git revert a1b2c3d
git reset --hard
Rewind the branch and destroy changes since — powerful, dangerous, mostly for local mistakes
git reset --hard HEAD~1
.gitignore
A file listing paths Git should never track — build output, .venv/, node_modules/, and every secret
echo ".venv/" >> .gitignore
Watch out: commit small and often — a commit is free, and un-losing work later depends on it · never commit passwords or API keys; a secret pushed to GitHub is compromised even if you delete it next commit (the history remembers) · pull before push to avoid rejected pushes · "detached HEAD" sounds fatal but just means you're viewing an old commit — git switch main gets you back.
HTTP & APIs
HyperText Transfer Protocol — how everything on the web talks
Every page load, form submit, and app sync is the same conversation: a client sends a request, a server sends back a response. An API — Application Programming Interface — is any defined way for one program to use another; on the web it means a server that answers with data (usually JSON) instead of pages, so programs can talk to it.
TypeProtocol (rules of conversation, not a language)Origin1991, Tim Berners-Lee; HTTP/1.1 1997 · /2 2015 · /3 2022StandardIETF RFCsHTTPS= HTTP wrapped in TLS encryption
Shape of it
Request: method + URL + headers (+ sometimes a body). Response: status code + headers + body. One exchange, then done.
Stateless
The server forgets you between requests — cookies and tokens exist precisely to remind it who you are
REST
The common API style: URLs name things (/customers/42), methods say what to do to them, answers come back as JSON
Try it yourself
Shell: curl https://api.github.com/users/octocat · JS: fetch(url) · Python: requests.get(url) · or just DevTools (F12) → Network tab while browsing
Anatomy of a URL — every piece has a job.
Methods — the verbs
Method
What it means
Typical use
GET
Read — fetch a resource, change nothing
Loading a page; GET /products/42
POST
Create — send new data in the request body
Submitting a form; POST /orders
PUT / PATCH
Update — replace a resource entirely / change part of it
PATCH /customers/42 with {"city": "Orlando"}
DELETE
Remove the resource
DELETE /orders/977
Status codes — the server's one-number verdict
First digit = the family. Memorize the family meanings and you can read any code you meet.
Code
Name
What it really means
2xx — success
The request worked
200
OK
Here's what you asked for
201 / 204
Created / No Content
Made the thing / worked, nothing to send back
3xx — redirect
What you want is elsewhere
301 / 302
Moved permanently / temporarily
Go to this other URL (browsers follow automatically)
304
Not Modified
Your cached copy is still good — nothing re-sent
4xx — your fault
The client's request is the problem
400
Bad Request
Malformed — the server couldn't parse what you sent
401 vs 403
Unauthorized vs Forbidden
401: you're not logged in. 403: you are, but you're not allowed. The classic interview distinction.
404
Not Found
No resource at that path — often just a typo'd URL
429
Too Many Requests
Rate limited — slow down and retry later
5xx — server's fault
Your request was fine; the server broke
500
Internal Server Error
The server's code crashed handling your request
502 / 503
Bad Gateway / Unavailable
A middleman couldn't reach the app / it's down or overloaded — the ops on-call classics
Headers — the metadata riding along
Header
What it carries
Example
Content-Type
What format the body is
Content-Type: application/json
Authorization
Who you are — usually an API key or token
Authorization: Bearer eyJhbG…
Cookie / Set-Cookie
The server's memory of you — session IDs, preferences
Set-Cookie: session=a91x…
Cache-Control
How long this response may be reused without re-asking
const r = await fetch(url, { headers: { Authorization: `Bearer ${token}` } }); const data = await r.json();
Python
r = requests.get(url, headers={"Authorization": f"Bearer {token}"}); data = r.json()
Watch out: GET requests must never change data — crawlers and prefetchers hit them freely · secrets go in headers, never in the URL (URLs land in logs and browser history) · always check r.status / r.ok before trusting a response · if a browser fetch fails with a CORS error, that's the server declining cross-site JavaScript calls — a server-side setting, not a bug in your code.
Networking
IPs, ports, DNS & TLS — the plumbing under everything
Before any HTTP conversation can start, the network has to find the machine (DNS → IP), reach the right program on it (port), and secure the line (TLS). When "the site is down," the break is usually in one of those three steps.
TypeConcepts & protocolsStandardsIETF (TCP/IP since 1983)Runs onEvery networked device you own
IP address
A machine's number on the network — 192.168.1.20 (IPv4) or the longer 2001:db8::… (IPv6). Private ranges like 192.168.x.x live behind your router; the world sees one public IP.
Port
A numbered door on that machine, one per listening program — web server on 443, database on 5432. host:port together name one service.
DNS
The internet's phone book: turns claude.ai into an IP address. Records: A (name→IP), CNAME (name→other name), MX (mail). Answers are cached, which is why DNS changes "take a while to propagate."
TCP vs UDP
TCP: reliable, ordered delivery with a handshake (web, email, SSH). UDP: fire-and-forget speed (video calls, games, DNS lookups).
TLS
The encryption layer (the padlock). The server proves its identity with a certificate signed by an authority the browser trusts. Certificates expire — an expired cert is one of the most common self-inflicted outages in IT.
localhost
127.0.0.1 — this machine talking to itself. localhost:3000 is your own dev server, invisible to everyone else.
The four steps behind every https page load — and the diagnosis order when one fails.
Well-known ports worth recognizing
Port
Service
Port
Service
22
SSH (remote shell, scp)
443
HTTPS
53
DNS
3306
MySQL
80
HTTP (unencrypted)
5432
PostgreSQL
25 / 587
Email (SMTP)
3000 / 8080
Common dev-server defaults
Diagnostic commands — the ops first-aid kit
Command
What it answers
Example
ping
"Can I reach that machine at all, and how fast?"
ping claude.ai
dig / nslookup
"What IP does this name resolve to?" — DNS truth-teller
dig claude.ai
traceroute
"Where along the path does it die?" — hop-by-hop route
traceroute claude.ai
curl -I
"Is the web service answering, and with what status?"
curl -I https://claude.ai
lsof -i :3000
"What program is holding that port?" — the fix for "address already in use"
lsof -i :3000
ip addr / ifconfig
"What's my IP address?"
ip addr
Watch out: localhost works ≠ the network works — 127.0.0.1 never leaves your machine · "it works for me, not for them" is very often cached DNS · a firewall silently dropping a port looks identical to a down server; test with curl from another machine · certificate expiry dates belong on a calendar.
Regex
regular expressions — one pattern language, used everywhere
A compact language for describing text patterns: "three digits, a dash, four digits" instead of listing every phone number. Learn it once and it works in JavaScript, Python, SQL, grep, and every editor's find-and-replace.
TypePattern-matching mini-languageOrigin1950s theory (Kleene); practical via Unix tools, 1970sRunsInside other languages & tools — never aloneSandboxregex101.com explains any pattern live
import re then re.search(r"\d{3}-\d{4}", text) — the r"…" raw-string prefix keeps backslashes literal
Shell
grep -E "error|warn" app.log — -E enables the full syntax
SQL
Postgres: WHERE name ~ '^Jam' · Snowflake/MySQL: REGEXP_LIKE(name, '^Jam') — LIKE's %/_ is the simpler cousin
Editors
VS Code / every IDE: the .* toggle in find-and-replace
Anatomy of a pattern — a US phone number, piece by piece.
Characters & classes — what to match
Pattern
Matches
Example
abc
Those literal characters, in order
cat matches "cat" in "concatenate"
.
Any single character (except newline)
c.t → "cat", "cot", "c9t"
\d\w\s
Digit / word character (letter, digit, _) / whitespace — capitals negate: \D = non-digit
\d\d:\d\d → "14:30"
[aeiou]
Any ONE character from the set
gr[ae]y → "gray" or "grey"
[a-z0-9]
Ranges inside a set
[A-F0-9] → one hex digit
[^abc]
Any character NOT in the set
[^,]+ → everything up to a comma
\.
Escape to match a special character literally: . * + ? ( ) [ ] { } ^ $ | \
\$\d+ → "$450"
Quantifiers & anchors — how many, and where
Pattern
Means
Example
*+?
0 or more / 1 or more / 0 or 1 (optional)
colou?r → "color" and "colour"
{3}{2,5}{2,}
Exactly 3 / between 2 and 5 / 2 or more
\d{5} → a ZIP code
^$
Start / end of the text (or line) — without them, a pattern matches anywhere inside
^Total → lines starting with "Total"
\b
Word boundary — whole-word matching
\bcat\b matches "cat", not "concatenate"
(…)
Group: apply a quantifier to several characters, or capture the match for reuse (\1, or $1 in replacements)
(ha)+ → "hahaha"
|
Or
error|warn|fatal
*?
Lazy: shortest match instead of longest — quantifiers are greedy by default
".*?" → each quoted string, not one giant span
Recipes you'll actually reuse
Goal
Pattern
Matches
US ZIP
^\d{5}(-\d{4})?$
32765 · 32765-1234
Date (ISO)
\d{4}-\d{2}-\d{2}
2026-08-29
Email (practical)
^[\w.+-]+@[\w-]+\.[\w.]+$
Good enough for validation; a truly complete email regex is famously monstrous
Money amount
\$\d{1,3}(,\d{3})*(\.\d{2})?
$4.99 · $1,250,000.00
Log lines w/ level
^(ERROR|WARN)\b.*$
grep-ready error filter
Watch out: greedy is the default — ".*" grabs from the first quote to the last; add ? for shortest · forgetting ^…$ anchors is why "validation" passes garbage like "xx32765xx" · escape your dots: claude.ai unescaped also matches "claudeXai" · regex is for patterns, not structure — don't parse HTML or JSON with it; use a real parser · build patterns a piece at a time on regex101.
Markdown
plain text that formats itself
Formatted writing without a word processor: a few punctuation marks tell any renderer where the headings, bold text, links, and lists are — and the raw file stays perfectly readable.
TypeLightweight markupOrigin2004, John Gruber with Aaron SwartzStandardsCommonMark · GitHub Flavored (GFM)Renders onGitHub, Reddit, Discord, Notion, Obsidian, chat apps, docs sitesFiles.md
Purpose
Write once in plain text; render as clean HTML anywhere — headings, emphasis, links, code
Use cases
READMEs, documentation, note-taking systems, blog posts, wikis, AI chat formatting
How it runs
It doesn't "run" — a renderer converts it to HTML for display. Any text editor writes it.
Related languages
Compiles to HTML (and raw HTML tags work inside it); YAML front-matter tops many .md files
The whole language in one table
Element
You type
You get
Heading
# H1 · ## H2 · ### H3 (up to 6)
Heading text
Bold / italic
**bold** · *italic* · ***both***
bold · italic · both
Strikethrough
~~done~~ (GFM)
done
Bulleted list
- item (or *); indent 2 spaces to nest
• item
Numbered list
1. first — numbers auto-correct themselves
1. first
Checklist
- [ ] todo · - [x] done (GFM)
☐ todo · ☑ done
Link
[text](https://url.com)
text
Image
 — a link with ! in front
the image, inline
Inline code
`code` (backticks)
code
Code block
```python … ``` — language name turns on highlighting
a highlighted block
Quote
> quoted line
quoted line
Divider
--- on its own line
Table
| A | B | then |---|---| then data rows
a real table (GFM)
Watch out: a blank line is required before a list or it glues to the paragraph above · paragraphs need a blank line between them; a single Enter is ignored (end a line with two spaces to force a break) · renderers differ at the edges — GitHub's GFM adds tables, checklists, and strikethrough to the core.
JSON & YAML
the data formats everything else exchanges
Not programming languages — data serialization formats: standard ways to write structured data as text so any language can read it. JSON is the machine favorite (APIs); YAML is the human favorite (config files). They represent the same shapes: values, lists, and key–value maps.
TypeData formatsJSON2001, Douglas Crockford — from JS object syntaxYAML2001 — a superset of JSONFiles.json · .yml / .yaml
JSON
YAML
Sweet spot
Data in motion: API responses, saved app state
Data you edit by hand: Docker Compose, CI/CD pipelines, app settings
# person.yaml — same structure,
# and comments are legal here
name: James
city: Orlando
certified: true
gpa: ~ # null
tanks:
- 55
- 29
- 6
- 5
dog:
name: Bella
breed: mixed
Same keys, same nesting, same types — braces and brackets on the left become indentation and dashes on the right.
JSON rules
Shape
An object {"key": value} or array [a, b] at the top; values nest freely
Strings
Double quotes only: "name": "James" — single quotes are invalid
No trailing commas
[1, 2, 3,] ✗ — the classic hand-written JSON error
Literals
true, false, null — lowercase
YAML rules
Maps
key: value — space after the colon is required
Lists
One - item per line, indented under the key
Nesting
By indentation — spaces only, tabs are a syntax error
Quote when odd
Strings that look like other types need quotes: version: "1.10", country: "NO" (unquoted no can parse as false in old YAML)
So what's Docker? Since its config files are YAML's biggest use case: Docker packages an app plus everything it needs (runtime, libraries, settings) into an image — a frozen recipe — and runs copies of it as containers, identical on any machine. That kills "works on my machine" bugs. A Dockerfile defines the image; docker-compose.yml (YAML!) describes several containers that run together — say, a Python app + a Postgres database. Core loop: docker build → docker run → docker ps to see what's running.
Watch out: JSON: no comments, no trailing commas, double quotes always — when in doubt, paste into a validator · YAML: indentation is the structure, and one misaligned space changes the meaning; never use tabs · both: a syntax error usually breaks the entire file, not just one line.
Topic index
Two ways in: the Rosetta table shows the same idea written in each language side by side; the A–Z index jumps straight to any topic's section.
Rosetta table — one idea, four languages
Concept
JavaScript
Python
SQL
Shell (Bash)
Comment
// note
# note
-- note
# note
Variable
const x = 5;
x = 5
—
X=5
Print / output
console.log(x)
print(x)
SELECT x;
echo $X
Text with a value in it
`pH is ${ph}`
f"pH is {ph}"
CONCAT('pH is ', ph)
"pH is $PH"
Equality test
a === b
a == b
a = b
[ "$a" = "$b" ]
If / branch
if (x > 5) { … }
if x > 5:
CASE WHEN x > 5 THEN … END
if [ $X -gt 5 ]; then …; fi
Loop over items
for (const t of tanks)
for t in tanks:
— (queries act on all rows at once)
for f in *.csv; do …; done
Define a function
const f = (a) => a * 2;
def f(a): return a * 2
CREATE FUNCTION (varies by engine)
f() { echo $1; }
List / collection
[1, 2, 3]
[1, 2, 3]
a table's rows
(1 2 3)
"Nothing" value
null / undefined
None
NULL
empty string
Filter a collection
rows.filter(r => r.total > 100)
[r for r in rows if r.total > 100]
WHERE total > 100
grep "error" file
HTML, CSS, Markdown, JSON and YAML sit this table out — they describe structure and data rather than executing steps, which is exactly the markup / programming divide on the Overview tab.