Skip to content

Commit ae5bb10

Browse files
geromegrignongeromegrignon
committed
feat: enhance tutorial content with structured learning path and project details
- Introduced a comprehensive learning path for the Angular tutorial, detailing sections from getting started to advanced concepts. - Added project-based learning elements, including a Wedding Planner Task Manager application, to provide practical experience. - Enhanced the tutorial with clear descriptions of what learners will master and who the tutorial is perfect for, improving user engagement and clarity.
1 parent afc906e commit ae5bb10

File tree

1 file changed

+352
-2
lines changed

1 file changed

+352
-2
lines changed

‎src/content/docs/index.mdx‎

Lines changed: 352 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,8 @@ hero:
1515
actions:
1616
- text: Getting Started
1717
link: en/getting-started/introduction
18-
icon: right-arrow
1918
- text: Discover official tutorials
2019
link: https://angular.dev/tutorials
21-
icon: external
2220
variant: minimal
2321
---
2422

@@ -33,3 +31,355 @@ hero:
3331
This tutorial is part of the **Angular Courses Lab** initiative - a community-driven effort to create comprehensive, hands-on learning experiences for Angular developers of all skill levels. Our mission is to provide practical, real-world tutorials that bridge the gap between Angular concepts and actual application development.
3432

3533
Through this initiative, we're building a collection of interactive tutorials that cover everything from basic Angular concepts to advanced patterns, helping developers master Angular through guided, project-based learning.
34+
35+
<div class="space-y-12">
36+
<div class="bg-[var(--sl-color-bg-sidebar)] p-8 rounded-2xl text-center border border-[var(--sl-color-gray-6)]">
37+
<h2 class="text-4xl font-bold text-[var(--sl-color-white)] mb-4">
38+
What Makes This Tutorial Special
39+
</h2>
40+
<p class="text-lg text-[var(--sl-color-white)] opacity-80">
41+
Transform from Angular beginner to confident developer through hands-on project building
42+
</p>
43+
</div>
44+
45+
{" "}
46+
47+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl border border-[var(--sl-color-gray-6)]">
48+
<h3 class="text-2xl font-bold text-[var(--sl-color-white)] mb-4">
49+
Complete Project-Based Learning
50+
</h3>
51+
<p class="text-[var(--sl-color-white)] text-lg leading-relaxed opacity-80">
52+
Build a real{" "}
53+
<strong class="text-[var(--sl-color-white)]">
54+
Wedding Planner Task Manager
55+
</strong>{" "}
56+
application from scratch! This isn't just theory - you'll create a fully
57+
functional web application that demonstrates real-world Angular development
58+
patterns.
59+
</p>
60+
</div>
61+
62+
<div class="space-y-6">
63+
<h3 class="text-3xl font-bold text-[var(--sl-color-white)] text-center">
64+
Progressive Learning Path
65+
</h3>
66+
<p class="text-center text-[var(--sl-color-white)] text-lg mb-8 opacity-80">
67+
Our carefully structured curriculum takes you from Angular basics to advanced concepts through 7 comprehensive sections
68+
</p>
69+
70+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
71+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)]">
72+
<div class="mb-4">
73+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">Getting Started</h4>
74+
</div>
75+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
76+
<li class="flex items-start">
77+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
78+
<span class="opacity-80"><strong>Prerequisites & Setup</strong>: Everything you need to begin your Angular journey</span>
79+
</li>
80+
<li class="flex items-start">
81+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
82+
<span class="opacity-80"><strong>TypeScript Introduction</strong>: Master the language that powers Angular</span>
83+
</li>
84+
<li class="flex items-start">
85+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
86+
<span class="opacity-80"><strong>Learning Process</strong>: Understand how to learn Angular effectively</span>
87+
</li>
88+
<li class="flex items-start">
89+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
90+
<span class="opacity-80"><strong>Project Overview</strong>: Discover what you'll build and why it matters</span>
91+
</li>
92+
</ul>
93+
</div>
94+
95+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)]">
96+
<div class="mb-4">
97+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">Task Listing</h4>
98+
</div>
99+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
100+
<li class="flex items-start">
101+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
102+
<span class="opacity-80"><strong>Components Introduction</strong>: Learn the building blocks of Angular applications</span>
103+
</li>
104+
<li class="flex items-start">
105+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
106+
<span class="opacity-80"><strong>Create Your First Component</strong>: Hands-on component creation</span>
107+
</li>
108+
<li class="flex items-start">
109+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
110+
<span class="opacity-80"><strong>Display Dynamic Content</strong>: Master interpolation and data binding</span>
111+
</li>
112+
<li class="flex items-start">
113+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
114+
<span class="opacity-80"><strong>Pipes & Data Formatting</strong>: Transform data for better user experience</span>
115+
</li>
116+
</ul>
117+
</div>
118+
119+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)]">
120+
<div class="mb-4">
121+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">Create Task</h4>
122+
</div>
123+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
124+
<li class="flex items-start">
125+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
126+
<span class="opacity-80"><strong>Form Components</strong>: Build interactive forms for user input</span>
127+
</li>
128+
<li class="flex items-start">
129+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
130+
<span class="opacity-80"><strong>Event Binding</strong>: Capture user interactions and form submissions</span>
131+
</li>
132+
<li class="flex items-start">
133+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
134+
<span class="opacity-80"><strong>Dependency Injection</strong>: Master Angular's powerful DI system</span>
135+
</li>
136+
<li class="flex items-start">
137+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
138+
<span class="opacity-80"><strong>Routing Introduction</strong>: Navigate between different views</span>
139+
</li>
140+
</ul>
141+
</div>
142+
143+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)]">
144+
<div class="mb-4">
145+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">Reusable Components</h4>
146+
</div>
147+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
148+
<li class="flex items-start">
149+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
150+
<span class="opacity-80"><strong>Component Reusability</strong>: Create flexible, adaptable components</span>
151+
</li>
152+
<li class="flex items-start">
153+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
154+
<span class="opacity-80"><strong>Input/Output Properties</strong>: Pass data between components</span>
155+
</li>
156+
<li class="flex items-start">
157+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
158+
<span class="opacity-80"><strong>Component Communication</strong>: Master parent-child component interaction</span>
159+
</li>
160+
<li class="flex items-start">
161+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
162+
<span class="opacity-80"><strong>Advanced Component Patterns</strong>: Build sophisticated UI components</span>
163+
</li>
164+
</ul>
165+
</div>
166+
167+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)]">
168+
<div class="mb-4">
169+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">Update Task</h4>
170+
</div>
171+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
172+
<li class="flex items-start">
173+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
174+
<span class="opacity-80"><strong>Form Prefilling</strong>: Populate forms with existing data</span>
175+
</li>
176+
<li class="flex items-start">
177+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
178+
<span class="opacity-80"><strong>Update Operations</strong>: Modify existing records</span>
179+
</li>
180+
<li class="flex items-start">
181+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
182+
<span class="opacity-80"><strong>Route Parameters</strong>: Handle dynamic routing scenarios</span>
183+
</li>
184+
<li class="flex items-start">
185+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
186+
<span class="opacity-80"><strong>Form Validation</strong>: Ensure data integrity</span>
187+
</li>
188+
</ul>
189+
</div>
190+
191+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)]">
192+
<div class="mb-4">
193+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">Delete Task</h4>
194+
</div>
195+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
196+
<li class="flex items-start">
197+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
198+
<span class="opacity-80"><strong>Delete Operations</strong>: Remove records safely</span>
199+
</li>
200+
<li class="flex items-start">
201+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
202+
<span class="opacity-80"><strong>User Confirmation</strong>: Implement proper UX patterns</span>
203+
</li>
204+
<li class="flex items-start">
205+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
206+
<span class="opacity-80"><strong>Empty State Handling</strong>: Manage application states gracefully</span>
207+
</li>
208+
</ul>
209+
</div>
210+
211+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl hover:shadow-lg transition-all duration-300 border border-[var(--sl-color-gray-6)] md:col-span-2 lg:col-span-1">
212+
<div class="mb-4">
213+
<h4 class="text-xl font-bold text-[var(--sl-color-white)]">API Server</h4>
214+
</div>
215+
<ul class="space-y-2 text-[var(--sl-color-white)] pl-0">
216+
<li class="flex items-start">
217+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
218+
<span class="opacity-80"><strong>JSON Server Setup</strong>: Create a mock API for development</span>
219+
</li>
220+
<li class="flex items-start">
221+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
222+
<span class="opacity-80"><strong>HTTP Client</strong>: Communicate with backend services</span>
223+
</li>
224+
<li class="flex items-start">
225+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
226+
<span class="opacity-80"><strong>CRUD Operations</strong>: Complete Create, Read, Update, Delete functionality</span>
227+
</li>
228+
<li class="flex items-start">
229+
<span class="text-[var(--sl-color-white)] mr-2 opacity-60">•</span>
230+
<span class="opacity-80"><strong>Error Handling</strong>: Manage API responses and errors</span>
231+
</li>
232+
</ul>
233+
</div>
234+
</div>
235+
236+
</div>
237+
238+
{" "}
239+
240+
<div class="bg-[var(--sl-color-bg-sidebar)] p-8 rounded-2xl border border-[var(--sl-color-gray-6)]">
241+
<h3 class="text-3xl font-bold text-[var(--sl-color-white)] mb-6 text-center">
242+
Why Choose This Tutorial?
243+
</h3>
244+
<div class="grid md:grid-cols-2 gap-6">
245+
<div class="space-y-4">
246+
<div class="flex items-center space-x-3">
247+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
248+
<span class="text-[var(--sl-color-white)] font-semibold">
249+
Real-World Application
250+
</span>
251+
</div>
252+
<div class="flex items-center space-x-3">
253+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
254+
<span class="text-[var(--sl-color-white)] font-semibold">
255+
Modern Angular
256+
</span>
257+
</div>
258+
<div class="flex items-center space-x-3">
259+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
260+
<span class="text-[var(--sl-color-white)] font-semibold">
261+
Hands-On Learning
262+
</span>
263+
</div>
264+
<div class="flex items-center space-x-3">
265+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
266+
<span class="text-[var(--sl-color-white)] font-semibold">
267+
Progressive Difficulty
268+
</span>
269+
</div>
270+
</div>
271+
<div class="space-y-4">
272+
<div class="flex items-center space-x-3">
273+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
274+
<span class="text-[var(--sl-color-white)] font-semibold">
275+
Complete CRUD
276+
</span>
277+
</div>
278+
<div class="flex items-center space-x-3">
279+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
280+
<span class="text-[var(--sl-color-white)] font-semibold">
281+
Professional Patterns
282+
</span>
283+
</div>
284+
<div class="flex items-center space-x-3">
285+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full opacity-60"></span>
286+
<span class="text-[var(--sl-color-white)] font-semibold">
287+
Community Support
288+
</span>
289+
</div>
290+
</div>
291+
</div>
292+
</div>
293+
294+
<div class="grid md:grid-cols-2 gap-8">
295+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl border border-[var(--sl-color-gray-6)]">
296+
<h3 class="text-2xl font-bold text-[var(--sl-color-white)] mb-4">
297+
Perfect For:
298+
</h3>
299+
<ul class="space-y-3 text-[var(--sl-color-white)] pl-0">
300+
<li class="flex items-start">
301+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mt-2 mr-3 flex-shrink-0 opacity-60"></span>
302+
<div class="opacity-80">
303+
<strong class="text-[var(--sl-color-white)]">Beginners</strong> with HTML, CSS, and JavaScript knowledge
304+
</div>
305+
</li>
306+
<li class="flex items-start">
307+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mt-2 mr-3 flex-shrink-0 opacity-60"></span>
308+
<div class="opacity-80">
309+
<strong class="text-[var(--sl-color-white)]">Developers</strong> transitioning from other frameworks
310+
</div>
311+
</li>
312+
<li class="flex items-start">
313+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mt-2 mr-3 flex-shrink-0 opacity-60"></span>
314+
<div class="opacity-80">
315+
<strong class="text-[var(--sl-color-white)]">Students</strong> looking for practical Angular experience
316+
</div>
317+
</li>
318+
<li class="flex items-start">
319+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mt-2 mr-3 flex-shrink-0 opacity-60"></span>
320+
<div class="opacity-80">
321+
<strong class="text-[var(--sl-color-white)]">Professionals</strong> wanting to refresh their Angular skills
322+
</div>
323+
</li>
324+
</ul>
325+
</div>
326+
327+
<div class="bg-[var(--sl-color-bg-sidebar)] p-6 rounded-xl border border-[var(--sl-color-gray-6)]">
328+
<h3 class="text-2xl font-bold text-[var(--sl-color-white)] mb-4">
329+
What You'll Master:
330+
</h3>
331+
<div class="grid grid-cols-1 gap-2 text-[var(--sl-color-white)] pl-0">
332+
<div class="flex items-center">
333+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
334+
<span class="opacity-80">Component-based architecture</span>
335+
</div>
336+
<div class="flex items-center">
337+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
338+
<span class="opacity-80">TypeScript integration</span>
339+
</div>
340+
<div class="flex items-center">
341+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
342+
<span class="opacity-80">Routing and navigation</span>
343+
</div>
344+
<div class="flex items-center">
345+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
346+
<span class="opacity-80">Form handling and validation</span>
347+
</div>
348+
<div class="flex items-center">
349+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
350+
<span class="opacity-80">HTTP communication</span>
351+
</div>
352+
<div class="flex items-center">
353+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
354+
<span class="opacity-80">Service architecture</span>
355+
</div>
356+
<div class="flex items-center">
357+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
358+
<span class="opacity-80">Reusable component design</span>
359+
</div>
360+
<div class="flex items-center">
361+
<span class="w-2 h-2 bg-[var(--sl-color-white)] rounded-full mr-3 opacity-60"></span>
362+
<span class="opacity-80">Modern Angular patterns</span>
363+
</div>
364+
</div>
365+
</div>
366+
367+
</div>
368+
369+
<div class="text-center bg-[var(--sl-color-bg-sidebar)] p-8 rounded-2xl border border-[var(--sl-color-gray-6)]">
370+
<h3 class="text-3xl font-bold text-[var(--sl-color-white)] mb-4">
371+
Ready to Transform Your Web Development Skills?
372+
</h3>
373+
<p class="text-xl text-[var(--sl-color-white)] mb-6">
374+
Let's build something amazing together!
375+
</p>
376+
<div class="flex justify-center space-x-4">
377+
<a href="en/getting-started/introduction" class="bg-[var(--sl-color-white)] text-[var(--sl-color-bg-sidebar)] px-8 py-3 rounded-lg font-bold hover:bg-opacity-90 transition-all duration-300">
378+
Start Learning Now
379+
</a>
380+
<a href="https://angular.dev/tutorials" class="border-2 border-[var(--sl-color-white)] text-[var(--sl-color-white)] px-8 py-3 rounded-lg font-bold hover:bg-[var(--sl-color-white)] hover:text-[var(--sl-color-bg-sidebar)] transition-all duration-300">
381+
Explore Official Tutorials
382+
</a>
383+
</div>
384+
</div>
385+
</div>

0 commit comments

Comments
 (0)