π
What is a Server? beginner β 10 XP
A server is a computer that runs your app and responds to requests from browsers. When someone visits your website, their browser sends a request to your server, which sends back HTML, CSS, and JS.
3 quiz questions
π‘
How HTTP Works beginner β 10 XP
HTTP (HyperText Transfer Protocol) is the language browsers and servers speak. Every time you load a page, your browser sends an HTTP request and the server sends back an HTTP response.
3 quiz questions Β· π» code example
π
HTML: The Structure beginner β 10 XP
HTML (HyperText Markup Language) defines the structure of web pages. Every page is a tree of elements: headings, paragraphs, images, links, forms, and containers.
3 quiz questions Β· π» code example
π¨
CSS: The Style beginner β 10 XP
CSS (Cascading Style Sheets) controls how HTML elements look β colors, fonts, spacing, layout, and animations. Without CSS, every website would look like a plain text document.
3 quiz questions Β· π» code example
π
Flexbox Layout beginner β 15 XP
Flexbox is a CSS layout model for arranging items in a row or column. It handles alignment, distribution, and spacing automatically β no more float hacks.
3 quiz questions Β· π» code example
π²
CSS Grid Layout intermediate β 20 XP
CSS Grid is a 2D layout system β it handles both rows AND columns simultaneously. Perfect for page layouts, card grids, and dashboard-style interfaces.
3 quiz questions Β· π» code example
β¨
CSS Animations & Transitions intermediate β 20 XP
CSS transitions animate between states (hover, focus). CSS keyframe animations create complex, multi-step sequences. Both run on the GPU for smooth 60fps performance.
3 quiz questions Β· π» code example
π¦
Variables & Types beginner β 10 XP
Variables store data. JavaScript has three ways to declare them: let (changeable), const (fixed), and var (legacy β avoid it). Types include strings, numbers, booleans, arrays, and objects.
3 quiz questions Β· π» code example
βοΈ
Functions beginner β 10 XP
Functions are reusable blocks of code. They take inputs (parameters), do something, and optionally return a result. Arrow functions (=>) are the modern, concise syntax.
3 quiz questions Β· π» code example
π
Arrays & Array Methods intermediate β 20 XP
Arrays are ordered lists. JavaScript has powerful built-in methods: .map() transforms, .filter() selects, .find() searches, .reduce() accumulates, .sort() orders.
3 quiz questions Β· π» code example
β³
Async/Await & Promises intermediate β 25 XP
Async operations (API calls, file reads) don't complete instantly. Promises represent "a value that will arrive later". async/await is syntactic sugar that makes async code read like synchronous code.
3 quiz questions Β· π» code example
π¦
ES Modules (import/export) beginner β 10 XP
Modules split code into files. export makes functions/variables available. import brings them into other files. This keeps code organized and reusable.
3 quiz questions Β· π» code example
π¨
Error Handling intermediate β 15 XP
Errors happen β network fails, data is wrong, users do unexpected things. try/catch catches errors. throw creates custom errors. Error boundaries catch React crashes.
3 quiz questions Β· π» code example
π§©
React Components beginner β 15 XP
Components are reusable UI building blocks. Each component is a function that returns JSX (HTML-like syntax). Props are inputs from parent components.
3 quiz questions Β· π» code example
π
State & useState beginner β 15 XP
State is data that changes over time β a counter, a toggle, form inputs. useState gives components their own memory that persists across re-renders.
3 quiz questions Β· π» code example
π
JSX: HTML in JavaScript beginner β 10 XP
JSX lets you write HTML-like syntax inside JavaScript. It's not actually HTML β React compiles it to function calls. Expressions go in {curly braces}.
3 quiz questions Β· π» code example
πͺ
useEffect: Side Effects intermediate β 20 XP
useEffect runs code after render β API calls, event listeners, timers. It's React's way of saying "do this thing outside of rendering".
3 quiz questions Β· π» code example
π
Conditional Rendering beginner β 10 XP
Show different UI based on state: loading spinners while fetching, error messages on failure, empty states when data is missing, or different views for different users.
3 quiz questions Β· π» code example
π
Lists & Keys beginner β 10 XP
Rendering lists with .map() is fundamental React. Every list item needs a unique `key` prop so React can efficiently update the DOM when items change.
2 quiz questions Β· π» code example
π
REST APIs beginner β 15 XP
APIs let your frontend talk to your backend. REST uses HTTP methods: GET (read), POST (create), PUT (update), DELETE (remove). Responses are JSON.
3 quiz questions Β· π» code example
ποΈ
Databases (SQL vs NoSQL) beginner β 15 XP
Databases store your app's data persistently. SQL databases (PostgreSQL, MySQL) use structured tables. NoSQL databases (MongoDB, Redis) use flexible documents.
2 quiz questions Β· π» code example
π
Authentication & Authorization intermediate β 20 XP
Authentication = who are you? (login). Authorization = what can you do? (permissions). JWT tokens are the most common way to handle auth in modern apps.
2 quiz questions Β· π» code example
β‘
Next.js Framework intermediate β 20 XP
Next.js is a React framework that handles routing, server rendering, API routes, and optimization. File-based routing: create a file β get a route.
2 quiz questions Β· π» code example
π
Git Version Control beginner β 10 XP
Git tracks every change to your code. Commit = save snapshot. Branch = work on features separately. Push = upload to GitHub. Pull = download latest.
2 quiz questions Β· π» code example
π¦
npm & Package Management beginner β 10 XP
npm installs code libraries (packages) so you don't build everything from scratch. package.json lists your dependencies. node_modules stores the installed code.
2 quiz questions Β· π» code example
π
TypeScript intermediate β 20 XP
TypeScript adds type checking to JavaScript β catching bugs before runtime. Most modern projects use it. Types describe the shape of data: what properties exist and what types they are.
2 quiz questions Β· π» code example
π»
The Terminal beginner β 10 XP
The terminal (command line) is where developers run commands: starting servers, installing packages, running Git, and managing files. It's faster than clicking through GUIs.
2 quiz questions Β· π» code example
π
Browser DevTools beginner β 10 XP
Chrome DevTools (F12) lets you inspect HTML, debug CSS, monitor network requests, profile performance, and debug JavaScript β all in your browser.
2 quiz questions
π
Deployment beginner β 15 XP
Deployment puts your app on the internet. Modern platforms (Vercel, Netlify, Railway) deploy automatically when you push to GitHub.
2 quiz questions
π
Environment Variables beginner β 10 XP
Environment variables store secrets (API keys, DB passwords) outside your code. Different values for development vs production. Never commit .env files to Git.
2 quiz questions Β· π» code example
π¨
Tailwind CSS beginner β 15 XP
Tailwind lets you style with utility classes directly in HTML: bg-blue-500 text-white p-4 rounded-lg. No separate CSS files needed.
2 quiz questions Β· π» code example
π±
Responsive Design intermediate β 15 XP
Responsive design makes your app look good on any screen β phones, tablets, desktops. Design mobile-first, then add complexity for larger screens.
2 quiz questions
π¬
Prompting for Code beginner β 10 XP
AI builds better apps when you give it better prompts. Be specific about features, tech stack, design details, and seed data β vague prompts get generic results.
2 quiz questions Β· π» code example
π€
How AI Agents Work intermediate β 15 XP
AI agents are AI models that can take actions β reading files, writing code, running commands. vibesh1ft uses Claude as an agent with real tools to build your app task by task.
2 quiz questions
π
BYOK: Bring Your Own Key beginner β 10 XP
BYOK means you use YOUR OWN API key to pay for AI usage directly. No middleman markup. vibesh1ft never touches your money β you pay Anthropic directly at their rates.
2 quiz questions
π§
Context Windows & Tokens intermediate β 15 XP
AI models process text in "tokens" (roughly 4 characters each). The context window is how much text the model can see at once. More context = more expensive but better understanding.
2 quiz questions
π
Iterating with AI beginner β 10 XP
The first AI output is rarely perfect. The refine loop lets you send feedback and have the AI modify the code β like pair programming with an instant coder.
2 quiz questions
πͺ
Webhooks intermediate β 15 XP
Webhooks push data to you when events happen β instead of you polling for changes. Stripe sends a webhook when someone pays. GitHub sends one when code is pushed.
2 quiz questions
π
CORS intermediate β 15 XP
CORS (Cross-Origin Resource Sharing) is a browser security feature. It blocks your frontend from talking to servers on different domains unless the server explicitly allows it.
2 quiz questions
π³
Stripe Payments intermediate β 20 XP
Stripe handles credit cards, subscriptions, and refunds. Instead of building payment handling yourself (dangerous), use Stripe's API. It takes minutes to set up.
2 quiz questions
π§
DNS & Domains intermediate β 15 XP
DNS translates domain names (vibesh1ft.com) into IP addresses (142.250.80.46) that computers use to find each other. It's like the phone book of the internet.
2 quiz questions