Tech & AI, Explained

absolute-beginner

13 min read

Reading path: Absolute beginner

Status: 🟩 COMPLETE Last updated: 2026-06-19 Plain-English tagline: Starting from zero — you’ve never written code, you barely know what a “browser” is mechanically, and you want to UNDERSTAND the world of modern web/AI software well enough to be a confident collaborator.

What this is

The path for someone whose technical context is “I use a computer and a browser; I don’t know what’s underneath.” This is broader and more foundational than the build-your-first-webapp path — it doesn’t aim to make you a builder. It aims to make you conversationally fluent in the modern software world, so when someone (Claude Code, a developer friend, a tutorial) mentions “the backend” or “an API” or “DNS,” you have a real mental picture instead of a vague feeling.

There are 20 stops. Read at a comfortable pace — maybe 2-3 stops per sitting, with breaks to let things settle. The goal isn’t to memorize; it’s to BUILD A MENTAL MAP that you can navigate forever.

How to use this path

Each numbered stop has:

  • 🎯 Why you’re here — what you’ll be able to do or understand after this stop
  • đź“– Read — the entries (with status badges)
  • 🧠 Anchor concept — the one takeaway worth keeping

This is the “explain the territory before learning to navigate” path. Skipping it and going straight to building works for some people; for others (especially non-programmers), it leaves persistent confusion.

Stage 1 — The very basics (3 stops)

What is a computer? What is the internet? What is the web? These three feel obvious until you try to explain them.

1. What a computer actually is

🎯 Why you’re here: Computers seem complicated, but the core idea is small: a machine that takes input, runs steps, produces output. Software is just the steps. Once you have THIS model, every later concept fits onto it.

đź“– Read:

🧠 Anchor concept: A computer is a machine that follows instructions, very fast. Everything else — software, websites, AI — is patterns of instructions on top of that.

2. The internet vs the web

🎯 Why you’re here: People use “internet” and “web” interchangeably. They’re different. The internet is the WIRES (and wireless signals) connecting computers. The web is ONE thing built on top of those connections — the system of webpages.

đź“– Read:

🧠 Anchor concept: The internet is the road network. The web is one type of vehicle on it (others: email, video calls, file sharing). When you type a URL into a browser, the BROWSER is the vehicle; the internet is what it drives on.

3. Client vs server — the single most important distinction

🎯 Why you’re here: Almost every confusion in tech traces back to losing track of “which side is this on?” Learn this split early; everything else clicks.

đź“– Read:

🧠 Anchor concept: Someone has to ASK; someone has to ANSWER. The asker is the client (your browser, your phone app, a script). The answerer is the server (a computer somewhere else, running 24/7, waiting for questions). Code that runs on the server can hold secrets and see databases. Code that runs on the client can see what the user is doing. They are completely different worlds.

Stage 2 — The browser and what’s underneath (3 stops)

The browser is the most-used software in the world. Knowing what’s IN one demystifies a huge amount.

4. The browser

🎯 Why you’re here: Chrome / Safari / Firefox are programs that DOWNLOAD code from the internet, then RUN it on your machine. That sentence sounds wild until you’ve thought about it.

đź“– Read:

  • The browser đźź©
  • HTML đźź© — what the browser is actually displaying

🧠 Anchor concept: A web page is just a text file (HTML) that the browser reads and turns into pixels. View ANY page’s “View Source” — that’s the file. Everything visual is the browser interpreting that file.

5. What gives pages their LOOK and BEHAVIOR

🎯 Why you’re here: HTML is structure. CSS makes it pretty. JavaScript makes it interactive. Together they’re the universal trio every webpage uses.

đź“– Read:

🧠 Anchor concept: Three layers. HTML = what’s there (“this is a button, this is a paragraph”). CSS = what it looks like (“the button is blue, the text is large”). JavaScript = what it does (“when you click the button, hide the paragraph”). Every webpage in the world is some combination of these three.

6. The DevTools — the X-ray vision

🎯 Why you’re here: Press F12 (or Cmd+Option+I) on any webpage. A panel opens showing you the HTML, CSS, JavaScript, network requests, console — EVERYTHING. This is how developers debug. It’s also how anyone curious can learn.

