From f83a23dca8402c070da573ea0ff3eef9e0b5b5f5 Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 6 Mar 2026 16:30:49 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes) --- translations/fa/.co-op-translator.json | 10 +- .../README.md | 749 ++++++++------- translations/fa/AGENTS.md | 392 ++++---- translations/fa/README.md | 230 ++--- translations/ur/.co-op-translator.json | 10 +- .../README.md | 868 ++++++++++-------- translations/ur/AGENTS.md | 350 +++---- translations/ur/README.md | 244 ++--- translations/zh-CN/.co-op-translator.json | 10 +- .../README.md | 659 ++++++------- translations/zh-CN/AGENTS.md | 269 +++--- translations/zh-CN/README.md | 196 ++-- 12 files changed, 2053 insertions(+), 1934 deletions(-) diff --git a/translations/fa/.co-op-translator.json b/translations/fa/.co-op-translator.json index 299351889..e5a86fae8 100644 --- a/translations/fa/.co-op-translator.json +++ b/translations/fa/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T10:49:43+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:14:33+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "fa" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T15:59:48+00:00", + "translation_date": "2026-03-06T16:28:31+00:00", "source_file": "AGENTS.md", "language_code": "fa" }, @@ -516,8 +516,8 @@ "language_code": "fa" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T15:55:30+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:09:59+00:00", "source_file": "README.md", "language_code": "fa" }, diff --git a/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 0328ec045..cb7d34aa2 100644 --- a/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,15 +1,15 @@ -# مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مدرن توسعه‌دهندگان +# معرفی زبان‌های برنامه‌نویسی و ابزارهای مدرن توسعه‌دهندگان -سلام به تو، توسعه‌دهنده آینده! 👋 می‌توانم چیزی به تو بگویم که هر روز برایم هیجان‌انگیز است؟ تو در آستانه کشف این هستی که برنامه‌نویسی فقط درباره کامپیوترها نیست – بلکه درباره داشتن نیروهای فوق‌العاده واقعی است که ایده‌های wild تو را به زندگی می‌آورد! +سلام به توسعه‌دهنده‌ی آینده! 👋 می‌تونم چیزی بهت بگم که هر روز هنوز هم مو به تنم سیخ می‌کنه؟ تو داری کشف می‌کنی که برنامه‌نویسی فقط مربوط به کامپیوترها نیست – بلکه داشتن قدرت‌های فوق‌العاده واقعی برای زنده کردن وحشیانه‌ترین ایده‌هات هستی! -می‌دانی آن لحظه‌ای که از برنامه محبوبت استفاده می‌کنی و همه چیز دقیقاً بی‌نقص است؟ وقتی روی یک دکمه فشار می‌دهی و چیز جادویی‌ای اتفاق می‌افتد که تو را به حیرت وا می‌دارد «وای، چطور این کار را کردند؟» خوب، کسی دقیقاً مثل تو – احتمالاً نشسته در کافی‌شاپ محبوبش در ساعت ۲ صبح با سومین اسپرسو – کدی نوشته که آن جادو را ساخته. و این چیزی است که ذهنت را منفجر می‌کند: تا پایان این درس، نه تنها فهمیده‌ای چگونه این کار را کردند، بلکه خودت هم مشتاق می‌شوی که اینکار را امتحان کنی! +اون لحظه‌ای که داری از برنامه‌ی موردعلاقه‌ات استفاده می‌کنی و همه‌چیز دقیقاً درست کلیک می‌کنه رو می‌دونی؟ وقتی یک دکمه رو فشار می‌دی و اتفاقی کاملاً جادویی می‌افته که باعث می‌شه بگی «وای، چطور تونستند این کار رو بکنند؟» خب، کسی مثل خودِ تو – احتمالاً نشسته توی کافی‌شاپ موردعلاقه‌ش ساعت ۲ صبح با سومین اسپرسوش – کدی نوشته که اون جادو رو ساخته. و اینجا جاییه که ذهنت منفجر می‌شه: تا پایان این درس، نه تنها می‌فهمی اون‌ها چطور این کار رو کردند، بلکه دلت می‌خواد خودت هم امتحانش کنی! -ببین، کاملاً می‌فهمم اگر برنامه‌نویسی الان کمی ترسناک به نظر برسد. وقتی من شروع کردم، واقعاً فکر می‌کردم باید نابغه ریاضی باشی یا از پنج سالگی کدنویسی کنی. اما این چیزی بود که کاملاً دیدم را تغییر داد: برنامه‌نویسی دقیقاً مثل یادگیری صحبت کردن به زبان جدید است. با "سلام" و "متشکرم" شروع می‌کنی، بعد سفارش قهوه می‌دهی، و پیش از آنکه بدانی، در بحث‌های فلسفی عمیق شرکت می‌کنی! فقط در اینجا، تو داری با کامپیوترها صحبت می‌کنی و واقعاً؟ آنها صبورترین شریک‌های مکالمه‌ای هستند که می‌توانی داشته باشی – هرگز اشتباهاتت را قضاوت نمی‌کنند و همیشه مشتاقند دوباره امتحان کنند! +ببین، کاملاً درک می‌کنم اگر برنامه‌نویسی الان برات ترسناک به نظر میاد. وقتی تازه شروع کردم، واقعاً فکر می‌کردم باید نابغه ریاضی باشی یا از پنج‌سالگی داری کد می‌زنی. اما چیزی که کل دیدگاه منو عوض کرد این بود: برنامه‌نویسی دقیقاً مثل یادگیری داشتن مکالمه در یه زبان جدید هست. با «سلام» و «مرسی» شروع می‌کنی، بعد می‌رسی به سفارش دادن قهوه، و قبل از اینکه بدانی، داری بحث‌های فلسفی عمیق می‌کنی! البته در این مورد، داری با کامپیوترها صحبت می‌کنی، و راستش؟ اون‌ها صبورترین همراهان مکالمه‌ای هستند که می‌تونی داشته باشی – هیچوقت اشتباهاتت رو قضاوت نمی‌کنند و همیشه با اشتیاق دوباره امتحان می‌کنند! -امروز، ما به ابزارهای شگفت‌انگیزی می‌پردازیم که توسعه وب مدرن را نه تنها ممکن بلکه واقعاً اعتیادآور کرده‌اند. منظورم دقیقاً همان ویرایشگرها، مرورگرها و جریان‌های کاری است که توسعه‌دهندگان شرکت‌های Netflix، Spotify و استودیوی اپلیکیشن‌های مستقل محبوب تو هر روز استفاده می‌کنند. و این بخشی است که باعث شادی تو می‌شود: بیشتر این ابزارهای حرفه‌ای و استاندارد صنعت کاملاً رایگان هستند! +امروز قراره ابزارهای شگفت‌انگیزی رو بررسی کنیم که توسعه وب مدرن رو نه تنها ممکن، بلکه به‌شدت اعتیادآور می‌کنن. دارم درباره همون ویرایشگرها، مرورگرها و جریان‌های کاری حرف می‌زنم که توسعه‌دهندگان نتفلیکس، اسپاتیفای و استودیوهای اپ مستقل موردعلاقه‌ات هر روز استفاده می‌کنند. و این بخشی که باعث می‌شه رقص شادی بکنی: بیشتر این ابزارهای حرفه‌ای و استاندارد صنعت کاملاً رایگان هستن! ![Intro Programming](../../../../translated_images/fa/webdev101-programming.d6e3f98e61ac4bff.webp) -> یادداشت تصویری توسط [Tomomi Imura](https://twitter.com/girlie_mac) +> تصویرگری توسط [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey @@ -27,154 +27,154 @@ journey کاوش ابزار: 5: You ارتباط با جامعه: 5: You ``` -## بیایید ببینیم چقدر می‌دانی! +## بیایید ببینیم چه چیزهایی رو قبلاً می‌دونی! -قبل از اینکه وارد بخش هیجان‌انگیز شویم، کنجکاوم – چه چیزهایی درباره دنیای برنامه‌نویسی قبلاً می‌دانی؟ و گوش کن، اگر به این سوال‌ها نگاه می‌کنی و فکر می‌کنی «من واقعاً هیچ ایده‌ای درباره این ندارم»، این فقط خوب نیست، بلکه عالی است! یعنی تو دقیقاً در جای درست هستی. این آزمون را مثل گرم کردن قبل از ورزش در نظر بگیر – ما داریم فقط آن عضلات مغز را آماده می‌کنیم! +قبل از اینکه بریم سراغ بخش‌های جذاب، کنجکاوم بدونم – درباره این دنیای برنامه‌نویسی چی می‌دونی؟ و گوش کن، اگر داری به این سوالات نگاه می‌کنی و فکر می‌کنی «من واقعاً هیچ سرنخی درباره هیچ‌کدوم ندارم»، این نه فقط اوکیه، بلکه عالیه! یعنی تو دقیقاً تو جای درستی هستی. این آزمون رو مثل گرم کردن قبل از تمرین ببین – داریم عضلات مغزمون رو گرم می‌کنیم! -[آزمون پیش-درس را انجام بده](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[تکمیل آزمون پیش‌درس](https://ff-quizzes.netlify.app/web/) -## ماجراجویی که با هم خواهیم داشت +## ماجرایی که قراره با هم شروع کنیم -خب، واقعاً من پر از هیجان برای آن چیزی هستم که امروز کشف خواهیم کرد! واقعاً، آرزو می‌کنم می‌توانستم صورتی که وقتی برخی از این مفاهیم برات روشن می‌شود ببینم. این سفر شگفت‌انگیز ما با هم است: +باشه، من واقعاً از هیجان دارم که امروز قراره چی رو کشف کنیم! بهم راست بگو، دوست داشتم بتونم قیافت رو ببینم وقتی بعضی از این مفاهیم واست جا می‌افته. این سفر شگفت‌انگیزیه که قراره با هم طی کنیم: -- **برنامه‌نویسی واقعاً چیست (و چرا هیجان‌انگیزترین چیز دنیاست!)** – ما کشف می‌کنیم که چگونه کد دقیقاً همان جادوی نامرئی است که همه چیز اطراف تو را قدرت می‌دهد، از آن زنگ هشدار که به طرز عجیبی می‌داند دوشنبه صبح است تا الگوریتمی که توصیه‌های دقیق Netflix تو را سامان می‌دهد -- **زبان‌های برنامه‌نویسی و شخصیت‌های فوق‌العاده آنها** – تصور کن وارد مهمانی می‌شوی که هر نفر نیروهای فوق‌العاده و روش‌های کاملاً متفاوت برای حل مسائل دارد. دنیای زبان‌های برنامه‌نویسی دقیقاً همین‌طور است و تو عاشق آشنایی با آنها خواهی شد! -- **بلوک‌های بنیادینی که جادوی دیجیتال را می‌سازند** – آنها را مثل بهترین مجموعه لگوی خلاقانه تصور کن. وقتی بفهمی این قطعات چطور کنار هم می‌آیند، می‌فهمی که می‌توانی هر چیزی را که در تصور داری بسازی -- **ابزارهای حرفه‌ای که باعث می‌شود حس کنی همین الان عصای جادوگری به تو داده شده** – واقعاً اغراق نمی‌کنم – این ابزارها واقعاً باعث می‌شوند حس کنی قدرت فوق‌العاده داری، و بهترین بخش؟ همان‌هایی هستند که حرفه‌ای‌ها استفاده می‌کنند! +- **برنامه‌نویسی دقیقاً چیه (و چرا باحال‌ترین چیز جهان هست!)** – می‌خوایم کشف کنیم کد در حقیقت همون جادوی نامرئیه که همه چیز اطراف تو رو هدایت می‌کنه، از اون آلارمی که به طرز عجیبی می‌دونه صبح دوشنبه‌ست گرفته تا الگوریتمی که دقیقاً نتفلیکس رو برات توصیه می‌کنه +- **زبان‌های برنامه‌نویسی و شخصیت‌های شگفت‌انگیزشون** – تصور کن وارد یه مهمونی می‌شی که هرکس ابرقدرت‌ها و راه‌های متفاوتی برای حل مسئله داره. دنیای زبان‌های برنامه‌نویسی دقیقاً همینه، و تو عاشق آشنایی باهاشون می‌شی! +- **بلوک‌های بنیادی که باعث می‌شن جادوی دیجیتال اتفاق بیفته** – این‌ها رو مثل مجموعه لگوی خلاقانه نهایی ببین. وقتی بفهمی این قطعات چطور کنار هم قرار می‌گیرن، می‌فهمی دقیقاً می‌تونی هر چیزی که تخیل می‌کنی رو بسازی +- **ابزارهای حرفه‌ای که باعث می‌شن احساس کنی تازه یه عصای جادوگری بهت دادن** – دارم بزرگ‌نمایی نمی‌کنم – این ابزارها واقعاً باعث می‌شن حس کنی قدرت‌های فوق‌العاده داری، و بهترین قسمت اینجاست؟ همون‌هایی هستن که حرفه‌ای‌ها استفاده می‌کنن! -> 💡 **نکته مهم**: امروز سعی نکن همه چیز را حفظ کنی! الان فقط می‌خواهم آن جرقه هیجان درباره امکانات احتمالی را حس کنی. جزئیات به شکل طبیعی با تمرین مشترک ما جا می‌افتند – این است راه حقیقی یادگیری! +> 💡 **یه نکته**: حتی به ذهنت هم خطور نکن که امروز بخوای همه چیز رو حفظ کنی! الان فقط می‌خوام اون جرقه هیجان درباره اینکه چه چیزهایی ممکنن برات ایجاد بشه رو حس کنی. جزئیات خودبه‌خود وقتی با هم تمرین می‌کنیم می‌چسبن – اینطوری یادگیری واقعی اتفاق میافته! -> تو می‌توانی این درس را در [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) هم بگیری! +> می‌تونی این درس رو در [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) هم بگیری! -## پس برنامه‌نویسی دقیقاً *چیست*؟ +## پس دقیقاً برنامه‌نویسی *چی* هست؟ -خب، بیایید به سوال میلیون دلاری بپردازیم: برنامه‌نویسی واقعاً چیست؟ +باشه، بریم سراغ سوال میلیون دلاری: برنامه‌نویسی واقعاً چیه؟ -داستانی به تو می‌گویم که دید من را کاملاً تغییر داد. هفته گذشته داشتم به مادرم توضیح می‌دادم چطور از کنترل تلویزیون هوشمند جدیدمان استفاده کند. خودم را گرفتم که می‌گویم «دکمه قرمز را فشار بده، اما نه دکمه بزرگ قرمز، دکمه کوچکتر قرمز سمت چپ... نه، سمت چپ دیگرت... اوکی، الآن دو ثانیه نگه دار، نه یک ثانیه، نه سه...» آشنا نیست؟ 😅 +داستانی دارم که کاملاً طرز فکر منو عوض کرد. هفته پیش داشتم تلاش می‌کردم مامانم رو راهنمایی کنم چطور از کنترل جدید تلویزیون هوشمون استفاده کنه. دیدم دارم می‌گم «دکمه قرمز رو بزن، ولی نه دکمه بزرگ قرمز، دکمه کوچک قرمز سمت چپ... نه، سمت چپ دیگه‌ات... حالا نگه دار دو ثانیه، نه یک ثانیه، نه سه...» آشنا به نظر میاد؟ 😅 -همان برنامه‌نویسی است! هنر دادن دستورالعمل‌های فوق‌العاده دقیق و مرحله‌به‌مرحله به چیزی است که بسیار قدرتمند است ولی نیاز دارد همه چیز کاملاً واضح بیان شود. فقط به جای اینکه به مادرت توضیح بدهی (که می‌تواند سوال کند «کدام دکمه قرمز؟!»)، به کامپیوتر توضیح می‌دهی (که دقیقاً همان چیزی را انجام می‌دهد که گفتی، حتی اگر آن چیزی نباشد که منظورت بود). +یعنی برنامه‌نویسی! یعنی هنر دادن دستورالعمل‌های بسیار دقیق و مرحله به مرحله به چیزی که واقعاً قدرتمنده، ولی باید همه چیز دقیق و کامل براش توضیح داده بشه. البته به جای اینکه به مامانت (که می‌تونه بپرسه «کدوم دکمه قرمز؟!») توضیح بدی، داری به کامپیوتر توضیح می‌دی (که دقیقاً همون کاری رو می‌کنه که بهش می‌گی، حتی اگر اون چیزی که گفتی دقیقاً منظور تو نباشه). -آن چیزی که برایم بسیار شگفت‌انگیز بود وقتی یاد گرفتم: کامپیوترها در اصل خیلی ساده‌اند. آنها فقط دو چیز را می‌فهمند – ۱ و ۰، که اساساً یعنی «بله» و «خیر» یا «روشن» و «خاموش». فقط همین! اما اینجا جادوی واقعی است – ما لازم نیست دقیقا در ۱ و ۰ حرف بزنیم مثل فیلم ماتریکس. اینجا زبان‌های برنامه‌نویسی به کمک ما می‌آیند. آنها مثل بهترین مترجم دنیا هستند که افکار کاملاً طبیعی انسانیت را به زبان کامپیوتر تبدیل می‌کنند. +وقتی اینو یاد گرفتم، واقعاً برام شگفت‌آور بود: کامپیوترها در اصل بسیار ساده هستن. اون‌ها فقط دو تا چیز رو می‌فهمن – ۱ و ۰، که اساساً یعنی «بله» و «خیر» یا «روشن» و «خاموش». همینه! اما اینجا جادویی می‌شه – ما مجبور نیستیم مثل ماتریکس با ۱ و ۰ حرف بزنیم. اینجا **زبان‌های برنامه‌نویسی** میان به کمکت. اون‌ها مثل بهترین مترجم دنیا هستن که افکار کاملاً عادی انسانی‌ات رو به زبان کامپیوتر ترجمه می‌کنن. -و این چیزی است که هر صبح وقتی بیدار می‌شوم هنوز مرا به هیجان می‌آورد: دقیقاً *همه چیز* دیجیتال در زندگی تو با کسی شروع شده که مثل تو بوده، احتمالا در حالتی راحت و با یک فنجان قهوه، کد روی لپ‌تاپش تایپ می‌کرده. آن فیلتر اینستاگرامی که تو را بی‌نقص نشان می‌دهد؟ کسی آن را کد زده. توصیه‌ای که تو را به آهنگ جدید مورد علاقه‌ات رساند؟ یک توسعه‌دهنده آن الگوریتم را ساخته. اپی که به تو کمک می‌کند صورت حساب شام را با دوستان تقسیم کنی؟ بله، کسی فکر کرده «این آزاردهنده است، مطمئنم می‌توانم این را درست کنم» و بعد... درستش کرد! +و این چیزی که هر صبح وقتی بیدار می‌شم هنوز غوغا می‌کنه: اساساً *همه* چیز دیجیتال توی زندگیت از کسی شروع شده که مثل تو بوده، احتمالاً توی لباس خواب با یه فنجون قهوه نشسته و داره کد می‌زنه. اون فیلتری که اینستاگرامتو بی‌نقص نشون می‌ده؟ کسی اون رو کد زده. الگوریتم پیشنهادی که تو رو به آهنگ موردعلاقه جدیدت رسوند؟ توسعه‌دهنده‌ای اون رو ساخته. برنامه‌ای که بهت کمک می‌کنه هزینه شام رو با دوستات تقسیم کنی؟ بله، کسی فکر کرده «این اذیته، حتماً می‌تونم درستش کنم» و بعد… درستش کرد! -وقتی برنامه‌نویسی یاد می‌گیری، فقط مهارت جدیدی کسب نمی‌کنی – بخشی از این جامعه شگفت‌انگیز حل مسئله می‌شوی که روزهایشان را صرف فکر کردن می‌کنند، «اگر چیزی می‌ساختم که روز کسی را کمی بهتر کند چی؟» راستش، چیزی بهتر از این هست؟ +وقتی برنامه‌نویسی یاد می‌گیری، فقط یک مهارت جدید یاد نمی‌گیری – وارد یه جامعه شگفت‌انگیز از حل‌کننده‌های مسئله می‌شی که روزهاشون رو با فکر کردن به «چی می‌شد اگر می‌تونستم چیزی بسازم که روز کسی رو کمی بهتر کنه» می‌گذرونن. راستش، چیزی باحال‌تر از این وجود داره؟ -✅ **شکار حقیقت جالب**: وقتی وقت آزاد داشتی این را جستجو کن – فکر می‌کنی اولین برنامه‌نویس دنیا کی بوده؟ یک اشاره می‌دهم: شاید کسی که انتظارش را داری نباشد! داستان پشت این شخص کاملاً جذاب است و نشان می‌دهد برنامه‌نویسی همیشه درباره حل خلاقانه مسائل و تفکر خارج از چارچوب بوده است. +✅ **شکار حقیقت سرگرم‌کننده**: وقتی فرصت داشتی یه چیز بسیار جالب سرچ کن – به نظرت اولین برنامه‌نویس جهان کی بوده؟ یه نکته بدم: شاید اون چیزی که فکر می‌کنی نباشه! داستان پشت این شخص کاملاً جذابه و نشون می‌ده برنامه‌نویسی همیشه درباره حل مسئله خلاقانه و فکر کردن خارج از چارچوب بوده. -### 🧠 **زمان بررسی: حالت چطوره؟** +### 🧠 **زمان چک کردن: حالت چطوره؟** -**کمی وقت بگذار و فکر کن:** -- آیا حالا ایده «دستور دادن به کامپیوترها» برایت منطقی است؟ -- می‌توانی یک کار روزانه را فکر کنی که دوست داری با برنامه‌نویسی خودکار کنی؟ -- چه سوال‌هایی در ذهنت درباره این دنیای برنامه‌نویسی جوش می‌زند؟ +**یه لحظه وقت بذار فکر کن:** +- آیا مفهوم «دادن دستورالعمل به کامپیوترها» الان برات منطقی شده؟ +- می‌تونی یه کار روزمره که دوست داری با برنامه‌نویسی خودکارش کنی رو به یاد بیاری؟ +- چه سوالاتی در ذهنت درباره این کل قضیه برنامه‌نویسی داره شکل می‌گیره؟ -> **یادت باشد**: طبیعی است اگر بعضی مفاهیم هنوز کمی مبهم باشد. یادگیری برنامه‌نویسی مثل یادگیری زبان جدید است – نیازمند زمان است که مغز آن مسیرهای عصبی را بسازد. تو عالی هستی! +> **یادت باشه**: کاملاً طبیعیه اگر بعضی مفاهیم الان برات مبهم باشن. یادگیری برنامه‌نویسی مثل یادگیری یه زبان جدیده – مغزت نیاز داره زمان ببره تا اون مسیرهای عصبی رو بسازه. تو خیلی خوب داری پیش می‌ری! -## زبان‌های برنامه‌نویسی مثل طعم‌های متفاوت جادو هستند +## زبان‌های برنامه‌نویسی مثل طعم‌های مختلف جادو هستن -خب، این شاید عجیب به نظر برسد، اما با من همراه باش – زبان‌های برنامه‌نویسی مثل انواع مختلف موسیقی هستند. فکر کن: جاز که نرم و بداهه است، راک که قدرتمند و راحت است، کلاسیک که شیک و ساختارمند است، و هیپ‌هاپ که خلاقانه و بیانگر است. هر سبک حال و هوای خودش را دارد، جامعه طرفداران پرشور خودش را دارد، و هر کدام برای حالات و موقعیت‌های مختلف عالی هستند. +باشه، ممکنه عجیب به نظر بیاد، ولی بیا با من باش – زبان‌های برنامه‌نویسی خیلی شبیه انواع موسیقی هستن. تصور کن: جاز که نرم و بداهه‌نوازی هست، راک که قدرتمند و ساده هست، کلاسیک که شیک و ساختارمند هست، و هیپ‌هاپ که خلاق و بیانگر هست. هر سبک حال و هوا، جامعه طرفداران پرشور خاص خودش رو داره، و هرکدوم برای حالات و موقعیت‌های مختلف عالی هستن. -زبان‌های برنامه‌نویسی هم دقیقاً همین‌طور کار می‌کنند! تو برای ساختن یک بازی موبایل سرگرم‌کننده همان زبان را به کار نمی‌بری که برای پردازش مقادیر عظیم داده‌های اقلیمی استفاده می‌کنی، درست همان‌طور که در کلاس یوگا متال دث گوش نمی‌دهی (البته اکثر کلاس‌های یوگا اینطورند! 😄). +زبان‌های برنامه‌نویسی هم دقیقاً همین طور کار می‌کنن! تو که از یک زبان برای ساخت یک بازی موبایل سرگرم‌کننده استفاده نمی‌کنی و از زبان دیگه برای پردازش حجم عظیمی از داده‌های آب و هوایی، مثل اینکه تو یه کلاس یوگا متال دث اجرا نکنی (خب، بیشتر کلاس‌های یوگا نه! 😄). -اما چیزی که هر بار مرا به شدت شگفت‌زده می‌کند: این زبان‌ها مثل داشتن صبورترین و باهوش‌ترین مترجم دنیا هستند که کنارت نشسته است. تو می‌توانی ایده‌هایت را طوری بیان کنی که برای مغز انسانی‌ات طبیعی باشد، و آنها تمام تبدیل‌های پیچیده را به ۱ و ۰ که کامپیوترها واقعاً می‌فهمند انجام می‌دهند. مثل داشتن دوستی که هم در «خلاقیت انسانی» و هم در «منطق کامپیوتر» کاملاً مسلط است – و هرگز خسته نمی‌شود، نیازی به استراحت‌های قهوه ندارد و هرگز تو را برای پرسیدن یک سوال دوباره قضاوت نمی‌کند! +ولی چیزی که هر بار بهش فکر می‌کنم واقعاً بهم انرژی می‌ده: این زبان‌ها مثل داشتن صبورترین و باهوش‌ترین مترجم دنیا کنار تو هستن. می‌تونی ایده‌هات رو به شکلی بیان کنی که برای مغز آدمی‌ات طبیعی باشه و اون‌ها همه اون کارهای پیچیده ترجمه به ۱ و ۰ که کامپیوترها می‌فهمن رو انجام می‌دن. مثل داشتن دوستی که هم در «خلاقیت انسانی» و هم «منطق کامپیوتری» کاملاً روانه – و هرگز خسته نمی‌شه، نیازی به استراحت قهوه‌ای نداره، و هیچوقت بابت پرسیدن سوال تکراری تو رو قضاوت نمی‌کنه! -### زبان‌های محبوب برنامه‌نویسی و کاربردهایشان +### زبان‌های برنامه‌نویسی محبوب و کاربردهای‌شون ```mermaid mindmap root((زبان‌های برنامه‌نویسی)) - توسعه وب + Web Development JavaScript - جادوی فرانت‌اند - وب‌سایت‌های تعاملی + Frontend Magic + Interactive Websites TypeScript - JavaScript + نوع‌ها - برنامه‌های سازمانی - داده و هوش مصنوعی + JavaScript + Types + Enterprise Apps + Data & AI Python - علوم داده - یادگیری ماشین - اتوماسیون + Data Science + Machine Learning + Automation R - آمار - پژوهش - برنامه‌های موبایل + Statistics + Research + Mobile Apps Java - اندروید - سازمانی + Android + Enterprise Swift iOS - اکوسیستم اپل + Apple Ecosystem Kotlin - اندروید مدرن - چندسکویی - سیستم‌ها و عملکرد + Modern Android + Cross-platform + Systems & Performance C++ - بازی‌ها - عملکرد بحرانی + Games + Performance Critical Rust - ایمنی حافظه - برنامه‌نویسی سیستم + Memory Safety + System Programming Go - خدمات ابری - بک‌اند مقیاس‌پذیر + Cloud Services + Scalable Backend ``` -| زبان | بهترین کاربرد | دلیل محبوبیت | -|----------|--------------|--------------------| -| **JavaScript** | توسعه وب، رابط‌های کاربری | اجرا در مرورگرها و قوت‌بخشی به وب‌سایت‌های تعاملی | -| **Python** | علم داده، اتوماسیون، هوش مصنوعی | خواندن و یادگیری آسان، کتابخانه‌های قدرتمند | -| **Java** | اپلیکیشن‌های شرکتی، اندروید | مستقل از پلتفرم، مناسب سیستم‌های بزرگ | -| **C#** | اپلیکیشن‌های ویندوز، توسعه بازی | پشتیبانی قوی از اکوسیستم مایکروسافت | -| **Go** | خدمات ابری، سیستم‌های back-end | سریع، ساده، طراحی شده برای محاسبات مدرن | +| زبان | بهترین کاربرد | چرا محبوبه | +|----------|----------|------------------| +| **JavaScript** | توسعه وب، رابط‌های کاربری | در مرورگرها اجرا می‌شه و سایت‌های تعاملی رو قوی می‌کنه | +| **Python** | علم داده، اتوماسیون، هوش مصنوعی | خواندن و یادگیری آسونه، کتابخونه‌های قدرتمند داره | +| **Java** | برنامه‌های سازمانی، اپ‌های اندروید | مستقل از پلتفرم، قوی برای سیستم‌های بزرگ | +| **C#** | برنامه‌های ویندوز، توسعه بازی | پشتیبانی قوی از اکوسیستم مایکروسافت | +| **Go** | خدمات ابری، سیستم‌های بک‌اند | سریع، ساده، طراحی‌شده برای محاسبات مدرن | ### زبان‌های سطح بالا در مقابل سطح پایین -خب، این واقعاً مفهومی بود که وقتی شروع به یادگیری کردم مغزم را به هم ریخت، پس آن قیاس را با تو به اشتراک می‌گذارم که کلید فهم من بود – و امیدوارم برای تو هم مفید باشد! +باشه، این واقعاً مفهومی بود که وقتی تازه شروع کرده بودم یادگیری، مغزم رو به هم ریخت، پس الان اون تشبیهی رو که بالاخره منو قانع کرد واست می‌گم – و امیدوارم بهت هم کمک کنه! -تصور کن به کشوری سفر کرده‌ای که زبان آن را بلد نیستی و به شدت دنبال سرویس بهداشتی نزدیک‌ترین هستی (همه این حالت را تجربه کرده‌ایم، درسته؟ 😅): +تصور کن داری به کشوری سفر می‌کنی که زبان‌ش رو بلد نیستی، و به شدت نیاز داری نزدیک‌ترین دستشویی رو پیدا کنی (همه ما اونجا بودیم، درست؟ 😅): -- **برنامه‌نویسی سطح پایین** مثل یادگیری کامل لهجه محلی است که بتوانی با مادربزرگ فروشنده میوه در گوشه خیابان با ارجاعات فرهنگی، زبان محلی و جک‌های داخلی که فقط کسی که آنجا بزرگ شده می‌فهمد گپ بزنی. خیلی تاثیرگذار و فوق‌العاده کارآمد است... اگر بتوانی روان صحبت کنی! اما وقتی فقط دنبال سرویس بهداشتی می‌گردی کمی طاقت‌فرسا است. +- **برنامه‌نویسی سطح پایین** مثل اینه که لهجه محلی رو اونقدر خوب یاد بگیری که بتونی با مادربزرگ فروشنده میوه کنار خیابون با ارجاعات فرهنگی، زبان محلی و شوخی‌های داخلی صحبت کنی که فقط کسی که اونجا بزرگ شده می‌فهمه. فوق‌العاده جالب و بسیار مؤثر... اگه اتفاقاً مسلط باشی! ولی وقتی فقط داری دنبال دستشویی می‌گردی، واقعاً دلهره‌آوره. -- **برنامه‌نویسی سطح بالا** مثل داشتن یک دوست محلی فوق‌العاده است که کاملاً تو را می‌فهمد. تو می‌توانی بگویی «من واقعاً باید یک دستشویی پیدا کنم» به زبان ساده، و او تمام ترجمه‌های فرهنگی را انجام می‌دهد و راهنمایی می‌کند طوری که برای مغز غیرمحلی تو کاملاً منطقی است. +- **برنامه‌نویسی سطح بالا** مثل داشتن اون دوست محلی شگفت‌انگیزه که دقیقاً حالتو می‌فهمه. می‌تونی به انگلیسی ساده بگی «من واقعاً نیاز دارم دستشویی پیدا کنم» و اون کل ترجمه فرهنگی رو انجام می‌ده و آدرس رو طوری بهت می‌ده که برای مغز غریبت کاملاً منطقی باشه. -از نظر برنامه‌نویسی: -- **زبان‌های سطح پایین** (مثل Assembly یا C) به تو اجازه می‌دهند مکالمات فوق‌العاده دقیق با سخت‌افزار واقعی کامپیوتر داشته باشی، ولی باید مثل یک ماشین فکر کنی، که... خوب، بگذار بگویم تغییر ذهنی بزرگی است! -- **زبان‌های سطح بالا** (مثل JavaScript، Python یا C#) به تو اجازه می‌دهند مانند یک انسان فکر کنی در حالی که آنها همه زبان ماشین را پشت صحنه اداره می‌کنند. ضمن اینکه دارای جوامع فوق‌العاده خوش‌آمدگو هستند پر از افرادی که یادشان می‌آید چطور بود تازه‌کار بودن و واقعاً می‌خواهند کمک کنند! +از دید برنامه‌نویسی: +- **زبان‌های سطح پایین** (مثل اسمبلی یا C) این امکان رو می‌دن که با سخت‌افزار واقعی کامپیوتر گفتگوی فوق‌العاده دقیقی داشته باشی، ولی باید مثل یک ماشین فکر کنی، که... خب، بزار بگم یک تغییر ذهنی بزرگه! +- **زبان‌های سطح بالا** (مثل JavaScript، Python، یا C#) اجازه می‌دن مثل یه انسان فکر کنی در حالی که اون‌ها پشت پرده همه زبان ماشین رو مدیریت می‌کنن. بعلاوه، این زبان‌ها جوامع فوق‌العاده مهربانی دارن پر از آدم‌هایی که یادشون هست تازه بودن چطوری بوده و واقعاً می‌خوان کمک کنن! -حدس بزن می‌خواهم با کدام‌ها شروع کنی؟ 😉 زبان‌های سطح بالا مثل چرخ‌های کمکی هستند که هیچوقت دوست نداری از آنها جدا شوی چون کل تجربه را خیلی لذت‌بخش‌تر می‌کنند! +حدس بزن با کدوم‌ها شروع به یادگیری می‌کنی؟ 😉 زبان‌های سطح بالا مثل چرخ‌های کمکی هستن که هیچ وقت نمی‌خوای ازشون بزنی پایین چون کل تجربه رو خیلی لذت‌بخش‌تر می‌کنن! ```mermaid flowchart TB A["👤 فکر انسان:
'می‌خواهم اعداد فیبوناچی را محاسبه کنم'"] --> B{انتخاب سطح زبان} - B -->|High-Level| C["🌟 JavaScript/Python
خواندن و نوشتن آسان"] - B -->|Low-Level| D["⚙️ Assembly/C
کنترل مستقیم سخت‌افزار"] + B -->|سطح بالا| C["🌟 جاوااسکریپت/پایتون
خواندن و نوشتن آسان"] + B -->|سطح پایین| D["⚙️ اسمبلی/C
کنترل مستقیم سخت‌افزار"] C --> E["📝 نوشتن: fibonacci(10)"] D --> F["📝 نوشتن: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 درک کامپیوتر:
مترجم پیچیدگی‌ها را هندل می‌کند"] + E --> G["🤖 درک کامپیوتر:
مترجم پیچیدگی‌ها را مدیریت می‌کند"] F --> G - G --> H["💻 نتیجه مشابه:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 نتیجه یکسان:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### بگذار نشان دهم چرا زبان‌های سطح بالا دوستانه‌تر هستند +### بذار نشونت بدم چرا زبان‌های سطح بالا اینقدر دوست‌داشتنی هستن -خب، می‌خواهم چیزی به تو نشان دهم که چرا عاشق زبان‌های سطح بالا شدم، اما اول – باید قول بدهی. وقتی اولین نمونه کد را می‌بینی، نترس! قرار است کمی ترسناک به نظر برسد. این دقیقاً نکته‌ای است که می‌خواهم بگویم! +باشه، می‌خوام چیزی بهت نشون بدم که کاملاً نشون می‌ده چرا عاشق زبان‌های سطح بالا شدم، اما اول – باید قول بدی. وقتی اولین نمونه کد رو دیدی، نترس! طراحی شده که کمی ترسناک به نظر بیاد. این دقیقاً همون نکته‌ایه که می‌خوام برسونم! -ما به همان کار دقیق نگاه می‌کنیم که به دو سبک کاملاً متفاوت نوشته شده. هر دو دنباله فیبوناچی را می‌سازند – این یک الگوی ریاضی زیبا است که هر عدد مجموع دو عدد قبلی است: ۰، ۱، ۱، ۲، ۳، ۵، ۸، ۱۳... (نکته جالب: این الگو را تقریباً در همه چیز طبیعت پیدا می‌کنی – مارپیچ دانه‌های آفتابگردان، الگوی کاج‌میوه‌ها، حتی شکل‌گیری کهکشان‌ها!) +قراره به یه وظیفه یکسان نوشته‌شده در دو سبک کاملاً متفاوت نگاه کنیم. هر دو یه چیزی به اسم دنباله فیبوناچی ایجاد می‌کنن – یه الگوی ریاضی زیبا که هر عدد مجموع دو عدد قبلیشه: ۰، ۱، ۱، ۲، ۳، ۵، ۸، ۱۳... (نکته جالب: این الگو رو در طبیعت دقیقاً همه جا پیدا می‌کنی – مارپیچ دانه‌های آفتابگردان، الگوهای مخروط‌های کاج، حتی شکل‌گیری کهکشان‌ها!) -آماده‌ای تفاوت را ببینی؟ بزن بریم! +آماده‌ای فرق رو ببینی؟ بریم! -**زبان سطح بالا (JavaScript) – انسان‌دوست:** +**زبان سطح بالا (JavaScript) – دوست‌داشتنی برای انسان:** ```javascript -// مرحله ۱: تنظیمات اولیه فیبوناچی +// مرحله ۱: راه‌اندازی اولیه فیبوناچی const fibonacciCount = 10; let current = 0; let next = 1; @@ -182,14 +182,14 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**این کد چه کار می‌کند:** -- **تعریف** یک ثابت برای مشخص کردن تعداد اعداد فیبوناچی که می‌خواهیم تولید کنیم -- **مقدارسازی اولیه** دو متغیر برای دنبال کردن عدد فعلی و عدد بعدی در دنباله -- **تنظیم** مقادیر شروع (۰ و ۱) که الگوی فیبوناچی را تعریف می‌کنند -- **نمایش** پیام سرصفحه برای شناسایی خروجی ما +**این کد چیکار می‌کنه:** +- **اعلان** یه عدد ثابت برای تعیین تعداد اعداد فیبوناچی که می‌خوایم تولید کنیم +- **مقداردهی اولیه** دو متغیر برای نگه داشتن عدد فعلی و بعدی در دنباله +- **تنظیم** مقادیر شروع (۰ و ۱) که الگوی فیبوناچی رو تعریف می‌کنن +- **نمایش** یک پیغام سرصفحه برای شناسایی خروجی ```javascript -// مرحله ۲: تولید دنباله با استفاده از یک حلقه +// مرحله ۲: تولید دنباله با یک حلقه for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -200,14 +200,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**شرح کاری که اینجا انجام می‌شود:** -- **حلقه** زدن در هر موقعیت از دنباله با استفاده از حلقه `for` -- **نمایش** هر عدد با موقعیت آن به کمک قالب‌بندی template literal -- **محاسبه** عدد فیبوناچی بعدی با جمع مقادیر جاری و بعدی -- **بروزرسانی** متغیرهای پیگیری برای حرکت به تکرار بعدی +**شرح عملکرد این بخش:** +- **حلقه** زدن از طریق هر جایگاه در دنباله با استفاده از حلقه `for` +- **نمایش** هر عدد با جایگاهش با استفاده از قالب‌بندی رشته قالبی +- **محاسبه** عدد فیبوناچی بعدی با جمع کردن مقادیر فعلی و بعدی +- **به‌روزرسانی** متغیرهای دنبال‌کننده تا به تکرار بعدی بریم ```javascript -// مرحله ۳: رویکرد تابعی مدرن +// گام ۳: رویکرد کاربردی مدرن const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -223,13 +223,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**در بالا، ما:** -- **ساختیم** یک تابع قابل استفاده مجدد با نحو تابع پیکانی مدرن -- **ساختیم** آرایه‌ای برای ذخیره کل دنباله به جای نمایش تک‌تک اعداد -- **استفاده کردیم** از اندیس آرایه برای محاسبه هر عدد جدید از اعداد قبلی -- **بازگرداندیم** کل دنباله برای استفاده انعطاف‌پذیر در قسمت‌های دیگر برنامه +**در کد بالا ما:** +- **ایجاد** تابعی قابل استفاده مجدد با استفاده از نحو مدرن تابع پیکانی +- **ساخت** آرایه‌ای برای ذخیره دنباله کامل به جای نمایش تک‌تک اعداد +- **استفاده** از اندیس‌گذاری آرایه برای محاسبه هر عدد جدید از مقادیر قبلی +- **بازگرداندن** دنباله کامل برای استفاده انعطاف‌پذیر در بخش‌های دیگه برنامه -**زبان سطح پایین (ARM Assembly) – کامپیوتر-دوست:** +**زبان سطح پایین (ARM Assembly) – دوست‌داشتنی برای کامپیوتر:** ```assembly area ascen,code,readonly @@ -256,59 +256,59 @@ back add r0,r1 end ``` -توجه کن که نسخه JavaScript تقریباً مثل دستورالعمل‌های انگلیسی خوانده می‌شود، در حالی که نسخه Assembly از دستورهای رمزی استفاده می‌کند که مستقیماً پردازنده کامپیوتر را کنترل می‌کنند. هر دو همان کار را انجام می‌دهند، اما زبان سطح بالا برای انسان‌ها بسیار آسان‌تر برای فهمیدن، نوشتن و نگهداری است. +توجه کن چطور نسخه JavaScript تقریباً مثل دستورالعمل‌های انگلیسی می‌خونه، در حالی که نسخه اسمبلی از دستورات رمزآلودی استفاده می‌کنه که مستقیماً کنترل پردازنده کامپیوتر رو در دست دارن. هر دو دقیقاً همون کار رو انجام می‌دن، ولی زبان سطح بالا برای انسان‌ها بسیار راحت‌تر برای فهمیدن، نوشتن و نگهداریه. -**تفاوت‌های اصلی که متوجه خواهی شد:** -- **خوانایی**: JavaScript از نام‌های توصیفی مثل `fibonacciCount` استفاده می‌کند در حالی که Assembly از برچسب‌های رمزی مثل `r0`، `r1` بهره می‌برد -- **نظرات**: زبان‌های سطح بالا تشویق به افزودن نظرات توضیحی می‌کنند که کد را خودمستندسازی می‌کنند -- **ساختار**: جریان منطقی جاوااسکریپت با طرز تفکر انسان‌ها درباره مشکلات به صورت گام به گام مطابقت دارد -- **نگهداری**: به‌روزرسانی نسخه جاوااسکریپت برای نیازهای مختلف بسیار ساده و واضح است +**تفاوت‌های کلیدی که متوجه می‌شی:** +- **خوانایی**: جاوااسکریپت از نام‌های توصیفی مانند `fibonacciCount` استفاده می‌کند در حالی که اسمبلی از برچسب‌های رمزگونه‌ای مانند `r0`، `r1` استفاده می‌کند +- **توضیحات**: زبان‌های سطح بالا تشویق به نوشتن توضیحات توضیحی می‌کنند که کد را خودمستندسازی می‌کند +- **ساختار**: جریان منطقی در جاوااسکریپت با روشی که انسان‌ها در مورد مسائل گام به گام فکر می‌کنند مطابقت دارد +- **نگه‌داری**: به‌روزرسانی نسخه جاوااسکریپت برای نیازهای مختلف ساده و واضح است -✅ **درباره دنباله فیبوناچی**: این الگوی عددی فوق‌العاده زیبا (که هر عدد برابر با جمع دو عدد قبلی‌اش است: ۰، ۱، ۱، ۲، ۳، ۵، ۸...) واقعاً در *همه جا* در طبیعت دیده می‌شود! آن را در حلزون خورشیدی، الگوهای کاج، نحوه خم شدن پوسته‌های ناوتیلس و حتی در رشد شاخه‌های درخت خواهید یافت. خیلی حیرت‌آور است که چگونه ریاضی و کد به ما کمک می‌کنند تا الگوهایی را که طبیعت برای خلق زیبایی استفاده می‌کند، درک و بازتولید کنیم! +✅ **درباره دنباله فیبوناچی**: این الگوی عددی فوق‌العاده زیبا (جایی که هر عدد برابر مجموع دو عدد قبلی آن است: 0، 1، 1، 2، 3، 5، 8...) تقریباً *در همه جا* در طبیعت دیده می‌شود! شما آن را در مارپیچ‌های آفتابگردان، الگوهای کاج، نحوه خم شدن صدف ناتیلوس و حتی در رشد شاخه‌های درخت خواهید یافت. فوق‌العاده است که ریاضیات و کد چگونه به ما کمک می‌کنند تا الگوهایی را که طبیعت برای خلق زیبایی استفاده می‌کند، بفهمیم و بازسازی کنیم! -## قطعات سازنده‌ای که جادو را رقم می‌زنند +## بلوک‌های سازنده‌ای که جادو را رقم می‌زنند -خوب، حالا که دیدید زبان‌های برنامه‌نویسی در عمل چه شکلی هستند، اجازه دهید اجزای بنیادی که اساساً هر برنامه‌ای را ساخته‌اند، بشکنیم. این‌ها را مانند مواد ضروری در دستور غذایی مورد علاقه‌تان در نظر بگیرید – وقتی فهمیدید هر کدام چه کاری انجام می‌دهند، می‌توانید تقریباً هر زبان برنامه‌نویسی را بخوانید و بنویسید! +خوب، حالا که دیدید زبان‌های برنامه‌نویسی چگونه کار می‌کنند، بیایید به پایه‌های اساسی که عملاً هر برنامه‌ای را تشکیل می‌دهند، نگاهی بیندازیم. این‌ها را مثل مواد اصلی دستور غذایی مورد علاقه‌تان در نظر بگیرید – وقتی بفهمید هرکدام چه کاری انجام می‌دهند، خواهید توانست کد را در تقریباً هر زبانی بخوانید و بنویسید! -این کمی شبیه یادگیری دستور زبان برنامه‌نویسی است. به یاد دارید زمانی که در مدرسه درباره اسم، فعل و نحوه ساخت جمله یاد می‌گرفتید؟ برنامه‌نویسی هم نسخه‌ای از دستور زبان خودش را دارد و واقعاً خیلی منطقی‌تر و معقول‌تر از دستور زبان انگلیسی است! 😄 +این کمی شبیه یادگیری دستور زبان برنامه‌نویسی است. یادتان می‌آید وقتی در مدرسه درباره اسم‌ها، فعل‌ها و ساختن جملات یاد گرفتید؟ برنامه‌نویسی هم دستور زبان خودش را دارد و صادقانه بگویم، خیلی منطقی‌تر و بخشنده‌تر از دستور زبان انگلیسی است! 😄 -### عبارت‌ها: دستورالعمل‌های گام به گام +### عبارات: دستورالعمل‌های گام به گام -بیایید با **عبارت‌ها** شروع کنیم – این‌ها مانند جملات جداگانه در گفتگو با کامپیوترتان هستند. هر عبارت به کامپیوتر می‌گوید یک کار مشخص را انجام دهد، مثل دادن دستور: «اینجا بپیچ به چپ»، «سر چراغ قرمز توقف کن»، «اینجا پارک کن». +بیایید با **عبارات** شروع کنیم – این‌ها مثل جملات جداگانه در یک گفتگو با کامپیوتر شما هستند. هر عبارت به کامپیوتر می‌گوید یک کار مشخص انجام دهد، مثل دادن جهت‌ها: «چرخ به چپ همینجا»، «توقف در چراغ قرمز»، «پارک در آن جایگاه». -چیزی که من در مورد عبارت‌ها دوست دارم، قابل‌خواندن بودن معمولاً آن‌هاست. این را ببینید: +چیزی که در مورد عبارات دوست دارم این است که معمولاً تا چه حد قابل خواندن‌اند. این را ببینید: ```javascript -// عبارات پایه‌ای که یک عمل را انجام می‌دهند +// دستورات پایه‌ای که یک عمل را انجام می‌دهند const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **این کد چه کاری انجام می‌دهد:** -- **اعلان** یک متغیر ثابت برای ذخیره نام کاربر -- **نمایش** پیغام سلام در خروجی کنسول +- **اعلام** یک متغیر ثابت برای ذخیره نام کاربر +- **نمایش** پیام خوش‌آمدگویی در کنسول - **محاسبه** و ذخیره نتیجه یک عملیات ریاضی ```javascript -// دستوراتی که با صفحات وب تعامل دارند +// دستورات که با صفحات وب تعامل دارند document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**گام به گام، این اتفاقات می‌افتد:** -- **تغییر** عنوان صفحه وب که در تب مرورگر نمایش داده می‌شود +**گام به گام، اتفاقات اینجا:** +- **تغییر** عنوان صفحه وب که در تب مرورگر نشان داده می‌شود - **تغییر** رنگ پس‌زمینه کل بدنه صفحه -### متغیرها: حافظه برنامه شما +### متغیرها: سیستم حافظه برنامه شما -خوب، **متغیرها** واقعاً یکی از مفاهیم مورد علاقه من برای آموزش هستند چون خیلی شبیه چیزهایی هستند که شما هر روز استفاده می‌کنید! +خوب، **متغیرها** یکی از مفاهیمی هستند که واقعاً دوست دارم آموزش دهم چون خیلی شبیه چیزهایی هستند که هر روز استفاده می‌کنید! -برای یک لحظه به دفترچه تلفن گوشی خود فکر کنید. شماره همه را حفظ نمی‌کنید – بلکه «مامان»، «بهترین دوست» یا «پیتزافروشی که تا ساعت ۲ صبح سفارش تحویل می‌دهد» را ذخیره می‌کنید و می‌گذارید گوشی‌تان شماره‌ها را به خاطر بسپارد. متغیرها دقیقاً همینطور عمل می‌کنند! آن‌ها مانند ظروف برچسب‌خورده‌ای هستند که برنامه شما می‌تواند اطلاعات را ذخیره کند و بعداً با استفاده از نامی که واقعاً معنی‌دار است، بازیابی کند. +یک لحظه به دفترچه تلفن موبایل‌تان فکر کنید. شما شماره هر کسی را حفظ نمی‌کنید – بلکه «مادر»، «دوست صمیمی» یا «فست‌فودی که تا ساعت ۲ صبح پیک دارد» را ذخیره می‌کنید و گوشی شما شماره‌ها را به خاطر می‌سپارد. متغیرها دقیقاً همین‌طور کار می‌کنند! آن‌ها مثل ظروف برچسب‌دار هستند که برنامه شما می‌تواند اطلاعات را ذخیره کند و بعد با نامی که معنا دارد دوباره از آن‌ها استفاده کند. -چیزی که واقعاً جالب است: متغیرها می‌توانند در حین اجرای برنامه تغییر کنند (از همین رو نام‌شان «متغیر» است – متوجه شدید؟). درست مثل زمانی که ممکن است آن تماس پیتزا را وقتی مکان بهتری پیدا می‌کنید به‌روزرسانی کنید، متغیرها می‌توانند هنگامی که برنامه شما اطلاعات جدید یاد می‌گیرد یا شرایط تغییر می‌کنند، به‌روزرسانی شوند! +چیزی که خیلی جالب است این است که متغیرها می‌توانند در حین اجرای برنامه تغییر کنند (از همین رو اسمشان «متغیر» است – متوجه بازی کلمه شدند؟). درست مثل اینکه ممکن است وقتی یک فست‌فودی بهتر پیدا کردید، مخاطب آن را به‌روزرسانی کنید، متغیرها هم زمانی که برنامه شما اطلاعات جدید یاد می‌گیرد یا شرایط تغییر می‌کند، به‌روزرسانی می‌شوند! -اجازه دهید نشان دهم چقدر ساده و زیبا می‌تواند باشد: +اجازه دهید نشان دهم چقدر این می‌تواند ساده و زیبا باشد: ```javascript // مرحله ۱: ایجاد متغیرهای پایه @@ -320,12 +320,12 @@ let isRaining = false; **درک این مفاهیم:** - **ذخیره** مقادیر ثابت در متغیرهای `const` (مثل نام سایت) -- **استفاده** از `let` برای مقادیری که ممکن است در طول برنامه تغییر کنند -- **اختصاص** انواع داده مختلف: رشته (متن)، عدد، و بولی (درست/نادرست) -- **انتخاب** نام‌های توصیفی که توضیح دهند هر متغیر چه چیزی را در خود دارد +- **استفاده** از `let` برای مقادیری که در طول برنامه تغییر می‌کنند +- **اختصاص** انواع داده مختلف: رشته‌ها (متن)، عددها و بولین‌ها (true/false) +- **انتخاب** نام‌های توصیفی که توضیح می‌دهند هر متغیر چه چیزی را نگه می‌دارد ```javascript -// مرحله ۲: کار با اشیاء برای گروه‌بندی داده‌های مرتبط +// گام ۲: کار با اشیاء برای گروه‌بندی داده‌های مرتبط const weatherData = { location: "San Francisco", humidity: 65, @@ -333,10 +333,10 @@ const weatherData = { }; ``` -**در بالا، ما:** -- **ایجاد** یک شیء برای گروه‌بندی اطلاعات مربوط به آب‌وهوا -- **سازماندهی** چندین داده تحت یک نام متغیر -- **استفاده** از جفت‌های کلید-مقدار برای برچسب‌گذاری واضح هر قطعه اطلاعات +**در بالا ما:** +- **ساختیم** یک شیء برای گروه‌بندی اطلاعات مرتبط هواشناسی +- **سازمان‌دهی** چندین داده زیر یک نام متغیر +- **استفاده** از جفت کلید-مقدار برای برچسب زدن واضح به هر داده ```javascript // مرحله ۳: استفاده و به‌روزرسانی متغیرها @@ -348,11 +348,11 @@ currentWeather = "cloudy"; temperature = 68; ``` -**بگذارید هر بخش را بفهمیم:** -- **نمایش** اطلاعات با استفاده از قالب‌های رشته‌ای با سینتکس `${}` -- **دسترسی** به ویژگی‌های شیء با استفاده از نقطه‌گذاری (`weatherData.windSpeed`) -- **به‌روزرسانی** متغیرهای اعلان شده با `let` برای انعکاس شرایط متغیر -- **ترکیب** چند متغیر برای ایجاد پیام‌های معنی‌دار +**بیایید هر بخش را بفهمیم:** +- **نمایش** اطلاعات با استفاده از قالب رشته‌ها و نحو `${}` +- **دسترسی** به خصوصیات شیء با استفاده از نقطه‌گذاری (`weatherData.windSpeed`) +- **بروزرسانی** متغیرهای تعریف‌شده با `let` برای بازتاب شرایط در حال تغییر +- **ترکیب** چند متغیر برای ساخت پیام‌های معنادار ```javascript // مرحله ۴: ساختار شکنی مدرن برای کدی تمیزتر @@ -361,22 +361,22 @@ console.log(`${location} humidity: ${humidity}%`); ``` **چیزی که باید بدانید:** -- **استخراج** ویژگی‌های خاص از اشیاء با استفاده از تخصیص تخریبی -- **ایجاد** متغیرهای جدید به طور خودکار با همان نام‌های کلیدهای شیء -- **ساده‌سازی** کد با جلوگیری از نقطه‌گذاری مکرر +- **استخراج** خصوصیات خاص از شیءها با استفاده از انتساب تخریب‌کننده (destructuring) +- **ساخت** متغیرهای جدید به طور خودکار با همان نام‌های کلیدهای شیء +- **ساده‌سازی** کد با اجتناب از چند بار نوشتن نقطه‌گذاری -### جریان کنترل: آموزش برنامه‌تان برای فکر کردن +### جریان کنترل: آموزش تفکر به برنامه شما -خوب، این جایی است که برنامه‌نویسی واقعاً هیجان‌انگیز می‌شود! **جریان کنترل** اساساً آموزش برنامه به نحوی است که تصمیمات هوشمندانه بگیرد، دقیقاً مثل شما که هر روز بدون فکر کردن این کار را انجام می‌دهید. +خوب، اینجاست که برنامه‌نویسی واقعاً ذهن را منفجر می‌کند! **جریان کنترل** اساساً آموزش به برنامه شماست که چگونه تصمیمات هوشمندانه بگیرد، دقیقاً مثل کاری که شما هر روز بدون فکر کردن انجام می‌دهید. -تصور کنید: امروز صبح احتمالاً مانند این بوده که «اگر باران بیاید، چتر بردارم. اگر هوا سرد بود، کت بپوشم. اگر دیرم شده بود، صبحانه را حذف کنم و سر راه قهوه بخرم.» مغز شما به طور طبیعی این منطق اگر-آنگاه را ده‌ها بار در روز دنبال می‌کند! +تصور کنید: امروز صبح احتمالاً چیزی شبیه این را داشتید «اگر باران می‌آید، چتر برمی‌دارم. اگر سرد است، کاپشن می‌پوشم. اگر دیر کردم، صبحانه را رد می‌کنم و در راه قهوه می‌گیرم.» مغز شما به طور ذاتی این منطق شرطی if-then را ده‌ها بار در روز دنبال می‌کند! -این چیزی است که برنامه‌ها را هوشمند و زنده می‌کند، نه فقط دنبال کردن یک اسکریپت خسته‌کننده و قابل پیش‌بینی. آن‌ها واقعاً می‌توانند به یک وضعیت نگاه کنند، ارزیابی کنند چه اتفاقی می‌افتد و پاسخ مناسب بدهند. مثل این است که برنامه شما را یک مغز ببخشید که می‌تواند سازگار باشد و انتخاب کند! +این همان چیزی است که باعث می‌شود برنامه‌ها هوشمند و زنده به نظر برسند بجای اینکه صرفاً یک اسکریپت کسل‌کننده و قابل پیش‌بینی را دنبال کنند. آن‌ها به واقع می‌توانند وضعیت را نگاه کنند، ارزیابی کنند چه اتفاقی می‌افتد و پاسخ مناسب بدهند. این مثل دادن یک مغز به برنامه شماست که می‌تواند سازگار شود و تصمیم بگیرد! -می‌خواهید ببینید چقدر زیبا این کار می‌کند؟ اجازه دهید نشان دهم: +می‌خواهید ببینید چقدر زیبا کار می‌کند؟ اجازه دهید نشان دهم: ```javascript -// گام ۱: منطق شرطی پایه +// مرحله ۱: منطق شرطی پایه const userAge = 17; if (userAge >= 18) { @@ -387,14 +387,14 @@ if (userAge >= 18) { } ``` -**این کد چه کاری می‌کند:** -- **بررسی** اینکه آیا سن کاربر شرایط رای دادن را دارد +**این کد چه کاری انجام می‌دهد:** +- **بررسی** اینکه آیا سن کاربر شرایط رأی دادن را دارد - **اجرای** بلوک‌های کد مختلف بر اساس نتیجه شرط -- **محاسبه** و نمایش مدت زمان تا رسیدن به شرایط رای‌دهی اگر زیر ۱۸ سال باشد -- **ارائه** بازخوردهای خاص و مفید برای هر حالت +- **محاسبه** و نمایش زمان تا رسیدن به شرایط رأی دادن اگر کمتر از ۱۸ سال باشد +- **دادن** بازخورد خاص و مفید برای هر موقعیت ```javascript -// گام ۲: چندین شرط با عملگرهای منطقی +// مرحله ۲: چندین شرایط با عملگرهای منطقی const userAge = 17; const hasPermission = true; @@ -407,25 +407,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**شرح اینکه اینجا چه اتفاقی می‌افتد:** -- **ترکیب** چندین شرط با استفاده از عملگر `&&` (و) -- **ایجاد** سلسله مراتبی از شروط با استفاده از `else if` برای چندین حالت -- **پرداختن** به تمام شرایط ممکن با یک عبارت نهایی `else` -- **دادن** بازخورد واضح و قابل اجرا برای هر وضعیت متفاوت +**تجزیه و تحلیل اتفاقات اینجا:** +- **ترکیب** چند شرط با استفاده از عملگر `&&` (و) +- **ساختن** سلسله مراتب شرایط با `else if` برای سناریوهای متعدد +- **رسیدگی** به همه حالات ممکن با دستور نهایی `else` +- **دادن** بازخورد واضح و قابل عمل برای هر وضعیت متفاوت ```javascript -// مرحله ۳: شرط مختصر با عملگر سه‌تایی +// مرحله ۳: شرط کوتاه با عملگر شرطی const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **چیزی که باید به یاد داشته باشید:** -- **استفاده** از عملگر شرطی (`? :`) برای شرایط ساده دو گزینه‌ای -- **نوشتن** شرط اول، سپس `?`، سپس نتیجه درست، سپس `:`, سپس نتیجه نادرست -- **استفاده** از این الگو وقتی که نیاز دارید مقدار بر اساس شرط اختصاص دهید +- **استفاده** از عملگر شرطی سه‌تایی (`? :`) برای شرایط ساده با دو گزینه +- **نوشتن** شرط اول، سپس `?`، بعد نتیجه درست، بعد `:`، و سپس نتیجه نادرست +- **اجرای** این الگو وقتی می‌خواهید بر اساس شرایط مقادیر را اختصاص دهید ```javascript -// مرحله ۴: مدیریت چندین مورد خاص مختلف +// مرحله ۴: مدیریت چندین مورد خاص const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -445,55 +445,55 @@ switch (dayOfWeek) { } ``` -**این کد چه کاری انجام می‌دهد:** -- **مقایسه** مقدار متغیر با چندین حالت خاص -- **گروه‌بندی** حالات مشابه با هم (روزهای هفته در مقابل تعطیلات آخر هفته) -- **اجرای** بلوک کد مناسب وقتی تطابق پیدا کند -- **شامل** یک حالت `default` برای پرداختن به مقادیر غیرمنتظره -- **استفاده** از عبارات `break` برای جلوگیری از ادامه کد به حالت بعدی +**این کد کارهای زیر را انجام می‌دهد:** +- **مقایسه** مقدار متغیر با چند حالت خاص +- **گروه‌بندی** حالات مشابه (روزهای هفته در مقابل تعطیلات آخر هفته) +- **اجرای** بلوک کد مناسب وقتی که تطابق پیدا شود +- **شامل** حالت `default` برای رسیدگی به مقادیر غیرمنتظره +- **استفاده** از دستورات `break` برای جلوگیری از ادامه کد به حالت بعدی -> 💡 **تشبیه دنیای واقعی**: جریان کنترل را مانند صبوری‌ترین GPS دنیا در نظر بگیرید که مسیرها را به شما نشان می‌دهد. ممکن است بگوید «اگر ترافیک در خیابان اصلی است، به جای آن بزرگراه را برو. اگر ساخت‌وساز بزرگراه را مسدود کرده، مسیر دیدنی را امتحان کن.» برنامه‌ها دقیقاً همین نوع منطق شرطی را برای پاسخ هوشمندانه به شرایط مختلف استفاده می‌کنند و همیشه بهترین تجربه را برای کاربران فراهم می‌آورند. +> 💡 **تشبیه دنیای واقعی**: جریان کنترل مثل داشتن صبورترین GPS جهان است که به شما مسیر می‌دهد. می‌گوید «اگر ترافیک در خیابان اصلی است، بزرگراه را برو. اگر ساخت‌وساز بزرگراه را مسدود کرده، مسیر مناظر را امتحان کن.» برنامه‌ها دقیقاً همین منطق شرطی را برای پاسخ هوشمندانه به موقعیت‌های مختلف به کار می‌برند و همیشه بهترین تجربه را برای کاربران فراهم می‌کنند. -### 🎯 **بررسی مفهوم: تسلط بر قطعات سازنده** +### 🎯 **چک مفهومی: تسلط بر بلوک‌های سازنده** -**بیایید ببینیم با اصول چطورید:** -- می‌توانید تفاوت بین متغیر و عبارت را با کلمات خودتان توضیح دهید؟ -- یک مثال واقعی از وضعیتی که از تصمیم اگر-آنگاه استفاده می‌کنید (مثل مثال رای دادن ما) فکر کنید -- یک نکته در منطق برنامه‌نویسی که شما را شگفت‌زده کرد چیست؟ +**ببینیم چقدر با پایه‌ها خوب هستید:** +- می‌توانید تفاوت بین متغیر و عبارت را به زبان خودتان توضیح دهید؟ +- یک سناریوی واقعی را تصور کنید که در آن از تصمیم if-then استفاده می‌کنید (مثل مثال رأی دادن ما) +- کدام بخش از منطق برنامه‌نویسی برایتان شگفت‌آور بود؟ -**تقویت سریع اعتماد به نفس:** +**افزایش اعتماد به نفس سریع:** ```mermaid flowchart LR - A["📝 دستورات
(فرمان‌ها)"] --> B["📦 متغیرها
(ذخیره‌سازی)"] --> C["🔀 جریان کنترل
(تصمیم‌گیری‌ها)"] --> D["🎉 برنامه‌ی در حال اجرا!"] + A["📝 دستورات
(دستورات)"] --> B["📦 متغیرها
(ذخیره‌سازی)"] --> C["🔀 جریان کنترل
(تصمیم‌ها)"] --> D["🎉 برنامه‌ی فعال!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **آنچه در ادامه می‌آید**: قرار است خیلی خوش بگذرانیم و عمیق‌تر به این مفاهیم بپردازیم در حالی که این سفر شگفت‌انگیز را با هم ادامه می‌دهیم! الان فقط روی حس هیجان نسبت به همه امکانات فوق‌العاده پیش‌رو تمرکز کنید. مهارت‌ها و تکنیک‌های خاص به طور طبیعی با تمرین کردن کنار هم شکل می‌گیرند – قول می‌دهم این خیلی بیشتر از آن چیزی باشد که انتظار دارید سرگرم‌کننده باشد! +✅ **چه چیزی در انتظار شماست**: ما قرار است یک سفر فوق‌العاده را ادامه دهیم و عمیق‌تر با این مفاهیم آشنا شویم! همین الان تمرکز کنید روی هیجانی که بابت تمام امکانات شگفت‌انگیز پیش رو دارید. مهارت‌ها و تکنیک‌های خاص به طور طبیعی وقتی با هم تمرین می‌کنیم شکل خواهند گرفت – قول می‌دهم این خیلی جذاب‌تر از آن چیزی باشد که فکرش را می‌کنید! -## ابزارهای حرفه‌ای +## ابزارهای کار -خوب، صادقانه بگویم این بخش جایی است که آنقدر هیجان‌زده می‌شوم که نمی‌توانم خودم را کنترل کنم! 🚀 قرار است درباره ابزارهای خارق‌العاده‌ای صحبت کنیم که باعث می‌شوند احساس کنید کلیدهای یک سفینه فضایی دیجیتال به دستتان رسیده است. +خوب، واقعاً اینجاست که آن‌قدر هیجان‌زده می‌شوم که نمی‌توانم خودم را کنترل کنم! 🚀 داریم درباره ابزارهای فوق‌العاده‌ای صحبت می‌کنیم که باعث می‌شوند احساس کنید همین الان کلیدهای یک سفینه فضایی دیجیتال به دستتان آمده است. -می‌دانید که چگونه سرآشپزها چاقوهایی دارند که کاملاً متعادل است و مثل بخشی از دست‌شان می‌ماند؟ یا چگونه یک نوازنده گیتاری دارد که انگار همین که به آن دست می‌زند، شروع به خواندن می‌کند؟ خب، توسعه‌دهندگان هم نسخه خودشان از این ابزارهای جادویی را دارند، و این چیزی است که قطعاً ذهن شما را خواهد برد – اکثر آن‌ها کاملاً رایگان هستند! +می‌دانید آشپز چطور چاقوهای متعادل دقیقاً متناسب با دستش دارد؟ یا نوازنده‌ای که گیتاری دارد که انگار از همان لحظه لمس، شروع به آواز خواندن می‌کند؟ خب، توسعه‌دهندگان نسخه خودشان از این ابزارهای جادویی را دارند، و این چیزی است که واقعاً ذهنتان را منفجر خواهد کرد – بیشتر آن‌ها کاملاً رایگان هستند! -در حال حاضر دارم روی صندلی‌ام بالا و پایین می‌پرم که این‌ها را با شما به اشتراک بگذارم چون کاملاً نحوه ساخت نرم‌افزار را متحول کرده‌اند. داریم درباره دستیارهای کدنویسی مبتنی بر هوش مصنوعی صحبت می‌کنیم که می‌توانند به شما در نوشتن کد کمک کنند (جدی می‌گویم!)، محیط‌های ابری که می‌توانید از هر جایی با اینترنت برنامه‌های کامل بسازید، و ابزارهای اشکال‌زدایی بسیار پیشرفته که مثل داشتن دید ایکس‌ری برای برنامه‌هایتان است. +تقریباً از شدت خوشحالی در صندلی‌ام می‌پرم که این‌ها را با شما به اشتراک بگذارم چون کل روش ساخت نرم‌افزار را انقلابی کرده‌اند. ما درباره دستیاران کدنویسی مبتنی بر هوش مصنوعی صحبت می‌کنیم که می‌توانند به نگارش کد کمک کنند (جادوی واقعی است!)، محیط‌های ابری که در آن‌ها می‌توانید برنامه‌های کامل را از هر جای دنیا با وای-فای بسازید، و ابزارهای اشکال‌زدایی‌ای که آن‌قدر پیشرفته‌اند که انگار برنامه‌های شما را با دید اشعه ایکس می‌بینند. -و این قسمت هنوز برایم هیجان‌انگیز است: این‌ها ابزارهای «مبتدی» نیستند که وقتی پیشرفت کنید آن‌ها را کنار بگذارید. این‌ها همان ابزارهای سطح حرفه‌ای‌اند که توسعه‌دهندگان گوگل، نتفلیکس و همان استودیو اپلیکیشن مستقل مورد علاقه‌تان دقیقاً همین الان استفاده می‌کنند. با استفاده از آن‌ها احساس می‌کنید حرفه‌ای درجه یک هستید! +و بخشی که هنوز برایم هیجان‌انگیز است: این‌ها ابزارهای «مبتدی» نیستند که بعد از چند ماه از آن‌ها دلزده شوید. این دقیقاً همان ابزارهای حرفه‌ای هستند که توسعه‌دهندگان گوگل، نتفلیکس و آن استودیوی اپلیکیشن مستقل مورد علاقه‌تان همین الان دارند استفاده می‌کنند. شما احساس خواهید کرد چقدر حرفه‌ای هستید وقتی از آن‌ها استفاده می‌کنید! ```mermaid graph TD A["💡 ایده شما"] --> B["⌨️ ویرایشگر کد
(VS Code)"] - B --> C["🌐 ابزارهای توسعه مرورگر
(تست و اشکال‌زدایی)"] - C --> D["⚡ خط فرمان
(اتوماسیون و ابزارها)"] + B --> C["🌐 ابزارهای توسعه مرورگر
(آزمایش و اشکال‌زدایی)"] + C --> D["⚡ خط فرمان
(خودکارسازی و ابزارها)"] D --> E["📚 مستندات
(یادگیری و مرجع)"] E --> F["🚀 برنامه وب شگفت‌انگیز!"] B -.-> G["🤖 دستیار هوش مصنوعی
(GitHub Copilot)"] - C -.-> H["📱 تست دستگاه
(طراحی واکنش‌گرا)"] - D -.-> I["📦 مدیران بسته
(npm، yarn)"] + C -.-> H["📱 آزمایش دستگاه
(طراحی واکنش‌گرا)"] + D -.-> I["📦 مدیران بسته
(npm, yarn)"] E -.-> J["👥 جامعه
(Stack Overflow)"] style A fill:#fff59d @@ -503,335 +503,334 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### ویرایشگرهای کد و IDEها: دوستان دیجیتال جدید شما +### ویرایشگرها و محیط‌های توسعه: بهترین دوستان دیجیتال جدید شما -بیایید درباره ویرایشگرهای کد صحبت کنیم – این‌ها واقعاً قرار است مکان‌های مورد علاقه جدید شما برای حضور باشند! آن‌ها را مانند پناهگاه شخصی کدنویسی خودتان ببینید که بیشترین زمان خود را صرف ساختن و بهبود خلقیات دیجیتال‌تان خواهید کرد. +بیا درباره ویرایشگرهای کد صحبت کنیم – واقعاً قرار است به محل مورد علاقه جدید شما برای کار تبدیل شوند! آن‌ها را مثل آرامگاه شخصی کدنویسی خودتان تصور کنید که بیشتر وقتتان را صرف خلق و بهبود ساخته‌های دیجیتالتان خواهید کرد. -اما چیزی که در ویرایشگرهای مدرن واقعاً جادویی است این است که آن‌ها فقط ویرایشگر متن معمولی نیستند. آن‌ها مثل داشتن درخشان‌ترین و بهترین مربی پشتیبان کدزنی هستند که ۲۴ ساعت کنار شما می‌نشینند. اشتباهات شما را قبل از اینکه خودتان بفهمید می‌گیرند، پیشنهاداتی می‌دهند که شما را نابغه نشان می‌دهد، کمک می‌کنند هر قسمت کد چه کاری انجام می‌دهد را بفهمید و برخی حتی پیش‌بینی می‌کنند که شما ممکن است چه چیزی بنویسید و پیشنهاد می‌کنند که جملات شما را کامل کنند! +اما چیز جادویی درباره ویرایشگرهای مدرن این است که آن‌ها فقط ویرایشگرهای متن ظریف نیستند. آن‌ها مثل هوشمندترین و حامی‌ترین مربی کدنویسی هستند که ۲۴ ساعته کنار شما نشسته‌اند. تایپ اشتباهات شما را قبل از اینکه متوجه شوید می‌گیرند، پیشنهادهایی می‌دهند که شما را نابغه نشان می‌دهد، کمک می‌کنند بفهمید هر قطعه کد چه کاری انجام می‌دهد، و بعضی حتی حدس می‌زنند شما می‌خواهید چه چیزی بنویسید و پیشنهاد تکمیل جمله را می‌دهند! -یادم می‌آید وقتی برای اولین بار تکمیل خودکار را کشف کردم – واقعاً احساس می‌کردم در آینده زندگی می‌کنم. شروع به تایپ می‌کنی و ویرایشگر می‌گوید «هی، آیا به این تابع فکر می‌کردی که دقیقاً همان کاری را انجام می‌دهد که نیاز داری؟» انگار یک خواننده ذهن دارید که دوست کدنویسی شماست! +یادم است وقتی اولین بار تکمیل خودکار را کشف کردم – واقعاً احساس کردم در آینده زندگی می‌کنم. شروع می‌کنید به تایپ چیزی، و ویرایشگر می‌گوید: «هی، آیا به این تابع فکر می‌کردی که دقیقاً کاری را انجام می‌دهد که تو نیاز داری؟» مثل اینکه یک ذهن‌خوان به عنوان رفیق کدنویسی کنارتان است! -**چه چیزی این ویرایشگرها را بسیار خارق‌العاده می‌کند؟** +**چه چیزی این ویرایشگرها را باور نکردنی می‌کند؟** -ویرایشگرهای کد مدرن مجموعه‌ای چشمگیر از ویژگی‌ها را ارائه می‌دهند که طراحی شده‌اند تا بهره‌وری شما را افزایش دهند: +ویرایشگرهای کد مدرن مجموعه‌ای چشمگیر از ویژگی‌ها را ارائه می‌دهند که هدفشان افزایش بهره‌وری شماست: -| ویژگی | کارکرد | چرا مفید است | -|---------|--------------|--------------| -| **هایلایت سینتکس** | رنگی کردن بخش‌های مختلف کد شما | خواندن کد و یافتن خطاها را آسان‌تر می‌کند | -| **تکمیل خودکار** | هنگام تایپ کد پیشنهاد می‌دهد | کدنویسی را سریع‌تر و خطاها را کم می‌کند | -| **ابزارهای اشکال‌زدایی** | به شما کمک می‌کند خطاها را پیدا و رفع کنید | ساعات زیادی از وقت رفع اشکال را ذخیره می‌کند | -| **افزونه‌ها** | ویژگی‌های تخصصی اضافه می‌کند | ویرایشگر را برای هر فناوری شخصی‌سازی می‌کند | -| **دستیارهای هوش مصنوعی** | کد و توضیح پیشنهاد می‌دهند | یادگیری و بهره‌وری را تسریع می‌کند | +| ویژگی | کارکرد | چرا مفید است | +|-------------|-----------------------|-------------------------------------------| +| **برجسته‌سازی نحو** | رنگی کردن قسمت‌های مختلف کد | خواندن کد و یافتن خطاها را آسان‌تر می‌کند | +| **تکمیل خودکار** | پیشنهاد کد هنگام تایپ | سرعت کدنویسی را بالا می‌برد و از اشتباهات می‌کاهد | +| **ابزارهای اشکال‌زدایی** | کمک به یافتن و رفع خطاها | ساعت‌ها صرفه‌جویی در عیب‌یابی می‌کند | +| **افزونه‌ها** | افزودن ویژگی‌های تخصصی | ویرایشگر را برای هر فناوری سفارشی می‌کند | +| **دستیارهای هوش مصنوعی** | پیشنهاد کد و توضیحات | یادگیری و بهره‌وری را تسریع می‌کند | -> 🎥 **منبع ویدیویی**: می‌خواهید ببینید این ابزارها در عمل چگونه‌اند؟ این [ویدیوی ابزارهای حرفه‌ای](https://youtube.com/watch?v=69WJeXGBdxg) را برای مرور جامع تماشا کنید. +> 🎥 **منبع ویدئو**: می‌خواهید این ابزارها را در عمل ببینید؟ این ویدئو [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) یک مرور کامل ارائه می‌دهد. -#### ویرایشگرهای پیشنهادی برای توسعه وب +#### ویرایشگرهای پیشنهادی برای توسعه وب **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (رایگان) -- محبوب‌ترین در میان توسعه‌دهندگان وب +- محبوب‌ترین میان توسعه‌دهندگان وب - اکوسیستم عالی افزونه‌ها - ترمینال داخلی و ادغام با Git - **افزونه‌های ضروری**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - پیشنهادات کد با هوش مصنوعی + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - پیشنهاد کد مبتنی بر هوش مصنوعی - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - همکاری همزمان - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - قالب‌بندی خودکار کد - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - گرفتن غلط‌های املایی در کد + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - فرمت خودکار کد + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - گرفتن اشتباهات املایی در کد -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (پرداختی، رایگان برای دانشجویان) +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (پرداختی، رایگان برای دانش‌آموزان) - ابزارهای پیشرفته اشکال‌زدایی و تست -- تکمیل کد هوشمندانه +- تکمیل هوشمند کد - کنترل نسخه داخلی -**IDEهای ابری** (قیمت‌های متنوع) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code کامل داخل مرورگر شما -- [Replit](https://replit.com/) - عالی برای یادگیری و اشتراک‌گذاری کد +**محیط‌های توسعه ابری** (قیمت‌های مختلف) +- [GitHub Codespaces](https://github.com/features/codespaces) - نسخه کامل VS Code در مرورگر شما +- [Replit](https://replit.com/) - عالی برای یادگیری و به اشتراک‌گذاری کد - [StackBlitz](https://stackblitz.com/) - توسعه وب فول‌استک فوری -> 💡 **نکته شروع**: با Visual Studio Code شروع کنید – رایگان است، در صنعت بسیار استفاده می‌شود، و جامعه بزرگی از آموزش‌ها و افزونه‌های مفید دارد. - +> 💡 **نکته شروع به کار**: با Visual Studio Code شروع کنید – رایگان است، در صنعت به‌طور گسترده استفاده می‌شود، و جامعه عظیمی آموزش‌ها و افزونه‌های مفید می‌سازد. -### مرورگرهای وب: آزمایشگاه توسعه مخفی شما +### مرورگرهای وب: آزمایشگاه پنهان توسعه شما -خوب، آماده باشید که ذهنتان کاملاً منفجر شود! می‌دانید که چطور از مرورگر برای گشتن در شبکه‌های اجتماعی و دیدن ویدیوها استفاده می‌کنید؟ خب، معلوم شده که این‌ها کل این مدت یک آزمایشگاه توسعه‌دهنده مخفی داشتند که همیشه منتظر کشف شدن شما بودند! +خوب، آماده باشید که ذهنتان کاملاً منفجر شود! می‌دانید که شما از مرورگرها برای گشت‌وگذار در شبکه‌های اجتماعی و تماشای ویدئو استفاده می‌کنید؟ خب، معلوم شده که آن‌ها تمام این مدت یک آزمایشگاه توسعه فوق‌العاده پنهانی داشته‌اند که فقط منتظر بودند شما آن را کشف کنید! -هر بار که روی صفحه وب راست‌کلیک می‌کنید و «Inspect Element» را انتخاب می‌کنید، دارید دنیای مخفی ابزارهای توسعه را باز می‌کنید که واقعاً از برخی نرم‌افزارهای گران‌قیمتی که قبلاً صدها دلار برایش می‌پرداختم، قدرتمندتر است. مثل این است که بفهمید آشپزخانه معمولی شما پشت یک پنل مخفی آزمایشگاه سرآشپز حرفه‌ای پنهان کرده است! -اولین باری که کسی ابزارهای توسعه‌دهنده (DevTools) مرورگر را به من نشان داد، تقریباً سه ساعت فقط کلیک می‌کردم و می‌گفتم «صبر کن، اون هم می‌تونه این کار رو بکنه؟!» شما واقعاً می‌توانید هر وب‌سایتی را به صورت زنده ویرایش کنید، دقیقاً ببینید همه چیز چقدر سریع بارگذاری می‌شود، تست کنید سایت‌تان روی دستگاه‌های مختلف چطور به نظر می‌رسد و حتی خطاهای JavaScript را مثل یک حرفه‌ای عیب‌یابی کنید. این واقعاً شگفت‌انگیز است! +هر بار که روی یک صفحه وب راست‌کلیک می‌کنید و «Inspect Element» را انتخاب می‌کنید، شما در دنیای پنهانی از ابزارهای توسعه‌دهنده باز می‌کنید که واقعاً قدرتمندتر از برخی نرم‌افزارهای گران‌قیمتی هستند که قبلاً برایشان صدها دلار می‌پرداختم. مثل کشف اینکه آشپزخانه معمولی شما پشت یک پنل مخفی آزمایشگاه یک سرآشپز حرفه‌ای را پنهان کرده است! +اولین باری که کسی ابزارهای توسعه‌دهنده مرورگر را به من نشان داد، حدود سه ساعت فقط کلیک می‌کردم و می‌گفتم «صبر کن، اینم می‌تونه این کارو بکنه؟!» شما واقعاً می‌توانید هر وب‌سایتی را در زمان واقعی ویرایش کنید، دقیقاً ببینید همه چیز چقدر سریع بارگذاری می‌شود، تست کنید سایت‌تان روی دستگاه‌های مختلف چگونه به‌نظر می‌رسد و حتی جاوااسکریپت را مثل یک حرفه‌ای دیباگ کنید. این واقعاً ذهن را متحیر می‌کند! **دلیل اینکه مرورگرها سلاح مخفی شما هستند:** -وقتی یک وب‌سایت یا برنامه وب می‌سازید، باید ببینید در دنیای واقعی چطور به نظر می‌رسد و رفتار می‌کند. مرورگرها نه‌تنها کار شما را نمایش می‌دهند بلکه بازخورد دقیق دربارهٔ عملکرد، قابلیت دسترسی و مشکلات احتمالی ارائه می‌کنند. +وقتی وب‌سایت یا برنامه وبی می‌سازید، باید ببینید در دنیای واقعی چطور به نظر می‌رسد و چگونه رفتار می‌کند. مرورگرها نه تنها کار شما را نمایش می‌دهند، بلکه بازخورد دقیق درباره عملکرد، دسترسی‌پذیری و مشکلات احتمالی ارائه می‌دهند. #### ابزارهای توسعه‌دهنده مرورگر (DevTools) مرورگرهای مدرن شامل مجموعه‌های توسعه جامعی هستند: -| دسته ابزار | کاری که انجام می‌دهد | نمونه استفاده | +| دسته ابزار | کارکرد | مثال کاربرد | |---------------|--------------|------------------| -| **بازرس عنصر** | مشاهده و ویرایش HTML/CSS به‌صورت زنده | تنظیم استایل برای دیدن نتایج فوری | -| **کنسول** | مشاهده پیام‌های خطا و تست JavaScript | عیب‌یابی مشکلات و آزمایش کد | -| **نظارت بر شبکه** | ردیابی چگونگی بارگذاری منابع | بهینه‌سازی عملکرد و زمان بارگذاری | -| **بررسی قابلیت دسترسی** | تست طراحی فراگیر | اطمینان از کارکرد سایت برای همه کاربران | -| **شبیه‌ساز دستگاه** | پیش‌نمایش در اندازه‌های صفحه متفاوت | تست طراحی پاسخگو بدون نیاز به دستگاه‌های متعدد | +| **بازرس المان (Element Inspector)** | مشاهده و ویرایش HTML/CSS در زمان واقعی | تنظیم استایل‌ها برای دیدن نتایج فوری | +| **کنسول (Console)** | مشاهده پیام‌های خطا و تست جاوااسکریپت | رفع اشکال و آزمایش کد | +| **نظارت شبکه (Network Monitor)** | پیگیری بارگذاری منابع | بهینه‌سازی عملکرد و زمان بارگذاری | +| **بررسی دسترسی‌پذیری (Accessibility Checker)** | تست طراحی فراگیر | اطمینان از کارکرد سایت برای همه کاربران | +| **شبیه‌ساز دستگاه (Device Simulator)** | پیش‌نمایش در اندازه صفحه‌های مختلف | تست طراحی واکنش‌گرا بدون دستگاه‌های متعدد | -#### مرورگرهای توصیه‌شده برای توسعه +#### مرورگرهای پیشنهادی برای توسعه -- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - ابزارهای توسعه استاندارد صنعت با مستندات گسترده -- **[فایرفاکس](https://developer.mozilla.org/docs/Tools)** - ابزارهای عالی برای CSS Grid و قابلیت دسترسی -- **[اج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - ساخته شده روی کرومیوم با منابع توسعه‌ دهنده مایکروسافت +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ابزارهای توسعه استاندارد صنعت با مستندات گسترده +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - ابزارهای عالی برای CSS Grid و دسترسی‌پذیری +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - مبتنی بر کرومیوم با منابع توسعه‌دهنده مایکروسافت -> ⚠️ **نکته مهم در تست**: همیشه سایت‌تان را در چندین مرورگر تست کنید! چیزی که در کروم کاملاً درست کار می‌کند ممکن است در سافاری یا فایرفاکس متفاوت باشد. توسعه‌دهندگان حرفه‌ای روی همه مرورگرهای اصلی تست می‌کنند تا تجربه کاربری یکسان حفظ شود. +> ⚠️ **نکته مهم درباره تست:** همیشه وب‌سایت‌های خود را در مرورگرهای مختلف آزمایش کنید! چیزی که در Chrome عالی است، ممکن است در Safari یا Firefox متفاوت به‌نظر برسد. توسعه‌دهندگان حرفه‌ای برای اطمینان از یک تجربه کاربری یکنواخت در همه مرورگرهای اصلی تست می‌کنند. -### ابزارهای خط فرمان: دروازه ابرقدرت‌های توسعه‌دهنده -وقتش رسیده یک لحظه کاملاً صادقانه درباره خط فرمان داشته باشیم، چون می‌خواهم این را از کسی بشنوید که واقعاً می‌فهمدش. وقتی اولین بار آن را دیدم – فقط این صفحه سیاه ترسناک با متن چشمک‌زن – واقعاً فکر کردم: «نه، قطعاً نه! این شبیه فیلم هکرهای دهه ۸۰ است و من قطعاً به اندازه کافی باهوش نیستم!» 😅 +### ابزارهای خط فرمان: دروازه شما به قدرت‌های فراوان توسعه‌دهنده -اما چیزی که کاش کسی آن موقع به من می‌گفت و حالا به شما می‌گویم این است: خط فرمان ترسناک نیست – دقیقاً مثل یک گفتگوی مستقیم با کامپیوتر شماست. فکر کنید مثل تفاوت بین سفارش غذا از یک اپ مدرن با عکس‌ها و منوها (که راحت است) و رفتن به رستوران محلی مورد علاقه‌تان است که آشپز دقیقاً می‌داند شما چی دوست دارید و چیزی عالی فقط با گفتن «منو شگفت‌زده کن» می‌پزد. +خب، بیایید درباره خط فرمان کاملاً صادق باشیم، چون می‌خواهم این را از کسی بشنوید که واقعاً آن را درک می‌کند. وقتی اولین بار آن را دیدم – فقط یک صفحه سیاه ترسناک با متن چشمک‌زن – واقعاً فکر کردم، «نه، هرگز! این شبیه چیزی از فیلم هکرهای دهه ۸۰ است و من قطعاً به اندازه کافی باهوش نیستم!» 😅 -خط فرمان جایی است که توسعه‌دهندگان احساس جادوگری مطلق می‌کنند. چند کلمه به ظاهر جادویی (باشه، فقط دستورات هستند، ولی جادویی به نظر می‌رسند) تایپ می‌کنید، اینتر می‌زنید و بوم! ساختار کامل پروژه، نصب ابزارهای قدرتمند از سراسر جهان یا بارگذاری برنامه‌تان برای میلیون‌ها نفر انجام می‌شود. وقتی اولین بار این قدرت را بچشید، واقعاً اعتیادآور است! +اما این چیزی است که دلم می‌خواست آن موقع بشنوم و الان به شما می‌گویم: خط فرمان ترسناک نیست – در واقع مثل داشتن یک گفتگوی مستقیم با کامپیوترتان است. آن را مثل تفاوت بین سفارش غذا از یک اپ شیک با عکس‌ها و منوها (که خوب و راحت است) در نظر بگیرید و رفتن به رستوران محله خودتان که آشپز دقیقاً می‌داند چه چیزی دوست دارید و فقط با گفتن «لطفاً مرا با چیزی شگفت‌انگیز سورپرایز کن» می‌تواند چیزی عالی درست کند. -**چرا خط فرمان تبدیل به ابزار مورد علاقه‌تان می‌شود:** +خط فرمان جایی است که توسعه‌دهندگان حس می‌کنند واقعاً جادوگر هستند. چند کلمه به ظاهر جادویی (باشه، آنها دستور هستند، اما مثل جادو به نظر می‌رسند!) تایپ می‌کنید، اینتر می‌زنید و بوم – ساختارهای پروژه کامل، نصب ابزارهای قدرتمند از سراسر جهان، یا راه‌اندازی برنامه خود بر روی اینترنت برای میلیون‌ها نفر رخ می‌دهد. وقتی یکبار طعم این قدرت را بچشید، واقعاً معتادکننده است! -در حالی که رابط‌های گرافیکی برای انجام بسیاری کارها عالی هستند، خط فرمان در خودکارسازی، دقت و سرعت برتر است. بسیاری از ابزارهای توسعه عمدتاً از طریق خط فرمان کار می‌کنند و یادگیری استفاده مؤثر از آن‌ها باعث بهبود چشمگیر بهره‌وری می‌شود. +**چرا خط فرمان ابزار مورد علاقه شما خواهد شد:** + +در حالی که رابط‌های گرافیکی برای بسیاری از کارها عالی هستند، خط فرمان در اتوماسیون، دقت و سرعت برتری دارد. بسیاری از ابزارهای توسعه عمدتاً از طریق خط فرمان کار می‌کنند و یادگیری استفاده بهینه از آنها می‌تواند به‌شدت بهره‌وری شما را افزایش دهد. ```bash -# مرحله 1: ایجاد و انتقال به پوشه پروژه +# مرحله ۱: ایجاد و رفتن به دایرکتوری پروژه mkdir my-awesome-website cd my-awesome-website ``` - -**این کد چه کاری انجام می‌دهد:** -- **ساخت** یک دایرکتوری جدید به نام "my-awesome-website" برای پروژه شما -- **رفتن** به دایرکتوری تازه ساخته شده برای شروع کار + +**این کد چه کاری انجام می‌دهد:** +- **ایجاد** یک پوشه جدید به نام "my-awesome-website" برای پروژه شما +- **رفتن** به داخل پوشهٔ تازه ایجاد شده برای شروع کار ```bash # مرحله ۲: پروژه را با package.json مقداردهی اولیه کنید npm init -y -# نصب ابزارهای توسعه مدرن +# ابزارهای توسعه مدرن را نصب کنید npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` - -**گام به گام، این اتفاقات می‌افتد:** -- **راه‌اندازی** پروژه جدید Node.js با تنظیمات پیش‌فرض با دستور `npm init -y` -- **نصب** Vite به عنوان ابزار ساخت مدرن برای توسعه سریع و بیلدهای تولید -- **افزودن** Prettier برای قالب‌بندی خودکار کد و ESLint برای بررسی کیفیت کد -- **استفاده** از پرچم `--save-dev` برای تعیین اینکه این‌ها فقط وابستگی‌های توسعه هستند + +**مرحله به مرحله، این کاری است که انجام می‌شود:** +- **راه‌اندازی** پروژه جدید Node.js با تنظیمات پیش‌فرض با دستور `npm init -y` +- **نصب** Vite به عنوان یک ابزار ساخت مدرن برای توسعه سریع و ساخت‌های تولیدی +- **اضافه کردن** Prettier برای قالب‌بندی خودکار کد و ESLint برای بررسی کیفیت کد +- **استفاده از** گزینه `--save-dev` برای نشانه‌گذاری این‌ها به عنوان وابستگی‌های مخصوص توسعه ```bash -# مرحله ۳: ساختار پروژه و فایل‌ها را ایجاد کنید +# مرحله ۳: ایجاد ساختار پروژه و فایل‌ها mkdir src assets echo 'My Site

Hello World

' > index.html -# اجرای سرور توسعه را شروع کنید +# شروع سرور توسعه npx vite ``` - -**در بالا ما:** -- **سازماندهی** پروژه با ایجاد پوشه‌های جدا برای کد منبع و دارایی‌ها -- **ایجاد** فایل HTML پایه با ساختار مستند درست -- **راه‌اندازی** سرور توسعه Vite برای بارگذاری زنده و جایگزینی ماژول داغ -#### ابزارهای ضروری خط فرمان برای توسعه وب +**در بالا، ما:** +- **سازماندهی** پروژه با ساخت پوشه‌های جداگانه برای کد منبع و محتوا +- **ساخت** یک فایل HTML پایه با ساختار درست سند +- **راه‌اندازی** سرور توسعه Vite برای بارگذاری زنده و جایگزینی داغ ماژول‌ها + +#### ابزارهای خط فرمان ضروری برای توسعه وب -| ابزار | هدف | چرا به آن نیاز دارید | +| ابزار | هدف | دلیل نیاز | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | کنترل نسخه | پیگیری تغییرات، همکاری و پشتیبان‌گیری از کار شما | -| **[Node.js & npm](https://nodejs.org/)** | محیط اجرای جاوااسکریپت و مدیریت بسته‌ها | اجرای جاوااسکریپت خارج از مرورگر، نصب ابزارهای توسعه مدرن | -| **[Vite](https://vitejs.dev/)** | ابزار ساخت و سرور توسعه | توسعه خیلی سریع با جایگزینی ماژول داغ | -| **[ESLint](https://eslint.org/)** | کیفیت کد | یافتن و اصلاح خودکار مشکلات در جاوااسکریپت | -| **[Prettier](https://prettier.io/)** | قالب‌بندی کد | نگه داشتن قالب‌بندی کد یکدست و خوانا | +| **[Git](https://git-scm.com/)** | کنترل نسخه | پیگیری تغییرات، همکاری با دیگران، پشتیبان‌گیری از کار | +| **[Node.js & npm](https://nodejs.org/)** | محیط اجرای جاوااسکریپت و مدیریت بسته‌ها | اجرای جاوااسکریپت خارج از مرورگرها، نصب ابزارهای مدرن توسعه | +| **[Vite](https://vitejs.dev/)** | ابزار ساخت و سرور توسعه | توسعه بسیار سریع با جایگزینی داغ ماژول‌ها | +| **[ESLint](https://eslint.org/)** | کیفیت کد | پیدا کردن و رفع خودکار مشکلات در جاوااسکریپت شما | +| **[Prettier](https://prettier.io/)** | قالب‌بندی کد | حفظ یکنواختی قالب کد و خوانایی آن | -#### گزینه‌های خاص سیستم‌عامل +#### گزینه‌های مخصوص پلتفرم -**ویندوز:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ترمینال مدرن و غنی از امکانات -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - محیط اسکریپت‌نویسی قدرتمند -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - خط فرمان سنتی ویندوز +**ویندوز:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ترمینال مدرن و پر از ویژگی +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - محیط اسکریپت‌نویسی قدرتمند +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - خط فرمان سنتی ویندوز -**مک‌او‌اس:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - اپلیکیشن ترمینال داخلی -- **[iTerm2](https://iterm2.com/)** - ترمینال پیشرفته با امکانات اضافی +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - برنامه ترمینال داخلی +- **[iTerm2](https://iterm2.com/)** - ترمینال پیشرفته با ویژگی‌های اضافه -**لینوکس:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - شل استاندارد لینوکس -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - شبیه‌ساز ترمینال پیشرفته +**لینوکس:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - شل استاندارد لینوکس +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - شبیه‌ساز ترمینال پیشرفته -> 💻 = از قبل روی سیستم عامل نصب شده است +> 💻 = از پیش روی سیستم عامل نصب شده است -> 🎯 **مسیر یادگیری**: با دستورات پایه مانند `cd` (تغییر دایرکتوری)، `ls` یا `dir` (فهرست فایل‌ها)، و `mkdir` (ساخت پوشه) شروع کنید. سپس با دستورات گردش کار مدرن مثل `npm install`، `git status` و `code .` (باز کردن دایرکتوری جاری در VS Code) تمرین کنید. هر چقدر بیشتر راحت شوید، دستورات و تکنیک‌های اتوماسیون پیشرفته‌تر را طبیعی یاد می‌گیرید. +> 🎯 **مسیر یادگیری:** با دستورات پایه‌ای مانند `cd` (تغییر پوشه)، `ls` یا `dir` (دیدن فایل‌ها)، و `mkdir` (ساخت پوشه) شروع کنید. با دستورات مدرن جریان کاری مانند `npm install`، `git status` و `code .` (باز کردن پوشه فعلی در VS Code) تمرین کنید. هرچه راحت‌تر شدید، دستورات پیشرفته‌تر و تکنیک‌های اتوماسیون را به‌طور طبیعی یاد خواهید گرفت. -### مستندسازی: مربی یادگیری همیشه در دسترس شما -بذار یک راز کوچک باهاتون در میون بذارم که باعث می‌شه تازه وارد بودن شما خیلی بهتر به نظر بیاد: حتی توسعه‌دهندگان باتجربه بخش عظیمی از وقت‌شون رو صرف مطالعه مستندات می‌کنند. و این به این دلیل نیست که نمی‌دونند چکار می‌کنند – بلکه نشانه خرد است! +### مستندسازی: مربی همیشگی و در دسترس شما -مستندات انگار دسترسی به صبورترین و دانا‌ترین معلمان جهان است که ۲۴/۷ در دسترس هستند. سر ساعت ۲ صبح گیر کردید؟ مستندات با یک آغوش مجازی گرم و دقیقاً پاسخ لازم آنجا است. می‌خواهید درباره یک ویژگی جدید باحالی که همه درباره‌اش صحبت می‌کنند یاد بگیرید؟ مستندات با مثال‌های گام به گام پشتیبان شماست. می‌خواهید بفهمید چرا یک چیز به شکلی کار می‌کند؟ مستندات آماده است توضیح دهد تا بالاخره برایتان جا بیفتد! +خوب، اجازه دهید یک راز کوچک بگویم که باعث می‌شود حس بهتری نسبت به مبتدی بودن داشته باشید: حتی توسعه‌دهندگان باتجربه مقدار زیادی از وقت خود را صرف خواندن مستندات می‌کنند. و این به این دلیل نیست که نمی‌دانند دارند چه کار می‌کنند – بلکه نشانه‌ای از خرد است! -چیزی که نگرش من را کاملاً تغییر داد: دنیای توسعه وب فوق‌العاده سریع حرکت می‌کند، و هیچ‌کس (واقعا هیچ‌کس!) همه چیز را حفظ نمی‌کند. دیدم توسعه‌دهندگان ارشد با ۱۵ سال تجربه هم سینتکس پایه را جستجو می‌کنند، و می‌دانید؟ این خجالت ندارد – هوشمندانه است! موضوع داشتن حافظه عالی نیست؛ موضوع دانستن جایی است که سریع جواب‌های قابل اعتماد پیدا کنید و چطور آنها را به کار ببرید. +مستندات را مانند داشتن دسترسی به صبورترین و دانشمندترین معلمان جهان فرض کنید که ۲۴ ساعته و ۷ روز هفته در دسترس هستند. مشکلی در ساعت ۲ نیمه شب؟ مستندات با یک آغوش گرم مجازی و دقیقاً همان جوابی که نیاز دارید در کنار شماست. دوست دارید درباره یک ویژگی جدید جالب که همه درباره آن صحبت می‌کنند یاد بگیرید؟ مستندات با گام‌به‌گام و مثال‌های کاربردی پشتیبانی می‌کند. می‌خواهید بفهمید چرا چیزی آنطور کار می‌کند که می‌کند؟ حدس زدید – مستندات آماده توضیح است به‌گونه‌ای که بالاخره همه چیز برایتان روشن شود! -**اینجاست که جادوی واقعی رخ می‌دهد:** +چیزی که دیدگاه من را کاملاً تغییر داد این است: دنیای توسعه وب به شدت سریع حرکت می‌کند و هیچ‌کس (اصلاً هیچ‌کس!) همه چیز را حفظ نمی‌کند. من توسعه‌دهندگان ارشد با بیش از ۱۵ سال تجربه را دیده‌ام که هنوز نحوه نوشتن سینتکس پایه را جستجو می‌کنند، و می‌دانید چی؟ این شرم‌آور نیست – هوشمندانه است! مسئله داشتن حافظه کامل نیست؛ مسئله این است که بدانید پاسخ‌های مطمئن را سریع کجا پیدا کنید و چگونه آنها را به کار ببرید. -توسعه‌دهندگان حرفه‌ای بخش قابل توجهی از زمان‌شان را صرف خواندن مستندات می‌کنند – نه به این دلیل که نمی‌دانند چه کار می‌کنند، بلکه چون دنیای توسعه وب به‌سرعت تکامل می‌یابد و با یادگیری مداوم باید به‌روز بمانند. مستندات عالی به شما کمک می‌کند نه فقط *چگونه* از چیزی استفاده کنید، بلکه *چرا* و *چه وقت* آن را به کار ببرید. +**اینجاست که جادوی واقعی اتفاق می‌افتد:** -#### منابع ضروری مستندسازی +توسعه‌دهندگان حرفه‌ای بخش قابل توجهی از وقت خود را صرف خواندن مستندات می‌کنند – نه به این دلیل که نمی‌دانند چه می‌کنند، بلکه به این دلیل که چشم‌انداز توسعه وب به سرعت تغییر می‌کند و برای به‌روز ماندن باید همواره یاد بگیرند. مستندات خوب کمک می‌کند بفهمید نه فقط *چگونه* از چیزی استفاده کنید، بلکه *چرا* و *چه زمانی* باید آن را به کار ببرید. -**[شبکه توسعه‌دهندگان موزیلا (MDN)](https://developer.mozilla.org/docs/Web)** -- استاندارد طلایی مستندات فناوری وب -- راهنماهای جامع برای HTML، CSS و JavaScript -- شامل اطلاعات سازگاری مرورگرها -- مثال‌های عملی و دموهای تعاملی +#### منابع مستندات ضروری -**[Web.dev](https://web.dev)** (توسط گوگل) -- بهترین روش‌های توسعه وب مدرن -- راهنماهای بهینه‌سازی عملکرد -- اصول طراحی فراگیر و قابلیت دسترسی -- مطالعات موردی از پروژه‌های واقعی +**[شبکه توسعه‌دهندگان موزیلا (MDN)](https://developer.mozilla.org/docs/Web)** +- استاندارد طلایی مستندات فناوری وب +- راهنماهای جامع برای HTML، CSS و جاوااسکریپت +- شامل اطلاعات سازگاری مرورگرها +- دارای مثال‌های عملی و دموهای تعاملی -**[مستندات توسعه‌دهندگان مایکروسافت](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- منابع توسعه مرورگر اج -- راهنماهای Progressive Web App -- نکات توسعه چندسکویی +**[Web.dev](https://web.dev)** (توسط گوگل) +- بهترین شیوه‌های توسعه وب مدرن +- راهنمای بهینه‌سازی عملکرد +- اصول دسترسی‌پذیری و طراحی فراگیر +- مطالعات موردی از پروژه‌های واقعی -**[مسیرهای یادگیری Frontend Masters](https://frontendmasters.com/learn/)** -- دوره‌های ساختارمند آموزشی -- ویدیوهای آموزشی از کارشناسان صنعت -- تمرین‌های کدنویسی عملی +**[مستندات توسعه‌دهندگان مایکروسافت](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- منابع توسعه مرورگر Edge +- راهنماهای برنامه‌های وب پیش‌رونده +- بینش‌های توسعه کراس‌پلتفرم -> 📚 **استراتژی مطالعه**: سعی نکنید مستندات را حفظ کنید – به جای آن یاد بگیرید چطور به‌خوبی ناوبری کنید. مراجعات پرکاربرد را بوکمارک کرده و با استفاده از قابلیت جستجو سریعاً اطلاعات خاص را پیدا کنید. +**[مسیرهای یادگیری Frontend Masters](https://frontendmasters.com/learn/)** +- دوره‌های آموزشی ساختارمند +- دوره‌های ویدیویی از کارشناسان صنعت +- تمرین‌های عملی برنامه‌نویسی -### 🔧 **آزمون تسلط ابزار: چه چیزی با شما هماهنگ است؟** +> 📚 **استراتژی مطالعه:** سعی نکنید مستندات را حفظ کنید – بلکه یاد بگیرید چگونه به‌صورت بهینه در آنها جستجو کنید. مراجع پرتکرار را نشانه‌گذاری کرده و با عملکرد جستجو تمرین کنید تا اطلاعات خاص را سریع پیدا کنید. -**کمی فکر کنید:** -- اولین ابزاری که مشتاقید امتحان کنید چیست؟ (پاسخ اشتباه وجود ندارد!) -- آیا خط فرمان هنوز ترسناک است یا کنجکاوید بیشتر درباره‌اش بدانید؟ -- می‌توانید تصور کنید از DevTools مرورگر برای دیدن پشت پرده سایت‌های مورد علاقه‌تان استفاده کنید؟ +### 🔧 **بررسی تسلط ابزار: کدام یک با شما هم‌راستا است؟** + +**یک لحظه به اینها فکر کنید:** +- کدام ابزار بیشترین هیجان را برای اولین امتحان به شما می‌دهد؟ (جواب اشتباه وجود ندارد!) +- آیا خط فرمان هنوز ترسناک است یا نسبت به آن کنجکاو شده‌اید؟ +- می‌توانید تصور کنید از ابزارهای توسعه‌دهنده مرورگر برای نگاهی پشت صحنه وب‌سایت‌های محبوب خود استفاده کنید؟ ```mermaid -pie title "زمان توسعه‌دهنده صرف‌شده با ابزارها" +pie title "زمان صرف شده توسعه‌دهنده با ابزارها" "ویرایشگر کد" : 40 - "آزمون مرورگر" : 25 + "آزمایش مرورگر" : 25 "خط فرمان" : 15 "مطالعه مستندات" : 15 "اشکال‌زدایی" : 5 -``` -> **یک نکته جالب**: اکثر توسعه‌دهندگان تقریباً ۴۰٪ زمان‌شان را در ویرایشگر کد می‌گذرانند، اما توجه کنید چقدر زمان صرف تست، یادگیری و حل مشکلات می‌شود. برنامه‌نویسی فقط نوشتن کد نیست – بلکه خلق تجربه است! +``` +> **نکته جالب:** بیشتر توسعه‌دهندگان حدود ۴۰٪ از وقت خود را در ویرایشگر کد می‌گذرانند، اما ببینید چقدر وقت صرف تست، یادگیری و حل مسئله می‌شود. برنامه‌نویسی فقط نوشتن کد نیست – درباره خلق تجربه‌هاست! -✅ **فکری برای تامل**: این موضوع جالب را در نظر بگیرید – چگونه فکر می‌کنید ابزارهای ساخت وب‌سایت (توسعه) ممکن است با ابزارهای طراحی ظاهر آن (طراحی) متفاوت باشند؟ مثل تفاوت بین یک معمار که خانه زیبا طراحی می‌کند و پیمانکاری که واقعاً آن را می‌سازد. هر دو مهمند، ولی جعبه ابزارشان فرق دارد! این نوع تفکر به شما کمک می‌کند تصویر بزرگ‌تری از چگونگی به‌وجود آمدن وب‌سایت‌ها ببینید. +✅ **موضوع قابل تأمل:** چیزی که برای فکر کردن جالب است – فکر می‌کنید ابزارهای ساخت وب‌سایت (توسعه) چگونه ممکن است با ابزارهای طراحی ظاهر آن (طراحی) متفاوت باشند؟ این مثل تفاوت بین یک معمار که خانه‌ای زیبا طراحی می‌کند و پیمانکاری است که آن را می‌سازد. هر دو خیلی مهم هستند، اما جعبه ابزارهای متفاوتی نیاز دارند! این نوع تفکر به شما کمک می‌کند تصویری بزرگتر از چگونگی زنده شدن وب‌سایت‌ها ببینید. -## چالش عامل GitHub Copilot 🚀 +## چالش GitHub Copilot Agent 🚀 -با حالت Agent چالش زیر را کامل کنید: +از حالت Agent استفاده کنید تا چالش زیر را کامل کنید: -**توضیح:** امکانات یک ویرایشگر کد یا IDE مدرن را کشف کنید و نشان دهید چطور می‌تواند جریان کاری شما را به عنوان یک توسعه‌دهنده وب بهبود بخشد. +**توضیح:** ویژگی‌های یک ویرایشگر کد یا IDE مدرن را بررسی کنید و نشان دهید چگونه می‌تواند جریان کاری شما را به عنوان یک توسعه‌دهنده وب بهبود بخشد. -**هدایت:** یک ویرایشگر یا IDE انتخاب کنید (مثل Visual Studio Code، WebStorm یا IDE ابری). سه ویژگی یا افزونه‌ای که کمک می‌کند کد را بهتر بنویسید، عیب‌یابی کنید یا نگهداری کنید لیست کنید. برای هر کدام توضیح مختصری بدهید که چگونه به جریان کاری شما کمک می‌کند. +**دستور:** یک ویرایشگر کد یا IDE انتخاب کنید (مثل Visual Studio Code، WebStorm یا IDE مبتنی بر ابر). سه ویژگی یا افزونه را فهرست کنید که به شما در نوشتن، دیباگ یا نگهداری کد کمک می‌کنند. برای هرکدام، توضیح مختصری درباره اینکه چگونه به بهبود جریان کاری شما کمک می‌کند ارائه دهید. --- ## 🚀 چالش -**خب، کارآگاه، برای اولین پرونده‌ات آماده‌ای؟** - -حالا که این پایه فوق‌العاده را گرفته‌ای، یک ماجراجویی دارم که به تو کمک می‌کند ببینی دنیای برنامه‌نویسی چقدر متنوع و جالب است. و گوش کن – این هنوز درباره نوشتن کد نیست، پس هیچ فشاری نیست! خودت را مثل یک کارآگاه زبان برنامه‌نویسی در اولین پرونده هیجان‌انگیزت تصور کن! - -**ماموریت تو، اگر قبول کنی:** -1. **محقق زبان‌ها شو:** سه زبان برنامه‌نویسی از جهان‌های کاملاً متفاوت انتخاب کن – مثلاً یکی برای ساخت وب‌سایت‌ها، یکی برای ساخت اپ موبایل و یکی برای پردازش داده‌های علمی. نمونه‌هایی از همان کار ساده نوشته شده در هر زبان پیدا کن. قول می‌دهم شگفت‌زده شوی که چقدر می‌توانند متفاوت به نظر برسند در حالی که دقیقاً همان کار را انجام می‌دهند! +**خب، کارآگاه، برای اولین پرونده آماده‌ای؟** -2. **داستان‌های پیدایش‌شان را کشف کن:** چه چیزی هر زبان را خاص می‌کند؟ یک نکته جالب – هر زبان برنامه‌نویسی ایجاد شده چون کسی فکر کرده «باید راه بهتری برای حل این مشکل خاص باشد.» می‌توانی بفهمی آن مشکلات چه بودند؟ برخی از این داستان‌ها واقعاً جذابند! +حالا که این پایه عالی را بدست آورده‌ای، ماجراجویی‌ای داریم که به شما کمک می‌کند دنیای برنامه‌نویسی را چقدر متنوع و جذاب است ببینید. و گوش کن – هنوز درباره نوشتن کد نیست، پس نگران نباش! خودت را مثل یک کارآگاه زبان برنامه‌نویسی در اولین پرونده هیجان‌انگیز خودت تصور کن! -3. **با جوامعشان آشنا شو:** ببین هر جامعه آن زبان چقدر دوستانه و پر اشتیاق است. بعضی میلیون‌ها توسعه‌دهنده دارند که دانش به اشتراک می‌گذارند و به هم کمک می‌کنند، بعضی کوچکتر ولی بسیار هماهنگ و حمایت‌گرند. از دیدن شخصیت‌های مختلف این جوامع لذت خواهی برد! +**ماموریت تو، اگر بخواهی قبولش کنی:** +۱. **کاوشگر زبان شو:** سه زبان برنامه‌نویسی از دنیاهای کاملاً متفاوت انتخاب کن – شاید یکی که وب‌سایت می‌سازد، یکی که اپ موبایل می‌سازد و یکی که داده‌های علمی را پردازش می‌کند. نمونه‌هایی از همان کار ساده نوشته شده به هر کدام پیدا کن. قول می‌دهم از اینکه چقدر می‌توانند در عین انجام همان کار کاملاً متفاوت باشند شگفت‌زده شوی! -4. **به حس درونیت گوش کن:** الان کدام زبان به نظرت رسیدنی‌تر است؟ برای انتخاب «کامل» نگران نباش – فقط به غرایز خودت گوش کن! واقعاً جواب اشتباهی وجود ندارد و همیشه می‌توانی بعداً بقیه را هم کشف کنی. +۲. **داستان منشأ آنها را کشف کن:** چه چیزی هر زبان را خاص می‌کند؟ یک حقیقت جالب – هر زبان برنامه‌نویسی به این دلیل ساخته شده که کسی فکر کرده، «می‌دانی؟ باید راه بهتری برای حل این مشکل خاص وجود داشته باشد.» می‌توانی بفهمی آن مشکلات چه بودند؟ بعضی از این داستان‌ها واقعاً جذاب هستند! -**کار کارآگاهی اضافه:** ببین می‌توانی کشف کنی سایت‌ها یا اپ‌های بزرگ با هر زبان ساخته شده‌اند؟ مطمئنم از دانستن اینکه چه چیزی اینستاگرام، نتفلیکس یا بازی موبایلی‌ای که نمی‌توانی ازش دست بکشی را تغذیه می‌کند شوکه می‌شوی! +۳. **با جوامع آنها آشنا شو:** ببین چقدر جامعه هر زبان خوش‌قلب و پرشور است. بعضی میلیون‌ها توسعه‌دهنده دارند که دانش را به اشتراک می‌گذارند و کمک می‌کنند، برخی کوچکتر اما صمیمی و حمایتگر هستند. عاشق دیدن شخصیت‌های متفاوت این جوامع خواهی شد! -> 💡 **یادت باشد:** امروز نمی‌خواهی در هیچ‌کدام از این زبان‌ها استاد شوی. فقط می‌خواهی محله را بشناسی قبل از اینکه تصمیم بگیری کجا می‌خواهی اقامت کنی. وقت بگذار، خوش بگذران و اجازه بده کنجکاوی‌ات راهنمایت باشد! +۴. **به حس درونیت گوش بده:** کدام زبان در حال حاضر برایت قابل دسترس‌تر به نظر می‌رسد؟ نگران انتخاب «بی‌نقص» نباش – فقط به غرایز خود گوش کن! واقعاً جواب اشتباه وجود ندارد و می‌توانی بعداً زبان‌های دیگر را هم کاوش کنی. -## بگذار جشن بگیریم آنچه کشف کردی! +**کار جایزه‌ای کارآگاهی:** ببین می‌توانی کشف کنی کدام وب‌سایت‌ها یا اپلیکیشن‌های بزرگ با هر زبان ساخته شده‌اند. قول می‌دهم که درباره اینکه اینستاگرام، نتفلیکس یا آن بازی موبایلی که نمی‌توانی دست از آن بکشی با چه تکنولوژی‌هایی ساخته شده‌اند شگفت‌زده شوی! -وای، تو امروز مقدار بسیار زیادی اطلاعات فوق‌العاده جذب کردی! واقعاً هیجان‌زده‌ام ببینم چقدر از این سفر شگفت‌انگیز با تو باقی مانده. و یادت باشد – این یک آزمون نیست که همه چیز را درست جواب بدهی. این بیشتر جشن همه چیزهای جالبی است که درباره این دنیای جذاب که قرار است واردش شوی یاد گرفته‌ای! +> 💡 **یادت باشد:** امروز قصد ندارید در هیچ‌کدام از این زبان‌ها خبره شوی. فقط داری با محله آشنا می‌شوی تا تصمیم بگیری کجا می‌خواهی خانه‌ات را بسازی. وقت بگذار، لذت ببر و کنجکاوی‌ات را راهنما کن! -[آزمون پس از درس را بگیر](https://ff-quizzes.netlify.app/web/) -## مرور و یادگیری خودآموز +## بیایید پیشرفت‌هایی که کردی را جشن بگیریم! -**وقت بگذارید و از کشف آن لذت ببرید!** +وای، تو امروز مقدار زیادی اطلاعات شگفت‌انگیز یاد گرفتی! واقعاً هیجان‌زده‌ام ببینم چقدر از این سفر شگفت‌انگیز در ذهنت مانده. و به یاد داشته باش – این یک آزمون نیست که باید همه چیز کاملاً درست باشد. این بیشتر مثل جشن گرفتن همه چیزهای جالبی است که درباره دنیای جذابی که قرار است واردش شوی یاد گرفته‌ای! -امروز پیشرفت زیادی داشته‌اید و این چیز قابل افتخاری است! حالا قسمت جذاب ماجرا شروع می‌شود – کاوش در موضوعاتی که کنجکاوی‌تان را به حرکت درآورده‌اند. به خاطر داشته باشید، این درس نیست – یک ماجراجویی است! +[شرکت در آزمون بعد از درس](https://ff-quizzes.netlify.app/web/) -**عمیق‌تر به چیزهایی که شما را هیجان‌زده می‌کند بپردازید:** +## مرور و خودآموزی -**با زبان‌های برنامه‌نویسی آشنا شوید:** -- از وب‌سایت‌های رسمی ۲ تا ۳ زبان که توجه‌تان را جلب کرده‌اند بازدید کنید. هر کدام شخصیت و داستان منحصر به فرد خود را دارند! -- برخی بازی‌گرهای کدنویسی آنلاین مثل [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، یا [Replit](https://replit.com/) را امتحان کنید. نترسید که آزمایش کنید – نمی‌توانید چیزی را خراب کنید! -- درباره چگونگی شکل‌گیری زبان مورد علاقه‌تان مطالعه کنید. واقعاً، برخی از این داستان‌های ظهور زبان‌ها بسیار جذاب‌اند و به شما کمک می‌کنند بفهمید چرا زبان‌ها به آن شکلی که هستند کار می‌کنند. +**وقت بگذار و با آن بازی کن و لذت ببر!** +امروز پیشرفت زیادی داشتید و این چیزی است که باید به آن افتخار کنید! حالا بخش سرگرم‌کننده شروع می‌شود – کشف موضوعاتی که کنجکاوی شما را برانگیخته‌اند. به یاد داشته باشید، این تکلیف نیست – این یک ماجراجویی است! -**با ابزارهای جدیدتان راحت شوید:** -- اگر هنوز Visual Studio Code را دانلود نکرده‌اید، همین حالا این کار را انجام دهید – رایگان است و قطعاً آن را دوست خواهید داشت! -- چند دقیقه در بازارچه افزونه‌ها بگردید. این مثل یک فروشگاه برنامه برای ویرایشگر کد شماست! -- ابزارهای توسعه‌دهنده مرورگرتان را باز کنید و داخل سایت‌ها کلیک کنید. نگران درک همه چیز نباشید – فقط با آنچه هست آشنا شوید. +**عمیق‌تر در آنچه شما را هیجان‌زده می‌کند بپردازید:** -**در جامعه برنامه‌نویسان شرکت کنید:** -- برخی از جوامع توسعه‌دهندگان در [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/) یا [GitHub](https://github.com/) را دنبال کنید. جامعه برنامه‌نویسی به شدت از تازه‌واردها استقبال می‌کند! -- ویدیوهای آموزشی مبتدی پسند در یوتیوب تماشا کنید. تعداد زیادی خالق محتوای عالی وجود دارد که به یاد دارند شروع کار چگونه است. -- به فکر شرکت در گروه‌های محلی یا جوامع آنلاین باشید. به من اعتماد کنید، برنامه‌نویسان عاشق کمک به تازه‌واردان هستند! +**با زبان‌های برنامه‌نویسی به‌صورت عملی آشنا شوید:** +- به وب‌سایت‌های رسمی ۲ تا ۳ زبان که توجه‌تان را جلب کرده‌اند سر بزنید. هر کدام شخصیت و داستان خاص خود را دارند! +- با برخی محیط‌های برنامه‌نویسی آنلاین مانند [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/) یا [Replit](https://replit.com/) کار کنید. نترسید که آزمایش کنید – چیزی خراب نمی‌شود! +- درباره چگونگی پیدایش زبان مورد علاقه‌تان بخوانید. جدی می‌گویم، بعضی از این داستان‌های آغاز جذاب هستند و به شما کمک می‌کنند بفهمید چرا زبان‌ها به آن شکلی که دارند کار می‌کنند. -> 🎯 **گوش کنید، این را بخاطر بسپارید**: از شما انتظار نمی‌رود که یک شبه جادوگر کدنویسی شوید! همین الان شما تازه با این دنیای شگفت‌انگیز که قرار است عضوی از آن باشید آشنا شده‌اید. وقت بگذارید، از سفر لذت ببرید و به یاد داشته باشید – هر توسعه‌دهنده‌ای که تحسین می‌کنید یک زمانی دقیقاً دقیقاً همان جایی نشسته بوده که شما هستید، هیجان‌زده و شاید کمی دستپاچه. این کاملاً طبیعی است و یعنی شما دارید راه درستی می‌روید! +**با ابزارهای جدید خود راحت شوید:** +- اگر هنوز Visual Studio Code را دانلود نکرده‌اید – همین حالا دانلودش کنید، رایگان است و عاشقش خواهید شد! +- چند دقیقه‌ای در فروشگاه افزونه‌ها بگردید. این مثل فروشگاه برنامه برای ویرایشگر کد شماست! +- ابزارهای توسعه‌دهنده مرورگرتان را باز کنید و اطراف کلیک کنید. نگران این نباشید که همه چیز را بفهمید – فقط با آنچه هست آشنا شوید. +**به جامعه ملحق شوید:** +- چند جامعه توسعه‌دهنده را در [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/) یا [GitHub](https://github.com/) دنبال کنید. جامعه برنامه‌نویسی به‌طور شگفت‌انگیزی به تازه‌واردها خوش‌آمد می‌گوید! +- ویدئوهای برنامه‌نویسی مناسب مبتدی‌ها را در یوتیوب تماشا کنید. خالقان بسیار خوبی وجود دارند که به یاد دارند شروع کردن چه حسی دارد. +- به گردهمایی‌های محلی یا جوامع آنلاین بپیوندید. باور کنید، برنامه‌نویسان عاشق کمک به تازه‌واردها هستند! +> 🎯 **گوش کنید، این چیزی است که می‌خواهم به یاد داشته باشید**: از شما انتظار نمی‌رود یک شبه جادوگر کد شوید! در حال حاضر، فقط دارید این دنیای جدید شگفت‌انگیز را که قرار است بخشی از آن باشید، می‌شناسید. زمان بگذارید، از سفر لذت ببرید، و به یاد داشته باشید – هر توسعه‌دهنده‌ای که تحسین می‌کنید یک زمانی دقیقاً جایی که شما الان هستید نشسته بود، هیجان‌زده و شاید کمی دلهره‌دار. این کاملاً طبیعی است و یعنی راه را درست می‌روید! ## تکلیف [Reading the Docs](assignment.md) -> 💡 **یک تلنگر برای تکلیف‌تان**: خیلی دوست دارم ببینم ابزارهایی را که تاکنون بررسی نکرده‌ایم کاوش می‌کنید! ویرایشگرها، مرورگرها و ابزارهای خط فرمانی که قبلاً درباره‌شان صحبت کردیم را کنار بگذارید – یک جهان شگفت‌انگیز کامل از ابزارهای توسعه وجود دارد که منتظر کشف شدن هستند. به دنبال ابزارهایی باشید که فعالانه نگهداری می‌شوند و جوامع پرجنب‌وجوش و کمک‌رسان دارند (این‌ها معمولاً بهترین آموزش‌ها و حمایت‌ها را وقتی گیر می‌کنید و به کمک دوستانه‌ای نیاز دارید، دارند). +> 💡 **یه تلنگر کوچک برای تکلیف شما**: خیلی دوست دارم ببینم ابزارهایی که هنوز بررسی نکرده‌ای را کشف می‌کنید! از ویرایشگرها، مرورگرها و ابزارهای خط فرمانی که قبلاً صحبت کردیم عبور کنید – یک جهان شگفت‌انگیز کامل از ابزارهای توسعه خارق‌العاده وجود دارد که منتظر کشف شدن هستند. به دنبال آن‌هایی باشید که به طور فعال نگهداری می‌شوند و جوامع پرجنب‌وجوش و پشتیبان خوبی دارند (این‌ها معمولاً بهترین آموزش‌ها و حمایت‌کننده‌ترین افراد را دارند وقتی که ناگهان گیر می‌کنید و به دست مهربانی نیاز دارید). --- ## 🚀 جدول زمانی سفر برنامه‌نویسی شما -### ⚡ **کاری که می‌توانید در ۵ دقیقه آینده انجام دهید** -- [ ] وب‌سایت ۲ تا ۳ زبان برنامه‌نویسی که توجه‌تان را جلب کرده‌اند نشانک بزنید -- [ ] اگر Visual Studio Code را هنوز دانلود نکرده‌اید، آن را دانلود کنید -- [ ] ابزارهای توسعه‌دهنده مرورگرتان (F12) را باز کنید و در هر سایتی کلیک کنید +### ⚡ **چیزی که می‌توانید در ۵ دقیقه آینده انجام دهید** +- [ ] نشانک ۲ تا ۳ وب‌سایت زبان برنامه‌نویسی که توجه‌تان را جلب کرده‌اند بسازید +- [ ] اگر هنوز Visual Studio Code دانلود نکرده‌اید، آن را دانلود کنید +- [ ] ابزارهای توسعه‌دهنده مرورگر را باز کنید (F12) و در هر وب‌سایتی کلیک کنید - [ ] در یک جامعه برنامه‌نویسی عضو شوید (Dev.to، Reddit r/webdev، یا Stack Overflow) -### ⏰ **کاری که می‌توانید در این ساعت انجام دهید** -- [ ] آزمون پس از درس را کامل کنید و به پاسخ‌های خود فکر کنید -- [ ] VS Code را با افزونه GitHub Copilot راه‌اندازی کنید -- [ ] نمونه "Hello World" را در ۲ زبان برنامه‌نویسی مختلف به صورت آنلاین امتحان کنید -- [ ] ویدیوی "یک روز در زندگی یک توسعه‌دهنده" را در یوتیوب ببینید +### ⏰ **چیزی که می‌توانید در این ساعت انجام دهید** +- [ ] آزمون پس از درس را کامل کنید و به پاسخ‌هایتان بیندیشید +- [ ] VS Code را با افزونه GitHub Copilot تنظیم کنید +- [ ] در ۲ زبان برنامه‌نویسی مختلف آنلاین یک نمونه «Hello World» را امتحان کنید +- [ ] ویدئوی «یک روز در زندگی یک توسعه‌دهنده» را در یوتیوب ببینید - [ ] کار کارآگاهی زبان برنامه‌نویسی خود را شروع کنید (از چالش) ### 📅 **ماجراجویی یک هفته‌ای شما** -- [ ] تکلیف را کامل کنید و ۳ ابزار جدید توسعه را کاوش کنید +- [ ] تکلیف را کامل کنید و ۳ ابزار توسعه جدید را کشف کنید - [ ] ۵ توسعه‌دهنده یا حساب برنامه‌نویسی را در شبکه‌های اجتماعی دنبال کنید -- [ ] چیزی کوچک در CodePen یا Replit بسازید (حتی فقط "Hello, [نام شما]!") -- [ ] یک پست بلاگ توسعه‌دهنده درباره سفر برنامه‌نویسی کسی بخوانید -- [ ] در یک نشست مجازی شرکت کنید یا یک سخنرانی برنامه‌نویسی را تماشا کنید +- [ ] سعی کنید چیزی کوچک در CodePen یا Replit بسازید (حتی فقط «Hello, [نام شما]!») +- [ ] یک نوشته بلاگی از توسعه‌دهنده‌ای درباره سفر برنامه‌نویسی‌اش بخوانید +- [ ] در یک گردهمایی مجازی شرکت کنید یا یک گفتگو درباره برنامه‌نویسی ببینید - [ ] شروع به یادگیری زبان انتخابی خود با آموزش‌های آنلاین کنید -### 🗓️ **تحول یک ماهه شما** -- [ ] اولین پروژه کوچک خود را بسازید (حتی یک صفحه وب ساده هم قابل قبول است!) -- [ ] به یک پروژه متن باز مشارکت کنید (با اصلاح مستندات شروع کنید) -- [ ] به کسی که تازه برنامه‌نویسی را شروع کرده مربیگری دهید -- [ ] وب‌سایت نمونه‌کار توسعه‌دهنده خود را ایجاد کنید +### 🗓️ **تغییر ماهانه شما** +- [ ] اولین پروژه کوچک خود را بسازید (حتی یک صفحه وب ساده هم حساب می‌شود!) +- [ ] به یک پروژه متن‌باز کمک کنید (با اصلاح مستندات شروع کنید) +- [ ] کسی که تازه برنامه‌نویسی را شروع کرده را راهنمایی کنید +- [ ] وب‌سایت نمونه‌کار توسعه‌دهنده‌تان را بسازید - [ ] با جوامع محلی توسعه‌دهنده یا گروه‌های مطالعه ارتباط برقرار کنید -- [ ] شروع به برنامه‌ریزی گام بعدی یادگیری خود کنید +- [ ] شروع به برنامه‌ریزی برای مرحله بعدی یادگیری خود کنید -### 🎯 **بازبینی نهایی برای بازتاب** +### 🎯 **بازنگری نهایی** -**قبل از ادامه دادن، لحظه‌ای جشن بگیرید:** -- یک چیز درباره برنامه‌نویسی که امروز شما را هیجان‌زده کرد چه بود؟ +**قبل از رفتن، لحظه‌ای جشن بگیرید:** +- یک چیزی درباره برنامه‌نویسی که امروز شما را هیجان‌زده کرد چیست؟ - کدام ابزار یا مفهوم را می‌خواهید اول کاوش کنید؟ -- درباره شروع این سفر برنامه‌نویسی چه احساسی دارید؟ -- یک سوال دارید که همین الان بخواهید از یک توسعه‌دهنده بپرسید؟ +- چگونه درباره شروع این سفر برنامه‌نویسی احساس می‌کنید؟ +- یک سؤال که دوست دارید همین الان از یک توسعه‌دهنده بپرسید چیست؟ ```mermaid journey title سفر ساخت اعتماد به نفس شما section امروز کنجکاو: 3: You - غرق در کار: 4: You + سر در گم: 4: You هیجان زده: 5: You section این هفته کاوش: 4: You @@ -842,11 +841,11 @@ journey با اعتماد به نفس: 5: You کمک به دیگران: 5: You ``` -> 🌟 **به یاد داشته باشید**: هر متخصصی زمانی مبتدی بوده است. هر توسعه‌دهنده ارشدی زمانی دقیقاً مثل شما بوده – هیجان‌زده، شاید کمی overwhelmed، و قطعاً کنجکاو درباره آنچه ممکن است. شما در جمع فوق‌العاده‌ای هستید و این سفر شگفت‌انگیز خواهد بود. به دنیای فوق‌العاده برنامه‌نویسی خوش آمدید! 🎉 +> 🌟 **به یاد داشته باشید**: هر کارشناس یک زمانی تازه‌کار بود. هر توسعه‌دهنده ارشد یک زمانی دقیقاً همان حس شما را داشت – هیجان‌زده، شاید کمی دلهره‌دار، و قطعاً کنجکاو نسبت به آنچه ممکن است. در جمعی شگفت‌انگیز هستید و این سفر فوق‌العاده خواهد بود. به دنیای شگفت‌انگیز برنامه‌نویسی خوش آمدید! 🎉 --- -**توضیح ضروری**: -این سند با استفاده از سرویس ترجمه ماشینی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادقتی‌هایی باشند. سند اصلی به زبان مادری خود، منبع معتبر و قطعی محسوب می‌شود. برای اطلاعات حساس و مهم، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه نیستیم. +**سلب مسئولیت**: +این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما در تلاش برای دقت هستیم، لطفاً آگاه باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما در قبال هرگونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه مسئولیتی نداریم. \ No newline at end of file diff --git a/translations/fa/AGENTS.md b/translations/fa/AGENTS.md index b0bdc9f6f..4cb34e296 100644 --- a/translations/fa/AGENTS.md +++ b/translations/fa/AGENTS.md @@ -1,24 +1,24 @@ # AGENTS.md -## مروری بر پروژه +## نمای کلی پروژه -این یک مخزن محتوای آموزشی برای آموزش اصول توسعه وب به مبتدیان است. این دوره آموزشی جامع، یک دوره 12 هفته‌ای است که توسط مایکروسافت کلود ادوکیتس توسعه یافته و شامل 24 درس عملی در زمینه جاوااسکریپت، CSS و HTML می‌باشد. +این یک مخزن آموزشی برای آموزش مبانی توسعه وب به مبتدیان است. این دوره آموزشی جامع شامل ۱۲ هفته است که توسط تیم Microsoft Cloud Advocates توسعه یافته و شامل ۲۴ درس عملی درباره JavaScript، CSS و HTML می‌باشد. -### اجزای اصلی +### اجزای کلیدی -- **محتوای آموزشی**: 24 درس ساختاریافته سازمان‌یافته در ماژول‌های مبتنی بر پروژه -- **پروژه‌های عملی**: تری‌ریم، بازی تایپینگ، افزونه مرورگر، بازی فضایی، برنامه بانکداری، ویرایشگر کد و دستیار چت هوش مصنوعی -- **آزمون‌های تعاملی**: 48 آزمون با 3 سوال هر کدام (ارزیابی قبل/بعد از درس) -- **پشتیبانی چندزبانه**: ترجمه خودکار برای بیش از 50 زبان از طریق اکشن‌های گیت‌هاب -- **فناوری‌ها**: HTML، CSS، جاوااسکریپت، Vue.js 3، Vite، Node.js، Express، پایتون (برای پروژه‌های AI) +- **محتوای آموزشی**: ۲۴ درس سازمان‌دهی شده به صورت ماژول‌های پروژه‌محور +- **پروژه‌های عملی**: تراریوم، بازی تایپ، افزونه مرورگر، بازی فضایی، برنامه بانکی، ویرایشگر کد و دستیار چت هوش مصنوعی +- **آزمون‌های تعاملی**: ۴۸ آزمون با ۳ سوال هر کدام (ارزیابی قبل و بعد از درس) +- **پشتیبانی چندزبانه**: ترجمه خودکار به بیش از ۵۰ زبان با استفاده از GitHub Actions +- **فناوری‌ها**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (برای پروژه‌های هوش مصنوعی) ### معماری -- مخزن آموزشی با ساختار مبتنی بر درس‌ها -- هر پوشه درس شامل README، نمونه کدها و راه‌حل‌ها است -- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app، پروژه‌های مختلف درس‌ها) -- سیستم ترجمه با استفاده از GitHub Actions (co-op-translator) -- مستندات ارائه شده با Docsify و در قالب PDF دردسترس +- مخزن آموزشی با ساختار مبتنی بر درس‌ها +- هر فولدر درس شامل README، مثال‌های کد و راه‌حل‌ها است +- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app، پروژه‌های مختلف درس‌ها) +- سیستم ترجمه با استفاده از GitHub Actions (co-op-translator) +- مستندات ارائه شده از طریق Docsify و قابل دسترسی به صورت PDF ## دستورات راه‌اندازی @@ -31,7 +31,7 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### راه‌اندازی اپلیکیشن آزمون (Vue 3 + Vite) +### راه‌اندازی برنامه آزمون (Vue 3 + Vite) ```bash cd quiz-app @@ -41,12 +41,12 @@ npm run build # ساخت برای تولید npm run lint # اجرای ESLint ``` -### API پروژه بانک (Node.js + Express) +### API پروژه بانکی (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # راه‌اندازی سرور API +npm start # شروع سرور API npm run lint # اجرای ESLint npm run format # قالب‌بندی با Prettier ``` @@ -72,7 +72,7 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# تنظیم متغیر محیطی GITHUB_TOKEN +# مقداردهی متغیر محیطی GITHUB_TOKEN python api.py ``` @@ -80,33 +80,33 @@ python api.py ### برای مشارکت‌کنندگان محتوا -1. **شاخه مخزن را فورک کنید** به حساب گیت‌هاب خود -2. **شاخه فورک شده را کلون کنید** به صورت محلی -3. **یک شاخه جدید بسازید** برای تغییراتتان -4. تغییرات در محتوای درس یا نمونه کدها ایجاد کنید -5. هر تغییر کد را در دایرکتوری‌های مرتبط پروژه تست کنید -6. درخواست‌های پول (pull requests) را طبق دستورالعمل‌های مشارکت ارسال کنید +1. **Fork** مخزن به حساب GitHub خود +2. **Clone** کردن Fork روی سیستم محلی +3. ایجاد شاخه جدید برای تغییرات +4. اعمال تغییرات در محتوا یا مثال‌های کد +5. تست تغییرات کد در دایرکتوری پروژه‌های مرتبط +6. ارسال Pull Request با رعایت دستورالعمل‌های مشارکت ### برای یادگیرندگان -1. مخزن را فورک یا کلون کنید -2. مستقیماً به دایرکتوری‌های درس به ترتیب مراجعه کنید -3. فایل‌های README هر درس را مطالعه کنید -4. آزمون‌های قبل از درس را در https://ff-quizzes.netlify.app/web/ تکمیل کنید -5. روی نمونه کدها در پوشه‌های درس کار کنید -6. تمرینات و چالش‌ها را انجام دهید -7. آزمون‌های بعد از درس را انجام دهید +1. Fork یا clone مخزن +2. به ترتیب به دایرکتوری‌های درس‌ها بروید +3. فایل‌های README هر درس را مطالعه کنید +4. آزمون‌های قبل از درس را در https://ff-quizzes.netlify.app/web/ انجام دهید +5. مثال‌های کد در پوشه‌های درس را بررسی کنید +6. تکالیف و چالش‌ها را کامل کنید +7. آزمون‌های پس از درس را برگزار کنید -### توسعه زنده +### توسعه به صورت زنده -- **مستندات**: با دستور `docsify serve` در ریشه اجرا کنید (پورت 3000) -- **اپلیکیشن آزمون**: دستور `npm run dev` را در دایرکتوری quiz-app اجرا کنید -- **پروژه‌ها**: از افزونه Live Server در VS Code برای پروژه‌های HTML استفاده کنید -- **پروژه‌های API**: دستور `npm start` را در دایرکتوری‌های API مربوطه اجرا کنید +- **مستندات**: اجرای `docsify serve` در شاخه اصلی (پورت 3000) +- **برنامه آزمون**: اجرای `npm run dev` در دایرکتوری quiz-app +- **پروژه‌ها**: استفاده از افزونه VS Code Live Server برای پروژه‌های HTML +- **پروژه‌های API**: اجرای `npm start` در دایرکتوری‌های مربوط به API ## دستورالعمل‌های تست -### تست اپلیکیشن آزمون +### تست برنامه آزمون ```bash cd quiz-app @@ -114,84 +114,84 @@ npm run lint # بررسی مشکلات سبک کد npm run build # تأیید موفقیت ساخت ``` -### تست API بانک +### تست API بانکی ```bash cd 7-bank-project/api -npm run lint # بررسی مشکلات سبک کد -node server.js # بررسی راه‌اندازی سرور بدون خطاها +npm run lint # بررسی مسائل سبک کد +node server.js # تایید راه‌اندازی سرور بدون خطاها ``` ### رویکرد کلی تست -- این یک مخزن آموزشی بدون تست‌های خودکار جامع است -- تست دستی روی موارد زیر تمرکز دارد: - - نمونه کدها بدون خطا اجرا شوند - - لینک‌های مستندات به درستی کار کنند - - ساخت پروژه‌ها موفقیت‌آمیز باشد - - نمونه‌ها طبق بهترین شیوه‌ها باشند +- این یک مخزن آموزشی است و تست‌های خودکار جامع ندارد +- تست دستی تمرکز دارد روی: + - اجرای بدون خطا مثال‌های کد + - عملکرد صحیح لینک‌ها در مستندات + - ساخت پروژه‌ها به صورت موفقیت‌آمیز + - رعایت بهترین شیوه‌ها در مثال‌ها ### بررسی‌های قبل از ارسال -- اجرای `npm run lint` در دایرکتوری‌های حاوی package.json -- اطمینان از صحت لینک‌های مارک‌داون -- تست نمونه کدها در مرورگر یا Node.js -- بررسی حفظ ساختار ترجمه‌ها +- اجرای `npm run lint` در دایرکتوری‌هایی که package.json دارند +- اعتبارسنجی لینک‌های مارک‌داون +- تست مثال‌های کد در مرورگر یا Node.js +- اطمینان از حفظ ساختار ترجمه‌ها -## راهنمای سبک کد +## دستورالعمل‌های سبک کد -### جاوااسکریپت +### JavaScript -- استفاده از نگارش مدرن ES6+ -- پیروی از تنظیمات معتبر ESLint ارائه شده در پروژه‌ها -- استفاده از نام‌های متغیر و تابع معنادار برای وضوح آموزشی -- افزودن کامنت برای توضیح مفاهیم برای یادگیرندگان -- فرمت کردن با Prettier در صورت پیکربندی +- استفاده از نحو مدرن ES6+ +- پیروی از تنظیمات ESLint موجود در پروژه‌ها +- نام‌گذاری متغیرها و توابع معنادار برای آموزش بهتر +- افزودن کامنت جهت توضیح مفاهیم برای یادگیرندگان +- فرمت کردن با Prettier در صورت تنظیم بودن ### HTML/CSS -- استفاده از عناصر معنایی HTML5 -- اصول طراحی واکنش‌گرا -- قراردادهای نامگذاری کلاس‌های واضح -- کامنت‌های توضیح تکنیک‌های CSS برای یادگیرندگان +- استفاده از المان‌های معنایی HTML5 +- اصول طراحی واکنش‌گرا +- شیوه نام‌گذاری کلاس‌ها به صورت واضح +- کامنت‌های توضیحی روش‌های CSS برای یادگیرندگان ### پایتون -- رعایت دستورالعمل‌های استایل PEP 8 -- نمونه کدهای واضح و آموزشی -- استفاده از Type hints در صورت مفید بودن برای یادگیری +- پیروی از دستورالعمل‌های سبک PEP 8 +- مثال‌های کد واضح و آموزشی +- استفاده از نوع‌دهی در مواقع لازم برای یادگیری ### مستندات مارک‌داون -- سلسله مراتب واضح عناوین -- بلوک‌های کد با مشخص کردن زبان -- لینک به منابع اضافی -- تصاویر و اسکرین‌شات‌ها در دایرکتوری `images/` -- متن جایگزین برای تصاویر جهت دسترسی بهتر +- سلسله مراتب شفاف عناوین +- بلاک کد با مشخص کردن زبان +- لینک به منابع اضافی +- تصاویر و اسکرین‌شات‌ها در دایرکتوری `images/` +- متن جایگزین برای تصاویر جهت دسترسی‌پذیری ### سازماندهی فایل‌ها -- درس‌ها به صورت شماره‌گذاری پشت سر هم (مثل 1-getting-started-lessons، 2-js-basics، و غیره) -- هر پروژه دارای پوشه `solution/` و اغلب `start/` یا `your-work/` -- تصاویر در فولدرهای مخصوص هر درس در `images/` -- ترجمه‌ها در ساختار `translations/{language-code}/` +- نام‌گذاری درس‌ها به صورت عددی متوالی (1-getting-started-lessons، 2-js-basics و غیره) +- هر پروژه شامل پوشه‌های `solution/` و معمولاً `start/` یا `your-work/` +- تصاویر در پوشه‌های خاص هر درس واقع در `images/` ذخیره می‌شوند +- ترجمه‌ها در ساختار `translations/{language-code}/` قرار دارند ## ساخت و استقرار -### استقرار اپلیکیشن آزمون (Azure Static Web Apps) +### استقرار برنامه آزمون (Azure Static Web Apps) -quiz-app برای استقرار در Azure Static Web Apps پیکربندی شده است: +برنامه quiz-app برای استقرار در Azure Static Web Apps پیکربندی شده است: ```bash cd quiz-app -npm run build # پوشه dist/ را ایجاد می‌کند -# هنگام push به شاخه main با استفاده از گردش کار GitHub Actions انتشار می‌دهد +npm run build # پوشه dist/ ایجاد می‌کند +# در هر بار پوش کردن به main با استفاده از گردش کار GitHub Actions مستقر می‌کند ``` -پیکربندی Azure Static Web Apps: -- **مکان اپلیکیشن**: `/quiz-app` -- **مکان خروجی**: `dist` -- **روند کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +پیکربندی Azure Static Web Apps: +- **مکان برنامه**: `/quiz-app` +- **مکان خروجی**: `dist` +- **جریان کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### تولید PDF مستندات @@ -200,7 +200,7 @@ npm install # نصب docsify-to-pdf npm run convert # تولید PDF از docs ``` -### مستندات Docsify +### مستندسازی Docsify ```bash npm install -g docsify-cli # نصب Docsify به صورت سراسری @@ -209,72 +209,74 @@ docsify serve # سرویس‌دهی در localhost:3000 ### ساخت‌های خاص پروژه -هر دایرکتوری پروژه ممکن است روند ساخت خاص خود را داشته باشد: -- پروژه‌های Vue: `npm run build` برای ایجاد بسته‌های تولیدی -- پروژه‌های استاتیک: بدون مرحله ساخت، فایل‌ها مستقیماً سرو می‌شوند +هر دایرکتوری ممکن است فرایند ساخت مخصوص به خود را داشته باشد: +- پروژه‌های Vue: اجرای `npm run build` برای تولید نسخه‌های نهایی +- پروژه‌های استاتیک: بدون گام ساخت، فایل‌ها مستقیماً سرو می‌شوند + +## دستورالعمل‌های Pull Request -## دستورالعمل‌های درخواست Pull Request +### قالب عنوان -### فرمت عنوان +از عناوین شفاف و توصیفی استفاده کنید که حوزه تغییر را مشخص کند: +- `[Quiz-app] افزودن آزمون جدید برای درس X` +- `[Lesson-3] اصلاح اشتباه تایپی در پروژه تراریوم` +- `[Translation] افزودن ترجمه اسپانیایی برای درس ۵` +- `[Docs] به‌روزرسانی دستورالعمل‌های راه‌اندازی` -از عناوین واضح و توصیفی استفاده کنید که حوزه تغییر را نشان می‌دهند: -- `[Quiz-app] افزودن آزمون جدید برای درس X` -- `[Lesson-3] اصلاح تایپو در پروژه تری‌ریم` -- `[Translation] افزودن ترجمه اسپانیایی برای درس 5` -- `[Docs] به‌روزرسانی دستورالعمل‌های راه‌اندازی` +### بررسی‌های مورد نیاز -### چک‌های مورد نیاز قبل از ارسال PR +قبل از ارسال PR: -1. **کیفیت کد**: - - اجرای `npm run lint` در دایرکتوری پروژه‌های مربوط - - رفع تمام خطاها و هشدارهای lint +1. **کیفیت کد**: + - اجرای `npm run lint` در دایرکتوری‌های مرتبط + - رفع تمامی خطاها و هشدارهای lint -2. **تایید ساخت**: - - اجرای `npm run build` در صورت نیاز - - اطمینان از عدم وجود خطای ساخت +2. **تأیید ساخت**: + - اجرای `npm run build` در صورت نیاز + - اطمینان از عدم وجود خطای ساخت -3. **اعتبارسنجی لینک‌ها**: - - تست تمام لینک‌های مارک‌داون - - اطمینان از کارکرد ارجاعات به تصاویر +3. **اعتبارسنجی لینک‌ها**: + - بررسی همه لینک‌های مارک‌داون + - اطمینان از کارکرد ارجاعات تصاویر -4. **بازبینی محتوا**: - - اصلاح املایی و گرامری - - اطمینان از درستی و آموزشی بودن نمونه‌های کد - - بررسی حفظ معنی در ترجمه‌ها +4. **بازبینی محتوا**: + - بازخوانی و بررسی املایی و دستوری + - اطمینان از صحیح و آموزشی بودن مثال‌های کد + - تضمین دقیق بودن ترجمه‌ها و حفظ معنی اصلی ### الزامات مشارکت -- تایید قرارداد مجوز مایکروسافت (چک خودکار در PR اول) -- پیروی از [کد رفتاری منبع باز مایکروسافت](https://opensource.microsoft.com/codeofconduct/) -- مشاهده [CONTRIBUTING.md](./CONTRIBUTING.md) برای راهنمایی‌های دقیق‌تر -- ارجاع شماره‌های Issue در توضیحات PR در صورت وجود +- موافقت با CLA مایکروسافت (بررسی خودکار در اولین PR) +- رعایت [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- مشاهده [CONTRIBUTING.md](./CONTRIBUTING.md) برای دستورالعمل‌های دقیق +- ارجاع به شماره مسائل در توضیحات PR در صورت وجود ### روند بازبینی -- PRها توسط نگه‌دارندگان و جامعه بررسی می‌شوند -- اولویت بر وضوح آموزشی است -- نمونه‌های کد باید بهترین شیوه‌های کنونی را دنبال کنند -- ترجمه‌ها برای دقت و تناسب فرهنگی بررسی می‌شوند +- PRها توسط نگهدارندگان و جامعه بازبینی می‌شوند +- وضوح آموزشی الویت دارد +- مثال‌های کد باید بهترین شیوه‌ها را دنبال کنند +- ترجمه‌ها برای دقت و انطباق فرهنگی بازبینی می‌شوند ## سیستم ترجمه ### ترجمه خودکار -- استفاده از GitHub Actions با روند کاری co-op-translator -- ترجمه به بیش از 50 زبان به صورت خودکار -- فایل‌های منبع در دایرکتوری‌های اصلی -- فایل‌های ترجمه شده در ساختار `translations/{language-code}/` +- استفاده از GitHub Actions با جریان کاری co-op-translator +- ترجمه خودکار به بیش از ۵۰ زبان +- فایل‌های منبع در دایرکتوری‌های اصلی +- فایل‌های ترجمه شده در `translations/{language-code}/` ### افزودن بهبودهای ترجمه دستی -1. فایل را در `translations/{language-code}/` پیدا کنید -2. بهبودها را با حفظ ساختار اعمال کنید -3. اطمینان از عملکرد صحیح نمونه کدها -4. تست محتوای آزمون محلی‌شده در صورت وجود +1. ورود به فایل در `translations/{language-code}/` +2. اعمال بهبودها با حفظ ساختار +3. اطمینان از عملکرد صحیح مثال‌های کد +4. تست هر محتوای آزمون محلی شده ### فراداده ترجمه -فایل‌های ترجمه شامل هدر فراداده هستند: +فایل‌های ترجمه شده شامل هدر فراداده: ```markdown ``` -## اشکال‌زدایی و رفع مشکلات +## عیب‌یابی و رفع مشکلات -### مشکلات رایج +### مشکلات متداول -**اپلیکیشن آزمون راه‌اندازی نمی‌شود**: -- نسخه Node.js را بررسی کنید (نسخه 14+ توصیه می‌شود) -- پوشه‌های `node_modules` و فایل `package-lock.json` را حذف و مجدد `npm install` اجرا کنید -- بررسی تداخل پورت‌ها (پیش‌فرض: Vite از پورت 5173 استفاده می‌کند) +**برنامه آزمون اجرا نمی‌شود**: +- نسخه Node.js را بررسی کنید (v14+ توصیه شده) +- حذف `node_modules` و `package-lock.json`، سپس اجرای دوباره `npm install` +- بررسی تداخل پورت‌ها (پیش‌فرض: Vite از پورت 5173 استفاده می‌کند) -**سرور API استارت نمی‌خورد**: -- اطمینان از حداقل نسخه Node.js (node >= 10) -- چک کنید پورت اشغال نشده باشد -- اطمینان از نصب تمام وابستگی‌ها با `npm install` +**سرور API اجرا نمی‌شود**: +- اطمینان از حداقل نسخه Node.js (node >=10) +- بررسی استفاده بودن پورت +- اطمینان از نصب همه وابستگی‌ها با `npm install` -**افزونه مرورگر بارگیری نمی‌شود**: -- بررسی فرمت صحیح `manifest.json` -- کنسول مرورگر برای خطاها را چک کنید -- دستورالعمل نصب افزونه مربوط به مرورگر را دنبال کنید +**افزونه مرورگر لود نمی‌شود**: +- بررسی صحت قالب manifest.json +- چک کردن کنسول مرورگر برای خطاها +- دنبال کردن دستورالعمل نصب افزونه مرورگر خاص -**مشکل در پروژه چت پایتون**: -- اطمینان از نصب بسته OpenAI: `pip install openai` -- چک کنید متغیر محیطی GITHUB_TOKEN تنظیم شده باشد -- بررسی دسترسی مدل‌های گیت‌هاب +**مشکلات پروژه چت پایتون**: +- اطمینان از نصب پکیج OpenAI: `pip install openai` +- بررسی تنظیم متغیر محیطی GITHUB_TOKEN +- بررسی مجوزهای دسترسی به مدل‌های GitHub -**Docsify مستندات را ارائه نمی‌دهد**: -- نصب docsify-cli به صورت جهانی: `npm install -g docsify-cli` -- اجرا از دایرکتوری ریشه مخزن -- بررسی وجود فایل `docs/_sidebar.md` +**مستندات Docsify بارگیری نمی‌شود**: +- نصب docsify-cli به صورت جهانی: `npm install -g docsify-cli` +- اجرای دستور از شاخه ریشه مخزن +- اطمینان از وجود فایل `docs/_sidebar.md` ### نکات محیط توسعه -- استفاده از VS Code با افزونه Live Server برای پروژه‌های HTML -- نصب افزونه‌های ESLint و Prettier برای فرمت بندی یکنواخت -- استفاده از DevTools مرورگر برای اشکال‌زدایی جاوااسکریپت -- برای پروژه‌های Vue، نصب افزونه Vue DevTools مرورگر +- استفاده از VS Code با افزونه Live Server برای پروژه‌های HTML +- نصب افزونه‌های ESLint و Prettier برای قالب‌بندی یکنواخت +- استفاده از DevTools مرورگر برای اشکال‌زدایی JavaScript +- نصب افزونه Vue DevTools برای پروژه‌های Vue ### ملاحظات عملکرد -- تعداد زیاد فایل‌های ترجمه شده (50+ زبان) باعث بزرگی کلون کامل می‌شود -- از کلون سطحی در صورت کار فقط با محتوا استفاده کنید: `git clone --depth 1` -- در هنگام کار روی محتوای انگلیسی ترجمه‌ها را از جستجوها حذف کنید -- روند ساخت در اولین اجرا ممکن است کند باشد (npm install، ساخت Vite) +- تعداد زیاد فایل‌های ترجمه شده (بیش از ۵۰ زبان) باعث بزرگ شدن کلون کامل می‌شود +- استفاده از کلون کم‌عمق در صورت کار صرفاً روی محتوا: `git clone --depth 1` +- حذف ترجمه‌ها از جستجو هنگام کار روی محتوای انگلیسی +- فرایندهای ساخت ممکن است در اجرای اولیه کند باشند (npm install، ساخت Vite) ## ملاحظات امنیتی ### متغیرهای محیطی -- کلیدهای API هرگز نباید در مخزن کامیت شوند -- استفاده از فایل‌های `.env` (که در `.gitignore` هستند) -- مستندسازی متغیرهای محیطی مورد نیاز در README پروژه‌ها +- کلیدهای API هرگز نباید در مخزن کامیت شوند +- استفاده از فایل‌های `.env` (در `.gitignore` موجود است) +- مستندسازی متغیرهای محیطی مورد نیاز در README پروژه‌ها ### پروژه‌های پایتون -- استفاده از محیط‌های مجازی: `python -m venv venv` -- به‌روزرسانی وابستگی‌ها -- توکن‌های گیت‌هاب باید حداقل مجوزهای لازم را داشته باشند +- استفاده از محیط‌های مجازی: `python -m venv venv` +- به‌روزرسانی مداوم وابستگی‌ها +- توکن‌های GitHub باید حداقل مجوزهای لازم را داشته باشند -### دسترسی به مدل‌های گیت‌هاب +### دسترسی به مدل‌های GitHub -- توکن‌های دسترسی شخصی (PAT) برای مدل‌های گیت‌هاب لازم است -- توکن‌ها باید به عنوان متغیرهای محیطی ذخیره شوند -- هرگز توکن‌ها یا اطلاعات ورود را کامیت نکنید +- توکن‌های Personal Access Token (PAT) برای مدل‌های GitHub لازم است +- توکن‌ها باید به صورت متغیر محیطی ذخیره شوند +- هرگز توکن‌ها یا اطلاعات اعتبار را کامیت نکنید ## یادداشت‌های اضافی -### مخاطب هدف +### مخاطبان هدف -- مبتدیان کامل در توسعه وب -- دانشجویان و یادگیرندگان خودآموز -- معلمانی که از دوره در کلاس استفاده می‌کنند -- محتوای طراحی شده برای دسترسی‌پذیری و ارتقاء مهارت تدریجی +- مبتدیان کامل در توسعه وب +- دانش‌آموزان و یادگیرندگان خودآموز +- معلمانی که از این دوره در کلاس‌های درس استفاده می‌کنند +- محتوای طراحی شده برای دسترسی‌پذیری و ساخت مهارت تدریجی ### فلسفه آموزشی -- رویکرد یادگیری مبتنی بر پروژه -- بررسی دانش مکرر (آزمون‌ها) -- تمرینات کدنویسی عملی -- مثال‌های کاربردی دنیای واقعی -- تاکید بر اصول پایه قبل از فریم‌ورک‌ها +- رویکرد یادگیری پروژه محور +- بررسی‌های دانش مکرر (آزمون‌ها) +- تمرین‌های عملی کد نویسی +- مثال‌های کاربردی دنیای واقعی +- تمرکز بر اصول قبل از فریم‌ورک‌ها ### نگهداری مخزن -- جامعه فعال از یادگیرندگان و مشارکت‌کنندگان -- به‌روزرسانی منظم وابستگی‌ها و محتوا -- ارجاعات و بحث‌ها توسط نگه‌دارندگان پایش می‌شود -- به‌روزرسانی‌های ترجمه به صورت خودکار توسط GitHub Actions +- جامعه فعال از یادگیرندگان و مشارکت‌کنندگان +- به‌روزرسانی‌های منظم وابستگی‌ها و محتوا +- نظارت نگهدارندگان بر مسائل و بحث‌ها +- به‌روزرسانی ترجمه‌ها به صورت خودکار از طریق GitHub Actions ### منابع مرتبط -- [ماژول‌های Microsoft Learn](https://docs.microsoft.com/learn/) -- [منابع Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) توصیه شده برای یادگیرندگان -- دوره‌های اضافی: AI مولد، علم داده، یادگیری ماشین، برنامۀ IoT در دسترس +- [ماژول‌های Microsoft Learn](https://docs.microsoft.com/learn/) +- [منابع Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) توصیه شده برای یادگیرندگان +- دوره‌های اضافی: هوش مصنوعی مولد، علوم داده، یادگیری ماشین، دوره‌های IoT موجود -### کار با پروژه‌های خاص +### کار با پروژه‌های مشخص -برای دستورالعمل‌های دقیق پروژه‌های فردی، به فایل‌های README مراجعه کنید در: -- `quiz-app/README.md` - اپلیکیشن آزمون Vue 3 -- `7-bank-project/README.md` - برنامه بانکداری با احراز هویت -- `5-browser-extension/README.md` - توسعه افزونه مرورگر -- `6-space-game/README.md` - توسعه بازی مبتنی بر Canvas -- `9-chat-project/README.md` - پروژه دستیار چت AI +برای دستورالعمل‌های دقیق درباره پروژه‌های فردی به فایل README مراجعه کنید: +- `quiz-app/README.md` - برنامه آزمون Vue 3 +- `7-bank-project/README.md` - برنامه بانکی با احراز هویت +- `5-browser-extension/README.md` - توسعه افزونه مرورگر +- `6-space-game/README.md` - توسعه بازی مبتنی بر Canvas +- `9-chat-project/README.md` - پروژه دستیار چت هوش مصنوعی -### ساختار Monorepo +### ساختار مونو رپو -اگرچه این یک monorepo سنتی نیست، این مخزن شامل چندین پروژه مستقل است: -- هر درس به صورت خودکفا است -- پروژه‌ها وابستگی مشترک ندارند -- روی پروژه‌های فردی بدون تأثیرگذاری روی دیگران کار کنید -- برای تجربه کامل دوره، کل مخزن را کلون کنید +اگرچه این مخزن یک مونو رپو سنتی نیست، شامل چندین پروژه مستقل است: +- هر درس به صورت جداگانه مستقل است +- پروژه‌ها وابستگی مشترک ندارند +- روی پروژه‌های فردی بدون تأثیر بر دیگران کار کنید +- کلون کامل مخزن برای تجربه کامل دوره لازم است --- -**سلب مسؤولیت**: -این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان بومی خود باید به‌عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچگونه سوءتفاهم یا برداشت نادرستی که از استفاده این ترجمه ناشی شود، نمی‌باشیم. +**سلب مسئولیت**: +این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادقتی‌هایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سو تفاهم یا برداشت نادرستی که ناشی از استفاده از این ترجمه باشد، نیستیم. \ No newline at end of file diff --git a/translations/fa/README.md b/translations/fa/README.md index 8a82c7418..5c49284d6 100644 --- a/translations/fa/README.md +++ b/translations/fa/README.md @@ -12,199 +12,211 @@ # توسعه وب برای مبتدیان - یک برنامه درسی -اصول توسعه وب را با دوره جامع ۱۲ هفته‌ای ما توسط مایکروسافت کلود ادوکیتس بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML می‌پردازد از طریق پروژه‌های عملی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی. با آزمون‌ها، بحث‌ها و تکالیف عملی درگیر شوید. مهارت‌های خود را تقویت کنید و با روش آموزش مبتنی بر پروژه مؤثر، دانش خود را بهینه کنید. سفر برنامه‌نویسی خود را امروز آغاز کنید! +اصول پایه توسعه وب را با دوره جامع ۱۲ هفته‌ای ما توسط مدافعان مایکروسافت کلود بیاموزید. هر یک از ۲۴ درس به صورت عملی به جاوااسکریپت، CSS و HTML می‌پردازد، با پروژه‌های کاربردی مانند تراریوم‌ها، افزونه‌های مرورگر و بازی‌های فضایی. در آزمون‌ها، بحث‌ها و وظایف عملی شرکت کنید. مهارت‌های خود را افزایش دهید و حفظ دانش خود را با روش تدریس پروژه‌محور مؤثر ما بهینه‌سازی کنید. سفر کدنویسی خود را امروز آغاز کنید! -به انجمن دیسکورد Azure AI Foundry بپیوندید +به جامعه دیسکورد Azure AI Foundry بپیوندید [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -برای شروع استفاده از این منابع، این مراحل را دنبال کنید: -1. **فورک کردن مخزن**: کلیک کنید بر روی [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +برای شروع استفاده از این منابع، مراحل زیر را دنبال کنید: +1. **فورک کردن مخزن**: کلیک کنید بر [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**به دیسکورد Azure AI Foundry بپیوندید و با متخصصان و توسعه‌دهندگان دیگر دیدار کنید**](https://discord.com/invite/ByRwuEEgH4) +3. [**به دیسکورد Azure AI Foundry بپیوندید و با کارشناسان و توسعه‌دهندگان همدل ملاقات کنید**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 پشتیبانی چندزبانه +### 🌐 پشتیبانی چند زبانه -#### پشتیبانی شده از طریق GitHub Action (خودکار و همیشه به‌روز) +#### پشتیبانی شده توسط GitHub Action (خودکار و همیشه به‌روز) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](./README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **ترجیح می‌دهید به صورت محلی کلون کنید؟** - -> این مخزن شامل بیش از ۵۰ ترجمه زبان است که به‌طور قابل توجهی حجم دانلود را افزایش می‌دهد. برای کلون بدون ترجمه‌ها از چک‌اوت جزئی استفاده کنید: +> **ترجیح می‌دهید محلی کلون کنید؟** +> +> این مخزن شامل بیش از ۵۰ ترجمه زبانی است که سایز دانلود را به طور قابل توجهی افزایش می‌دهد. برای کلون بدون ترجمه‌ها، از sparse checkout استفاده کنید: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> این به شما همه چیز لازم برای کامل کردن دوره را با دانلود بسیار سریعتر می‌دهد. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> این به شما همه چیز مورد نیاز برای اتمام دوره را همراه با دانلود بسیار سریعتر می‌دهد. -**اگر مایل هستید زبان‌های ترجمه اضافی پشتیبانی شوند، این زبان‌ها در [اینجا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) فهرست شده‌اند** +**اگر مایلید زبان‌های ترجمه اضافی پشتیبانی شود، آنها در این آدرس لیست شده‌اند [اینجا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _آیا دانشجو هستید؟_ +#### 🧑‍🎓 _آیا دانش‌آموز هستید؟_ -از [**صفحه مرکز دانشجویی**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) دیدن کنید، جایی که منابع مبتدی، بسته‌های دانشجویی و حتی راه‌هایی برای دریافت رایگان کد تخفیف گواهی را پیدا خواهید کرد. این صفحه‌ای است که باید ذخیره کنید و هر از گاهی بررسی کنید چون محتوای آن ماهانه به روز می‌شود. +به صفحه [**مرکز دانش‌آموزان**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) مراجعه کنید که در آن منابع مبتدی، بسته‌های دانش‌آموزی و حتی راه‌هایی برای دریافت کوپن گواهی‌نامه رایگان پیدا خواهید کرد. این صفحه‌ای است که می‌خواهید آن را نشانک گذاری کنید و گهگاه چک کنید چون محتوای آن ماهانه به‌روزرسانی می‌شود. -### 📣 اعلامیه - چالش‌های جدید حالت GitHub Copilot Agent برای تکمیل! +### 📣 اعلامیه - چالش‌های جدید GitHub Copilot Agent Mode برای تکمیل! -چالش جدید اضافه شده است، در اکثر فصل‌ها دنبال "چالش GitHub Copilot Agent 🚀" باشید. این چالش جدیدی است برای شما که با استفاده از GitHub Copilot و حالت Agent تکمیل کنید. اگر قبلاً از حالت Agent استفاده نکرده‌اید، این حالت نه تنها قادر به تولید متن است بلکه می‌تواند فایل بسازد و ویرایش کند، دستورات اجرا کند و بیشتر. +چالش جدید اضافه شده است، به دنبال "چالش GitHub Copilot Agent 🚀" در اکثر فصل‌ها باشید. این یک چالش جدید برای شماست تا با استفاده از GitHub Copilot و حالت Agent آن را کامل کنید. اگر قبلاً از حالت Agent استفاده نکرده‌اید، این حالت قادر است نه تنها متن تولید کند بلکه می‌تواند فایل ایجاد و ویرایش کند، دستورها را اجرا کند و بیشتر. -### 📣 اعلامیه - _پروژه جدید برای ساخت با استفاده از هوش مصنوعی مولد_ +### 📣 اعلامیه - _پروژه جدیدی برای ساخت با استفاده از هوش مصنوعی مولد_ -پروژه دستیار هوش مصنوعی جدید همین الان اضافه شده است، آن را بررسی کنید [پروژه](./9-chat-project/README.md) +پروژه دستیار هوش مصنوعی جدید به تازگی اضافه شده است، آن را بررسی کنید [پروژه](./9-chat-project/README.md) -### 📣 اعلامیه - _برنامه درسی جدید_ درباره هوش مصنوعی مولد برای جاوااسکریپت به تازگی منتشر شده است +### 📣 اعلامیه - _برنامه درسی جدید_ برای هوش مصنوعی مولد در جاوااسکریپت به تازگی منتشر شده است برنامه درسی جدید هوش مصنوعی مولد ما را از دست ندهید! -برای شروع به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید! +برای شروع به آدرس [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید! ![Background](../../translated_images/fa/background.148a8d43afde5730.webp) -- دروس شامل همه چیز از اصول تا RAG. +- درس‌هایی که از مبانی تا RAG را پوشش می‌دهند. - تعامل با شخصیت‌های تاریخی با استفاده از GenAI و اپلیکیشن همراه ما. -- روایت سرگرم‌کننده و جذاب، شما سفر در زمان خواهید داشت! +- روایت سرگرم‌کننده و جذاب، شما به سفر در زمان خواهید رفت! ![character](../../translated_images/fa/character.5c0dd8e067ffd693.webp) -هر درس شامل یک تکلیف برای کامل کردن، یک آزمون دانش و یک چالش برای راهنمایی شما در یادگیری موضوعاتی مانند: -- درخواست و مهندسی درخواست‌ها -- تولید اپلیکیشن‌های متنی و تصویری -- اپلیکیشن‌های جستجو +هر درس شامل یک تکلیف برای تکمیل، یک تست دانش و یک چالش برای راهنمایی شما در یادگیری موضوعاتی مانند: +- پرامپت و مهندسی پرامپت +- تولید برنامه‌های متن و تصویر +- برنامه‌های جستجو -برای شروع به [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید! +برای شروع به آدرس [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) مراجعه کنید! ## 🌱 شروع به کار -> **معلمان**، ما [چند پیشنهاد](for-teachers.md) برای استفاده از این برنامه درسی تهیه کرده‌ایم. ما مشتاق دریافت بازخورد شما [در انجمن بحث و گفتگو](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) هستیم! +> **معلمان**، ما [برخی پیشنهادات](for-teachers.md) برای چگونگی استفاده از این برنامه درسی ارائه کرده‌ایم. ما مشتاقانه منتظر بازخورد شما [در انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) هستیم! -**[دانش‌آموزان](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، برای هر درس، با یک آزمون قبل از کلاس شروع کنید و سپس مطالب درس را مطالعه کنید، فعالیت‌های مختلف را انجام دهید و درک خود را با آزمون پس از کلاس بسنجید. +**[یادگیرندگان](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، برای هر درس، با یک آزمون قبل از درس شروع کنید و سپس به خواندن مطالب درس بپردازید، فعالیت‌های مختلف را انجام دهید و در پایان در آزمون بعد از درس دانش خود را بسنجید. -برای ارتقای تجربه یادگیری خود، با همکلاسی‌هایتان برای انجام پروژه‌ها همکاری کنید! مشارکت در بحث‌ها در [انجمن بحث و گفتگو](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) تشویق می‌شود و تیم ناظران ما آماده پاسخگویی به سوالات شما خواهند بود. +برای بهبود تجربه یادگیری خود، با هم‌کلاسان‌تان به همکاری در پروژه‌ها بپردازید! بحث و گفتگو در [انجمن بحث](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) تشویق می‌شود که تیمی از ناظران ما برای پاسخ به سوالات شما حضور دارند. -برای ادامه تحصیل، به شدت پیشنهاد می‌کنیم مواد آموزشی بیشتر را در [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) کاوش کنید. +برای گسترش دانش خود، ما قویاً توصیه می‌کنیم که [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) را برای منابع مطالعاتی اضافی بررسی کنید. ### 📋 راه‌اندازی محیط کاری شما -این برنامه درسی یک محیط توسعه آماده دارد! هنگام شروع می‌توانید انتخاب کنید که دوره را در یک [Codespace](https://github.com/features/codespaces/) (_یک محیط مبتنی بر مرورگر و بدون نیاز به نصب_) یا به صورت محلی روی کامپیوتر خود با استفاده از یک ویرایشگر متن مانند [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) اجرا کنید. +این برنامه درسی دارای محیط توسعه آماده به کار است! با شروع، می‌توانید انتخاب کنید که در [Codespace](https://github.com/features/codespaces/) (_یک محیط مبتنی بر مرورگر بدون نیاز به نصب_) یا به صورت محلی روی کامپیوتر خود با استفاده از یک ویرایشگر متن مانند [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کار کنید. #### ایجاد مخزن خود -برای اینکه به راحتی بتوانید کار خود را ذخیره کنید، توصیه می‌شود یک نسخه از این مخزن را ایجاد کنید. می‌توانید این کار را با کلیک روی دکمه **Use this template** در بالای صفحه انجام دهید. این یک مخزن جدید در حساب گیت‌هاب شما با کپی برنامه درسی ایجاد می‌کند. +برای این که راحت‌تر کارهای خود را ذخیره کنید، توصیه می‌شود نسخه‌ای از این مخزن را ایجاد کنید. می‌توانید این کار را با کلیک بر روی دکمه **Use this template** در بالای صفحه انجام دهید. این کار یک مخزن جدید در حساب گیت‌هاب شما با نسخه‌ای از برنامه درسی ایجاد می‌کند. مراحل زیر را دنبال کنید: -1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالای سمت راست این صفحه کلیک کنید. +1. **فورک کردن مخزن**: روی دکمه "Fork" در گوشه بالا سمت راست این صفحه کلیک کنید. 2. **کلون کردن مخزن**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### اجرای برنامه درسی در یک Codespace +#### اجرای برنامه درسی در Codespace -در نسخه کپی شده مخزن که ایجاد کرده‌اید، دکمه **Code** را کلیک کرده و **Open with Codespaces** را انتخاب کنید. این یک Codespace جدید برای کار ایجاد خواهد کرد. +در نسخه‌ای از این مخزن که ایجاد کرده‌اید، دکمه **Code** را کلیک کرده و گزینه **Open with Codespaces** را انتخاب کنید. این برای شما یک Codespace جدید ایجاد می‌کند. ![Codespace](../../translated_images/fa/createcodespace.0238bbf4d7a8d955.webp) -#### اجرای برنامه به صورت محلی روی کامپیوتر خود - -برای اجرای این برنامه روی کامپیوترتان به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای کار](../../1-getting-started-lessons/1-intro-to-programming-languages)، شما را از طریق گزینه‌های مختلف برای هر یک از این ابزارها راهنمایی می‌کند تا بهترین گزینه برای خود را انتخاب کنید. - -توصیه ما استفاده از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر است که دارای [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخلی نیز می‌باشد. می‌توانید Visual Studio Code را از [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید. +#### اجرای برنامه درسی به صورت محلی روی کامپیوتر +برای اجرای این برنامه درسی به صورت محلی روی کامپیوتر خود، به یک ویرایشگر متن، یک مرورگر و یک ابزار خط فرمان نیاز دارید. اولین درس ما، [مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مورد استفاده](../../1-getting-started-lessons/1-intro-to-programming-languages) شما را با گزینه‌های مختلف این ابزارها آشنا می‌کند تا بتوانید بهترین‌ها را انتخاب کنید. -1. مخزن خود را به کامپیوترتان کلون کنید. می‌توانید این کار را با کلیک روی دکمه **Code** و کپی کردن URL انجام دهید: +توصیه ما استفاده از [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) به عنوان ویرایشگر است که همچنین یک [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخلی دارد. می‌توانید Visual Studio Code را از [اینجا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) دانلود کنید. +1. مخزن خود را روی کامپیوترتان کلون کنید. می‌توانید این کار را با کلیک روی دکمه **Code** و کپی کردن آدرس URL انجام دهید: [CodeSpace](./images/createcodespace.png) -سپس، درون [ترمینال](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) در [ویژوال استودیو کد](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و دستور زیر را اجرا کنید، جایگزین `` با آدرسی که همین حالا کپی کردید: + + سپس، درون [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) در [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) باز کنید و فرمان زیر را اجرا کنید، به جای `` آدرسی که تازه کپی کرده‌اید را جایگزین کنید: ```bash git clone ``` - -۲. پوشه را در ویژوال استودیو کد باز کنید. می‌توانید این کار را با کلیک روی **File** > **Open Folder** و انتخاب پوشه‌ای که همین حالا کلون کرده‌اید، انجام دهید. -> افزونه‌های پیشنهادی ویژوال استودیو کد: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیش‌نمایش صفحات HTML در ویژوال استودیو کد -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به شما در نوشتن سریع‌تر کد +2. پوشه را در Visual Studio Code باز کنید. می‌توانید این کار را با کلیک روی **File** > **Open Folder** انجام داده و پوشه‌ای را که تازه کلون کرده‌اید انتخاب کنید. + + +> افزونه‌های پیشنهادی Visual Studio Code: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - برای پیش‌نمایش صفحات HTML درون Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - برای کمک به نوشتن کد سریع‌تر ## 📂 هر درس شامل: -- یادداشت اختیاری -- ویدئوی مکمل اختیاری -- آزمون گرم‌کننده پیش از درس -- درس کتبی -- برای درس‌های مبتنی بر پروژه، راهنمای گام‌به‌گام برای ساخت پروژه -- بررسی دانش -- یک چالش -- مطالعه مکمل -- تمرین +- طرح اولیه اختیاری (sketchnote) +- ویدئوی کمکی اختیاری +- آزمون گرم‌کننده پیش از درس +- درس کتبی +- برای درس‌های مبتنی بر پروژه، راهنماهای گام به گام ساخت پروژه +- بررسی‌های دانش +- یک چالش +- مطالعه تکمیلی +- تکلیف - [آزمون پس از درس](https://ff-quizzes.netlify.app/web/) -> **یادداشتی درباره آزمون‌ها**: تمام آزمون‌ها در پوشه Quiz-app قرار دارند، مجموعاً ۴۸ آزمون هر کدام شامل سه سوال. آنها در [اینجا](https://ff-quizzes.netlify.app/web/) قابل دسترسی هستند؛ برنامه آزمون را می‌توان به صورت محلی اجرا کرد یا در Azure مستقر نمود؛ دستورالعمل‌ها را در پوشه `quiz-app` دنبال کنید. +> **نکته‌ای درباره آزمون‌ها**: همه آزمون‌ها در پوشه Quiz-app قرار دارند، در مجموع ۴۸ آزمون با هر کدام شامل سه سوال. آن‌ها قابل دسترس [در اینجا](https://ff-quizzes.netlify.app/web/) هستند و می‌توان اپلیکیشن آزمون را به صورت محلی اجرا کرد یا در Azure مستقر نمود؛ دستورالعمل‌ها در پوشه `quiz-app` آمده است. ## 🗃️ درس‌ها -| | نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده | -| :-: | :----------------------------------------------------: | :------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| ۰۱ | شروع به کار | مقدمه‌ای بر برنامه‌نویسی و ابزارهای مرتبط | یادگیری اصول پایه اکثر زبان‌های برنامه‌نویسی و نرم‌افزاری که به توسعه‌دهندگان حرفه‌ای کمک می‌کند وظایف خود را انجام دهند | [مقدمه بر زبان‌های برنامه‌نویسی و ابزارها](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| ۰۲ | شروع به کار | اصول گیت‌هاب، شامل کار تیمی | نحوه استفاده از گیت‌هاب در پروژه خود، نحوه همکاری با دیگران روی یک کد | [مقدمه بر گیت‌هاب](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| ۰۳ | شروع به کار | دسترسی‌پذیری | یادگیری اصول دسترسی‌پذیری وب | [مبانی دسترسی‌پذیری](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| ۰۴ | مفاهیم پایه JS | انواع داده در جاوااسکریپت | اصول انواع داده در جاوااسکریپت | [انواع داده](./2-js-basics/1-data-types/README.md) | Jasmine | -| ۰۵ | مفاهیم پایه JS | توابع و متدها | آموزش توابع و متدها برای مدیریت جریان منطق برنامه | [توابع و متدها](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| ۰۶ | مفاهیم پایه JS | گرفتن تصمیم با JS | یادگیری ایجاد شرایط در کد با استفاده از روش‌های تصمیم‌گیری | [گرفتن تصمیم](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| ۰۷ | مفاهیم پایه JS | آرایه‌ها و حلقه‌ها | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در جاوااسکریپت | [آرایه‌ها و حلقه‌ها](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| ۰۸ | [تراریوم](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد یک تراریوم آنلاین، تمرکز بر ساختار صفحه | [مقدمه‌ای بر HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| ۰۹ | [تراریوم](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای استایل دهی تراریوم آنلاین، تمرکز بر اصول CSS و ساخت صفحه واکنش‌گرا | [مقدمه‌ای بر CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| ۱۰ | [تراریوم](./3-terrarium/solution/README.md) | کلوزرهای جاوااسکریپت، دستکاری DOM | ساخت جاوااسکریپت برای ایجاد رابط کشیدن و رها کردن در تراریوم، تمرکز بر کلوزرها و دستکاری DOM | [کلوزرهای جاوااسکریپت، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| ۱۱ | [بازی تایپ](./4-typing-game/solution/README.md) | ساخت بازی تایپ | یادگیری استفاده از رویدادهای کیبورد برای مدیریت منطق برنامه جاوااسکریپت | [برنامه‌نویسی رویداد محور](./4-typing-game/typing-game/README.md) | Christopher | -| ۱۲ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری طرز کار مرورگرها، تاریخچه آنها و ساختار اولیه افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | Jen | -| ۱۳ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در ذخیره محلی | ساخت المان‌های جاوااسکریپت در افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیره شده در ذخیره محلی | [APIها، فرم‌ها و ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| ۱۴ | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | فرایندهای پس‌زمینه در مرورگر، بهینه‌سازی وب | استفاده از فرایندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه؛ یادگیری درباره عملکرد وب و بهینه‌سازی‌های مربوطه | [فرایندهای پس‌زمینه و عملکرد](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| ۱۵ | [بازی فضایی](./6-space-game/solution/README.md) | توسعه پیشرفته بازی با جاوااسکریپت | یادگیری وراثت با استفاده از کلاس‌ها و ترکیب و الگوی Pub/Sub، برای آمادگی ساخت بازی | [مقدمه‌ای بر توسعه پیشرفته بازی](./6-space-game/1-introduction/README.md) | Chris | -| ۱۶ | [بازی فضایی](./6-space-game/solution/README.md) | رسم روی بوم | آشنایی با API بوم که برای رسم اجزا روی صفحه استفاده می‌شود | [رسم روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| ۱۷ | [بازی فضایی](./6-space-game/solution/README.md) | حرکت دادن اجزا روی صفحه | کشف نحوه حرکت اجزا با استفاده از مختصات کارتزین و API بوم | [حرکت دادن اجزا](./6-space-game/3-moving-elements-around/README.md) | Chris | -| ۱۸ | [بازی فضایی](./6-space-game/solution/README.md) | تشخیص برخورد | ایجاد برخورد بین اجزا و واکنش به هم با کلیدهای فشرده شده و فراهم‌سازی عملکرد خنک‌کننده برای تضمین اجرای صحیح بازی | [تشخیص برخورد](./6-space-game/4-collision-detection/README.md) | Chris | -| ۱۹ | [بازی فضایی](./6-space-game/solution/README.md) | نگهداری امتیاز | انجام محاسبات ریاضی براساس وضعیت و عملکرد بازی | [نگهداری امتیاز](./6-space-game/5-keeping-score/README.md) | Chris | -| ۲۰ | [بازی فضایی](./6-space-game/solution/README.md) | پایان و راه‌اندازی مجدد بازی | آشنایی با پایان و راه‌اندازی مجدد بازی، شامل پاک‌سازی منابع و بازنشانی متغیرها | [شرط پایان](./6-space-game/6-end-condition/README.md) | Chris | -| ۲۱ | [اپ بانکداری](./7-bank-project/solution/README.md) | قالب‌ها و مسیرها در اپ وب | یادگیری ایجاد چارچوب معماری یک وب‌سایت چند صفحه‌ای با استفاده از مسیرها و قالب‌های HTML | [قالب‌ها و مسیرهای HTML](./7-bank-project/1-template-route/README.md) | Yohan | -| ۲۲ | [اپ بانکداری](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبت نام | یادگیری ساخت فرم‌ها و مدیریت اعتبارسنجی | [فرم‌ها](./7-bank-project/2-forms/README.md) | Yohan | -| ۲۳ | [اپ بانکداری](./7-bank-project/solution/README.md) | روش‌های واکشی و استفاده از داده | نحوه جریان داده‌ها در اپلیکیشن، نحوه واکشی، ذخیره‌سازی و حذف آنها | [داده‌ها](./7-bank-project/3-data/README.md) | Yohan | -| ۲۴ | [اپ بانکداری](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت | یادگیری اینکه اپ چگونه وضعیت را حفظ می‌کند و چطور می‌توان آن را به صورت برنامه‌ای مدیریت کرد | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | Yohan | -| ۲۵ | [کد مرورگر/وی‌اس‌کد](../../8-code-editor) | کار با وی‌اس‌کد | یادگیری استفاده از ویرایشگر کد | [استفاده از ویرایشگر کد وی‌اس‌کد](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| ۲۶ | [دستیارهای هوش مصنوعی](./9-chat-project/README.md) | کار با هوش مصنوعی | یادگیری ساخت دستیار هوش مصنوعی خود | [پروژه دستیار هوش مصنوعی](./9-chat-project/README.md) | Chris | - -## 🏫 روش تدریس - -برنامه آموزشی ما بر اساس دو اصل کلیدی آموزشی طراحی شده است: -* یادگیری مبتنی بر پروژه +| | نام پروژه | مفاهیم آموزش داده شده | اهداف یادگیری | درس مرتبط | نویسنده | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | شروع به کار | مقدمه‌ای بر برنامه‌نویسی و ابزارهای کار | یادگیری اصول پایه‌ای اکثر زبان‌های برنامه‌نویسی و نرم‌افزاری که به توسعه‌دهندگان حرفه‌ای در انجام کارشان کمک می‌کند | [مقدمه‌ای بر زبان‌ها و ابزارهای برنامه‌نویسی](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | شروع به کار | مبانی گیت‌هاب، شامل کار گروهی | چگونگی استفاده از گیت‌هاب در پروژه و همکاری با دیگران روی کد | [مقدمه‌ای بر گیت‌هاب](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | شروع به کار | دسترسی‌پذیری | فراگیری مبانی دسترسی‌پذیری وب | [مبانی دسترسی‌پذیری](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | مبانی JS | انواع داده در JavaScript | مبانی انواع داده در JavaScript | [انواع داده](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | مبانی JS | توابع و روش‌ها | آشنایی با توابع و روش‌ها برای مدیریت جریان منطقی برنامه | [توابع و روش‌ها](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | مبانی JS | گرفتن تصمیم با JS | یادگیری چگونگی ایجاد شرایط در کد با استفاده از روش‌های تصمیم‌گیری | [گرفتن تصمیم](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | مبانی JS | آرایه‌ها و حلقه‌ها | کار با داده‌ها با استفاده از آرایه‌ها و حلقه‌ها در JavaScript | [آرایه‌ها و حلقه‌ها](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [تراریوم](./3-terrarium/solution/README.md) | HTML در عمل | ساخت HTML برای ایجاد تراریوم آنلاین، تمرکز بر ساختار بندی صفحه | [مقدمه‌ای بر HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [تراریوم](./3-terrarium/solution/README.md) | CSS در عمل | ساخت CSS برای طراحی تراریوم آنلاین، تمرکز بر مبانی CSS شامل واکنش‌گرا کردن صفحه | [مقدمه‌ای بر CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [تراریوم](./3-terrarium/solution/README.md) | بسته‌های JavaScript، دستکاری DOM | ساخت جاوااسکریپت برای کارکرد تراریوم به صورت رابط کشیدن/رها کردن، تمرکز بر بسته‌ها و دستکاری DOM | [بسته‌های JavaScript، دستکاری DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [بازی تایپ](./4-typing-game/solution/README.md) | ساخت بازی تایپ | یادگیری استفاده از رویدادهای صفحه کلید برای هدایت منطق برنامه جاوااسکریپت | [برنامه‌نویسی رویدادمحور](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | کار با مرورگرها | یادگیری کارکرد مرورگرها، تاریخچه آن‌ها و راه‌اندازی اولیه افزونه مرورگر | [درباره مرورگرها](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی API و ذخیره متغیرها در local storage | ساخت عناصر جاوااسکریپت افزونه مرورگر برای فراخوانی API با استفاده از متغیرهای ذخیره شده در local storage | [APIها، فرم‌ها و ذخیره محلی](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [افزونه مرورگر سبز](./5-browser-extension/solution/README.md) | فرآیندهای پس‌زمینه در مرورگر، کارایی وب | استفاده از فرآیندهای پس‌زمینه مرورگر برای مدیریت آیکون افزونه؛ آشنایی با عملکرد وب و بهینه‌سازی‌هایی برای بهبود آن | [وظایف پس‌زمینه و کارایی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [بازی فضایی](./6-space-game/solution/README.md) | توسعه بازی پیشرفته‌تر با JavaScript | یادگیری وراثت با هر دو کلاس و ترکیب و الگوی Pub/Sub، برای آماده‌سازی ساخت بازی | [مقدمه‌ای بر توسعه بازی پیشرفته](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [بازی فضایی](./6-space-game/solution/README.md) | رسم روی بوم | آشنایی با API بوم (Canvas) برای رسم عناصر روی صفحه | [رسم روی بوم](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [بازی فضایی](./6-space-game/solution/README.md) | حرکت عناصر در صفحه نمایش | کشف چگونگی حرکت گرفتن عناصر با استفاده از مختصات کارتزین و API بوم | [حرکت دادن عناصر](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [بازی فضایی](./6-space-game/solution/README.md) | تشخیص برخورد | ایجاد برخورد و واکنش عناصر به یکدیگر با استفاده از فشار کلیدها و فراهم کردن عملکرد خنک‌کننده برای اطمینان از کارایی بازی | [تشخیص برخورد](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [بازی فضایی](./6-space-game/solution/README.md) | نگهداری امتیاز | انجام محاسبات ریاضی بر اساس وضعیت و عملکرد بازی | [نگهداری امتیاز](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [بازی فضایی](./6-space-game/solution/README.md) | پایان و شروع مجدد بازی | یادگیری پایان دادن و شروع مجدد بازی، شامل پاکسازی منابع و بازنشانی مقادیر متغیرها | [شرط پایان](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [اپ بانک](./7-bank-project/solution/README.md) | قالب‌ها و مسیرها در یک اپ وب | یادگیری ساخت اسکلت معماری وبسایت چندصفحه‌ای به کمک روتینگ و قالب‌های HTML | [قالب‌ها و مسیرها](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [اپ بانک](./7-bank-project/solution/README.md) | ساخت فرم ورود و ثبت‌نام | یادگیری ساخت فرم‌ها و مدیریت روال‌های اعتبارسنجی | [فرم‌ها](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [اپ بانک](./7-bank-project/solution/README.md) | روش‌های دریافت و استفاده از داده | جریان داده در برنامه، نحوه دریافت، ذخیره و حذف آن | [داده](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [اپ بانک](./7-bank-project/solution/README.md) | مفاهیم مدیریت وضعیت | یادگیری حفظ وضعیت برنامه و مدیریت برنامه‌ای آن | [مدیریت وضعیت](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [کد مرورگر/VScode](../../8-code-editor) | کار با VScode | یادگیری استفاده از ویرایشگر کد | [استفاده از ویرایشگر کد VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [دستیارهای هوش مصنوعی](./9-chat-project/README.md) | کار با هوش مصنوعی | یادگیری ساخت دستیار هوش مصنوعی خودتان | [پروژه دستیار هوش مصنوعی](./9-chat-project/README.md) | Chris | + +## 🏫 روش آموزش + +برنامه‌ی درسی ما با دو اصل کلیدی آموزش طراحی شده است: +* یادگیری مبتنی بر پروژه * آزمون‌های مکرر -این برنامه اصول جاوااسکریپت، HTML و CSS و همچنین جدیدترین ابزارها و تکنیک‌های مورد استفاده توسعه‌دهندگان وب امروزی را آموزش می‌دهد. دانش‌آموزان فرصت خواهند داشت با ساختن بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط‌زیست، بازی سبک مهاجم فضایی و اپ بانکداری برای کسب‌وکارها، تجربه عملی کسب کنند. تا پایان این مجموعه، دانش‌آموزان درک خوبی از توسعه وب پیدا خواهند کرد. +این برنامه اساس‌های JavaScript، HTML و CSS را آموزش می‌دهد، همچنین جدیدترین ابزارها و تکنیک‌هایی که توسعه‌دهندگان وب امروزه استفاده می‌کنند. دانش‌آموزان فرصت کسب تجربه عملی را با ساخت بازی تایپ، تراریوم مجازی، افزونه مرورگر دوستدار محیط زیست، بازی سبک Space Invader و اپ بانک برای کسب‌وکارها خواهند داشت. تا پایان این مجموعه، یک درک جامع از توسعه وب کسب خواهند کرد. -> 🎓 می‌توانید چند درس اول این برنامه آموزشی را به عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در مایکروسافت لرن دنبال کنید! +> 🎓 شما می‌توانید چند درس اول این برنامه را به صورت [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) در Microsoft Learn دنبال کنید! -با اطمینان از تطابق محتوا با پروژه‌ها، فرآیند یادگیری برای دانش‌آموزان جذاب‌تر می‌شود و حفظ مفاهیم افزایش می‌یابد. همچنین چند درس ابتدایی در مبانی جاوااسکریپت برای معرفی مفاهیم همراه با ویدیویی از مجموعه "[سری مقدماتی به: جاوااسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"، که برخی نویسندگان آن در این برنامه همکاری کرده‌اند، نوشته شده است. +با اطمینان از هماهنگی محتوا با پروژه‌ها، روند یادگیری برای دانش‌آموزان جذاب‌تر شده و ماندگاری مفاهیم افزایش می‌یابد. همچنین چند درس مقدماتی در مبانی JavaScript نوشته شده است که مفاهیم را معرفی می‌کند و با ویدئویی از مجموعه آموزشی "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" همراه است که برخی نویسندگان آن به این برنامه کمک کرده‌اند. -علاوه بر این، آزمون کم‌فشار پیش از کلاس هدف دانش‌آموز را به سمت یادگیری موضوع مشخص می‌کند و آزمون دوم پس از کلاس تضمین‌کننده حفظ بیشتر است. این برنامه آموزشی طراحی شده تا انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به طور کامل یا جزئی گذراند. پروژه‌ها کوچک شروع شده و تا پایان سیکل ۱۲ هفته‌ای پیچیده‌تر می‌شوند. +علاوه بر این، یک آزمون کم‌فشار قبل از کلاس هدف دانش‌آموز را به سمت یادگیری موضوع تعیین می‌کند، در حالی که آزمون دوم پس از کلاس، حفظ بهتر مطلب را تضمین می‌کند. این برنامه طوری طراحی شده که انعطاف‌پذیر و سرگرم‌کننده باشد و می‌توان آن را به صورت کامل یا بخشی از آن را گذراند. پروژه‌ها از سطح کوچک آغاز شده و تا پایان چرخه ۱۲ هفته‌ای به طور فزاینده‌ای پیچیده می‌شوند. -در حالی که عمداً از معرفی چارچوب‌های جاوااسکریپت خودداری کرده‌ایم تا بر مهارت‌های پایه لازم برای توسعه‌دهنده وب قبل از استفاده از چارچوب تمرکز کنیم، قدم بعدی مناسب پس از تکمیل این دوره می‌تواند یادگیری Node.js از طریق مجموعه دیگری از ویدیوها باشد: "[سری مقدماتی به: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +در حالی که عمداً از معرفی فریم‌ورک‌های JavaScript اجتناب کرده‌ایم تا روی مهارت‌های پایه‌ای که به عنوان توسعه‌دهنده وب نیاز دارید تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه، یادگیری Node.js از طریق مجموعه ویدئوهای دیگر است: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". + +> به [کد رفتاری](CODE_OF_CONDUCT.md) و [راهنمای مشارکت](CONTRIBUTING.md) ما مراجعه کنید. بازخورد سازنده شما را خوش‌آمد می‌گوییم! -> راهنمای [رفتار حرفه‌ای](CODE_OF_CONDUCT.md) و [همکاری](CONTRIBUTING.md) ما را ببینید. بازخورد سازنده شما را خوش‌آمد می‌گوییم! ## 🧭 دسترسی آفلاین -می‌توانید این مستندات را به صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را فورک کنید، [Docsify را نصب کنید](https://docsify.js.org/#/quickstart) روی دستگاه خود، سپس در پوشه اصلی این مخزن فرمان `docsify serve` را وارد کنید. وب‌سایت روی پورت ۳۰۰۰ در لوکال‌هاست شما ارائه می‌شود: `localhost:3000`. +شما می‌توانید این مستندات را به صورت آفلاین با استفاده از [Docsify](https://docsify.js.org/#/) اجرا کنید. این مخزن را فورک کنید، [Docsify را روی دستگاه خود نصب کنید](https://docsify.js.org/#/quickstart) و سپس در پوشه اصلی مخزن این فرمان را وارد کنید `docsify serve`. وب‌سایت روی پورت ۳۰۰۰ در لوکال‌هاست شما اجرا خواهد شد: `localhost:3000`. ## 📘 PDF +یک فایل PDF از تمام درس‌ها را می‌توانید [در اینجا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) پیدا کنید. -نسخه PDF همه دروس را می‌توانید [از اینجا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) بیابید. ## 🎒 دوره‌های دیگر -تیم ما دوره‌های دیگری هم تولید می‌کند! مشاهده کنید: + +تیم ما دوره‌های دیگری هم تولید می‌کند! نگاه کنید به: ### LangChain @@ -221,7 +233,7 @@ --- -### Generative AI Series +### سری هوش مصنوعی مولد [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -229,7 +241,7 @@ --- -### Core Learning +### آموزش‌های پایه‌ای [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -240,29 +252,29 @@ --- -### Copilot Series +### سری CoPilot [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## دریافت کمک +## گرفتن کمک -اگر گیر افتادید یا سوالی درباره ساخت برنامه‌های هوش مصنوعی دارید، به بحث‌ها در مورد MCP با یادگیرندگان و توسعه‌دهندگان با تجربه بپیوندید. این یک جامعه حمایتی است که سوالات استقبال می‌شود و دانش به صورت آزادانه به اشتراک گذاشته می‌شود. +اگر گیر کردید یا سوالی درباره ساخت اپلیکیشن‌های هوش مصنوعی دارید، به جمع یادگیرندگان و توسعه‌دهندگان با تجربه در بحث‌های MCP بپیوندید. این یک جامعه حمایتگر است که سوالات پذیرفته شده و دانش به صورت آزاد به اشتراک گذاشته می‌شود. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -اگر بازخورد محصول دارید یا هنگام ساخت با خطا مواجه شدید به آدرس زیر مراجعه کنید: +اگر بازخورد محصول یا خطا در حین ساخت دارید، به نشانی زیر مراجعه کنید: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## مجوز -این مخزن تحت مجوز MIT منتشر شده است. برای اطلاعات بیشتر به فایل [LICENSE](../../LICENSE) مراجعه کنید. +این مخزن تحت مجوز MIT است. برای اطلاعات بیشتر به فایل [LICENSE](../../LICENSE) مراجعه کنید. --- **سلب مسئولیت**: -این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. هر چند ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است دارای خطا یا نادرستی‌هایی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا تفسیر نادرستی که ناشی از استفاده از این ترجمه باشد، نیستیم. +این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً آگاه باشید که ترجمه‌های خودکار ممکن است شامل اشتباهات یا نواقصی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا برداشت نادرست ناشی از استفاده از این ترجمه نیستیم. \ No newline at end of file diff --git a/translations/ur/.co-op-translator.json b/translations/ur/.co-op-translator.json index b0a0c6629..17c0ea53a 100644 --- a/translations/ur/.co-op-translator.json +++ b/translations/ur/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-03T12:59:41+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:21:37+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ur" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:11:17+00:00", + "translation_date": "2026-03-06T16:29:46+00:00", "source_file": "AGENTS.md", "language_code": "ur" }, @@ -516,8 +516,8 @@ "language_code": "ur" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:05:00+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:16:39+00:00", "source_file": "README.md", "language_code": "ur" }, diff --git a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 09b201321..14be4c6c0 100644 --- a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,180 @@ -# پروگرامنگ زبانوں اور جدید ڈیولپر ٹولز کا تعارف +# پروگرامنگ زبانوں اور جدید ڈویلپر ٹولز کا تعارف -ہیلو، مستقبل کے ڈیولپر! 👋 کیا میں آپ کو کچھ بتا سکتا ہوں جو مجھے ہر دن حیران کر دیتا ہے؟ آپ یہ دریافت کرنے والے ہیں کہ پروگرامنگ صرف کمپیوٹرز کے بارے میں نہیں ہے – یہ آپ کے سب سے منفرد خیالات کو حقیقت میں بدلنے کی طاقت ہے! +ہیلو، آئندہ کے ڈویلپر! 👋 کیا میں آپ کو کچھ بتا سکتا ہوں جو ہر دن مجھے سن سن کر دلچسپ کر دیتا ہے؟ آپ یہ جاننے والے ہیں کہ پروگرامنگ صرف کمپیوٹرز کے بارے میں نہیں ہے – یہ آپ کے جانوروں کی طرح خیالات کو حقیقت میں لانے کے لیے حقیقی سپر پاورز حاصل کرنے کے بارے میں ہے! -آپ جانتے ہیں وہ لمحہ جب آپ اپنی پسندیدہ ایپ استعمال کر رہے ہوتے ہیں اور سب کچھ بالکل ٹھیک کام کرتا ہے؟ جب آپ ایک بٹن پر کلک کرتے ہیں اور کچھ جادوئی ہوتا ہے جو آپ کو "واہ، انہوں نے یہ کیسے کیا؟" کہنے پر مجبور کر دیتا ہے؟ تو، کوئی آپ جیسا – شاید رات کے 2 بجے اپنی پسندیدہ کافی شاپ میں بیٹھا ہوا، تیسرا ایسپریسو پیتے ہوئے – نے وہ کوڈ لکھا تھا جس نے وہ جادو تخلیق کیا۔ اور یہاں وہ بات ہے جو آپ کو حیران کر دے گی: اس سبق کے اختتام تک، آپ نہ صرف یہ سمجھیں گے کہ انہوں نے یہ کیسے کیا، بلکہ آپ خود اسے آزمانے کے لیے بے چین ہوں گے! +آپ جانتے ہیں وہ لمحہ جب آپ اپنے پسندیدہ ایپ کا استعمال کر رہے ہوتے ہیں اور ہر چیز بلکل صحیح طریقے سے جمی ہوتی ہے؟ جب آپ کسی بٹن کو ٹیپ کرتے ہیں اور کچھ جادوی طور پر ہوتا ہے جو آپ کو کہنے دیتا ہے "واہ، انہوں نے یہ کیسے کیا؟" تو ایسے ہی کسی نے – شاید اپنی پسندیدہ کافی شاپ میں رات 2 بجے اپنی تیسری ایسپریسو کے ساتھ بیٹھا ہوا – وہ کوڈ لکھا جو اس جادو کو تخلیق کیا۔ اور یہ بات آپ کو حیران کر دے گی: اس لیکچر کے آخر تک، آپ نہ صرف سمجھ جائیں گے کہ انہوں نے یہ کیسے کیا، بلکہ آپ خود بھی اسے کرنے کے لیے بےتاب ہوں گے! -دیکھیں، اگر آپ کو ابھی پروگرامنگ مشکل لگ رہی ہے تو میں بالکل سمجھ سکتا ہوں۔ جب میں نے پہلی بار شروع کیا، تو مجھے واقعی لگا کہ آپ کو کوئی ریاضی کا ماہر ہونا چاہیے یا پانچ سال کی عمر سے کوڈنگ کرنی چاہیے۔ لیکن یہاں وہ بات ہے جس نے میری سوچ کو مکمل طور پر بدل دیا: پروگرامنگ بالکل ایک نئی زبان میں گفتگو کرنا سیکھنے جیسا ہے۔ آپ "ہیلو" اور "شکریہ" سے شروع کرتے ہیں، پھر کافی آرڈر کرنے تک پہنچتے ہیں، اور اس سے پہلے کہ آپ کو پتہ چلے، آپ گہرے فلسفیانہ مباحثے کر رہے ہوتے ہیں! لیکن اس معاملے میں، آپ کمپیوٹرز کے ساتھ گفتگو کر رہے ہیں، اور ایمانداری سے؟ وہ سب سے زیادہ صبر کرنے والے گفتگو کے ساتھی ہیں – وہ کبھی آپ کی غلطیوں پر فیصلہ نہیں کرتے اور ہمیشہ دوبارہ کوشش کرنے کے لیے تیار رہتے ہیں! +دیکھیں، میں بالکل سمجھتا ہوں اگر پروگرامنگ ابھی آپ کو خوفزدہ لگتی ہے۔ جب میں نے شروع کیا تھا تو میں نے حقیقتاً یہ سوچا کہ آپ کو کوئی ریاضی کا جینئس ہونا چاہیے یا آپ کو پانچ سال کی عمر سے کوڈنگ کرنی چاہیے۔ لیکن یہ کیا ہے جو میرے نظریے کو مکمل بدل دیا: پروگرامنگ بالکل ویسے ہی ہے جیسے نئی زبان میں بات چیت کرنا سیکھنا۔ آپ "ہیلو" اور "شکریہ" سے شروع کرتے ہیں، پھر کافی کا آرڈر دیتے ہیں، اور پھر اچانک آپ گہری فلسفیانہ گفتگو کرتے ہیں! فرق صرف یہ ہے کہ آپ کمپیوٹرز کے ساتھ بات چیت کر رہے ہوتے ہیں، اور سچ کہوں؟ وہ سب سے زیادہ صبر کرنے والے بات چیت کرنے والے پارٹنر ہیں جو آپ کبھی بھی دیکھیں گے – وہ آپ کی غلطیوں کا کبھی فیصلہ نہیں کرتے اور ہمیشہ دوبارہ کوشش کرنے کے لیے پرجوش رہتے ہیں! -آج، ہم ان حیرت انگیز ٹولز کو دریافت کرنے جا رہے ہیں جو جدید ویب ڈیولپمنٹ کو نہ صرف ممکن بناتے ہیں بلکہ واقعی دلچسپ بناتے ہیں۔ میں ان ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں بات کر رہا ہوں جو نیٹ فلکس، اسپاٹیفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈیولپرز ہر روز استعمال کرتے ہیں۔ اور یہاں وہ حصہ ہے جو آپ کو خوشی سے جھومنے پر مجبور کر دے گا: ان میں سے زیادہ تر پروفیشنل گریڈ، انڈسٹری اسٹینڈرڈ ٹولز مکمل طور پر مفت ہیں! +آج، ہم ان زبردست ٹولز کو دریافت کریں گے جو جدید ویب ڈویلپمنٹ کو ممکن ہی نہیں بلکہ واقعی نشہ آور بناتے ہیں۔ میں بات کر رہا ہوں بالکل وہی ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں جو نیٹ فلکس، اسپاٹائفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈویلپر روزانہ استعمال کرتے ہیں۔ اور یہاں وہ حصہ ہے جو آپ کو خوشی میں جھومنے پر مجبور کر دے گا: ان میں سے زیادہ تر پروفیشنل معیار کے، صنعت کے اسٹینڈرڈ ٹولز مکمل طور پر مفت ہیں! -![پروگرامنگ کا تعارف](../../../../translated_images/ur/webdev101-programming.d6e3f98e61ac4bff.webp) -> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے +![Intro Programming](../../../../translated_images/ur/webdev101-programming.d6e3f98e61ac4bff.webp) +> اسکیچ نوٹ از [ٹومومی امورا](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title آپ کا آج کا پروگرامنگ سفر + section دریافت کریں + پروگرامنگ کیا ہے: 5: You + پروگرامنگ زبانیں: 4: You + ٹولز کا عمومی جائزہ: 5: You + section کھوج کریں + کوڈ ایڈیٹرز: 4: You + براؤزرز اور ڈیولپر ٹولز: 5: You + کمانڈ لائن: 3: You + section مشق کریں + زبان کا جاسوس: 4: You + ٹول کی کھوج: 5: You + کمیونٹی سے رابطہ: 5: You ``` +## آئیں دیکھیں آپ پہلے سے کیا جانتے ہیں! -## دیکھتے ہیں کہ آپ پہلے سے کیا جانتے ہیں! +مذاق شروع کرنے سے پہلے، مجھے یہ جاننے کی تجسس ہے – آپ پہلے سے اس پروگرامنگ کی دنیا کے بارے میں کیا جانتے ہیں؟ اور سنیں، اگر آپ ان سوالات کو دیکھ کر سوچ رہے ہیں "مجھے ان میں سے کچھ بھی بالکل معلوم نہیں"، تو یہ نہ صرف ٹھیک ہے، بلکہ بہترین ہے! اس کا مطلب ہے کہ آپ بالکل صحیح جگہ پر ہیں۔ اس کو کسی ورزش سے پہلے کشش کی طرح سمجھیں – ہم بس اپنے دماغی عضلات کو گرم کر رہے ہیں! -تفریحی چیزوں میں کودنے سے پہلے، مجھے تجسس ہے – آپ اس پروگرامنگ دنیا کے بارے میں پہلے سے کیا جانتے ہیں؟ اور سنیں، اگر آپ ان سوالات کو دیکھ رہے ہیں اور سوچ رہے ہیں "مجھے ان میں سے کسی کے بارے میں بالکل کوئی اندازہ نہیں ہے"، تو یہ نہ صرف ٹھیک ہے بلکہ بہترین ہے! اس کا مطلب ہے کہ آپ بالکل صحیح جگہ پر ہیں۔ اس کوئز کو ورزش سے پہلے کھینچنے جیسا سمجھیں – ہم صرف ان دماغی عضلات کو گرم کر رہے ہیں! +[سبق سے پہلے کا کوئز لیں](https://ff-quizzes.netlify.app/web/) -[پری سبق کوئز لیں](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## وہ مہم جو ہم مل کر شروع کرنے والے ہیں +## وہ مہم جس پر ہم ساتھ روانہ ہو رہے ہیں -ٹھیک ہے، میں واقعی اس بارے میں پرجوش ہوں کہ ہم آج کیا دریافت کرنے والے ہیں! سنجیدگی سے، میں آپ کا چہرہ دیکھنا چاہتا ہوں جب ان میں سے کچھ تصورات واضح ہوں۔ یہ ہے وہ ناقابل یقین سفر جو ہم مل کر کر رہے ہیں: +ٹھیک ہے، میں واقعی اس بارے میں بہت خوش ہوں جو ہم آج دریافت کرنے جا رہے ہیں! سنجیدگی سے، کاش میں آپ کا چہرہ دیکھ سکتا جب کچھ تصورات آپ کو اچانک سمجھ آتے ہیں۔ یہاں وہ شاندار سفر ہے جو ہم ساتھ کر رہے ہیں: -- **پروگرامنگ اصل میں کیا ہے (اور یہ سب سے زبردست چیز کیوں ہے!)** – ہم یہ دریافت کریں گے کہ کوڈ واقعی وہ پوشیدہ جادو ہے جو آپ کے ارد گرد ہر چیز کو طاقت دیتا ہے، اس الارم سے جو کسی طرح جانتا ہے کہ پیر کی صبح ہے، اس الگورتھم تک جو آپ کے نیٹ فلکس کی سفارشات کو بالکل ترتیب دیتا ہے۔ -- **پروگرامنگ زبانیں اور ان کی حیرت انگیز شخصیات** – تصور کریں کہ آپ ایک پارٹی میں داخل ہو رہے ہیں جہاں ہر شخص کے پاس مسائل کو حل کرنے کے مکمل طور پر مختلف سپر پاورز ہیں۔ پروگرامنگ زبانوں کی دنیا ایسی ہی ہے، اور آپ انہیں ملنے سے محبت کریں گے! -- **وہ بنیادی تعمیراتی بلاکس جو ڈیجیٹل جادو کو ممکن بناتے ہیں** – انہیں حتمی تخلیقی LEGO سیٹ سمجھیں۔ ایک بار جب آپ سمجھ جائیں کہ یہ ٹکڑے کیسے ایک دوسرے کے ساتھ جڑتے ہیں، تو آپ کو احساس ہوگا کہ آپ لفظی طور پر وہ سب کچھ بنا سکتے ہیں جو آپ کا تخیل خواب دیکھتا ہے۔ -- **پروفیشنل ٹولز جو آپ کو ایسا محسوس کرائیں گے جیسے آپ کو جادوگر کی چھڑی دی گئی ہو** – میں یہاں ڈرامائی نہیں ہو رہا – یہ ٹولز واقعی آپ کو ایسا محسوس کرائیں گے جیسے آپ کے پاس سپر پاورز ہیں، اور سب سے اچھی بات؟ یہ وہی ہیں جو پروفیشنل استعمال کرتے ہیں! +- **پروگرامنگ درحقیقت کیا ہے (اور یہ سب سے زبردست چیز کیوں ہے!)** – ہم یہ جانیں گے کہ کوڈ بالکل وہ پوشیدہ جادو ہے جو آپ کے آس پاس ہر چیز کو چلاتا ہے، اس الارم سے جو کسی طرح جانتا ہے کہ آج پیر ہے، اس الگوردمی تک جو آپ کی نیٹ فلکس کی سفارشات کو بلکل درست کرتا ہے۔ +- **پروگرامنگ زبانیں اور ان کی حیرت انگیز شخصیات** – تصور کریں کہ آپ ایک پارٹی میں جا رہے ہیں جہاں ہر شخص کے پاس مکمل طور پر مختلف سپر پاورز اور مسائل حل کرنے کے طریقے ہیں۔ یہی پروگرامنگ زبانوں کی دنیا ہے، اور آپ کو انہیں مل کر بہت مزہ آئے گا! +- **وہ بنیادی بلاکس جو ڈیجیٹل جادو کو ممکن بناتے ہیں** – ان کو انتہائی تخلیقی LEGO سیٹ سمجھیں۔ جب آپ سمجھ جائیں گے یہ ٹکڑے کس طرح جڑتے ہیں، تو آپ ایسا کچھ بھی بنا سکیں گے جو آپ کی تخیل دیکھتی ہے۔ +- **پروفیشنل ٹولز جو آپ کو بالکل محسوس کرائیں گے کہ آپ کو جادوگر کی چھڑی مل گئی ہے** – میں ڈرامائی نہیں ہوں – یہ ٹولز واقعی آپ کو سپر پاورز کا احساس دلائیں گے، اور بہترین بات؟ یہ وہی ٹولز ہیں جو ماہر استعمال کرتے ہیں! -> 💡 **یہاں بات یہ ہے**: آج سب کچھ یاد رکھنے کی کوشش بھی نہ کریں! ابھی، میں صرف چاہتا ہوں کہ آپ اس بات کے بارے میں جوش محسوس کریں کہ کیا ممکن ہے۔ تفصیلات قدرتی طور پر چپک جائیں گی جب ہم مل کر مشق کریں گے – یہی حقیقی سیکھنے کا طریقہ ہے! +> 💡 **یہ بات یاد رکھیں**: آج سب کچھ یاد کرنے کی کوشش نہ کریں! ابھی، میں چاہتا ہوں کہ آپ ممکنات کے بارے میں جوش کا احساس کریں۔ تفصیلات قدرتی طور پر یاد رہیں گی جب ہم مل کر مشق کریں گے – یہی حقیقی سیکھنے کا طریقہ ہے! -> آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں! +> آپ یہ سبق [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) پر بھی لے سکتے ہیں! -## تو پروگرامنگ اصل میں *کیا* ہے؟ +## تو پروگرامنگ کیا *ہے*؟ -ٹھیک ہے، آئیے اس ملین ڈالر کے سوال کو حل کرتے ہیں: پروگرامنگ واقعی کیا ہے؟ +چلیں، سب سے بڑا سوال حل کریں: پروگرامنگ کیا ہے؟ -میں آپ کو ایک کہانی سناؤں گا جس نے میرے سوچنے کے انداز کو مکمل طور پر بدل دیا۔ پچھلے ہفتے، میں اپنی ماں کو ہمارے نئے اسمارٹ ٹی وی ریموٹ استعمال کرنے کا طریقہ سمجھانے کی کوشش کر رہا تھا۔ میں نے خود کو یہ کہتے ہوئے پایا "لال بٹن دبائیں، لیکن بڑا لال بٹن نہیں، چھوٹا لال بٹن بائیں طرف... نہیں، آپ کا دوسرا بایاں... ٹھیک ہے، اب اسے دو سیکنڈ کے لیے دبائیں، ایک نہیں، تین نہیں..." کیا یہ جانا پہچانا لگتا ہے؟ 😅 +میں آپ کو ایک کہانی دیتا ہوں جس نے میرے سوچنے کے انداز کو مکمل بدل دیا۔ پچھلے ہفتے، میں اپنی ماں کو ہمارا نیا اسمارٹ ٹی وی ریموٹ استعمال کرنا سکھانے کی کوشش کر رہا تھا۔ میں نے خود کو کہتے سنا "سرخ بٹن دبائیں، لیکن وہ بڑا سرخ نہیں، بایاں طرف چھوٹا سرخ بٹن... نہیں، آپ کا دوسرا بایاں... ٹھیک ہے، اب اسے دو سیکنڈ کے لیے تھامیں، ایک نہیں، تین نہیں..." کیا یہ آپ کو معلوم لگتا ہے؟ 😅 -یہی پروگرامنگ ہے! یہ طاقتور چیز کو انتہائی تفصیلی، قدم بہ قدم ہدایات دینے کا فن ہے لیکن اسے ہر چیز بالکل واضح طور پر بتانے کی ضرورت ہوتی ہے۔ لیکن ماں کو سمجھانے کے بجائے (جو پوچھ سکتی ہے "کون سا لال بٹن؟!"), آپ کمپیوٹر کو سمجھا رہے ہیں (جو بالکل وہی کرتا ہے جو آپ کہتے ہیں، چاہے آپ نے جو کہا وہ وہ نہ ہو جو آپ کا مطلب تھا)۔ +یہی پروگرامنگ ہے! یہ جادو ہے جس میں آپ کسی بہت طاقتور چیز کو انتہائی تفصیلی، قدم بہ قدم ہدایات دیتے ہیں جو کہ بالکل واضح ہوں۔ فرق صرف یہ ہے کہ آپ اپنی ماں کو نہیں سمجھا رہے (جو پوچھ سکتی ہے "کون سا سرخ بٹن؟!"), آپ کمپیوٹر کو سمجھا رہے ہیں (جو بالکل ویسا ہی کرتا ہے جیسا آپ کہتے ہیں، چاہے آپ نے جو کہا وہ بالکل آپ کا مطلب نہ ہو)۔ -یہاں وہ بات ہے جس نے مجھے حیران کر دیا جب میں نے پہلی بار یہ سیکھا: کمپیوٹرز بنیادی طور پر کافی سادہ ہیں۔ وہ لفظی طور پر صرف دو چیزیں سمجھتے ہیں – 1 اور 0، جو بنیادی طور پر صرف "ہاں" اور "نہیں" یا "آن" اور "آف" ہے۔ بس اتنا ہی! لیکن یہاں وہ جادو ہے – ہمیں 1s اور 0s میں بات کرنے کی ضرورت نہیں ہے جیسے ہم دی میٹرکس میں ہیں۔ یہی وہ جگہ ہے جہاں **پروگرامنگ زبانیں** مدد کے لیے آتی ہیں۔ وہ دنیا کے بہترین مترجم کی طرح ہیں جو آپ کے بالکل عام انسانی خیالات کو کمپیوٹر زبان میں تبدیل کرتے ہیں۔ +یہ بات جب میں نے پہلی بار سیکھی تو مجھے حیران کر گئی: کمپیوٹرز دراصل بنیادی طور پر بہت سادہ ہوتے ہیں۔ وہ صرف دو چیزیں سمجھتے ہیں – 1 اور 0، جو اصل میں "ہاں" اور "نہیں" یا "آن" اور "آف" ہوتے ہیں۔ صرف اتنا! لیکن یہیں جادو شروع ہوتا ہے – ہمیں 1 اور 0 میں بولنا نہیں پڑتا جیسا ہم دیے تمغے میں ہوتے ہیں۔ یہاں **پروگرامنگ زبانیں** مدد کرتی ہیں۔ وہ ایسی ہیں جیسے دنیا کے بہترین مترجم جو آپ کے بالکل عام انسانی خیالات کو کمپیوٹر زبان میں تبدیل کر دیتے ہیں۔ -اور یہاں وہ بات ہے جو مجھے ہر صبح جب میں جاگتا ہوں تو واقعی حیران کر دیتی ہے: آپ کی زندگی میں ہر ڈیجیٹل چیز کسی ایسے شخص کے ساتھ شروع ہوئی جو آپ جیسا تھا، شاید اپنے پاجامے میں کافی کا کپ لے کر بیٹھا ہوا، اپنے لیپ ٹاپ پر کوڈ ٹائپ کر رہا تھا۔ وہ انسٹاگرام فلٹر جو آپ کو بے عیب دکھاتا ہے؟ کسی نے اسے کوڈ کیا۔ وہ سفارش جس نے آپ کو آپ کے نئے پسندیدہ گانے تک پہنچایا؟ ایک ڈیولپر نے وہ الگورتھم بنایا۔ وہ ایپ جو آپ کو دوستوں کے ساتھ ڈنر بل تقسیم کرنے میں مدد دیتی ہے؟ ہاں، کسی نے سوچا "یہ پریشان کن ہے، مجھے لگتا ہے کہ میں اسے ٹھیک کر سکتا ہوں" اور پھر... انہوں نے کر دیا! +اور یہ بات جو ہر صبح مجھے واقعی حیران کن لگتی ہے: آپ کی زندگی کی ہر ڈیجیٹل چیز کی شروعات کسی ایسے شخص نے کی، شاید پاجامے میں بیٹھا اور کافی پی رہا ہو اور کوڈ ٹائپ کر رہا ہو۔ وہ انسٹاگرام فلٹر جو آپ کو بے عیب بناتا ہے؟ کسی نے وہ کوڈ کیا۔ جو سفارش آپ کو آپ کے نئے پسندیدہ گانے تک لے گئی؟ کسی ڈویلپر نے وہ الگوردم بنایا۔ وہ ایپ جو آپ کو دوستوں کے ساتھ کھانے کا بل تقسیم کرنے میں مدد دیتی ہے؟ ہاں، کسی نے سوچا "یہ کتنا پریشان کن ہے، میں اسے ٹھیک کر سکتا ہوں" اور پھر… کیا کیا! -جب آپ پروگرامنگ سیکھتے ہیں، تو آپ صرف ایک نئی مہارت حاصل نہیں کر رہے ہوتے – آپ اس ناقابل یقین مسئلہ حل کرنے والوں کی کمیونٹی کا حصہ بن رہے ہیں جو اپنے دن یہ سوچتے ہوئے گزارتے ہیں، "کیا ہوگا اگر میں کچھ ایسا بنا سکوں جو کسی کا دن تھوڑا سا بہتر بنا دے؟" ایمانداری سے، کیا اس سے زیادہ زبردست کوئی چیز ہے؟ +جب آپ پروگرامنگ سیکھتے ہیں، تو آپ صرف نئی مہارت حاصل نہیں کر رہے – آپ اس زبردست کمیونٹی کا حصہ بن رہے ہیں جو حل تلاش کرنے والوں کی ہے جو دن رات سوچتے ہیں، "کیا ہوتا اگر میں ایسی چیز بنا سکتا جو کسی کا دن تھوڑا بہتر بنا دے؟" سچ پوچھیں تو، اس سے زبردست کیا ہو سکتا ہے؟ -✅ **تفریحی حقیقت کی تلاش**: جب آپ کے پاس فارغ وقت ہو تو کچھ بہت دلچسپ تلاش کریں – آپ کے خیال میں دنیا کا پہلا کمپیوٹر پروگرامر کون تھا؟ میں آپ کو ایک اشارہ دوں گا: یہ وہ نہیں ہو سکتا جس کی آپ توقع کر رہے ہیں! اس شخص کے پیچھے کہانی بالکل دلچسپ ہے اور یہ ظاہر کرتی ہے کہ پروگرامنگ ہمیشہ تخلیقی مسئلہ حل کرنے اور باکس سے باہر سوچنے کے بارے میں رہی ہے۔ +✅ **دلچسپ حقائق کی تلاش**: جب آپ کے پاس وقت ہو تو یہ دلچسپ بات دیکھیں – آپ کے خیال میں دنیا کا پہلا کمپیوٹر پروگرامر کون تھا؟ میں آپ کو اشارہ دیتا ہوں: شاید وہ وہ نہیں جس کی آپ توقع کر رہے ہوں! اس شخص کی کہانی بالکل دلچسپ ہے اور دکھاتی ہے کہ پروگرامنگ ہمیشہ تخلیقی مسائل کے حل اور دیے گئے دائرے سے باہر سوچنے کے بارے میں تھی۔ -### 🧠 **چیک ان وقت: آپ کیسا محسوس کر رہے ہیں؟** +### 🧠 **چیک ان کا وقت: آپ کیسا محسوس کر رہے ہیں؟** -**ایک لمحہ لیں اور غور کریں:** -- کیا "کمپیوٹرز کو ہدایات دینے" کا تصور اب آپ کو سمجھ آتا ہے؟ -- کیا آپ کسی روزمرہ کے کام کے بارے میں سوچ سکتے ہیں جسے آپ پروگرامنگ کے ذریعے خودکار بنانا چاہیں گے؟ -- اس پورے پروگرامنگ کے بارے میں آپ کے ذہن میں کون سے سوالات اٹھ رہے ہیں؟ +**ذرا غور کریں:** +- کیا "کمپیوٹرز کو ہدایات دینا" اب آپ کے لیے سمجھ میں آتا ہے؟ +- کیا آپ روزمرہ کا کوئی کام سوچ سکتے ہیں جسے آپ پروگرامنگ سے خودکار کرنا چاہیں گے؟ +- اس پورے پروگرامنگ کے بارے میں آپ کے ذہن میں کیا سوالات اٹھ رہے ہیں؟ -> **یاد رکھیں**: اگر کچھ تصورات ابھی دھندلے محسوس ہو رہے ہیں تو یہ بالکل معمول کی بات ہے۔ پروگرامنگ سیکھنا ایک نئی زبان سیکھنے جیسا ہے – آپ کے دماغ کو ان نیورل راستوں کو بنانے میں وقت لگتا ہے۔ آپ بہت اچھا کر رہے ہیں! +> **یاد رکھیں**: اگر کچھ تصورات اب مشکل لگ رہے ہیں تو بالکل نارمل ہے۔ پروگرامنگ سیکھنا ایک نئی زبان سیکھنے کی طرح ہے – آپ کے دماغ کو نیورل پاتھ بنانے کے لیے وقت لگتا ہے۔ آپ بہترین کر رہے ہیں! -## پروگرامنگ زبانیں جادو کے مختلف ذائقوں کی طرح ہیں +## پروگرامنگ زبانیں جادو کی مختلف ذائقوں کی طرح ہیں -ٹھیک ہے، یہ عجیب لگے گا، لیکن میرے ساتھ رہیں – پروگرامنگ زبانیں مختلف قسم کے موسیقی کی طرح ہیں۔ اس کے بارے میں سوچیں: آپ کے پاس جاز ہے، جو ہموار اور تخلیقی ہے، راک جو طاقتور اور سیدھا ہے، کلاسیکل جو خوبصورت اور منظم ہے، اور ہپ ہاپ جو تخلیقی اور اظہار خیال ہے۔ ہر انداز کا اپنا مزاج، اپنے شائقین کا گروپ، اور ہر ایک مختلف مواقع کے لیے بہترین ہے۔ +ٹھیک ہے، یہ سننے میں عجیب لگ سکتا ہے، لیکن میرے ساتھ رہیں – پروگرامنگ زبانیں موسیقی کی مختلف اقسام کی بہت طرح کی ہوتی ہیں۔ سوچیں: آپ کے پاس جاز ہے جو ہموار اور فوری ہے، راک جو طاقتور اور سیدھا ہے، کلاسیکل جو نفیس اور منظم ہے، اور ہپ ہاپ جو تخلیقی اور جذباتی ہے۔ ہر انداز کا اپنا ماحول ہوتا ہے، اپنے پرجوش مداحوں کی جماعت ہوتی ہے، اور ہر ایک مختلف مزاجوں اور مواقع کے لیے بالکل مناسب ہوتا ہے۔ -پروگرامنگ زبانیں بالکل اسی طرح کام کرتی ہیں! آپ وہی زبان استعمال نہیں کریں گے جو ایک تفریحی موبائل گیم بنانے کے لیے استعمال کی جاتی ہے جو آپ بڑے پیمانے پر موسمیاتی ڈیٹا کو پروسیس کرنے کے لیے استعمال کریں گے، جیسے آپ یوگا کلاس میں ڈیتھ میٹل نہیں بجائیں گے (اچھا، زیادہ تر یوگا کلاسز میں! 😄)۔ +پروگرامنگ زبانیں بھی بالکل ویسے ہی کام کرتی ہیں! آپ وہی زبان استعمال نہیں کریں گے جو موبائل گیم بنانے کے لیے استعمال کریں وہی زبان موسمیاتی ڈیٹا کے بہت بڑے ذخیرے کے لیے بھی ہو، بالکل ویسے جیسے آپ یوگا کلاس میں ڈیتھ میٹل نہیں بجائیں گے (خیر، زیادہ تر یوگا کلاسوں میں نہیں! 😄)۔ -لیکن یہاں وہ بات ہے جو مجھے ہر بار حیران کر دیتی ہے جب میں اس کے بارے میں سوچتا ہوں: یہ زبانیں ایسی ہیں جیسے آپ کے ساتھ دنیا کا سب سے صبر کرنے والا، شاندار مترجم بیٹھا ہوا ہو۔ آپ اپنے خیالات کو اس طرح بیان کر سکتے ہیں جو آپ کے انسانی دماغ کے لیے قدرتی محسوس ہوتا ہے، اور وہ اس تمام پیچیدہ کام کو سنبھالتے ہیں جو اسے 1s اور 0s میں تبدیل کرنے کے لیے ضروری ہے جو کمپیوٹرز اصل میں بولتے ہیں۔ یہ ایسا ہے جیسے آپ کے پاس ایک دوست ہو جو "انسانی تخلیقی صلاحیت" اور "کمپیوٹر منطق" دونوں میں مکمل طور پر ماہر ہو – اور وہ کبھی تھکتے نہیں، کبھی کافی بریک کی ضرورت نہیں ہوتی، اور کبھی آپ سے ایک ہی سوال دوبارہ پوچھنے پر فیصلہ نہیں کرتے! +لیکن ہر بار جب میں اس کے بارے میں سوچتا ہوں تو مجھے حیرت ہوتی ہے: یہ زبانیں دنیا کے سب سے صبر کرنے والے، شاندار مترجم کی طرح ہیں جو آپ کے ساتھ بیٹھی ہوتی ہیں۔ آپ اپنے خیالات اس طرح ظاہر کر سکتے ہیں جو آپ کے انسانی دماغ کے لیے نیچرل ہو، اور وہ سب پیچیدہ کام کرتے ہیں کہ اسے 1 اور 0 میں تبدیل کر دیں جو کمپیوٹر سمجھتے ہیں۔ یہ ایسا ہے جیسے آپ کے پاس ایک ایسا دوست ہو جو انسانی تخلیقیت اور کمپیوٹر منطق دونوں پر عبور رکھتا ہو – اور وہ کبھی تھکتا نہیں، کبھی کافی کے بریک نہیں لیتا، اور کبھی آپ کو ایک ہی سوال دو بار پوچھنے پر نہیں طعنہ دیتا! ### مشہور پروگرامنگ زبانیں اور ان کے استعمال ```mermaid mindmap - root((Programming Languages)) + root((پروگرامنگ زبانیں)) Web Development JavaScript - Frontend Magic - Interactive Websites + فرنٹ اینڈ جادو + انٹرایکٹو ویب سائٹس TypeScript - JavaScript + Types - Enterprise Apps + جاوا اسکرپٹ + اقسام + انٹرپرائز ایپس Data & AI Python - Data Science - Machine Learning - Automation + ڈیٹا سائنس + مشین لرننگ + خود کاری R - Statistics - Research + شماریات + تحقیق Mobile Apps Java - Android - Enterprise + اینڈرائیڈ + انٹرپرائز Swift - iOS - Apple Ecosystem + آئی او ایس + ایپل ماحولیاتی نظام Kotlin - Modern Android - Cross-platform + جدید اینڈرائیڈ + کثیر المنصوبہ Systems & Performance C++ - Games - Performance Critical + کھیل + کارکردگی اہم Rust - Memory Safety - System Programming + میموری کی حفاظت + نظام پروگرامنگ Go - Cloud Services - Scalable Backend + کلاؤڈ خدمات + توسیع پذیر بیک اینڈ ``` - -| زبان | بہترین استعمال | یہ کیوں مقبول ہے | -|------|----------------|------------------| -| **JavaScript** | ویب ڈیولپمنٹ، یوزر انٹرفیس | براؤزرز میں چلتی ہے اور انٹرایکٹو ویب سائٹس کو طاقت دیتی ہے | -| **Python** | ڈیٹا سائنس، آٹومیشن، AI | پڑھنے اور سیکھنے میں آسان، طاقتور لائبریریاں | -| **Java** | انٹرپرائز ایپلیکیشنز، اینڈرائیڈ ایپس | پلیٹ فارم سے آزاد، بڑے سسٹمز کے لیے مضبوط | -| **C#** | ونڈوز ایپلیکیشنز، گیم ڈیولپمنٹ | مضبوط مائیکروسافٹ ایکو سسٹم سپورٹ | -| **Go** | کلاؤڈ سروسز، بیک اینڈ سسٹمز | تیز، سادہ، جدید کمپیوٹنگ کے لیے ڈیزائن کیا گیا | +| زبان | بہترین استعمال کے لیے | کیوں مشہور ہے | +|----------|-------------|------------------| +| **JavaScript** | ویب ڈویلپمنٹ، صارف انٹرفیس | براؤزرز میں چلتی ہے اور تعاملی ویب سائٹس کو طاقت دیتی ہے | +| **Python** | ڈیٹا سائنس، خودکاری، AI | آسانی سے پڑھنے اور سیکھنے والی، طاقتور لائبریریز | +| **Java** | انٹرپرائز ایپلیکیشنز، اینڈرائیڈ ایپس | پلیٹ فارم آزاد، بڑے نظاموں کے لیے مضبوط | +| **C#** | ونڈوز ایپلیکیشنز، گیم ڈویلپمنٹ | مائیکروسافٹ کے ذریعہ مضبوط سپورٹ | +| **Go** | کلاؤڈ سروسز، بیک اینڈ سسٹمز | تیز، سادہ، جدید کمپیوٹنگ کے لیے بنایا گیا | ### ہائی لیول بمقابلہ لو لیول زبانیں -ٹھیک ہے، یہ وہ تصور تھا جس نے مجھے پہلی بار سیکھتے وقت واقعی الجھن میں ڈال دیا، لہذا میں وہ مثال شیئر کرنے جا رہا ہوں جس نے آخر کار مجھے سمجھایا – اور مجھے واقعی امید ہے کہ یہ آپ کی بھی مدد کرے گی! - -تصور کریں کہ آپ ایک ایسے ملک میں جا رہے ہیں جہاں آپ زبان نہیں بولتے، اور آپ کو فوری طور پر قریب ترین باتھ روم تلاش کرنے کی ضرورت ہے (ہم سب وہاں رہے ہیں، ٹھیک ہے؟ 😅): +ٹھیک ہے، یہ وہ تصور تھا جس نے پہلی بار جب میں نے سیکھنا شروع کیا تو میرا دماغ گڑبڑ کر دیا، تو میں آپ سے وہ مثال شیئر کرنے جا رہا ہوں جس نے آخرکار مجھے سمجھایا – اور مجھے امید ہے یہ آپ کی بھی مدد کرے گا! -- **لو لیول پروگرامنگ** مقامی بولی کو اتنا اچھی طرح سیکھنے جیسا ہے کہ آپ کونے پر پھل بیچنے والی دادی کے ساتھ ثقافتی حوالوں، مقامی زبان، اور اندرونی لطیفوں کے ساتھ بات چیت کر سکتے ہیں جو صرف وہی سمجھ سکتا ہے جو وہاں پلا بڑھا ہو۔ بہت متاثر کن اور انتہائی مؤثر... اگر آپ روانی رکھتے ہیں! لیکن جب آپ صرف باتھ روم تلاش کرنے کی کوشش کر رہے ہیں تو کافی پریشان کن۔ +تصور کریں کہ آپ ایسی جگہ جا رہے ہیں جہاں زبان نہیں آتی اور آپ کو شدید ضرورت ہے قریب ترین غسل خانے کو تلاش کرنے کی (ہم سب یہ حالات دیکھ چکے ہیں، ہے نا؟ 😅): -- **ہائی لیول پروگرامنگ** اس حیرت انگیز مقامی دوست کی طرح ہے جو آپ کو سمجھتا ہے۔ آپ سادہ انگریزی میں کہہ سکتے ہیں "مجھے واقعی باتھ روم تلاش کرنے کی ضرورت ہے"، اور وہ تمام ثقافتی ترجمہ سنبھالتے ہیں اور آپ کو ایسے انداز میں ہدایات دیتے ہیں جو آپ کے غیر مقامی دماغ کے لیے بالکل معنی رکھتا ہے۔ +- **لو لیول پروگرامنگ** ایسے ہے جیسے آپ نے مقامی بولی اتنی اچھی سیکھ لی ہے کہ آپ اس پھل بیچنے والی دادی کے ساتھ چٹکلے، ثقافتی حوالے، اور مقامی زبان میں بات کر سکتے ہیں جو صرف وہ لوگ سمجھتے ہیں جو وہاں شوروم میں بڑے ہوئے ہوں۔ یہ بہت متاثر کن اور انتہائی مؤثر ہے... اگر آپ واقعی ماہر ہوں! لیکن جب آپ صرف غسل خانہ تلاش کر رہے ہوں تو بہت مشکل۔ +- **ہائی لیول پروگرامنگ** ایسے ہے جیسے آپ کا وہ زبردست مقامی دوست جو آپ کو بالکل سمجھتا ہے۔ آپ انگریزی میں کہہ سکتے ہیں "مجھے واقعی باتھ روم ملنا ہے"، اور وہ ساری ثقافتی ترجمہ کر کے آپ کو ایسی ہدایات دیتا ہے جو آپ کے غیر مقامی دماغ کے لئے بلکل آسان ہوں۔ -پروگرامنگ کی اصطلاحات میں: -- **لو لیول زبانیں** (جیسے Assembly یا C) آپ کو کمپیوٹر کے اصل ہارڈویئر کے ساتھ انتہائی تفصیلی بات چیت کرنے دیتی ہیں، لیکن آپ کو مشین کی طرح سوچنا پڑتا ہے، جو... ٹھیک ہے، آئیے صرف یہ کہیں کہ یہ ایک بہت بڑی ذہنی تبدیلی ہے! -- **ہائی لیول زبانیں** (جیسے JavaScript, Python, یا C#) آپ کو انسان کی طرح سوچنے دیتی ہیں جبکہ وہ تمام مشین کی زبان کو پس پردہ سنبھالتی ہیں۔ اس کے علاوہ، ان کے پاس انتہائی خوش آمدید کہنے والی کمیونٹیز ہیں جو ان لوگوں سے بھری ہوئی ہیں جو یاد رکھتے ہیں کہ نیا ہونا کیسا محسوس ہوتا ہے اور واقعی آپ کی مدد کرنا چاہتے ہیں! +پروگرامنگ کی زبانوں میں: +- **لو لیول زبانیں** (جیسے اسمبلی یا C) آپ کو کمپیوٹر کے ہارڈویئر سے انتہائی تفصیلی بات چیت کرنے دیتی ہیں، لیکن آپ کو مشین کی طرح سوچنا پڑتا ہے، جو... چلیے کہہ لیتے ہیں یہ دماغ کے لیے بڑا چیلنج ہے! +- **ہائی لیول زبانیں** (جیسے JavaScript, Python, یا C#) آپ کو انسان کی طرح سوچنے دیتی ہیں جب کہ وہ پس منظر میں مشین کی زبان کو سنبھالتی ہیں۔ علاوہ ازیں، ان کے پاس خوش آمدید کہنی والی کمیونٹیز ہوتی ہیں جو آپ کے لیے مدد کرنے کے لیے ہمیشہ موجود ہوتی ہیں کیونکہ وہ جانتی ہیں کہ نئی ہونے کا کیا مطلب ہے! -آپ اندازہ لگا سکتے ہیں کہ میں آپ کو کس سے شروع کرنے کا مشورہ دوں گا؟ 😉 ہائی لیول زبانیں تربیتی پہیوں کی طرح ہیں جنہیں آپ کبھی بھی ہٹانا نہیں چاہیں گے کیونکہ وہ پورے تجربے کو بہت زیادہ خوشگوار بناتی ہیں! +تو میں آپ کو کس سے شروع کرنے کی تجویز دوں گا؟ 😉 ہائی لیول زبانیں ایسی ہیں جیسے آپ کے پاس تربیتی پہیے ہوں جو آپ کبھی نہیں اتارنا چاہیں گے کیونکہ وہ پورے تجربے کو بہت زیادہ خوشگوار بناتے ہیں! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 انسانی سوچ:
'میں فیبوناچی اعداد شمار کرنا چاہتا ہوں'"] --> B{زبان کی سطح منتخب کریں} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|اعلی سطح| C["🌟 جاوااسکرپٹ/پائتھن
پڑھنے اور لکھنے میں آسان"] + B -->|نیچلی سطح| D["⚙️ اسمبلی/سی
براہ راست ہارڈویئر کنٹرول"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 لکھیں: fibonacci(10)"] + D --> F["📝 لکھیں: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 کمپیوٹر کی سمجھ:
مترجم پیچیدگی کو سنبھالتا ہے"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 ایک ہی نتیجہ:
0، 1، 1، 2، 3، 5، 8، 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### میں آپ کو دکھاتا ہوں کیوں ہائی لیول زبانیں زیادہ خوشگوار ہوتی ہیں -### میں آپ کو دکھاتا ہوں کہ ہائی لیول زبانیں کیوں زیادہ دوستانہ ہیں +ٹھیک ہے، میں آپ کو کچھ دکھانے والا ہوں جو بالکل وضاحت کرتا ہے کہ میں ہائی لیول زبانوں سے کیوں محبت کرتا ہوں، لیکن پہلے – مجھے آپ سے وعدہ چاہیے۔ جب آپ پہلا کوڈ مثال دیکھیں، گھبرائیں نہیں! یہ دباؤ ڈالنے والا لگنا چاہیے۔ یہی وہ بات ہے جو میں بتانا چاہتا ہوں! -ٹھیک ہے، میں آپ کو کچھ دکھانے والا ہوں جو بالکل ظاہر کرتا ہے کہ میں ہائی لیول زبانوں سے کیوں محبت کرتا ہوں، لیکن پہلے – مجھے آپ سے کچھ وعدہ کرنے کی ضرورت ہے۔ جب آپ وہ پہلا کوڈ مثال دیکھیں، تو گھبرائیں نہیں! یہ خوفناک لگنا چاہیے۔ یہی وہ نکتہ ہے جو میں بنا رہا ہوں! +ہم ایک ہی کام دو بالکل مختلف انداز میں لکھے ہوئے دیکھنے جا رہے ہیں۔ دونوں وہ فبوناکی تسلسل بناتے ہیں – یہ ایک خوبصورت ریاضیاتی پیٹرن ہے جہاں ہر نمبر اس سے پہلے کے دو نمبروں کا مجموعہ ہوتا ہے: 0, 1, 1, 2, 3, 5, 8, 13... (دلچسپ بات: آپ کو یہ پیٹرن ہر جگہ ملے گا – سورج مکھی کے بیجوں کے سرپل، پنجہ دار درختوں کے نمونے، حتیٰ کہ کہکشاؤں کے بننے کے انداز میں!) -ہم بالکل ایک ہی کام کو دو مکمل طور پر مختلف انداز میں لکھا ہوا دیکھنے جا رہے ہیں۔ دونوں وہ چیز تخلیق کرتے ہیں جسے فبوناکی سیکوئنس کہا جاتا ہے – یہ ایک خوبصورت ریاضیاتی نمونہ ہے جہاں ہر نمبر اس سے پہلے کے دو نمبروں کا مجموعہ ہوتا ہے: 0, 1, 1, 2, 3, 5, 8, 13... (تفریحی حقیقت: آپ یہ نمونہ لفظی طور پر قدرت میں ہر جگہ پائیں گے – سورج مکھی کے بیجوں کے گھومنے، پائن کون کے نمونوں، یہاں تک کہ کہکشاؤں کے بننے کے طریقے میں!) - -تیار ہیں فرق دیکھنے کے لیے؟ چلیں! +فرق دیکھنے کے لیے تیار؟ چلیے چلتے ہیں! **ہائی لیول زبان (JavaScript) – انسان دوست:** ```javascript -// Step 1: Basic Fibonacci setup +// مرحلہ 1: بنیادی فبونیکی ترتیب const fibonacciCount = 10; let current = 0; let next = 1; @@ -186,80 +183,138 @@ console.log('Fibonacci sequence:'); ``` **یہ کوڈ کیا کرتا ہے:** -- **ایک مستقل اعلان کریں** تاکہ یہ بتا سکیں کہ ہم کتنے فبوناکی نمبر بنانا چاہتے ہیں -- **دو متغیرات کو شروع کریں** تاکہ سیکوئنس میں موجودہ اور اگلے نمبروں کو ٹریک کریں -- **آغاز کریں** ابتدائی اقدار (0 اور 1) جو فبوناکی نمونہ کی وضاحت کرتی ہیں -- **ایک ہیڈر پیغام دکھائیں** تاکہ ہماری آؤٹ پٹ کی شناخت ہو +- **ایک مستقل متغیر اعلان کریں** کہ ہم کتنے Fibonacci نمبر بنانا چاہتے ہیں +- **دو متغیرات کو شروع کریں** جو موجودہ اور اگلے نمبروں کو ٹریک کریں +- **آغاز کی قیمتیں سیٹ کریں** (0 اور 1) جو Fibonacci کے پیٹرن کو وضع کرتے ہیں +- **ایک ہیڈر پیغام دکھائیں** جو ہماری آؤٹ پٹ کی نشاندہی کرتا ہے ```javascript -// Step 2: Generate the sequence with a loop +// مرحلہ 2: لوپ کے ساتھ تسلسل پیدا کریں for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // سلسلے میں اگلا نمبر حساب کریں const sum = current + next; current = next; next = sum; } ``` -**یہاں کیا ہوتا ہے:** -- **ہر پوزیشن کے ذریعے لوپ کریں** ہمارے سیکوئنس میں `for` لوپ کا استعمال کرتے ہوئے -- **ہر نمبر کو اس کی پوزیشن کے ساتھ دکھائیں** ٹیمپلیٹ لیٹرل فارمیٹنگ کا استعمال کرتے ہوئے -- **اگلا فبوناکی نمبر حساب کریں** موجودہ اور اگلی اقدار کو شامل کرکے -- **ہمارے ٹریکنگ متغیرات کو اپ ڈیٹ کریں** اگلی تکرار پر -- **تبصرے**: اعلیٰ سطح کی زبانیں وضاحتی تبصرے لکھنے کی حوصلہ افزائی کرتی ہیں جو کوڈ کو خود وضاحتی بناتی ہیں -- **ساخت**: جاوا اسکرپٹ کی منطقی ترتیب مسائل کو قدم بہ قدم سمجھنے کے انسانی طریقے سے میل کھاتی ہے -- **نگہداشت**: مختلف ضروریات کے لیے جاوا اسکرپٹ ورژن کو اپ ڈیٹ کرنا آسان اور واضح ہے +**یہاں کیا ہوتا ہے اس کی وضاحت:** +- **ایک `for` لوپ کے ذریعے** ہماری فہرست کے ہر مقام پر چلیں +- **ہر نمبر کو اس کے مقام کے ساتھ دکھائیں** ٹیمپلیٹ لٹریل فارمیٹنگ کے ذریعے +- **اگلا Fibonacci نمبر نکالیں** موجودہ اور اگلی قیمتوں کو جمع کر کے +- **ہماری ٹریکنگ ویریبلز کو اپ ڈیٹ کریں** تاکہ اگلی تکرار پر جا سکیں -✅ **فبوناکی تسلسل کے بارے میں**: یہ حیرت انگیز نمبر کا نمونہ (جہاں ہر نمبر پچھلے دو نمبروں کے مجموعے کے برابر ہوتا ہے: 0، 1، 1، 2، 3، 5، 8...) قدرت میں ہر جگہ نظر آتا ہے! آپ اسے سورج مکھی کے گھومنے والے نمونوں، پائن کون کے ڈیزائن، ناٹلس شیلز کے خم، اور یہاں تک کہ درختوں کی شاخوں کے بڑھنے کے طریقے میں بھی دیکھیں گے۔ یہ واقعی حیرت انگیز ہے کہ ریاضی اور کوڈ ہمیں قدرت کے حسن پیدا کرنے کے نمونوں کو سمجھنے اور دوبارہ تخلیق کرنے میں کیسے مدد دیتے ہیں! +```javascript +// مرحلہ 3: جدید فنکشنل نقطہ نظر +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; -## وہ بنیادی اجزاء جو جادو کو ممکن بناتے ہیں +// استعمال کی مثال +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**مندرجہ بالا میں، ہم نے:** +- **جدید ایرو فنکشن نحو استعمال کرتے ہوئے** ایک دوبارہ استعمال کے قابل فنکشن بنایا +- **ایک صف (array) بنائی** تاکہ مکمل تسلسل کو ذخیرہ کیا جا سکے بنسبت ایک ایک نمبر ظاہر کرنے کے +- **پچھلے نمبروں سے ہر نئے نمبر کے حساب کے لیے** صف کی انڈیکسنگ استعمال کی +- **مکمل تسلسل واپس کیا** تاکہ پروگرام کے دوسرے حصوں میں لچکدار استعمال ہو سکے + +**لو لیول زبان (ARM اسمبلی) – کمپیوٹر دوست:** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` -ٹھیک ہے، اب جب کہ آپ نے دیکھا کہ پروگرامنگ زبانیں عملی طور پر کیسی نظر آتی ہیں، آئیے ان بنیادی حصوں کو توڑتے ہیں جو ہر پروگرام کو تشکیل دیتے ہیں جو کبھی لکھا گیا ہے۔ ان کو اپنے پسندیدہ نسخے کے ضروری اجزاء کے طور پر سوچیں – ایک بار جب آپ سمجھ جائیں کہ ہر ایک کیا کرتا ہے، آپ تقریباً کسی بھی زبان میں کوڈ پڑھنے اور لکھنے کے قابل ہو جائیں گے! +نوٹ کریں کہ JavaScript ورژن تقریباً انگریزی ہدایات کی طرح پڑھتا ہے، جبکہ اسمبلی ورژن خفیہ کمانڈز استعمال کرتا ہے جو کمپیوٹر کے پروسیسر کو براہ راست کنٹرول کرتے ہیں۔ دونوں بالکل ایک ہی کام انجام دیتے ہیں، لیکن ہائی لیول زبان انسانوں کے لیے سمجھنا، لکھنا اور برقرار رکھنا بہت آسان ہے۔ -یہ پروگرامنگ کے گرامر کو سیکھنے جیسا ہے۔ یاد ہے اسکول میں جب آپ نے اسم، فعل، اور جملے بنانے کے طریقے کے بارے میں سیکھا تھا؟ پروگرامنگ کا اپنا گرامر ہے، اور ایمانداری سے، یہ انگریزی گرامر سے کہیں زیادہ منطقی اور معاف کرنے والا ہے! 😄 +**اہم فرق جو آپ نوٹس کریں گے:** +- **قابل مطالعہ**: جاوا اسکرپٹ وضاحتی نام جیسے `fibonacciCount` استعمال کرتا ہے جب کہ اسمبلی میں مخفف لیبل جیسے `r0`, `r1` استعمال ہوتے ہیں +- **تفسیرات**: ہائی لیول زبانیں وضاحتی کمنٹس کی حوصلہ افزائی کرتی ہیں جو کوڈ کو خود دستاویزی بناتی ہیں +- **ساخت**: جاوا اسکرپٹ کی منطقی روانی اس طریقے سے مماثل ہے جس طرح انسان مسائل کو قدم بہ قدم سوچتے ہیں +- **بحالی**: مختلف ضروریات کے لئے جاوا اسکرپٹ ورژن کو اپ ڈیٹ کرنا سیدھا اور واضح ہے -### بیانات: قدم بہ قدم ہدایات +✅ **فائبوناچی تسلسل کے بارے میں**: یہ بالکل حیرت انگیز نمبر کا پیٹرن (جہاں ہر نمبر اس سے پہلے دو نمبروں کے مجموعے کے برابر ہوتا ہے: 0، 1، 1، 2، 3، 5، 8...) قدرت میں بالکل *ہر جگہ* ظاہر ہوتا ہے! آپ اسے سورج مکھی کے پیچ، پائن کون کے نمونوں میں، ناٹیلس کے خول کے خم میں، اور یہاں تک کہ درختوں کی شاخوں کے بڑھنے کے انداز میں بھی دیکھیں گے۔ یہ واقعی ذہن کو حیران کرنے والا ہے کہ ریاضی اور کوڈ ہمیں قدرت کے ذریعے خوبصورتی پیدا کرنے والے نمونوں کو سمجھنے اور دوبارہ بنانے میں کس طرح مدد دیتے ہیں! -آئیے **بیانات** سے شروع کرتے ہیں – یہ آپ کے کمپیوٹر کے ساتھ گفتگو میں انفرادی جملوں کی طرح ہیں۔ ہر بیان کمپیوٹر کو ایک مخصوص کام کرنے کے لیے کہتا ہے، جیسے ہدایات دینا: "یہاں بائیں مڑیں،" "سرخ روشنی پر رکیں،" "اس جگہ پر پارک کریں۔" -مجھے بیانات کے بارے میں جو چیز پسند ہے وہ یہ ہے کہ وہ عام طور پر کتنے قابل مطالعہ ہوتے ہیں۔ یہ دیکھیں: +## وہ بنیادی اجزاء جو جادو کو ممکن بناتے ہیں + +چلیں، اب جب آپ نے دیکھا کہ پروگرامنگ زبانیں ایکشن میں کیسی دکھتی ہیں، تو آئیے ان بنیادی حصوں کو سمجھتے ہیں جو اصل میں ہر لکھے ہوئے پروگرام کی تشکیل کرتے ہیں۔ انہیں اپنے پسندیدہ نسخے کے اہم اجزاء سمجھیں – جب آپ کو یہ معلوم ہو جائے کہ ہر ایک کیا کرتا ہے، تو آپ تقریباً کسی بھی زبان میں کوڈ پڑھ اور لکھ سکیں گے! + +یہ پروگرامنگ کے گرامر سیکھنے جیسا ہے۔ یاد ہے جب آپ اسکول میں اسم، فعل اور جملے بنانے کا طریقہ سیکھتے تھے؟ پروگرامنگ کی اپنی گرامر ہوتی ہے، اور ایمانداری سے، یہ انگریزی گرامر سے کہیں زیادہ منطقی اور معاف کرنے والی ہے! 😄 + + +### اسٹیٹمنٹس: قدم بہ قدم ہدایات + +آئیے **اسٹیٹمنٹس** سے شروع کرتے ہیں – یہ آپ کے کمپیوٹر کے ساتھ بات چیت میں ہر ایک جملے کی مانند ہوتے ہیں۔ ہر اسٹیٹمنٹ کمپیوٹر کو ایک خاص کام کرنے کا کہتا ہے، جیسے ہدایات دینا: "یہاں بائیں مڑو"، "سرخ بتی پر رک جاؤ"، "اس جگہ گاڑی پارک کرو"۔ + +جو بات مجھے اسٹیٹمنٹس میں پسند ہے وہ ان کی عمومیت اور قابل فہم ہونا ہے۔ یہ دیکھیں: ```javascript -// Basic statements that perform single actions +// بنیادی بیانات جو ایک واحد عمل انجام دیتے ہیں const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **یہ کوڈ کیا کرتا ہے:** -- **ایک مستقل متغیر کا اعلان کریں** تاکہ صارف کے نام کو ذخیرہ کیا جا سکے -- **ایک مبارکبادی پیغام کو کنسول آؤٹ پٹ پر دکھائیں** -- **ریاضی کے عمل کا نتیجہ حساب کریں اور ذخیرہ کریں** +- صارف کے نام کو ذخیرہ کرنے کے لیے ایک مستقل ویری ایبل کا اعلان کرنا +- کنسول آؤٹ پٹ میں ایک خیرمقدمی پیغام دکھانا +- ایک ریاضیاتی عمل کا نتیجہ حساب اور ذخیرہ کرنا ```javascript -// Statements that interact with web pages +// بیانات جو ویب صفحہ جات کے ساتھ تعامل کرتے ہیں document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**قدم بہ قدم، یہاں کیا ہو رہا ہے:** -- **ویب پیج کے عنوان کو تبدیل کریں** جو براؤزر ٹیب میں ظاہر ہوتا ہے -- **پورے صفحے کے جسم کا پس منظر کا رنگ تبدیل کریں** +**قدم بہ قدم، یہ ہو رہا ہے:** +- ویب پیج کے ٹائٹل کو تبدیل کرنا جو براؤزر کے ٹیب میں ظاہر ہوتا ہے +- پورے صفحے کے پس منظر کا رنگ بدلنا + -### متغیرات: آپ کے پروگرام کا میموری سسٹم +### ویری ایبلز: آپ کے پروگرام کا میموری سسٹم -ٹھیک ہے، **متغیرات** ایمانداری سے میرے پسندیدہ تصورات میں سے ایک ہیں کیونکہ وہ ان چیزوں کی طرح ہیں جنہیں آپ ہر روز استعمال کرتے ہیں! +ٹھیک ہے، **ویری ایبلز** درحقیقت میرے سب سے پسندیدہ تصورات میں سے ہیں کیونکہ یہ آپ کی روزمرہ کی چیزوں سے بہت مشابہ ہوتے ہیں! -اپنے فون کی رابطہ فہرست کے بارے میں ایک لمحے کے لیے سوچیں۔ آپ سب کے فون نمبر یاد نہیں رکھتے – اس کے بجائے، آپ "ماں"، "بہترین دوست"، یا "پیزا پلیس جو رات 2 بجے تک ڈیلیور کرتی ہے" محفوظ کرتے ہیں اور اپنے فون کو اصل نمبر یاد رکھنے دیتے ہیں۔ متغیرات بالکل اسی طرح کام کرتے ہیں! وہ لیبل والے کنٹینرز کی طرح ہیں جہاں آپ کا پروگرام معلومات ذخیرہ کر سکتا ہے اور بعد میں ایک نام کا استعمال کرتے ہوئے اسے بازیافت کر سکتا ہے جو واقعی معنی رکھتا ہے۔ +اپنے فون کی کانٹیکٹ لسٹ کے بارے میں سوچیں۔ آپ ہر کسی کا نمبر یاد نہیں رکھتے – بلکہ آپ "ماں"، "سب سے اچھے دوست"، یا "پیزا کی دکان جو رات 2 بجے تک ڈلیور کرتی ہے" محفوظ کرتے ہیں اور فون نمبر کو یاد رکھتا ہے۔ ویری ایبلز بھی ویسے ہی کام کرتے ہیں! یہ لیبل لگائے ہوئے کنٹینرز کی طرح ہیں جہاں آپ کا پروگرام معلومات ذخیرہ کر سکتا ہے اور بعد میں سمجھ آنے والے نام کے ذریعے اسے حاصل کر سکتا ہے۔ -یہاں جو چیز واقعی ٹھنڈی ہے: جیسے جیسے آپ کا پروگرام چلتا ہے، متغیرات تبدیل ہو سکتے ہیں (اسی لیے نام "متغیر" ہے – دیکھیں انہوں نے کیا کیا؟)۔ بالکل اسی طرح جیسے آپ اس پیزا پلیس رابطے کو اپ ڈیٹ کر سکتے ہیں جب آپ کو کہیں اور بہتر جگہ مل جائے، متغیرات کو اپ ڈیٹ کیا جا سکتا ہے کیونکہ آپ کا پروگرام نئی معلومات سیکھتا ہے یا حالات بدلتے ہیں! +یہ واقعی زبردست ہے: ویری ایبلز پروگرام کے چلنے کے دوران بدل سکتے ہیں (اسی لیے انہیں "ویری ایبل" کہتے ہیں – آپ نے دیکھا؟)۔ جیسے آپ پیزا کی دکان کو اپ ڈیٹ کر سکتے ہیں جب آپ کہیں بہتر تلاش کر لیتے ہیں، ویری ایبلز بھی نئی معلومات سیکھنے یا حالات کی تبدیلی پر اپ ڈیٹ ہو سکتے ہیں! -مجھے آپ کو دکھانے دیں کہ یہ کتنا خوبصورت اور آسان ہو سکتا ہے: +آئیے دیکھتے ہیں کہ یہ کتنے خوبصورتی سے آسان ہے: ```javascript -// Step 1: Creating basic variables +// مرحلہ 1: بنیادی متغیرات بنانا const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -267,13 +322,13 @@ let isRaining = false; ``` **ان تصورات کو سمجھنا:** -- **غیر تبدیل ہونے والی اقدار کو `const` متغیرات میں ذخیرہ کریں** (جیسے سائٹ کا نام) -- **اپنے پروگرام کے دوران تبدیل ہونے والی اقدار کے لیے `let` استعمال کریں** -- **مختلف ڈیٹا کی اقسام تفویض کریں**: سٹرنگز (متن)، نمبر، اور بوولینز (سچ/جھوٹ) -- **وضاحتی نام منتخب کریں** جو بتاتے ہیں کہ ہر متغیر میں کیا ہے +- `const` ویری ایبلز میں غیر تبدیل ہونے والی قیمتیں ذخیرہ کرنا (جیسے سائٹ کا نام) +- ان قیمتوں کے لیے `let` کا استعمال کرنا جو پروگرام میں بدل سکتی ہیں +- مختلف ڈیٹا ٹائپس تفویض کرنا: سٹرنگز (متن)، نمبر، اور بولینز (true/false) +- وضاحتی نام منتخب کرنا جو ہر ویری ایبل کے مواد کی وضاحت کریں ```javascript -// Step 2: Working with objects to group related data +// مرحلہ 2: متعلقہ ڈیٹا کو گروپ کرنے کے لیے اشیاء کے ساتھ کام کرنا const weatherData = { location: "San Francisco", humidity: 65, @@ -281,50 +336,51 @@ const weatherData = { }; ``` -**اوپر، ہم نے:** -- **ایک آبجیکٹ بنایا** تاکہ متعلقہ موسمی معلومات کو ایک ساتھ گروپ کیا جا سکے -- **متعدد ڈیٹا کے ٹکڑوں کو ایک متغیر نام کے تحت منظم کیا** -- **ہر معلومات کے ٹکڑے کو واضح طور پر لیبل کرنے کے لیے کلیدی قدر کے جوڑے استعمال کیے** +**اوپر، ہم نے کیا کیا:** +- متعلقہ موسمی معلومات کو ایک جگہ جمع کرنے کے لیے ایک آبجیکٹ بنایا +- ایک ہی ویری ایبل کے تحت متعدد ڈیٹا کو منظم کیا +- ہر معلومات کے ٹکڑے کو واضح لیبل دینے کے لیے کلید-قدر جوڑی استعمال کی ```javascript -// Step 3: Using and updating variables +// مرحلہ ۳: متغیرات کا استعمال اور تازہ کاری console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// قابل تبدیلی متغیرات کی تازہ کاری currentWeather = "cloudy"; temperature = 68; ``` -**آئیے ہر حصے کو سمجھیں:** -- **معلومات کو ٹیمپلیٹ لیٹرلز کا استعمال کرتے ہوئے دکھائیں** `${}` نحو کے ساتھ -- **ڈاٹ نوٹیشن کا استعمال کرتے ہوئے آبجیکٹ پراپرٹیز تک رسائی حاصل کریں** (`weatherData.windSpeed`) -- **حالات کو تبدیل کرنے کی عکاسی کرنے کے لیے `let` کے ساتھ اعلان کردہ متغیرات کو اپ ڈیٹ کریں** -- **بامعنی پیغامات بنانے کے لیے متعدد متغیرات کو یکجا کریں** +**چلو ہر حصہ کو سمجھتے ہیں:** +- ٹیمپلیٹ لٹریلز کے ذریعے `${}` سنٹیکس کے ساتھ معلومات دکھانا +- ڈاٹ نوٹیشن (`weatherData.windSpeed`) کے ذریعے آبجیکٹ کی خصوصیات تک رسائی +- `let` سے اعلان کیے گئے ویری ایبلز کو بدلتے حالات کی عکاسی کے لیے اپ ڈیٹ کرنا +- بامعنی پیغامات بنانے کے لیے کئی ویری ایبلز کو ملانا ```javascript -// Step 4: Modern destructuring for cleaner code +// مرحلہ 4: صاف ستھرا کوڈ کے لیے جدید تقسیم کاری const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**آپ کو کیا جاننے کی ضرورت ہے:** -- **آبجیکٹس سے مخصوص پراپرٹیز نکالیں** ڈیسٹرکچرنگ اسائنمنٹ کا استعمال کرتے ہوئے -- **آبجیکٹ کیز کے جیسے ناموں کے ساتھ خود بخود نئے متغیرات بنائیں** -- **بار بار ڈاٹ نوٹیشن سے بچ کر کوڈ کو آسان بنائیں** +**جو آپ کو جاننا چاہیے:** +- ڈیسٹرکچرنگ اسائنمنٹ کے ذریعے آبجیکٹس سے مخصوص خصوصیات نکالنا +- آبجیکٹ کی چابیوں کے ایک جیسے ناموں کے ساتھ خودکار طور پر نئے ویری ایبلز بنانا +- بار بار ڈاٹ نوٹیشن استعمال کرنے سے بچ کر کوڈ سادہ بنانا + -### کنٹرول فلو: اپنے پروگرام کو سوچنا سکھائیں +### کنٹرول فلو: اپنے پروگرام کو سوچنا سکھانا -ٹھیک ہے، یہ وہ جگہ ہے جہاں پروگرامنگ بالکل حیرت انگیز ہو جاتی ہے! **کنٹرول فلو** بنیادی طور پر آپ کے پروگرام کو ہوشیار فیصلے کرنے کا طریقہ سکھا رہا ہے، بالکل اسی طرح جیسے آپ ہر روز بغیر سوچے سمجھے کرتے ہیں۔ +اب یہ حصہ واقعی دماغ ہلا دینے والا ہے! **کنٹرول فلو** بنیادی طور پر اپنے پروگرام کو ہوشیار فیصلے کرنا سکھانے کے برابر ہے، بالکل ویسے ہی جیسے آپ روزانہ بغیر سوچے سمجھے کرتے ہیں۔ -تصور کریں: آج صبح آپ نے شاید کچھ ایسا کیا ہوگا "اگر بارش ہو رہی ہے، تو میں چھتری لے جاؤں گا۔ اگر سردی ہے، تو میں جیکٹ پہنوں گا۔ اگر دیر ہو رہی ہے، تو میں ناشتہ چھوڑ دوں گا اور راستے میں کافی لے لوں گا۔" آپ کا دماغ قدرتی طور پر اس اگر-تو منطق کی روزانہ درجنوں بار پیروی کرتا ہے! +تصور کریں: آج صبح آپ نے شاید یہ سوچا ہوگا "اگر بارش ہو رہی ہے تو میں چھتری لے جاؤں گا۔ اگر سردی ہے تو جیکٹ پہنوں گا۔ اگر دیر ہو رہی ہے تو ناشتہ چھوڑ کر راستے میں کافی لے لوں گا۔" آپ کا دماغ یہ if-then منطق روزانہ درجنوں بار فطری طور پر استعمال کرتا ہے! -یہی وہ چیز ہے جو پروگراموں کو ذہین اور زندہ محسوس کرتی ہے بجائے اس کے کہ وہ صرف کسی بورنگ، پیش گوئی کے اسکرپٹ کی پیروی کریں۔ وہ واقعی کسی صورتحال کو دیکھ سکتے ہیں، جو ہو رہا ہے اس کا اندازہ لگا سکتے ہیں، اور مناسب جواب دے سکتے ہیں۔ یہ آپ کے پروگرام کو ایک دماغ دینے جیسا ہے جو ڈھال سکتا ہے اور انتخاب کر سکتا ہے! +یہی چیز پروگرامز کو ذہین اور زندہ محسوس کراتی ہے، نہ کہ محض ایک بورنگ، قابل پیش گوئی اسکرپٹ کی پیروی کرنے والا۔ وہ حقیقت میں ایک صورتحال کو دیکھ سکتے ہیں، اس کا جائزہ لے سکتے ہیں، اور مناسب ردعمل دے سکتے ہیں۔ یہ آپ کے پروگرام کو ایک ایسا دماغ دینے کے مترادف ہے جو حالات کے مطابق ڈھلتا اور فیصلے کرتا ہے! -یہ کیسے کام کرتا ہے، یہ دیکھنا چاہتے ہیں؟ مجھے آپ کو دکھانے دیں: +دیکھنا چاہتے ہیں یہ کمال کیسے کام کرتا ہے؟ میں آپ کو دکھاتا ہوں: ```javascript -// Step 1: Basic conditional logic +// مرحلہ 1: بنیادی مشروط منطق const userAge = 17; if (userAge >= 18) { @@ -336,13 +392,13 @@ if (userAge >= 18) { ``` **یہ کوڈ کیا کرتا ہے:** -- **چیک کریں** کہ آیا صارف کی عمر ووٹنگ کی ضرورت کو پورا کرتی ہے -- **شرط کے نتیجے کی بنیاد پر مختلف کوڈ بلاکس پر عمل کریں** -- **ووٹنگ کی اہلیت تک کتنا وقت باقی ہے حساب کریں اور دکھائیں اگر عمر 18 سے کم ہو** -- **ہر منظر نامے کے لیے مخصوص، مددگار تاثرات فراہم کریں** +- چیک کرتا ہے کہ صارف کی عمر ووٹنگ کے معیار پر پوری اترتی ہے یا نہیں +- حالت کے نتیجے کی بنیاد پر مختلف کوڈ بلاکس چلاتا ہے +- اگر عمر 18 سے کم ہے تو ووٹنگ کی اہلیت تک کتنا وقت ہے حساب اور دکھاتا ہے +- ہر منظرنامے کے لیے مخصوص، مددگار رائے فراہم کرتا ہے ```javascript -// Step 2: Multiple conditions with logical operators +// مرحلہ 2: منطقی آپریٹروں کے ساتھ متعدد شرائط const userAge = 17; const hasPermission = true; @@ -355,25 +411,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**یہاں کیا ہوتا ہے اس کو توڑنا:** -- **متعدد شرائط کو `&&` (اور) آپریٹر کا استعمال کرتے ہوئے یکجا کریں** -- **متعدد منظرناموں کے لیے `else if` کا استعمال کرتے ہوئے شرائط کی درجہ بندی بنائیں** -- **تمام ممکنہ کیسز کو ایک آخری `else` بیان کے ساتھ ہینڈل کریں** -- **ہر مختلف صورتحال کے لیے واضح، قابل عمل تاثرات فراہم کریں** +**یہاں کیا ہو رہا ہے اس کی وضاحت:** +- متعدد شرائط کو `&&` (اور) آپریٹر کے ساتھ جوڑنا +- کئی منظرناموں کے لیے `else if` کے ذریعے ہیرارکی بنانا +- آخری `else` سٹیٹمنٹ کے ذریعے تمام ممکنہ کیسز کا ہینڈل کرنا +- ہر مختلف حالت کے لیے واضح اور قابل عمل فیڈبیک دینا ```javascript -// Step 3: Concise conditional with ternary operator +// قدم 3: مختصر مشروط آپریٹر کے ساتھ ٹرنری const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**آپ کو یاد رکھنے کی ضرورت ہے:** -- **سادہ دو آپشن شرائط کے لیے ٹرنری آپریٹر (`? :`) استعمال کریں** -- **پہلے شرط لکھیں، اس کے بعد `?`، پھر سچ نتیجہ، پھر `:`، پھر جھوٹ نتیجہ** -- **جب آپ کو شرائط کی بنیاد پر اقدار تفویض کرنے کی ضرورت ہو تو اس پیٹرن کو لاگو کریں** +**جو آپ کو یاد رکھنا ہے:** +- سادہ دو انتخابی شرائط کے لیے ٹرنیری آپریٹر (`? :`) کا استعمال +- پہلے شرط لکھیں، پھر `?`، پھر سچ کا نتیجہ، پھر `:`، اور پھر جھوٹ کا نتیجہ +- جب آپ کو شرائط کی بنیاد پر قیمتیں تفویض کرنی ہوں تو یہ پیٹرن اپلائی کریں ```javascript -// Step 4: Handling multiple specific cases +// مرحلہ 4: متعدد مخصوص معاملات کو سنبھالنا const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -393,57 +449,58 @@ switch (dayOfWeek) { } ``` -**یہ کوڈ درج ذیل کو پورا کرتا ہے:** -- **متغیر کی قدر کو متعدد مخصوص کیسز کے خلاف ملائیں** -- **مشابہت والے کیسز کو ایک ساتھ گروپ کریں** (ہفتے کے دن بمقابلہ ہفتے کے آخر) -- **جب کوئی میچ مل جائے تو مناسب کوڈ بلاک پر عمل کریں** -- **غیر متوقع اقدار کو ہینڈل کرنے کے لیے `default` کیس شامل کریں** -- **اگلے کیس پر کوڈ کے جاری رہنے سے روکنے کے لیے `break` بیانات استعمال کریں** +**یہ کوڈ درج ذیل کام انجام دیتا ہے:** +- ویری ایبل کی قیمت کو متعدد مخصوص کیسز کے خلاف ملانا +- ایک جیسے کیسز کو گروپ کرنا (کام کے دن بمقابلہ ویک اینڈ) +- جب میچ ملے تو مناسب کوڈ بلاک چلانا +- غیر متوقع قیمتوں سے نمٹنے کے لیے `default` کیس شامل کرنا +- `break` اسٹیٹمنٹس استعمال کرنا تاکہ کوڈ اگلے کیس تک نہ پہنچے -> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو دنیا کے سب سے زیادہ صبر کرنے والے GPS کی طرح سمجھیں جو آپ کو ہدایات دے رہا ہے۔ یہ کہہ سکتا ہے "اگر مین اسٹریٹ پر ٹریفک ہے، تو ہائی وے لیں۔ اگر ہائی وے پر تعمیراتی کام ہو رہا ہے، تو خوبصورت راستہ آزمائیں۔" پروگرام بالکل اسی قسم کی مشروط منطق کا استعمال کرتے ہیں تاکہ مختلف حالات کا ذہانت سے جواب دیں اور ہمیشہ صارفین کو بہترین ممکنہ تجربہ فراہم کریں۔ +> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو اس طرح سوچیں جیسے دنیا کا سب سے صبر والا GPS آپ کو راستے بتا رہا ہو۔ وہ کہہ سکتا ہے "اگر مین اسٹریٹ پر ٹریفک ہے تو ہائی وے لو۔ اگر ہائی وے تعمیراتی کام کی وجہ سے بلاک ہے تو خوبصورت راستہ آزما۔" پروگرام بھی بالکل اسی قسم کی شرطی منطق استعمال کرتے ہیں تاکہ مختلف حالات پر ہوشیاری سے رد عمل دیں اور صارفین کو بہترین ممکنہ تجربہ فراہم کریں۔ -### 🎯 **تصور کی جانچ: بنیادی اجزاء کی مہارت** -**آئیے دیکھتے ہیں کہ آپ بنیادی باتوں کے ساتھ کیسے کر رہے ہیں:** -- کیا آپ اپنے الفاظ میں متغیر اور بیان کے درمیان فرق کی وضاحت کر سکتے ہیں؟ -- ایک حقیقی دنیا کا منظر نامہ سوچیں جہاں آپ اگر-تو فیصلہ استعمال کریں گے (جیسے ہمارا ووٹنگ کی مثال) -- پروگرامنگ منطق کے بارے میں ایک چیز کیا ہے جس نے آپ کو حیران کیا؟ +### 🎯 **تصور کا جائزہ: بنیادی اجزاء کی مہارت** -**فوری اعتماد بڑھانے والا:** +**آئیے دیکھیں آپ بنیادی باتوں میں کیسے ہیں:** +- کیا آپ وضاحت کر سکتے ہیں کہ ویری ایبل اور اسٹیٹمنٹ میں کیا فرق ہے؟ +- کوئی حقیقی دنیا کی مثال سوچیں جہاں آپ if-then فیصلہ استعمال کریں (جیسا کہ ہمارا ووٹنگ مثال) +- پروگرامنگ لاجک میں آپ کو کون سی چیز سب سے زیادہ حیران کن لگی؟ + +**اعتماد بڑھانے کے لیے جلدی سے:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 بیانات
(ہدایات)"] --> B["📦 متغیرات
(ذخیرہ)"] --> C["🔀 کنٹرول بہاؤ
(فیصلے)"] --> D["🎉 کام کرنے والا پروگرام!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` - -✅ **آگے کیا آنے والا ہے**: ہم ان تصورات میں مزید گہرائی میں جانے کے لیے ایک زبردست وقت گزارنے والے ہیں جب ہم اس ناقابل یقین سفر کو ایک ساتھ جاری رکھیں گے! ابھی، بس ان تمام حیرت انگیز امکانات کے بارے میں جوش محسوس کرنے پر توجہ مرکوز کریں۔ مخصوص مہارتیں اور تکنیکیں قدرتی طور پر چپک جائیں گی جب ہم ایک ساتھ مشق کریں گے – میں وعدہ کرتا ہوں کہ یہ آپ کی توقع سے کہیں زیادہ مزہ آنے والا ہے! +``` +✅ **اگلا کیا ہے:** ہم ان تصورات کو مزید گہرائی میں جا کر دریافت کرنے کے لیے بے حد پرجوش ہیں! ابھی کے لیے صرف یہ جذبہ محسوس کریں کہ آپ کے سامنے کتنے حیرت انگیز امکانات ہیں۔ مخصوص مہارتیں اور تکنیکیں قدرتی طور پر ہمارے ساتھ مشق کرتے ہوئے آپ میں جم جائیں گی – میں وعدہ کرتا ہوں یہ بہت زیادہ مزہ دار ہوگا جیسا کہ آپ شاید سوچ رہے ہوں! + -## تجارت کے اوزار +## اوزارِ تجارت -ٹھیک ہے، یہ ایمانداری سے وہ جگہ ہے جہاں میں اتنا پرجوش ہو جاتا ہوں کہ میں خود کو بمشکل قابو میں رکھ سکتا ہوں! 🚀 ہم ان ناقابل یقین ٹولز کے بارے میں بات کرنے والے ہیں جو آپ کو ایسا محسوس کریں گے جیسے آپ کو ڈیجیٹل خلائی جہاز کی چابیاں دی گئی ہیں۔ +ٹھیک ہے، یہ وہ جگہ ہے جہاں میں واقعی اتنا پرجوش ہوتا ہوں کہ خود کو روک نہیں پاتا! 🚀 ہم ان شاندار آلات کے بارے میں بات کرنے والے ہیں جو آپ کو ایسا محسوس کرائیں گے جیسے آپ کو ابھی ابھی ڈیجیٹل اسپیس شپ کی چابیاں دے دی گئی ہوں۔ -آپ جانتے ہیں کہ ایک شیف کے پاس وہ بالکل متوازن چاقو ہوتے ہیں جو ان کے ہاتھوں کے توسیع کی طرح محسوس ہوتے ہیں؟ یا ایک موسیقار کے پاس وہ ایک گٹار ہوتا ہے جو ان کے چھونے کے لمحے گاتا ہوا لگتا ہے؟ ٹھیک ہے، ڈویلپرز کے پاس ہمارے اپنے ورژن ہیں ان جادوئی ٹولز کے، اور یہاں وہ چیز ہے جو آپ کے دماغ کو بالکل اڑا دے گی – ان میں سے زیادہ تر مکمل طور پر مفت ہیں! +کیا آپ نے کبھی غور کیا ہے کہ شیف کے پاس عین مطابق تیز دھار چھریاں ہوتی ہیں جو ان کے ہاتھوں کا توسیع محسوس ہوتی ہیں؟ یا موسیقار کے پاس وہ گٹار ہوتا ہے جو جیسے ہی اسے چھوتے ہیں گانے لگتا ہے؟ اچھا، ڈیولپرز کے پاس بھی ان جادوئی آلات کا اپنا ورژن ہے، اور آپ کا دماغ ہکا بکا رہ جائے گا کہ ان میں سے زیادہ تر بالکل مفت ہیں! -میں آپ کے ساتھ ان کا اشتراک کرنے کے بارے میں سوچتے ہوئے اپنی کرسی پر اچھل رہا ہوں کیونکہ انہوں نے مکمل طور پر انقلاب برپا کر دیا ہے کہ ہم سافٹ ویئر کیسے بناتے ہیں۔ ہم AI سے چلنے والے کوڈنگ اسسٹنٹس کے بارے میں بات کر رہے ہیں جو آپ کے کوڈ کو لکھنے میں مدد کر سکتے ہیں (میں مذاق بھی نہیں کر رہا ہوں!)، کلاؤڈ ماحول جہاں آپ کہیں بھی Wi-Fi کے ساتھ پورے ایپلیکیشنز بنا سکتے ہیں، اور ڈیبگنگ ٹولز جو اتنے نفیس ہیں کہ وہ آپ کے پروگراموں کے لیے ایکس رے وژن رکھنے جیسے ہیں۔ +میں اپنی کرسی پر چھلانگیں لگا رہا ہوں ان کے بارے میں آپ سے شیئر کرنے کے خیال سے کیونکہ انہوں نے ہمارے سافٹ ویئر بنانے کے طریقہ کو مکمل طور پر بدل کر رکھ دیا ہے۔ ہم بات کر رہے ہیں AI سے چلنے والے کوڈنگ اسسٹنٹس کی جو آپ کے کوڈ کو لکھنے میں مدد دیتے ہیں (میں مذاق نہیں کر رہا!), کلاؤڈ ماحول جہاں آپ کہیں سے بھی وائی فائی کے ذریعے پورے ایپس بنا سکتے ہیں، اور ڈیبگنگ ٹولز جو اتنے ماہر ہیں جیسے آپ کے پروگرامز کے لیے ایکس رے وژن ہو۔ -اور یہاں وہ حصہ ہے جو مجھے اب بھی جھنجھوڑ دیتا ہے: یہ "ابتدائی ٹولز" نہیں ہیں جنہیں آپ بڑھا دیں گے۔ یہ وہی پیشہ ورانہ گریڈ کے ٹولز ہیں جو گوگل، نیٹ فلکس، اور وہ انڈی ایپ اسٹوڈیو جسے آپ پسند کرتے ہیں، اس وقت استعمال کر رہے ہیں۔ آپ انہیں استعمال کرتے ہوئے ایک پرو کی طرح محسوس کریں گے! +اور یہ وہ حصہ ہے جو ابھی بھی مجھے سردیوں میں کپکپاہٹ دیتا ہے: یہ "نئے سیکھنے والوں کے ٹولز" نہیں ہیں جنہیں آپ بعد میں چھوڑ دیں گے۔ یہ وہی پروفیشنل درجے کے ٹولز ہیں جنہیں گوگل، نیٹ فلکس، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈیولپرز ابھی اسی لمحے استعمال کر رہے ہیں۔ آپ انہیں استعمال کرتے ہوئے خود کو واقعی ماہر محسوس کریں گے! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 آپ کا خیال"] --> B["⌨️ کوڈ ایڈیٹر
(VS Code)"] + B --> C["🌐 براؤزر ڈیوٹولز
(ٹیسٹنگ اور ڈی بگنگ)"] + C --> D["⚡ کمانڈ لائن
(آٹومیشن اور ٹولز)"] + D --> E["📚 دستاویزات
(تعلم اور حوالہ)"] + E --> F["🚀 شاندار ویب ایپ!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 اے آئی اسسٹنٹ
(GitHub Copilot)"] + C -.-> H["📱 ڈیوائس ٹیسٹنگ
(ردعملی ڈیزائن)"] + D -.-> I["📦 پیکج منیجرز
(npm, yarn)"] + E -.-> J["👥 کمیونٹی
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -451,219 +508,229 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` - -### کوڈ ایڈیٹرز اور IDEs: آپ کے نئے ڈیجیٹل بہترین دوست +``` +### کوڈ ایڈیٹرز اور IDEs: آپ کے نئے ڈیجیٹل بہترین دوست -آئیے کوڈ ایڈیٹرز کے بارے میں بات کرتے ہیں – یہ سنجیدگی سے آپ کے نئے پسندیدہ جگہیں بننے والے ہیں! انہیں اپنے ذاتی کوڈنگ سینکچرری کے طور پر سوچیں جہاں آپ اپنا زیادہ تر وقت اپنے ڈیجیٹل تخلیقات کو تیار کرنے اور کامل بنانے میں گزاریں گے۔ +آئیے کوڈ ایڈیٹرز کے بارے میں بات کرتے ہیں – یہ واقعی آپ کے نئے پسندیدہ جگہیں بننے والے ہیں جہاں آپ اپنے ڈیجیٹل تخلیقات بنانے اور بہتر کرنے میں زیادہ تر وقت گزاریں گے۔ -لیکن یہاں جدید ایڈیٹرز کے بارے میں جو چیز بالکل جادوئی ہے وہ یہ ہے: وہ صرف فینسی ٹیکسٹ ایڈیٹرز نہیں ہیں۔ وہ آپ کے ساتھ 24/7 بیٹھے سب سے زیادہ شاندار، معاون کوڈنگ مینٹور رکھنے جیسے ہیں۔ وہ آپ کی ٹائپوز کو پکڑتے ہیں اس سے پہلے کہ آپ انہیں محسوس کریں، ایسی بہتری تجویز کرتے ہیں جو آپ کو ایک جینئس کی طرح دکھاتی ہیں، آپ کو سمجھنے میں مدد کرتے ہیں کہ کوڈ کا ہر ٹکڑا کیا کرتا ہے، اور ان میں سے کچھ تو یہ بھی پیش کرتے ہیں کہ آپ کیا ٹائپ کرنے والے ہیں اور آپ کے خیالات کو ختم کرنے کی پیشکش کرتے ہیں! +مگر جدید ایڈیٹرز کی خاص بات یہ ہے: یہ صرف فینسی ٹیکسٹ ایڈیٹر نہیں ہیں۔ یہ ایسے ہیں جیسے سب سے ذہین، مددگار کوڈنگ رہنما آپ کے ساتھ 24/7 بیٹھا ہو۔ یہ آپ کی ٹائپنگ کی غلطیاں آپ کو دکھائی دینے سے پہلے پکڑ لیتے ہیں، آپ کو بہتری کے ایسے مشورے دیتے ہیں جو آپ کو نابغہ ظاہر کرتے ہیں، ہر کوڈ کے ٹکڑے کو سمجھنے میں مدد کرتے ہیں، اور بعض ایڈیٹرز تو اس بات کا اندازہ بھی لگا لیتے ہیں کہ آپ کیا لکھنے والے ہیں اور آپ کے خیالات مکمل کرنے کی پیشکش کرتے ہیں! -مجھے یاد ہے جب میں نے پہلی بار آٹو کمپلیشن دریافت کیا – مجھے لفظی طور پر ایسا لگا جیسے میں مستقبل میں رہ رہا ہوں۔ آپ کچھ ٹائپ کرنا شروع کرتے ہیں، اور آپ کا ایڈیٹر کہتا ہے، "ارے، کیا آپ اس فنکشن کے بارے میں سوچ رہے تھے جو بالکل وہی کرتا ہے جو آپ کو ضرورت ہے؟" یہ ایک دماغ پڑھنے والے کوڈنگ ساتھی رکھنے جیسا ہے! +مجھے یاد ہے جب میں نے پہلی بار آٹو کمپلیشن دریافت کی تھی – میں واقعی محسوس کر رہا تھا جیسے مستقبل میں ہوں۔ آپ کچھ ٹائپ کرنا شروع کرتے ہیں، اور آپ کا ایڈیٹر کہتا ہے، "ارے، کیا آپ اس فنکشن کے بارے میں سوچ رہے تھے جو آپ کو بالکل چاہیے؟" یہ ایسا ہے جیسے آپ کا کوڈنگ دوست ایک ذہن پڑھنے والا ہو! -**یہ ایڈیٹرز کو اتنا ناقابل یقین کیا بناتا ہے؟** +**یہ ایڈیٹرز اتنے شاندار کیوں ہیں؟** -جدید کوڈ ایڈیٹرز پیداواری صلاحیت کو بڑھانے کے لیے متاثر کن خصوصیات کی ایک صف پیش کرتے ہیں: +جدید کوڈ ایڈیٹرز ایک متاثر کن فیچر سیٹ پیش کرتے ہیں جو آپ کی پیداواری صلاحیت کو بڑھانے کے لیے ڈیزائن کیا گیا ہے: -| خصوصیت | یہ کیا کرتی ہے | یہ کیوں مدد کرتی ہے | -|---------|--------------|--------------| -| **سینٹیکس ہائی لائٹنگ** | آپ کے کوڈ کے مختلف حصوں کو رنگ دیتی ہے | کوڈ کو پڑھنے اور غلطیوں کو دیکھنے میں آسان بناتی ہے | -| **آٹو کمپلیشن** | آپ کے ٹائپ کرنے کے ساتھ کوڈ تجویز کرتی ہے | کوڈنگ کو تیز کرتی ہے اور ٹائپوز کو کم کرتی ہے | -| **ڈیبگنگ ٹولز** | آپ کو غلطیاں تلاش کرنے اور ٹھیک کرنے میں مدد کرتی ہیں | خرابیوں کا سراغ لگانے کے وقت کو بچاتی ہیں | -| **ایکسٹینشنز** | خصوصی خصوصیات شامل کرتی ہیں | کسی بھی ٹیکنالوجی کے لیے اپنے ایڈیٹر کو حسب ضرورت بنائیں | +| خصوصیت | یہ کیا کرتی ہے | کیوں مددگار ہے | +|---------|----------------|---------------| +| **سِنٹیکس ہائلائٹنگ** | کوڈ کے مختلف حصوں کو رنگین کرتی ہے | کوڈ پڑھنا اور غلطیاں تلاش کرنا آسان بناتی ہے | +| **آٹو کمپلیشن** | جیسے جیسے آپ لکھتے ہیں کوڈ کی تجویز دیتی ہے | کوڈنگ کی رفتار بڑھاتی ہے اور ٹائپنگ کی غلطیاں کم کرتی ہے | +| **ڈیبگنگ کے ٹولز** | غلطیاں تلاش اور درست کرنے میں مدد دیتی ہے | مسئلے حل کرنے میں گھنٹوں کی بچت کرتی ہے | +| **ایکسٹینشنز** | مخصوص فیچرز شامل کرتی ہیں | آپ کے ایڈیٹر کو کسی بھی ٹیکنالوجی کے لیے حسبِ ضرورت بناتی ہیں | | **AI اسسٹنٹس** | کوڈ اور وضاحتیں تجویز کرتی ہیں | سیکھنے اور پیداواری صلاحیت کو تیز کرتی ہیں | -> 🎥 **ویڈیو وسائل**: کیا آپ ان ٹولز کو ایکشن میں دیکھنا چاہتے ہیں؟ اس [تجارت کے اوزار ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) کو ایک جامع جائزہ کے لیے دیکھیں۔ +> 🎥 **ویڈیو وسائل**: کیا آپ یہ ٹولز ایکشن میں دیکھنا چاہتے ہیں؟ اس [Tools of the Trade ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) کو دیکھیں جو ایک جامع جائزہ فراہم کرتا ہے۔ #### ویب ڈویلپمنٹ کے لیے تجویز کردہ ایڈیٹرز -**[ویژول اسٹوڈیو کوڈ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مفت) -- ویب ڈویلپرز میں سب سے زیادہ مقبول -- بہترین ایکسٹینشن ایکو سسٹم -- بلٹ ان ٹرمینل اور گٹ انٹیگریشن +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مفت) +- ویب ڈیولپرز میں سب سے زیادہ مقبول +- بہترین ایکسٹینشن ایکوسسٹم +- بلٹ ان ٹرمینل اور Git انٹیگریشن - **ضروری ایکسٹینشنز**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI سے چلنے والی کوڈ تجاویز - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - حقیقی وقت تعاون + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI پر مبنی کوڈ تجاویز + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - حقیقی وقت کا تعاون - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - خودکار کوڈ فارمیٹنگ - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - آپ کے کوڈ میں ٹائپوز کو پکڑیں + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - کوڈ میں ٹائپنگ کی غلطیاں پکڑنا **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ادا شدہ، طلباء کے لیے مفت) -- اعلی درجے کے ڈیبگنگ اور ٹیسٹنگ ٹولز +- اعلی درجے کے ڈیبگنگ اور ٹیسٹنگ کے ٹولز - ذہین کوڈ کمپلیشن - بلٹ ان ورژن کنٹرول -**کلاؤڈ -جب پہلی بار کسی نے مجھے براؤزر ڈیولپر ٹولز دکھائے، تو میں نے تقریباً تین گھنٹے صرف کلک کرتے ہوئے گزارے اور بار بار کہا، "رکو، یہ بھی کر سکتا ہے؟!" آپ واقعی کسی بھی ویب سائٹ کو حقیقی وقت میں ایڈٹ کر سکتے ہیں، دیکھ سکتے ہیں کہ سب کچھ کتنی تیزی سے لوڈ ہوتا ہے، مختلف ڈیوائسز پر اپنی سائٹ کی شکل کو ٹیسٹ کر سکتے ہیں، اور جاوا اسکرپٹ کو ایک ماہر کی طرح ڈیبگ کر سکتے ہیں۔ یہ بالکل حیرت انگیز ہے! +**کلاؤڈ بیسڈ IDEs** (مختلف قیمتیں) +- [GitHub Codespaces](https://github.com/features/codespaces) - آپ کے براؤزر میں مکمل VS Code +- [Replit](https://replit.com/) - سیکھنے اور کوڈ شئیر کرنے کے لیے بہترین +- [StackBlitz](https://stackblitz.com/) - فوری، مکمل ویب ڈویلپمنٹ + +> 💡 **شروع کرنے کا مشورہ**: Visual Studio Code سے شروع کریں – یہ مفت ہے، صنعت میں وسیع پیمانے پر استعمال ہوتا ہے، اور اس کی ایک بڑی کمیونٹی ہے جو مددگار ٹیوٹوریلز اور ایکسٹینشنز بناتی ہے۔ -**یہی وجہ ہے کہ براؤزرز آپ کا خفیہ ہتھیار ہیں:** -جب آپ کوئی ویب سائٹ یا ویب ایپلیکیشن بناتے ہیں، تو آپ کو دیکھنا ہوتا ہے کہ یہ حقیقی دنیا میں کیسی نظر آتی ہے اور کیسے کام کرتی ہے۔ براؤزرز نہ صرف آپ کا کام دکھاتے ہیں بلکہ کارکردگی، رسائی، اور ممکنہ مسائل کے بارے میں تفصیلی فیڈبیک بھی فراہم کرتے ہیں۔ +### ویب براؤزرز: آپ کی خفیہ ترقیاتی لیب + +ٹھیک ہے، اپنے ذہن کو مکمل طور پر حیران ہونے کے لیے تیار ہو جائیں! آپ جانتے ہیں کہ آپ براؤزرز کو سوشل میڈیا اسکрол کرنے اور ویڈیوز دیکھنے کے لیے استعمال کرتے ہیں؟ حقیقت یہ ہے کہ یہ پورا وقت آپ سے چھپایا ہوا ایک شاندار خفیہ ڈیولپر لیب تھا، جو آپ کے دریافت کرنے کا منتظر تھا! + +ہر بار جب آپ کسی ویب پیج پر رائٹ کلک کرتے ہیں اور "Inspect Element" کا انتخاب کرتے ہیں، آپ ایک پوشیدہ دنیا کے ڈیولپر ٹولز کھول رہے ہوتے ہیں جو سچ میں کچھ مہنگے سافٹ ویئر سے زیادہ طاقتور ہیں جن کے لیے میں نے سینکڑوں ڈالر ادا کیے ہیں۔ یہ ایسے ہے جیسے آپ کے عام باورچی خانے میں ایک خفیہ پینل کے پیچھے ایک پیشہ ور شیف کی لیبارٹری چھپی ہوئی ہو! +جب کسی نے مجھے پہلی بار براؤزر کے DevTools دکھائے، میں تین گھنٹے صرف کلک کرتے ہوئے اس پر غور کرتا رہا اور کہتا رہا "رکو، یہ بھی کر سکتا ہے؟!" آپ واقعی کسی بھی ویب سائٹ کو حقیقی وقت میں ایڈٹ کر سکتے ہیں، بالکل دیکھ سکتے ہیں کہ سب کچھ کتنی تیزی سے لوڈ ہو رہا ہے، اپنے سائٹ کو مختلف ڈیوائسز پر کیسا لگتا ہے جانچ سکتے ہیں، اور یہاں تک کہ جاوا اسکرپٹ کو ایک ماہر کی طرح ڈی بگ بھی کر سکتے ہیں۔ یہ واقعی دماغ ہلا دینے والا ہے! + +**براؤزر آپ کا پوشیدہ ہتھیار کیوں ہیں:** + +جب آپ کوئی ویب سائٹ یا ویب ایپلیکیشن بناتے ہیں، تو آپ کو یہ دیکھنا ہوتا ہے کہ یہ حقیقی دنیا میں کیسا دکھتا ہے اور کیسے چلتا ہے۔ براؤزر صرف آپ کا کام دکھاتے ہی نہیں بلکہ کارکردگی، رسائی، اور ممکنہ مسائل کے بارے میں تفصیلی فیڈبیک بھی فراہم کرتے ہیں۔ #### براؤزر ڈیولپر ٹولز (DevTools) -جدید براؤزرز میں جامع ڈیولپمنٹ سوئٹس شامل ہیں: +جدید براؤزرز میں جامع ترقیاتی سوئٹس شامل ہیں: -| ٹول کی قسم | یہ کیا کرتا ہے | استعمال کی مثال | -|------------|----------------|------------------| -| **ایلیمنٹ انسپیکٹر** | HTML/CSS کو حقیقی وقت میں دیکھیں اور ایڈٹ کریں | اسٹائلنگ کو ایڈجسٹ کریں اور فوری نتائج دیکھیں | -| **کنسول** | ایرر میسجز دیکھیں اور جاوا اسکرپٹ ٹیسٹ کریں | مسائل کو ڈیبگ کریں اور کوڈ کے ساتھ تجربہ کریں | -| **نیٹ ورک مانیٹر** | وسائل کے لوڈ ہونے کا ٹریک کریں | کارکردگی اور لوڈنگ وقت کو بہتر بنائیں | -| **ایکسس ایبلٹی چیکر** | انکلوسیو ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے | -| **ڈیوائس سیمولیٹر** | مختلف اسکرین سائزز پر پیش نظارہ کریں | بغیر متعدد ڈیوائسز کے ریسپانسیو ڈیزائن ٹیسٹ کریں | +| ٹول کیٹیگری | یہ کیا کرتا ہے | استعمال کی مثال | +|--------------|---------------|----------------| +| **المنٹ انسپکٹر** | حقیقی وقت میں HTML/CSS دیکھیں اور ایڈٹ کریں | سٹائلنگ میں تبدیلی کر کے فوری نتائج دیکھیں | +| **کنسول** | ایرر پیغامات دیکھیں اور جاوا اسکرپٹ ٹیسٹ کریں | مسائل کی ڈی بگنگ کریں اور کوڈ کے ساتھ تجربہ کریں | +| **نیٹ ورک مانیٹر** | وسائل کے لوڈ ہونے کا ریکارڈ رکھیں | کارکردگی اور لوڈنگ وقت کو بہتر بنائیں | +| **ایکسسیسبلٹی چیکر** | جامع ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے | +| **ڈیوائس سمیولیٹر** | مختلف سکرین سائزز پر پریویو کریں | متعدد ڈیوائسز کے بغیر ریسپانسیو ڈیزائن کو ٹیسٹ کریں | -#### ڈیولپمنٹ کے لیے تجویز کردہ براؤزرز +#### ترقی کے لئے تجویز کردہ براؤزر -- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - انڈسٹری اسٹینڈرڈ DevTools کے ساتھ وسیع دستاویزات -- **[فائر فاکس](https://developer.mozilla.org/docs/Tools)** - بہترین CSS گرڈ اور ایکسس ایبلٹی ٹولز -- **[ایج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیئم پر مبنی، مائیکروسافٹ کے ڈیولپر وسائل کے ساتھ +- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - صنعت کا معیار DevTools کے ساتھ وسیع دستاویزات +- **[فائر فاکس](https://developer.mozilla.org/docs/Tools)** - بہترین CSS Grid اور ایکسیسبلٹی ٹولز +- **[ایج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیم پر مبنی، مائیکروسافٹ کے ڈیولپر وسائل کے ساتھ -> ⚠️ **اہم ٹیسٹنگ ٹپ**: ہمیشہ اپنی ویب سائٹس کو متعدد براؤزرز میں ٹیسٹ کریں! جو کروم میں بالکل کام کرتا ہے وہ سفاری یا فائر فاکس میں مختلف نظر آ سکتا ہے۔ پروفیشنل ڈیولپرز تمام بڑے براؤزرز میں ٹیسٹ کرتے ہیں تاکہ صارفین کے تجربات کو مستقل رکھا جا سکے۔ +> ⚠️ **اہم ٹیسٹنگ ٹپ**: اپنی ویب سائٹس کو ہمیشہ مختلف براؤزرز میں ٹیسٹ کریں! جو کچھ کروم میں بالکل کام کرتا ہے، وہ سفاری یا فائر فاکس میں مختلف لگ سکتا ہے۔ ماہر ڈیولپرز تمام اہم براؤزرز میں تجربہ کرتے ہیں تاکہ مستقل صارف تجربات کو یقینی بنایا جا سکے۔ -### کمانڈ لائن ٹولز: ڈیولپر سپر پاورز کا گیٹ وے +### کمانڈ لائن ٹولز: آپ کی ڈیولپر سپرپاورز کا دروازہ -چلیں، یہاں کمانڈ لائن کے بارے میں ایک بالکل ایماندار لمحہ رکھتے ہیں، کیونکہ میں چاہتا ہوں کہ آپ یہ کسی ایسے شخص سے سنیں جو واقعی سمجھتا ہے۔ جب میں نے پہلی بار اسے دیکھا – بس یہ خوفناک سیاہ اسکرین جس پر ٹیکسٹ چمک رہا تھا – تو میں نے لفظی طور پر سوچا، "نہیں، بالکل نہیں! یہ 1980 کی دہائی کی ہیکر فلم جیسا لگتا ہے، اور میں یقینی طور پر اس کے لیے کافی ذہین نہیں ہوں!" 😅 +چلیے، کمانڈ لائن کے بارے میں ایک بالکل ایماندار لمحہ لیتے ہیں، کیونکہ میں چاہتا ہوں کہ آپ یہ کہیں کسی ایسے شخص سے سنیں جو واقعی اسے سمجھتا ہے۔ جب میں نے پہلی بار اسے دیکھا – صرف یہ خوفناک سیاہ سکرین جس پر متن ٹمٹما رہا تھا – میں نے واقعی سوچا، "نہیں، بالکل نہیں! یہ کچھ 1980 کی دہائی کی ہیکر فلم جیسا لگتا ہے، اور میں یقینی طور پر اس کے لیے کافی سمجھدار نہیں!" 😅 -لیکن یہ وہ بات ہے جو میں چاہتا ہوں کہ کسی نے مجھے اس وقت بتائی ہوتی، اور جو میں آپ کو ابھی بتا رہا ہوں: کمانڈ لائن خوفناک نہیں ہے – یہ دراصل آپ کے کمپیوٹر کے ساتھ براہ راست بات چیت کرنے جیسا ہے۔ اسے اس طرح سوچیں جیسے کھانے کا آرڈر دینا کسی فینسی ایپ کے ذریعے جس میں تصاویر اور مینو ہوں (جو اچھا اور آسان ہے) بمقابلہ اپنے پسندیدہ مقامی ریستوران میں جانا جہاں شیف بالکل جانتا ہے کہ آپ کیا پسند کرتے ہیں اور صرف آپ کے کہنے پر "کچھ حیرت انگیز" بنا سکتا ہے۔ +لیکن وہ بات جو میں چاہتا تھا کہ کسی نے مجھے اس وقت بتائی ہوتی، اور جو میں آپ کو ابھی بتا رہا ہوں یہ ہے: کمانڈ لائن خوفناک نہیں ہے – یہ درحقیقت آپ کے کمپیوٹر کے ساتھ براہ راست بات چیت کرنے جیسا ہے۔ اسے ایسے سمجھیں جیسے کھانے کا آرڈر دینا ایک خوبصورت ایپ کے ذریعے، جس میں تصاویر اور مینیو ہوں (جو آسان اور خوشگوار ہے)، کے بجائے آپ اپنے پسندیدہ مقامی ریسٹورنٹ میں جا رہے ہوں جہاں شیف جانتا ہے کہ آپ کو کیا پسند ہے اور صرف "چمکتا دمکتا کوئی سپرائز بنا دیں" کہنے پر کچھ بہترین بنا دیتا ہے۔ -کمانڈ لائن وہ جگہ ہے جہاں ڈیولپرز جادوگر محسوس کرتے ہیں۔ آپ کچھ جادوئی الفاظ (ٹھیک ہے، وہ صرف کمانڈز ہیں، لیکن وہ جادوئی محسوس ہوتے ہیں!) ٹائپ کرتے ہیں، انٹر دبائیں، اور بوم – آپ نے پورے پروجیکٹ کے ڈھانچے بنائے، دنیا بھر سے طاقتور ٹولز انسٹال کیے، یا اپنی ایپ کو انٹرنیٹ پر لاکھوں لوگوں کے لیے ڈپلائے کیا۔ ایک بار جب آپ اس طاقت کا پہلا ذائقہ حاصل کرتے ہیں، تو یہ واقعی کافی نشہ آور ہوتا ہے! +کمانڈ لائن وہ جگہ ہے جہاں ڈیولپرز خود کو جادوگر محسوس کرتے ہیں۔ آپ کچھ دکھاوے والے الفاظ (ٹھیک ہے، وہ صرف کمانڈز ہیں، لیکن جادوئی لگتے ہیں!) ٹائپ کرتے ہیں، انٹر دباتے ہیں، اور بوم! آپ نے پورے پروجیکٹ کے ڈھانچے بنا لیے، دنیا بھر سے طاقتور ٹولز انسٹال کیے، یا اپنی ایپ کو انٹرنیٹ پر لاکھوں لوگوں کے لیے تعینات کر دیا۔ جب آپ پہلی بار اس طاقت کا ذائقہ چکھ لیتے ہیں تو یہ واقعی عادت بن جاتی ہے! -**کیوں کمانڈ لائن آپ کا پسندیدہ ٹول بن جائے گا:** +**کمانڈ لائن آپ کا پسندیدہ ٹول کیوں بنے گا:** -گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، لیکن کمانڈ لائن آٹومیشن، درستگی، اور رفتار میں مہارت رکھتی ہے۔ بہت سے ڈیولپمنٹ ٹولز بنیادی طور پر کمانڈ لائن انٹرفیس کے ذریعے کام کرتے ہیں، اور انہیں مؤثر طریقے سے استعمال کرنا سیکھنا آپ کی پیداواریت کو ڈرامائی طور پر بہتر بنا سکتا ہے۔ +جبکہ گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، کمانڈ لائن خودکار کاری، درستگی، اور رفتار میں نمایاں ہے۔ بہت سے ترقیاتی ٹولز بنیادی طور پر کمانڈ لائن انٹرفیسز کے ذریعے کام کرتے ہیں، اور ان کو مؤثر طریقے سے سیکھنا آپ کی پیداواری صلاحیت کو نمایاں طور پر بڑھا سکتا ہے۔ ```bash -# Step 1: Create and navigate to project directory +# مرحلہ 1: پروجیکٹ کی ڈائریکٹری بنائیں اور اس میں جائیں mkdir my-awesome-website cd my-awesome-website ``` **یہ کوڈ کیا کرتا ہے:** -- **ایک نیا ڈائریکٹری بنائیں** جس کا نام "my-awesome-website" ہو آپ کے پروجیکٹ کے لیے -- **نئے بنائے گئے ڈائریکٹری میں جائیں** تاکہ کام شروع کریں +- **ایک نیا ڈائریکٹری بنائیں جس کا نام "my-awesome-website" ہو آپ کے پروجیکٹ کے لیے** +- **نئے بنائے گئے ڈائریکٹری میں جائیں اور کام شروع کریں** ```bash -# Step 2: Initialize project with package.json +# مرحلہ 2: پراجیکٹ کو package.json کے ساتھ شروع کریں npm init -y -# Install modern development tools +# جدید ترقیاتی ٹولز انسٹال کریں npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**مرحلہ وار، یہاں کیا ہو رہا ہے:** -- **ایک نیا Node.js پروجیکٹ شروع کریں** ڈیفالٹ سیٹنگز کے ساتھ `npm init -y` استعمال کرتے ہوئے -- **Vite انسٹال کریں** ایک جدید بلڈ ٹول کے طور پر تیز ڈیولپمنٹ اور پروڈکشن بلڈز کے لیے -- **Prettier شامل کریں** خودکار کوڈ فارمیٹنگ کے لیے اور ESLint کوڈ کوالٹی چیکس کے لیے -- **`--save-dev` فلیگ استعمال کریں** تاکہ انہیں صرف ڈیولپمنٹ کے لیے ڈیپینڈنسیز کے طور پر نشان زد کریں +**قدم بہ قدم، یہ ہو رہا ہے:** +- **نئے Node.js پروجیکٹ کو ڈیفالٹ سیٹنگز کے ساتھ `npm init -y` چلائیں** +- **Vite کو تیز ترقی اور پروڈکشن بیلڈ کے لیے جدید بلڈ ٹول کے طور پر انسٹال کریں** +- **Prettier کو خودکار کوڈ فارمیٹنگ کے لیے اور ESLint کو کوڈ کوالٹی چیکس کے لیے شامل کریں** +- **`--save-dev` فلیگ استعمال کریں تاکہ یہ صرف ترقیاتی انحصار کے طور پر نشان زد ہوں** ```bash -# Step 3: Create project structure and files +# مرحلہ 3: پروجیکٹ کا ڈھانچہ اور فائلیں بنائیں mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# ترقیاتی سرور شروع کریں npx vite ``` **اوپر، ہم نے:** -- **اپنے پروجیکٹ کو منظم کیا** سورس کوڈ اور اثاثوں کے لیے الگ فولڈرز بنا کر -- **ایک بنیادی HTML فائل بنائی** مناسب دستاویز کے ڈھانچے کے ساتھ -- **Vite ڈیولپمنٹ سرور شروع کیا** لائیو ری لوڈنگ اور ہاٹ ماڈیول ریپلیسمنٹ کے لیے +- **اپنے پروجیکٹ کو منظم کیا، سورس کوڈ اور اثاثوں کے لیے الگ فولڈر بنائے** +- **مناسب دستاویز ڈھانچے کے ساتھ ایک بنیادی HTML فائل تیار کی** +- **Vite ڈیولپمنٹ سرور شروع کیا تاکہ لائیو ری لوڈنگ اور ہاٹ ماڈیول رپلیسمنٹ ہو سکے** -#### ویب ڈیولپمنٹ کے لیے ضروری کمانڈ لائن ٹولز +#### ویب ڈویلپمنٹ کے لیے ضروری کمانڈ لائن ٹولز -| ٹول | مقصد | کیوں آپ کو اس کی ضرورت ہے | -|-----|-------|---------------------------| -| **[Git](https://git-scm.com/)** | ورژن کنٹرول | تبدیلیوں کو ٹریک کریں، دوسروں کے ساتھ تعاون کریں، اپنا کام بیک اپ کریں | -| **[Node.js & npm](https://nodejs.org/)** | جاوا اسکرپٹ رن ٹائم اور پیکیج مینجمنٹ | براؤزرز کے باہر جاوا اسکرپٹ چلائیں، جدید ڈیولپمنٹ ٹولز انسٹال کریں | -| **[Vite](https://vitejs.dev/)** | بلڈ ٹول اور ڈیولپمنٹ سرور | تیز رفتار ڈیولپمنٹ ہاٹ ماڈیول ریپلیسمنٹ کے ساتھ | -| **[ESLint](https://eslint.org/)** | کوڈ کوالٹی | جاوا اسکرپٹ میں مسائل کو خود بخود تلاش کریں اور ٹھیک کریں | -| **[Prettier](https://prettier.io/)** | کوڈ فارمیٹنگ | اپنے کوڈ کو مستقل طور پر فارمیٹڈ اور پڑھنے کے قابل رکھیں | +| ٹول | مقصد | آپ کو کیوں چاہیے | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | ورژن کنٹرول | تبدیلیوں کو ٹریک کریں، دوسروں کے ساتھ کام کریں، اپنے کام کا بیک اپ لیں | +| **[Node.js & npm](https://nodejs.org/)** | جاوا اسکرپٹ رن ٹائم اور پیکج مینجمنٹ | براؤزر کے باہر جاوا اسکرپٹ چلائیں، جدید ترقیاتی ٹولز انسٹال کریں | +| **[Vite](https://vitejs.dev/)** | بلڈ ٹول اور ڈیولپمنٹ سرور | تیز ترین ترقیاتی ماحول کے ساتھ ہاٹ ماڈیول رپلیسمنٹ | +| **[ESLint](https://eslint.org/)** | کوڈ کوالٹی | آپ کے جاوا اسکرپٹ میں مسائل خودکار طریقے سے ڈھونڈیں اور ٹھیک کریں | +| **[Prettier](https://prettier.io/)** | کوڈ فارمیٹنگ | اپنا کوڈ مستقل اور قابل پڑھائی رکھیں | -#### پلیٹ فارم کے لحاظ سے اختیارات +#### پلیٹ فارم مخصوص اختیارات -**ونڈوز:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - جدید، فیچر سے بھرپور ٹرمینل +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - جدید اور فیچر سے بھرپور ٹرمینل - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - طاقتور اسکرپٹنگ ماحول - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - روایتی ونڈوز کمانڈ لائن **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - بلٹ ان ٹرمینل ایپلیکیشن -- **[iTerm2](https://iterm2.com/)** - جدید خصوصیات کے ساتھ بہتر ٹرمینل +- **[iTerm2](https://iterm2.com/)** - جدید خصوصیات کے ساتھ ترقی یافتہ ٹرمینل -**لینکس:** +**Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - معیاری لینکس شیل - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - جدید ٹرمینل ایمولیٹر -> 💻 = آپریٹنگ سسٹم پر پہلے سے انسٹال شدہ +> 💻 = آپریٹنگ سسٹم میں پہلے سے انسٹال ہوتا ہے -> 🎯 **سیکھنے کا راستہ**: بنیادی کمانڈز جیسے `cd` (ڈائریکٹری تبدیل کریں)، `ls` یا `dir` (فائلز کی فہرست)، اور `mkdir` (فولڈر بنائیں) سے شروع کریں۔ جدید ورک فلو کمانڈز جیسے `npm install`, `git status`, اور `code .` (موجودہ ڈائریکٹری کو VS Code میں کھولیں) کے ساتھ مشق کریں۔ جیسے جیسے آپ زیادہ آرام دہ ہوں گے، آپ خود بخود مزید جدید کمانڈز اور آٹومیشن تکنیک سیکھیں گے۔ +> 🎯 **سیکھنے کا راستہ**: بنیادی کمانڈز جیسے `cd` (ڈائریکٹری تبدیل کریں)، `ls` یا `dir` (فائلز کی فہرست)، اور `mkdir` (فولڈر بنائیں) سے شروع کریں۔ `npm install`, `git status`, اور `code .` (موجودہ ڈائریکٹری VS Code میں کھولیں) جیسے جدید ورک فلو کمانڈز کی مشق کریں۔ جیسے جیسے آپ کو آرام دہ محسوس ہوتا ہے، آپ خود بخود مزید جدید کمانڈز اور خودکار طریقے سیکھ لیں گے۔ -### دستاویزات: آپ کا ہمیشہ دستیاب سیکھنے کا رہنما +### ڈاکیومنٹیشن: آپ کا ہمہ وقت دستیاب لرننگ مینٹر -چلیں، میں آپ کے ساتھ ایک چھوٹا سا راز شیئر کرتا ہوں جو آپ کو ایک ابتدائی ہونے کے بارے میں بہت بہتر محسوس کرے گا: یہاں تک کہ سب سے زیادہ تجربہ کار ڈیولپرز اپنا بہت سا وقت دستاویزات پڑھنے میں گزارتے ہیں۔ اور یہ اس لیے نہیں کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں – یہ دراصل دانشمندی کی علامت ہے! +چلیے، ایک چھوٹا راز شیئر کرتا ہوں جو آپ کو بطور مبتدی بہت بہتر محسوس کرائے گا: یہاں تک کہ سب سے تجربہ کار ڈیولپرز بھی اپنی بہت ساری وقت ڈاکیومنٹیشن پڑھنے میں گزارتے ہیں۔ اور یہ اس لیے نہیں کہ انہیں پتہ نہیں ہے کہ وہ کیا کر رہے ہیں – بلکہ یہ حکمت کی نشانی ہے! -دستاویزات کو ایسے سمجھیں جیسے آپ کے پاس دنیا کے سب سے زیادہ صبر کرنے والے، علم رکھنے والے اساتذہ ہوں جو 24/7 دستیاب ہوں۔ رات 2 بجے کسی مسئلے پر پھنس گئے؟ دستاویزات وہاں ہیں ایک گرم ورچوئل گلے کے ساتھ اور بالکل وہ جواب جو آپ کو چاہیے۔ کسی زبردست نئے فیچر کے بارے میں جاننا چاہتے ہیں جس کے بارے میں سب بات کر رہے ہیں؟ دستاویزات آپ کے ساتھ ہیں مرحلہ وار مثالوں کے ساتھ۔ یہ سمجھنے کی کوشش کر رہے ہیں کہ کچھ کام کیسے اور کیوں ہوتا ہے؟ آپ نے صحیح اندازہ لگایا – دستاویزات آپ کو اس طرح سے سمجھانے کے لیے تیار ہیں کہ آخر کار آپ کو سمجھ آ جائے! +ڈاکیومنٹیشن کو ایسے سمجھیں جیسے دنیا کے سب سے صبر والے، علم والے استاد جو چوبیس گھنٹے آپ کے لیے دستیاب ہوں۔ کوئی مسئلہ آدھی رات کو؟ ڈاکیومنٹیشن ایک گرم ورچوئل گلے کے ساتھ آپ کے سوال کا بالکل درست جواب لاتی ہے۔ کوئی نیا فیچر سیکھنا ہے جس کی ہر کوئی بات کر رہا ہو؟ ڈاکیومنٹیشن آپ کی مدد میں موجود ہے قدم بہ قدم مثالوں کے ساتھ۔ کوئی چیز کیوں کام کرتی ہے اس کی سمجھنا چاہتے ہیں؟ جی ہاں – ڈاکیومنٹیشن آپ کو ایک ایسے انداز میں سمجھاتی ہے جو آخر کار بات سمجھ میں آ جائے! -یہاں ایک چیز ہے جس نے میری سوچ کو مکمل طور پر بدل دیا: ویب ڈیولپمنٹ کی دنیا ناقابل یقین حد تک تیزی سے حرکت کرتی ہے، اور کوئی بھی (میرا مطلب بالکل کوئی بھی نہیں!) سب کچھ یاد نہیں رکھتا۔ میں نے 15+ سال کے تجربے والے سینئر ڈیولپرز کو بنیادی سینٹیکس دیکھتے ہوئے دیکھا ہے، اور آپ جانتے ہیں کیا؟ یہ شرمندگی کی بات نہیں ہے – یہ ہوشیاری ہے! یہ کامل یادداشت رکھنے کے بارے میں نہیں ہے؛ یہ قابل اعتماد جوابات کو جلدی سے تلاش کرنے اور انہیں لاگو کرنے کے بارے میں ہے۔ +یہ بات جو میری نظر بدلی: ویب ڈویلپمنٹ کی دنیا بہت تیز بڑھتی ہے، اور کوئی بھی (بلکل کوئی نہیں) سب کچھ یاد نہیں رکھتا۔ میں نے سینئر ڈیولپرز کو 15+ سال کے تجربے کے ساتھ بنیادی سنٹیکس دیکھتے دیکھا ہے، اور جانتے ہیں کیا؟ یہ شرمندہ کرنے والی بات نہیں ہے – یہ ہوشیاری ہے! بات یادداشت کی نہیں، بلکہ اس بات کی ہے کہ آپ کو قابل اعتماد جوابات کہاں تلاش کرنے ہیں اور انہیں کیسے استعمال کرنا ہے۔ -**یہاں اصل جادو ہوتا ہے:** +**یہاں اصل جادو ہو رہا ہے:** -پروفیشنل ڈیولپرز اپنا ایک بڑا حصہ دستاویزات پڑھنے میں گزارتے ہیں – نہ کہ اس لیے کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں، بلکہ اس لیے کہ ویب ڈیولپمنٹ کا منظر نامہ اتنی تیزی سے ترقی کرتا ہے کہ موجودہ رہنے کے لیے مسلسل سیکھنا ضروری ہے۔ بہترین دستاویزات آپ کو یہ سمجھنے میں مدد دیتی ہیں کہ کچھ *کیسے* استعمال کرنا ہے، بلکہ *کیوں* اور *کب* استعمال کرنا ہے۔ +پیشہ ور ڈیولپرز اپنی بہت ساری وقت ڈاکیومنٹیشن پڑھنے میں گزارتے ہیں – اس لیے نہیں کہ وہ نہیں جانتے کہ کیا کرنا ہے، بلکہ چونکہ ویب ڈویلپمنٹ کا میدان تیزی سے بدل رہا ہے، تازہ دم رہنے کے لیے مسلسل سیکھنے کی ضرورت ہوتی ہے۔ زبردست ڈاکیومنٹیشن نہ صرف یہ سمجھاتی ہے کہ *کسی چیز کو کیسے استعمال کریں* بلکہ *کیوں* اور *کب* اسے استعمال کرنا چاہیے۔ -#### ضروری دستاویزاتی وسائل +#### ضروری ڈاکیومنٹیشن وسائل **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- ویب ٹیکنالوجی دستاویزات کے لیے گولڈ اسٹینڈرڈ -- HTML، CSS، اور جاوا اسکرپٹ کے لیے جامع گائیڈز -- براؤزر مطابقت کی معلومات شامل ہیں -- عملی مثالیں اور انٹرایکٹو ڈیموز پیش کرتا ہے +- ویب ٹیکنالوجی ڈاکیومنٹیشن کا سونا +- HTML، CSS، اور جاوا اسکرپٹ کے لیے جامع رہنما +- براؤزر کی مطابقت کی معلومات شامل +- عملی مثالیں اور انٹرایکٹو ڈیمو شامل -**[Web.dev](https://web.dev)** (گوگل کی طرف سے) -- جدید ویب ڈیولپمنٹ کے بہترین طریقے -- کارکردگی کی اصلاح کے گائیڈز -- ایکسس ایبلٹی اور انکلوسیو ڈیزائن کے اصول -- حقیقی دنیا کے پروجیکٹس سے کیس اسٹڈیز +**[Web.dev](https://web.dev)** (گوگل کی جانب سے) +- جدید ویب ڈویلپمنٹ کی بہترین مشقیں +- کارکردگی کو بہتر بنانے کے گائیڈز +- رسائی اور جامع ڈیزائن کے اصول +- حقیقی دنیا کے منصوبوں کے کیس اسٹڈیز **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- ایج براؤزر ڈیولپمنٹ وسائل -- پروگریسو ویب ایپ گائیڈز -- کراس پلیٹ فارم ڈیولپمنٹ بصیرت +- ایج براؤزر کی ترقیاتی وسائل +- پروگریسیو ویب ایپ گائیڈز +- کراس-پلیٹ فارم ترقیاتی بصیرت **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- ساختی سیکھنے کے نصاب -- انڈسٹری ماہرین کے ویڈیو کورسز -- ہینڈز آن کوڈنگ مشقیں +- منظم تعلیمی نصاب +- صنعت کے ماہرین کے ویڈیو کورسز +- عملی کوڈنگ مشقیں -> 📚 **مطالعہ کی حکمت عملی**: دستاویزات کو یاد کرنے کی کوشش نہ کریں – بلکہ، اسے مؤثر طریقے سے نیویگیٹ کرنے کا طریقہ سیکھیں۔ اکثر استعمال ہونے والے حوالہ جات کو بک مارک کریں اور مخصوص معلومات کو جلدی سے تلاش کرنے کے لیے سرچ فنکشنز کا استعمال کریں۔ +> 📚 **مطالعہ کی حکمت عملی**: ڈاکیومنٹیشن کو یاد کرنے کی کوشش نہ کریں – بلکہ اسے مؤثر طریقے سے نیویگیٹ کرنا سیکھیں۔ بار بار استعمال ہونے والے حوالے بک مارک کریں اور مخصوص معلومات جلد حاصل کرنے کے لیے سرچ فنکشنز کی مشق کریں۔ -### 🔧 **ٹول ماسٹری چیک: آپ کو کیا زیادہ دلچسپ لگتا ہے؟** +### 🔧 **ٹول ماسٹری چیک: آپ سے کیا مطابقت رکھتا ہے؟** -**ایک لمحہ نکالیں اور غور کریں:** -- کون سا ٹول آپ سب سے پہلے آزمانے کے لیے سب سے زیادہ پرجوش ہیں؟ (کوئی غلط جواب نہیں ہے!) -- کیا کمانڈ لائن اب بھی خوفناک لگتی ہے، یا آپ اس کے بارے میں متجسس ہیں؟ -- کیا آپ تصور کر سکتے ہیں کہ براؤزر DevTools کا استعمال کرتے ہوئے اپنی پسندیدہ ویب سائٹس کے پردے کے پیچھے جھانکیں؟ +**ایک لمحہ لیں اور غور کریں:** +- سب سے پہلے کون سا ٹول آزمانے کے لیے سب سے زیادہ پرجوش ہیں؟ (اس کا کوئی غلط جواب نہیں!) +- کیا کمانڈ لائن اب بھی خوفناک لگتی ہے یا آپ کو اس کے بارے میں تجسس ہے؟ +- کیا آپ تصور کر سکتے ہیں کہ براؤزر DevTools کے ذریعے اپنی پسندیدہ ویب سائٹس کے پردے کے پیچھے جھانکیں؟ ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "ڈیویلپر کے آلات کے ساتھ گزارا گیا وقت" + "کوڈ ایڈیٹر" : 40 + "براؤزر ٹیسٹنگ" : 25 + "کمانڈ لائن" : 15 + "دستاویزات کا مطالعہ" : 15 + "ڈیبگنگ" : 5 ``` +> **دلچسپ بات**: زیادہ تر ڈیولپرز اپنے کوڈ ایڈیٹر میں تقریباً 40% وقت گزارتے ہیں، لیکن دیکھیں کہ ٹیسٹنگ، سیکھنے، اور مسئلے حل کرنے میں کتنا وقت لگتا ہے۔ پروگرامنگ صرف کوڈ لکھنے کے بارے میں نہیں – یہ تجربات تخلیق کرنے کے بارے میں ہے! -> **دلچسپ بصیرت**: زیادہ تر ڈیولپرز اپنا تقریباً 40% وقت اپنے کوڈ ایڈیٹر میں گزارتے ہیں، لیکن نوٹ کریں کہ کتنا وقت ٹیسٹنگ، سیکھنے، اور مسئلے کو حل کرنے میں جاتا ہے۔ پروگرامنگ صرف کوڈ لکھنے کے بارے میں نہیں ہے – یہ تجربات تخلیق کرنے کے بارے میں ہے! +✅ **غور و فکر کے لیے**: یہ سوچیں – ویب سائٹس بنانے (ترقی) کے ٹولز اور ان کے دکھاوے کے انداز (ڈیزائن) کے لیے ٹولز میں کیا فرق ہو سکتا ہے؟ یہ ایسے ہے جیسے ایک معمار جو خوبصورت گھر ڈیزائن کرتا ہے اور ایک ٹھیکیدار جو اسے حقیقت میں بناتا ہے۔ دونوں اہم ہیں، مگر ان کے ٹول باکس مختلف ہوتے ہیں! یہ سوچ آپ کو یہ سمجھنے میں بہت مدد دے گی کہ ویب سائٹس کیسے زندگی پاتی ہیں۔ -✅ **غور کرنے کے لیے خوراک**: یہاں ایک دلچسپ بات ہے – آپ کے خیال میں ویب سائٹس بنانے کے ٹولز (ڈیولپمنٹ) ویب سائٹس کے ڈیزائن کے ٹولز (ڈیزائن) سے کیسے مختلف ہو سکتے ہیں؟ یہ بالکل ایسے ہے جیسے ایک معمار جو ایک خوبصورت گھر ڈیزائن کرتا ہے اور وہ ٹھیکیدار جو اسے حقیقت میں بناتا ہے۔ دونوں اہم ہیں، لیکن انہیں مختلف ٹول باکسز کی ضرورت ہوتی ہے! اس قسم کی سوچ واقعی آپ کو یہ بڑی تصویر دیکھنے میں مدد دے گی کہ ویب سائٹس کیسے زندہ ہوتی ہیں۔ +## GitHub Copilot Agent چیلنج 🚀 -## GitHub Copilot Agent Challenge 🚀 +ایجنٹ موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں: -Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں: +**تفصیل:** جدید کوڈ ایڈیٹر یا IDE کی خصوصیات دریافت کریں اور دکھائیں کہ یہ آپ کے ویب ڈیولپر ورک فلو کو کیسے بہتر بنا سکتا ہے۔ -**تفصیل:** ایک جدید کوڈ ایڈیٹر یا IDE کی خصوصیات کو دریافت کریں اور دکھائیں کہ یہ آپ کے ورک فلو کو بطور ویب ڈیولپر کیسے بہتر بنا سکتا ہے۔ - -**پرومپٹ:** ایک کوڈ ایڈیٹر یا IDE منتخب کریں (جیسے Visual Studio Code، WebStorm، یا کلاؤڈ بیسڈ IDE)۔ تین خصوصیات یا ایکسٹینشنز کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈیبگ کرنے، یا مؤثر طریقے سے برقرار رکھنے میں مدد دیتی ہیں۔ ہر ایک کے لیے، وضاحت کریں کہ یہ آپ کے ورک فلو کو کیسے فائدہ پہنچاتی ہے۔ +**پرومپٹ:** کوئی کوڈ ایڈیٹر یا IDE منتخب کریں (جیسے Visual Studio Code, WebStorm، یا کلاؤڈ بیسڈ IDE)۔ تین خصوصیات یا توسیعات کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈی بگ کرنے، یا کوڈ کی دیکھ بھال میں مدد دیتی ہیں۔ ہر ایک کے لیے اپنے ورک فلو پر اس کے فائدے کی مختصر وضاحت کریں۔ --- @@ -671,106 +738,119 @@ Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مک **ٹھیک ہے، جاسوس، کیا آپ اپنے پہلے کیس کے لیے تیار ہیں؟** -اب جب کہ آپ کے پاس یہ زبردست بنیاد ہے، میرے پاس ایک مہم جوئی ہے جو آپ کو دکھائے گی کہ پروگرامنگ کی دنیا کتنی متنوع اور دلچسپ ہے۔ اور سنیں – یہ ابھی کوڈ لکھنے کے بارے میں نہیں ہے، لہذا اس میں کوئی دباؤ نہیں! اپنے آپ کو ایک پروگرامنگ زبان کے جاسوس کے طور پر سوچیں جو اپنے پہلے دلچسپ کیس پر ہے! +اب جب کہ آپ نے یہ زبردست بنیاد حاصل کر لی ہے، میرے پاس ایک مہم ہے جو آپ کو دکھائے گی کہ پروگرامنگ کی دنیا کتنی حیرت انگیز اور مختلف ہو سکتی ہے۔ اور سنیں – ابھی یہ کوڈ لکھنے کا مرحلہ نہیں ہے، لہٰذا دباؤ نہ لیں! خود کو ایک پروگرامنگ زبانوں کے جاسوس کے طور پر سوچیں جو اپنے پہلے دلچسپ کیس پر ہے! -**آپ کا مشن، اگر آپ اسے قبول کرنے کا انتخاب کرتے ہیں:** -1. **ایک زبان کا ایکسپلورر بنیں**: تین پروگرامنگ زبانیں منتخب کریں جو مکمل طور پر مختلف دنیاؤں سے ہوں – شاید ایک جو ویب سائٹس بناتی ہے، ایک جو موبائل ایپس بناتی ہے، اور ایک جو سائنسدانوں کے لیے ڈیٹا کو کرنچ کرتی ہے۔ ہر زبان میں ایک ہی سادہ کام کی مثالیں تلاش کریں۔ میں وعدہ کرتا ہوں کہ آپ حیران ہوں گے کہ وہ بالکل مختلف نظر آ سکتی ہیں جبکہ بالکل ایک ہی کام کر رہی ہیں! +**آپ کا مشن، اگر آپ قبول کریں:** +1. **زبانوں کے کھوجی بنیں**: تین پروگرامنگ زبانوں کو منتخب کریں جو بالکل مختلف ہیں – شاید ایک ویب سائٹس بناتی ہے، ایک موبائل ایپس تیار کرتی ہے، اور ایک سائنس دانوں کے لیے ڈیٹا پروسیسنگ کرتی ہے۔ ہر زبان میں ایک ہی آسان کام کی مثالیں تلاش کریں۔ میں وعدہ کرتا ہوں کہ آپ حیران رہ جائیں گے کہ یہ مختلف زبانیں ایک ہی کام کتنی مختلف نظر آ کر کر سکتی ہیں! -2. **ان کی اصل کہانیاں دریافت کریں**: ہر زبان کو خاص کیا بناتا ہے؟ یہاں ایک زبردست حقیقت ہے – ہر ایک پروگرامنگ زبان اس لیے بنائی گئی کیونکہ کسی نے سوچا، "آپ جانتے ہیں کیا؟ اس مخصوص مسئلے کو حل کرنے کا ایک بہتر طریقہ ہونا چاہیے۔" کیا آپ یہ معلوم کر سکتے ہیں کہ وہ مسائل کیا تھے؟ ان میں سے کچھ کہانیاں واقعی دلچسپ ہیں! +2. **ان کی اصل کہانیاں دریافت کریں**: ہر زبان کیا خاص بناتی ہے؟ ایک دلچسپ حقیقت یہ ہے کہ ہر پروگرامنگ زبان اسی لیے بنی ہے کیونکہ کسی نے سوچا، "یہ مسئلہ حل کرنے کا ایک بہتر طریقہ ہونا چاہیے۔" کیا آپ ان مسائل کو سمجھ سکتے ہیں؟ ان میں سے کچھ کہانیاں واقعی دلچسپ ہیں! -3. **کمیونٹیز سے ملیں**: دیکھیں کہ ہر زبان کی کمیونٹی کتنی خوش آمدید اور پرجوش ہے۔ کچھ کے پاس لاکھوں ڈیولپرز ہیں جو علم کا اشتراک کرتے ہیں اور ایک دوسرے کی مدد کرتے ہیں -## جائزہ اور خود مطالعہ +3. **کمیونٹیز سے ملیں**: دیکھیں کہ ہر زبان کی کمیونٹی کتنی خوش آمدید کہتی ہے اور جذباتی ہے۔ کچھ کمیونٹیز میں لاکھوں ڈیولپرز ہوتے ہیں جو علم شیئر کرتے ہیں اور ایک دوسرے کی مدد کرتے ہیں، جبکہ کچھ چھوٹی مگر انتہائی مضبوط اور مددگار ہوتی ہیں۔ آپ مختلف شخصیتوں کو دیکھ کر لطف اندوز ہوں گے جو ان کمیونٹیز میں ہوتی ہیں! + +4. **اپنی جبلت پر عمل کریں**: کون سی زبان آپ کو ابھی سب سے زیادہ قابل رسائی لگتی ہے؟ "پرفیکٹ" انتخاب کرنے کی فکر نہ کریں – بس اپنی حس پر یقین کریں! واقعی یہاں کوئی غلط جواب نہیں، اور آپ ہمیشہ بعد میں دوسری زبانیں بھی دریافت کر سکتے ہیں۔ + +**اضافی جاسوسی کام**: دیکھیں کہ آپ کو معلوم ہو سکے کہ کون سی بڑی ویب سائٹس یا ایپس ہر زبان کے ساتھ بنی ہیں۔ میں ضمانت دیتا ہوں کہ آپ حیران رہ جائیں گے کہ Instagram, Netflix، یا وہ موبائل گیم جو آپ بند نہیں کر سکتے، ان کے پیچھے کون سی زبان ہے! + +> 💡 **یاد رکھیں**: آپ آج ان زبانوں میں ماہر بننے نہیں جا رہے۔ آپ صرف اس علاقے کو جان رہے ہیں تاکہ فیصلہ کر سکیں کہ کہاں قیام کریں۔ وقت لیں، مزہ کریں، اور اپنی تجسس کو رہنمائی دیں! -**آرام سے وقت لیں اور اس سے لطف اندوز ہوں!** +## آئیں منائیں آپ کی دریافت! -آپ نے آج بہت کچھ سیکھا ہے، اور یہ قابل فخر بات ہے! اب دلچسپ حصہ آتا ہے – ان موضوعات کو دریافت کرنا جنہوں نے آپ کی دلچسپی کو جنم دیا۔ یاد رکھیں، یہ ہوم ورک نہیں ہے – یہ ایک مہم جوئی ہے! +واہ، آپ نے آج بہت زبردست معلومات سیکھیں ہیں! میں واقعی پرجوش ہوں کہ دیکھوں کہ اس شاندار سفر کا کتنا حصہ آپ کے ساتھ رہ گیا ہے۔ اور یاد رکھیں – یہ کوئی امتحان نہیں ہے جس میں سب کچھ بالکل درست ہونا ضروری ہو۔ یہ صرف اس حیرت انگیز دنیا کے بارے میں آپ کی سیکھ کا جشن ہے جس میں آپ داخل ہونے والے ہیں! -**ان چیزوں میں گہرائی سے جائیں جو آپ کو دلچسپ لگتی ہیں:** +[سبق کے بعد کا کوئز دیں](https://ff-quizzes.netlify.app/web/) -**پروگرامنگ زبانوں کے ساتھ عملی تجربہ حاصل کریں:** -- ان 2-3 زبانوں کی آفیشل ویب سائٹس پر جائیں جنہوں نے آپ کی توجہ حاصل کی۔ ہر زبان کی اپنی شخصیت اور کہانی ہوتی ہے! -- کچھ آن لائن کوڈنگ پلیٹ فارمز جیسے [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، یا [Replit](https://replit.com/) آزمائیں۔ تجربہ کرنے سے نہ گھبرائیں – آپ کچھ خراب نہیں کر سکتے! -- اپنی پسندیدہ زبان کے آغاز کے بارے میں پڑھیں۔ واقعی، ان میں سے کچھ کہانیاں دلچسپ ہیں اور آپ کو سمجھنے میں مدد دیں گی کہ زبانیں اس طرح کیوں کام کرتی ہیں۔ +## جائزہ اور خود مطالعہ + +**اپنا وقت لیں اور اس کا لطف اٹھائیں!** +آپ نے آج بہت کچھ سیکھا ہے، اور یہ واقعی قابل فخر بات ہے! اب آتا ہے دلچسپ حصہ – ان موضوعات کی کھوج کرنا جو آپ کی تجسس کو بھڑکاتے ہیں۔ یاد رکھیں، یہ ہوم ورک نہیں ہے – یہ ایک مہم جوئی ہے! + +**اس بات میں مزید گہرائی سے غوطہ لگائیں جو آپ کو پرجوش کرتا ہے:** -**اپنے نئے ٹولز کے ساتھ آرام دہ ہوں:** -- اگر آپ نے ابھی تک Visual Studio Code ڈاؤنلوڈ نہیں کیا ہے تو اسے ڈاؤنلوڈ کریں – یہ مفت ہے اور آپ کو یہ پسند آئے گا! -- Extensions مارکیٹ پلیس کو چند منٹ کے لیے براؤز کریں۔ یہ آپ کے کوڈ ایڈیٹر کے لیے ایپ اسٹور کی طرح ہے! -- اپنے براؤزر کے Developer Tools کو کھولیں اور بس کلک کریں۔ سب کچھ سمجھنے کی فکر نہ کریں – بس وہاں موجود چیزوں سے واقفیت حاصل کریں۔ +**پروگرامنگ زبانوں کے ساتھ عملی کام کریں:** +- 2-3 زبانوں کی سرکاری ویب سائٹس دیکھیں جنہوں نے آپ کی توجہ حاصل کی ہو۔ ہر ایک کی اپنی شخصیت اور کہانی ہوتی ہے! +- کچھ آن لائن کوڈنگ پلیگراؤنڈز آزما کر دیکھیں جیسے [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، یا [Replit](https://replit.com/). تجربہ کرنے سے نہ گھبرائیں – آپ کچھ بھی خراب نہیں کر سکتے! +- اپنے پسندیدہ زبان کی پیدائش کے بارے میں پڑھیں۔ واقعی، ان اصل کہانیوں میں دلچسپ حقائق ہوتے ہیں اور یہ آپ کو سمجھنے میں مدد دیں گے کہ زبانیں اس طرح سے کام کیوں کرتی ہیں۔ + +**اپنے نئے آلات کے ساتھ آرام دہ ہو جائیں:** +- اگر آپ نے ابھی تک Visual Studio Code ڈاؤن لوڈ نہیں کیا تو اسے ابھی ڈاؤن لوڈ کریں – یہ مفت ہے اور آپ کو بہت پسند آئے گا! +- ایک چند منٹ خرچ کر کے ایکسٹینشنز مارکیٹ پلیس کو براؤز کریں۔ یہ آپ کے کوڈ ایڈیٹر کے لیے ایک ایپ اسٹور کی مانند ہے! +- اپنے براؤزر کے ڈویلپر ٹولز کھولیں اور بس مختلف جگہوں پر کلک کریں۔ ہر چیز کو سمجھنے کی فکر نہ کریں – صرف آشنائی حاصل کریں۔ **کمیونٹی میں شامل ہوں:** -- کچھ ڈویلپر کمیونٹیز کو [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/)، یا [GitHub](https://github.com/) پر فالو کریں۔ پروگرامنگ کمیونٹی نئے آنے والوں کے لیے انتہائی خوش آمدید ہے! -- یوٹیوب پر کچھ ابتدائی دوستانہ کوڈنگ ویڈیوز دیکھیں۔ وہاں بہت سارے زبردست تخلیق کار ہیں جو یاد رکھتے ہیں کہ شروع میں کیسا محسوس ہوتا ہے۔ -- مقامی ملاقاتوں یا آن لائن کمیونٹیز میں شامل ہونے پر غور کریں۔ یقین کریں، ڈویلپرز نئے آنے والوں کی مدد کرنا پسند کرتے ہیں! +- کچھ ڈویلپر کمیونٹیز کو [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), یا [GitHub](https://github.com/) پر فالو کریں۔ پروگرامنگ کمیونٹی نئے آنے والوں کے لیے بے حد خوش آمدید کہنے والی ہے! +- یوٹیوب پر کچھ ابتدائی سطح کے کوڈنگ ویڈیوز دیکھیں۔ بہت سے شاندار تخلیق کار ہیں جو یاد رکھتے ہیں کہ شروع کرنا کیسا ہوتا ہے۔ +- مقامی ملاقاتوں یا آن لائن کمیونٹیز میں شامل ہونے پر غور کریں۔ یقین کریں، ڈویلپر نئے آنے والوں کی مدد کرنا پسند کرتے ہیں! -> 🎯 **سنیں، یہ بات یاد رکھیں**: آپ سے یہ توقع نہیں کی جا رہی کہ آپ راتوں رات کوڈنگ کے ماہر بن جائیں! ابھی، آپ صرف اس حیرت انگیز نئی دنیا کو جاننے کی کوشش کر رہے ہیں جس کا آپ حصہ بننے والے ہیں۔ اپنا وقت لیں، سفر کا لطف اٹھائیں، اور یاد رکھیں – ہر وہ ڈویلپر جس کی آپ تعریف کرتے ہیں، کبھی وہیں بیٹھا تھا جہاں آپ ابھی ہیں، پرجوش اور شاید تھوڑا سا پریشان۔ یہ بالکل معمولی بات ہے، اور اس کا مطلب ہے کہ آپ صحیح کر رہے ہیں۔ +> 🎯 **سنیں، یہ بات یاد رکھیں:** آپ سے توقع نہیں کی جاتی کہ آپ ایک رات میں کوڈنگ کے جادوگر بن جائیں! ابھی، آپ بس اس حیرت انگیز نئی دنیا کو جان رہے ہیں جس کا حصہ بننے والے ہیں۔ اپنا وقت لیں، اس سفر کا لطف اٹھائیں، اور یاد رکھیں – ہر وہ ڈویلپر جس کی آپ تعریف کرتے ہیں کبھی آپ کی جگہ پر بیٹھا تھا، پرجوش اور شاید تھوڑا مغلوب محسوس کر رہا تھا۔ یہ بالکل معمول کی بات ہے، اور اس کا مطلب ہے کہ آپ صحیح راستے پر ہیں! ## اسائنمنٹ -[ڈاکس پڑھنا](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **آپ کے اسائنمنٹ کے لیے ایک چھوٹا سا اشارہ**: میں واقعی چاہوں گا کہ آپ کچھ ایسے ٹولز کو دریافت کریں جن پر ہم نے ابھی تک بات نہیں کی ہے! ان ایڈیٹرز، براؤزرز، اور کمانڈ لائن ٹولز کو چھوڑ دیں جن پر ہم پہلے ہی بات کر چکے ہیں – وہاں ایک حیرت انگیز دنیا ہے جو آپ کے دریافت کرنے کے لیے تیار ہے۔ ایسے ٹولز تلاش کریں جو فعال طور پر برقرار رکھے جا رہے ہوں اور جن کی کمیونٹیز متحرک اور مددگار ہوں (یہ عام طور پر بہترین ٹیوٹوریلز اور سب سے زیادہ معاون لوگ رکھتے ہیں جب آپ کو کسی مشکل میں مدد کی ضرورت ہو)۔ +> 💡 **آپ کے اسائنمنٹ کے لیے تھوڑی رہنمائی:** میں واقعی چاہوں گا کہ آپ کچھ ایسے آلات دریافت کریں جو ہم نے ابھی تک کور نہیں کیے! ان ایڈیٹرز، براؤزرز، اور کمانڈ لائن ٹولز کو چھوڑ دیں جن پر ہم بات کر چکے ہیں – وہاں ایک پوری حیرت انگیز دنیا ہے شاندار ڈویلپمنٹ ٹولز کی جو دریافت ہونے کا انتظار کر رہی ہے۔ ایسے ٹولز تلاش کریں جو باقاعدگی سے اپڈیٹ ہوتے ہوں اور جن کی زبردست، مددگار کمیونٹیز ہوں (ایسے ٹولز کے بہترین ٹیوٹوریلز اور سب سے زیادہ معاون لوگ ہوتے ہیں جب آپ کہیں پھنس جائیں اور دوستوں کی مدد چاہتے ہوں)۔ --- -## 🚀 آپ کا پروگرامنگ سفر کا ٹائم لائن +## 🚀 آپ کے پروگرامنگ کے سفر کا ٹائم لائن ### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں** -- [ ] 2-3 پروگرامنگ زبانوں کی ویب سائٹس کو بک مارک کریں جو آپ کی توجہ حاصل کر چکی ہیں -- [ ] Visual Studio Code ڈاؤنلوڈ کریں اگر آپ نے ابھی تک نہیں کیا ہے -- [ ] اپنے براؤزر کے DevTools (F12) کو کھولیں اور کسی بھی ویب سائٹ پر کلک کریں -- [ ] ایک پروگرامنگ کمیونٹی میں شامل ہوں (Dev.to، Reddit r/webdev، یا Stack Overflow) +- [ ] 2-3 پروگرامنگ زبانوں کی ویب سائٹس کو نشان زد کریں جو آپ کی توجہ حاصل کریں +- [ ] اگر آپ نے ابھی تک Visual Studio Code نہیں ڈاؤن لوڈ کیا تو اسے ڈاؤن لوڈ کریں +- [ ] اپنے براؤزر کے ڈویلپر ٹولز (F12) کھولیں اور کسی بھی ویب سائٹ پر کلک کریں +- [ ] ایک پروگرامنگ کمیونٹی میں شامل ہوں (Dev.to, Reddit r/webdev, یا Stack Overflow) ### ⏰ **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں** - [ ] سبق کے بعد کا کوئز مکمل کریں اور اپنے جوابات پر غور کریں -- [ ] VS Code کو GitHub Copilot ایکسٹینشن کے ساتھ سیٹ اپ کریں -- [ ] 2 مختلف پروگرامنگ زبانوں میں آن لائن "Hello World" مثال آزمائیں +- [ ] VS Code میں GitHub Copilot ایکسٹینشن سیٹ اپ کریں +- [ ] دو مختلف پروگرامنگ زبانوں میں آن لائن "Hello World" کی مثال آزما کر دیکھیں - [ ] یوٹیوب پر "Day in the Life of a Developer" ویڈیو دیکھیں -- [ ] اپنی پروگرامنگ زبان کی جاسوسی کا کام شروع کریں (چیلنج سے) +- [ ] پروگرامنگ زبان کی تفتیش کا کام شروع کریں (چیلنج سے) -### 📅 **آپ کی ہفتہ بھر کی مہم جوئی** -- [ ] اسائنمنٹ مکمل کریں اور 3 نئے ڈیولپمنٹ ٹولز کو دریافت کریں +### 📅 **آپ کا ہفتہ لمبا ایڈونچر** +- [ ] اسائنمنٹ مکمل کریں اور 3 نئے ڈیولپمنٹ ٹولز دریافت کریں - [ ] سوشل میڈیا پر 5 ڈویلپرز یا پروگرامنگ اکاؤنٹس کو فالو کریں -- [ ] CodePen یا Replit میں کچھ چھوٹا بنانے کی کوشش کریں (یہاں تک کہ "Hello, [آپ کا نام]!") -- [ ] کسی ڈویلپر کے بلاگ پوسٹ کو پڑھیں جو کسی کے کوڈنگ سفر کے بارے میں ہو -- [ ] ورچوئل ملاقات میں شامل ہوں یا پروگرامنگ ٹاک دیکھیں -- [ ] اپنی منتخب کردہ زبان کو آن لائن ٹیوٹوریلز کے ساتھ سیکھنا شروع کریں - -### 🗓️ **آپ کی مہینے بھر کی تبدیلی** -- [ ] اپنا پہلا چھوٹا پروجیکٹ بنائیں (یہاں تک کہ ایک سادہ ویب صفحہ بھی شمار ہوتا ہے!) -- [ ] کسی اوپن سورس پروجیکٹ میں تعاون کریں (دستاویزات کی اصلاحات سے شروع کریں) -- [ ] کسی ایسے شخص کی رہنمائی کریں جو ابھی اپنا پروگرامنگ سفر شروع کر رہا ہو +- [ ] CodePen یا Replit میں کچھ چھوٹا سا چیز بنانے کی کوشش کریں (یہاں تک کہ "Hello, [آپ کا نام]!" بھی!) +- [ ] کسی ڈویلپر کے کوڈنگ کے سفر کے بارے میں ایک بلاگ پوسٹ پڑھیں +- [ ] ایک ورچوئل میٹ اپ میں شامل ہوں یا کوئی پروگرامنگ ٹاک دیکھیں +- [ ] اپنے منتخب کردہ زبان کو آن لائن ٹیوٹوریلز سے سیکھنا شروع کریں + +### 🗓️ **آپ کا مہینہ لمبا تبدیلی کا دور** +- [ ] اپنا پہلا چھوٹا پروجیکٹ بنائیں (یہاں تک کہ ایک سادہ ویب پیج بھی شمار ہوتا ہے!) +- [ ] کسی اوپن سورس پروجیکٹ میں تعاون کریں (دستاویزات کی مرمت سے شروع کریں) +- [ ] کسی نئے آنے والے کو مینٹر کریں جو اپنی پروگرامنگ کا سفر شروع کر رہا ہو - [ ] اپنا ڈویلپر پورٹ فولیو ویب سائٹ بنائیں -- [ ] مقامی ڈویلپر کمیونٹیز یا اسٹڈی گروپس سے جڑیں -- [ ] اپنی اگلی سیکھنے کی منزل کی منصوبہ بندی شروع کریں +- [ ] مقامی ڈویلپر کمیونٹیز یا اسٹڈی گروپس سے رابطہ کریں +- [ ] اگلے سیکھنے کے سنگ میل کی منصوبہ بندی شروع کریں -### 🎯 **آخری عکاسی چیک ان** +### 🎯 **آخری جائزہ چیک ان** -**آگے بڑھنے سے پہلے، ایک لمحہ لیں اور جشن منائیں:** -- پروگرامنگ کے بارے میں آج آپ کو سب سے زیادہ کیا چیز دلچسپ لگی؟ -- کون سا ٹول یا تصور آپ سب سے پہلے دریافت کرنا چاہتے ہیں؟ -- پروگرامنگ سفر شروع کرنے کے بارے میں آپ کیسا محسوس کرتے ہیں؟ -- ابھی آپ کسی ڈویلپر سے کون سا سوال پوچھنا چاہیں گے؟ +**آگے بڑھنے سے پہلے، ایک لمحہ نکال کر جشن منائیں:** +- پروگرامنگ کے بارے میں آج آپ کو کیا چیز سب سے زیادہ پرجوش کر گئی؟ +- کون سا ٹول یا تصور آپ پہلے دریافت کرنا چاہیں گے؟ +- اس پروگرامنگ سفر کو شروع کرنے کے بارے میں آپ کیسا محسوس کر رہے ہیں؟ +- آپ فی الحال ڈویلپر سے کون سا سوال پوچھنا چاہیں گے؟ ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title آپ کا اعتماد بڑھانے کا سفر + section آج + متجسس: 3: You + مغلوب: 4: You + پرجوش: 5: You + section اس ہفتے + تلاش کر رہے ہیں: 4: You + سیکھ رہے ہیں: 5: You + رابطہ قائم کرنا: 4: You + section اگلا مہینہ + تعمیر کر رہے ہیں: 5: You + پراعتماد: 5: You + دوسروں کی مدد کر رہے ہیں: 5: You ``` - -> 🌟 **یاد رکھیں**: ہر ماہر کبھی ایک مبتدی تھا۔ ہر سینئر ڈویلپر نے کبھی بالکل وہی محسوس کیا تھا جو آپ ابھی محسوس کر رہے ہیں – پرجوش، شاید تھوڑا سا پریشان، اور یقینی طور پر یہ جاننے کے لیے متجسس کہ کیا ممکن ہے۔ آپ حیرت انگیز کمپنی میں ہیں، اور یہ سفر ناقابل یقین ہونے والا ہے۔ پروگرامنگ کی شاندار دنیا میں خوش آمدید! 🎉 +> 🌟 **یاد رکھیں:** ہر ماہر کبھی نیا سیکھنے والا تھا۔ ہر سینئر ڈویلپر نے بھی بالکل ویسا ہی محسوس کیا ہے جیسا آپ اب محسوس کر رہے ہیں – پرجوش، شاید تھوڑا سا مغلوب، اور حقیقتاً یہ جاننے کے لیے بے چین کہ کیا ممکن ہے۔ آپ شاندار ساتھیوں کے درمیان ہیں، اور یہ سفر ناقابل یقین ہوگا۔ پروگرامنگ کی شاندار دنیا میں خوش آمدید! 🎉 --- -**ڈسکلیمر**: -یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔ \ No newline at end of file + +**اخطار**: +یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے ترجمہ کی گئی ہے۔ جبکہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم اس بات سے آگاہ رہیں کہ خودکار تراجم میں غلطیاں یا عدم درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں معتبر ماخذ سمجھا جانا چاہیے۔ اہم معلومات کے لیے پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔ + \ No newline at end of file diff --git a/translations/ur/AGENTS.md b/translations/ur/AGENTS.md index 21da64671..83dca474c 100644 --- a/translations/ur/AGENTS.md +++ b/translations/ur/AGENTS.md @@ -2,23 +2,23 @@ ## پروجیکٹ کا جائزہ -یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب ایک جامع 12 ہفتوں کا کورس ہے جو Microsoft Cloud Advocates نے تیار کیا ہے، جس میں JavaScript, CSS, اور HTML پر مشتمل 24 عملی اسباق شامل ہیں۔ +یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب مائیکروسافٹ کلاؤڈ ایڈووکیٹس کی طرف سے تیار کردہ 12 ہفتوں پر محیط جامع کورس ہے، جس میں 24 عملی سبق شامل ہیں جو جاوا اسکرپٹ، CSS اور HTML کو کور کرتے ہیں۔ -### کلیدی اجزاء +### اہم اجزاء -- **تعلیمی مواد**: 24 منظم اسباق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں -- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر توسیع، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ -- **انٹرایکٹو کوئزز**: 48 کوئزز، ہر ایک میں 3 سوالات (سبق سے پہلے اور بعد کے جائزے) -- **کثیراللسانی تعاون**: GitHub Actions کے ذریعے 50 سے زائد زبانوں میں خودکار ترجمہ +- **تعلیمی مواد**: 24 منظم سبق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں +- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ +- **انٹرایکٹو کوئزز**: 48 کوئزز، ہر ایک میں 3 سوالات (سبق سے پہلے/بعد کی جانچ) +- **کثیر اللسانی حمایت**: GitHub Actions کے ذریعے 50+ زبانوں میں خودکار تراجم - **ٹیکنالوجیز**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI پروجیکٹس کے لیے) ### فن تعمیر -- سبق کے لحاظ سے تعلیمی ذخیرہ -- ہر سبق کے فولڈر میں README، کوڈ کی مثالیں، اور حل شامل ہیں -- مختلف ڈائریکٹریز میں آزاد پروجیکٹس (quiz-app، مختلف سبق کے پروجیکٹس) -- GitHub Actions (co-op-translator) کے ذریعے ترجمہ کا نظام -- Docsify کے ذریعہ دستاویزات فراہم کی جاتی ہیں اور PDF کے طور پر دستیاب ہیں +- سبق پر مبنی تعلیمی ذخیرہ +- ہر سبق کے فولڈر میں README، کوڈ کے مثالیں، اور حل شامل ہیں +- علیحدہ ڈائریکٹریز میں آزاد پروجیکٹس (quiz-app، مختلف سبق کے پروجیکٹس) +- GitHub Actions (co-op-translator) کے ذریعے ترجمہ نظام +- دستاویزات Docsify کے ذریعے فراہم اور پی ڈی ایف میں دستیاب ## سیٹ اپ کمانڈز @@ -36,8 +36,8 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # ترقیاتی سرور شروع کریں -npm run build # پیداوار کے لیے تعمیر کریں +npm run dev # سرور کی ترقی شروع کریں +npm run build # پیداواری کے لیے تعمیر کریں npm run lint # ESLint چلائیں ``` @@ -47,8 +47,8 @@ npm run lint # ESLint چلائیں cd 7-bank-project/api npm install npm start # اے پی آئی سرور شروع کریں -npm run lint # ای ایس لنٹ چلائیں -npm run format # پریٹیئر کے ساتھ فارمیٹ کریں +npm run lint # ESLint چلائیں +npm run format # Prettier کے ساتھ فارمیٹ کریں ``` ### براؤزر ایکسٹینشن پروجیکٹس @@ -56,7 +56,7 @@ npm run format # پریٹیئر کے ساتھ فارمیٹ کریں ```bash cd 5-browser-extension/solution npm install -# براؤزر مخصوص ایکسٹینشن لوڈ کرنے کی ہدایات پر عمل کریں +# براوزر مخصوص ایکسٹینشن لوڈ کرنے کی ہدایات پر عمل کریں ``` ### اسپیس گیم پروجیکٹس @@ -64,219 +64,219 @@ npm install ```bash cd 6-space-game/solution npm install -# بروزر میں index.html کھولیں یا Live Server استعمال کریں +# index.html کو براؤزر میں کھولیں یا Live Server استعمال کریں ``` -### چیٹ پروجیکٹ (Python بیک اینڈ) +### چیٹ پروجیکٹ (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN ماحول کی ویری ایبل سیٹ کریں +# GITHUB_TOKEN ماحول کی متغیر سیٹ کریں python api.py ``` ## ترقیاتی ورک فلو -### مواد کے منتظمین کے لیے +### مواد کے تعاون کاروں کے لیے -1. **ریپوزٹری کو فورک کریں** اپنے GitHub اکاؤنٹ میں -2. **اپنے فورک کو کلون کریں** لوکل مشین پر -3. **تبدیلیوں کے لیے نئی شاخ بنائیں** -4. سبق کے مواد یا کوڈ کی مثالوں میں تبدیلی کریں -5. متعلقہ پروجیکٹس کے فولڈرز میں کوڈ کی تبدیلیوں کا ٹیسٹ کریں -6. شراکت کی ہدایات کے مطابق پل ریکویسٹ جمع کروائیں +1. **ذخیرہ اپنے GitHub اکاؤنٹ پر فورک کریں** +2. **اپنے فورک کو مقامی کلون کریں** +3. **اپنے تبدیلیوں کے لیے نیا برانچ بنائیں** +4. سبق کے مواد یا کوڈ مثالوں میں تبدیلی کریں +5. متعلقہ پروجیکٹ ڈائریکٹریز میں کوڈ میں تبدیلیوں کو ٹیسٹ کریں +6. تعاون کی ہدایات کے مطابق پل ریکوئسٹس بھیجیں -### سیکھنے والوں کے لیے +### طلباء کے لیے -1. ریپوزٹری کو فورک یا کلون کریں -2. سبق کے فولڈرز میں ترتیب کے مطابق جائیں -3. ہر سبق کے README فائل پڑھیں -4.سبق سے پہلے کے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/ -5. سبق کے فولڈرز میں کوڈ کی مثالیں آزمائیں +1. ذخیرہ فورک یا کلون کریں +2. سبق کی ڈائریکٹریز کو ترتیب سے دیکھیں +3. ہر سبق کے README فائلز پڑھیں +4. سبق سے پہلے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/ +5. سبق کے فولڈرز میں کوڈ مثالوں پر کام کریں 6. اسائنمنٹس اور چیلنجز مکمل کریں -7.سبق کے بعد کے کوئزز دیں +7. سبق کے بعد کوئزز لیں ### لائیو ترقی -- **دستاویزات**: جڑ میں `docsify serve` چلائیں (پورٹ 3000) -- **کوئز ایپ**: `quiz-app` ڈائرکٹری میں `npm run dev` چلائیں +- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000) +- **کوئز ایپ**: `quiz-app` ڈائریکٹری میں `npm run dev` چلائیں - **پروجیکٹس**: HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں -- **API پروجیکٹس**: متعلقہ API ڈائرکٹریز میں `npm start` چلائیں +- **API پروجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں -## ٹیسٹنگ ہدایات +## جانچ کے ہدایات -### کوئز ایپ کی جانچ +### کوئز ایپ جانچ ```bash cd quiz-app npm run lint # کوڈ اسٹائل کے مسائل کی جانچ کریں -npm run build # تصدیق کریں کہ تعمیر کامیاب ہو گئی ہے +npm run build # یقین دہانی کریں کہ تعمیری عمل کامیاب ہو گیا ہے ``` -### بینک API ٹیسٹنگ +### بینک API جانچ ```bash cd 7-bank-project/api -npm run lint # کوڈ اسٹائل کے مسائل کی جانچ کریں -node server.js # تصدیق کریں کہ سرور بغیر کسی غلطی کے شروع ہوتا ہے +npm run lint # کوڈ کے طرز کے مسائل کی جانچ کریں +node server.js # تصدیق کریں کہ سرور بغیر کسی خرابی کے شروع ہوتا ہے ``` -### عمومی ٹیسٹنگ طریقہ کار +### عمومی جانچ کا طریقہ کار -- یہ ایک تعلیمی ذخیرہ ہے جس میں جامع خودکار ٹیسٹس نہیں ہیں -- دستی ٹیسٹنگ پر توجہ دی جاتی ہے: - - کوڈ کی مثالیں بغیر غلطیوں کے چلیں - - دستاویزات میں لنکس صحیح کام کریں - - پروجیکٹ کی کمپائل مکمل ہو جائے - - مثالیں بہترین طرز عمل کی پیروی کرتی ہوں +- یہ تعلیمی ذخیرہ جامع خودکار ٹیسٹوں کے بغیر ہے +- دستی جانچ پر توجہ مرکوز ہے: + - کوڈ مثالیں بغیر غلطی کے چلیں + - دستاویزات میں لنکس درست کام کریں + - پروجیکٹ بنڈلز کامیابی سے مکمل ہوں + - مثالیں بہترین عملی طریقے اپنائیں -### جمع کروانے سے پہلے چیکس +### جمع کروانے سے پہلے چیک -- ان ڈائریکٹریز میں جہاں package.json ہے `npm run lint` چلائیں -- مارک ڈاؤن لنکس کی تصدیق کریں -- براؤزر یا Node.js میں کوڈ کی مثالیں ٹیسٹ کریں -- ترجمے صحیح ساخت کے مطابق ہوں +- package.json والی ڈائریکٹریز میں `npm run lint` چلائیں +- مارک ڈاؤن لنکس کی درستگی یقینی بنائیں +- کوڈ مثالوں کو براؤزر یا Node.js میں ٹیسٹ کریں +- تصدیق کریں کہ تراجم صحیح ساخت برقرار رکھیں -## کوڈ اسٹائل کے اصول +## کوڈ اسٹائل گائیڈ لائنز -### JavaScript +### جاوا اسکرپٹ -- جدید ES6+ اصول استعمال کریں -- پروجیکٹس میں دیئے گئے معیاری ESLint کنفیگریشنز فالو کریں -- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن نام استعمال کریں +- جدید ES6+ نحو استعمال کریں +- پروجیکٹس میں فراہم کردہ معیاری ESLint کنفیگریشن پر عمل کریں +- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن کے نام استعمال کریں - سیکھنے والوں کے لیے تصورات کی وضاحت کے لیے تبصرے شامل کریں -- جہاں پریٹیئر کنفیگرڈ ہو فرمیٹنگ کریں +- جہاں کنفیگر ہو وہاں Prettier سے فارمیٹ کریں ### HTML/CSS -- معنوی HTML5 عناصر -- ریسپانسیو ڈیزائن اصول -- واضح کلاس کے نام رکھنے کے اصول -- CSS تکنیکس کی وضاحت کے لیے تبصرے +- معنوی HTML5 عناصر استعمال کریں +- ریسپانسیو ڈیزائن کے اصول +- واضح کلاس ناموں کے قواعد +- CSS تکنیک کی وضاحت کے لیے تبصرے -### Python +### پائتھان -- PEP 8 اسٹائل گائیڈلائنس -- واضح، تعلیمی کوڈ کی مثالیں -- سیکھنے کے لیے ٹائپ ہنٹس جہاں مفید ہوں +- PEP 8 اسٹائل گائیڈ لائنز +- واضح، تعلیمی کوڈ مثالیں +- جہاں مفید ہو، ٹائپ ہنٹس ### مارک ڈاؤن دستاویزات -- واضح سرخیوں کی ترتیب +- واضح ہیڈنگ ہائیرارکی - زبان کی وضاحت کے ساتھ کوڈ بلاکس -- اضافی وسائل کے لنکس +- اضافی وسائط کے لنکس - `images/` فولڈرز میں اسکرین شاٹس اور تصاویر -- رسائی کے لیے تصاویر کے لیے الف ٹیکسٹ +- رسائی کے لیے تصاویر کا alt متن -### فائل آرگنائزیشن +### فائل تنظیم -- اسباق مسلسل نمبر شدہ (1-getting-started-lessons, 2-js-basics, وغیرہ) -- ہر پروجیکٹ کے پاس `solution/` اور اکثر `start/` یا `your-work/` فولڈرز +- سبق نمبر وار ترتیب دیے گئے (1-getting-started-lessons, 2-js-basics, وغیرہ) +- ہر پروجیکٹ میں `solution/` اور اکثر `start/` یا `your-work/` ڈائریکٹریز - تصاویر سبق مخصوص `images/` فولڈرز میں محفوظ -- ترجمے `translations/{language-code}/` ڈھانچے میں +- تراجم `translations/{language-code}/` ساخت میں ## بلڈ اور تعیناتی ### کوئز ایپ تعیناتی (Azure Static Web Apps) -کوئز-ایپ Azure Static Web Apps تعیناتی کے لیے ترتیب دی گئی ہے: +کوئز ایپ کو Azure Static Web Apps تعیناتی کے لیے ترتیب دیا گیا ہے: ```bash cd quiz-app -npm run build # dist/ فولڈر بناتا ہے -# مرکزی برانچ پر پش کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے +npm run build # فولڈر dist/ بناتا ہے +# مرکزی شاخ پر push کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے ``` Azure Static Web Apps کنفیگریشن: -- **ایپ کی جگہ**: `/quiz-app` -- **آؤٹ پٹ کی جگہ**: `dist` +- **ایپ کا مقام**: `/quiz-app` +- **آؤٹ پٹ لوکیشن**: `dist` - **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### دستاویزات PDF جنریشن ```bash -npm install # انسٹال کریں docsify-to-pdf -npm run convert # docs سے PDF تیار کریں +npm install # docsify-to-pdf انسٹال کریں +npm run convert # دستاویزات سے PDF بنائیں ``` ### Docsify دستاویزات ```bash -npm install -g docsify-cli # گلوبلی Docsify انسٹال کریں -docsify serve # localhost:3000 پر سروس فراہم کریں +npm install -g docsify-cli # ڈاکسفائی کو عالمی سطح پر انسٹال کریں +docsify serve # لوکل ہوسٹ پر 3000 پورٹ پر سروس فراہم کریں ``` -### پروجیکٹ مخصوص بلڈ +### پروجیکٹ مخصوص بلڈز -ہر پروجیکٹ فولڈر کا اپنا بلڈ پروسیس ہوسکتا ہے: -- Vue پروجیکٹس: `npm run build` سے پروڈکشن بنڈلز بنتے ہیں -- سٹیٹک پروجیکٹس: کوئی بلڈ قدم نہیں، فائلیں براہ راست سروس کی جاتی ہیں +ہر پروجیکٹ ڈائریکٹری کا اپنا بلڈ عمل ہو سکتا ہے: +- Vue پروجیکٹس: `npm run build` پروڈکشن بنڈل بناتا ہے +- سٹیٹک پروجیکٹس: کوئی بلڈ مرحلہ نہیں، فائلز براہ راست سرونگ -## پل ریکویسٹ ہدایات +## پل ریکوئسٹ گائیڈ لائنز -### عنوان کا فارمٹ +### عنوان کی شکل -واضح، وضاحتی عنوانات استعمال کریں جو تبدیلی کے شعبے کی نشاندہی کریں: +واضح، وضاحتی عنوان استعمال کریں جو تبدیلی کے شعبے کو ظاہر کریں: - `[Quiz-app] سبق X کے لیے نیا کوئز شامل کریں` -- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپ کی اصلاح` +- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپو درست کریں` - `[Translation] سبق 5 کے لیے ہسپانوی ترجمہ شامل کریں` -- `[Docs] سیٹ اپ ہدایات کو اپ ڈیٹ کریں` +- `[Docs] سیٹ اپ ہدایات اپ ڈیٹ کریں` ### ضروری چیکس PR جمع کروانے سے پہلے: -1. **کوڈ کا معیار**: - - متاثرہ پروجیکٹ فولڈرز میں `npm run lint` چلائیں - - تمام لِنٹ کی خرابیوں اور وارننگز کو درست کریں +1. **کوڈ کوالٹی**: + - متعلقہ پروجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں + - تمام لِنٹنگ غلطیاں اور وارننگز حل کریں -2. **بلڈ کی تصدیق**: - - اگر قابل اطلاق ہو تو `npm run build` چلائیں - - یقینی بنائیں کہ کوئی بلڈ کی خرابی نہیں +2. **بلڈ تصدیق**: + - جہاں قابل اطلاق ہو `npm run build` چلائیں + - یقینی بنائیں کہ کوئی بلڈ غلطی نہ ہو -3. **لنک کی تصدیق**: - - تمام مارک ڈاؤن لنکس کا ٹیسٹ کریں - - تصویری حوالہ جات کی جانچ کریں +3. **لنک ویلیڈیشن**: + - تمام مارک ڈاؤن لنکس ٹیسٹ کریں + - تصویر کے ریفرنس کام کریں 4. **مواد کا جائزہ**: - - املا اور گرائمر کے لیے پروف ریڈنگ کریں - - کوڈ کی مثالیں درست اور تعلیمی ہوں - - ترجمے اصل معنی کو برقرار رکھیں + - املا اور گرامر کی پروف ریڈنگ کریں + - کوڈ مثالیں درست اور تعلیمی ہوں + - تراجم اصل معنی برقرار رکھیں -### شراکت کی ضروریات +### تعاون کی ضروریات - Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک) -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) پر عمل کریں - تفصیلی ہدایات کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں -- اگر قابل اطلاق ہو تو PR کی تفصیل میں مسئلے کے نمبر کا حوالہ دیں +- PR تفصیل میں اگر قابل اطلاق ہو تو مسئلہ نمبر شامل کریں ### جائزہ کا عمل -- PRs کو مینٹینرز اور کمیونٹی کے ذریعے جائزہ لیا جاتا ہے +- PRs کی ملاحظہ کاری مینٹینرز اور کمیونٹی کرتے ہیں - تعلیمی وضاحت کو ترجیح دی جاتی ہے -- کوڈ کی مثالیں جدید بہترین طریقہ کار کی پیروی کریں -- ترجمے درستگی اور ثقافتی مطابقت کے لیے جائزہ لیں +- کوڈ مثالیں موجودہ بہترین طریقوں کی پیروی کریں +- تراجم درستگی اور ثقافتی مناسبت کے لیے جائزہ لیے جاتے ہیں -## ترجمہ کا نظام +## ترجمہ نظام ### خودکار ترجمہ - GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے -- 50 سے زائد زبانوں میں خود بخود ترجمہ کرتا ہے -- ماخذ فائلیں مرکزی ڈائریکٹریز میں -- ترجمہ شدہ فائلیں `translations/{language-code}/` فولڈرز میں +- 50+ زبانوں میں خودکار ترجمہ کرتا ہے +- بنیادی ڈائریکٹریز میں ماخذ فائلیں +- ترجمہ شدہ فائلیں `translations/{language-code}/` ڈائریکٹریز میں -### دستی ترجمہ کی بہتری شامل کرنا +### دستی ترجمے کی بہتری شامل کرنا -1. `translations/{language-code}/` فولڈر میں فائل تلاش کریں -2. ساخت کو برقرار رکھتے ہوئے بہتری کریں -3. یقینی بنائیں کہ کوڈ کی مثالیں کام کر رہی ہوں +1. `translations/{language-code}/` میں فائل تلاش کریں +2. ساخت کو برقرار رکھتے ہوئے بہتریاں کریں +3. کوڈ مثالیں کام کرتی رہیں 4. کسی بھی مقامی کوئز مواد کو ٹیسٹ کریں -### ترجمے کی میٹا ڈیٹا +### ترجمہ میٹا ڈیٹا -ترجمہ شدہ فائلوں میں میٹا ڈیٹا ہیڈر شامل ہے: +ترجمہ شدہ فائلیں میٹا ڈیٹا ہیڈر شامل کرتی ہیں: ```markdown ``` -## ڈی بگنگ اور مسئلہ حل کرنا +## ڈیبگنگ اور مسئلے حل کرنا ### عام مسائل **کوئز ایپ شروع نہیں ہوتی**: -- Node.js کا ورژن چیک کریں (v14+ سفارش کی جاتی ہے) -- `node_modules` اور `package-lock.json` کو حذف کریں، پھر `npm install` دوہرا کر چلائیں -- پورٹ تنازعات کے لیے چیک کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے) +- Node.js ورژن چیک کریں (v14+ کی سفارش) +- `node_modules` اور `package-lock.json` حذف کریں، پھر `npm install` چلائیں +- پورٹ تنازعہ چیک کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے) **API سرور شروع نہیں ہوتا**: -- Node.js کا ورژن کم از کم 10 ہونا چاہیے -- چیک کریں کہ پورٹ پہلے سے استعمال میں نہیں ہے -- یقینی بنائیں کہ تمام انحصار `npm install` سے انسٹال ہوئے ہیں +- Node.js ورژن کم از کم (node >=10) یقینی بنائیں +- دیکھیں کہ پورٹ استعمال میں تو نہیں +- تمام dependencies `npm install` سے انسٹال ہوں **براؤزر ایکسٹینشن لوڈ نہیں ہوتی**: -- manifest.json صحیح شکل میں ہے یہ تصدیق کریں -- براؤزر کے کنسول میں ایررز چیک کریں +- manifest.json کی درست فارمیٹنگ چیک کریں +- براؤزر کنسول میں غلطیاں دیکھیں - براؤزر مخصوص ایکسٹینشن انسٹالیشن ہدایات پر عمل کریں -**Python چیٹ پروجیکٹ کے مسائل**: -- OpenAI پیکیج انسٹال کریں: `pip install openai` -- GITHUB_TOKEN ماحول متغیر سیٹ ہے یہ چیک کریں -- GitHub ماڈلز کی رسائی کی اجازتوں کا جائزہ لیں +**Python چیٹ پروجیکٹ مسائل**: +- OpenAI پیکج انسٹال کریں: `pip install openai` +- GITHUB_TOKEN ماحول متغیر سیٹ ہے +- GitHub Models رسائی کی اجازتیں چیک کریں -**Docsify دستاویزات فراہم نہیں کر رہا**: -- docsify-cli عالمی طور پر انسٹال کریں: `npm install -g docsify-cli` -- ریپوزٹری کی جڑ سے چلائیں +**Docsify دستاویزات سرونگ نہیں کرتا**: +- docsify-cli عالمی انسٹال کریں: `npm install -g docsify-cli` +- ذخیرہ کی روٹ ڈائریکٹری سے چلائیں - چیک کریں کہ `docs/_sidebar.md` موجود ہے ### ترقیاتی ماحول کے مشورے - HTML پروجیکٹس کے لیے VS Code لائیو سرور ایکسٹینشن استعمال کریں - مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشن انسٹال کریں -- JavaScript کی ڈی بگنگ کے لیے براؤزر DevTools استعمال کریں +- JavaScript ڈیبگنگ کے لیے براؤزر ڈویلپر ٹولز استعمال کریں - Vue پروجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں -### کارکردگی کے معاملات +### کارکردگی کے پہلو -- ترجمہ شدہ فائلوں کی بڑی مقدار (50+ زبانیں) کی وجہ سے مکمل کلونز بڑے ہوتے ہیں -- صرف مواد پر کام کرتے ہوئے shallow clone استعمال کریں: `git clone --depth 1` -- انگریزی مواد پر کام کرتے ہوئے ترجموں کو تلاش سے خارج کریں -- بلڈ کے عمل پہلے رن میں سست ہو سکتے ہیں (npm install, Vite build) +- بڑی تعداد میں ترجمہ شدہ فائلیں (50+ زبانیں) مکمل کلونز کو بڑا بناتی ہیں +- صرف مواد پر کام کرتے وقت shallow clone استعمال کریں: `git clone --depth 1` +- انگریزی مواد پر کام کرتے ہوئے تراجم کو تلاش سے خارج کریں +- بلڈ عمل پہلے رن پر سست ہو سکتا ہے (npm install, Vite build) ## سیکیورٹی کے پہلو -### ماحول کے متغیرات +### ماحول متغیرات - API کیز کبھی بھی ریپوزٹری میں کمیٹ نہ کریں -- `.env` فائلیں استعمال کریں (جو پہلے سے `.gitignore` میں ہیں) -- پروجیکٹ کی READMEs میں مطلوبہ ماحول کے متغیرات دستاویز کریں +- `.env` فائلز استعمال کریں (جو پہلے سے `.gitignore` میں ہیں) +- پروجیکٹ کے READMEs میں ضروری ماحول متغیرات دستاویز کریں -### Python پروجیکٹس +### پائتھان پروجیکٹس - ورچوئل ماحول استعمال کریں: `python -m venv venv` -- انحصار کو تازہ ترین رکھیں -- GitHub ٹوکنز کے لیے کم از کم ضروری اجازتیں رکھیں +- dependencies کو اپ ڈیٹ رکھیں +- GitHub ٹوکنز میں کم از کم ضروری اجازتیں ہوں -### GitHub ماڈلز کی رسائی +### GitHub Models تک رسائی -- GitHub ماڈلز کے لیے پرسنل ایکسس ٹوکن (PAT) ضروری ہے -- ٹوکنز ماحول کے متغیرات کے طور پر محفوظ کریں -- ٹوکنز یا اسناد کو کبھی کمیٹ نہ کریں +- GitHub Models کے لیے پرسنل ایکسس ٹوکنز (PAT) ضروری +- ٹوکنز ماحول متغیرات کے طور پر محفوظ +- ٹوکنز یا کریڈینشلز کبھی بھی کمیٹ نہ کریں ## اضافی نوٹس -### ہدف ناظرین +### ہدف سامعین -- ویب ڈویلپمنٹ کے مکمل نو آموز +- ویب ڈویلپمنٹ کے کل جب beginner - طلباء اور خود سیکھنے والے -- نصاب کو کلاس روم میں استعمال کرنے والے اساتذہ -- مواد قابل رسائی اور تدریجی مہارت کی تعمیر کے لیے ڈیزائن کیا گیا ہے +- اساتذہ جو نصاب کلاس روم میں استعمال کرتے ہیں +- مواد رسائی کے لیے ڈیزائن کیا گیا ہے اور ہنر کی تدریجی ترقی ### تعلیمی فلسفہ -- پروجیکٹ کی بنیاد پر سیکھنے کا طریقہ -- بار بار علم کی جانچ (کوئزز) -- عملی کوڈنگ کی مشقیں -- حقیقی دنیا کی ایپلیکیشن کی مثالیں +- پروجیکٹ پر مبنی سیکھنے کا طریقہ +- کثرت سے علم کی جانچ (کوئزز) +- عملی کوڈنگ مشقیں +- حقیقی دنیا کی تطبیقی مثالیں - فریم ورکس سے پہلے بنیادی اصولوں پر توجہ ### ذخیرہ کی دیکھ بھال -- سرگرم کمیونٹی شامل سیکھنے والوں اور تعاون کرنے والوں کی -- انحصار اور مواد کی باقاعدہ اپ ڈیٹس -- مسائل اور مباحثے مینٹینرز کی زیر نگرانی -- ترجمہ کی اپ ڈیٹس GitHub Actions کے ذریعے خودکار +- سرگرم سیکھنے والوں اور تعاون کاروں کی کمیونٹی +- dependencies اور مواد کی باقاعدہ اپ ڈیٹ +- مینٹینرز کی طرف سے اشوز اور مباحثے کی نگرانی +- GitHub Actions کے ذریعے ترجمہ اپ ڈیٹس خودکار ### متعلقہ وسائل - [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) سیکھنے والوں کے لیے تجویز کردہ -- اضافی کورسز: جنریٹیو AI, ڈیٹا سائنس, ML, IoT نصاب دستیاب +- اضافی کورسز: جنریٹیو AI، ڈیٹا سائنس، ML، IoT نصاب دستیاب ### مخصوص پروجیکٹس کے ساتھ کام کرنا -تفصیلی ہدایات کے لیے ہر پروجیکٹ کے README فائلوں کا حوالہ دیں: +انفرادی پروجیکٹس کے لیے تفصیلی ہدایات کے لیے README فائلز دیکھیں: - `quiz-app/README.md` - Vue 3 کوئز ایپلیکیشن - `7-bank-project/README.md` - بینکنگ ایپلیکیشن مع تصدیق -- `5-browser-extension/README.md` - براؤزر ایکسٹینشن ڈویلپمنٹ +- `5-browser-extension/README.md` - براؤزر ایکسٹینشن کی ترقی - `6-space-game/README.md` - کینوس پر مبنی گیم ڈویلپمنٹ - `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پروجیکٹ -### مونو ریپو ساخت +### مونو ریپو کا ڈھانچہ -روایتی مونو ریپو تو نہیں لیکن اس ذخیرہ میں کئی آزاد پروجیکٹس ہیں: +اگرچہ روایتی مونو ریپو نہیں ہے، یہ ذخیرہ کئی آزاد پروجیکٹس پر مشتمل ہے: - ہر سبق خود مختار ہے -- پروجیکٹس ایک دوسرے کے انحصارات شیئر نہیں کرتے -- بغیر دوسرے پروجیکٹس کو متاثر کیے انفرادی پروجیکٹس پر کام کریں -- پورے نصاب کے تجربے کے لیے مکمل ریپوزٹری کلون کریں +- پروجیکٹس مشترکہ dependencies نہیں رکھتے +- انفرادی پروجیکٹس پر بغیر دوسرے متاثر کیے کام کریں +- مکمل نصاب کے تجربے کے لیے پورا ریپو کلون کریں --- -**ڈسکلیمر**: -اس دستاویز کا ترجمہ AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لیے کوشاں ہیں، براہ کرم آگاہ رہیں کہ خودکار تراجم میں غلطیاں یا نادرستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں مستند ماخذ سمجھا جانا چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ تجویز کیا جاتا ہے۔ ہم اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ذمہ دار نہیں ہیں۔ +**دفعۂ اخطار**: +اس دستاویز کا ترجمہ AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) استعمال کرتے ہوئے کیا گیا ہے۔ ہم درستگی کے لیے کوشاں ہیں، لیکن براہِ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم صحت ہوسکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں مستند ماخذ سمجھا جانا چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ تجویز کیا جاتا ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی ذمہ داری ہم پر نہیں ہوگی۔ \ No newline at end of file diff --git a/translations/ur/README.md b/translations/ur/README.md index a8ebd3e6a..61633c700 100644 --- a/translations/ur/README.md +++ b/translations/ur/README.md @@ -10,198 +10,208 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# ویب ڈویلپمنٹ برائے مبتدئین - ایک نصاب +# ویب ڈیولپمنٹ برائے ابتدائی - ایک نصاب -مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے ذریعہ ہمارے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈویلپمنٹ کی بنیادی باتیں سیکھیں۔ 24 اسباق میں سے ہر ایک جاوا اسکرپٹ، CSS، اور HTML کو عملی منصوبوں جیسے ٹیریریمز، براؤزر ایکسٹینشنز، اور خلائی کھیلوں کے ذریعے جانچتا ہے۔ کوئزز، مباحثوں، اور عملی اسائنمنٹس کے ساتھ مشغول ہوں۔ ہماری مؤثر پروجیکٹ پر مبنی تعلیم کے ساتھ اپنی مہارتوں کو بہتر بنائیں اور اپنے علم کو برقرار رکھنے کو بہتر بنائیں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں! +Microsoft Cloud Advocates کی طرف سے ہمارا 12 ہفتوں کا جامع کورس کے ساتھ ویب ڈیولپمنٹ کی بنیادیں سیکھیں۔ 24 اسباق میں سے ہر ایک JavaScript، CSS، اور HTML میں ہاتھ سے تجرباتی پروجیکٹس جیسے کہ ٹیریریمز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے وارد ہوتا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس میں حصہ لیں۔ اپنی مہارتیں بڑھائیں اور ہمارے مؤثر پروجیکٹ پر مبنی پیڈاگوگی کے ساتھ اپنے علم کو بہتر بنائیں۔ آج ہی اپنی کوڈنگ سفر شروع کریں! Azure AI Foundry Discord کمیونٹی میں شامل ہوں [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) ان وسائل کو استعمال شروع کرنے کے لیے یہ اقدامات کریں: -1. **ریپوزٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **ریپوزٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **رفوسٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **رفوسٹری کو کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین اور دیگر ڈویلپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 کثیر لسانی معاونت +### 🌐 کثیرالزبانی تعاون -#### GitHub Action کے ذریعے سپورٹ کیا گیا (خودکار اور ہمیشہ تازہ ترین) +#### GitHub Action کے ذریعہ حمایت یافتہ (خودکار اور ہمیشہ جدید) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](./README.md) | [Vietnamese](../vi/README.md) -> **کیا آپ کو مقامی طور پر کلون کرنا پسند ہے؟** - -> اس ریپوزٹری میں 50+ زبانوں کے ترجمے شامل ہیں جو کہ ڈاؤن لوڈ کے سائز کو نمایاں طور پر بڑھاتے ہیں۔ ترجموں کے بغیر کلون کرنے کے لیے sparse checkout استعمال کریں: +> **مقامی طور پر کلون کرنا پسند کریں؟** +> +> یہ رفوسٹری 50+ زبانوں کے تراجم شامل کرتی ہے جس سے ڈاؤن لوڈ کا سائز بہت بڑھ جاتا ہے۔ بغیر تراجم کی کلوننگ کے لیے sparse checkout استعمال کریں: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> یہ آپ کو کورس مکمل کرنے کے لیے ہر وہ چیز فراہم کرتا ہے جو آپ کو چاہیے، بہت تیز تر ڈاؤن لوڈ کے ساتھ۔ +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> اس سے آپ کو تیزی سے کورس مکمل کرنے کے لیے سب کچھ مل جائے گا۔ -**اگر آپ چاہتے ہیں کہ اضافی ترجمہ کی زبانوں کی حمایت کی جائے تو یہاں دیکھیں [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**اگر آپ مزید ترجمہ شدہ زبانیں شامل کرانا چاہتے ہیں تو وہ یہاں ملاحظہ کریں [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _کیا آپ طالب علم ہیں؟_ -جائیں [**Student Hub صفحہ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) جہاں آپ کو مبتدئین کے وسائل، طالب علم پیکز اور یہاں تک کہ مفت سرٹیفکیٹ ووچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ بُک مارک کرنا چاہیں گے اور وقتاً فوقتاً چیک کرنا چاہیں گے کیونکہ ہم ہر مہینے مواد تبدیل کرتے ہیں۔ +وزٹ کریں [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) جہاں آپ کو ابتدائی وسائل، طالب علم پیکس، اور مفت سرٹیفیکیٹ واؤچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جو آپ کو بک مارک کرنا چاہیے اور وقتاً فوقتاً چیک کرنا چاہیے کیونکہ ہم ماہانہ مواد کو تبدیل کرتے ہیں۔ -### 📣 اعلان - نئے GitHub Copilot Agent موڈ چیلنجز مکمل کرنے کے لیے! +### 📣 اعلان - مکمل کرنے کے لیے نئے GitHub Copilot Agent موڈ چیلنجز! -نیا چیلنج شامل کیا گیا ہے، سب سے زیادہ ابواب میں "GitHub Copilot Agent Challenge 🚀" تلاش کریں۔ یہ ایک نیا چیلنج ہے جو آپ کو GitHub Copilot اور Agent موڈ کے استعمال سے مکمل کرنا ہے۔ اگر آپ نے پہلے کبھی Agent موڈ استعمال نہیں کیا، تو یہ نہ صرف متن تیار کرنے کے قابل ہے بلکہ فائلز تخلیق، ترمیم، کمانڈز چلانے اور مزید بھی کر سکتا ہے۔ +نیا چیلنج شامل کیا گیا ہے، زیادہ تر ابواب میں "GitHub Copilot Agent Challenge 🚀" تلاش کریں۔ یہ آپ کے لیے GitHub Copilot اور Agent موڈ استعمال کرنے کا نیا چیلنج ہے۔ اگر آپ نے پہلے Agent موڈ استعمال نہیں کیا، تو یہ صرف متن تخلیق کرنے کے علاوہ فائلیں بنانے اور ایڈٹ کرنے، کمانڈز چلانے اور مزید کر سکتا ہے۔ -### 📣 اعلان - _نیا منصوبہ جنریٹو AI کے ذریعے بنانے کے لیے_ +### 📣 اعلان - _جنریٹو AI کی مدد سے نیا پروجیکٹ بنانے کا موقع_ -نیا AI اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا ہے، اسے دیکھیں [project](./9-chat-project/README.md) +نیا AI Assistant پروجیکٹ ابھی شامل کیا گیا ہے، اسے چیک کریں [project](./9-chat-project/README.md) -### 📣 اعلان - _نیا نصاب_ جنریٹو AI جاوا اسکرپٹ کے لیے ابھی جاری کیا گیا ہے +### 📣 اعلان - _جنریٹو AI کے لیے نیا نصاب جے ایس پر ابھی جاری ہوا ہے_ ہمارا نیا جنریٹو AI نصاب مت چھوڑیں! -شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! +شروع کرنے کے لیے ملاحظہ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ![Background](../../translated_images/ur/background.148a8d43afde5730.webp) -- اسباق بنیادی سے لے کر RAG تک سب کچھ کور کرتے ہیں۔ -- جن AI اور ہمارے معاون ایپ کے ذریعے تاریخی کرداروں کے ساتھ بات چیت کریں۔ -- خوشگوار اور دلچسپ بیانیہ، آپ وقت میں سفر کریں گے! +- بنیادی سے لے کر RAG تک تمام موضوعات کا احاطہ۔ +- تاریخی شخصیات سے GenAI اور ہمارا ساتھ دینے والا ایپ کے ذریعے بات چیت کریں۔ +- مزیدار اور دلچسپ کہانی، آپ وقت میں سفر کریں گے! ![character](../../translated_images/ur/character.5c0dd8e067ffd693.webp) -ہر سبق میں ایک اسائنمنٹ شامل ہے، ایک نالج چیک اور ایک چیلنج تاکہ آپ کو درج ذیل موضوعات پر رہنمائی کر سکے: -- پرومپٹنگ اور پرومپٹ انجینئرنگ -- متن اور تصویر کی ایپ جنریشن +ہر سبق میں ایک اسائنمنٹ، ایک نالج چیک، اور چیلنج شامل ہے جو آپ کو درج ذیل موضوعات سیکھنے میں رہنمائی کرے گا: +- پرامپٹنگ اور پرامپٹ انجینئرنگ +- ٹیکسٹ اور امیج ایپ جنریشن - سرچ ایپس -شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! +شروع کرنے کے لیے ملاحظہ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ## 🌱 شروع کریں -> **اساتذہ،** ہم نے [بہت سی تجاویز شامل کی ہیں](for-teachers.md) کہ اس نصاب کو کیسے استعمال کیا جائے۔ ہمیں آپ کی رائے کا انتظار ہے [ہمارے مباحثے کے فورم میں](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **اساتذہ**، ہم نے [کچھ تجاویز شامل کی ہیں](for-teachers.md) کہ اس نصاب کو کیسے استعمال کیا جائے۔ آپ کی رائے ہمارے لیے قیمتی ہے [ڈسکشن فورم میں](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)۔ -**[طلباء](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، ہر سبق کے لیے، پریلیکچر کوئز سے شروع کریں اور پھر لیکچر کے مواد کو پڑھیں، مختلف سرگرمیاں مکمل کریں اور اپنی سمجھ کو پوسٹ-لیکچر کوئز سے چیک کریں۔ +**[سیکھنے والے](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، ہر سبق کے لیے، پری لیکچر کوئز سے شروع کریں، لیکچر مواد پڑھیں، مختلف سرگرمیاں مکمل کریں اور پوسٹ لیکچر کوئز سے اپنی سمجھ کا جائزہ لیں۔ -اپنے تعلیمی تجربے کو بہتر بنانے کے لیے، اپنے ساتھیوں سے جڑیں تاکہ مل کر پروجیکٹس پر کام کیا جا سکے! ہمارے [ڈسکشن فورم](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) میں بحث کی حوصلہ افزائی کی جاتی ہے جہاں ہمارے ماڈریٹرز آپ کے سوالات کے جوابات دینے کے لیے دستیاب ہوں گے۔ +اپنے تعلیمی تجربے کو بہتر بنانے کے لیے، اپنے ساتھیوں سے مل کر پروجیکٹس پر کام کریں! مباحثے کے لیے ہماری [ڈسکشن فورم](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) میں حصہ لیں جہاں ہمارے ماڈریٹرز کی ٹیم آپ کے سوالات کے جوابات دینے کے لیے موجود ہوگی۔ -اپنی تعلیم کو مزید بڑھانے کے لیے، ہم سختی سے تجویز کرتے ہیں کہ آپ اضافی مطالعے کے مواد کے لیے [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) کو دریافت کریں۔ +اپنی تعلیم کو مزید بڑھانے کے لیے، ہم آپ کو تجویز کرتے ہیں کہ اضافی تعلیمی مواد کے لیے [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) دریافت کریں۔ ### 📋 اپنا ماحول تیار کرنا -یہ نصاب ایک ترقیاتی ماحول کے ساتھ تیار ہے! آپ شروع کرتے ہوئے کر سکتے ہیں کہ نصاب کو [Codespace](https://github.com/features/codespaces/) میں چلائیں (_ایک براؤزر پر مبنی، بغیر کسی انسٹالیشن کی ضرورت والا ماحول_), یا اپنے کمپیوٹر پر مقامی طور پر ایک ٹیکسٹ ایڈیٹر جیسے [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کی مدد سے۔ +اس نصاب کے ساتھ ایک تیار شدہ ڈویلپمنٹ ماحول موجود ہے! شروع کرتے وقت آپ کورس کو [Codespace](https://github.com/features/codespaces/) (_ایک براؤزر پر مبنی، بغیر انسٹالیشن والے ماحول_) پر یا اپنے کمپیوٹر پر لوکل طور پر [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) جیسے ٹیکسٹ ایڈیٹر کے ساتھ چلا سکتے ہیں۔ -#### اپنی ریپوزٹری بنائیں -اپنا کام آسانی سے محفوظ کرنے کے لیے، سفارش کی جاتی ہے کہ آپ اس ریپوزٹری کی اپنی کاپی بنائیں۔ یہ آپ صفحہ کے اوپر موجود **Use this template** بٹن کو کلک کر کے کر سکتے ہیں۔ یہ آپ کے GitHub اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ نئی ریپوزٹری بنائے گا۔ +#### اپنی رفوسٹری بنائیں +اپنا کام آسانی سے محفوظ کرنے کے لیے، یہ مشورہ دیا جاتا ہے کہ آپ اس رفوسٹری کی اپنی کاپی بنائیں۔ یہ کرنے کے لیے صفحہ کے اوپری حصے میں **Use this template** بٹن پر کلک کریں۔ اس سے آپ کے GitHub اکاؤنٹ میں نصاب کی ایک نئی کاپی کے ساتھ ایک نئی رفوسٹری بن جائے گی۔ یہ اقدامات کریں: -1. **ریپوزٹری کو فورک کریں:** اس صفحے کے اوپر دائیں کونے میں موجود "Fork" بٹن پر کلک کریں۔ -2. **ریپوزٹری کو کلون کریں:** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **رفوسٹری کو فورک کریں**: اس صفحہ کے دائیں بالائی کونے میں "Fork" بٹن پر کلک کریں۔ +2. **رفوسٹری کلون کریں**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### نصاب کو Codespace میں چلانا +#### Codespace میں نصاب چلانا -اپنی بنائی گئی ریپوزٹری میں، **Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لیے ایک نیا Codespace بنائے گا جس میں آپ کام کر سکتے ہیں۔ +اپنی بنائی ہوئی رفوسٹری میں **Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لئے نیا Codespace تیار کرے گا جس میں آپ کام کر سکیں گے۔ ![Codespace](../../translated_images/ur/createcodespace.0238bbf4d7a8d955.webp) -#### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانا - -اپنے کمپیوٹر پر یہ نصاب چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان ٹولز کے مختلف آپشنز سے روشناس کروائے گا تاکہ آپ منتخب کر سکیں کہ کون سا آپ کے لیے بہترین ہے۔ +#### اپنے کمپیوٹر پر لوکل طور پر نصاب چلانا -ہماری سفارش ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو بطور ایڈیٹر استعمال کریں، جس میں بلٹ ان [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی شامل ہے۔ آپ Visual Studio Code یہاں سے ڈاؤن لوڈ کر سکتے ہیں [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)۔ +اپنے کمپیوٹر پر اس نصاب کو چلانے کے لیے آپ کو ایک ٹیکسٹ ایڈیٹر، براؤزر اور کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان مختلف اختیارات کے بارے میں رہنمائی دے گا تاکہ آپ اپنے لیے بہترین منتخب کر سکیں۔ -1. اپنی ریپوزٹری کو اپنے کمپیوٹر پر کلون کریں۔ یہ آپ **Code** بٹن کو کلک کر کے اور URL کو کاپی کر کے کر سکتے ہیں: +ہم آپ کو یہ مشورہ دیتے ہیں کہ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ایڈیٹر استعمال کریں، جس میں ایک بلٹ ان [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی شامل ہے۔ آپ Visual Studio Code یہاں سے ڈاؤن لوڈ کر سکتے ہیں [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)۔ +1. اپنے ریپوزٹری کو اپنے کمپیوٹر پر کلون کریں۔ آپ یہ **Code** بٹن پر کلک کر کے اور URL کو کاپی کر کے کر سکتے ہیں: [CodeSpace](./images/createcodespace.png) -پھر، [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے اندر [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `` کو اس URL سے بدل دیں جو آپ نے ابھی کاپی کیا ہے: + + پھر، [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے اندر [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `` کو اس URL سے بدلیں جو آپ نے ابھی کاپی کیا ہے: ```bash git clone ``` - -2. Visual Studio Code میں فولڈر کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کرکے اور وہ فولڈر منتخب کرکے کرسکتے ہیں جسے آپ نے ابھی کلون کیا ہے۔ -> سفارش کردہ Visual Studio Code ایکسٹینشنز: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code کے اندر HTML صفحات کا پیش منظر دیکھنے کے لیے -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - کوڈ تیزی سے لکھنے میں مدد کے لیے +2. Visual Studio Code میں فولڈر کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کر کے اور اس فولڈر کو منتخب کر کے کر سکتے ہیں جو آپ نے ابھی کلون کیا ہے۔ + +> تجویز کردہ Visual Studio Code کے اضافی پلگ ان: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code کے اندر HTML صفحات کا پیش نظارہ کرنے کے لیے +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - آپ کو تیزی سے کوڈ لکھنے میں مدد فراہم کرنے کے لیے ## 📂 ہر سبق میں شامل ہیں: -- اختیاری اسکیچنوٹ -- اختیاری اضافی ویڈیو -- سبق سے پہلے وارم اپ کوئز -- تحریری سبق -- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے کے طریقہ کار پر مرحلہ وار رہنمائی -- علم کی جانچ -- ایک چیلنج -- اضافی مطالعہ -- اسباق کے بعد کا کوئز [post-lesson quiz](https://ff-quizzes.netlify.app/web/) +- اختیاری اسکیچنوٹ +- اختیاری اضافی ویڈیو +- سبق سے پہلے وارم اپ کوئز +- تحریری سبق +- پروجیکٹ پر مبنی اسباق کے لیے، پروجیکٹ بنانے پر مرحلہ وار رہنما +- معلومات کی جانچ +- ایک چیلنج +- اضافی مطالعہ +- اسباق کے بعد کا کوئز ([post-lesson quiz](https://ff-quizzes.netlify.app/web/)) -> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں شامل ہیں، کل 48 کوئزز ہر ایک میں تین سوالات کے ساتھ۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں، کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔ +> **کوئزز کے بارے میں ایک نوٹ**: تمام کوئزز Quiz-app فولڈر میں محفوظ ہیں، کل 48 کوئزز جن میں ہر ایک میں تین سوالات ہوتے ہیں۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں، کوئز ایپ مقامی طور پر چلائی جا سکتی ہے یا Azure پر بھی تعینات کی جا سکتی ہے؛ `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔ ## 🗃️ اسباق -| | پروجیکٹ کا نام | پڑھائے گئے تصورات | تعلیمی مقاصد | متعلقہ سبق | مصنف | +| | پروجیکٹ کا نام | سکھائے جانے والے تصورات | تعلیم کے مقاصد | متعلقہ سبق | مصنف | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | شروعات | پروگرامنگ اور ٹولز کا تعارف | زیادہ تر پروگرامنگ زبانوں کی بنیادی بنیادوں کا سیکھنا اور ایسے سافٹ ویئر کے بارے میں جاننا جو پیشہ ورانہ ڈویلپرز کو ان کا کام کرنے میں مدد دیتا ہے | [پروگرامنگ زبانوں اور ٹولز کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | شروعات | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام شامل ہے | اپنے پروجیکٹ میں GitHub استعمال کرنا اور دوسروں کے ساتھ کوڈ بیس پر تعاون کرنا | [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | شروعات | قابل رسائی | ویب کی رسائی کے بنیادی اصول سیکھیں | [رسائی کے بنیادی اصول](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS بنیادیات | جاوا اسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کے بنیادی اصول | [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS بنیادیات | فنکشنز اور میتھڈز | ایپلیکیشن کے منطق کے بہاؤ کو کنٹرول کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [فنکشنز اور میتھڈز](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS بنیادیات | JS میں فیصلے کرنا | اپنی کوڈ میں حالات بنانے کے لیے فیصلہ سازی کے طریقے سیکھیں | [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS بنیادیات | Arrays اور Loops | جاوا اسکرپٹ میں ڈیٹا کے ساتھ کام کرنے کے لیے Arrays اور Loops استعمال کریں | [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML پرعملی اطلاق | آن لائن Terrarium بنانے کے لیے HTML تیار کریں، خاص طور پر لے آؤٹ بنانے پر توجہ دیں | [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS پرعملی اطلاق | آن لائن Terrarium کے لیے CSS تیار کریں، CSS کے بنیادی اصول اور صفحہ کو Responsive بنانے پر توجہ دیں | [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | جاوا اسکرپٹ کلوزرز، DOM تبدیلی | جاوا اسکرپٹ تیار کریں تاکہ Terrarium کو drag/drop انٹرفیس کے طور پر کام کرے، کلوزرز اور DOM تبدیلی پر توجہ دیں | [جاوا اسکرپٹ کلوزرز، DOM تبدیلی](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنانا | کی بورڈ ایونٹس کے ذریعے اپنی جاوا اسکرپٹ ایپ کے منطق کو چلانا سیکھیں | [ایونٹ ڈرائیو پروگرامنگ](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزرز کے ساتھ کام | براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے لیے پہلے عناصر کیسے اسکافولڈ کیے جاتے ہیں سیکھیں | [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں متغیرات محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر تیار کریں تاکہ API کال کریں اور لوکل اسٹوریج میں محفوظ متغیرات استعمال کریں | [APIs، فارم اور لوکل اسٹوریج](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے پس منظر کے عمل، ویب کی کارکردگی | ایکسٹینشن کے آئیکن کا انتظام کرنے کے لیے براؤزر کے پس منظر کے عمل استعمال کریں؛ ویب کی کارکردگی اور اسے بہتر بنانے کے طریقے سیکھیں | [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ آگے بڑھتا ہوا گیم ڈیولپمنٹ | Inheritance کو کلاسز اور کمپوزیشن دونوں کے استعمال سے سیکھیں اور Pub/Sub پیٹرن کے بارے میں جانیں، گیم بنانے کی تیاری کے لیے | [ایڈوانسڈ گیم ڈیولپمنٹ کا تعارف](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | کینوس پر ڈرائنگ | Canvas API کے بارے میں جانیں، جو اسکرین پر عناصر ڈرائنگ کرنے کے لیے استعمال ہوتا ہے | [کینوس پر ڈرائنگ](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | کارٹیسیئن کوآرڈینیٹس اور کینوس API کا استعمال کرتے ہوئے عناصر کو حرکت دیتے ہوئے دریافت کریں | [عناصر کو حرکت دینا](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | تصادم کی جانچ | عناصر کو ٹکرانے اور ایک دوسرے کے ردعمل ظاہر کرنے کے لیے کی پریس استعمال کریں اور گیم کی کارکردگی کو یقینی بنانے کے لیے کول ڈاؤن فنکشن فراہم کریں | [تصادم کی جانچ](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | اسکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حسابات کریں | [اسکور رکھنا](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | گیم ختم کرنا اور دوبارہ شروع کرنا | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں جانیں، جس میں اثاثے صاف کرنا اور متغیر اقدار کو ری سیٹ کرنا شامل ہے | [اختتامی شرط](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور راستے | ملٹی پیج ویب سائٹ کے فن تعمیر کا اسکیفولڈ کیسے بنایا جاتا ہے، روٹنگ اور HTML ٹیمپلیٹس استعمال کرکے سیکھیں | [HTML ٹیمپلیٹس اور راستے](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارم بنانے اور توثیقی عمل کو سنبھالنے کے بارے میں جانیں | [فارم](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کیسے آتا اور جاتا ہے، اسے کیسے حاصل کریں، ذخیرہ کریں، اور تلف کریں | [ڈیٹا](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | سیکھیں کہ آپ کی ایپ اسٹیٹ کو کس طرح برقرار رکھتی ہے اور اسے پروگرام کے ذریعے کیسے مینیج کرتی ہے | [اسٹیٹ مینجمنٹ](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | VScode کے ساتھ کام | سیکھیں کہ کوڈ ایڈیٹر کیسے استعمال کریں| [VScode کوڈ ایڈیٹر استعمال کریں](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | AI کے ساتھ کام | اپنی AI اسسٹنٹ بنانا سیکھیں | [AI اسسٹنٹ پروجیکٹ](./9-chat-project/README.md) | Chris | - -## 🏫 تدریسی طریقہ کار - -ہمارا نصاب دو اہم تعلیمی اصولوں کے ساتھ ڈیزائن کیا گیا ہے: -* پروجیکٹ پر مبنی تعلیم -* بار بار کوئزز - -یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادی باتیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کے لیے استعمال ہونے والے جدید ترین ٹولز اور تکنیکس بھی۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویدر طرز کا گیم، اور کاروباری بنکنگ ایپ بنانے کا عملی تجربہ حاصل ہوگا۔ سیریز کے اختتام تک، طلباء کو ویب ڈیولپمنٹ کی مضبوط سمجھ حاصل ہوگی۔ - -> 🎓 آپ اس نصاب کے پہلے چند اسباق کو Microsoft Learn پر ایک [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کی طرح لے سکتے ہیں! - -پروجیکٹس کے ساتھ مواد کو ہم آہنگ کرکے، عمل طلباء کے لیے زیادہ دلکش بن جاتا ہے اور تصورات کو بہتر طور پر یاد رکھا جاتا ہے۔ ہم نے جاوا اسکرپٹ بنیادیات میں کئی ابتدائی اسباق بھی لکھے ہیں تاکہ تصورات کا تعارف کروایا جا سکے، جن کے ساتھ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ویڈیو ٹیوٹوریلز کا ایک ویڈیو بھی شامل ہے، جن میں سے بعض مصنفین نے اس نصاب میں حصہ ڈالا ہے۔ - -اس کے علاوہ، کلاس سے پہلے ایک کم دباؤ والا کوئز طالب علم کے سیکھنے کے ارادے کو ترتیب دیتا ہے، جبکہ کلاس کے بعد دوسرا کوئز اضافی یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور خوشگوار بنانے کے لیے ڈیزائن کیا گیا ہے اور اسے پورے یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے شروع ہوتے ہیں اور 12 ہفتوں کے چکر کے اختتام تک زیادہ پیچیدہ ہو جاتے ہیں۔ - -جبکہ ہم نے جاوا اسکرپٹ فریم ورک متعارف کرانے سے جان بوجھ کر گریز کیا ہے تاکہ فریم ورک اپنانے سے پہلے ویب ڈویلپر کے طور پر بنیادی مہارتوں پر توجہ دی جا سکے، اس نصاب کو مکمل کرنے کے بعد اگلا اچھا قدم Node.js کے بارے میں سیکھنا ہو گا جس کے لیے ویڈیوز کا ایک اور مجموعہ ہے: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"۔ - -> ہمارے [Conduct Code](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما خطوط دیکھیں۔ ہم آپ کی تعمیری رائے کا خیرمقدم کرتے ہیں! +| 01 | Getting Started | پروگرامنگ اور اس کے اوزار کا تعارف | زیادہ تر پروگرامنگ زبانوں اور پیشہ ورانہ ترقی کاروں کی مدد کرنے والے سافٹ ویئر کی بنیادی باتیں سیکھیں | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا | اپنے پروجیکٹ میں GitHub کو کیسے استعمال کریں، اور دوسروں کے ساتھ ایک کوڈ بیس پر کس طرح تعاون کریں | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | Accessibility | ویب ایکسیسبلٹی کی بنیادی باتیں سیکھیں | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | جاوااسکرپٹ ڈیٹا کی اقسام | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | فنکشنز اور میتھڈز | ایپلیکیشن کے منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور میتھڈز کے بارے میں سیکھیں | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS Basics | JS میں فیصلے کرنا | اپنے کوڈ میں فیصلہ سازی کے طریقے استعمال کرتے ہوئے شرائط بنانے کے بارے میں سیکھیں | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | Arrays اور Loops | جاوا اسکرپٹ میں arrays اور loops کے ذریعہ ڈیٹا کے ساتھ کام کریں | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML عملی طور پر | آن لائن ٹیریریم بنانے کے لیے HTML تیار کریں، لے آؤٹ بنانے پر توجہ دیں | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS عملی طور پر | آن لائن ٹیریریم کو اسٹائل کرنے کے لیے CSS تیار کریں، CSS کی بنیادی باتوں پر توجہ دیں بشمول صفحے کا ردعمل دینا | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | جاوا اسکرپٹ Closures، DOM میں ترمیم | ٹیریریم کو ڈریگ/ڈراپ انٹرفیس کے طور پر فعال بنانے کے لیے جاوا اسکرپٹ بنائیں، closures اور DOM میں ترمیم پر توجہ دیں | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | ٹائپنگ گیم بنائیں | جاوا اسکرپٹ ایپ کے منطقی بہاؤ کے لیے کی بورڈ ایونٹس کو کیسے استعمال کریں | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے ساتھ کام کرنا | براؤزر کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے پہلا عناصر کس طرح تیار کرتے ہیں | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | فارم بنانا، API کال کرنا اور لوکل اسٹوریج میں متغیرات محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر تیار کریں تاکہ API کال کی جا سکے جو لوکل اسٹوریج میں محفوظ متغیرات استعمال کرتے ہیں | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | براؤزر کے پس منظر کے مراحل، ویب کی کارکردگی | ایکسٹینشن کے آئیکن کو منظم کرنے کے لیے براؤزر کے پس منظر کے مراحل استعمال کریں؛ ویب کارکردگی اور کچھ اصلاحات سیکھیں تاکہ کارکردگی بڑھائی جا سکے | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | جاوا اسکرپٹ کے ساتھ مزید جدید کھیل کی ترقی | کلاسز اور کمپوزیشن دونوں استعمال کرتے ہوئے وراثت اور Pub/Sub پیٹرن کے بارے میں سیکھیں، گیم بنانے کی تیاری کے لیے | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | کینوس پر ڈرائنگ | کینوس API کے بارے میں سیکھیں، جو سیریز پر عناصر ڈرائنگ کے لیے استعمال ہوتا ہے | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | اسکرین پر عناصر کو حرکت دینا | دریافت کریں کہ کس طرح عناصر کو کارٹیسیئن کوآرڈی نیٹس اور کینوس API کی مدد سے حرکت دی جا سکتی ہے | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | تصادم کا پتہ لگانا | عناصر کو آپس میں ٹکرائیں اور ایک دوسرے کے ردعمل کو یقینی بنانے کے لیے keypresses استعمال کریں؛ گیم کی کارکردگی کو یقینی بنانے کے لیے cooldown فنکشن فراہم کریں | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | سکور رکھنا | گیم کی حالت اور کارکردگی کی بنیاد پر ریاضی کے حسابات کریں | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | گیم کا اختتام اور دوبارہ شروع کرنا | گیم کا اختتام اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کی صفائی اور متغیرات کی ری سیٹ کرنا | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | ویب ایپ میں HTML ٹیمپلیٹس اور روٹس | ملٹی پیج ویب سائٹ کے فن تعمیر کی اسکافولڈنگ کو روٹنگ اور HTML ٹیمپلیٹس کا استعمال کر کے سیکھیں | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | لاگ ان اور رجسٹریشن فارم بنائیں | فارم بنانے اور ویلیڈیشن کے طریقہ کار کے بارے میں سیکھیں | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے | آپ کی ایپ میں ڈیٹا کیسے آتا اور جاتا ہے، اسے کیسے حاصل کریں، محفوظ کریں، اور ختم کریں | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | اسٹیٹ مینجمنٹ کے تصورات | اپنی ایپ میں اسٹیٹ کو کیسے برقرار رکھا جاتا ہے اور پروگرام کے ذریعے اسے کیسے منظم کیا جاتا ہے | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | VScode کے ساتھ کام کرنا | کوڈ ایڈیٹر استعمال کرنا سیکھیں| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | AI کے ساتھ کام کرنا | اپنا AI اسسٹنٹ بنانا سیکھیں | [AI Assistant project](./9-chat-project/README.md) | Chris | + +## 🏫 تعلیم + +ہمارا نصاب دو اہم تعلیمی اصولوں کو مدنظر رکھتے ہوئے ڈیزائن کیا گیا ہے: +* پروجیکٹ پر مبنی سیکھنا +* کثرت سے کوئزز + +یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کی بنیادیں سکھاتا ہے، نیز آج کے ویب ڈویلپرز کی طرف سے استعمال ہونے والے جدید اوزار اور تکنیکس بھی۔ طلباء کو ٹائپنگ گیم، ورچوئل ٹیریریم، ماحولیاتی براؤزر ایکسٹینشن، اسپیس انویڈر طرز کا گیم، اور کاروباری بنکنگ ایپ بنانے کا عملی تجربہ حاصل کرنے کا موقع ملے گا۔ سیریز کے آخر تک، طلباء کو ویب ڈویلپمنٹ کی ایک مضبوط سمجھ حاصل ہو جائے گی۔ + +> 🎓 آپ اس نصاب کے ابتدائی چند اسباق کو مائیکروسافٹ لرن پر [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کے طور پر لے سکتے ہیں! + +یہ یقینی بنا کر کہ مواد پروجیکٹس کے مطابق ہو، عمل طلباء کے لیے زیادہ دلچسپ بنایا جاتا ہے اور تصورات کی یادداشت میں بہتری آتی ہے۔ ہم نے جاوا اسکرپٹ کی بنیادوں میں کئی ابتدائی اسباق لکھے ہیں تاکہ تصورات متعارف کرائیں، جن کے ساتھ ویڈیو "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" کی ویڈیو ٹیوٹوریل سیریز کا استعمال کیا گیا ہے، جن کے کچھ مصنفین نے اس نصاب میں مدد کی ہے۔ + +اس کے علاوہ، کلاس سے پہلے ایک کم دباؤ والا کوئز طالب علم کے لیے یک موضوع سیکھنے کے ارادے کو متعین کرتا ہے، جبکہ کلاس کے بعد دوسرا کوئز بہتر یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور خوشگوار بنانے کے لیے ڈیزائن کیا گیا ہے اور مکمل یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے سے شروع ہو کر 12 ہفتوں کے سائیکل کے آخر میں زیادہ پیچیدہ ہو جاتے ہیں۔ + +اگرچہ ہم نے جاوااسکرپٹ فریم ورکس کو جان بوجھ کر شامل نہیں کیا تاکہ بنیادی مہارتوں پر توجہ دی جا سکے جو ویب ڈویلپر کے لیے ضروری ہیں، اگلا اچھا قدم اس نصاب کو مکمل کرنے کے بعد Node.js کے بارے میں سیکھنا ہو گا، جس کے لیے ویڈیوز کی ایک اور سیریز موجود ہے: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"۔ + +> ہمارا [Code of Conduct](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما خطوط ملاحظہ کریں۔ ہم آپ کی تعمیری آراء کے خیرمقدم کے منتظر ہیں! ## 🧭 آف لائن رسائی -آپ اس دستاویز کو آف لائن [Docsify](https://docsify.js.org/#/) استعمال کرکے چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنی مقامی مشین پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، اور پھر اس ریپو کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر دستیاب ہوگی: `localhost:3000`۔ - -## 📘 پی ڈی ایف +آپ اس دستاویز کو آف لائن [Docsify](https://docsify.js.org/#/) کے ذریعہ چلا سکتے ہیں۔ اس ریپو کو فورک کریں، اپنی مقامی مشین پر [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart)، پھر اس ریپو کے روٹ فولڈر میں `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر چلے گی: `localhost:3000`۔ -تمام اسباق کی پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) دی گئی ہے۔ +## 📘 PDF +تمام اسباق کا ایک پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) دستیاب ہے۔ ## 🎒 دیگر کورسز -ہماری ٹیم دوسرے کورسز بھی تیار کرتی ہے! دیکھیں: + +ہماری ٹیم دیگر کورسز بھی تیار کرتی ہے! دیکھیں: ### LangChain @@ -217,7 +227,7 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں [![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Generative AI Series [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) @@ -225,7 +235,7 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں [![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - + ### Core Learning [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) @@ -236,30 +246,30 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں [![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Copilot Series [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## مدد حاصل کرنا +## مدد حاصل کریں -اگر آپ پھنس جائیں یا AI ایپس بنانے کے حوالے سے کسی قسم کا سوال ہو۔ MCP کے بارے میں مباحثوں میں شریک ہوں جہاں دوسرے سیکھنے والے اور تجربہ کار ڈیولپرز موجود ہیں۔ یہ ایک مددگار کمیونٹی ہے جہاں سوالات خوش آمدید کہے جاتے ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔ +اگر آپ پھنس جائیں یا AI ایپس بنانے کے بارے میں کوئی سوال ہو تو۔ MCP کے بارے میں بحث میں دیگر سیکھنے والوں اور تجربہ کار ڈویلپرز سے شامل ہوں۔ یہ ایک معاون کمیونٹی ہے جہاں سوالات خوش آمدید ہیں اور علم آزادانہ طور پر شیئر کیا جاتا ہے۔ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -اگر آپ کے پاس پروڈکٹ فیڈبیک ہے یا آپ کو کسی مسئلے کا سامنا ہے تو یہ دیکھیں: +اگر آپ کو کسی پروڈکٹ کا فیڈبیک ہو یا تعمیر کے دوران کوئی خرابی ہو تو ملاحظہ کریں: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## لائسنس -یہ ذخیرہ MIT لائسنس کے تحت لائسنس یافتہ ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔ +یہ ریپوزٹری MIT لائسنس کے تحت ہے۔ مزید معلومات کے لیے [LICENSE](../../LICENSE) فائل دیکھیں۔ --- -**بیانِ اخطار**: -اس دستاویز کا ترجمہ مصنوعی ذہانت کی ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے کیا گیا ہے۔ اگرچہ ہم درستگی کے لئے کوشاں ہیں، براہ کرم نوٹ کریں کہ خودکار تراجم میں غلطیاں یا عدم درستیاں ہوسکتی ہیں۔ اصل دستاویز کو اس کی مادری زبان میں ہی مستند ذریعہ سمجھا جانا چاہئے۔ اہم معلومات کے لئے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کی صورت میں ہم ذمہ دار نہیں ہوں گے۔ +**دستیابی کی اطلاع**: +یہ دستاویز AI ترجمہ خدمت [Co-op Translator](https://github.com/Azure/co-op-translator) کے ذریعے ترجمہ کی گئی ہے۔ اگرچہ ہم درستگی کی کوشش کرتے ہیں، براہ کرم آگاہ رہیں کہ خودکار ترجموں میں غلطیاں یا کمیاں ہو سکتی ہیں۔ اصل دستاویز اپنی مادری زبان میں مستند ماخذ سمجھی جانی چاہیے۔ اہم معلومات کے لیے پیشہ ورانہ انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمہ کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا تشریح کی ذمہ داری ہم پر نہیں ہوگی۔ \ No newline at end of file diff --git a/translations/zh-CN/.co-op-translator.json b/translations/zh-CN/.co-op-translator.json index 65f4c03a8..1ec012f02 100644 --- a/translations/zh-CN/.co-op-translator.json +++ b/translations/zh-CN/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T11:58:19+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:27:11+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "zh-CN" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:12:19+00:00", + "translation_date": "2026-03-06T16:30:45+00:00", "source_file": "AGENTS.md", "language_code": "zh-CN" }, @@ -516,8 +516,8 @@ "language_code": "zh-CN" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:06:51+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:23:42+00:00", "source_file": "README.md", "language_code": "zh-CN" }, diff --git a/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md index df1ee5a3f..9687474eb 100644 --- a/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,15 +1,15 @@ # 编程语言与现代开发工具简介 -嗨，未来的开发者！👋 我能告诉你一件每天都会让我激动不已的事情吗？你即将发现，编程不仅仅是关于计算机——它是一种具有真正超能力的方式，能让你把最狂野的创意变成现实！ +嗨，未来的开发者！👋 我可以告诉你一件每天都让我激动不已的事吗？你即将发现，编程不只是关于计算机——它是拥有实际超能力，将你最狂野的想法变为现实的能力！ -你知道用自己最喜欢的应用时那种一切完美契合的时刻吗？当你点击一个按钮，发生了某种神奇的事情，让你忍不住惊叹“哇，他们到底是怎么做到的？”那么，就像你一样的人——可能正坐在他们最喜欢的咖啡馆，凌晨两点喝着第三杯浓咖啡——写出了创造那个魔法的代码。更震撼的是：到本课结束时，你不仅会理解他们是怎么做到的，还会急切想亲自尝试一番！ +你知道那种时刻吗？当你使用你最喜欢的应用，所有东西恰到好处地运作起来？当你点击一个按钮，发生了某种完全神奇的事情，让你不禁惊呼“哇，他们是怎么做到的？”嗯，正是像你一样的某个人——可能深夜两点坐在他最爱咖啡馆，喝着第三杯浓缩咖啡——写下了创造那魔法的代码。最让你惊讶的是：到本课结束时，你不仅会理解他们是如何做到的，还会迫不及待想自己试一试！ -听我说，我完全理解如果现在编程看起来让你感到害怕。当我刚开始时，我真的以为你得是某种数学天才，或者从五岁起就开始编程。但有件事彻底改变了我的看法：编程就像学习用一门新语言交谈。你从“你好”和“谢谢”开始，然后学会点咖啡，再到后面能谈天说地！只不过这次，你是在和计算机对话，而说实话？它们是你遇到过的最有耐心的对话伙伴——从不批评你的错误，并且永远乐意再试一次！ +听着，如果现在觉得编程有点吓人，我完全理解。我刚开始学习时，真的以为你得是数学天才，或者从五岁就开始写代码。但彻底改变我看法的是：编程就像学习用新语言对话。你从“你好”和“谢谢”学起，然后慢慢学会点咖啡，过不了多久，你就能进行深刻的哲学讨论！不过这里，你是在跟计算机对话，说实话？它们是你见过最有耐心的对话伙伴——从不因为你的错误而评判你，总是乐意再试一次！ -今天，我们将探索那些让现代网页开发不仅可行而且极其上瘾的令人难以置信的工具。我说的是 Netflix、Spotify 和你最喜欢的独立应用工作室每天使用的同样的编辑器、浏览器和工作流程。最棒的是，这些专业级、行业标准的工具大多数是完全免费的！ +今天，我们将探索那些让现代网页开发不仅可能还极其上瘾的神奇工具。我说的正是 Netflix、Spotify 以及你最喜欢的独立应用工作室的开发者们每天使用的编辑器、浏览器和工作流。这里有个让你忍不住开心跳舞的部分：大部分这些专业级、行业标准的工具都是完全免费的！ ![Intro Programming](../../../../translated_images/zh-CN/webdev101-programming.d6e3f98e61ac4bff.webp) -> 速写笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作 +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey @@ -27,59 +27,61 @@ journey 工具探索: 5: You 社区连接: 5: You ``` -## 让我们看看你已经知道什么！ -在我们进入有趣的内容之前，我很好奇——你已经对这个编程世界了解多少？听着，如果你看着这些问题想“我完全一点头绪都没有”，这不仅没关系，还非常完美！这意味着你正处在绝佳的起点。把这个测验想象成锻炼前的拉伸运动——我们只是让大脑先热身！ +## 来看看你已经知道些什么！ -[参加课前测验](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +在我们跳入有趣的内容之前，我很想知道——你对这个编程世界已经了解多少？听着，如果你看到这些问题时想“我一点头绪都没有”，那不但没关系，反而是完美的！这意味着你来对地方了。把这个测试当成运动前的热身——我们只是在热身你的大脑肌肉！ -## 我们即将一起踏上的冒险之旅 +[参加课前测试](https://ff-quizzes.netlify.app/web/) -好了，我真的非常激动要和你一同探索今天的内容！说真的，我真希望能看到你那些概念“恍然大悟”时的表情。我们将一起经历这段不可思议的旅程： -- **什么是编程（以及为什么它超酷！）**——我们将发现代码究竟是如何成为无形的魔法，驱动你周围所有事物，从那闹钟怎样知道今天是周一，到算法如何完美推荐你喜欢的 Netflix 内容 -- **编程语言和它们令人惊讶的个性**——想象参加一个派对，每个人都有完全不同的超能力和解决问题的方式。这就是编程语言的世界，你一定会喜欢认识它们！ -- **数字魔法发生的基本构建块**——把它们当作终极创意的乐高积木。一旦你理解这些零件是如何拼合的，你会发现你完全可以构建任何你想象中的东西 -- **能让你感觉像拿到巫师魔杖的专业工具**——我一点都不夸张，这些工具真的会让你感觉拥有超能力，更棒的是？它们正是专业人士使用的工具！ +## 我们即将一起展开的冒险 -> 💡 **温馨提示**：今天别想着把所有内容都记住！此刻，我只希望你感受到可能性的火花。细节会随着我们的实践自然沉淀——这才是真正的学习过程！ +好吧，我真的是激动得跳起来，迫不及待要和你一起探索今天的内容！说真的，我真希望能看到你在某些概念终于明白时的表情。这是我们一起踏上的精彩旅程： -> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上学习本课程！ +- **什么是编程（以及为什么它是最酷的事情！）**——我们将发现代码是如何成为无形的魔法，驱动你周围的一切，从那个奇妙知道现在是周一早晨的闹钟，到精准策划你 Netflix 推荐的算法 +- **编程语言及其令人惊叹的性格**——想象走进一个派对，每个人都拥有完全不同的超能力和解决问题的方式。编程语言的世界就是这样，你会喜欢认识它们！ +- **构成数字魔法的基本构件**——把它们想象成终极乐高积木。一旦理解了这些拼接方式，你会发现你可以建立任何你想象出来的东西 +- **让你感觉像刚拿到魔法棒的专业工具**——我一点不会夸张——这些工具真能让你感觉拥有超能力，最棒的是？它们跟专业人士用的是一样的！ -## 那么，什么是*编程*？ +> 💡 **提示**：别想着今天把所有东西都记住！现在，我只希望你感受到对无限可能的那份兴奋。细节会随着一起练习自然牢固——这才是真正的学习！ -好，让我们来攻克这个价值百万美元的问题：编程究竟是什么？ +> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上学习本课程！ -我来给你讲一个让我完全改变看法的故事。上周，我试图向我妈妈解释如何使用我们的新智能电视遥控器。我发现自己说着“按那个红色按钮，不是大红按钮，是左边的小红按钮……不，你那边的左边……好了，现在按住两秒，不是一秒，也不是三秒……”是不是很熟悉？😅 +## 那么编程到底*是什么*？ -这就是编程！它是向一个非常强大的对象给出极其详细、逐步的指令的艺术，但必须清楚准确。只不过你不是向妈妈（她可能会问“哪个红色按钮？！”）解释，而是向计算机（它只做你说的，即使不完全是你想要的）。 +好，来解答这个价值百万的问题：编程到底是什么？ -当我第一次学会这点时，真是震惊到不行：计算机其实很简单。它们字面上只懂两种东西——1和0，也就是“是”和“否”或“开”和“关”。就是这么简单！但魔幻的地方在这里——我们不必像电影《黑客帝国》一样说1和0。这时，**编程语言**就派上用场了。它们就像世界上最棒的翻译官，把你完全正常的人类想法转换成计算机语言。 +我给你讲一个完全改变我看法的故事。上周，我试图给我妈妈讲怎么用我们新的智能电视遥控器。我发现我一直在说“按红色按键，但不是那个大红色，是左边那个小红色……不，另一个左边……好了，现在按住两秒，不是一秒，也不是三秒……”听起来熟悉吗？😅 -每天早上醒来，这点仍然让我激动不已：你生活中所有的数字事物，最初都是像你一样的人，可能穿着睡衣，手拿咖啡，在笔记本上敲代码。那个让你看起来完美无瑕的 Instagram 滤镜？有人写了那段代码。带你发现新歌的推荐算法？开发者设计了它。帮助你和朋友均摊晚餐账单的应用？没错，有人想着“真烦人，我一定能改进它”，结果……他们做到了！ +这就是编程！向一个非常强大的对象提供极其详细、一步步的说明的艺术，但需要把所有事都细致到位。只是你不是解释给你妈妈（她可以问“哪个红色按键？！”），而是在解释给计算机（它只执行你说的，哪怕你说的不是你真正想表达的意思）。 -学会编程，你不仅仅是习得一项新技能——你正在加入这样一个令人敬佩的群体，这群解决问题的人用他们的每一天思考，“如果我能造出点东西，让某个人的一天更美好一点，会怎么样？”说真的，有什么比这更酷的吗？ +我刚学时最震撼的是：计算机其实内核非常简单。它们只懂两种东西——1 和 0，基本上就是“是”和“否”或者“开”和“关”。就是这样！但是这里就神奇了——我们不需要像《黑客帝国》那样直接用 1 和 0 交流。这时，**编程语言**就派上用场了。它们就像最棒的翻译官，把你正常人的思维转成电脑能懂的语言。 -✅ **趣味小调查**：闲暇时看看这个超酷的内容——你认为世界上第一位计算机程序员是谁？提示：她可能不是你想象中的那样！这位人士背后的故事极其精彩，说明编程从一开始就是关于创造性解决问题和跳出框架思考。 +还有让我每天早上醒来都激动得起鸡皮疙瘩的是：你生活中几乎所有数字化的东西，都是某个跟你一样的人开始的，可能穿着睡衣，手捧一杯咖啡，在笔记本上敲代码。那个让你看起来完美无瑕的 Instagram 滤镜？有人写了那段代码。为你推荐新歌的算法？有个程序员构建了它。帮你和朋友分摊晚餐账单的应用？是的，某个人想“这太烦了，我能解决”，然后他们做到了！ -### 🧠 **情绪检查：你感觉如何？** +当你学会编程，不只是学会一项新技能——你成为了一个不可思议的解决问题社区的一员。他们每天都在想，“如果我能造出点让别人生活稍微好一点的东西怎么办？”老实说，这还有什么比这更酷的吗？ -**花点时间想想：** -- “向计算机下指令”的想法你现在能理解了吗？ -- 你能想到想用编程自动化的日常任务吗？ -- 关于编程，你脑海中冒出了哪些问题？ +✅ **趣味小知识**：有空时查查这个超酷话题——你知道世界上第一个计算机程序员是谁吗？我给你个提示：可能不是你想象的那个人！这个人的故事绝对精彩，展示了编程一直是关于创造性解决问题和跳出思维框架。 -> **记住**：某些概念暂时模糊完全正常。学编程就像学新语言——需要时间让大脑建立神经回路。你做得很棒！ +### 🧠 **自我检测时间：你感觉如何？** -## 编程语言就像不同风味的魔法 +**花点时间思考：** +- 现在“给计算机下指令”的概念对你有意义吗？ +- 你能想到一个想用编程自动化的日常任务吗？ +- 对整个编程世界有什么疑问在你脑海中冒出来？ + +> **记住**：现在有些概念模糊是完全正常的。学编程就像学新语言——你的大脑需要时间来建立神经通路。你做得很棒！ + +## 编程语言就像不同口味的魔法 -嗯，这听起来可能有点怪，但请坚持听我说——编程语言很像不同类型的音乐。想想看：有爵士乐，流畅且即兴；摇滚，强劲直接；古典，优雅而有结构；还有嘻哈，创意和富于表现力。每种风格都有自己的气质和热情的拥护者社区，同时适合不同的心情和场合。 +好，这听起来可能怪怪的，但坚持听我说——编程语言很像不同类型的音乐。想想看：有爵士，顺滑而即兴；摇滚，强力而直白；古典，优雅且结构严谨；还有嘻哈，充满创意与表达。每种风格都有自己的氛围，热情的粉丝团体，各自适合不同场合和情绪。 -编程语言也是一样！你不会用同一种语言去造一个有趣的手机游戏和处理庞大的气候数据，就像你不会在瑜伽课上听死亡金属（嗯，大多数瑜伽课都是这样！😄）。 +编程语言也是一样！你不会用同一种语言写一个有趣的手机游戏，也用它来处理庞大的气候数据分析，就像在瑜伽课上不可能放着死亡金属（嗯，大多数瑜伽课至少如此😄）。 -但每次一想到这点，我都震惊不已：这些语言就像世界上最耐心、最聪明的口译员坐在你旁边。你可以用适合你人脑的方式表达想法，语言帮你完成把这些转换成计算机说的1和0的复杂工作。这就像拥有一个在“人类创造力”和“计算机逻辑”两种语言之间流利切换的朋友——他们永不疲倦，不用喝咖啡休息，也从不因为你重复问同一个问题而评价你！ +但让我每次想起都惊叹的是：这些语言就像身旁有最耐心、最聪明的翻译官。你可以用大脑自然的方式表达思想，它们会帮你完成将想法翻译成计算机真正懂的 1 和 0 的复杂工作。这就像你有个朋友，精通“人类创造力”和“计算机逻辑”两种语言——而且他们永不疲倦，不用喝咖啡休息，也不会因为你重复问同一个问题而不耐烦！ -### 流行编程语言及其用途 +### 流行的编程语言及其用途 ```mermaid mindmap @@ -97,7 +99,7 @@ mindmap 机器学习 自动化 R - 统计 + 统计学 研究 Mobile Apps Java @@ -120,58 +122,59 @@ mindmap 云服务 可扩展后端 ``` -| 语言 | 最适合 | 为什么受欢迎 | -|------|--------|--------------| -| **JavaScript** | 网页开发，用户界面 | 在浏览器中运行，驱动互动网站 | -| **Python** | 数据科学，自动化，人工智能 | 易读易学，拥有强大库支持 | -| **Java** | 企业应用，安卓应用 | 跨平台，适合大型系统 | -| **C#** | Windows 应用，游戏开发 | 微软生态圈支持强大 | -| **Go** | 云服务，后端系统 | 快速简单，专为现代计算设计 | +| 语言 | 最佳用途 | 热门原因 | +|----------|----------|------------------| +| **JavaScript** | 网页开发、用户界面 | 浏览器运行，驱动交互式网站 | +| **Python** | 数据科学、自动化、人工智能 | 易读易学，强大库支持 | +| **Java** | 企业应用、安卓应用 | 跨平台，适合大型系统 | +| **C#** | Windows 应用、游戏开发 | 微软生态支持强大 | +| **Go** | 云服务、后端系统 | 快速简单，面向现代计算 | ### 高级语言 vs 低级语言 -说实话，这是我刚开始学时觉得最烧脑的概念，所以我要分享一个让我顿悟的比喻——希望对你也有帮助！ +老实说，这是我初学时最头疼的概念，所以我想用一个帮我彻底领会的比喻分享给你——希望对你也有帮助！ -想象你去一个不会说语言的国家，急需找厕所（我们都经历过，对吧？😅）： +想象你去一个语言不通的国家，急需找洗手间（谁都经历过吧？😅）： -- **低级编程**就像学得那么好本地方言，能和街角卖水果的奶奶聊文化典故、本地俚语和只有当地人懂的笑话。超厉害且高效……如果你流利的话！但当你只是想找个厕所时，简直头大。 +- **低级编程** 就像你学会当地方言，能跟街角卖水果的老太太聊上天，用文化暗示、本地俚语和只有本地人懂的笑话。超级厉害且效率极高……如果你流利的话！但当你只是想找个厕所时，真的很难。 -- **高级编程**就像有一个很棒的本地朋友完全懂你。你用英语说“我急需找厕所”，朋友帮你翻译文化差异，给你解释得非常清楚，适合不懂当地文化的你。 +- **高级编程** 像有个能懂你心思的当地朋友。你直接用英文说“我真的需要找洗手间”，他帮你翻译成当地话，给你解释得非常明白，适合你这种外来者理解。 -编程术语来说： -- **低级语言**（如汇编或C）让你能和计算机硬件进行极其细致的对话，但你得像机器一样思考……嗯，这对脑力是很大考验！ -- **高级语言**（如 JavaScript、Python 或 C#）让你像人类一样思考，它们在幕后处理所有机器语言。更棒的是，它们有超友好的社区，里面的人都记得刚入门的艰难，真心想帮助你！ +用编程术语来说： +- **低级语言**（如汇编或C）让你直接与计算机硬件细致对话，但你得用机器思维，这……嗯，心理转换很大！ +- **高级语言**（如 JavaScript、Python或 C#）让你像人类思考，它们负责幕后处理机器语言。另外，它们有热情欢迎新手的社区，大家都记得刚学时的辛苦，真心想帮忙！ -你猜我推荐你先学哪个？😉 高级语言就像有了辅助轮，虽然你可能永远不会想摘掉，因为它让整体验更愉快！ +你猜我建议你从哪种开始学？😉 高级语言就像带着辅助轮的自行车，根本不想摘掉，因为它让整个体验轻松愉快！ ```mermaid flowchart TB - A["👤 人类思维：
'我想计算斐波那契数列'"] --> B{选择语言级别} + A["👤 人类思维:
'我想计算斐波那契数列'"] --> B{选择语言级别} B -->|高级| C["🌟 JavaScript/Python
易读易写"] - B -->|低级| D["⚙️ 汇编/C
直接硬件控制"] + B -->|低级| D["⚙️ 汇编/C
直接控制硬件"] - C --> E["📝 写：fibonacci(10)"] - D --> F["📝 写：mov r0,#00
sub r0,r0,#01"] + C --> E["📝 编写: fibonacci(10)"] + D --> F["📝 编写: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 计算机理解：
翻译器处理复杂性"] + E --> G["🤖 计算机理解:
翻译器处理复杂性"] F --> G - G --> H["💻 相同结果：
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 相同结果:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### 让我给你展示为什么高级语言更友好 -好了，我马上给你看点东西，完美展示我为什么爱上高级语言。但先请你答应我一个条件。看到第一段代码示例时，不要慌张！它看起来吓人正是我要说明的点！ +### 为你展示为何高级语言更亲切 -我们将看同一任务用两种完全不同风格写成的代码。它们都会产生所谓的斐波那契数列——这是一个漂亮的数学模式，每个数字是前两个数字之和：0，1，1，2，3，5，8，13……（趣味事实：你会在大自然无处不在地发现这个模式——向日葵的种子螺旋，松果的形状，甚至银河的形成！） +好，我马上给你展示一段代码，完美说明我为何爱上高级语言。但首先——我需要你答应我，看到第一段代码时别慌！它故意看起来可怕。这正是我要强调的点！ -准备好看差别了吗？走起！ +我们将以两种完全不同的风格写出相同的任务。它们生成的是斐波那契数列——一个美丽的数学模式，每个数字都是前两个之和：0, 1, 1, 2, 3, 5, 8, 13……（趣味知识：自然界到处都有这个模式——向日葵种子螺旋、松果纹理，甚至银河系的形成！） -**高级语言（JavaScript）——人类友好：** +准备好了看差别吗？走起！ + +**高级语言 (JavaScript) —— 友好易懂：** ```javascript // 第一步：基本斐波那契设置 @@ -183,13 +186,13 @@ console.log('Fibonacci sequence:'); ``` **这段代码做了什么：** -- **声明**一个常量，用来指定我们想生成多少个斐波那契数 -- **初始化**两个变量，用于跟踪数列中的当前值和下一个值 -- **设置**起始值（0和1），定义斐波那契序列 -- **显示**一个标题消息，标示我们的输出 +- **声明**一个常量确定我们要生成多少个斐波那契数字 +- **初始化**两个变量跟踪当前和下一个数字 +- **设定**起始值（0 和 1），定义数列规则 +- **展示**一个标题，标识输出结果 ```javascript -// 第2步：用循环生成序列 +// 第2步：使用循环生成序列 for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -200,11 +203,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**代码运行过程中：** -- **用`for`循环**遍历序列中的每个位置 -- **打印**每个数字及其位置，使用模板字符串格式化 -- **计算**下一个斐波那契数，方法是加上当前数和下一个数 -- **更新**跟踪变量，进入下一次循环 +**下面发生了什么：** +- **使用**`for` 循环遍历序列的位置 +- **显示**每个数字和其位置，采用模板字符串格式化 +- **计算**下一个数，当前值加上下一个值 +- **更新**变量，前进到下一步循环 ```javascript // 第3步：现代函数式方法 @@ -223,11 +226,11 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**上述代码中：** -- **创建**了一个可复用函数，使用现代箭头函数语法 -- **构建**了一个数组来存储完整序列，而不是逐个展示 -- **使用**数组索引根据前面的值计算新数 -- **返回**完整序列，方便在程序其他部分灵活使用 +**上述代码中我们：** +- **创建**了一个使用现代箭头函数语法的可重用函数 +- **构建**了一个数组来存储完整序列，而不是逐个显示 +- **用**数组索引计算每个新数字，基于前面值 +- **返回**完整序列，方便程序其他部分调用 **低级语言（ARM 汇编）——计算机友好：** @@ -256,27 +259,27 @@ back add r0,r1 end ``` -注意，JavaScript 版本读起来几乎像英语指令，而汇编使用的是直接控制处理器的神秘命令。它们完成的是完全相同的任务，但高级语言更易于人类理解、编写和维护。 +你注意到 JavaScript 版本几乎像英文说明，而汇编版本则使用神秘命令直接控制计算机处理器。两者任务相同，但高级语言更易理解、编写和维护。 **你会注意到的主要区别：** -- **可读性**：JavaScript 用像 `fibonacciCount` 这样的描述性名称，而汇编使用像 `r0`、`r1` 这样晦涩的标签 -- **注释**：高级语言鼓励解释性注释，使代码具备自我说明性 -- **结构**：JavaScript 的逻辑流程与人类逐步思考问题的方式相匹配 -- **维护**：针对不同需求更新 JavaScript 版本简单明了 +- **可读性**：JavaScript 使用描述性名称如 `fibonacciCount`，而汇编语言则使用晦涩的标签如 `r0`、`r1` +- **注释**：高级语言鼓励写解释性注释，使代码具备自我文档功能 +- **结构**：JavaScript 的逻辑流程符合人类逐步思考问题的方式 +- **维护**：根据不同需求更新 JavaScript 版本简单清晰 -✅ **关于斐波那契数列**：这个绝美的数字模式（每个数字都是前两个数字之和：0, 1, 1, 2, 3, 5, 8……）在自然界里无处不在！你会在向日葵的螺旋、松果的排列、鹦螺壳的弯曲方式，甚至树枝的生长方式中发现它。数学和代码帮我们理解并重现自然界用来创造美丽的模式，真是令人震撼！ +✅ **关于斐波那契数列**：这个绝美的数字模式（每个数字等于前两个数字之和：0、1、1、2、3、5、8……）实际上在大自然中 *无处不在*！你会在向日葵的螺旋形、松果的纹理、鹦鹉螺壳的弯曲方式，甚至树枝生长的方式中找到它。数学和代码能帮助我们理解并复刻自然用来创造美丽的模式，这真是令人震惊！ -## 构成魔法的基石 +## 构建魔法的基石 -好了，现在你已经看到了编程语言的实际运作，让我们分解构成所有程序的基础部分。把它们看作你最喜欢的食谱中的基本成分——只要你了解每个成分的作用，就能在几乎任何语言中读写代码！ +好了，现在你已经看到编程语言的实际表现了，接下来让我们拆解构成所有程序的基础要素。把它们想象成你最喜欢的食谱中的必备材料——一旦了解每个材料的用途，你就能用几乎任何语言读写代码！ -这有点像学习编程的语法。还记得你在学校学名词、动词和如何组成句子吗？编程也有自己的语法版本，说实话，比英语语法更加合乎逻辑和宽容！😄 +这有点像学习编程的语法。还记得学校里学习名词、动词和如何构成句子吗？编程也有自己的语法，坦白说，它比英语语法要逻辑得多，也宽容得多！😄 ### 语句：一步步的指令 -先从**语句**开始——它们就像你和电脑对话中的单句。每条语句告诉电脑做一件具体的事，就像给出方向指令：“这里左转”、“红绿灯处停下”、“在那个地方停车”。 +让我们从**语句**开始——它们就像跟计算机对话中的一句句子。每条语句告诉计算机做一件具体的事，就像给出指示：“这里左转”、“红灯停”、“在那个车位停车”。 -我喜欢语句的地方是它们通常很易读。看看这个： +我喜欢语句的原因是它们通常很易读。看看这个： ```javascript // 执行单个操作的基本语句 @@ -285,10 +288,10 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**这段代码做了什么：** -- **声明**一个常量变量存储用户的名字 -- **向控制台输出**问候消息 -- **计算**并存储一个数学运算的结果 +**这段代码的功能是：** +- **声明**一个常量变量用来存储用户的名字 +- **向控制台输出**一条问候信息 +- **计算**并存储一个数学运算结果 ```javascript // 与网页交互的语句 @@ -296,19 +299,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**一步步讲解发生了什么：** -- **修改**浏览器标签页显示的网页标题 +**一步步说明：** +- **修改**浏览器标签页中显示的网页标题 - **更改**整个页面主体的背景颜色 ### 变量：程序的记忆系统 -好，**变量**说实话是我最喜欢讲的概念之一，因为它们就像你每天使用的东西！ +好了，**变量**是我最喜欢讲解的概念之一，因为它们和你日常使用的东西非常相似！ -想想你手机的联系人列表。你不会记住每个人的号码——你保存的是“妈妈”、“死党”或者“凌晨2点前送餐的披萨店”，然后让手机记住实际号码。变量就是这样！它们是带标签的容器，程序可以用名字存储信息，并在需要时取出。 +想象一下你的手机通讯录。你不会记住每个人的电话号码——相反，你会保存“妈妈”、“最好朋友”或“凌晨两点还送外卖的披萨店”，然后让手机帮你记住实际号码。变量也是这样！它们就像带标签的容器，你的程序可以用有意义的名字存储信息，之后再取出来用。 -更酷的是：变量会随着程序运行而改变（这也解释了它名字的意义）。就像你发现更好的披萨店会更新联系人一样，变量可以随着程序获取新信息或发生变化而更新！ +更酷的是：变量可以随着程序运行而改变（所以叫“变量”——懂了吗？）。就像你可能会更新那个披萨联系人的号码，变量会随着程序获取到新信息或环境变化不断更新！ -让我给你演示一下多么简单漂亮： +我来给你演示一下，这可以多么简单： ```javascript // 第一步：创建基本变量 @@ -319,13 +322,13 @@ let isRaining = false; ``` **理解这些概念：** -- **用 `const` 存储不变的值**（比如网站名） -- **用 `let` 存储程序中会变化的值** -- **赋值不同的数据类型**：字符串（文本）、数字和布尔值（真/假） -- **选择描述性名称**，说明每个变量包含什么 +- **用 `const` 存储**不变的值（比如网站名称） +- **用 `let` 存储**在程序中可能改变的值 +- **赋值**不同数据类型：字符串（文本）、数字和布尔值（真/假） +- **选择**描述性名称，说明变量存储的内容 ```javascript -// 第2步：使用对象来分组相关数据 +// 第2步：使用对象对相关数据进行分组 const weatherData = { location: "San Francisco", humidity: 65, @@ -333,10 +336,10 @@ const weatherData = { }; ``` -**上面代码中，我们：** -- **创建了一个对象**将相关的天气信息归类在一起 -- **将多条数据组织在一个变量名下** -- **用键值对清楚地标注每条信息** +**上面代码里，我们：** +- **创建**一个对象，将相关的天气信息组合在一起 +- **用一个变量名**组织多条数据 +- **使用**键值对明确定义每条信息 ```javascript // 第3步：使用和更新变量 @@ -348,32 +351,32 @@ currentWeather = "cloudy"; temperature = 68; ``` -**逐一理解各部分：** -- **用模板字面量 `${}` 语法展示信息** -- **用点号访问对象属性**（如 `weatherData.windSpeed`） -- **更新用 `let` 声明的变量**以响应变化的情况 -- **组合多个变量创造有意义的消息** +**理解各部分功能：** +- **用模板字符串**（`${}` 语法）展示信息 +- **用点号语法**访问对象属性（如 `weatherData.windSpeed`） +- **更新**用 `let` 声明的变量，反映变化的情况 +- **组合**多个变量加工输出有意义的信息 ```javascript -// 第4步：使用现代解构赋值使代码更简洁 +// 步骤4：使用现代解构赋值使代码更简洁 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **你需要知道的是：** -- **用解构赋值提取对象中的特定属性** -- **自动创建与对象键同名的新变量** -- **避免重复点号访问简化代码** +- **用解构赋值**提取对象中的特定属性 +- **创建**与对象键相同名称的新变量 +- **简化**代码，避免重复使用点号语法 -### 控制流：教你的程序学会思考 +### 控制流：教程序如何思考 -这里编程就开始绝对让人疯狂了！**控制流**本质上是教你的程序像你每天无意识做的那样，做出聪明的决策。 +好了，接下来编程就有点神奇了！**控制流**基本上就是教你的程序像你每天自然而然做的那样，做出聪明决策。 -想象一下：今天早上你大概经历的是“如果下雨，我带伞；如果冷，我穿夹克；如果迟到，我就不吃早饭顺路买杯咖啡”。你的大脑自然地遵循这种如果-那么的逻辑，每天数十次！ +想象一下：今天早晨你可能经历了这样的逻辑，“如果下雨了，我就带伞。如果很冷，我就穿夹克。如果我要迟到了，我就跳过早餐在路上买咖啡。”你每天大概都用这种 if-then 逻辑思考几十次！ -这就是让程序显得智能、有生命力的原因，而不是死板执行无聊脚本。它们可以识别情况，评估发生了什么，并做出恰当反应。就像赋予程序一个能适应和做选择的大脑！ +这让程序看起来聪明有活力，而不是死板乏味地执行脚本。它们可以观察情况，评估发生了什么，并做出相应反应。就像给程序装了大脑，能灵活地做决定！ -想看看这多美妙？我来给你演示： +想看到它多酷吗？我来给你演示： ```javascript // 第一步：基本条件逻辑 @@ -387,14 +390,14 @@ if (userAge >= 18) { } ``` -**这段代码做了什么：** -- **检查**用户年龄是否满足投票要求 -- **根据条件结果执行**不同代码块 -- **计算**并显示未满18岁距离投票资格的时间 -- **针对每种情形提供**具体且有用的反馈 +**这段代码作用：** +- **检查**用户年龄是否符合投票要求 +- **根据条件结果**执行不同代码块 +- **计算**并显示未满 18 岁者距离投票资格还有多久 +- **为每种情况**提供具体有用的反馈 ```javascript -// 第2步：使用逻辑运算符的多个条件 +// 第2步：使用逻辑运算符的多条件判断 const userAge = 17; const hasPermission = true; @@ -407,22 +410,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**分解这里发生的事情：** -- **使用 `&&`（且）运算符结合多个条件** -- **用 `else if` 创建多重情形的条件层级** -- **用最终的 `else` 处理所有可能案例** -- **为每种不同情况提供清晰、可行的反馈** +**代码解析：** +- **用 `&&`（且）操作符合并多条件** +- **用 `else if` 构建多层条件判断** +- **用最终的 `else`**应对所有其他情况 +- **针对每种情况**给出清晰且可操作的反馈 ```javascript -// 第3步：使用三元运算符的简洁条件语句 +// 第3步：使用三元运算符实现简洁的条件语句 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**你需要记住的：** -- **用三元运算符 (`? :`) 处理简单的二选一条件** -- **写条件，跟 `?`，接真值，再 `:`，最后假值** -- **在根据条件赋值时使用这个模式** +**你需要记住：** +- **用三元运算符 (`? :`)**处理简单的两选一条件 +- **写条件，跟 `?`，然后是为真时返回的结果，再是冒号 `:`，最后是为假时返回结果** +- **在需要根据条件赋值时使用此模式** ```javascript // 第4步：处理多个特定情况 @@ -445,53 +448,53 @@ switch (dayOfWeek) { } ``` -**这段代码实现了以下功能：** -- **将变量的值匹配多个特定情况** -- **将类似情况归入一组（工作日与周末）** -- **找到匹配时执行相应代码块** -- **用 `default` 处理意外值** -- **用 `break` 语句阻止继续执行下一个情况** +**这段代码实现了：** +- **将变量值与多个特定情况匹配** +- **将相似情况分组**（工作日与周末） +- **匹配时执行**相应代码块 +- **包含 `default`**应对意外值 +- **用 `break`**防止代码继续执行下一个情况 -> 💡 **现实世界的比喻**：把控制流想象成世界上最有耐心的 GPS 指路。它可能告诉你“如果主街堵车，就走高速；如果高速施工，试试风景路”。程序用完全一样的条件逻辑智能响应各种情况，总是为用户提供最优体验。 +> 💡 **现实类比**：把控制流想象成世界上最有耐心的 GPS 指路。它可能会说：“如果主街有堵车，那走高速。如果高速封闭施工，试试风景路线。”程序用同样的条件逻辑智能响应不同情境，总是给用户最佳体验。 -### 🎯 **概念检测：构建块掌握情况** +### 🎯 **概念检测：构建基石掌握度** -**来看看你对基础的掌握如何：** -- 你能用自己的话解释变量和语句的区别吗？ -- 想一个现实场景，用 if-then 决策（像投票的例子） -- 编程逻辑中有什么让你感到惊讶的吗？ +**让我们看看你对基础的掌握情况：** +- 用你自己的话解释变量和语句的区别？ +- 想个现实生活中的 if-then 决策场景（比如投票示例） +- 有关编程逻辑，你觉得最让你惊讶的一点是什么？ -**快速增强信心：** +**快速提升信心：** ```mermaid flowchart LR - A["📝 语句
(指令)"] --> B["📦 变量
(存储)"] --> C["🔀 控制流
(决策)"] --> D["🎉 可用程序！"] + A["📝 语句
(指令)"] --> B["📦 变量
(存储)"] --> C["🔀 控制流
(决策)"] --> D["🎉 工作程序！"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **接下来是什么**：我们将继续深入挖掘这些概念，一起度过一段绝妙的旅程！现在，只需专注于感受未来无限可能的兴奋。具体的技能和技巧随着我们的实践会自然而然地掌握——我保证这会比你想象的更有趣！ +✅ **接下来是什么**：我们将继续这段精彩旅程，深入探讨这些概念，绝对轻松愉快！现在只需感受对未来无限可能的兴奋，具体技能和技巧随着练习自然掌握——我保证这比你想象的要有趣多了！ -## 工具箱 +## 必备工具 -说实话，这部分我已经激动得坐不住了！🚀 我们要聊聊让你感觉像刚拿到数字飞船钥匙一样的神奇工具。 +说实话，这部分让我激动得几乎无法自持！🚀 我们即将聊聊那些超级棒的工具，它们会让你感觉仿佛刚拿到了数字飞船的钥匙。 -你知道厨师手中总有那些完美平衡、感觉像自己手臂延伸的刀具吗？或者音乐家那把碰即可歌唱的吉他？开发者也有属于自己的神奇工具，这些工具绝大多数竟然完全免费，真让人脑洞大开！ +你知道厨师用那种平衡感极佳、仿佛手的一部分的刀子吗？或音乐家一碰吉他就让它唱起来的那把吉他吗？开发者也有属于自己的魔法工具，更令人震撼的是——它们大多数都是完全免费的！ -我激动得都快跳起来了，因为这些工具彻底改变了我们构建软件的方式。我们聊的是 AI 驱动的编码助手，可以帮你写代码（不是开玩笑！），云端环境让你只要有 Wi-Fi 就能随时随地搭建完整应用，还有调试工具如此高级，简直就是给程序装上了透视眼。 +想到能和你分享它们我就激动不已，因为这些工具彻底改变了软件构建方式。我们说的是 AI 驱动的编码助手，能帮你写代码（真不是开玩笑！），还有云端环境让你随时随地用 Wi-Fi 构建完整应用，调试工具先进到像给程序配了透视眼。 -而让我仍兴奋不已的是：这些不是“初学者工具”用着用着就会淘汰的。这就是 Google、Netflix 和你喜欢的那个独立应用工作室当下使用的同款专业级工具。用它们你会感觉自己像个大牛！ +最让我热血沸腾的是：这些可不是“入门工具”，你用它们不会觉得学完就扔。Google、Netflix 甚至你喜欢的独立应用工作室里的开发者们现在就用这些专业级工具。你用它们也能秒变高手！ ```mermaid graph TD - A["💡 你的想法"] --> B["⌨️ 代码编辑器
(VS Code)"] + A["💡 你的创意"] --> B["⌨️ 代码编辑器
(VS Code)"] B --> C["🌐 浏览器开发者工具
(测试与调试)"] C --> D["⚡ 命令行
(自动化与工具)"] D --> E["📚 文档
(学习与参考)"] - E --> F["🚀 惊艳的网页应用！"] + E --> F["🚀 惊艳的网络应用！"] - B -.-> G["🤖 AI 助手
(GitHub Copilot)"] + B -.-> G["🤖 人工智能助手
(GitHub Copilot)"] C -.-> H["📱 设备测试
(响应式设计)"] D -.-> I["📦 包管理器
(npm, yarn)"] E -.-> J["👥 社区
(Stack Overflow)"] @@ -503,95 +506,95 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 代码编辑器和 IDE：你的新数字挚友 +### 代码编辑器与 IDE：你新的数字好朋友 -说说代码编辑器吧——它们绝对会成为你最喜欢呆的地方！把它想象成你的专属编码圣地，大部分时间你都在这里打造、完善你的数字作品。 +聊聊代码编辑器——它们马上就会成为你最喜欢待的地方！把它们看作你的个人编程圣地，你将在这里花费大部分时间创作和打磨数码作品。 -现代编辑器的魔力在于：它们不仅是高级文本编辑器，更像有位天才、耐心的编码导师 24/7 坐在你身边。它们会先于你发现拼写错误，建议改进让你看起来像个大师，帮你理解代码每部分功能，有些甚至能预测你要输入啥，替你把话说完！ +现代编辑器的魔法：它们不仅是高级文本编辑器，更像是全天候最聪明、最支持你的编程导师。它们能在你察觉错误前帮你抓住错字，给出让你看起来像天才的改进建议，帮你理解每段代码作用，还有些能预测你即将输入什么，主动帮你补全！ -我记得第一次发现自动补全时，简直像生活在未来。你一输入，它就说，“嘿，你是不是想调这个函数？刚好能满足你需要！”简直像个读心术编程伙伴！ +我记得第一次发现自动补全时，感觉自己像生活在未来。你开始输入，编辑器就说：“嘿，你是不是想用这个正好符合你需要的函数？”就像有个读心术好友陪编程一样！ -**它们为什么这么不可思议？** +**这些编辑器的强大在哪？** -现代代码编辑器提供了丰富功能，大幅提升你的效率： +现代代码编辑器提供了丰富功能提升效率： -| 功能 | 作用 | 帮助点 | +| 功能 | 作用 | 优点 | |---------|--------------|--------------| -| **语法高亮** | 给代码不同部分着色 | 让代码更容易阅读、发现错误 | -| **自动补全** | 你输入时给出建议 | 加速编程并减少拼写错误 | -| **调试工具** | 帮你找错并修正 | 节省大量排查问题的时间 | -| **扩展** | 添加专门功能 | 让编辑器适配各种技术需求 | -| **AI 助手** | 代码建议和解释 | 加速学习和提高生产力 | +| **语法高亮** | 为代码不同部分着色 | 让代码更易读，更易发现错误 | +| **自动补全** | 输入时推荐代码 | 加快编码速度，减少错误 | +| **调试工具** | 帮你查找修复错误 | 节省大量排错时间 | +| **插件扩展** | 添加专门功能 | 定制编辑器适配各种技术 | +| **AI 助手** | 推荐代码和解释 | 加速学习和开发效率 | -> 🎥 **视频资源**：想看看这些工具实际操作？查看这段[工具箱视频](https://youtube.com/watch?v=69WJeXGBdxg)获取全面概览。 +> 🎥 **视频资源**：想看这些工具怎么用？看这段[必备工具视频](https://youtube.com/watch?v=69WJeXGBdxg)来全面了解。 -#### 推荐的网络开发编辑器 +#### 推荐的网页开发编辑器 **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)**（免费） -- Web 开发者中最流行 -- 极佳的扩展生态系统 +- 网页开发者中最流行 +- 插件生态丰富 - 内置终端和 Git 集成 -- **必装扩展**： +- **必装插件**： - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI 代码建议 - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - 实时协作 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 自动格式化代码 - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 捕捉代码拼写错误 + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 检查拼写错误 -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（收费，学生免费） -- 高级调试和测试工具 +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（付费，学生免费） +- 先进的调试和测试工具 - 智能代码补全 -- 内建版本控制 +- 内置版本控制 -**云端 IDE**（不同价格） -- [GitHub Codespaces](https://github.com/features/codespaces) - 浏览器里完整的 VS Code -- [Replit](https://replit.com/) - 非常适合学习和共享代码 -- [StackBlitz](https://stackblitz.com/) - 极速全栈网页开发 +**基于云的 IDE**（价格各异） +- [GitHub Codespaces](https://github.com/features/codespaces) - 浏览器里的完整 VS Code +- [Replit](https://replit.com/) - 适合学习和共享代码 +- [StackBlitz](https://stackblitz.com/) - 即时全栈网页开发 -> 💡 **入门小贴士**：先用 Visual Studio Code —— 它免费、业界广泛使用，且有庞大社区制作的教程和扩展。 +> 💡 **入门建议**：从 Visual Studio Code 开始——它免费、业内广泛使用，有庞大的社区提供教程和插件支持。 -### 网络浏览器：你的秘密开发实验室 +### 网页浏览器：你的秘密开发实验室 -准备好被彻底震撼了吗！你平常用浏览器刷社媒、看视频，对吧？实际上它们一直藏着个神奇的开发者实验室，等你去发现！ +准备好让你大开眼界吧！你知道一直在用浏览器刷社交媒体、看视频吗？它们其实藏着一个惊人的秘密开发实验室，只等着你去发现！ -每次你右键点击网页选“检查元素”，就打开了一个隐藏的开发者工具世界，这些工具比我以前花大钱买的专业软件都强大多了。就像发现自己平常用的厨房背后藏着一间专业大厨的实验室！ -第一次有人给我展示浏览器开发者工具时，我光是点击四处查看，就花了大约三个小时不停地惊呼：“等等，它居然还能做这个？！”你真的可以实时编辑任何网站，准确看到加载速度，测试你的网站在不同设备上的展示效果，甚至像个专业人士一样调试 JavaScript。简直令人震惊！ +每次右键网页选择“检查元素”，你就打开了一个隐藏世界，里面的开发者工具功能强大得远超我曾经花数百美元购买的软件。这就像发现你家普通厨房后面藏着专业大厨的秘密实验室！ +第一次有人向我展示浏览器开发者工具时，我花了差不多三个小时不停地点击，心里想着“等等，它居然还能做这个？！”你真的可以实时编辑任何网站，准确看到加载速度，测试你的网站在不同设备上的表现，甚至像专家一样调试 JavaScript。这简直让人震惊！ -**浏览器是你秘密武器的原因：** +**这就是浏览器成为你秘密武器的原因：** -当你创建一个网站或网络应用时，你需要看到它在现实中的外观和表现。浏览器不仅展示你的作品，还会提供性能、可访问性和潜在问题的详细反馈。 +当你创建网站或网络应用时，你需要看到它在现实中的外观和行为。浏览器不仅展示你的作品，还提供关于性能、可访问性和潜在问题的详细反馈。 -#### 浏览器开发者工具（DevTools） +#### 浏览器开发者工具 (DevTools) -现代浏览器包含全面的开发套件： +现代浏览器包含全面的开发工具套件： -| 工具类别 | 功能 | 示例用途 | -|---------------|--------------|------------------| -| **元素检查器** | 实时查看和编辑 HTML/CSS | 调整样式以立即查看效果 | -| **控制台** | 查看错误信息和测试 JavaScript | 调试问题和尝试代码 | +| 工具类别 | 功能介绍 | 示例用例 | +|----------|----------|----------| +| **元素检查器** | 实时查看和编辑 HTML/CSS | 调整样式即刻查看效果 | +| **控制台** | 查看错误信息及测试 JavaScript | 调试问题和试验代码 | | **网络监视器** | 跟踪资源加载情况 | 优化性能和加载时间 | -| **可访问性检查器** | 测试包容性设计 | 确保网站对所有用户友好 | -| **设备模拟器** | 在不同屏幕尺寸上预览 | 无需多设备即可测试响应式设计 | +| **可访问性检查器** | 测试包容性设计 | 确保网站适合所有用户 | +| **设备模拟器** | 预览不同屏幕尺寸 | 无需多设备测试响应式设计 | -#### 推荐用于开发的浏览器 +#### 推荐的开发浏览器 -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – 行业标准的 DevTools，拥有丰富文档 -- **[Firefox](https://developer.mozilla.org/docs/Tools)** – 出色的 CSS Grid 和可访问性工具 -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – 基于 Chromium，集成微软开发资源 +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - 行业标准的 DevTools，附带详尽文档 +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - 出色的 CSS Grid 和可访问性工具 +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - 基于 Chromium，配备微软的开发资源 -> ⚠️ **重要测试提示**：务必在多个浏览器中测试你的网页！Chrome 完美运行的东西，在 Safari 或 Firefox 上可能会不同。专业开发者会在所有主流浏览器中测试，以确保一致的用户体验。 +> ⚠️ **重要测试提示**：一定要在多种浏览器中测试你的网站！在 Chrome 上完美运行的东西，可能在 Safari 或 Firefox 中看起来完全不同。专业开发者会跨所有主要浏览器测试，以确保用户体验一致。 -### 命令行工具：开发者超级力量之门 +### 命令行工具：你的开发超级力量入口 -好吧，让我们对命令行有个完全坦诚的时刻，我想让你听听一个真正懂它的人的心声。刚看到它那一刻——黑屏闪烁的文字——我心里真的是想，“不行，绝对不行！这看起来像80年代黑客电影里的东西，我肯定不够聪明用它！”😅 +好了，来说一说关于命令行的完全坦白时刻，因为我想让你听听一个真的懂它的人的看法。刚看到时——就是那个黑黑的屏幕，闪烁的文字——我真的想，“不，我绝对不行！这看起来像80年代黑客电影里的东西，我肯定不够聪明！”😅 -但我当时希望有人告诉我的是，现在我也要告诉你：命令行一点都不可怕——它其实就像是和你的电脑直接对话。就好比点外卖的时候用带图标和菜单的漂亮 APP（方便又简单），和走进你最爱的本地餐厅，厨师知道你喜欢啥，随口说一句“给我来点惊喜”，马上端上一道绝妙的菜。这是两种截然不同的体验。 +但我希望当时有人告诉我，现在我告诉你：命令行并不可怕——它实际上就像与你的计算机直接对话。想象一下通过带图片和菜单的高级点餐App订餐（既方便又轻松），和走进你最喜欢的本地餐馆，厨师只需听你说“给我个惊喜的美味”就能做出完美菜肴的区别。 -命令行是开发者感觉自己像绝对巫师的地方。你输入几个看似魔法的词（其实就是命令，但感觉魔法满满），按回车，噔！你就能创建整个项目结构，安装全球厉害的工具，或者部署你的应用供数百万用户访问。尝到这种力量后，真是停不下来！ +命令行是令开发者感觉自己像魔法师的地方。你输入几条看似神奇的命令（其实就是命令，但感觉很神奇！），按下回车，砰——你创建了完整的项目结构，从世界各地安装强大工具，或者将应用部署到互联网上供数百万人访问。一旦尝到那种力量，真的会上瘾！ -**为什么命令行会成为你最喜欢的工具：** +**命令行为何会成为你最爱的工具：** -虽然图形界面适合很多任务，命令行却在自动化、精确和速度上占优势。许多开发工具主要通过命令行运行，学会高效使用它们能极大提升你的工作效率。 +虽然图形界面适用于许多任务，但命令行在自动化、精确度和速度上无与伦比。许多开发工具主要通过命令行操作，学会高效使用它们能大幅提升你的生产力。 ```bash # 第一步：创建并进入项目目录 @@ -599,12 +602,12 @@ mkdir my-awesome-website cd my-awesome-website ``` -**这段代码做了什么：** -- **创建** 一个名为 “my-awesome-website” 的新目录作为项目 -- **进入** 新建的目录开始工作 +**这段代码的作用是：** +- **创建** 一个名为 "my-awesome-website" 的新目录作为你的项目文件夹 +- **进入**这个新建的目录开始工作 ```bash -# 第2步：使用 package.json 初始化项目 +# 第2步：使用package.json初始化项目 npm init -y # 安装现代开发工具 @@ -612,11 +615,11 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**逐步讲解：** -- 用 `npm init -y` **初始化** 一个新的 Node.js 项目，使用默认配置 +**逐步说明：** +- **初始化** 使用 `npm init -y` 快速创建默认配置的 Node.js 项目 - **安装** Vite 作为现代构建工具，支持快速开发和生产构建 -- **添加** Prettier 用于自动格式化代码，ESLint 用于代码质量检查 -- 使用 `--save-dev` 标记为开发时依赖 +- **添加** Prettier 用于自动代码格式化，ESLint 用于代码质量检测 +- **使用** `--save-dev` 标记这些依赖为开发阶段专用 ```bash # 第3步：创建项目结构和文件 @@ -627,85 +630,85 @@ echo 'My Site

Hello Wo npx vite ``` -**上述步骤中，我们：** -- **整理** 项目结构，创建源码和资源文件夹 -- **生成** 了带有正确文档结构的基础 HTML 文件 -- **启动** 了 Vite 开发服务器，实现热重载和模块替换 +**上述操作中，我们：** +- **组织** 项目结构，创建独立的源代码和资源文件夹 +- **生成** 一个基本的 HTML 文件，包含正确的文档结构 +- **启动** Vite 开发服务器，实现实时重载和热模块替换 -#### 网络开发必备命令行工具 +#### Web开发必备命令行工具 -| 工具 | 目的 | 你为什么需要它 | -|------|---------|-----------------| -| **[Git](https://git-scm.com/)** | 版本控制 | 跟踪变更，协作，备份工作 | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript 运行时及包管理器 | 浏览器外运行 JS，安装现代开发工具 | -| **[Vite](https://vitejs.dev/)** | 构建工具和开发服务器 | 超快速开发，支持热模块替换 | -| **[ESLint](https://eslint.org/)** | 代码质量 | 自动发现和修复 JS 问题 | -| **[Prettier](https://prettier.io/)** | 代码格式化 | 保持代码格式一致，易于阅读 | +| 工具 | 作用 | 你为什么需要它 | +|------|-------|-----------------| +| **[Git](https://git-scm.com/)** | 版本控制 | 追踪变更，协作开发，数据备份 | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript 运行环境及包管理 | 浏览器外运行 JavaScript，安装现代开发工具 | +| **[Vite](https://vitejs.dev/)** | 构建工具及开发服务器 | 支持极快的开发速度和热模块替换 | +| **[ESLint](https://eslint.org/)** | 代码质量检测 | 自动发现并修复 JavaScript 问题 | +| **[Prettier](https://prettier.io/)** | 代码格式化 | 保持代码风格一致，易于阅读 | #### 平台专属选项 **Windows：** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – 现代功能丰富的终端 -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – 强大的脚本环境 -- **[命令提示符](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – 传统 Windows 命令行 +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - 现代、功能丰富的终端 +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - 强大的脚本环境 +- **[命令提示符](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - 传统的 Windows 命令行 **macOS：** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – 系统自带终端应用 -- **[iTerm2](https://iterm2.com/)** – 功能增强的终端 +- **[终端](https://support.apple.com/guide/terminal/)** 💻 - 系统自带终端应用 +- **[iTerm2](https://iterm2.com/)** - 功能增强的终端模拟器 **Linux：** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – 标准 Linux shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – 高级终端模拟器 +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 标准 Linux Shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 高级终端模拟器 > 💻 = 操作系统预装 -> 🎯 **学习路线**：从基本命令开始，比如 `cd`（切换目录）、`ls` 或 `dir`（列出文件）、`mkdir`（创建文件夹）。练习现代工作流命令如 `npm install`、`git status`、`code .`（在 VS Code 打开当前目录）。随着熟悉，你会自然而然学到更高级的命令和自动化技巧。 +> 🎯 **学习路径**：先从基础命令学起，如 `cd`（切换目录）、`ls` 或 `dir`（列出文件）、`mkdir`（创建文件夹）。练习用现代工作流命令，如 `npm install`、`git status`、`code .`（在 VS Code 打开当前目录）。渐渐熟悉后，你会自然而然掌握更多高级命令和自动化技巧。 ### 文档：你随时可用的学习导师 -好了，告诉你一个让你作为初学者更安心的小秘密：即便是最有经验的开发者，也会花大量时间看文档。这不是因为他们不会写代码，而是聪明的表现！ +好，让我透露一个小秘密，让你作为新手的心情好很多：即使是最有经验的开发者，也大量时间花在看文档上。这并不是说他们不知道在做什么——相反，这是一种聪明的表现！ -把文档想象成你可以24/7随时访问的、超耐心且知识渊博的老师。凌晨2点遇到难题？文档就像温暖的虚拟拥抱，给你正合适的答案。想学习某个大家都在讨论的新特性？文档有详细逐步示例。想弄懂某个功能为什么这样设计？文档乐意用让你豁然开朗的方式讲解！ +把文档想象成世界上最耐心、最有知识的老师，全年无休随时待命。凌晨两点卡壳了？文档就像温暖的虚拟拥抱，给你正需要的答案。想了解某个大家都在聊的炫酷新功能？文档里有详细步骤和示例。想弄明白某个东西为什么这样工作？对，文档准备好了以你最终能理解的方式解释！ -改变我认知的是：web 开发世界变化极快，没有人（真的没有）能把一切都记牢。我见过超过15年经验的大牛，都要查基础语法，你知道吗？这不丢人，而是聪明！重点不是完美记忆，而是知道在哪里快速找到可靠答案，并理解如何应用。 +这有个让我彻底转变认知的事实：网络开发变化飞快，没有人（我说的是绝对没人！）能把所有东西记在脑子里。我见过有15年经验的资深开发者查基本语法，你知道吗？这不丢脸——这很聪明！不是记忆有多好，而是知道该去哪里快速找到可靠答案，并懂得如何应用。 **真正的魔法发生在这里：** -专业开发者大量时间看文档——不是因为没能力，而是技术迅速发展，持续学习必不可少。好文档不仅教你*如何*用，还解释*为什么*和*什么时候*用。 +专业开发者大量时间阅读文档——不是因为他们不会，而是因为网络开发环境更新迅速，必须不断学习才能跟上。优秀的文档帮你理解不仅是*怎么用*，还有*为什么用*和*什么时候用*。 #### 重要文档资源 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- 网页技术文档的黄金标准 -- 全面指南覆盖 HTML、CSS 和 JavaScript -- 含浏览器兼容性信息 -- 提供实用例子和互动演示 +- Web 技术文档的金标准 +- HTML、CSS 和 JavaScript 的综合指南 +- 包含浏览器兼容信息 +- 有实用示例与交互演示 -**[Web.dev](https://web.dev)**（谷歌出品） -- 现代网页开发最佳实践 +**[Web.dev](https://web.dev)**（Google 提供） +- 现代 Web 开发最佳实践 - 性能优化指南 -- 可访问性和包容性设计原则 -- 来自实际项目的案例研究 +- 可访问性与包容性设计原则 +- 真实项目案例研究 -**[微软开发者文档](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge 浏览器开发资源 -- 渐进式网页应用指南 -- 跨平台开发见解 +- 渐进式 Web 应用指南 +- 跨平台开发洞见 -**[Frontend Masters 学习路径](https://frontendmasters.com/learn/)** +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - 结构化学习课程 -- 行业专家视频教程 -- 动手编程练习 +- 行业专家视频课程 +- 实战编码练习 -> 📚 **学习策略**：不要试图死记文档——而是学会高效浏览。收藏常用参考，练习用搜索快速找到具体信息。 +> 📚 **学习策略**：别试图背文档——学会高效查阅才是关键。收藏常用参考文档，练习使用搜索功能快速找到具体信息。 -### 🔧 **工具掌握度测验：你最认同什么？** +### 🔧 **工具掌握检测：你最有兴趣是什么？** **花点时间思考：** -- 你最想先试哪个工具？（没有错误答案！） -- 命令行还让你害怕吗？还是更好奇了？ -- 能想象用浏览器 DevTools 探秘你喜欢的网站幕后吗？ +- 你最想先尝试哪个工具？（没有错误答案！） +- 命令行还觉得可怕吗，还是开始好奇了？ +- 你能想象用浏览器 DevTools 探秘你喜欢的网站幕后吗？ ```mermaid pie title "开发者使用工具的时间分配" @@ -715,139 +718,139 @@ pie title "开发者使用工具的时间分配" "阅读文档" : 15 "调试" : 5 ``` -> **有趣见解**：大多数开发者大约40%的时间花在代码编辑器，其余时间用于测试、学习和解决问题。编程不仅是写代码——它是打造体验！ +> **趣味见解**：大多数开发者约40%的时间在代码编辑器，但留心有多少时间用于测试、学习和解决问题。编程不仅是写代码——更是创造体验！ -✅ **思考题**：有件有趣的事想问你——你觉得构建网站的工具（开发）和设计外观的工具（设计）有什么不同？就像建筑师设计漂亮房子，和承包商实际建造房子，两者都重要，但工具箱不同！这样的思考能帮你更全面理解网站是如何诞生的。 +✅ **思考素材**：来点有意思的——你觉得用来构建网站（开发）的工具和设计外观（设计）的工具会有何不同？这就像设计漂亮房子的建筑师和真正盖房子的承包商的区别。两者都很重要，但需要不同的工具箱！这样的思维能帮你更好理解网站诞生的全貌。 ## GitHub Copilot Agent 挑战 🚀 -使用 Agent 模式完成以下挑战： +用 Agent 模式完成以下挑战： -**描述：** 探索现代代码编辑器或 IDE 的功能，展示它如何提升你作为网络开发者的工作流程。 +**描述：** 探索现代代码编辑器或 IDE 的功能，演示它如何提升你作为 Web 开发者的工作流程。 -**提示：** 选择一个代码编辑器或 IDE（如 Visual Studio Code、WebStorm 或云端 IDE）。列举三个功能或扩展，说明它们如何帮助你更高效地编写、调试或维护代码，并简要解释它们带来的好处。 +**提示：** 选择一个代码编辑器或 IDE（如 Visual Studio Code、WebStorm 或云端 IDE）。列出三个能帮助你更高效编写、调试或维护代码的功能或扩展。并简述它们如何助益你的工作流程。 --- ## 🚀 挑战 -**侦探，准备好第一个案子了吗？** +**好了，侦探，准备好迎接你的第一个案件了吗？** -现在你已经有了很棒的基础，我有一个冒险任务，将帮你领略编程世界的多样与魅力。听好了，这不涉及写代码，所以别紧张！把自己当作编程语言侦探，接下你的第一个激动人心的案子！ +既然打下了坚实基础，这次冒险会帮你看到编程世界多么丰富多彩又迷人。听好了——这次不用立刻写代码，别有压力！把自己当作编程语言的侦探，开启令人兴奋的首次侦察任务！ -**你的任务，如果你愿意接受：** -1. **成为语言探险家**：挑选三种来自截然不同领域的编程语言 —— 比如一种建网站，一种写移动应用，还有一种给科学家用来数据处理。找出它们都完成同样简单任务的示例。保证你会惊叹同样的事一个用法大不相同！ +**你的任务，如果接受的话：** +1. **成为语言探险者**：选择三个完全来自不同领域的编程语言——比如一个做网站的，一个做手机应用的，一个做科学数据分析的。找出用这三种语言做相同简单任务的示例。我保证你会惊讶于它们虽然目的相同，但写法差异巨大！ -2. **揭示它们的起源故事**：每种语言的特别之处在哪里？有趣的是—每种编程语言诞生时，发明者都想：“得有更好方式来解决这个具体问题。”你能找到这些问题吗？某些故事特别迷人！ +2. **揭秘它们的起源**：每种语言有什么特别之处？有个有趣的事实——每种语言诞生都是有人想，“嗯，我觉得一定有更好的方式解决这个特定问题。”你能搞清那些问题是什么吗？其中一些故事真很有趣！ -3. **认识社区**：看看每种语言社区的开放和热情程度。有些拥有数百万开发者分享经验和互助，另一些则小巧紧密且极具支持力。你会喜欢了解这些社区的独特个性！ +3. **认识社区**：看看每种语言的社区有多热情友好。有的有百万开发者分享知识互帮互助，有的虽小但紧密支持。你一定会喜欢观察这些社区的不同“性格”！ -4. **跟随直觉**：哪种语言现在你感觉最容易上手？别纠结做“完美”选择——听从你的直觉！这里没有对错，你以后还能继续探索其他语言。 +4. **跟随直觉**：现在哪个语言最让你觉得容易接近？别纠结“完美”选择——听听内心声音！真的没有错，反正以后还可以探索其他的。 -**额外侦探任务**：试着查查哪些主流网站或应用是用这些语言构建的。保证你会对 Instagram、Netflix 或那个让你停不下来的手机游戏背后的技术大吃一惊！ +**额外侦探任务**：试试看能不能发现每种语言支撑着哪些大型网站或应用。我敢打赌你会震惊 Instagram、Netflix，甚至那个让你停不下来的手机游戏都是用什么做的！ -> 💡 **记住**：今天你不是要成为任何语言的专家。你只是在熟悉这个“邻居”，为将来决定在哪里扎根做准备。慢慢来，玩得开心，保持好奇心！ +> 💡 **记住**：今天你不用成为任何语言的专家。你只是在熟悉环境，为选址打基础。慢慢来，玩得开心，让好奇心带路！ ## 一起庆祝你的发现吧！ -哇哦，今天你吸收了这么多令人惊叹的信息！我真心期待看到你记住了多少这段精彩旅程。别忘了——这不是考核，不用追求完美。更像是为你即将探入的精彩世界学到的所有酷知识举行庆典！ +哇哦，今天的信息量太惊人了！我真心期待看到你记住了多少这段奇妙旅程。记住——这不是考试，不需要一切完美。这更像是庆祝你对即将进入的迷人世界学到的所有酷知识！ [参加课后测验](https://ff-quizzes.netlify.app/web/) -## 复习与自学 -**慢慢来，尽情探索和享受乐趣吧！** +## 复习与自学 -你今天已经学了很多内容，这值得骄傲！现在是有趣的部分了 —— 探索那些激发你好奇心的话题。记住，这不是作业 —— 这是一场冒险！ +**慢慢探索，玩得开心！** +你今天已经学习了很多内容，这值得你骄傲！现在迎来有趣的部分——探索那些激发你好奇心的话题。记住，这不是作业——而是一场冒险！ -**深入挖掘你感兴趣的内容：** +**深入探索让你兴奋的内容：** -**动手实践编程语言：** -- 访问你感兴趣的2-3个编程语言的官方网站。每种语言都有其独特的个性和故事！ -- 试试一些在线代码游乐场，比如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。不要害怕尝试 —— 你不会弄坏任何东西！ -- 了解你喜欢的语言是如何诞生的。说真的，有些起源故事很有趣，会帮助你理解这些语言为何如此设计。 +**动手体验编程语言：** +- 访问你感兴趣的2-3种语言的官方网站。每种语言都有自己独特的个性和故事！ +- 试试在线编码游乐场，比如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。别害怕试验——你不会弄坏任何东西的！ +- 阅读你喜欢的语言的诞生故事。真的，有些起源故事非常吸引人，有助于你理解语言为何这么设计。 **熟悉你的新工具：** -- 如果还没下载 Visual Studio Code，赶快下载 —— 它是免费的，你一定会喜欢！ -- 花几分钟浏览一下扩展市场。它就像你代码编辑器的应用商店！ -- 打开浏览器的开发者工具，随便点击看看。别担心全懂 —— 先熟悉一下界面和功能就好。 +- 如果你还没下载 Visual Studio Code，赶紧下载吧——它是免费的，你一定会喜欢！ +- 花几分钟浏览扩展市场。它就像你的代码编辑器的应用商店！ +- 打开浏览器的开发者工具，随便点击浏览。别担心完全理解——先熟悉下里面的内容。 **加入社区：** -- 关注一些开发者社区，比如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。编程社区对新手非常友好！ -- 在 YouTube 上看一些适合初学者的编程视频。有很多很棒的创作者曾经也和你一样刚刚起步。 -- 考虑参加本地聚会或者在线社区。相信我，开发者们都很乐于帮助新手！ +- 关注一些开发者社区，比如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。编程社区非常欢迎新人！ +- 在 YouTube 上观看一些适合初学者的编程视频。很多优秀的创作者都记得刚开始时的感觉。 +- 考虑参加线下聚会或加入线上社区。相信我，开发者们很乐于帮助新人！ -> 🎯 **听着，我希望你记住**：你不需要一夜之间成为编程高手！现在，你只是开始认识这个你即将加入的精彩新世界。慢慢来，享受这段旅程，记住 —— 每一个你敬佩的开发者，曾经也正坐在你现在的位置，既兴奋又可能有点不知所措。这完全正常，这意味着你正在正确的道路上！ +> 🎯 **听着，我希望你记住这点**：你不必一夜之间变成编程高手！现在，你只是刚开始了解你即将加入的这个精彩世界。慢慢来，享受这段旅程，记住——每个你敬佩的开发者，曾经也坐在你现在的位置上，既兴奋又可能有点不知所措。这完全正常，也说明你正在正确地前进！ -## 任务 +## 作业 -[阅读文档](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **任务小提示**：我很想看到你去探索一些我们还没讲过的工具！跳过已经讨论过的编辑器、浏览器和命令行工具 —— 外面还有一个庞大而精彩的开发工具宇宙等待你去发现。找那些活跃维护、有生机且乐于助人的社区支持的工具（它们通常有最好的教程和最热心的人们，当你卡住需要帮助时能手把手支持你）。 +> 💡 **作业小提示**：我真心希望看到你探索一些我们还没提过的工具！跳过我们讲过的编辑器、浏览器和命令行工具——外面有一整个令人惊叹的开发工具宇宙正待你发现。寻找那些活跃维护且拥有充满活力、乐于助人的社区的工具（这些通常有最好的教程，当你遇到困难需要帮助时人们也非常友好）。 --- ## 🚀 你的编程之旅时间表 -### ⚡ **接下来5分钟内你可以做的事** -- [ ] 收藏2-3个你感兴趣的编程语言官网 -- [ ] 如果没下载，安装 Visual Studio Code -- [ ] 打开浏览器开发者工具（F12），随意点击浏览任意网站 -- [ ] 加入一个编程社区（Dev.to、Reddit 的 r/webdev，或 Stack Overflow） +### ⚡ **接下来5分钟你可以做什么** +- [ ] 收藏2-3个引起你兴趣的编程语言网站 +- [ ] 如果还没下载，安装 Visual Studio Code +- [ ] 打开浏览器开发者工具（F12），在任意网站随便点点 +- [ ] 加入一个编程社区（Dev.to、Reddit r/webdev 或 Stack Overflow） -### ⏰ **这1小时内你可以完成的任务** -- [ ] 完成课后测验并反思答案 -- [ ] 配置 VS Code 并安装 GitHub Copilot 扩展 -- [ ] 在线用两种不同编程语言写一个“Hello World”示例 -- [ ] 观看一段“开发者的一天”视频 -- [ ] 开始你的编程语言侦探工作（挑战内容） +### ⏰ **这小时你能完成什么** +- [ ] 完成课后测验并回顾你的答案 +- [ ] 在 VS Code 中安装 GitHub Copilot 扩展 +- [ ] 在线试着用2种不同编程语言写一个“Hello World”示例 +- [ ] 观看YouTube上一段“开发者的一天”视频 +- [ ] 开始你的编程语言侦探之旅（来自挑战部分） ### 📅 **你的一周冒险计划** -- [ ] 完成作业，探索3个新的开发工具 -- [ ] 关注5个开发者或编程账号（社交媒体） -- [ ] 在 CodePen 或 Replit 上尝试做一个小作品（哪怕只是“Hello, [你的名字]!”） -- [ ] 阅读一篇关于某人编程历程的开发者博客 -- [ ] 加入一次线上聚会或观看编程讲座 -- [ ] 开始选定的语言的在线教程学习 +- [ ] 完成作业，并探索3个新的开发工具 +- [ ] 在社交媒体上关注5位开发者或编程账号 +- [ ] 在CodePen或Replit尝试做点小东西（甚至只是“Hello，[你的名字]！”） +- [ ] 阅读一篇开发者博客，讲述某人的编程历程 +- [ ] 参加一次线上聚会或观看一次编程讲座 +- [ ] 用在线教程开始学习你选择的语言 ### 🗓️ **你一个月的转变计划** -- [ ] 做出你的第一个小项目（就算简单网页也行！） -- [ ] 参与开源项目贡献（从文档修正开始） +- [ ] 搭建你的第一个小项目（简单网页也算！） +- [ ] 为开源项目贡献代码（从文档修正开始） - [ ] 指导一个刚开始编程的人 -- [ ] 创建你的开发者个人作品网站 -- [ ] 结识本地开发者社区或学习小组 -- [ ] 开始规划下一个学习目标 +- [ ] 创建你的开发者作品集网站 +- [ ] 与本地开发者社区或学习小组建立联系 +- [ ] 开始规划你的下一个学习里程碑 -### 🎯 **最终反思签到** +### 🎯 **最终反思检查** **继续之前，花点时间庆祝一下：** -- 今天编程中，哪些事情让你感到兴奋？ -- 你想先探索哪个工具或概念？ -- 对开始这段编程旅程，你的感觉如何？ -- 有什么问题是你现在想问开发者的吗？ +- 今天编程中，哪一点最让你兴奋？ +- 你最想先探索哪个工具或概念？ +- 你对开始这段编程之旅感觉如何？ +- 你现在最想问一个开发者什么问题？ ```mermaid journey - title 你的自信心建立之旅 + title 你的自信建立之旅 section 今天 好奇: 3: You - 不知所措: 4: You + 不堪重负: 4: You 兴奋: 5: You - section 本周 + section 这周 探索: 4: You 学习: 5: You 连接: 4: You section 下个月 - 建立: 5: You + 建设: 5: You 自信: 5: You 帮助他人: 5: You ``` -> 🌟 **记住**：每个专家都曾是初学者。每个高级开发者都曾和你一样——既兴奋又有点不知所措，当然也充满了无限好奇。你身处伟大的同行中，这段旅程将会非常精彩。欢迎来到奇妙的编程世界！ 🎉 +> 🌟 **记住**：每一个专家曾经都是初学者。每一个资深开发者曾经都像你现在这样——既兴奋，可能有点压力，但绝对好奇未来可能会有的精彩。你处在非凡的群体中，这段旅程将会非常精彩。欢迎来到奇妙的编程世界！🎉 --- **免责声明**： -本文件由 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻译完成。尽管我们力求准确，但请注意自动翻译可能存在错误或不准确之处。原始文件的母语版本应视为权威来源。对于重要信息，建议采用专业人工翻译。因使用本翻译内容而引起的任何误解或错误理解，我们概不负责。 +本文件由AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)翻译完成。虽然我们力求准确，但请注意自动翻译可能存在错误或不准确之处。原始文件的母语版本应视为权威来源。对于关键信息，建议使用专业人工翻译。对于因使用本翻译所产生的任何误解或歧义，我们不承担任何责任。 \ No newline at end of file diff --git a/translations/zh-CN/AGENTS.md b/translations/zh-CN/AGENTS.md index c2aac0d24..fed0bdcb9 100644 --- a/translations/zh-CN/AGENTS.md +++ b/translations/zh-CN/AGENTS.md @@ -2,42 +2,42 @@ ## 项目概述 -这是一个面向初学者教授 Web 开发基础的教育课程仓库。该课程是由微软云倡导者开发的一个综合性 12 周课程，包含 24 个涵盖 JavaScript、CSS 和 HTML 的实践课题。 +这是一个面向初学者教授网页开发基础知识的教育课程仓库。该课程是由微软云推广者开发的为期12周的综合课程，包含24个涵盖JavaScript、CSS和HTML的实践课程。 ### 关键组成部分 -- **教育内容**：24 节结构化课程，按项目模块组织 -- **实践项目**：生态缸、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器和 AI 聊天助手 -- **互动测验**：48 个测验，每个包含 3 个问题（课前/课后评估） -- **多语言支持**：通过 GitHub Actions 自动翻译至 50 多种语言 +- **教育内容**：24节结构化课程，按项目模块组织 +- **实践项目**：生态瓶项目、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器及 AI 聊天助手 +- **互动测验**：48个测验，每个3个问题（课前/课后评估） +- **多语言支持**：通过 GitHub Actions 自动翻译为50多种语言 - **技术栈**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用于 AI 项目） ### 架构 - 以课程为基础结构的教育仓库 -- 每节课文件夹包含 README、代码示例和解决方案 -- 独立项目分别存放在单独目录（quiz-app，各种课程项目） -- 使用 GitHub Actions（co-op-translator）进行翻译系统 -- 文档通过 Docsify 提供，并可生成 PDF +- 每节课程文件夹包含 README、代码示例和解决方案 +- 独立项目存放在单独目录中（quiz-app、各种课程项目） +- 使用 GitHub Actions（co-op-translator）实现翻译系统 +- 文档通过 Docsify 提供，并可导出为 PDF -## 安装命令 +## 设置命令 -此仓库主要用于教育内容的学习。若需操作特定项目： +此仓库主要用于教育内容的学习。针对特定项目的操作： -### 主仓库安装 +### 主仓库设置 ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### 测验应用安装（Vue 3 + Vite） +### 测验应用设置（Vue 3 + Vite） ```bash cd quiz-app npm install npm run dev # 启动开发服务器 -npm run build # 生成生产环境构建 +npm run build # 生产环境构建 npm run lint # 运行 ESLint ``` @@ -56,7 +56,7 @@ npm run format # 使用Prettier格式化 ```bash cd 5-browser-extension/solution npm install -# 遵循特定浏览器的扩展加载说明 +# 遵循浏览器特定的扩展加载说明 ``` ### 太空游戏项目 @@ -76,32 +76,32 @@ pip install openai python api.py ``` -## 开发流程 +## 开发工作流程 -### 内容贡献者指引 +### 内容贡献者 -1. **Fork 仓库** 到你的 GitHub 账户 -2. **本地克隆你的 Fork** -3. **创建新分支** 用于更改 +1. **Fork 仓库**到你的 GitHub 账户 +2. **克隆你的 Fork**到本地 +3. **创建新的分支**进行更改 4. 修改课程内容或代码示例 -5. 在相关项目目录中测试代码修改 -6. 按贡献指南提交拉取请求 +5. 在相关项目目录测试代码修改 +6. 提交符合贡献指南的拉取请求 -### 学习者指引 +### 学习者 1. Fork 或克隆仓库 -2. 按顺序进入课程目录 +2. 按顺序浏览课程目录 3. 阅读每节课程的 README 文件 -4. 完成课前测验：https://ff-quizzes.netlify.app/web/ -5. 按课程目录进行代码练习 +4. 在 https://ff-quizzes.netlify.app/web/ 完成课前测验 +5. 完成课程文件夹中的代码示例 6. 完成作业和挑战 7. 参加课后测验 ### 实时开发 -- **文档**：在根目录运行 `docsify serve`（端口 3000） +- **文档**：在根目录运行 `docsify serve`（端口3000） - **测验应用**：在 quiz-app 目录运行 `npm run dev` -- **项目**：HTML 项目使用 VS Code Live Server 插件 +- **项目**：使用 VS Code Live Server 扩展运行 HTML 项目 - **API 项目**：在对应 API 目录运行 `npm start` ## 测试说明 @@ -111,7 +111,7 @@ python api.py ```bash cd quiz-app npm run lint # 检查代码风格问题 -npm run build # 验证构建成功 +npm run build # 验证构建是否成功 ``` ### 银行 API 测试 @@ -119,76 +119,76 @@ npm run build # 验证构建成功 ```bash cd 7-bank-project/api npm run lint # 检查代码风格问题 -node server.js # 验证服务器是否无错误启动 +node server.js # 验证服务器启动无错误 ``` -### 通用测试方法 +### 一般测试方法 -- 这是一个教育仓库，没有完整的自动化测试 -- 手动测试重点包括： - - 代码示例无报错运行 - - 文档中的链接工作正常 - - 项目构建成功完成 +- 这是教育仓库，无全面自动测试 +- 手动测试重点： + - 代码示例无错误运行 + - 文档链接正确 + - 项目构建成功 - 示例符合最佳实践 ### 提交前检查 -- 在含 package.json 的目录运行 `npm run lint` +- 在包含 package.json 的目录运行 `npm run lint` - 验证 markdown 链接有效 -- 在浏览器或 Node.js 中测试代码示例 -- 确认翻译保持结构完整 +- 浏览器或 Node.js 中测试代码示例 +- 确认翻译结构无误 -## 代码规范指南 +## 代码风格指南 ### JavaScript - 使用现代 ES6+ 语法 -- 遵循项目中提供的标准 ESLint 配置 -- 使用有意义的变量和函数名，便于教学 -- 添加注释解释概念，帮助学习者理解 -- 配置 Prettier 的地方使用其格式化 +- 遵循项目提供的标准 ESLint 配置 +- 使用有意义的变量名和函数名，便于教学 +- 添加注释解释概念，方便学习者 +- 按配置使用 Prettier 格式化 ### HTML/CSS - 使用语义化 HTML5 元素 -- 遵循响应式设计原则 +- 响应式设计原则 - 清晰的类命名规范 -- 添加注释解释 CSS 技巧，方便学习 +- 使用注释解释 CSS 技巧，便于理解 ### Python -- 遵循 PEP 8 风格指南 -- 代码简明易懂，适合教学 -- 适当使用类型提示，方便学习 +- 遵循 PEP 8 规范 +- 提供清晰易懂的代码示例 +- 在有助学习的地方使用类型提示 ### Markdown 文档 - 清晰的标题层级 -- 代码块注明语言 -- 提供相关资源链接 -- 在 `images/` 目录中放置截图和图片 -- 图片包含 alt 文本以便无障碍访问 +- 代码块指定语言 +- 链接附带额外资源 +- 在 `images/` 目录中存放截图和图片 +- 图片附带 alt 文本便于无障碍访问 ### 文件组织 -- 课程按序号命名（1-getting-started-lessons，2-js-basics 等） -- 每个项目包含 `solution/`，通常还有 `start/` 或 `your-work/` 等目录 -- 课程特定图片放在该课程的 `images/` 文件夹 -- 翻译文件存放于 `translations/{language-code}/` 结构中 +- 课程按照数字顺序编号（1-getting-started-lessons，2-js-basics 等） +- 每个项目包含 `solution/` 及通常的 `start/` 或 `your-work/` 目录 +- 图片存放在对应课程的 `images/` 文件夹 +- 翻译文件存放结构为 `translations/{language-code}/` ## 构建与部署 -### 测验应用部署（Azure 静态 Web 应用） +### 测验应用部署（Azure 静态网页应用） -quiz-app 配置用于 Azure 静态 Web 应用部署： +quiz-app 已配置为 Azure 静态网页应用部署： ```bash cd quiz-app npm run build # 创建 dist/ 文件夹 -# 在推送到 main 时通过 GitHub Actions 工作流部署 +# 通过 GitHub Actions 工作流在推送到 main 时部署 ``` -Azure 静态 Web 应用配置： +Azure 静态网页应用配置： - **应用位置**：`/quiz-app` - **输出位置**：`dist` - **工作流**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` @@ -204,26 +204,26 @@ npm run convert # 从 docs 生成 PDF ```bash npm install -g docsify-cli # 全局安装 Docsify -docsify serve # 在 localhost:3000 上托管 +docsify serve # 在 localhost:3000 上提供服务 ``` ### 项目特定构建 各项目目录可能有自己的构建流程： -- Vue 项目：`npm run build` 创建生产版本 +- Vue 项目：`npm run build` 生成生产包 - 静态项目：无构建步骤，直接提供文件 -## 拉取请求规范 +## 拉取请求指南 ### 标题格式 -使用清晰描述改动范围的标题： -- `[Quiz-app] 添加第 X 课新测验` -- `[Lesson-3] 修正生态缸项目错别字` -- `[Translation] 添加第 5 课西班牙语翻译` +使用明确描述更改范围的标题： +- `[Quiz-app] 为第 X 课添加新测验` +- `[Lesson-3] 修正生态瓶项目中的拼写错误` +- `[Translation] 添加第5课的西班牙语翻译` - `[Docs] 更新安装说明` -### 必要检查 +### 必须检查项 提交 PR 前： @@ -232,51 +232,52 @@ docsify serve # 在 localhost:3000 上托管 - 修复所有 lint 错误和警告 2. **构建验证**： - - 如有需要，运行 `npm run build` + - 如适用，运行 `npm run build` - 确保无构建错误 3. **链接验证**： - 测试所有 markdown 链接 - - 验证图片引用有效 + - 确认图片引用有效 -4. **内容审查**： +4. **内容审核**： - 校对拼写和语法 - - 确保代码示例正确且具有教学价值 - - 校验翻译保持原始含义 + - 确保代码示例正确且有教育意义 + - 核实翻译保持原意 ### 贡献要求 -- 同意微软 CLA（首次 PR 会自动检查） -- 遵循 [微软开源行为准则](https://opensource.microsoft.com/codeofconduct/) -- 详情见 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 若有相关问题，请在 PR 描述中引用 +- 同意微软 CLA（首次 PR 自动检查） +- 遵守 [微软开源行为准则](https://opensource.microsoft.com/codeofconduct/) +- 详见 [CONTRIBUTING.md](./CONTRIBUTING.md) 指南 +- PR 描述中引用相关 issue（如有） -### 审核流程 +### 审查流程 -- PR 由维护者和社区审查 -- 以教育清晰度为优先 -- 代码示例需遵循当前最佳实践 -- 翻译需审校确保准确及文化适宜 +- PR 由维护者和社区审核 +- 优先保证教育清晰度 +- 代码示例应遵循当前最佳实践 +- 翻译审核准确且符合文化背景 ## 翻译系统 ### 自动翻译 -- 使用 GitHub Actions 的 co-op-translator 工作流 -- 自动翻译成 50 多种语言 +- 利用 GitHub Actions 和 co-op-translator 工作流 +- 自动翻译成50多种语言 - 源文件位于主目录 -- 翻译文件存于 `translations/{language-code}/` 目录 +- 翻译文件保存在 `translations/{language-code}/` 目录 -### 添加人工翻译改进 +### 添加手动翻译改进 -1. 定位到 `translations/{language-code}/` 下的文件 -2. 保持结构的同时进行改进 -3. 确保代码示例依然可用 +1. 定位到 `translations/{language-code}/` 目录文件 +2. 在保持结构的情况下进行改进 +3. 确保代码示例功能正常 4. 测试本地化测验内容 ### 翻译元数据 -翻译文件包含元数据头部： +翻译文件包含元数据头： + ```markdown -**免责声明**： -本文件由人工智能翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻译。尽管我们力求准确，但请注意自动翻译可能存在错误或不准确之处。原始文件的母语版本应被视为权威来源。对于重要信息，建议采用专业人工翻译。我们不对因使用本翻译而产生的任何误解或误释承担责任。 +**免责声明**： +本文件由 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻译而成。尽管我们力求准确，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文件应被视为权威版本。对于重要信息，建议使用专业人工翻译。因使用本翻译内容而产生的任何误解或误释，我们概不负责。 \ No newline at end of file diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 2900ea047..802e74390 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -10,170 +10,182 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# 初学者的网页开发课程 +# 针对初学者的网页开发课程 -通过微软云推广者提供的为期12周的综合课程学习网页开发的基础知识。24个课程深入讲解JavaScript、CSS和HTML，配合手工项目如植物培养箱、浏览器扩展和太空游戏。参加测验、讨论和实践作业。通过我们的高效项目为基础的教学法，提升技能并优化知识掌握。今天就开始你的编码之旅吧！ +通过微软云倡导者提供的 12 周综合课程学习网页开发基础。每个 24 节课程通过动手项目，如植物养殖箱、浏览器扩展和太空游戏，深入探讨 JavaScript、CSS 和 HTML。参与测验、讨论和实践作业。采用高效的项目式教学法，提高技能并优化知识保留。立即开始您的编码旅程！ 加入 Azure AI Foundry Discord 社区 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -按照以下步骤开始使用这些资源： +按以下步骤开始使用这些资源： 1. **Fork 仓库**：点击 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **克隆仓库**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +2. **克隆仓库**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**加入 Azure AI Foundry Discord，结识专家和其他开发者**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 多语言支持 -#### 通过 GitHub Action 支持（自动且始终最新） +#### 通过 GitHub Action 支持（自动且始终保持最新） [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](./README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **更喜欢本地克隆？** - -> 本仓库包含50多种语言的翻译，显著增加下载大小。若需无翻译版本，请使用稀疏检出： +> **想本地克隆？** +> +> 该仓库包含 50 多种语言的翻译文件，显著增加下载体积。想要不含翻译的克隆版本，可以使用稀疏检出： +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> 这样你可以更快完成课程所需的一切内容。 +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> 这将让您更快下载且包含完成课程所需的所有内容。 -**如果您希望支持更多翻译语言，列于[这里](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**如果您希望支持更多语言，请查看[此处](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _你是学生吗？_ -访问[**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，这里有入门资源、学生包甚至获得免费证书的方式。请收藏此页面并定期查看，因为我们每月都会更换内容。 +访问[**学生中心页面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，您将找到初学资源、学生包以及获取免费证书优惠券的方式。建议收藏此页，并定期查看，因内容每月更新。 -### 📣 公告 - 新增 GitHub Copilot Agent 模式挑战！ +### 📣 公告 - 新增 GitHub Copilot Agent 模式挑战任务！ -新挑战已添加，请在大多数章节中查找 “GitHub Copilot Agent Challenge 🚀”。这是一个使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果你以前没用过 Agent 模式，它不仅能生成文本，还可以创建和编辑文件、运行命令等。 +新增挑战，请在大多数章节查找“GitHub Copilot Agent Challenge 🚀”。这是一个让您使用 GitHub Copilot 和 Agent 模式完成的新挑战。如果您之前没用过 Agent 模式，它不仅能生成文本，还能创建和编辑文件、运行命令等。 -### 📣 公告 - _新增使用生成式 AI 构建的项目_ +### 📣 公告 - _使用生成式 AI 构建的新项目_ -新增 AI 助手项目，查看[项目](./9-chat-project/README.md) +新增 AI 助手项目，请查看[项目](./9-chat-project/README.md) -### 📣 公告 - _刚发布的 JavaScript 生成式 AI 新课程_ +### 📣 公告 - _新发布的 JavaScript 生成式 AI 课程_ -不要错过我们的生成式 AI 新课程！ +别错过我们的生成式 AI 新课程！ 访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！ ![Background](../../translated_images/zh-CN/background.148a8d43afde5730.webp) -- 覆盖从基础到 RAG 的课程。 -- 使用 GenAI 和我们的配套应用与历史人物互动。 -- 有趣且引人入胜的叙事，你将进行时空旅行！ +- 课程涵盖从基础到 RAG。 +- 通过生成式 AI 和我们的辅助应用与历史人物互动。 +- 有趣且引人入胜的故事叙述，带您穿越时空！ ![character](../../translated_images/zh-CN/character.5c0dd8e067ffd693.webp) -每节课包括作业、知识检测和挑战，帮助你学习如： -- 提示及提示工程 -- 文字和图像应用生成 +每节课包含作业、知识测试和挑战，帮助您学习以下主题： +- 提示词及提示工程 +- 文本和图像应用生成 - 搜索应用 -访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始！ +访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！ -## 🌱 入门指南 -> **教师们**，我们[提供了一些建议](for-teachers.md)关于如何使用此课程。欢迎在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)反馈意见！ -**[学习者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每节课先完成课前测验，然后阅读讲义，完成各项活动，并通过课后测验检验理解。 +## 🌱 快速开始 -为提升学习体验，建议和同学们一起合作完成项目！欢迎在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)发起讨论，我们的版主团队将为你解答问题。 +> **教师们**，我们[提供了一些建议](for-teachers.md)指导您如何使用这套课程。欢迎在[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提供反馈！ -为进一步学习，强烈推荐探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)获取更多学习材料。 +**[学员](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每节课开始时，请先完成课前测验，然后阅读课程内容，完成各项活动，并通过课后测验检验理解。 -### 📋 环境搭建 +为了提升学习体验，建议与同伴共同完成项目！欢迎在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)参与讨论，版主团队会解答您的问题。 -本课程已预置开发环境！开始学习时，你可以选择在[Codespace](https://github.com/features/codespaces/)（基于浏览器，无需安装环境）运行课程，或在本地电脑使用如[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)的文本编辑器。 +扩展学习我们强烈推荐探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 上的额外学习资源。 -#### 创建你的仓库 -为方便保存作业，建议创建本仓库的个人副本。点击页面顶部的 **Use this template** 按钮，即可在你的 GitHub 账户创建一份该课程副本。 +### 📋 设置开发环境 -步骤如下： +本课程提供即用型开发环境！开始时，您可以选择在 [Codespace](https://github.com/features/codespaces/)（一种基于浏览器、无须安装的环境）中运行课程，也可以在本地电脑使用文本编辑器，如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 。 + +#### 创建您的仓库 +为了方便保存您的作品，推荐您创建此仓库的副本。点击页面顶部的 **Use this template** 按钮即可在您的 GitHub 账户中创建一个包含本课程内容的新仓库。 + +操作步骤： 1. **Fork 仓库**：点击页面右上角的“Fork”按钮。 -2. **克隆仓库**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +2. **克隆仓库**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### 在 Codespace 中运行课程 -在你创建的个人副本中，点击 **Code** 按钮，选择 **Open with Codespaces**。这会为你创建一个新的 Codespace 工作环境。 +在您创建的仓库副本中，点击 **Code** 按钮，选择 **Open with Codespaces**。将为您创建一个新的 Codespace 工作环境。 ![Codespace](../../translated_images/zh-CN/createcodespace.0238bbf4d7a8d955.webp) #### 在本地电脑运行课程 -要在电脑本地运行课程，你需要文本编辑器、浏览器和命令行工具。我们的第一课，[编程语言和开发工具入门](../../1-getting-started-lessons/1-intro-to-programming-languages)，将介绍各种工具供你选择。 +要在本地电脑运行该课程，您需要文本编辑器、浏览器和命令行工具。我们的第一课，[编程语言与工具基础介绍](../../1-getting-started-lessons/1-intro-to-programming-languages)，将引导您了解各种工具选择，以便您选择最合适的。 -推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)作为编辑器，它内置[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。可从[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载。 - -1. 将你的仓库克隆到电脑。点击 **Code** 按钮，复制 URL： +推荐使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作为编辑器，它内置了[终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可以从[这里](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下载安装 Visual Studio Code。 +1. 将你的仓库克隆到电脑上。你可以点击 **Code** 按钮并复制 URL： [CodeSpace](./images/createcodespace.png) -然后，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打开 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，运行以下命令，将 `` 替换为你刚才复制的 URL： + + 然后，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中打开 [终端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，运行以下命令，将 `` 替换成刚才复制的 URL： ```bash git clone ``` -2. 在 Visual Studio Code 中打开文件夹。你可以通过点击 **文件** > **打开文件夹**，然后选择你刚克隆的文件夹来完成此操作。 +2. 在 Visual Studio Code 中打开该文件夹。你可以点击 **文件** > **打开文件夹** 并选择刚刚克隆的文件夹。 > 推荐的 Visual Studio Code 扩展： > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 内预览 HTML 页面 -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助你更快编写代码 +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 帮助你更快地编写代码 ## 📂 每节课包含： -- 可选的草图笔记 +- 可选的手绘笔记 - 可选的补充视频 - 课前热身测验 - 书面课程内容 -- 针对项目课程，包含逐步构建项目的指导 +- 针对项目课程的逐步项目搭建指南 - 知识检查 -- 挑战任务 +- 一项挑战 - 补充阅读 - 作业 - [课后测验](https://ff-quizzes.netlify.app/web/) -> **关于测验的说明**：所有测验都包含在 Quiz-app 文件夹中，共 48 个测验，每个有三道问题。它们可在[这里](https://ff-quizzes.netlify.app/web/)获得，测验应用可以本地运行或部署到 Azure；请遵循 `quiz-app` 文件夹中的说明。 +> **关于测验的说明**：所有测验都包含在 Quiz-app 文件夹中，共有48个测验，每个测验由三道题组成。它们可以在 [这里](https://ff-quizzes.netlify.app/web/) 访问，测验应用可以本地运行或部署到 Azure；请按照 `quiz-app` 文件夹中的说明操作。 ## 🗃️ 课程列表 -| | 项目名称 | 教授的概念 | 学习目标 | 关联课程 | 作者 | -| :-: | :--------------------------------------------------: | :----------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------: | :-------------------: | -| 01 | 入门入手 | 编程介绍及工具基础 | 了解大多数编程语言背后的基础原理以及帮助专业开发者完成工作的软件工具 | [编程语言及工具入门](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | 入门入手 | GitHub 基础，团队协作 | 学习如何在项目中使用 GitHub，以及如何与他人在代码库中协作 | [GitHub 入门](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | 入门入手 | 无障碍访问 | 学习网页无障碍访问的基础 | [无障碍基础](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS 基础 | JavaScript 数据类型 | JavaScript 数据类型的基础 | [数据类型](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS 基础 | 函数与方法 | 学习函数和方法以管理应用逻辑流 | [函数与方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher | -| 06 | JS 基础 | 使用 JS 进行决策 | 学习如何使用条件语句创建代码中的判断 | [决策](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS 基础 | 数组与循环 | 使用 JavaScript 中的数组和循环处理数据 | [数组与循环](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 实践 | 构建用于创建在线生态瓶（Terrarium）的 HTML，重点是构建布局 | [HTML 入门](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 实践 | 构建用于为在线生态瓶设计样式的 CSS，重点是 CSS 基础以及页面响应式设计 | [CSS 入门](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 闭包与 DOM 操作 | 构建 JavaScript 使生态瓶实现拖拽功能，重点是闭包和 DOM 操作 | [JavaScript 闭包与 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [打字游戏](./4-typing-game/solution/README.md) | 制作打字游戏 | 学习如何使用键盘事件驱动 JavaScript 应用的逻辑 | [事件驱动编程](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器工作原理 | 了解浏览器的工作原理、发展历史及如何搭建浏览器扩展的基础元素 | [关于浏览器](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 构建表单、调用 API 及本地存储变量 | 构建浏览器扩展的 JavaScript 元素，以便使用存储在本地的变量调用 API | [API、表单与本地存储](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器后台进程与网页性能 | 利用浏览器的后台进程管理扩展图标；学习网页性能及优化方法 | [后台任务与性能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [太空游戏](./6-space-game/solution/README.md) | 进阶游戏开发 – 继承与模式 | 学习继承（包括类和组合）以及发布/订阅模式，为制作游戏做准备 | [进阶游戏开发介绍](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘制 | 学习 Canvas API，用于向屏幕绘制元素 | [画布绘制](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [太空游戏](./6-space-game/solution/README.md) | 元素运动 | 探索如何利用笛卡尔坐标和 Canvas API 赋予元素运动 | [移动元素](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [太空游戏](./6-space-game/solution/README.md) | 碰撞检测 | 使元素碰撞并相互响应按键，提供冷却功能确保游戏性能 | [碰撞检测](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [太空游戏](./6-space-game/solution/README.md) | 计分 | 根据游戏状态和表现进行数学计算 | [计分](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [太空游戏](./6-space-game/solution/README.md) | 结束和重启游戏 | 学习如何结束和重启游戏，包括清理资源和重置变量 | [结束条件](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [银行应用](./7-bank-project/solution/README.md) | Web 应用中的 HTML 模板和路由 | 学习如何使用路由和 HTML 模板构建多页面网站的框架 | [HTML 模板和路由](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [银行应用](./7-bank-project/solution/README.md) | 构建登录和注册表单 | 学习表单构建和验证处理流程 | [表单](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [银行应用](./7-bank-project/solution/README.md) | 数据获取和使用 | 学习数据如何流入流出你的应用，如何获取、存储和处理数据 | [数据](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [银行应用](./7-bank-project/solution/README.md) | 状态管理概念 | 学习应用如何保留状态及其编程管理方法 | [状态管理](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [浏览器/VScode 代码](../../8-code-editor) | 使用 VScode | 学习如何使用代码编辑器| [使用 VScode 代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [人工智能助手](./9-chat-project/README.md) | 使用 AI | 学习如何构建自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris | +| | 项目名称 | 授课概念 | 学习目标 | 关联课程 | 作者 | +| :-: | :--------------------------------------------------: | :--------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------: | +| 01 | 入门课程 | 编程入门及相关工具 | 了解大多数编程语言的基本原理及帮助专业开发者完成工作的软件工具 | [编程语言与相关工具简介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | 入门课程 | GitHub 基础及团队协作 | 学习如何在项目中使用 GitHub，如何与他人协作开发代码库 | [GitHub 简介](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | 入门课程 | 无障碍访问 | 学习网页无障碍访问的基础 | [无障碍基础](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS 基础 | JavaScript 数据类型 | 了解 JavaScript 数据类型的基础 | [数据类型](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS 基础 | 函数与方法 | 学习函数和方法以管理应用程序的逻辑流程 | [函数与方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher | +| 06 | JS 基础 | 使用 JS 进行决策 | 掌握如何使用条件语句在代码中创建决策 | [决策制作](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS 基础 | 数组与循环 | 学习如何使用 JavaScript 中的数组与循环处理数据 | [数组与循环](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [生态瓶](./3-terrarium/solution/README.md) | HTML 实践 | 构建用于创建在线生态瓶的 HTML，重点是布局构建 | [HTML 入门](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [生态瓶](./3-terrarium/solution/README.md) | CSS 实践 | 构建用于美化在线生态瓶的 CSS，重点了解 CSS 基础并使页面具备响应式 | [CSS 入门](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [生态瓶](./3-terrarium/solution/README.md) | JavaScript 闭包及 DOM 操作 | 构建生态瓶的 JavaScript，使其实现拖放功能，重点掌握闭包与 DOM 操作 | [JavaScript 闭包及 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [打字游戏](./4-typing-game/solution/README.md) | 构建打字游戏 | 学习如何使用键盘事件驱动 JavaScript 应用的逻辑 | [事件驱动编程](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器工作原理 | 学习浏览器的工作方式，历史，并搭建浏览器扩展的基础元素 | [关于浏览器](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 构建表单、调用 API 及本地存储变量 | 构建浏览器扩展的 JavaScript 元素，利用本地存储变量调用 API | [API、表单与本地存储](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [绿色浏览器扩展](./5-browser-extension/solution/README.md) | 浏览器后台进程与网页性能优化 | 利用浏览器后台进程管理扩展的图标，了解网页性能及相关优化方法 | [后台任务与性能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [太空游戏](./6-space-game/solution/README.md) | 使用 JavaScript 进行更高级游戏开发 | 学习继承（类与组合）和发布/订阅模式，为游戏开发做准备 | [高级游戏开发简介](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [太空游戏](./6-space-game/solution/README.md) | 画布绘图 | 了解 Canvas API，用于向屏幕绘制元素 | [画布绘图](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [太空游戏](./6-space-game/solution/README.md) | 屏幕元素的移动 | 探索如何使用笛卡尔坐标和 Canvas API 让元素运动 | [元素移动](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [太空游戏](./6-space-game/solution/README.md) | 碰撞检测 | 让元素根据按键碰撞并相互反应，添加冷却函数提高游戏性能 | [碰撞检测](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [太空游戏](./6-space-game/solution/README.md) | 计分 | 根据游戏状态和表现执行数学计算 | [计分](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [太空游戏](./6-space-game/solution/README.md) | 结束与重新开始游戏 | 了解游戏结束与重新开始的处理，包括资源清理和变量重置 | [结束条件](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [银行应用](./7-bank-project/solution/README.md) | 网络应用中的 HTML 模板与路由 | 学习如何通过路由和 HTML 模板构建多页面网站的架构 | [HTML 模板与路由](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [银行应用](./7-bank-project/solution/README.md) | 构建登录和注册表单 | 学习表单构建与验证流程 | [表单](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [银行应用](./7-bank-project/solution/README.md) | 数据获取与使用方法 | 了解应用的数据流向、获取、存储及处理 | [数据](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [银行应用](./7-bank-project/solution/README.md) | 状态管理概念 | 学习应用如何保留状态及如何编程管理状态 | [状态管理](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [浏览器/VScode 代码](../../8-code-editor) | 使用 VScode | 学习如何使用代码编辑器 | [使用 VScode 代码编辑器](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI 助手](./9-chat-project/README.md) | 使用 AI | 学习如何构建自己的 AI 助手 | [AI 助手项目](./9-chat-project/README.md) | Chris | ## 🏫 教学法 @@ -181,29 +193,29 @@ * 项目驱动学习 * 频繁测验 -该课程教授 JavaScript、HTML 和 CSS 的基础知识，以及当今网页开发者使用的最新工具和技术。学生将通过制作打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵游戏和企业银行应用获得实践经验。到课程结束时，学生将具备扎实的网页开发理解。 +该项目教授 JavaScript、HTML 和 CSS 的基础知识，以及当前 Web 开发者使用的最新工具和技术。学生将通过构建打字游戏、虚拟生态瓶、环保浏览器扩展、太空入侵风格游戏和企业银行应用获得实践经验。系列课程结束时，学生将具备扎实的 Web 开发基础。 -> 🎓 你可以在 Microsoft Learn 上将本课程的前几节作为[学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)完成！ +> 🎓 你可以将本课程的前几节课作为 Microsoft Learn 上的 [学习路径](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 进行学习！ -通过确保内容与项目对齐，学习过程对学生更具吸引力，并增强概念的记忆。我们还编写了几节 JavaScript 基础入门课程，配合 “[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” 视频教程集合，其中有些作者也贡献了本课程。 +通过确保内容与项目对齐，学习过程对学生更具吸引力，概念的掌握度也会提高。我们还编写了几节 JavaScript 基础入门课程，配合来自"[JavaScript 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"合集的视频教程，这些视频的部分作者参与了本课程的编写。 -此外，课前的低风险测验帮助学生树立学习目标，课后的第二次测验确保知识的进一步巩固。此课程设计灵活有趣，可以全部完成也可以部分学习。项目难度由浅入深，经过 12 周的学习持续递增。 +此外，课前的低风险测验帮助学生树立学习目标，课后的测验则确保进一步巩固学习内容。本课程设计灵活且富有趣味性，支持整套学习或部分学习。项目从简单开始，随着12周课程周期逐步变得复杂。 -虽然我们有意避免引入 JavaScript 框架，以专注于作为网络开发者在使用框架前需掌握的基础技能，但完成本课程的良好后续步骤是通过另一个视频集合学习 Node.js：“[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”。 +虽然我们特意避免引入 JavaScript 框架，以专注于掌握作为 Web 开发者所需的基础技能，但完成本课程后，学习 Node.js 将是下一步的不错选择，推荐相关视频合集 "[Node.js 初学者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。 + +> 请查看我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。欢迎您提供建设性的反馈！ -> 请访问我们的[行为准则](CODE_OF_CONDUCT.md)和[贡献指南](CONTRIBUTING.md)。我们欢迎你的建设性反馈！ ## 🧭 离线访问 -你可以使用 [Docsify](https://docsify.js.org/#/) 离线运行本文档。将此仓库 Fork 到本地，安装 [Docsify](https://docsify.js.org/#/quickstart)，然后在此仓库根目录运行 `docsify serve`。网站将在本地的 3000 端口提供服务，即访问 `localhost:3000`。 +你可以通过使用 [Docsify](https://docsify.js.org/#/) 来离线运行本文档。Fork 此仓库，在本地安装 [Docsify](https://docsify.js.org/#/quickstart)，然后在本仓库根目录下输入 `docsify serve`。网站将在本地主机的3000端口启动：`localhost:3000`。 ## 📘 PDF - -所有课程的 PDF 可在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。 - +所有课程的 PDF 可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。 ## 🎒 其他课程 -我们的团队还制作了其他课程！查看： + +我们的团队还制作了其他课程！快来看看： ### LangChain @@ -245,23 +257,23 @@ [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## 获取帮助 +## 获得帮助 -如果您遇到困难或对构建 AI 应用有任何疑问，加入其他学习者和经验丰富的开发者一起讨论 MCP。这里是一个支持性的社区，欢迎提问并自由分享知识。 +如果你遇到困难或对构建 AI 应用有任何疑问，欢迎加入 MCP 的学习者和经验丰富的开发者讨论社区。这是一个支持性的社区，欢迎提问并自由分享知识。 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -如果您在构建过程中有产品反馈或遇到错误，请访问： +如果你在构建过程中有产品反馈或遇到错误，请访问： [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## 许可证 -本存储库采用 MIT 许可证。详情请参见 [LICENSE](../../LICENSE) 文件。 +本仓库使用 MIT 许可证。更多信息请参见 [LICENSE](../../LICENSE) 文件。 --- -**免责声明**： -本文件使用人工智能翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确，但请注意自动翻译可能存在错误或不准确之处。请将原始语言版本视为权威来源。对于关键信息，建议采用专业人工翻译。我们不对因使用本翻译而产生的任何误解或错误解释承担责任。 +**免责声明**： +本文件使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确，但请注意，自动翻译可能包含错误或不准确之处。原始语言版本的文件应视为权威来源。对于关键信息，建议采用专业人工翻译。因使用此翻译而产生的任何误解或误释，我们不承担任何责任。 \ No newline at end of file