Chapter 31: Custom Properties
Custom Properties (also called CSS Variables) Before custom properties existed (pre-2016), CSS was very rigid: You had to repeat the same color / spacing / font-size value dozens of times Changing the primary color?...
Category: INTRO TO HTML & CSS
Chapter 32: Calc & Functions
CSS mathematical & functional tools (min(), max(), clamp(), calc() itself, and a few others like round() in newer browsers) These functions let you do real math inside CSS — so your layouts, sizes, spacing,...
Chapter 33: Transitions
Transitions Transitions are what make your website feel alive, smooth, premium, and responsive to user interaction — without writing a single line of JavaScript. In simple words: A CSS transition tells the browser: “When...
Chapter 34: Transforms
Transforms (transform property) Transforms are what let you move, rotate, scale, skew, or translate elements in 2D or 3D space — without affecting the layout flow of other elements. In simple words: Transform changes...
Chapter 35: Animations
Animations Animations are what make websites feel alive, premium, engaging, and memorable. A transition (what we learned last time) is a very simple, automatic animation between two states (usually hover/focus/click). A CSS animation (what...
Chapter 36: Effects & Filters
CSS Effects & Filters today — one of the most fun and visually powerful parts of modern CSS. These properties let you apply photoshop-like effects directly in the browser: blur, brightness, contrast, drop shadows,...
Chapter 37: HTML & CSS Quality
HTML & CSS Quality today. This is one of the most important (and most ignored) topics for anyone who wants to go from “I can make a page” → “I write clean, professional, maintainable,...
Chapter 38: Accessibility
Accessibility (often shortened to a11y — a11y = accessibility, with 11 letters between a and y) Accessibility means making your website usable by as many people as possible — including people who: are blind...
Chapter 39: Design Systems
Design Systems This is the topic that separates hobby projects from serious, scalable, team-built, long-living products (think Swiggy, Zomato, PhonePe, Flipkart, Google, Airbnb, Atlassian, Shopify, etc.). I’ll explain it like I’m your senior who’s...
Chapter 40: Performance
Performance (Web Performance) When people say “performance” in the context of websites/apps, they almost always mean: How fast does the page feel to the user? How quickly can they see something useful? How smooth...
