diff --git a/absolute-beginners/frontend-beginner/tailwindcss/_category_.json b/absolute-beginners/frontend-beginner/tailwindcss/_category_.json
new file mode 100644
index 0000000..e672469
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/tailwindcss/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Tailwind CSS",
+  "position": 7,
+  "link": {
+    "type": "generated-index",
+    "description": "Stop writing CSS files and start styling with utility classes. Learn how to build beautiful, responsive UIs directly inside your HTML/JSX."
+  }
+}
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/tailwindcss/core-concepts.mdx b/absolute-beginners/frontend-beginner/tailwindcss/core-concepts.mdx
new file mode 100644
index 0000000..38ccdf5
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/tailwindcss/core-concepts.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_position: 4
+title: "Tailwind Core Concepts"
+sidebar_label: "4. Core Concepts"
+description: "Master the utility-first naming system, responsive design, and hover states."
+---
+
+Think of Tailwind as a language. Once you learn the "grammar" (how classes are named), you can style anything without looking at the documentation.
+
+## Pillar 1: The Box Model (Sizing & Spacing)
+
+In standard CSS, you write `padding: 16px;`. In Tailwind, we use a numeric scale (where `1` = `4px`).
+
+### Spacing Scale
+
+* **Padding (p):** `p-4` (16px all sides), `px-4` (left/right), `py-4` (top/bottom).
+* **Margin (m):** `m-2` (8px), `-mt-4` (Negative top margin).
+* **Width/Height:** `w-full` (100%), `h-screen` (100vh), `w-1/2` (50%).
+
+## Pillar 2: Colors and Typography
+
+Tailwind comes with a professional color palette. Each color has a weight from **50** (lightest) to **950** (darkest).
+
+* **Text:** `text-blue-600` (Blue text), `text-center` (Centered), `text-xl` (Extra Large).
+* **Backgrounds:** `bg-gray-100` (Light gray background).
+* **Borders:** `border-2 border-red-500` (Red 2px border).
+
+## Pillar 3: States (Hover, Focus, Active)
+
+In CSS, you would write a separate `:hover` selector. In Tailwind, you just add a **prefix**. It’s like saying: *"Only apply this color IF the mouse is hovering."*
+
+```html title="index.html"
+<button class="bg-blue-500 hover:bg-blue-700 active:bg-black text-white p-4">
+  Interactive Button
+</button>
+```
+
+## Pillar 4: Responsive Design (Mobile-First)
+
+Tailwind is **Mobile-First**. This means:
+
+1. Unprefixed classes (like `text-sm`) apply to **Mobile**.
+2. Prefixed classes (like `md:text-xl`) apply to **Tablets and Desktop**.
+
+| Prefix | Screen Size | Standard CSS |
+| --- | --- | --- |
+| **sm:** | 640px + | `@media (min-width: 640px)` |
+| **md:** | 768px + | `@media (min-width: 768px)` |
+| **lg:** | 1024px + | `@media (min-width: 1024px)` |
+
+**Example: A card that is red on mobile but turns green on desktop.**
+
+```html title="index.html"
+<div class="bg-red-500 md:bg-green-500 p-10">
+  Watch me change color when you resize the window!
+</div>
+```
+
+## Live Interactive: Putting it Together
+
+Try changing the `rounded-lg` to `rounded-full` or `bg-purple-600` to `bg-orange-500` in the editor below!
+
+```jsx live
+function TailwindDemo() {
+  return (
+    <div className="p-8 bg-blue-50 flex flex-col items-center gap-4">
+      {/* A simple styled card */}
+      <div className="p-6 rounded-lg shadow-md border border-blue-200 max-w-sm">
+        <h2 className="text-2xl font-bold text-blue-600">Core Concepts</h2>
+        <p className="text-blue-600 mt-2">
+          I am using Flexbox, Spacing, and Typography classes all at once.
+        </p>
+        
+        <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded transition-colors">
+          Get Started
+        </button>
+      </div>
+    </div>
+  );
+}
+
+```
+
+## Summary Checklist
+
+* [x] I understand that `p-4` is actually `16px`.
+* [x] I can change an element's style on hover using `hover:`.
+* [x] I know that `md:` classes only kick in on larger screens.
+* [x] I can center items using `flex` and `justify-center`.
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/tailwindcss/index.mdx b/absolute-beginners/frontend-beginner/tailwindcss/index.mdx
deleted file mode 100644
index e345ed2..0000000
--- a/absolute-beginners/frontend-beginner/tailwindcss/index.mdx
+++ /dev/null
@@ -1 +0,0 @@
-<ComingSoon />
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/tailwindcss/installation-guide.mdx b/absolute-beginners/frontend-beginner/tailwindcss/installation-guide.mdx
new file mode 100644
index 0000000..b23b5da
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/tailwindcss/installation-guide.mdx
@@ -0,0 +1,109 @@
+---
+sidebar_position: 3
+title: "Installing Tailwind with Vite"
+sidebar_label: "3. Setup & Installation"
+description: "A step-by-step guide to adding Tailwind CSS to your React project."
+---
+
+Adding Tailwind to a Vite project is a standard 3-step process. If you already have your React app running from our previous [Vite Setup guide](../react/setting-up-react), you are ready to go!
+
+## Step 1: Install via Terminal
+
+Open your terminal in your project's root folder and run these two commands. This installs Tailwind and its "helpers" (PostCSS and Autoprefixer) which make sure your CSS works on all browsers.
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### What just happened?
+
+Two new files appeared in your folder:
+
+1. **`tailwind.config.js`**: The "Brain" of your styles.
+2. **`postcss.config.js`**: The "Translator" that helps browsers understand Tailwind.
+
+## Step 2: Configure Your Paths
+
+We need to tell Tailwind which files it should look at to find your CSS classes. Open **`tailwind.config.js`** and update the `content` section:
+
+```javascript title="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}", // Scan all React files in the src folder
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+## Step 3: Add the Directives
+
+Now, we need to inject Tailwind's "DNA" into your CSS.
+
+1. Open your **`src/index.css`** file.
+2. Delete everything inside it.
+3. Paste these three "Directives" at the very top:
+
+```css title="src/index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## The "Hello Tailwind" Test
+
+Let's make sure everything is working. Open your **`App.jsx`** and replace the code with this:
+
+```jsx title="App.jsx"
+function App() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-blue-100">
+      <h1 className="text-4xl font-bold text-blue-600 underline">
+        Tailwind is Working!
+      </h1>
+    </div>
+  )
+}
+
+export default App
+```
+
+### Check your browser:
+
+* Is the background light blue? (`bg-blue-100`)
+* Is the text large and bold? (`text-4xl font-bold`)
+* Is everything centered? (`flex justify-center`)
+
+**If yes, congratulations! You just styled a page without writing a single line of traditional CSS.**
+
+## Try it Yourself!
+
+<br />
+
+```jsx live
+function App() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-blue-100">
+      <h1 className="text-4xl font-bold text-blue-600 underline">
+        Tailwind is Working!
+      </h1>
+    </div>
+  )
+}
+```
+
+## Summary Checklist
+
+* [x] I installed the 3 core packages via NPM.
+* [x] I initialized the config files.
+* [x] I pointed Tailwind to my `src` folder.
+* [x] I added the `@tailwind` directives to my CSS file.
+
+:::tip Extension Recommendation
+If you use **VS Code**, search for the extension **"Tailwind CSS IntelliSense"**. It will give you "Autocomplete" suggestions as you type, so you don't have to memorize every class name!
+:::
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/tailwindcss/intro-to-tailwind.mdx b/absolute-beginners/frontend-beginner/tailwindcss/intro-to-tailwind.mdx
new file mode 100644
index 0000000..96b5d05
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/tailwindcss/intro-to-tailwind.mdx
@@ -0,0 +1,73 @@
+---
+sidebar_position: 1
+title: "From CSS Files to Utility Classes"
+sidebar_label: "1. Why Tailwind?"
+description: "Understand the shift from traditional CSS to the utility-first workflow of Tailwind CSS."
+---
+
+If you've built websites before, you know the "Old Way": 
+1. Write your HTML.
+2. Go to a separate `style.css` file.
+3. Invent a class name like `.main-header-button-blue`.
+4. Write 5 lines of CSS.
+5. Repeat until your CSS file is 2,000 lines long and impossible to read.
+
+**Tailwind CSS** changes everything. Instead of writing CSS in a separate file, you use **Utility Classes** directly inside your HTML or React components.
+
+## The Showdown: Old vs. New
+
+Let's look at how we would style a simple "Subscribe" button.
+
+### The Traditional Way (CSS)
+
+You have to jump between two files and "invent" names for every single element.
+
+```html title="index.html"
+<button class="sub-btn">Subscribe</button>
+```
+
+```css title="styles.css"
+.sub-btn {
+  background-color: #3b82f6;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+```
+
+### The Tailwind Way (Utility-First)
+
+You describe exactly how the button should look, right where it lives. No extra files, no invented names.
+
+```html title="index.html"
+<button class="bg-blue-500 text-white px-4 py-2 rounded font-bold">
+  Subscribe
+</button>
+```
+
+## Why is this a "Superpower" for Beginners?
+
+1. **Stop Inverting Names:** You no longer have to struggle with naming things like `inner-wrapper-v2`.
+2. **Visual Speed:** You see your changes instantly without leaving your code.
+3. **The "Safety" Scale:** Tailwind uses a fixed design system. You don't just pick "any" blue; you pick `blue-500`. This ensures your website looks professional and consistent.
+4. **Mobile-First:** Making a site look good on a phone is as easy as adding a prefix like `md:` or `lg:`.
+
+## The "Modern Tech" Overview
+
+In the modern world (2024-2026), developers rarely write "Raw CSS" anymore. Here is where Tailwind sits in the ecosystem:
+
+* **Tailwind:** The "Engine" that styles everything.
+* **PostCSS:** The "Processor" that cleans up your Tailwind code.
+* **Design Systems:** Professional tools like **Figma** now export code directly into Tailwind classes!
+
+## Real-World Analogy: LEGO vs. Clay
+
+* **Standard CSS is like Clay:** You have to mold every single piece from scratch. It takes time, and it’s hard to make two pieces look exactly the same.
+* **Tailwind is like LEGO:** You have pre-made blocks (Utility Classes). You just snap them together to build a masterpiece. It’s faster, cleaner, and looks great every time.
+
+## Summary Checklist
+
+* [x] I understand that Tailwind replaces the need for massive `.css` files.
+* [x] I know that "Utility Classes" describe the style directly (e.g., `bg-red-500`).
+* [x] I understand that Tailwind helps maintain a consistent design.
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/tailwindcss/tailwind-challenge.mdx b/absolute-beginners/frontend-beginner/tailwindcss/tailwind-challenge.mdx
new file mode 100644
index 0000000..61a434b
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/tailwindcss/tailwind-challenge.mdx
@@ -0,0 +1,85 @@
+---
+sidebar_position: 5
+title: "Final Challenge: The Modern Product Card"
+sidebar_label: "5. Tailwind Challenge"
+description: "Put your Tailwind CSS skills to the test by building a responsive, interactive product card."
+---
+
+In this challenge, you will use **Flexbox**, **Spacing**, **Typography**, and **Hover States** to build a sleek Product Card. 
+
+## The Mission Blueprint
+
+Your card must include the following features:
+1.  **Layout**: A vertical card that is centered on the screen.
+2.  **Image Section**: A placeholder for a product image with rounded corners.
+3.  **Badge**: A "New Arrival" badge with a colorful background.
+4.  **Interactivity**: A "Add to Cart" button that changes color and scales up slightly when hovered.
+5.  **Shadows**: Use Tailwind's shadow classes to make the card "pop" off the page.
+
+## The Starter Code (Live Editor)
+
+We have provided the basic structure. Your job is to fill in the empty `className=""` strings to make it look professional. 
+
+### Hints for Success:
+* **Card Container**: Try `bg-white p-4 rounded-3xl shadow-2xl max-w-sm`.
+* **The Badge**: Try `bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-xs font-bold`.
+* **The Button**: Try `w-full bg-black text-white py-3 rounded-xl hover:bg-gray-800 transition-all`.
+
+```jsx live
+function ProductCard() {
+  return (
+    <div className="flex justify-center items-center bg-gray-50 p-10">
+      
+      {/* 1. Main Card Container */}
+      <div className="bg-white p-5 rounded-3xl shadow-xl max-w-xs border border-gray-100">
+        
+        {/* 2. Image Placeholder */}
+        <div className="bg-gray-200 h-48 rounded-2xl mb-4 flex items-center justify-center text-gray-400 font-bold">
+          [ Product Image ]
+        </div>
+
+        {/* 3. Badge */}
+        <span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-bold uppercase">
+          In Stock
+        </span>
+
+        {/* 4. Text Content */}
+        <h2 className="text-xl font-extrabold text-gray-900 mt-3">Wireless Headphones</h2>
+        <p className="text-gray-500 text-sm mt-1">
+          Experience high-quality sound with noise-canceling technology.
+        </p>
+
+        {/* 5. Pricing and Action */}
+        <div className="flex items-center justify-between mt-6">
+          <span className="text-2xl font-bold text-gray-900">$199</span>
+          
+          {/* CHALLENGE: Add hover:scale-105 to this button! */}
+          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-xl font-semibold transition-transform duration-200">
+            Buy Now
+          </button>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+```
+
+## Level Up: The "Pro" Tweaks
+
+If you finished the basic card, try these advanced Tailwind features:
+
+1. **Gradient Text**: Use `text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500` on the title.
+2. **Dark Mode**: Add `dark:bg-gray-800` to the card and `dark:text-white` to the text to see how it looks in a dark theme.
+3. **Group Hover**: Make the image "zoom in" when you hover anywhere on the card using the `group` and `group-hover:` classes.
+
+## Why this Matters
+
+By completing this challenge, you have moved from "knowing" classes to "composing" them. Professional developers don't just use `p-4`; they understand how to combine `shadow`, `rounded`, `flex`, and `transition` to create a high-end **User Experience (UX)**.
+
+:::success Roadmap Complete!
+You have successfully finished the **Tailwind CSS** module and the entire **Frontend Absolute Beginner** path at **CodeHarborHub**.
+
+You started with basic HTML, moved into React logic, added Testing with Vitest, and finished with Modern Styling. You are now ready to build real projects!
+:::
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/tailwindcss/tailwind-in-html.mdx b/absolute-beginners/frontend-beginner/tailwindcss/tailwind-in-html.mdx
new file mode 100644
index 0000000..dcb53a0
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/tailwindcss/tailwind-in-html.mdx
@@ -0,0 +1,64 @@
+---
+sidebar_position: 1.5
+title: "Using Tailwind in Pure HTML"
+sidebar_label: "2. Tailwind in HTML"
+description: "Learn the quickest way to use Tailwind CSS using the Play CDN for simple HTML projects."
+---
+
+Before we jump into the "Professional Setup" with React and Vite, let's see how Tailwind works in a simple, single HTML file. This is the fastest way to practice and experiment!
+
+## The "Play CDN" Method
+
+You don't need to install anything to start playing with Tailwind. You can just drop a **Script Tag** into your HTML `<head>`, and Tailwind will start working instantly.
+
+### Try This Example:
+
+Create a file named `index.html` on your computer and paste this:
+
+```html title="index.html"
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 flex items-center justify-center h-screen">
+  <div class="bg-white p-8 rounded-2xl shadow-lg text-center border-t-4 border-blue-500">
+    <h1 class="text-3xl font-bold text-gray-800">HTML + Tailwind!</h1>
+    <p class="text-gray-600 mt-2">No CSS file needed. Just classes.</p>    
+    <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-full transition">
+      Explore More
+    </button>
+  </div>
+</body>
+</html>
+```
+
+## What’s Happening Under the Hood?
+
+When you add the `<script src="https://cdn.tailwindcss.com"></script>` tag:
+
+1. **Scanning:** The script looks at every class name you wrote (like `bg-gray-100` or `rounded-full`).
+2. **Generating:** It instantly generates the corresponding CSS in the background.
+3. **Injecting:** It applies those styles to your page in real-time.
+
+## When should you use the CDN?
+
+The Play CDN is amazing for learning, but you should know when to use it and when to stop.
+
+| Use the CDN for... | Use the Vite Setup for... |
+| --- | --- |
+| Quick prototypes & practice. | Real-world production websites. |
+| Single-page simple HTML projects. | Large React/Next.js applications. |
+| Learning the class names. | Optimizing for speed and performance. |
+
+## Summary Checklist
+
+* [x] I know I can use Tailwind via a simple `<script>` tag.
+* [x] I understand that the CDN is for **learning and prototyping** only.
+* [x] I successfully built a styled card in a single `.html` file.
+
+:::info Pro-Tip for CodeHarborHub Students
+If you are used to the "Old Way" of linking a `<link rel="stylesheet" href="style.css">`, the CDN method feels very familiar. It’s the perfect "Training Wheels" before we move to the professional Vite installation!
+:::
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/vitest/_category_.json b/absolute-beginners/frontend-beginner/vitest/_category_.json
new file mode 100644
index 0000000..a8109c1
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/vitest/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Vitest",
+  "position": 8,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn the art of automated testing. Discover how to use Vitest to write fast, reliable tests that ensure your code works perfectly every time."
+  }
+}
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/vitest/index.mdx b/absolute-beginners/frontend-beginner/vitest/index.mdx
deleted file mode 100644
index e345ed2..0000000
--- a/absolute-beginners/frontend-beginner/vitest/index.mdx
+++ /dev/null
@@ -1 +0,0 @@
-<ComingSoon />
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/vitest/intro-to-testing.mdx b/absolute-beginners/frontend-beginner/vitest/intro-to-testing.mdx
new file mode 100644
index 0000000..54e4e6e
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/vitest/intro-to-testing.mdx
@@ -0,0 +1,65 @@
+---
+sidebar_position: 1
+title: "Why Do We Test? The Developer's Safety Net"
+sidebar_label: 1. Intro to Testing
+description: "Discover why automated testing is the secret weapon of professional developers."
+---
+
+As a beginner, you probably spend a lot of time writing code, saving it, and then refreshing your browser to see if it works. This is called **Manual Testing**.
+
+But what happens when your app grows? What if you change a button on the Home Page and it accidentally breaks the Checkout Page? You can't manually check every single page every time you make a change.
+
+That is where **Automated Testing** comes in.
+
+## Manual vs. Automated Testing
+
+Think of it like a **Security System** for your code:
+
+| Manual Testing | Automated Testing (Vitest) |
+| :--- | :--- |
+| You click buttons to see if they work. | A script clicks them for you in milliseconds. |
+| Easy to forget a step. | Never forgets; checks everything every time. |
+| Gets slower as the app grows. | Stays fast no matter how big the app gets. |
+| You hope it works. | **You know it works.** |
+
+## How Vitest Works
+
+**Vitest** is a testing framework. It looks at your code, runs it with specific "scenarios," and checks if the output matches your expectations.
+
+### The "Logic" of a Test
+
+Every test follows a simple 3-step pattern called **AAA**:
+
+1.  **Arrange:** Set up the data (e.g., `let x = 2; let y = 2;`).
+2.  **Act:** Run the function you want to test (e.g., `add(x, y)`).
+3.  **Assert:** Check if the result is what you expected (e.g., `expect result to be 4`).
+
+## The Developer's Rhythm: Red, Green, Refactor
+
+Professional developers use a workflow that ensures their code is always "bulletproof." 
+
+```mermaid
+graph TD
+    A[🔴 RED: Write a test that fails] -->|Logic: What should happen?| B[🟢 GREEN: Write just enough code to pass]
+    B -->|Logic: Make it work!| C[🔵 REFACTOR: Clean up and optimize]
+    C -->|Logic: Make it pretty!| A
+```
+
+1. **Red:** You write a test for a feature that doesn't exist yet. The test fails (Red).
+2. **Green:** You write the simplest code possible to make the test pass (Green).
+3. **Refactor:** You clean up your code, knowing the test will tell you immediately if you break something.
+
+## Real-World Analogy: The Smoke Alarm
+
+A test is like a **Smoke Alarm** in your house. Most of the time, it sits there quietly doing nothing. But the moment there is a "fire" (a bug) in your code, it screams at you so you can fix it before the whole house burns down.
+
+## Summary Checklist
+
+* [x] I understand that testing saves time in the long run.
+* [x] I know the difference between manual and automated testing.
+* [x] I understand the **Red-Green-Refactor** cycle.
+* [x] I'm ready to build my own "Safety Net."
+
+:::tip Did you know?
+Companies like **Google** and **Amazon** run millions of automated tests every single day. They literally cannot ship code to users unless every single "Green Light" is on!
+:::
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/vitest/setting-up-vitest.mdx b/absolute-beginners/frontend-beginner/vitest/setting-up-vitest.mdx
new file mode 100644
index 0000000..f4b0993
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/vitest/setting-up-vitest.mdx
@@ -0,0 +1,70 @@
+---
+sidebar_position: 2
+title: "Setting Up Vitest"
+sidebar_label: "2. Setup & Installation"
+description: "Learn how to add Vitest to your Vite-React project and configure your test environment."
+---
+
+Adding Vitest to your project is a quick 3-step process. Once it's set up, you'll have a "Testing Dashboard" that watches your code changes in real-time.
+
+## Step 1: Install the Package
+
+Open your terminal in your project's root folder. We need to install Vitest as a **DevDependency** because we only need testing tools while we are developing, not when the website is live for users.
+
+```bash
+npm install -D vitest
+```
+
+## Step 2: Configure Your Scripts
+
+To make running tests easy, we need to add a shortcut to our `package.json` file. This allows us to simply type `npm test` instead of a long command.
+
+1. Open your **`package.json`** file.
+2. Find the `"scripts"` section.
+3. Add the `"test": "vitest"` line:
+
+```json title="package.json" {6}
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  }
+}
+
+```
+
+## Step 3: Launch the Test Runner
+
+Now, let's see if the engine starts. Run this command in your terminal:
+
+```bash
+npm test
+```
+
+### What should I see?
+
+Since you haven't written any test files yet, Vitest will show you a message like this:
+
+> `No test files found, exiting with code 1`
+
+**Don't panic!** This is actually a good sign. It means Vitest is installed and looking for work. It's like a security guard reporting for duty at an empty building.
+
+## How Vitest "Finds" Your Tests
+
+By default, Vitest is like a detective looking for specific clues. It will automatically run any file that matches these naming patterns:
+
+* `something.test.js`
+* `something.spec.js`
+* `__tests__/anyfile.js`
+
+## Pro-Tip: The "Watch" Mode
+
+Unlike other tools, Vitest starts in **Watch Mode** by default. This means you don't have to restart the command every time you fix a bug. Keep the terminal open, save your file, and Vitest will re-check your code in the blink of an eye!
+
+## Summary Checklist
+
+* [x] I installed Vitest using `npm install -D vitest`.
+* [x] I added the `test` script to my `package.json`.
+* [x] I understand that `.test.js` is the secret handshake for test files.
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/vitest/vitest-challenge.mdx b/absolute-beginners/frontend-beginner/vitest/vitest-challenge.mdx
new file mode 100644
index 0000000..22e8f46
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/vitest/vitest-challenge.mdx
@@ -0,0 +1,94 @@
+---
+sidebar_position: 4
+title: "Final Challenge: The Bulletproof Utility"
+sidebar_label: "4. Vitest Challenge"
+description: "Put your testing skills to the test by writing a suite for a String and Math utility."
+---
+
+A developer on your team wrote a small library called `stringUtils.js`. They claim it works perfectly, but we don't believe them until we see the **Green Checkmarks**!
+
+## Step 1: Prepare the "Source of Truth"
+
+Create a file in your `src/` folder named `stringUtils.js` and paste this code:
+
+```javascript title="src/stringUtils.js"
+export function reverseString(str) {
+  return str.split('').reverse().join('');
+}
+
+export function isPalindrome(word) {
+  const reversed = reverseString(word);
+  return word.toLowerCase() === reversed.toLowerCase();
+}
+
+export function getCartTotal(items) {
+  return items.reduce((total, item) => total + item.price, 0);
+}
+
+```
+
+## Step 2: Your Mission (The Test Suite)
+
+Create a file named `stringUtils.test.js`. Your goal is to write **at least 4 tests** that cover these scenarios:
+
+### Task Checklist:
+
+1. **Reverse Test:** Does `reverseString("react")` return `"tcaer"`?
+2. **Palindrome Test (Positive):** Does `isPalindrome("racecar")` return `true`?
+3. **Palindrome Test (Negative):** Does `isPalindrome("hello")` return `false`?
+4. **Array Test:** Does `getCartTotal` correctly add up an array of objects like `[{price: 10}, {price: 20}]`?
+
+## Starter Template
+
+If you get stuck, use this as your foundation:
+
+```javascript title="src/stringUtils.test.js"
+import { expect, test, describe } from 'vitest';
+import { reverseString, isPalindrome, getCartTotal } from './stringUtils';
+
+describe('String and Math Utilities', () => {
+
+  test('should reverse a string correctly', () => {
+    // Write your expect() here
+  });
+
+  test('should identify a palindrome', () => {
+     // Hint: expect(isPalindrome("madam")).toBe(true)
+  });
+
+  test('should calculate the total price of cart items', () => {
+    const cart = [
+      { name: 'Laptop', price: 10000 },
+      { name: 'Mouse', price: 500 }
+    ];
+    // Write your expect() here using .toBe()
+  });
+
+});
+
+```
+
+## Level Up: The "Edge Case" Challenge
+
+The best testers look for ways to "break" the code. Try adding these tests:
+
+* **Empty String:** What happens if you call `reverseString("")`?
+* **Empty Cart:** Does `getCartTotal([])` return `0`?
+* **Case Sensitivity:** Does `isPalindrome("Madam")` work? (Check the source code—did the developer handle uppercase letters?)
+
+## Graduation Day!
+
+Once your terminal shows **All Tests Passed**, you have officially mastered the basics of Frontend Development.
+
+### What you have achieved:
+
+1. **HTML/CSS/JS:** You built the foundation.
+2. **React:** You learned to think in components and manage state.
+3. **Vite:** You mastered modern build tools.
+4. **Vitest:** You built a safety net for your code.
+
+:::success 🎉 CONGRATULATIONS!
+You have successfully navigated the **CodeHarborHub Frontend Beginner** map. You are no longer just a "coder", you are a **Developer**.
+
+Ready for the next adventure? Head over to our **Full-Stack Roadmaps** to start learning Backend, Databases, and API integration!
+:::
\ No newline at end of file
diff --git a/absolute-beginners/frontend-beginner/vitest/writing-first-test.mdx b/absolute-beginners/frontend-beginner/vitest/writing-first-test.mdx
new file mode 100644
index 0000000..cacd19a
--- /dev/null
+++ b/absolute-beginners/frontend-beginner/vitest/writing-first-test.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_position: 3
+title: "Writing Your First Test"
+sidebar_label: "3. The 'Expect' Syntax"
+description: "Learn the language of testing: describe, test, and expect."
+---
+
+In Vitest, testing feels like writing a sentence. You describe a scenario and then check if the outcome matches your expectations.
+
+## The Three Keywords of Testing
+
+To write a test, you only need to learn three main words from the Vitest library:
+
+1.  **`describe`**: Used to group related tests together (e.g., "User Authentication" or "Math Functions").
+2.  **`test`** (or `it`): The actual individual test case.
+3.  **`expect`**: The tool used to check if a value is correct.
+
+## Example: Testing a Greeting Function
+
+Let's imagine you have a simple function in a file called `greet.js`.
+
+```javascript title="src/utils/greet.js"
+export function getGreeting(name) {
+  return `Hello, ${name}! Welcome to CodeHarborHub.`;
+}
+```
+
+Now, we create a **Test File** right next to it called `greet.test.js`.
+
+```javascript title="src/utils/greet.test.js"
+import { expect, test, describe } from 'vitest';
+import { getGreeting } from './greet';
+
+describe('Greeting Utility', () => {
+
+  test('should return a personalized welcome message', () => {
+    // 1. Arrange (Set up data)
+    const name = "Ajay";
+
+    // 2. Act (Run the function)
+    const result = getGreeting(name);
+
+    // 3. Assert (Check the result)
+    expect(result).toBe("Hello, Ajay! Welcome to CodeHarborHub.");
+  });
+
+});
+```
+
+## Common "Matchers"
+
+Matchers are the methods we attach to `expect()` to check values. Here are the ones you will use 90% of the time:
+
+| Matcher | What it checks | Example |
+| --- | --- | --- |
+| `.toBe()` | Exact equality (numbers, strings) | `expect(2+2).toBe(4)` |
+| `.toEqual()` | Deep equality (objects, arrays) | `expect([1,2]).toEqual([1,2])` |
+| `.toContain()` | If an item exists in an array | `expect(colors).toContain('red')` |
+| `.toBeDefined()` | If a variable is not `undefined` | `expect(user).toBeDefined()` |
+| `.not` | The opposite of any matcher | `expect(price).not.toBe(0)` |
+
+## Running Your Test
+
+1. Save your files.
+2. Look at your terminal where `npm test` is running.
+3. You should see a beautiful **Green Checkmark**!
+
+<br />
+
+```bash
+ ✓ src/utils/greet.test.js (1)
+   ✓ Greeting Utility (1)
+     ✓ should return a personalized welcome message
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+
+```
+
+## The "Break It" Experiment
+
+The best way to learn testing is to **try to fail**.
+
+* Change the expected string in your test to `"Hi, Ajay"`.
+* Save the file.
+* Watch the terminal turn **Red**. Vitest will show you exactly what it expected vs. what it actually got. This is how you find bugs!
+
+## Summary Checklist
+
+* [x] I know that `describe` groups tests and `test` runs them.
+* [x] I understand the **Arrange-Act-Assert** pattern.
+* [x] I know the difference between `.toBe()` and `.toEqual()`.
+* [x] I've seen my first green checkmark in the terminal.
\ No newline at end of file