Merge pull request #205 from codeharborhub/dev-1

added css docs

Author: ajay-dhangar

absolute-beginners/frontend-beginner/css/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "CSS",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Getting started with CSS, how to add style, color, and personality to your HTML."
+  }
+}

absolute-beginners/frontend-beginner/css/colors-and-backgrounds.mdx

@@ -0,0 +1,87 @@
+---
+sidebar_position: 3
+title: "Colors & Backgrounds"
+sidebar_label: "Colors & Backgrounds"
+description: "Learn how to use Hex, RGB, and background images to make your site pop."
+---
+
+In the physical world, paint comes in buckets. In the digital world, paint comes in **codes**. To build a professional-looking site, you need to understand how computers "read" color and how to layer backgrounds to create depth.
+
+## Three Ways to Define Color
+
+While you can use names like `red` or `skyblue`, there are actually 140 named colors in HTML. Professionals need more variety, so we use these three systems:
+
+### 1. Hexadecimal (The Industry Standard)
+Hex codes start with a `#` followed by 6 characters. It is the most common way to share colors between designers and developers.
+* **Example:** `#ff5733` (A vibrant orange).
+
+### 2. RGB (The Digital Screen Way)
+Stands for **Red, Green, Blue**. It tells the screen how much of each light to mix.
+* **Example:** `rgb(255, 87, 51)`
+
+### 3. RGBA (The Transparency Trick)
+The `a` stands for **Alpha**. This allows you to make colors see-through!
+* **Value:** `0.0` (invisible) to `1.0` (fully solid).
+* **Example:** `rgba(0, 0, 0, 0.5)` (A 50% transparent black).
+
+## Beyond Solid Colors: Backgrounds
+
+You can style the background of any element (a button, a section, or the whole page) using the `background` properties.
+
+### Background Images
+
+Want a cool photo behind your text?
+
+```css
+.hero-section {
+  background-image: url('ocean.jpg');
+  background-size: cover;    /* Makes the image fit the whole area */
+  background-position: center; 
+}
+
+```
+
+### Linear Gradients
+
+Gradients are a smooth transition between two or more colors. They look very modern in 2026!
+
+```css
+.gradient-box {
+  background: linear-gradient(to right, #ff7e5f, #feb47b);
+}
+
+```
+
+## Interactive CodePen: Color Mixer
+
+Check out how these different color types look in real-time. Try changing the `background-color` of the second box to a `rgba` value to see it become transparent!
+
+<CodePenEmbed
+title="CSS Color Systems"
+penId="qEaWQNW"
+/>
+
+### Challenge Tasks:
+
+1. Find a color you love on [Adobe Color](https://color.adobe.com/) and copy the **Hex code**.
+2. Apply that Hex code to the `h1` in the CodePen.
+3. Try making the background a `linear-gradient`.
+
+## Accessibility: The Contrast Rule
+
+As a developer at **CodeHarborHub**, you have a responsibility to make sure everyone can read your site.
+
+:::danger Don't do this!
+Never put light gray text on a white background. It's impossible for people with low vision to read.
+:::
+
+:::tip
+Always use a [Contrast Checker](https://webaim.org/resources/contrastchecker/) to ensure your text "pops" against the background.
+:::
+
+## Summary Checklist
+
+* [x] I know that Hex codes start with `#`.
+* [x] I can use `rgba()` to create transparent overlays.
+* [x] I understand that `background-size: cover` helps images fit properly.
+* [x] I checked my color contrast for accessibility.

absolute-beginners/frontend-beginner/css/css-challenge.mdx

@@ -0,0 +1,137 @@
+---
+sidebar_position: 10
+title: "Final Challenge: Style Your Portfolio"
+sidebar_label: CSS Challenge
+description: "The ultimate test! Apply all your CSS skills to your personal portfolio."
+---
+
+It’s time to take your "plain" HTML Portfolio and give it a professional makeover. This is the exact process developers use: starting with a wireframe, building the structure, and then adding the "visual polish."
+
+## Step 1: The Design Strategy
+
+Before writing code, we need a plan. We will use a **Mobile-First** strategy. This means we will style the mobile version first, then use Media Queries to adjust it for Desktop.
+
+## Step-by-Step Implementation
+
+### Step 1: Reset & Setup
+
+At the very top of your `style.css`, add the "Universal Reset." This ensures every browser starts with the same clean slate.
+
+```css title="style.css"
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; /* The layout savior! */
+}
+
+body {
+  font-family: 'Segoe UI', sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f4f4f4;
+}
+
+```
+
+### Step 2: Flex the Navigation
+
+Use Flexbox to move your Logo to the left and your Links to the right.
+
+```css title="style.css"
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 5%;
+  background: #2d3436;
+  color: white;
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+  margin-left: 20px;
+}
+
+```
+
+### Step 3: The "Hero" (About) Section
+
+This is the first thing people see. We want it centered and impactful.
+
+```css title="style.css"
+#about {
+  display: flex;
+  flex-direction: column; /* Stacked for mobile */
+  align-items: center;
+  text-align: center;
+  padding: 50px 20px;
+}
+
+#about img {
+  border-radius: 50%; /* Makes your photo a circle */
+  border: 5px solid #0984e3;
+  width: 150px;
+  margin-bottom: 20px;
+}
+
+```
+
+### Step 4: The Skills Grid
+
+We’ll use Flexbox to make your skills look like neat badges.
+
+```css title="style.css"
+#skills ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+}
+
+#skills li {
+  background: #0984e3;
+  color: white;
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 20px;
+  font-weight: bold;
+}
+
+```
+
+### Step 5: Make it Responsive
+
+Now, add a Media Query to make the "About" section look better on big screens.
+
+```css title="style.css"
+@media (min-width: 768px) {
+  #about {
+    flex-direction: row; /* Side-by-side for desktop */
+    text-align: left;
+    justify-content: center;
+  }
+  
+  #about img {
+    margin-right: 40px;
+    margin-bottom: 0;
+  }
+}
+
+```
+
+## See the Final Result on CodePen
+
+Check out how these steps come together in this interactive demo. Try clicking the "Mobile View" in CodePen to see how the layout shifts!
+
+<CodePenEmbed
+title="Final CSS Portfolio Challenge"
+penId="ByLBGXV"
+/>
+
+:::success YOU ARE NOW A CSS STYLIST!
+You've completed the CSS Basics module. You have the power to take any boring HTML page and turn it into a beautiful, responsive experience.
+
+**What's next?**
+Would you like to start **JavaScript: The Brains of the Web**, or would you like to explore **CSS Grid** for even more complex layouts?
+:::

absolute-beginners/frontend-beginner/css/flexbox-part-1.mdx

@@ -0,0 +1,87 @@
+---
+sidebar_position: 7
+title: "Flexbox Part 1: Modern Layouts"
+sidebar_label: "Flexbox (Basics)"
+description: "Learn the modern way to align and distribute space on your page."
+---
+
+Imagine you have a row of boxes. You want to center them, space them out evenly, or turn them into a column. Doing this with margins is a nightmare. Doing it with **Flexbox** is easy!
+
+Flexbox is a "One-Dimensional" layout system. This means it handles content in **either** a row or a column at a time.
+
+## The Parent & The Children
+
+Flexbox works on a **Parent-Child** relationship.
+1.  **Flex Container (Parent):** The box that holds everything.
+2.  **Flex Items (Children):** The boxes inside.
+
+To start the magic, you simply tell the Parent:
+
+```css
+.container {
+  display: flex;
+}
+
+```
+
+## The Two Axes
+
+This is the most important concept to visualize:
+
+* **Main Axis:** Usually horizontal (Left to Right).
+* **Cross Axis:** Usually vertical (Top to Bottom).
+
+## The "Big Three" Properties
+
+Once you set `display: flex`, you use these three properties on the **Parent** to control the children:
+
+### 1. `justify-content` (Main Axis)
+
+Moves items horizontally (if in a row).
+
+* `flex-start`: Items at the beginning.
+* `center`: Items in the middle! (Finally!)
+* `space-between`: Items push to the edges with equal space between them.
+
+### 2. `align-items` (Cross Axis)
+
+Moves items vertically.
+
+* `flex-start`: Top.
+* `center`: Perfect vertical centering.
+* `stretch`: Stretches items to fill the height.
+
+### 3. `flex-direction`
+
+Changes the direction of the flow.
+
+* `row`: Default (Side-by-side).
+* `column`: Stacks items vertically like a list.
+
+## Interactive CodePen: Flexbox Playground
+
+In this Pen, try changing `justify-content` to `space-around`. See how the boxes react!
+
+<CodePenEmbed
+title="Flexbox Basics Playground"
+penId="ogzvQyx"
+/>
+
+### Challenge Tasks:
+
+1. Set `justify-content: center` AND `align-items: center`. You have now achieved the **"Holy Grail" of web design**: Perfect centering!
+2. Change `flex-direction` to `column`.
+3. Try `justify-content: space-evenly`.
+
+## Why use Flexbox?
+
+* **No more floats:** You don't need to use old, broken layout methods.
+* **Responsive:** Items can shrink or grow to fit the screen.
+* **Simplicity:** Centering takes seconds, not hours.
+
+## Summary Checklist
+
+* [x] I know that `display: flex` goes on the **Parent**.
+* [x] I can use `justify-content` to move items along the Main Axis.
+* [x] I can use `align-items` to center items vertically.
+* [x] I understand the difference between a `row` and a `column`.