-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
201 lines (179 loc) · 5.96 KB
/
index.html
File metadata and controls
201 lines (179 loc) · 5.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MERN Visual Learning</title>
<link rel="stylesheet" href="assets/css/style.css" />
<style>
.concept-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.concept-card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.concept-card:hover {
transform: translateY(-5px);
}
.progress-header {
text-align: center;
margin: 30px 0 20px;
color: white;
}
.progress-stats {
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 10px;
text-align: center;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.category-header {
color: white;
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.completion-banner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
margin: 30px 0;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.celebration {
font-size: 3em;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>MERN Visual Learning</h1>
<p>Interactive visual explanations of MERN stack concepts</p>
</header>
<div class="progress-stats">
<h3>12/12 Concepts Completed! 🎊</h3>
</div>
<h2 class="category-header">React Concepts</h2>
<div class="concept-grid">
<div class="concept-card">
<h3>React useReducer Hook</h3>
<p>Learn how to manage complex state with useReducer</p>
<a href="react-hooks/useReducer.html" class="btn">View Explanation</a>
</div>
<div class="concept-card">
<h3>React useEffect Hook</h3>
<p>Understanding side effects in React components</p>
<a href="react-hooks/useEffect.html" class="btn">View Explanation</a>
</div>
<div class="concept-card">
<h3>React useState Hook</h3>
<p>Learn state management in functional components</p>
<a href="react-hooks/useState.html" class="btn">View Explanation</a>
</div>
<div class="concept-card">
<h3>React Context API</h3>
<p>Global state management in React</p>
<a href="react-hooks/context-api.html" class="btn"
>View Explanation</a
>
</div>
</div>
<h2 class="category-header">Node.js Concepts</h2>
<div class="concept-grid">
<div class="concept-card">
<h3>Node.js Event Loop</h3>
<p>Understanding Node's asynchronous architecture</p>
<a href="nodejs/event-loop.html" class="btn">View Explanation</a>
</div>
<div class="concept-card">
<h3>Express.js Middleware</h3>
<p>Learn about Express middleware functions</p>
<a href="express/express-middleware.html" class="btn"
>View Explanation</a
>
</div>
</div>
<h2 class="category-header">MongoDB Concepts</h2>
<div class="concept-grid">
<div class="concept-card">
<h3>MongoDB Aggregation</h3>
<p>Advanced data processing pipelines</p>
<a href="mongodb/aggregation.html" class="btn">View Explanation</a>
</div>
<div class="concept-card">
<h3>More MongoDB Topics</h3>
<p>Indexing, transactions, and performance optimization</p>
<a href="#" class="btn">Coming Soon</a>
</div>
</div>
<h2 class="category-header">Advanced Concepts</h2>
<div class="concept-grid">
<div class="concept-card">
<h3>JWT Authentication</h3>
<p>Secure authentication in MERN apps</p>
<a href="advanced/jwt-authentication.html" class="btn"
>View Explanation</a
>
</div>
<div class="concept-card">
<h3>Deployment Strategies</h3>
<p>Deploying MERN applications</p>
<a href="advanced/deployment-strategies.html" class="btn"
>View Explanation</a
>
</div>
<div class="concept-card">
<h3>Real-time Apps</h3>
<p>Socket.io and real-time features</p>
<a href="advanced/real-time-apps.html" class="btn"
>View Explanation</a
>
</div>
<div class="concept-card">
<h3>Testing Strategies</h3>
<p>Jest, Supertest, and testing methodologies</p>
<a href="advanced/testing-strategies.html" class="btn"
>View Explanation</a
>
</div>
<div class="concept-card">
<h3>Performance Optimization</h3>
<p>Optimizing MERN applications</p>
<a href="advanced/performance-optimization.html" class="btn"
>View Explanation</a
>
</div>
</div>
<div class="progress-stats" style="margin-top: 40px">
<h3>What's Next? 🚀</h3>
<p>
Continue your learning journey with advanced topics and real-world
projects!
</p>
<div style="margin-top: 15px">
<a href="#" class="btn" style="background: #667eea; margin: 5px"
>Advanced Patterns</a
>
<a href="#" class="btn" style="background: #764ba2; margin: 5px"
>Project Tutorials</a
>
<a href="#" class="btn" style="background: #f093fb; margin: 5px"
>Best Practices</a
>
</div>
</div>
</div>
</body>
</html>