🦴 A webpage is a body

Every page on the internet — Instagram, Netflix, Vantage Circle — is made of exactly three ingredients:

🦴 HTML is the skeleton — a boring list of what exists: a box, a picture, a heading, a button. No beauty. No behavior. Just bones.

🎨 CSS is the clothes & makeup — it takes the bones and says “you, be coral. You, get rounded corners. You, float with a soft shadow.”

🧠 JavaScript is the brain & muscles — it makes things happen: clicks, counting, loading data.

🎨 CSS — your kingdom 👑

CSS works like a dress code memo: you write a rule that says who it applies to (the “selector”, like .badge) and what they must wear (the properties, like border-radius: 20px).

The “C” stands for Cascading — rules flow down like a waterfall, and when two rules argue about the same thing, the more specific one (or the one written later) wins. That's the whole drama of CSS in one sentence.

And !important? That's a rule screaming to skip the queue. It wins instantly — but now nobody else can ever override it politely. That's why your project has a lint rule banning it. It's the villain. 🦹

✏️ SVG — drawings made of math

A photo (JPG/PNG) is a grid of colored dots — pixels. Zoom in, and the dots get big and blurry. 🟦🟦🟦

An SVG stores no dots at all. It stores instructions: “draw a circle at the center, radius 6. Now a ribbon below it.” The computer re-draws it fresh at ANY size — so it is never blurry. It's a recipe, not a photo of the cake. 🎂

🧱 Components — LEGO city

Imagine writing Preetam's profile card by hand… then writing it AGAIN for every one of 2 million employees. Madness. 🤯

Instead, developers build a component: one reusable mold 🧇 (like a waffle iron). Pour in different data — name, department, awards — and out comes a fresh card every time. Same shape, different filling.

That's what Angular (the framework your app is built with) does all day. Your codebase is a LEGO city of components: vc-profile-widget, vc-side-icon… every vc- thing you've seen me mention is a LEGO brick.

⏰ Git — the time machine

Git is a magic photo album for code. Every commit 📸 is a labelled snapshot of every file in the project at that moment. Broke something on Tuesday? Flip back to Monday's photo and compare. Nothing is ever truly lost.

A branch 🌿 is a parallel universe. master is the official universe. Your feat/ui-design-tokens-phase-1 is a sandbox copy where your design-token experiments live safely — when the work is ready, the universes get merged.

And push? That's publishing your snapshots to the team's shared cloud album. Committing is private; pushing is public 📢 — which is exactly why your rule with me is “never push without permission.”

🏭 The build kitchen

npm is a grocery delivery service 🛒. The file package.json is the shopping list, and npm install fills your fridge (a folder called node_modules) with thousands of ingredients other developers already cooked.

The dev server is your personal kitchen 👨‍🍳. npm run start:dev:proxify cooks the whole app and serves it hot at localhost:4200 — a private restaurant only YOUR computer can visit.

Best part: watch mode. The chef literally watches your files. Save a .scss file → he notices → re-cooks just that dish → your browser gets the fresh version in seconds. (That “compiling…” wait this morning? The chef's first big cook of the day.)

🎟️ Auth — the nightclub bouncer

When you log in, the bouncer checks your ID (email + password) once, then hands you a wristband — a token: a long random code. From then on, every single request your app makes shows the wristband, not your password.

But Club Vantage has a strict rule: ONE wristband per person. If your account logs in somewhere else, the club prints a NEW wristband and cancels yours. Next time you knock → 🚫 bounced to /site/logout.

Sound familiar? That's exactly what happened to you this morning. And get-auth.js is our trick: it quietly logs in again and writes the fresh wristband into custom-auth.ts.

🧠 TypeScript — the forbidden room

Remember the brain (JavaScript) from Lesson 1? TypeScript is JavaScript with a strict grammar teacher 👩‍🏫 standing behind it. Every box gets a label — a type: awards: number means “only numbers may live here.”

Put the wrong thing in a box, and the teacher refuses to even build the app. Annoying? A little. But it catches mistakes before 2 million employees ever see them — instead of the app exploding in their faces. 💥

So why is it your forbidden room? Because .ts files are the app's brain and behavior. Changing a wardrobe (SCSS) can at worst look funny. Changing the brain is surgery. The rule isn't “you can't” — it's “not yet.” (And hey — today you peeked inside. 👀)