diff --git a/blog/2025-01-21/assets/ui-vs-ux-explained.png b/blog/2025-01-21/assets/ui-vs-ux-explained.png
new file mode 100644
index 000000000..00181e4ca
Binary files /dev/null and b/blog/2025-01-21/assets/ui-vs-ux-explained.png differ
diff --git a/blog/2025-01-21/ui-ux-web-design-principle.md b/blog/2025-01-21/ui-ux-web-design-principle.md
new file mode 100644
index 000000000..61a10edd2
--- /dev/null
+++ b/blog/2025-01-21/ui-ux-web-design-principle.md
@@ -0,0 +1,154 @@
+---
+title: "UI/UX Design Principles"
+sidebar_label: "UI/UX Design"
+authors: [ajay-dhangar]
+tags: [ui-ux, web design, user experience, user interface]
+date: 2025-01-21
+---
+
+Web design is all about creating intuitive, delightful, and meaningful user experiences. In this guide, we'll dive into the key principles, easy-to-understand concepts, and practical steps to help you build user-friendly and visually stunning designs.
+
+
+
+## Why UI/UX Matters?
+UI (User Interface) is how something looks, and UX (User Experience) is how it works. When combined, they create designs that:
+- Solve problems.
+- Are easy to use.
+- Keep users engaged.
+
+
+
+
+## Core Principles of UI/UX Design
+
+### 1. Focus on the User
+Always design with your audience in mind. Ask yourself:
+- Who are the users?
+- What are their goals?
+- How can you make their experience seamless?
+
+:::tip
+Create user personas and map their journeys for better understanding.
+:::
+
+```mermaid
+graph TD
+ A[User Persona] -->|Demographics| B[Age, Gender, Location]
+ A -->|Behavior| C[Habits, Preferences]
+ A -->|Goals| D[What they want to achieve]
+ A -->|Pain Points| E[Challenges they face]
+```
+
+### 2. Consistency is Key
+Use similar elements throughout your design to avoid confusion. For example:
+- Stick to a specific button style.
+- Use the same font for headings and body text.
+
+
+### 3. Visual Hierarchy
+Guide your users by organizing elements logically:
+- Use larger fonts for headings.
+- Highlight call-to-action buttons with bright colors.
+
+```mermaid
+graph TB
+ A[Header: Largest Font] --> B[Subheading: Medium Font]
+ B --> C[Body Text: Smallest Font]
+ A --> D[CTA Button: Highlighted]
+```
+
+### 4. Keep it Simple
+Avoid clutter and distractions. Every element should have a purpose.
+- Use whitespace to give your design breathing room.
+- Limit choices to reduce decision fatigue.
+
+
+## Layouts Made Easy
+
+### What is a Layout?
+A layout organizes content visually. Common sections include:
+- **Header**: Logo, navigation.
+- **Main Area**: Primary content.
+- **Footer**: Links, contact info.
+
+
+
+### Using Grid Systems
+Grids help align elements perfectly. Most designers use a 12-column grid for flexibility.
+
+
+
+
+### From Wireframe to Prototype
+Design starts with simple sketches (wireframes) and evolves into interactive prototypes:
+1. **Wireframe**: Basic layout.
+2. **Prototype**: Add colors, images, and interactivity.
+
+
+
+```mermaid
+graph TD
+ A[Wireframe] --> B[Prototype]
+ B --> C[Design]
+ C --> D[Development]
+```
+
+
+## Colors in Web Design
+
+### **How Colors Affect Users**
+- **Blue**: Trust and calmness.
+- **Red**: Energy and urgency.
+- **Green**: Nature and health.
+
+
+
+### Creating a Color Palette
+Use tools like [Coolors](https://coolors.co) to generate harmonized palettes.
+
+
+## Typography Basics
+
+### Font Pairing Made Simple
+Combine a decorative font with a readable one:
+- **Example**: Playfair Display (fancy) + Roboto (clean).
+
+
+
+```mermaid
+graph TD
+ A[Playfair Display] -->|Heading| B[Roboto]
+ A -->|Subheading| C[Roboto]
+ A -->|Body Text| D[Roboto]
+```
+
+### Readable Text Sizes
+- **Titles**: 24-32px.
+- **Body Text**: 16px.
+- **Buttons**: 14-18px.
+
+
+## Practical Design Tips
+
+### 1. Use Fitts's Law
+Make buttons large and easy to click, especially on mobile.
+
+### 2. Apply Gestalt Principles
+- **Proximity**: Group related items together.
+- **Similarity**: Use consistent styles for similar actions.
+
+
+
+```mermaid
+graph TD
+ A[Proximity] -->|Grouping| B[Related Items]
+ C[Similarity] -->|Consistent Styles| D[Similar Actions]
+```
+
+### 3. Optimize for Accessibility
+- Ensure text has enough contrast against its background.
+- Add alt text to images for screen readers.
+
+
+## Conclusion
+UI/UX design is about creating meaningful interactions and beautiful designs that cater to users. With these principles and practices, you're well on your way to crafting exceptional web experiences. Remember, the secret is empathy and constant iteration.
\ No newline at end of file
diff --git a/docs/css/selectors/combinator-selectors/_category_.json b/docs/css/selectors/combinator-selectors/_category_.json
new file mode 100644
index 000000000..8a5a6f5c9
--- /dev/null
+++ b/docs/css/selectors/combinator-selectors/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Combinator Selectors",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the combinator selectors in CSS. Combinator selectors are used to combine multiple selectors to create complex rules. There are four types of combinator selectors in CSS: descendant, child, adjacent sibling, and general sibling."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md b/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md
index e69de29bb..44c4eadb0 100644
--- a/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md
+++ b/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md
@@ -0,0 +1,101 @@
+---
+id: adjacent-sibling-selector
+title: Adjacent Sibling Selector
+sidebar_label: Adjacent Sibling Selector
+position: 3
+tags: [selector, combinator, adjacent-sibling]
+description: Adjacent sibling selector is used to select an element that is immediately preceded by another element.
+keywords:
+ [
+ adjacent sibling selector,
+ css adjacent sibling selector,
+ css selector,
+ css combinator,
+ css adjacent sibling combinator,
+ ]
+---
+
+In CSS, the adjacent sibling selector is used to select an element that is immediately preceded by another element. The adjacent sibling selector is represented by the `+` character between two selectors.
+
+
+
+## Syntax
+
+The syntax for the adjacent sibling selector is as follows:
+
+```css title="index.css"
+selector1 + selector2 {
+ /* CSS properties */
+}
+```
+
+- `selector1`: The first sibling element.
+- `selector2`: The second sibling element.
+- `CSS properties`: The CSS properties to be applied to the second sibling element.
+- `+`: The `+` character represents the adjacent sibling selector.
+
+## Example
+
+In the following example, the adjacent sibling selector is used to select all `
` elements that are immediately preceded by an `
` element:
+
+```css title="index.css"
+h2 + p {
+ font-weight: bold;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `font-weight: bold` property to the text inside the `
` element because it is immediately preceded by an `
` element.
+
+```html title="index.html"
+
Heading
+
This text will be bold.
+```
+
+The adjacent sibling selector can be used to target specific elements that are adjacent to each other in the HTML structure.
+
+:::tip Key Points to Remember
+
+- The adjacent sibling selector is represented by the `+` character between two selectors.
+- The adjacent sibling selector selects an element that is immediately preceded by another element.
+- The adjacent sibling selector is more specific than the general sibling selector (`~`) and less specific than the child combinator (`>`).
+- The adjacent sibling selector is also known as the next-sibling combinator.
+- The adjacent sibling selector is useful when you want to target elements that are adjacent to each other in the HTML structure.
+
+:::
+
+
+
+## Example: Using Adjacent Sibling Selector
+
+Let's consider an example where we want to style the text inside a paragraph (`
`) element that is immediately preceded by a heading (`
`) element. We can achieve this using the adjacent sibling selector as shown below:
+
+
+
+ ```html showLineNumbers
+
Heading
+
This text will be bold.
+ ```
+
+
+ ```css showLineNumbers
+h2 + p {
+ font-weight: bold;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
Heading
+
This text will be bold.
+
+
+
+In the above example, the CSS rule will apply the `font-weight: bold` property to the text inside the `
` element because it is immediately preceded by an `
` element.
+
+## Conclusion
+
+The adjacent sibling selector is a useful CSS selector that allows you to target elements that are immediately preceded by another element. By using the adjacent sibling selector, you can apply specific styles to elements that are adjacent to each other in the HTML structure. This selector is handy when you want to style elements based on their relationship with other elements in the document.
diff --git a/docs/css/selectors/combinator-selectors/child-selector.md b/docs/css/selectors/combinator-selectors/child-selector.md
index e69de29bb..410fab334 100644
--- a/docs/css/selectors/combinator-selectors/child-selector.md
+++ b/docs/css/selectors/combinator-selectors/child-selector.md
@@ -0,0 +1,167 @@
+---
+id: child-selector
+title: Child Selector
+sidebar_label: Child Selector
+sidebar_position: 2
+tags: [selector, combinator, child]
+description: Child selector is used to select an element that is a direct child of another element.
+keywords: [child selector, css child selector, css selector, css combinator, css child combinator]
+---
+
+In CSS, the child selector is used to select an element that is a direct child of another element. The child selector is represented by the `>` character between two selectors.
+
+
+
+## Syntax
+
+The syntax for the child selector is as follows:
+
+```css title="index.css"
+selector1 > selector2 {
+ /* CSS properties */
+}
+```
+
+- `selector1`: The parent element.
+- `selector2`: The direct child element.
+- `CSS properties`: The CSS properties to be applied to the direct child element.
+
+## Example
+
+In the following example, the child selector is used to select all `` elements that are direct children of the `
` element:
+
+```css title="index.css"
+div > span {
+ color: red;
+}
+```
+
+In the HTML code below, the CSS rule will not apply the color `red` to the text inside the `` element because it is not a direct child of the `
` element.
+
+```html title="index.html"
+
+ This text will not be red.
+
+ This text will not be red.
+
+
+```
+
+The child selector is more specific than the descendant selector and less specific than the adjacent sibling selector.
+
+:::tip Key Points to Remember
+- The child selector is represented by the `>` character between two selectors.
+- The child selector selects an element that is a direct child of another element.
+- The child selector is more specific than the descendant selector and less specific than the adjacent sibling selector.
+- The child selector is also known as the child combinator.
+- The child selector is useful when you want to target only the direct children of an element.
+:::
+
+
+
+## Example: Using Child Selector
+
+In the following example, the child selector is used to select all `` elements that are direct children of the `
+
+
+ ```
+
+
+
+ ```css showLineNumbers
+ div > span {
+ color: red;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This text will be red.
+
+ This text will not be red.
+
+
+
+
+
+In the above example, the CSS rule will apply the color `red` to the text inside the first `` element because it is a direct child of the `
` element. The second `` element is not a direct child of the `
` element, so the CSS rule will not apply to it.
+
+
+
+## Example: Using Multiple Levels of Children
+
+In the following example, the child selector is used to select all `` elements that are direct children of the `
` element, which is a direct child of the `` element:
+
+
+
+ ```html showLineNumbers
+
+
+
+
+
+
+ Child Selector Example
+
+
+
+
+ This text will be red.
+
+
+
+ ```
+
+
+
+ ```css showLineNumbers
+ body > div > span {
+ color: red;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This text will be red.
+
+
+
+In the above example, the CSS rule will apply the color `red` to the text inside the `` element because it is a direct child of the `
` element, which is a direct child of the `` element.
+
+## Related Selectors
+
+- [Descendant Selector](#): The descendant selector selects an element that is a descendant of another element.
+- [Adjacent Sibling Selector](#): The adjacent sibling selector selects an element that is immediately preceded by a specified element.
+- [General Sibling Selector](#): The general sibling selector selects an element that is preceded by a specified element.
+- [Parent Selector](#): The parent selector selects an element that is a direct parent of another element.
+- [Ancestor Selector](#): The ancestor selector selects an element that is an ancestor of another element.
+- [Universal Selector](#): The universal selector selects all elements in a document.
+-
\ No newline at end of file
diff --git a/docs/css/selectors/combinator-selectors/descendant-selector.md b/docs/css/selectors/combinator-selectors/descendant-selector.md
index e69de29bb..e9605f5bf 100644
--- a/docs/css/selectors/combinator-selectors/descendant-selector.md
+++ b/docs/css/selectors/combinator-selectors/descendant-selector.md
@@ -0,0 +1,162 @@
+---
+id: descendant-selector
+title: Descendant Selector
+sidebar_label: Descendant Selector
+sidebar_position: 1
+tags: [selector, combinator, descendant]
+description: Descendant selector is used to select an element that is a descendant of another element.
+keywords: [descendant selector, css descendant selector, css selector, css combinator, css descendant combinator]
+---
+
+In CSS, the descendant selector is used to select an element that is a descendant of another element. The descendant selector is represented by a whitespace character (` `) between two selectors.
+
+
+
+## Syntax
+
+The syntax for the descendant selector is as follows:
+
+```css title="index.css"
+selector1 selector2 {
+ /* CSS properties */
+}
+```
+
+- `selector1`: The ancestor element.
+- `selector2`: The descendant element.
+- `CSS properties`: The CSS properties to be applied to the descendant element.
+- ` `: The whitespace character represents the descendant selector.
+
+## Example
+
+In the following example, the descendant selector is used to select all `` elements that are descendants of the `
` element:
+
+```css title="index.css"
+div span {
+ color: red;
+}
+```
+
+In the HTML code below, the CSS rule will apply the color `red` to the text inside the `` element because it is a descendant of the `
` element.
+
+```html title="index.html"
+
+ This text will be red.
+
+```
+
+The descendant selector can be used to select multiple levels of descendants. For example, the following CSS rule will apply the color `blue` to the text inside the `` element that is a descendant of the `
` element, which is a descendant of the `` element:
+
+:::tip Key Points to Remember
+- The descendant selector is represented by a whitespace character (` `) between two selectors.
+- The descendant selector selects an element that is a descendant of another element.
+- The descendant selector can be used to select multiple levels of descendants.
+- The descendant selector is also known as the space combinator.
+- The descendant selector is more specific than the descendant combinator (`>`) and less specific than the child combinator (`~`).
+
+:::
+
+
+
+## Example: Using Descendant Selector
+
+In the following example, the descendant selector is used to select all `` elements that are descendants of the `
+
+
+ ```
+
+
+
+
+ ```css showLineNumbers
+ div span {
+ color: red;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This text will be red.
+
+
+
+
+In the above example, the CSS rule will apply the color `red` to the text inside the `` element because it is a descendant of the `
` element.
+
+
+
+## Example: Using Multiple Levels of Descendants
+
+In the following example, the descendant selector is used to select all `` elements that are descendants of the `
` element, which is a descendant of the `` element:
+
+
+
+ ```html showLineNumbers
+
+
+
+
+
+
+ Descendant Selector Example
+
+
+
+
+ This text will be blue.
+
+
+
+ ```
+
+
+
+
+ ```css showLineNumbers
+ body div span {
+ color: blue;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This text will be blue.
+
+
+
+
+
+In the above example, the CSS rule will apply the color `blue` to the text inside the `` element because it is a descendant of the `
` element, which is a descendant of the `` element.
+
+## Related Selectors
+
+- [Child Selector](#): The child selector selects an element that is a direct child of another element.
+- [Adjacent Sibling Selector](#): The adjacent sibling selector selects an element that is immediately preceded by a specified element.
+- [General Sibling Selector](#): The general sibling selector selects an element that is preceded by a specified element.
+- [Attribute Selector](#): The attribute selector selects elements based on their attributes.
+- [Pseudo-Class Selector](#): The pseudo-class selector selects elements based on their state or position.
\ No newline at end of file
diff --git a/docs/css/selectors/combinator-selectors/general-sibling-selector.md b/docs/css/selectors/combinator-selectors/general-sibling-selector.md
index e69de29bb..f2cea3fef 100644
--- a/docs/css/selectors/combinator-selectors/general-sibling-selector.md
+++ b/docs/css/selectors/combinator-selectors/general-sibling-selector.md
@@ -0,0 +1,115 @@
+---
+id: general-sibling-selector
+title: General Sibling Selector
+sidebar_label: General Sibling Selector
+position: 4
+tags: [selector, combinator, general-sibling]
+description: General sibling selector is used to select an element that is preceded by another element.
+keywords:
+ [
+ general sibling selector,
+ css general sibling selector,
+ css selector,
+ css combinator,
+ css general sibling combinator,
+ ]
+---
+
+In CSS, the general sibling selector is used to select an element that is preceded by another element. The general sibling selector is represented by the `~` character between two selectors.
+
+
+
+## Syntax
+
+The syntax for the general sibling selector is as follows:
+
+```css title="index.css"
+selector1 ~ selector2 {
+ /* CSS properties */
+}
+```
+
+- `selector1`: The first sibling element.
+- `selector2`: The second sibling element.
+- `CSS properties`: The CSS properties to be applied to the second sibling element.
+- `~`: The `~` character represents the general sibling selector.
+- The `~` character is used to select all sibling elements that are preceded by the first sibling element.
+
+## Example
+
+In the following example, the general sibling selector is used to select all `
` elements that are preceded by an `
` element:
+
+```css title="index.css"
+h2 ~ p {
+ font-weight: bold;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `font-weight: bold` property to the text inside the `
` element because it is preceded by an `
` element.
+
+:::info Additional Information
+- The general sibling selector is represented by the `~` character between two selectors.
+- The general sibling selector selects an element that is preceded by another element.
+- The general sibling selector is less specific than the adjacent sibling selector (`+`) and more specific than the descendant combinator (` `).
+- The general sibling selector is also known as the tilde combinator.
+- The general sibling selector can be used to target multiple sibling elements that are preceded by the first sibling element.
+- The general sibling selector is useful for styling elements that are not directly related but share the same parent.
+
+:::
+
+
+
+## Example: Using General Sibling Selector
+
+In the following example, the general sibling selector is used to select all `
+
+
+ ```
+
+
+ ```css showLineNumbers
+ h2 ~ p {
+ font-weight: bold;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
Heading
+
This text will be bold.
+
This text will also be bold.
+
Another Heading
+
This text will be bold too.
+
+
+
+In the above example, the CSS rule will apply the `font-weight: bold` property to the text inside the `
` elements that are preceded by an `
` element.
+
+
+
+## Summary
+
+The general sibling selector (`~`) is used to select an element that is preceded by another element. It is less specific than the adjacent sibling selector (`+`) and more specific than the descendant combinator (` `). The general sibling selector is useful for styling elements that are not directly related but share the same parent.
\ No newline at end of file