diff --git a/docs/css/modern-css-tools/browser-devtools.mdx b/docs/css/modern-css-tools/browser-devtools.mdx
index e345ed2..97c470d 100644
--- a/docs/css/modern-css-tools/browser-devtools.mdx
+++ b/docs/css/modern-css-tools/browser-devtools.mdx
@@ -1 +1,133 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "Browser Developer Tools for CSS"
+description: "Master the art of debugging and styling CSS with powerful browser developer tools. Learn to inspect elements, modify styles, simulate responsive designs, and more."
+tags: [CSS, Developer Tools, Browser, Debugging, Front-end]
+---
+
+Browser Developer Tools are an indispensable set of utilities built directly into web browsers. For front-end developers, especially when working with CSS, these tools are your best friend for debugging, inspecting, and live-editing styles. This tutorial will guide you through the essential features of browser DevTools, primarily focusing on their application to CSS.
+
+<AdsComponent />
+<br />
+
+## Opening Developer Tools
+
+Most browsers offer multiple ways to open Developer Tools:
+
+1. **Right-click an element** on a webpage and select "Inspect" (or "Inspect Element"). This will open the DevTools and automatically select the element you clicked in the Elements panel.
+2. **Keyboard Shortcut:**
+    * **Chrome/Edge/Brave:** `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS)
+    * **Firefox:** `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS)
+    * **Safari:** `Cmd+Option+C` (macOS) - Ensure "Show Develop menu in menu bar" is enabled in Safari Preferences > Advanced.
+3. **Browser Menu:** Look for "More Tools" > "Developer Tools" in Chrome/Edge, or "Web Developer" > "Toggle Tools" in Firefox.
+
+Once opened, you'll typically see a panel docked to the side or bottom of your browser window.
+
+## The Elements Panel: Your CSS Command Center
+
+The Elements panel is where you'll spend most of your time working with CSS. It displays the HTML structure of the page and, crucially, the computed styles for each selected element.
+
+![Browser DevTools Elements Panel](https://developer.chrome.com/static/docs/devtools/css/reference/image/an-example-a-selected-el-73f5c083a4f5_856.png)
+
+### 1. Inspecting Elements
+
+When you select an element in the HTML tree of the Elements panel, the right-hand sidebar will update to show its styles.
+
+* **Styles Tab:** This is the most frequently used tab. It lists all the CSS rules applied to the selected element, ordered by specificity and source. You can see which rules are active, which are overridden (crossed out), and where they come from (e.g., `style.css:25`).
+    ![Styles Tab](https://developer.chrome.com/static/docs/devtools/css/reference/image/various-links-highlighted-4c3e7fc090e71_856.png)
+
+### 2. Live Editing CSS
+
+One of the most powerful features is the ability to live-edit styles directly in the browser.
+
+* **Modify Existing Properties:** Click on any property value (e.g., `font-size: 16px;`) and type a new value. The changes are immediately reflected on the page.
+* **Add New Properties:** Click on an empty line within a CSS rule block to add a new property-value pair.
+* **Toggle Properties:** Next to each declaration, there's a checkbox. Unchecking it temporarily disables that specific CSS property, which is excellent for isolating issues.
+* **Add New CSS Rules:** At the top of the Styles tab, you can often find a `+` button or an area to add a new CSS rule for the selected element. This is useful for testing entirely new styles.
+
+<video controls className="w-full h-auto">
+    <source src="https://developer.chrome.com/static/docs/devtools/css/reference/video/NJdAV9UgKuN8AhoaPBquL7giZQo1/vDfXTULIyNIJXVw6lKvf.mp4" type="video/mp4" />
+    Your browser does not support the video element.
+</video>
+
+### 3. Understanding the Box Model
+
+The "Computed" tab (often next to "Styles") displays the resolved values for all CSS properties. More importantly, it features an interactive **Box Model** diagram.
+
+![Box Model](https://developer.chrome.com/static/docs/devtools/css/reference/image/the-computed-tab-577802944e549.svg)
+
+This diagram visually represents the margin, border, padding, and content area of the selected element. Hovering over parts of the diagram will highlight the corresponding area on the actual webpage, making it incredibly useful for debugging spacing issues.
+
+<AdsComponent />
+<br />
+
+## Other Important Panels for CSS
+
+### 1. Device Mode / Responsive Design Mode
+
+![Device Mode](https://developer.chrome.com/static/docs/devtools/device-mode/image/device-mode-toggle_856.png)
+
+This mode (usually toggled by an icon that looks like a mobile phone and tablet) allows you to simulate different screen sizes, resolutions, and even device pixel ratios. It's crucial for testing and developing responsive designs without needing multiple physical devices. You can drag the edges of the viewport or select predefined device presets.
+
+![Responsive Design Mode](https://developer.chrome.com/static/docs/devtools/device-mode/image/the-device-toolbar-ffe4a87bfd6fc_856.png)
+
+### 2. Sources Panel
+
+While primarily for JavaScript debugging, the Sources panel allows you to view and modify your actual CSS files. You can set breakpoints within your CSS (e.g., on a style declaration inside a `@media` query) to see when and how styles are applied. Any changes made here are also live, but remember they are temporary until you save them to your actual project files.
+
+### 3. Console Panel
+
+Though mostly for JavaScript, the Console can sometimes show CSS-related errors or warnings, especially if you have issues with `@import` rules or invalid syntax that the browser can't parse.
+
+## Advanced CSS Debugging Techniques
+
+### Forced States (Hover, Focus, Active, Visited)
+
+In the Styles tab, you'll often find an option (e.g., `:hov` in Chrome, or a "Toggle Element State" icon) that allows you to force an element into a `:hover`, `:focus`, `:active`, or `:visited` state. This is incredibly useful for styling and debugging interactive elements without constantly moving your mouse or tabbing.
+
+![Forced States](https://developer.chrome.com/static/blog/new-in-devtools-123/image/focused-page_856.png)
+
+### CSS Grid and Flexbox Inspectors
+
+Modern browser DevTools come with excellent visual inspectors for CSS Grid and Flexbox layouts. When an element has `display: grid` or `display: flex` applied, a special icon appears next to it in the Elements panel. Clicking this icon overlays visual guides on the page, showing grid lines, track sizes, and flex item distribution.
+
+<Tabs>
+  <TabItem value="Grid Inspectors" label="Grid Inspectors" default>
+    ![Grid Inspectors](https://developer.chrome.com/static/docs/devtools/css/grid/image/discover-grid-ae97f2f0f76fa_856.png)
+  </TabItem>
+  <TabItem value="Flex Inspectors" label="Flex Inspectors">
+    ![Flex Inspectors](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/hover-a-flexbox-element-97868d0b93e3e_856.png)
+  </TabItem>
+</Tabs>
+
+<AdsComponent />
+<br />
+
+
+## Visualizing the DevTools Workflow
+
+Here's a Mermaid graph illustrating a common CSS debugging workflow using browser DevTools:
+
+```mermaid
+graph TD
+    A[Start: Encounter CSS Issue] --> B{Open DevTools};
+    B -- Right-Click Element --> C[Elements Panel: Inspect Element];
+    B -- Keyboard Shortcut --> C;
+    C --> D[Styles Tab: Review Applied CSS];
+    D -- Styles Overridden? --> E{Why? Specificity? Source Order?};
+    E -- Yes --> F[Adjust Specificity / Order in Editor];
+    E -- No --> G[Live Edit CSS in DevTools];
+    G -- Test Changes --> H{Looks Good?};
+    H -- Yes --> I[Copy Changes to Source File];
+    H -- No --> J[Try Different CSS Properties / Values];
+    J --> G;
+    D -- Spacing Issue? --> K[Computed Tab: Box Model];
+    K -- Inspect Margins/Padding/Border --> G;
+    D -- Responsiveness Issue? --> L[Device Mode];
+    L -- Simulate Devices --> G;
+    F --> A;
+    I --> M[End: Issue Resolved];
+```
+
+## Conclusion
+
+Browser Developer Tools are an incredibly powerful and essential suite of tools for anyone working with CSS. Mastering them will significantly speed up your debugging process, help you understand how styles are applied, and empower you to build more robust and responsive web designs. Practice regularly with these tools, and they will become an invaluable part of your development workflow.
\ No newline at end of file
diff --git a/docs/css/modern-css-tools/css-in-js.mdx b/docs/css/modern-css-tools/css-in-js.mdx
index e345ed2..98695d8 100644
--- a/docs/css/modern-css-tools/css-in-js.mdx
+++ b/docs/css/modern-css-tools/css-in-js.mdx
@@ -1 +1,156 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "CSS-in-JS (Component-Based Styling)"
+description: "Explore CSS-in-JS, a paradigm that integrates CSS directly into JavaScript components, offering localized scoping, dynamic styling, and enhanced component portability in modern frameworks like React and Vue."
+keywords: [CSS-in-JS, component styling, styled-components, Emotion, JSS, component portability, scoped CSS, dynamic styling]
+tags: [CSS-in-JS, component styling, styled-components, Emotion, JSS, component portability, scoped CSS, dynamic styling]
+sidebar_label: CSS-in-JS
+---
+
+**CSS-in-JS** is a modern styling paradigm where CSS is authored and managed directly within JavaScript files, typically alongside the component logic. This approach emerged to solve challenges inherent in large, component-based applications, such as global CSS conflicts, managing dependencies, and enabling truly dynamic, state-driven styling.
+
+The primary benefit is **local and automatic scoping**: every component gets a unique set of styles, eliminating global conflicts and making components entirely self-contained and portable.
+
+<AdsComponent />
+<br />
+
+## 1. Why CSS-in-JS? The Problems it Solves
+
+Traditional CSS, even with preprocessors, often relies on naming conventions (like BEM) to prevent conflicts. CSS-in-JS handles scoping automatically.
+
+### A. Automatic Vendor Prefixing
+
+Most CSS-in-JS libraries automatically handle vendor prefixes (like PostCSS Autoprefixer) without any separate configuration.
+
+### B. Scoped Styling (No Conflicts)
+
+The library generates a unique, hashed class name for every style block, applying it only to the intended component. This eliminates the risk of global styles accidentally overwriting component styles.
+
+### C. Dynamic, State-Driven Styling
+
+Because the styles are defined in JavaScript, they can easily access component props and state. This allows for complex, instant visual changes without needing to toggle dozens of utility classes.
+
+### D. Component Portability
+
+Styles are bundled directly with the component file. When you move a component to a new project or environment, its styles travel with it, making it truly modular.
+
+## 2. Popular CSS-in-JS Libraries
+
+Several libraries implement the CSS-in-JS philosophy, with **Styled Components** and **Emotion** being the most widely used.
+
+### A. Styled Components
+
+Styled Components uses **Tagged Template Literals** (the backtick syntax in JavaScript) to allow developers to write actual CSS syntax within their JavaScript files. It is known for its elegant API and focus on creating reusable React components with styles attached.
+
+#### Example: Styled Components
+
+```javascript title="Header.js"
+import styled from 'styled-components';
+
+// 1. Define a styled component (a button, in this case)
+const PrimaryButton = styled.button`
+  /* Standard CSS syntax used here */
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: ${props => (props.primary ? '#1e3a8a' : '#ccc')};
+
+  &:hover {
+    opacity: 0.9;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+// 2. Use it in the render method like a normal component
+function Header() {
+  return (
+    <div>
+      <PrimaryButton primary>Submit</PrimaryButton>
+      <PrimaryButton>Cancel</PrimaryButton>
+    </div>
+  );
+}
+```
+
+<AdsComponent />
+<br />
+
+### B. Emotion
+
+Emotion is highly flexible and can be used with both the Tagged Template Literal approach (similar to Styled Components) and an **Object Style** approach. It is known for its high performance and smaller footprint.
+
+#### Example: Emotion (Object Styles)
+
+```javascript title="Header.js"
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+const primaryStyle = css({
+  backgroundColor: '#1e3a8a',
+  color: 'white',
+  padding: '10px 20px',
+  borderRadius: '5px',
+});
+
+// Use the css object directly in the JSX 'css' prop
+function Header() {
+  return (
+    <button css={primaryStyle}>
+      Emotion Button
+    </button>
+  );
+}
+```
+
+## 3. How CSS-in-JS Works
+
+When a component is rendered, CSS-in-JS libraries follow these steps:
+
+1.  **Style Extraction:** The CSS defined inside the JavaScript component is extracted.
+2.  **Unique Hashing:** The library hashes the CSS content to generate a unique class name (e.g., `sc-1a2b3c`).
+3.  **Injection:** The actual CSS rules are injected into a `<style>` tag in the document's `<head>`.
+4.  **Application:** The generated unique class name is automatically applied to the rendered HTML element.
+
+<AdsComponent />
+<br />
+
+## 4. Advanced Concepts
+
+### A. Theming
+
+CSS-in-JS libraries offer robust solutions for global theming. A **Provider** component (e.g., `<ThemeProvider>`) wraps the application, injecting theme variables (like color palettes or spacing units) that can be accessed by any styled component. This allows for easy dark/light mode toggling or brand changes.
+
+### B. Server-Side Rendering (SSR)
+
+For performance, styles need to be pre-rendered on the server so that the initial page load displays styles immediately (preventing the "flash of unstyled content" or FOUC). All major CSS-in-JS libraries provide tools to efficiently extract and inject critical CSS during the SSR process.
+
+### C. Performance and Headaches
+
+While popular, CSS-in-JS is not without drawbacks:
+
+  * **Runtime Overhead:** Styles are computed at runtime, which can slightly impact performance, especially on first load.
+  * **DevTools Clutter:** The generated unique class names can make inspecting elements in browser developer tools more challenging than using readable BEM class names.
+  * **Learning Curve:** It requires developers to be comfortable with both JavaScript and CSS syntax to manage styles effectively.
+
+## Try it Yourself!
+
+Now that you understand the basics of CSS-in-JS, why not try it out yourself? You can use online editors like CodePen to experiment with CSS-in-JS libraries directly in the browser.
+
+<CodePenEmbed 
+  title="CodeHarborHub CSS in Js Demo"
+  penId="wBGQVmd"
+/>
+
+## 5. Resources for Further Learning
+
+To implement CSS-in-JS in a real-world application, start with the official guides of the two leading libraries.
+
+### A. Styled Components
+
+  * **Official Documentation:** [https://styled-components.com/](https://styled-components.com/docs)
+  * **Theming Guide:** Essential for large applications. [https://styled-components.com/docs/advanced\#theming](https://www.google.com/search?q=https://styled-components.com/docs/advanced%23theming)
+
+### B. Emotion
+
+  * **Official Documentation:** [https://emotion.sh/docs/introduction](https://emotion.sh/docs/introduction)
+  * **CSS Prop:** The powerful feature for injecting dynamic styles directly into JSX elements. [https://emotion.sh/docs/css-prop](https://emotion.sh/docs/css-prop)
diff --git a/docs/css/modern-css-tools/postcss.mdx b/docs/css/modern-css-tools/postcss.mdx
index e345ed2..685a090 100644
--- a/docs/css/modern-css-tools/postcss.mdx
+++ b/docs/css/modern-css-tools/postcss.mdx
@@ -1 +1,146 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "PostCSS (Transforming CSS with Plugins)"
+description: "A comprehensive guide to PostCSS, a tool that uses JavaScript plugins to automate tedious CSS tasks, add future CSS features (Polyfills), and optimize production stylesheets."
+keywords: [PostCSS, CSS processor, JavaScript plugins, Autoprefixer, CSS Modules, CSS optimization, future CSS, custom properties]
+tags: [PostCSS, CSS processor, JavaScript plugins, Autoprefixer, CSS Modules, CSS optimization, future CSS, custom properties]
+sidebar_label: PostCSS
+---
+
+**PostCSS** is not a CSS preprocessor (like Sass or Less) but rather a powerful **CSS post-processor** and ecosystem of JavaScript tools.
+
+PostCSS acts as a **pipeline** that takes standard CSS (or even preprocessor output) and transforms it using a series of small, specialized **plugins**. It allows developers to use future CSS features today, optimize final production files, and automate tedious styling tasks.
+
+The most famous plugin in the PostCSS ecosystem is **Autoprefixer**, which automatically adds necessary vendor prefixes (`-webkit-`, `-moz-`, etc.) to CSS properties based on specified browser support targets.
+
+<AdsComponent />
+<br />
+
+## 1. PostCSS vs. Preprocessors
+
+It's common to confuse PostCSS with preprocessors, but their roles are fundamentally different:
+
+| Feature | Preprocessors (Sass/Less/Stylus) | PostCSS |
+| :--- | :--- | :--- |
+| **Role** | Extends CSS with non-standard features (variables, nesting, mixins, logic). | Transforms standard CSS (or SCSS output) using plugins. |
+| **Input** | A proprietary language (SCSS, LESS, STYL). | Standard CSS syntax. |
+| **Output** | Standard CSS. | Optimized, transformed, standards-compliant CSS. |
+| **Example Task** | Define a color variable (`$primary-color`). | Add vendor prefixes to `display: flex`. |
+
+**Crucially, PostCSS and preprocessors often work together.** A typical setup involves writing SCSS, compiling it to standard CSS, and then running that CSS through PostCSS for final processing and optimization.
+
+## 2. The PostCSS Pipeline
+
+PostCSS processes CSS files in three main stages:
+
+### A. Parsing
+
+The PostCSS parser converts the input CSS string into an abstract syntax tree (AST). This is a language-agnostic, tree-like data structure that represents the CSS rules, selectors, and declarations.
+
+### B. Plugin Execution (Transformation)
+
+PostCSS iterates through the AST, and each loaded JavaScript plugin performs its specific task: adding a vendor prefix, converting a custom property, or removing comments.
+
+### C. Stringification
+
+The modified AST is converted back into a standard CSS string, which is then written to the output file.
+
+<AdsComponent />
+<br />
+
+## 3. Essential PostCSS Plugins
+
+The power of PostCSS lies in its modular ecosystem. You only install the plugins you need.
+
+### A. Autoprefixer (The Most Popular Plugin)
+
+**Role:** Automatically adds, removes, and updates vendor prefixes based on the targeted browser list (defined in a `browserslist` file or project config).
+
+**Benefit:** You can write standard CSS (e.g., `display: flex`) without worrying about writing `-webkit-flex`. Autoprefixer handles it automatically, keeping your source code clean.
+
+| Input CSS | Output CSS (for legacy browsers) |
+| :--- | :--- |
+| `a { display: flex; }` | `a { display: -webkit-box; display: -ms-flexbox; display: flex; }` |
+
+### B. PostCSS Preset Env
+
+**Role:** Acts as a collection of plugins that allow you to use features from the latest CSS specifications **today**. This is often called a "CSS Polyfill."
+
+**Benefit:** You can use powerful new CSS features like **Custom Media Queries** or the new **Color Functions** (e.g., `color-mod()`) without waiting for full browser support. It transforms the new syntax into widely supported legacy syntax.
+
+| Input CSS (Future) | Output CSS (Today) |
+| :--- | :--- |
+| `:root { --main-color: blue; }` | (Remains the same, but allows future use) |
+| `@custom-media --md-viewport (width >= 750px);` | (Transforms to standard `@media` query) |
+
+### C. CSS Nano
+
+**Role:** A powerful minifier that intelligently compresses CSS code for production deployment.
+
+**Benefit:** Beyond simply removing whitespace, CSS Nano performs complex optimizations like combining duplicate rules, reducing color values (e.g., `#ff0000` to `red`), and rewriting `z-index` properties.
+
+### D. PostCSS Nesting
+
+**Role:** Allows you to use the nesting syntax from Sass directly in standard CSS, often preferred by developers who don't want the full features of a preprocessor but love nesting.
+
+<AdsComponent />
+<br />
+
+## 4. Configuration and Usage
+
+PostCSS is typically integrated into your project using configuration files and build tools (like Webpack, Gulp, or Vite).
+
+### A. Example Configuration (`postcss.config.js`)
+
+You define an array of plugins that the CSS pipeline should execute in order:
+
+```javascript title="postcss.config.js"
+module.exports = {
+  plugins: [
+    // 1. PostCSS Nesting allows us to use nesting in our CSS source files
+    require('postcss-nesting'), 
+
+    // 2. Autoprefixer runs next, adding prefixes based on our defined browserlist
+    require('autoprefixer'), 
+
+    // 3. CSS Nano runs last, minifying the final, prefixed CSS
+    require('cssnano')({
+      preset: 'default',
+    }),
+  ],
+};
+```
+
+### B. Browserslist
+
+Many PostCSS plugins rely on a configuration file named `.browserslistrc` to determine which browsers and versions need support.
+
+```markdown
+# Example .browserslistrc file
+> 0.5%
+last 2 versions
+not dead
+```
+
+This configuration tells tools like Autoprefixer to support browsers with more than 0.5% market share and the last two stable versions, excluding completely dead browsers.
+
+<AdsComponent />
+<br />
+
+## Try it Yourself!
+
+Now that you understand the basics of PostCSS and its powerful plugin ecosystem, why not try it out yourself? You can use online editors like CodePen to experiment with PostCSS plugins directly in the browser.
+
+<CodePenEmbed 
+  title="CodeHarborHub PostCSS Demo"
+  penId="raeQXxd"
+/>
+
+## 5. Resources for Further Learning
+
+To effectively leverage the power of PostCSS, consult the official documentation and the extensive plugin directory.
+
+### Official Documentation
+
+  * **PostCSS Official Site:** [https://postcss.org/](https://postcss.org/)
+  * **Plugin List:** The definitive list of all available PostCSS plugins. [https://postcss.parts/](https://www.google.com/search?q=https://postcss.parts/)
+  * **Autoprefixer GitHub:** Essential documentation for the most-used plugin. [https://github.com/postcss/autoprefixer](https://github.com/postcss/autoprefixer)
diff --git a/docs/css/modern-css-tools/preprocessors/less.mdx b/docs/css/modern-css-tools/preprocessors/less.mdx
index e345ed2..5254d6c 100644
--- a/docs/css/modern-css-tools/preprocessors/less.mdx
+++ b/docs/css/modern-css-tools/preprocessors/less.mdx
@@ -1 +1,199 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "Less (Leaner Style Sheets)"
+description: "Explore Less, a dynamic stylesheet language that extends CSS with features like variables, nesting, mixins, and operations, offering an efficient way to manage large CSS projects."
+keywords: [Less CSS, CSS preprocessor, variables, mixins, nesting, functions, CSS language extension]
+tags: [Less CSS, CSS preprocessor, variables, mixins, nesting, functions, CSS language extension]
+sidebar_label: Less
+---
+
+**Less (Leaner Style Sheets)** is a powerful dynamic stylesheet language that serves as a robust **CSS preprocessor**. Developed earlier than Sass's widespread adoption of the SCSS syntax, Less is distinct because it is written in JavaScript and can be compiled in two ways:
+
+1.  **Client-side:** Via a JavaScript file included in the browser (convenient for development).
+2.  **Server-side/Build Tool:** Compiled into pure CSS using Node.js or task runners (standard for production).
+
+Less shares many core concepts with Sass (variables, mixins, nesting) but often uses slightly different syntax and features, making it a strong alternative, especially in environments where JavaScript integration is preferred.
+
+<AdsComponent />
+<br />
+
+## 1. Core Features of Less
+
+Less aims to improve CSS efficiency and maintainability by introducing programming features into the styling layer.
+
+### A. Variables (`@`)
+
+In Less, variables are declared using the **`@`** symbol. They allow you to define common values for colors, dimensions, and other properties, ensuring consistency across your stylesheet.
+
+```less title="styles.less"
+// Define variables using @
+@base-color: #3b82f6; // Blue
+@link-color: darken(@base-color, 10%);
+@spacing-large: 20px;
+
+.header {
+  background-color: @base-color;
+  padding: @spacing-large;
+}
+
+.nav-link {
+  color: @link-color;
+}
+```
+
+### B. Nesting and Parent Selector (`&`)
+
+Less supports nesting selectors to reflect the HTML structure, which helps organize CSS and reduces the repetition of parent selectors.
+
+The **`&`** parent selector is crucial for referring back to the parent selector, often used for pseudo-classes or modifying classes (similar to BEM modifiers).
+
+```less title="styles.less"
+.card-module {
+  background: white;
+  border-radius: 4px;
+  padding: 15px;
+
+  h3 { // Nested element
+    color: @base-color;
+    margin-bottom: 10px;
+  }
+  
+  // Using the parent selector for pseudo-class (hover)
+  &:hover { 
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  }
+}
+```
+
+<AdsComponent />
+<br />
+
+### C. Mixins
+
+Mixins allow you to embed all the properties of one class into another. Unlike Sass's `@include`, Less allows you to use any defined class name as a mixin.
+
+Mixins can also accept parameters, making them highly flexible for reusing style logic.
+
+#### Basic Mixin Example
+
+```less title="styles.less"
+// Define a class that will act as a mixin
+.clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+.container {
+  .clearfix(); // Include all properties from .clearfix
+  max-width: 1200px;
+}
+```
+
+#### Parametric Mixin Example
+
+```less title="styles.less"
+// Mixin with arguments and default values
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+     -moz-border-radius: @radius;
+          border-radius: @radius;
+}
+
+.button {
+  // Call the mixin, overriding the default 5px radius
+  .border-radius(10px); 
+  border: 1px solid gray;
+}
+```
+
+### D. Operations (Math)
+
+Less allows you to perform mathematical operations (`+`, `-`, `*`, `/`) directly on numerical values, including units. This is particularly useful for calculating responsive grid widths, spacing, or component dimensions based on a single variable.
+
+```less title="styles.less"
+@columns: 12;
+@gutter: 1.5%;
+@base-font-size: 16px;
+
+.col-4 {
+  // Calculate width dynamically
+  width: (4 / @columns * 100%) - @gutter; 
+}
+
+.text-small {
+  // Calculate font size relative to the base
+  font-size: @base-font-size * 0.85; 
+}
+```
+
+<AdsComponent />
+<br />
+
+## 2. Advanced Less Features
+
+### A. Functions
+
+Less includes a variety of built-in functions, especially for manipulating colors. These functions allow for dynamic adjustments to your palette, ensuring color harmony.
+
+| Function | Purpose | Example |
+| :--- | :--- | :--- |
+| `lighten()` | Makes a color lighter. | `lighten(@base-color, 10%)` |
+| `darken()` | Makes a color darker. | `darken(@base-color, 20%)` |
+| `saturate()` | Makes a color more vivid. | `saturate(@base-color, 15%)` |
+| `fade()` | Changes the opacity of a color. | `fade(@base-color, 50%)` |
+
+### B. Namespaces and Accessors
+
+Less provides a way to logically group styles or variables under a **namespace**, similar to a module. This prevents conflicts and makes code organized.
+
+```less title="styles.less"
+// 1. Define the namespace as a set of rules
+#themes {
+  .dark-mode() {
+    background: #333;
+    color: white;
+  }
+}
+
+.app-container {
+  // 2. Access the mixin inside the namespace
+  #themes > .dark-mode();
+}
+```
+
+### C. Importation (`@import`)
+
+Like Sass, Less supports the `@import` directive to break stylesheets into smaller, more manageable files. By default, Less treats imported files as Less files and merges them before compilation.
+
+```less title="styles.less"
+// Imports and processes the content of _variables.less
+@import "variables.less"; 
+// Imports and processes the content of _buttons.less
+@import "components/buttons"; 
+```
+
+<AdsComponent />
+<br />
+
+## Try It Yourself: CodePen Example
+
+Now that you've seen the core features of Less, try modifying and experimenting with the code in this CodePen example to see how Less can streamline your CSS development process.
+
+<CodePenEmbed 
+  title="CodeHarborHub Less Demo"
+  penId="PwNxaPO"
+/>
+
+## 3. Resources for Further Learning
+
+To effectively use Less in your projects, the official documentation is the primary resource.
+
+### Official Documentation
+
+The Less official site offers comprehensive guides, installation instructions (for Node.js), and detailed examples of all its features.
+
+  * **Less Official Website:** [http://lesscss.org/](http://lesscss.org/)
+  * **Functions Documentation:** Explore all the built-in color manipulation and mathematical functions. [http://lesscss.org/functions/](http://lesscss.org/functions/)
+  * **Mixins Documentation:** Essential guide for mastering parametric mixins. [http://lesscss.org/features/\#mixins-feature](https://www.google.com/search?q=http://lesscss.org/features/%23mixins-feature)
diff --git a/docs/css/modern-css-tools/preprocessors/sass.mdx b/docs/css/modern-css-tools/preprocessors/sass.mdx
index e345ed2..8bfb6b5 100644
--- a/docs/css/modern-css-tools/preprocessors/sass.mdx
+++ b/docs/css/modern-css-tools/preprocessors/sass.mdx
@@ -1 +1,195 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "Sass (Syntactically Awesome Stylesheets)"
+description: "Master Sass, the most popular CSS preprocessor, to write powerful, dynamic, and maintainable stylesheets using features like variables, nesting, mixins, and modular architecture."
+keywords: [Sass, SCSS, CSS preprocessor, variables, mixins, nesting, partials, extends, modular CSS]
+tags: [Sass, SCSS, CSS preprocessor, variables, mixins, nesting, partials, extends, modular CSS]
+sidebar_label: Sass
+---
+
+**Sass (Syntactically Awesome Stylesheets)** is the most mature and widely used **CSS preprocessor**. A preprocessor is a scripting language that extends the default capabilities of CSS, allowing you to use programming concepts like variables, nesting, and logic.
+
+Sass code, written in either the newer **SCSS** syntax (Sassy CSS, which is backward-compatible with CSS) or the older indented syntax, must be compiled down into standard, browser-readable CSS before deployment.
+
+<AdsComponent />
+<br />
+
+## 1. Why Use Sass? The Benefits
+
+The primary goal of using a preprocessor is to make large CSS codebases more maintainable, scalable, and efficient.
+
+### A. DRY (Don't Repeat Yourself)
+
+By using variables and mixins, you eliminate repetitive code blocks, such as copy-pasting color codes or vendor prefixes.
+
+### B. Modularity and Architecture
+
+Sass allows you to break your monolithic stylesheet into dozens of small, focused files (partials). This makes your codebase easier to navigate and manage large projects.
+
+### C. Logic and Functions
+
+You can perform mathematical operations directly within your stylesheet (e.g., `width: 100% / 3 - 2rem`), and use conditional logic (`@if`, `@else`) for dynamic styling.
+
+## 2. Key Features of Sass
+
+### A. Variables (`$`)
+
+Variables allow you to store values (colors, fonts, sizing) and reuse them throughout your project. This is crucial for theme management and ensuring consistency.
+
+```scss title="styles.scss"
+// Define variables using the $ symbol
+$primary-color: #1e3a8a;
+$font-stack: "Inter", sans-serif;
+$gutter: 1rem;
+
+.header {
+  background-color: $primary-color;
+  padding: $gutter;
+  font-family: $font-stack;
+}
+
+.button {
+  border-color: $primary-color;
+  padding: $gutter / 2;
+}
+```
+
+<AdsComponent />
+<br />
+
+### B. Nesting
+
+Nesting allows you to scope your CSS selectors inside their parent elements, visually mirroring the HTML structure.
+
+While convenient, **nesting should be limited to 2-3 levels deep** to maintain low specificity and prevent over-qualified selectors.
+
+```scss title="styles.scss"
+.navbar {
+  background-color: #333;
+  padding: 10px;
+
+  // Nesting the link selector inside the navbar
+  a {
+    color: white;
+    text-decoration: none;
+
+    // Using the parent selector (&) for pseudo-classes
+    &:hover {
+      color: lightblue;
+    }
+  }
+}
+```
+
+### C. Partials and Modularity (`@use`)
+
+Partials are separate SCSS files, named with an underscore prefix (e.g., `_variables.scss`, `_buttons.scss`), that are not compiled into separate CSS files. They are imported into a main file using the `@use` rule.
+
+`@use` is the modern standard, providing namespace control to prevent global variable conflicts.
+
+```scss title="styles.scss"
+/* _variables.scss */
+$font-size: 16px;
+
+/* _buttons.scss */
+@use 'variables' as v; // Namespaces variables from _variables.scss
+
+.button {
+  font-size: v.$font-size;
+  padding: 0.5rem 1rem;
+}
+
+/* main.scss */
+@use 'variables';
+@use 'buttons';
+
+.app-container {
+  font-size: variables.$font-size;
+}
+```
+
+**Compilation Result (main.css):** The output is a single, clean CSS file containing only the used styles.
+
+<AdsComponent />
+<br />
+
+### D. Mixins (`@mixin` and `@include`)
+
+Mixins are blocks of styles that can be reused throughout the stylesheet. They are ideal for vendor prefixes, complex responsive rules, or any repetitive set of declarations. They can also accept arguments.
+
+```scss title="styles.scss"
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin button-size($padding, $radius) {
+  padding: $padding;
+  border-radius: $radius;
+}
+
+.card-footer {
+  @include flex-center; /* Include the entire block of styles */
+}
+
+.cta-button {
+  // Pass arguments to the mixin
+  @include button-size(1rem 1.5rem, 4px); 
+}
+```
+
+### E. Extends and Placeholder Selectors (`%`)
+
+The `@extend` rule lets one selector inherit the styles of another. When used with **placeholder selectors** (`%`), it prevents the base style from being compiled unless it is explicitly extended. This keeps the final CSS output clean.
+
+```scss title="styles.scss"
+// Placeholder selector: will not compile to CSS unless used with @extend
+%message-base {
+  border: 1px solid;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.success-message {
+  @extend %message-base;
+  border-color: green;
+  background-color: #e6ffe6;
+}
+
+.error-message {
+  @extend %message-base;
+  border-color: red;
+  background-color: #ffe6e6;
+}
+```
+
+<AdsComponent />
+<br />
+
+## Try It Yourself: CodePen Example
+
+Now that you've seen the core features of Sass, try modifying and experimenting with the code in this CodePen example to see how Sass can streamline your CSS development process.
+
+<CodePenEmbed 
+  title="CodeHarborHub Sass Demo"
+  penId="xbVQjzo"
+/>
+
+## 3. Resources for Further Learning
+
+To master Sass and its architectural patterns, consult the official documentation and community guides.
+
+### Official Documentation
+
+The official site offers the most accurate and up-to-date syntax guides and feature explanations for both SCSS and the older indented syntax.
+
+  * **Sass Official Website:** [https://sass-lang.com/](https://sass-lang.com/)
+  * **Sass Documentation (The `@use` rule):** Essential reading for modern modularity. [https://sass-lang.com/documentation/at-rules/use](https://sass-lang.com/documentation/at-rules/use)
+  * **Dart Sass:** The modern compiler implementation. [https://sass-lang.com/dart-sass](https://sass-lang.com/dart-sass)
+
+### Architectural Patterns
+
+For applying Sass in large applications, study these common methodologies:
+
+  * **7-1 Pattern:** A popular folder structure for organizing large SCSS projects (7 folders, 1 main file).
+  * **BEM with Sass:** Learn how to combine the BEM naming convention with Sass features like nesting and mixins.
\ No newline at end of file
diff --git a/docs/css/modern-css-tools/preprocessors/stylus.mdx b/docs/css/modern-css-tools/preprocessors/stylus.mdx
index e345ed2..45576a6 100644
--- a/docs/css/modern-css-tools/preprocessors/stylus.mdx
+++ b/docs/css/modern-css-tools/preprocessors/stylus.mdx
@@ -1 +1,183 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: "Stylus (Flexible Syntax Preprocessor)"
+description: "Learn Stylus, a powerful and expressive CSS preprocessor known for its highly flexible syntax, allowing developers to omit colons, semicolons, and even braces for faster, cleaner authoring."
+keywords: [Stylus CSS, CSS preprocessor, flexible syntax, variables, mixins, indentation, Node.js, mixins]
+tags: [Stylus CSS, CSS preprocessor, flexible syntax, variables, mixins, indentation, Node.js, mixins]
+sidebar_label: Stylus
+---
+
+**Stylus** is a dynamic, expressive, and robust CSS preprocessor written in Node.js. It gained popularity for its **highly flexible syntax**, allowing developers to write stylesheets with minimal punctuation.
+
+Stylus provides all the necessary features of a modern preprocessor—variables, mixins, functions, and conditional logic—but gives the developer complete freedom over how they want to write the code: using full CSS syntax (with braces and semicolons) or a clean, indentation-based syntax (like Python). This flexibility makes it one of the fastest languages to write CSS in.
+
+:::info
+
+You need to save Stylus files with the `.styl` extension. To compile Stylus into CSS, you can use the Stylus command-line tool or integrate it into your build process using task runners like Gulp or Webpack.
+
+:::
+
+<AdsComponent />
+<br />
+
+## 1. The Unique Syntax Flexibility
+
+The core differentiator of Stylus is its optional syntax. You can progressively drop punctuation until you are left with only the selectors and properties.
+
+| Syntax Feature | Standard CSS | SCSS/Less | Stylus (Default) |
+| :--- | :--- | :--- | :--- |
+| **Declaration Separation** | `;` (Semicolon) | `;` (Semicolon) | **Newline** (Optional Semicolon) |
+| **Property/Value** | `:` (Colon) | `:` (Colon) | **Space** (Optional Colon) |
+| **Scope Delimiters** | `{ }` (Braces) | `{ }` (Braces) | **Indentation** (Optional Braces) |
+| **Variables** | N/A | `$`, `@` | **None** (Assignment `=`) |
+
+### Example of Stylus Flexibility
+
+All three examples below compile to the exact same CSS output:
+
+```stylus title="styles.styl"
+// 1. Fully verbose (CSS-like)
+.card {
+    background: #fff;
+    padding: 10px;
+}
+
+// 2. Medium (Colons and braces removed)
+.card
+    background #fff
+    padding 10px
+
+// 3. Minimal (Best practice for speed)
+.card
+    background #fff
+    padding 10px
+```
+
+<AdsComponent />
+<br />
+
+## 2. Key Features of Stylus
+
+### A. Variables (Assignment `=`)
+
+In Stylus, variables are declared simply by assigning a value to an identifier using the equals sign (`=`), with no prefix required.
+
+```stylus title="styles.styl"
+// Define variables
+primary-color = #1e3a8a
+font-base = 16px
+padding-sm = 10px
+
+.container
+    max-width 1200px
+    padding padding-sm
+
+.btn
+    background primary-color
+    font-size font-base
+```
+
+### B. Interpolation
+
+To use a variable as part of a selector name or a property name, you use string interpolation with curly braces `{}`.
+
+```stylus title="styles.styl"
+media = tablet
+
+@media screen and (min-width: 768px)
+    .grid-{media}
+        display grid
+```
+
+**Compilation Result:** `.grid-tablet { display: grid; }`
+
+### C. Nesting and Parent Selector (`&`)
+
+Nesting in Stylus is achieved through indentation. It simplifies the definition of selectors and pseudo-classes.
+
+```stylus title="styles.styl"
+.modal
+    background-color white
+    box-shadow 0 4px 10px rgba(0, 0, 0, 0.1)
+
+    // Nested element
+    .modal-content
+        padding 20px
+        
+    // Parent selector for pseudo-class
+    &:hover
+        box-shadow 0 8px 15px rgba(0, 0, 0, 0.2)
+        
+    // Parent selector for modifier
+    &.is-active
+        display block
+```
+
+<AdsComponent />
+<br />
+
+### D. Mixins and Arguments
+
+Mixins in Stylus can be defined without any special directive. Any block of styles can be reused simply by calling it like a function.
+
+```stylus title="styles.styl"
+// Define a mixin (no special syntax needed)
+flex-center()
+    display flex
+    justify-content center
+    align-items center
+
+// Define a parametric mixin
+border-radius(radius = 5px)
+    -webkit-border-radius radius
+    -moz-border-radius radius
+    border-radius radius
+
+.footer
+    flex-center() // Include mixin
+
+.input-field
+    border-radius(12px) // Include parametric mixin with argument
+```
+
+### E. Functions and Operations
+
+Stylus includes built-in functions for color manipulation, math, and more. All standard mathematical operations are supported.
+
+```stylus title="styles.styl"
+// Calculate color using a built-in function
+btn-bg = #4CAF50
+btn-hover-bg = darken(btn-bg, 15%) // Makes color 15% darker
+
+// Calculate dimensions
+grid-cols = 4
+gutter-width = 20px
+
+.col
+    // Mathematical division
+    width (100% / grid-cols) - gutter-width
+    background-color btn-hover-bg
+```
+
+<AdsComponent />
+<br />
+
+## Try it Yourself!
+
+Now that you've seen the unique syntax and features of Stylus, try it out yourself! Use the embedded CodePen below to experiment with Stylus code and see how it compiles to CSS in real-time.
+
+<CodePenEmbed 
+  title="CodeHarborHub Stylus Demo"
+  penId="VYaVJVq"
+/>
+
+## 3. Resources for Further Learning
+
+To master the unique and expressive capabilities of Stylus, the official documentation is essential.
+
+### Official Documentation
+
+The official site provides comprehensive reference material and deep dives into the more advanced, often language-agnostic, features of Stylus.
+
+  * **Stylus Official Website:** [https://stylus-lang.com/](https://stylus-lang.com/)
+  * **Language Reference:** Review the full list of features and syntax rules. [https://stylus-lang.com/docs/](https://stylus-lang.com/docs/)
+  * **Installation Guide:** Learn how to install and compile Stylus using Node.js. [https://stylus-lang.com/docs/install.html](https://www.google.com/search?q=https://stylus-lang.com/docs/install.html)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2d7ca29..d878e6c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -329,6 +329,12 @@ const config = {
           "latex",
           "markdown",
           "scss",
+          "stylus",
+          "less",
+          "ruby",
+          "rust",
+          "java",
+          
         ],
       },
       docs: {