Skip to content

Commit faf69d6

Browse files
ajay-dhangarajay-dhangar
committed
added new css docs
1 parent 83721a2 commit faf69d6

File tree

7 files changed

+707
-0
lines changed

7 files changed

+707
-0
lines changed

‎blog/2025-01-21/assets/ui-vs-ux-explained.png

182 KB
Loading

‎blog/2025-01-21/ui-ux-web-design-principle.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
title: "UI/UX Design Principles"
3+
sidebar_label: "UI/UX Design"
4+
authors: [ajay-dhangar]
5+
tags: [ui-ux, web design, user experience, user interface]
6+
date: 2025-01-21
7+
---
8+
9+
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.
10+
11+
<!-- truncate -->
12+
13+
## Why UI/UX Matters?
14+
UI (User Interface) is how something looks, and UX (User Experience) is how it works. When combined, they create designs that:
15+
- Solve problems.
16+
- Are easy to use.
17+
- Keep users engaged.
18+
19+
![UI vs UX](./assets/ui-vs-ux-explained.png)
20+
21+
22+
## Core Principles of UI/UX Design
23+
24+
### 1. Focus on the User
25+
Always design with your audience in mind. Ask yourself:
26+
- Who are the users?
27+
- What are their goals?
28+
- How can you make their experience seamless?
29+
30+
:::tip
31+
Create user personas and map their journeys for better understanding.
32+
:::
33+
34+
```mermaid
35+
graph TD
36+
A[User Persona] -->|Demographics| B[Age, Gender, Location]
37+
A -->|Behavior| C[Habits, Preferences]
38+
A -->|Goals| D[What they want to achieve]
39+
A -->|Pain Points| E[Challenges they face]
40+
```
41+
42+
### 2. Consistency is Key
43+
Use similar elements throughout your design to avoid confusion. For example:
44+
- Stick to a specific button style.
45+
- Use the same font for headings and body text.
46+
47+
48+
### 3. Visual Hierarchy
49+
Guide your users by organizing elements logically:
50+
- Use larger fonts for headings.
51+
- Highlight call-to-action buttons with bright colors.
52+
53+
```mermaid
54+
graph TB
55+
A[Header: Largest Font] --> B[Subheading: Medium Font]
56+
B --> C[Body Text: Smallest Font]
57+
A --> D[CTA Button: Highlighted]
58+
```
59+
60+
### 4. Keep it Simple
61+
Avoid clutter and distractions. Every element should have a purpose.
62+
- Use whitespace to give your design breathing room.
63+
- Limit choices to reduce decision fatigue.
64+
65+
66+
## Layouts Made Easy
67+
68+
### What is a Layout?
69+
A layout organizes content visually. Common sections include:
70+
- **Header**: Logo, navigation.
71+
- **Main Area**: Primary content.
72+
- **Footer**: Links, contact info.
73+
74+
75+
76+
### Using Grid Systems
77+
Grids help align elements perfectly. Most designers use a 12-column grid for flexibility.
78+
79+
<!-- ![Grid Example](https://via.placeholder.com/800x400.png?text=Grid+Layout+Example) -->
80+
81+
82+
### From Wireframe to Prototype
83+
Design starts with simple sketches (wireframes) and evolves into interactive prototypes:
84+
1. **Wireframe**: Basic layout.
85+
2. **Prototype**: Add colors, images, and interactivity.
86+
87+
<!-- ![Wireframe to Prototype](https://via.placeholder.com/800x400.png?text=Wireframe+to+Prototype) -->
88+
89+
```mermaid
90+
graph TD
91+
A[Wireframe] --> B[Prototype]
92+
B --> C[Design]
93+
C --> D[Development]
94+
```
95+
96+
97+
## Colors in Web Design
98+
99+
### **How Colors Affect Users**
100+
- **Blue**: Trust and calmness.
101+
- **Red**: Energy and urgency.
102+
- **Green**: Nature and health.
103+
104+
<!-- ![Color Psychology](https://via.placeholder.com/800x400.png?text=Color+Psychology) -->
105+
106+
### Creating a Color Palette
107+
Use tools like [Coolors](https://coolors.co) to generate harmonized palettes.
108+
109+
110+
## Typography Basics
111+
112+
### Font Pairing Made Simple
113+
Combine a decorative font with a readable one:
114+
- **Example**: Playfair Display (fancy) + Roboto (clean).
115+
116+
<!-- ![Font Pairing Example](https://via.placeholder.com/800x400.png?text=Font+Pairing) -->
117+
118+
```mermaid
119+
graph TD
120+
A[Playfair Display] -->|Heading| B[Roboto]
121+
A -->|Subheading| C[Roboto]
122+
A -->|Body Text| D[Roboto]
123+
```
124+
125+
### Readable Text Sizes
126+
- **Titles**: 24-32px.
127+
- **Body Text**: 16px.
128+
- **Buttons**: 14-18px.
129+
130+
131+
## Practical Design Tips
132+
133+
### 1. Use Fitts's Law
134+
Make buttons large and easy to click, especially on mobile.
135+
136+
### 2. Apply Gestalt Principles
137+
- **Proximity**: Group related items together.
138+
- **Similarity**: Use consistent styles for similar actions.
139+
140+
<!-- ![Gestalt Principles](https://via.placeholder.com/800x400.png?text=Gestalt+Principles) -->
141+
142+
```mermaid
143+
graph TD
144+
A[Proximity] -->|Grouping| B[Related Items]
145+
C[Similarity] -->|Consistent Styles| D[Similar Actions]
146+
```
147+
148+
### 3. Optimize for Accessibility
149+
- Ensure text has enough contrast against its background.
150+
- Add alt text to images for screen readers.
151+
152+
153+
## Conclusion
154+
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.

‎docs/css/selectors/combinator-selectors/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Combinator Selectors",
3+
"position": 3,
4+
"link": {
5+
"type": "generated-index",
6+
"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."
7+
}
8+
}

‎docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
id: adjacent-sibling-selector
3+
title: Adjacent Sibling Selector
4+
sidebar_label: Adjacent Sibling Selector
5+
position: 3
6+
tags: [selector, combinator, adjacent-sibling]
7+
description: Adjacent sibling selector is used to select an element that is immediately preceded by another element.
8+
keywords:
9+
[
10+
adjacent sibling selector,
11+
css adjacent sibling selector,
12+
css selector,
13+
css combinator,
14+
css adjacent sibling combinator,
15+
]
16+
---
17+
18+
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.
19+
20+
<AdsComponent />
21+
22+
## Syntax
23+
24+
The syntax for the adjacent sibling selector is as follows:
25+
26+
```css title="index.css"
27+
selector1 + selector2 {
28+
/* CSS properties */
29+
}
30+
```
31+
32+
- `selector1`: The first sibling element.
33+
- `selector2`: The second sibling element.
34+
- `CSS properties`: The CSS properties to be applied to the second sibling element.
35+
- `+`: The `+` character represents the adjacent sibling selector.
36+
37+
## Example
38+
39+
In the following example, the adjacent sibling selector is used to select all `<p>` elements that are immediately preceded by an `<h2>` element:
40+
41+
```css title="index.css"
42+
h2 + p {
43+
font-weight: bold;
44+
}
45+
```
46+
47+
In the HTML code below, the CSS rule will apply the `font-weight: bold` property to the text inside the `<p>` element because it is immediately preceded by an `<h2>` element.
48+
49+
```html title="index.html"
50+
<h2>Heading</h2>
51+
<p>This text will be bold.</p>
52+
```
53+
54+
The adjacent sibling selector can be used to target specific elements that are adjacent to each other in the HTML structure.
55+
56+
:::tip Key Points to Remember
57+
58+
- The adjacent sibling selector is represented by the `+` character between two selectors.
59+
- The adjacent sibling selector selects an element that is immediately preceded by another element.
60+
- The adjacent sibling selector is more specific than the general sibling selector (`~`) and less specific than the child combinator (`>`).
61+
- The adjacent sibling selector is also known as the next-sibling combinator.
62+
- The adjacent sibling selector is useful when you want to target elements that are adjacent to each other in the HTML structure.
63+
64+
:::
65+
66+
<AdsComponent />
67+
68+
## Example: Using Adjacent Sibling Selector
69+
70+
Let's consider an example where we want to style the text inside a paragraph (`<p>`) element that is immediately preceded by a heading (`<h2>`) element. We can achieve this using the adjacent sibling selector as shown below:
71+
72+
<Tabs>
73+
<TabItem value="HTML" lable="index.html">
74+
```html showLineNumbers
75+
<h2>Heading</h2>
76+
<p>This text will be bold.</p>
77+
```
78+
</TabItem>
79+
<TabItem value="CSS" lable="index.css">
80+
```css showLineNumbers
81+
h2 + p {
82+
font-weight: bold;
83+
}
84+
```
85+
</TabItem>
86+
</Tabs>
87+
88+
Now, you can see the output of the above code in the Browser Window like this:
89+
90+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#f9f9f9", color: "#000" }}>
91+
<div>
92+
<h2>Heading</h2>
93+
<p style={{ fontWeight: "bold" }}>This text will be bold.</p>
94+
</div>
95+
</BrowserWindow>
96+
97+
In the above example, the CSS rule will apply the `font-weight: bold` property to the text inside the `<p>` element because it is immediately preceded by an `<h2>` element.
98+
99+
## Conclusion
100+
101+
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.

0 commit comments

Comments
 (0)