Web Dev & AI Tools Guide

Builds the structure of the website.

🟰 Like: The skeleton of a house.

💡 HTML = builds the website.

Makes the website look beautiful.

🟰 Like: Clothes and paint for the house.

💡 CSS = decorates the website.

Makes the website move and do things.

🟰 Like: Muscles that make the body move.

💡 JS = makes the website interactive.

Organizes and builds the whole app.

🟰 Like: The project manager building the entire house.

💡 Next.js = builds the whole app.

A faster way to write CSS.

🟰 Like: A paint roller instead of a paintbrush.

💡 Tailwind = faster CSS.

Runs the app's brain on the server.

🟰 Like: The kitchen where food is cooked.

💡 Node.js = runs the app.

Lets two apps talk to each other.

🟰 Like: A telephone between two friends.

A common way apps send information.

🟰 Like: Sending letters through the mail.

Ask only for the information you need.

🟰 Like: Ordering only the toppings you want on your pizza.

Stores users, passwords, files, and app data.

🟰 Like: A giant filing cabinet.

💡 Supabase = stores data.

Helps your app talk to the database.

🟰 Like: A translator between your app and the database.

💡 Prisma = database translator.

Makes databases easier to use from code.

🟰 Like: A helper that translates database language.

Puts your website on the internet.

🟰 Like: Opening your store so everyone can visit.

💡 Vercel = publishes your website.

Runs your backend online.

🟰 Like: A factory working 24/7.

Giant cloud computers that run big apps.

🟰 Like: Renting a huge building instead of building your own.

💡 Cloud = powerful computers on the internet.

Packs your app so it works anywhere.

🟰 Like: Packing all your toys into one box before traveling.

💡 Docker = packs your app.

Stores your code online.

🟰 Like: A library for your projects.

Saves every change you make to your code.

🟰 Like: A magic undo button.

Control your computer by typing commands.

🟰 Like: Talking directly to your computer.

Adds new features to VS Code.

🟰 Like: Installing a new app on your phone.

An AI that understands and writes text.

🟰 Like: A super-smart robot teacher.

How much the AI can remember in one conversation.

🟰 Like: Short-term memory.

Small pieces of words the AI reads.

🟰 Like: LEGO blocks that make sentences.

You can use it, but can't see how it's built (Claude, ChatGPT, Gemini).

🟰 Like: A dish you order but never get the recipe for.

Anyone can download the model and run it themselves (Gemma, Qwen, DeepSeek); licences vary.

🟰 Like: Taking the finished cake home — though not always the full recipe.

A coding exam for AI models.

🟰 Like: A report card for AI programmers.

Automatically sends information when something happens.

🟰 Like: A doorbell that rings by itself.

A way computers organize and share information.

🟰 Like: A form with labels and answers.