đź“– Read:

  • The DOM đźź© — what you see in the Elements panel
  • HTTP & HTTPS đźź© — what you see in the Network panel

🧠 Anchor concept: DevTools is the X-ray for the web. Every webpage shows it to you. Hover over an element → highlight it in the page. See every network request the page made → click for full details. Inspect every line of JavaScript that ran. There’s no magic; it’s all visible.

Stage 3 — The other side (the server) (3 stops)

If the browser is the client, what’s the server? What does it run? Where does it live?

7. What’s “the cloud”?

🎯 Why you’re here: “The cloud” is a great brand and a terrible technical term. Demystified: it’s other people’s computers, rented by the hour, in big buildings with air conditioning.

đź“– Read:

🧠 Anchor concept: “Hosting” is renting a computer that runs your code 24/7. Modern hosting services like Vercel and Cloudflare let you “deploy” (put your code there) with one command. Free for small projects.

8. Databases — where the data actually lives

🎯 Why you’re here: When Instagram shows you a photo, that photo is stored SOMEWHERE. Every “save” button in every app puts data into a database. Without one, no app remembers anything.

đź“– Read:

🧠 Anchor concept: A database is a program that stores data in an organized way and answers questions about it. Most apps use SQL databases — data in tables, like a giant Excel spreadsheet, except much faster and with strict rules. Postgres is the most popular modern SQL database.

9. APIs — how things talk

🎯 Why you’re here: Every app you use is talking to OTHER apps behind the scenes. Your weather app talks to a weather service. Your camera app talks to iCloud. The way they talk is called an “API.”

đź“– Read:

🧠 Anchor concept: An API is a contract — “if you send me this kind of message, I’ll send back this kind of answer.” Every Stripe payment, every Google Maps query, every ChatGPT response goes through an API. Think of it like a restaurant menu: you don’t go in the kitchen, you order from the menu, the kitchen delivers what you ordered.

Stage 4 — Modern frameworks and languages (3 stops)

You’ll see specific tools mentioned everywhere. Knowing what each IS (without being able to use them) makes conversations easier.

10. JavaScript and TypeScript

🎯 Why you’re here: JavaScript is THE language of the web. TypeScript is JavaScript with a safety net (catches mistakes before they ship). 90% of modern web development is one of these two.

đź“– Read:

🧠 Anchor concept: Same language; TypeScript adds type-checking. A function that says “this needs a number” will catch you trying to pass a string. The compiler is your tireless intern, reading every line. Modern projects almost always use TypeScript.

11. React and Next.js

🎯 Why you’re here: React is THE library for building UIs from reusable pieces (“components”). Next.js is the framework around React that adds routing, server-side rendering, and a ton more. Together they power the modern web.

đź“– Read:

🧠 Anchor concept: React lets you build a UI from reusable components — a <Button>, a <Card>, a <Sidebar>. Next.js takes React and adds everything around it (routing, performance, server features). When people say “Next.js app” they mean a React app built with the Next.js framework — the dominant choice in 2026.

12. Node.js, npm, and the package ecosystem

🎯 Why you’re here: Behind every “I built it in a weekend” Twitter post is the ENORMOUS ecosystem of free libraries on npm. Modern dev = standing on millions of lines of other people’s code.

đź“– Read:

🧠 Anchor concept: Node.js lets JavaScript run OUTSIDE the browser (on servers, in scripts, in tools). npm is the library store — millions of packages, free, installable in one command. Modern web apps depend on dozens or hundreds of npm packages.

Stage 5 — How code becomes a website (3 stops)

You write code on your laptop. Someone visits your site from across the world. What HAPPENS in between?

13. Git — the time machine

🎯 Why you’re here: Every modern code project tracks every change ever made. You can rewind, branch off experiments, undo mistakes. This is “version control”; the tool is “Git.”

đź“– Read:

🧠 Anchor concept: Git tracks every change. A commit is a snapshot. A branch is an alternative line of history. GitHub is a website that hosts Git repos in the cloud, plus adds collaboration tools (issues, PRs, comments). It’s where almost all open-source code lives.

