Skip to content

Commit d8b9639

Browse files
iamAmeriamAmer
committed
docs: add tutorials section to documentation
1 parent 7344c78 commit d8b9639

4 files changed

Lines changed: 310 additions & 0 deletions

File tree

‎docs/docs/tutorials/building-your-first-app.mdx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
title: Building Your First App
3+
---
4+
5+
# Building Your First App
6+
7+
Learn how to build a simple color picker app using LiveCodes. This app will let users click a button to generate random background colors.
8+
9+
## What We'll Build
10+
11+
A fun color generator with:
12+
- Random color generation
13+
- Display the color code
14+
- Simple, clean interface
15+
16+
## Project Setup
17+
18+
1. Open [LiveCodes](https://livecodes.io)
19+
2. We'll use HTML, CSS, and JavaScript
20+
21+
## Implementation
22+
23+
### HTML Structure
24+
25+
```html
26+
<div class="container">
27+
<h1>Color Generator</h1>
28+
<div class="color-display" id="colorDisplay">
29+
<span id="colorCode">#3498db</span>
30+
</div>
31+
<button id="generateBtn">Generate Color</button>
32+
<p class="hint">Click the button to generate a random color!</p>
33+
</div>
34+
```
35+
36+
### Styling
37+
38+
```css
39+
body {
40+
margin: 0;
41+
font-family: Arial, sans-serif;
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
min-height: 100vh;
46+
background: #3498db;
47+
transition: background 0.5s ease;
48+
}
49+
50+
.container {
51+
text-align: center;
52+
background: white;
53+
padding: 40px;
54+
border-radius: 20px;
55+
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
56+
}
57+
58+
h1 {
59+
margin: 0 0 30px 0;
60+
color: #333;
61+
}
62+
63+
.color-display {
64+
background: #f0f0f0;
65+
padding: 30px;
66+
border-radius: 10px;
67+
margin-bottom: 30px;
68+
}
69+
70+
#colorCode {
71+
font-size: 2rem;
72+
font-weight: bold;
73+
font-family: 'Courier New', monospace;
74+
color: #333;
75+
}
76+
77+
#generateBtn {
78+
background: #333;
79+
color: white;
80+
border: none;
81+
padding: 15px 40px;
82+
font-size: 1.1rem;
83+
border-radius: 10px;
84+
cursor: pointer;
85+
transition: transform 0.2s;
86+
}
87+
88+
#generateBtn:hover {
89+
transform: scale(1.05);
90+
}
91+
92+
#generateBtn:active {
93+
transform: scale(0.95);
94+
}
95+
96+
.hint {
97+
margin-top: 20px;
98+
color: #666;
99+
font-size: 0.9rem;
100+
}
101+
```
102+
103+
### JavaScript Logic
104+
105+
```javascript
106+
const colorDisplay = document.getElementById('colorDisplay');
107+
const colorCode = document.getElementById('colorCode');
108+
const generateBtn = document.getElementById('generateBtn');
109+
110+
function getRandomColor() {
111+
const letters = '0123456789ABCDEF';
112+
let color = '#';
113+
for (let i = 0; i < 6; i++) {
114+
color += letters[Math.floor(Math.random() * 16)];
115+
}
116+
return color;
117+
}
118+
119+
function updateColor() {
120+
const newColor = getRandomColor();
121+
document.body.style.background = newColor;
122+
colorCode.textContent = newColor;
123+
}
124+
125+
generateBtn.addEventListener('click', updateColor);
126+
127+
// Generate a color on page load
128+
updateColor();
129+
```
130+
131+
## How It Works
132+
133+
1. **HTML**: Creates a simple layout with a color display and button
134+
2. **CSS**: Styles the interface and adds smooth transitions
135+
3. **JavaScript**:
136+
- `getRandomColor()`: Generates a random hex color
137+
- `updateColor()`: Changes the background and displays the color code
138+
- Event listener: Triggers color change on button click
139+
140+
## Testing Your App
141+
142+
Try these features:
143+
1. Click "Generate Color" multiple times
144+
2. Watch the smooth color transitions
145+
3. See the color code update
146+
4. Notice the button hover and click effects
147+
148+
## Challenge: Enhance Your App
149+
150+
Try adding these features:
151+
- Copy color code to clipboard when clicked
152+
- Add a history of recent colors
153+
- Let users save their favorite colors
154+
- Add different color format options (RGB, HSL)
155+
156+
## Next Steps
157+
158+
- [External Resources](/docs/features/external-resources) - Add libraries like color manipulation tools
159+
160+
## Complete Code Summary
161+
162+
**Concepts Covered**: DOM manipulation, events, random generation, CSS transitions
163+
**Time to Build**: 10-15 minutes

‎docs/docs/tutorials/getting-started-guide.mdx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Getting Started Guide
3+
---
4+
5+
# Getting Started Guide
6+
7+
This guide will walk you through creating your first project in LiveCodes.
8+
9+
## Prerequisites
10+
11+
- A web browser (Chrome, Firefox, Safari, or Edge)
12+
- Basic knowledge of HTML, CSS, and JavaScript
13+
14+
## Step 1: Open LiveCodes
15+
16+
1. Navigate to [livecodes.io](https://livecodes.io)
17+
2. You'll see the editor interface with three panels:
18+
- **HTML** (left)
19+
- **CSS** (middle)
20+
- **JavaScript** (right)
21+
- **Result** (bottom)
22+
23+
## Step 2: Create a Simple Page
24+
25+
Let's create a simple interactive greeting card.
26+
27+
### HTML Panel
28+
```html
29+
<div class="container">
30+
<h1 id="greeting">Hello, World!</h1>
31+
<input type="text" id="nameInput" placeholder="Enter your name">
32+
<button id="greetBtn">Greet Me!</button>
33+
</div>
34+
```
35+
36+
### CSS Panel
37+
```css
38+
.container {
39+
max-width: 600px;
40+
margin: 50px auto;
41+
text-align: center;
42+
font-family: Arial, sans-serif;
43+
}
44+
45+
h1 {
46+
color: #007bff;
47+
font-size: 2.5rem;
48+
}
49+
50+
input {
51+
padding: 10px;
52+
font-size: 1rem;
53+
margin: 10px;
54+
border: 2px solid #007bff;
55+
border-radius: 5px;
56+
}
57+
58+
button {
59+
padding: 10px 20px;
60+
font-size: 1rem;
61+
background-color: #007bff;
62+
color: white;
63+
border: none;
64+
border-radius: 5px;
65+
cursor: pointer;
66+
}
67+
68+
button:hover {
69+
background-color: #0056b3;
70+
}
71+
```
72+
73+
### JavaScript Panel
74+
```javascript
75+
const greeting = document.getElementById('greeting');
76+
const nameInput = document.getElementById('nameInput');
77+
const greetBtn = document.getElementById('greetBtn');
78+
79+
greetBtn.addEventListener('click', () => {
80+
const name = nameInput.value.trim();
81+
if (name) {
82+
greeting.textContent = `Hello, ${name}! `;
83+
} else {
84+
greeting.textContent = 'Hello, World!';
85+
}
86+
});
87+
```
88+
89+
## Step 3: See Your Results
90+
91+
The result panel automatically updates as you type. Try:
92+
- Entering your name in the input field
93+
- Clicking the "Greet Me!" button
94+
- Modifying the colors in the CSS
95+
96+
## Step 4: Save Your Project
97+
98+
1. Click the "Share" button in the toolbar.
99+
2. Choose **"Save"** to create a permanent URL
100+
3. Bookmark or share your project URL
101+
102+
## Next Steps
103+
104+
Now that you've created your first project, explore:
105+
- [Building Your First App](building-your-first-app) - Create more complex applications
106+
- [Features](/docs/features) - Learn about all LiveCodes features
107+
- [Templates](/docs/features/templates) - Use pre-built templates
108+
- [External Resources](/docs/features/external-resources) - Add libraries to your projects
109+
110+
## Tips
111+
112+
- Use **Ctrl/Cmd + S** to manually save
113+
- Press **Ctrl/Cmd + Alt + S** to open share panel
114+
- Press **Ctrl/Cmd + Shift + P** to open the command menu
115+
- Enable **Auto-save** in user settings for automatic saving

‎docs/docs/tutorials/index.mdx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: Guides & Tutorials
3+
---
4+
5+
# Guides & Tutorials
6+
7+
Welcome to the LiveCodes guides and tutorials! These step-by-step guides will help you learn how to use LiveCodes effectively.
8+
9+
## Getting Started
10+
11+
- [Getting Started Guide](getting-started-guide) - Your first steps with LiveCodes
12+
- [Building Your First App](building-your-first-app) - Create a complete project from scratch
13+
14+
## What You'll Learn
15+
16+
These guides cover practical, real-world scenarios to help you:
17+
18+
- Create interactive coding projects
19+
20+
Choose a guide above to get started!

‎docs/sidebars.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,18 @@ const sidebars: SidebarsConfig = {
1313
items: [
1414
'why',
1515
'getting-started',
16+
{
17+
type: 'category',
18+
label: 'Guides & Tutorials',
19+
link: {
20+
type: 'doc',
21+
id: 'tutorials/index',
22+
},
23+
items: [
24+
'tutorials/getting-started-guide',
25+
'tutorials/building-your-first-app',
26+
],
27+
},
1628
{
1729
type: 'category',
1830
label: 'Features',

0 commit comments

Comments
 (0)