sammy6378 · sammy6378 · Sep 2, 2025 · Sep 2, 2025 · Sep 2, 2025 · Sep 2, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,7 @@
 node_modules
 build
 .env
-.docusaurus
+# Ignore docusaurus generated cache
+.docusaurus/
+dist/
+
diff --git a/docs/CSS/_category_.json b/docs/CSS/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "CSS",
+  "position": 3
+}
diff --git a/docs/CSS/box-model.md b/docs/CSS/box-model.md
@@ -0,0 +1,42 @@
+---
+title: Box Model
+sidebar_position: 3
+---
+
+# Box Model
+
+Every HTML element is a box! The box model is the secret to spacing, borders, and layout.
+
+## Parts of the Box Model
+- **Content**: The actual text or image
+- **Padding**: Space inside the box, around the content
+- **Border**: The edge of the box
+- **Margin**: Space outside the box, separating it from others
+
+Example:
+```css
+div {
+  margin: 20px;
+  border: 2px solid #333;
+  padding: 10px;
+}
+```
+
+## Display Property
+- `block`: Starts on a new line, takes full width (e.g., `<div>`, `<h1>`)
+- `inline`: Flows with text (e.g., `<span>`, `<a>`)
+- `flex`, `grid`: Modern layouts
+
+Example:
+```css
+span {
+  display: inline;
+}
+div {
+  display: block;
+}
+```
+
+## What's Next?
+
+Let’s learn layout techniques: [Layout Techniques](./layout-techniques.md).
diff --git a/docs/CSS/introduction-to-css.md b/docs/CSS/introduction-to-css.md
@@ -0,0 +1,36 @@
+---
+title: Introduction to CSS
+sidebar_position: 1
+---
+
+# Introduction to CSS
+
+Welcome, style wizard! 🎨 Now that you know HTML, it’s time to make your web pages beautiful with CSS (Cascading Style Sheets). If HTML is the structure of your house, CSS is the paint, wallpaper, and decorations that make it shine.
+
+## What is CSS?
+CSS controls colors, fonts, spacing, layout, and more. It separates content (HTML) from presentation (styles).
+
+- **Inline styles**: Directly on an element (not recommended for big projects)
+- **Internal styles**: In a `<style>` tag in the HTML `<head>`
+- **External styles**: In a separate `.css` file (best for most projects)
+
+Example (inline):
+```html
+<p style="color: red;">This is red text.</p>
+```
+Example (internal):
+```html
+<head>
+  <style>
+    p { color: blue; }
+  </style>
+</head>
+```
+Example (external):
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+## What's Next?
+
+Ready to learn how to target elements? Next up: [Selectors & Properties](./selectors-and-properties.md). Let’s style like a pro!
diff --git a/docs/CSS/layout-techniques.md b/docs/CSS/layout-techniques.md
@@ -0,0 +1,48 @@
+---
+title: Layout Techniques
+sidebar_position: 4
+---
+
+# Layout Techniques
+
+CSS gives you powerful tools to arrange elements on the page.
+
+## Flexbox
+- Align, justify, and wrap items easily
+
+Example:
+```css
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+```
+
+## Grid
+- Create rows, columns, and areas
+
+Example:
+```css
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+```
+
+## Positioning
+- `relative`, `absolute`, `fixed`, `sticky`
+
+Example:
+```css
+.sticky {
+  position: sticky;
+  top: 0;
+}
+```
+
+## What's Next?
+
+Let’s style your site: [Styling](./styling.md).
diff --git a/docs/CSS/layout.md b/docs/CSS/layout.md
@@ -0,0 +1,41 @@
+---
+title: CSS Layout
+sidebar_position: 4
+---
+
+# CSS Layout
+
+You’re doing great! Now, let’s arrange elements on the page. CSS layout is how you build headers, sidebars, footers, and more.
+
+## Common Layout Techniques
+
+- **Block & Inline**: Block elements (like `<div>`) stack; inline elements (like `<span>`) flow in a line.
+- **Float**: Old-school way to move elements left or right.
+- **Flexbox**: Modern, easy way to align and distribute space.
+- **Grid**: Powerful for two-dimensional layouts.
+
+Example (Flexbox):
+
+```css
+.container {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+Example (Grid):
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+```
+
+:::info
+Flexbox is great for navbars; Grid is perfect for page layouts.
+:::
+
+## What's Next?
+
+Time to practice! Try a mini project: [CSS Projects](./projects.md).
diff --git a/docs/CSS/projects.md b/docs/CSS/projects.md
@@ -0,0 +1,31 @@
+---
+title: CSS Projects
+sidebar_position: 5
+---
+
+# CSS Projects
+
+Congratulations! 🎉 You’ve learned the basics of CSS. Now it’s time to practice with some fun projects.
+
+## Project Ideas
+
+1. **Personal Bio Page (Styled)**
+   - Take your HTML bio page and add colors, fonts, and layout.
+2. **Navigation Bar**
+   - Build a horizontal menu using Flexbox.
+3. **Photo Gallery**
+   - Create a grid of images with hover effects.
+
+## Tips
+
+- Use all the selectors and box model tricks you’ve learned.
+- Experiment with colors, spacing, and layout.
+- Use browser dev tools to tweak styles live.
+
+:::tip
+Share your styled pages with friends or on GitHub for feedback!
+:::
+
+## What's Next?
+
+Want to level up? Try combining your HTML and CSS skills, or move on to [Introduction to Git](../../Git/Beginner/introduction-to-git.md) to learn about version control!
-Want to level up? Try combining your HTML and CSS skills, or move on to [Introduction to Git](../../Git/Beginner/introduction-to-git.md) to learn about version control!
+Want to level up? Try combining your HTML and CSS skills, or move on to [Introduction to Git](../Git/introduction-to-git.md) to learn about version control!
-Want to level up? Try combining your HTML and CSS skills, or move on to [Introduction to Git](../../Git/Beginner/introduction-to-git.md) to learn about version control!
+Want to level up? Try combining your HTML and CSS skills, or move on to [Introduction to Git](../Git/introduction-to-git.md) to learn about version control!
diff --git a/docs/CSS/selectors-and-properties.md b/docs/CSS/selectors-and-properties.md
@@ -0,0 +1,51 @@
+---
+title: Selectors & Properties
+sidebar_position: 2
+---
+
+# Selectors & Properties
+
+Selectors are how you target HTML elements to style them. Properties are what you change (like color, font, size).
+
+## Basic Selectors
+- `element` (e.g., `h1`, `p`): All elements of that type
+- `.class`: Elements with a specific class
+- `#id`: A unique element with an ID
+- `*`: Everything
+
+Example:
+```css
+.highlight {
+  background: yellow;
+}
+#main-title {
+  font-size: 2em;
+}
+```
+
+## Pseudo-classes
+- `:hover`, `:nth-child(2)`, etc.
+
+Example:
+```css
+a:hover {
+  color: red;
+}
+li:nth-child(2) {
+  font-weight: bold;
+}
+```
+
+## Pseudo-elements
+- `::before`, `::after`, etc.
+
+Example:
+```css
+p::before {
+  content: "★ ";
+}
+```
+
+## What's Next?
+
+Let’s understand the box model: [Box Model](./box-model.md).
diff --git a/docs/CSS/selectors.md b/docs/CSS/selectors.md
@@ -0,0 +1,48 @@
+---
+title: CSS Selectors
+sidebar_position: 2
+---
+
+# CSS Selectors
+
+Great start! Now, let’s learn how to target specific HTML elements with selectors. Selectors are like magic wands—you point at what you want to style.
+
+## What is a Selector?
+
+A selector tells CSS which element(s) to style.
+
+Example:
+
+```css
+p {
+  color: green;
+}
+```
+
+This makes all `<p>` elements green.
+
+## Common Selectors
+
+- `element` (e.g., `h1`, `p`): Targets all elements of that type
+- `.class`: Targets elements with a specific class
+- `#id`: Targets a unique element with an ID
+- `*`: Targets everything
+
+Example:
+
+```css
+.highlight {
+  background: yellow;
+}
+#main-title {
+  font-size: 2em;
+}
+```
+
+:::info
+You can combine selectors for more power: `div p` targets all `<p>` inside `<div>`.
+:::
+
+## What's Next?
+
+Let’s dive into how elements are sized and spaced: [CSS Box Model](./box-model.md).
diff --git a/docs/Git/_category_.json b/docs/Git/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Git",
+  "position": 3
+}
diff --git a/docs/Git/basic-commands.md b/docs/Git/basic-commands.md
@@ -0,0 +1,34 @@
+---
+title: Basic Git Commands
+sidebar_position: 2
+---
+
+# Basic Git Commands
+
+Great start! Now, let’s learn the most important Git commands. These are your tools for saving, viewing, and sharing your work.
+
+## Common Commands
+
+- `git init`: Start a new Git repository
+- `git status`: See what’s changed
+- `git add`: Stage changes for commit
+- `git commit`: Save your changes
+- `git log`: View commit history
+
+Example workflow:
+
+```bash
+git init
+git add index.html
+git commit -m "Add homepage"
+git status
+git log
+```
+
+:::tip
+Use clear commit messages so you remember what changed!
+:::
+
+## What's Next?
+
+Ready to work on different features? Next: [Branching in Git](./branching.md).
diff --git a/docs/Git/branching.md b/docs/Git/branching.md
@@ -0,0 +1,38 @@
+---
+title: Branching in Git
+sidebar_position: 3
+---
+
+# Branching in Git
+
+Awesome! Now, let’s learn how to work on new features without breaking your main code. Branches are like parallel universes for your project.
+
+## What is a Branch?
+
+A branch is a separate line of development. You can experiment, then merge changes back when ready.
+
+## Common Branch Commands
+
+- `git branch`: List branches
+- `git checkout -b feature`: Create and switch to a new branch
+- `git merge feature`: Combine changes from another branch
+
+Example:
+
+```bash
+git branch
+git checkout -b new-feature
+# Make changes
+git add .
+git commit -m "Add new feature"
+git checkout main
+git merge new-feature
+```
+
+:::info
+Branches help you work safely and try new ideas.
+:::
+
+## What's Next?
+
+Let’s share your code with the world! Next: [GitHub Workflow](./github-workflow.md).