codeharborhub · ajay-dhangar · Apr 25, 2026 · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026
@@ -0,0 +1,9 @@
+{
+  "label": "Full-Stack",
+  "position": 6,
+  "link": {
+    "type": "generated-index",
+    "title": "Full-Stack Development Roadmap",
+    "description": "A comprehensive roadmap for absolute beginners to learn full-stack development, covering both frontend and backend technologies, along with essential tools and best practices. This roadmap is designed to guide you through the learning process step-by-step, ensuring you build a strong foundation in web development and become proficient in creating dynamic, responsive, and scalable web applications."
+  }
+}
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1 @@
+<ComingSoon />
@@ -0,0 +1,9 @@
+{
+  "label": "CSS",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "title": "CSS: Styling the Web",
+    "description": "Cascading Style Sheets (CSS) is the language used to style the HTML structure you've built. Learn how to control colors, fonts, spacing, and layouts to turn plain text into beautiful, responsive web experiences."
+  }
+}
@@ -0,0 +1,125 @@
+---
+title: "CSS Animations & Transitions"
+sidebar_label: "8. Animations"
+sidebar_position: 8
+description: "Bring your website to life with smooth transitions and keyframe animations."
+---
+
+A static website is fine, but an **animated** website feels alive. In CSS, we have two main ways to create movement: **Transitions** (simple) and **Animations** (complex).
+
+## 1. CSS Transitions
+
+A transition allows you to change a property (like color or size) **smoothly** over a set duration, rather than having it snap instantly.
+
+### The 4 Parts of a Transition:
+1.  **Property:** What are you changing? (e.g., `background-color`).
+2.  **Duration:** How long does it take? (e.g., `0.3s`).
+3.  **Timing Function:** The "vibe" of the move (e.g., `ease-in-out`).
+4.  **Delay:** How long to wait before starting? (e.g., `1s`).
+
+```css
+.button {
+    background-color: blue;
+    transition: background-color 0.3s ease;
+}
+
+.button:hover {
+    background-color: red; /* This will now fade smoothly! */
+}
+```
+
+## 2. Keyframe Animations
+
+If Transitions are for "Point A to Point B," **Keyframes** are for complex, multi-step movements that can run automatically.
+
+### Step 1: Define the Animation
+We use the `@keyframes` rule to create a "script" for the movement.
+
+```css
+@keyframes slideIn {
+    from {
+        transform: translateX(-100px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+```
+
+### Step 2: Apply it to an Element
+
+```css
+.card {
+    animation: slideIn 1s ease-out forwards;
+}
+```
+
+## 3. Animation Properties
+
+| Property | Description |
+| :--- | :--- |
+| `animation-name` | The name of your `@keyframes`. |
+| `animation-duration` | How long one cycle takes (e.g., `2s`). |
+| `animation-iteration-count` | How many times to repeat (`3` or `infinite`). |
+| `animation-direction` | `normal`, `reverse`, or `alternate` (back and forth). |
+
+## 4. The Power of `transform`
+
+When animating, we avoid moving items with `margin` or `top/left` because it's slow for the browser. Instead, we use **Transforms**.
+
+<Tabs>
+  <TabItem value="move" label="Move & Scale" default>
+      * `translate(x, y)`: Moves the item without affecting others.
+      * `scale(2)`: Makes the item twice as big.
+  </TabItem>
+  <TabItem value="rotate" label="Rotate">
+      * `rotate(45deg)`: Turns the item clockwise.
+      * `skew()`: Tilts the item.
+  </TabItem>
+</Tabs>
+
+```mermaid
+graph LR
+    Original[Original Box] -->|rotate 45deg| Rotated[Rotated Box]
+    Original -->|scale 1.5| Scaled[Bigger Box]
+    Original -->|translate 50px| Moved[Pushed Box]
+
+    style Original fill:#fff,stroke:#333,color:#333
+    style Rotated fill:#e1f5fe,stroke:#01579b,color:#333
+    style Scaled fill:#fff9c4,stroke:#fbc02d,color:#333
+    style Moved fill:#e8f5e9,stroke:#2e7d32,color:#333
+```
+
+## Interactive Practice: The "Pulse" Effect
+
+Let's create a notification dot that pulses forever:
+
+```html
+<div class="pulse-dot"></div>
+```
+
+```css
+.pulse-dot {
+    width: 20px;
+    height: 20px;
+    background-color: red;
+    border-radius: 50%;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.5; }
+    100% { transform: scale(1); opacity: 1; }
+}
+```
+
+:::warning Use Animations Sparingly
+A website with too many moving parts is distracting and can cause "motion sickness" for some users. Use animations to **guide** the user, not to annoy them.
+:::
+
+:::info Performance
+Always try to animate `transform` and `opacity`. These are "hardware accelerated," meaning the computer's graphics card handles them, keeping your website running at a silky-smooth 60 frames per second.
+:::
@@ -0,0 +1,104 @@
+---
+title: "The CSS Box Model"
+sidebar_label: "3. The Box Model"
+sidebar_position: 3
+description: "Understand how margins, borders, padding, and content work together to create element spacing."
+---
+
+In CSS, **everything is a box**. Whether it's a circular button, a line of text, or an image, the browser sees it as a rectangular container. 
+
+The Box Model determines exactly how much space an element takes up on your screen.
+
+## 1. The Four Layers of a Box
+
+Think of an HTML element like a framed photo you are sending through the mail:
+
+1.  **Content:** The actual "photo" (The text or image).
+2.  **Padding:** The "bubble wrap" inside the frame. It creates space **between the photo and the frame**.
+3.  **Border:** The "wooden frame" itself. It wraps around the padding and content.
+4.  **Margin:** The "safe space" outside the frame. It keeps **other boxes** from touching yours.
+
+## 2. Visualizing the Layers
+
+Here is how these layers translate into CSS code:
+
+```mermaid
+graph TD
+    Margin[Margin: Outer Space] --> Border[Border: The Line]
+    Border --> Padding[Padding: Inner Space]
+    Padding --> Content[Content: Text/Image]
+
+    style Margin fill:#f9ebea,stroke:#c0392b,color:#333
+    style Border fill:#ebf5fb,stroke:#2e86c1,color:#333
+    style Padding fill:#e8f8f5,stroke:#1e8449,color:#333
+    style Content fill:#fff,stroke:#333,color:#333
+```
+
+### The Breakdown:
+
+  * **`width` & `height`**: Sets the size of the **Content** only.
+  * **`padding`**: Clears an area around the content. It inherits the background color of the box.
+  * **`border`**: A line that goes around the padding. You can set its thickness, style, and color.
+  * **`margin`**: Clears an area outside the border. Margins are always transparent.
+
+## 3. How to Write Box Model CSS
+
+You can set these values for all sides at once, or for specific sides.
+
+<Tabs>
+<TabItem value="shorthand" label="⌨️ Shorthand" default>
+You can set all four sides in one line. The order is always **Clockwise**: Top, Right, Bottom, Left.
+`margin: 10px 20px 10px 20px;`
+<em>(Top: 10px, Right: 20px, Bottom: 10px, Left: 20px)</em>
+</TabItem>
+<TabItem value="specific" label="📍 Specific Sides">
+Use these for more control:
+
+`padding-top` / `margin-top`
+`padding-right` / `margin-right`
+`padding-bottom` / `margin-bottom`
+`padding-left` / `margin-left`
+
+</TabItem>
+</Tabs>
+
+## 4. The "Box-Sizing" Problem
+
+By default, if you give a box a width of `200px` and then add `20px` of padding, the box actually becomes **240px** wide (200 + 20 left + 20 right). This often breaks layouts!
+
+### The Fix: `border-box`
+
+Professional developers use `box-sizing: border-box;`. This tells the browser: "Keep the width at 200px, and put the padding **inside** that space."
+
+```css
+/* Apply this to everything! */
+* {
+    box-sizing: border-box;
+}
+```
+
+## Practice: Create a "Featured Card"
+
+Try building this in your `style.css`:
+
+```css title="style.css"
+.card {
+    width: 300px;
+    background-color: white;
+
+    /* 1. The Border */
+    border: 2px solid #333;
+
+    /* 2. The Bubble Wrap (Inside) */
+    padding: 20px;
+
+    /* 3. The Safe Space (Outside) */
+    margin: 50px auto; /* Centering the card */
+
+    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
+}
+```
+
+:::info Margin "Auto"
+Setting `margin: auto;` on a box with a fixed width is the most common way to center an element horizontally on the page!
+:::