14. The deploy pipeline

🎯 Why you’re here: You “commit” code, “push” it to GitHub, and somehow it ends up live at a URL. The chain of events is called the deploy pipeline.

đź“– Read:

🧠 Anchor concept: Modern deploys are automatic. You push code to GitHub → a service (Vercel) sees the push → it builds your app → it puts the new version live. The whole cycle takes 60-90 seconds. You don’t touch a server.

15. HTTPS and security basics

🎯 Why you’re here: Why is there a padlock in the browser? Why HTTPS instead of HTTP? Why do people worry about secrets in code?

đź“– Read:

🧠 Anchor concept: HTTPS encrypts what flows between browser and server. The padlock means “nobody in between can read or tamper with this.” Behind it, authentication (proving who you are) and authorization (what you’re allowed to do) are the layers that keep apps safe. The OWASP Top 10 is the famous list of “common ways apps get hacked.”

Stage 6 — AI/LLMs in the modern stack (3 stops)

You’ll work alongside AI tools constantly. Understanding what they are, what they do well, what they get wrong, matters more than understanding any specific framework.

16. What an LLM actually is

🎯 Why you’re here: ChatGPT, Claude, Gemini — these are all “Large Language Models.” Knowing what that means (and doesn’t mean) saves you from anthropomorphizing them in bad ways.

đź“– Read:

🧠 Anchor concept: An LLM is a pattern-matching system trained on enormous text data. It predicts the next token (chunk of text) given the previous ones. It doesn’t “know” things — it predicts what would be plausible to say. This is both powerful and limited; understanding the limits is the practical skill.

17. Prompting — what works and what doesn’t

🎯 Why you’re here: “Prompt engineering” sounds important; it’s not magic, but a few principles really matter. Clear instructions, specific context, examples — these consistently produce better outputs.

đź“– Read:

🧠 Anchor concept: The model can only respond to what’s in its context window. Give it more (relevant) information; give clear instructions; give examples when shape matters. The biggest mistakes are vague prompts and missing context.

18. Agents and tool use

🎯 Why you’re here: The newest AI tools (Claude Code, ChatGPT with tools, Cursor) can DO things — read files, run commands, edit code. This is “agentic AI” and it’s reshaping how software gets built.

đź“– Read:

🧠 Anchor concept: An agent is an LLM with tools. Instead of just talking back, it can ACT — read a file, run a command, write code, ask another AI. This collapses many steps that used to be human work into single requests.

Stage 7 — Putting it together (2 stops)

You have the pieces. How do they FIT?

19. The modern webapp stack, end to end

🎯 Why you’re here: Time to wire all this together in one mental picture.

đź“– Read:

🧠 Anchor concept: A modern webapp = a Next.js frontend that the browser runs + Supabase as the database/auth/storage backend + Vercel for hosting + GitHub for source control + Claude Code as the AI helper. Five tools; they all integrate; one person can ship something serious.

20. Where to go next

🎯 Why you’re here: You now have the MAP. The natural next step depends on what you want.

Pick one direction:

🧠 Anchor concept: You don’t need to read everything. You need the MAP that lets you find the right entry when a new term comes up. That map is now built. The encyclopedia is your dictionary for the rest.

When you finish this path

You’ll be able to:

  • âś… Read a tech article and follow it instead of being lost
  • âś… Distinguish “frontend” from “backend” reliably
  • âś… Explain to someone (in plain English) what happens when they type a URL into a browser
  • âś… Know what a “framework,” “library,” “package,” “API,” “database,” and “deploy” each mean
  • âś… Understand what an AI “agent” is and how it differs from chat
  • âś… Have a clear MAP so you can navigate the encyclopedia for any specific detail

You won’t be writing code yet. You won’t need to. You’ll have something more useful: the vocabulary and mental model of the modern software world. Once you have that, learning specific tools is dramatically faster.

See also

Sources

  • Encyclopedia README — the meta-context for the encyclopedia itself
  • Conventions — how entries are written
  • All entries linked above (each has its own Sources section)

Graph View

Backlinks