diff --git a/translations/ar/.co-op-translator.json b/translations/ar/.co-op-translator.json index 45534e001..f5a44f35c 100644 --- a/translations/ar/.co-op-translator.json +++ b/translations/ar/.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:28:46+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:49:23+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ar" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T15:58:39+00:00", + "translation_date": "2026-03-06T16:52:52+00:00", "source_file": "AGENTS.md", "language_code": "ar" }, @@ -516,8 +516,8 @@ "language_code": "ar" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T15:53:16+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:45:52+00:00", "source_file": "README.md", "language_code": "ar" }, diff --git a/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md index b22f7c838..f1523c3bc 100644 --- a/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ -# مقدمة إلى لغات البرمجة وأدوات المطورين الحديثة +# مقدمة في لغات البرمجة وأدوات المطور الحديثة -مرحبًا أيها المطور المستقبلي! 👋 هل يمكنني أن أخبرك بشيء يجعلني أشعر بالحماس كل يوم؟ أنت على وشك اكتشاف أن البرمجة ليست مجرد التعامل مع أجهزة الكمبيوتر – إنها امتلاك قوى خارقة حقيقية لتحويل أفكارك الأكثر جنونًا إلى واقع! +مرحبًا أيها المطور المستقبلي! 👋 هل يمكنني أن أخبرك بشيء لا يزال يصيبني بالقشعريرة كل يوم؟ أنت على وشك اكتشاف أن البرمجة ليست مجرد أجهزة كمبيوتر – إنها عن امتلاك قوى خارقة حقيقية لإحياء أفكارك الأكثر جنونًا! -تعرف ذلك الشعور عندما تستخدم تطبيقك المفضل وكل شيء يعمل بسلاسة؟ عندما تضغط على زر ويحدث شيء سحري يجعلك تقول "واو، كيف فعلوا ذلك؟" حسنًا، شخص مثلك تمامًا – ربما جالس في مقهىه المفضل في الساعة الثانية صباحًا مع كوبه الثالث من الإسبريسو – كتب الكود الذي صنع تلك السحرية. وهنا ما سيذهلك: بنهاية هذا الدرس، لن تفهم فقط كيف فعلوا ذلك، بل ستكون متحمسًا لتجربته بنفسك! +أتعرف ذلك اللحظة عندما تستخدم تطبيقك المفضل ويسير كل شيء على أكمل وجه؟ عندما تضغط زرًا يحدث شيء سحري تمامًا يجعلك تقول "رائع، كيف فعلوا ذلك؟" حسنًا، شخص ما مثلك تمامًا – ربما يجلس في مقهاه المفضل في الساعة 2 صباحًا مع الإسبريسو الثالث – كتب الشفرة التي خلقت تلك السحر. وهنا ما سيفجر عقلك: بحلول نهاية هذا الدرس، لن تفهم فقط كيف فعلوا ذلك، بل ستتشوق لتجربته بنفسك! -انظر، أنا أفهم تمامًا إذا كانت البرمجة تبدو مخيفة الآن. عندما بدأت لأول مرة، كنت أعتقد بصراحة أنك بحاجة إلى أن تكون عبقريًا في الرياضيات أو أن تكون قد بدأت البرمجة منذ أن كنت في الخامسة من عمرك. لكن ما غير وجهة نظري تمامًا هو أن البرمجة تشبه تمامًا تعلم التحدث بلغة جديدة. تبدأ بـ "مرحبًا" و"شكرًا"، ثم تتقدم إلى طلب القهوة، وقبل أن تدرك، تجد نفسك تخوض مناقشات فلسفية عميقة! إلا أن الأمر هنا يتعلق بالتحدث مع أجهزة الكمبيوتر، وبصراحة؟ إنها أكثر شركاء المحادثة صبرًا – لا تحكم على أخطائك أبدًا ودائمًا متحمسة لتجربة مرة أخرى! +انظر، أنا أتفهم تمامًا إذا كانت البرمجة تبدو مخيفة الآن. عندما بدأت، كنت أعتقد بصدق أنك بحاجة لأن تكون عبقريًا في الرياضيات أو أنك كنت تبرمج منذ أن كنت في الخامسة من عمرك. ولكن هنا ما غيّر وجهة نظري تمامًا: البرمجة هي تمامًا مثل تعلم المحادثة بلغة جديدة. تبدأ بـ"مرحبا" و"شكرًا"، ثم تتدرج إلى طلب القهوة، وقبل أن تعرف، تكون تجري نقاشات فلسفية عميقة! باستثناء أنك في هذه الحالة، تجري المحادثات مع الحواسيب، وبصراحة؟ إنهم أكثر شركاء المحادثة صبرًا على الإطلاق – لا يحكمون على أخطائك ودائمًا متحمسون لتجربة ثانية! -اليوم، سنستكشف الأدوات الرائعة التي تجعل تطوير الويب الحديث ليس فقط ممكنًا، بل ممتعًا للغاية. أنا أتحدث عن نفس المحررات والمتصفحات وطرق العمل التي يستخدمها المطورون في Netflix وSpotify واستوديوهات التطبيقات المستقلة المفضلة لديك كل يوم. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة في الصناعة مجانية تمامًا! +اليوم، سنستكشف الأدوات المذهلة التي تجعل تطوير الويب الحديث ليس ممكنًا فحسب، بل مدمنًا حقيقيًا. أتحدث عن نفس المحررات والمتصفحات وسير العمل التي يستخدمها المطورون في نيتفليكس، سبوتيفاي، واستوديوهات التطبيقات المستقلة المفضلة لديك يوميًا. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة على الصناعة هي مجانية تمامًا! ![مقدمة البرمجة](../../../../translated_images/ar/webdev101-programming.d6e3f98e61ac4bff.webp) -> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) +> مخطط مرسوم بواسطة [Tomomi Imura](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) ## المغامرة التي سنخوضها معًا -حسنًا، أنا متحمس جدًا لما سنستكشفه اليوم! بصراحة، أتمنى أن أرى وجهك عندما تفهم بعض هذه المفاهيم. إليك الرحلة الرائعة التي سنخوضها معًا: +حسنًا، أنا متحمس حقًا لما سنستكشفه اليوم! حقًا، أتمنى لو أستطيع رؤية وجهك عندما تتضح لك بعض هذه المفاهيم. إليك الرحلة الرائعة التي سنسيرها معًا: -- **ما هي البرمجة حقًا (ولماذا هي أروع شيء على الإطلاق!)** – سنكتشف كيف أن الكود هو السحر الخفي الذي يشغل كل شيء حولك، من المنبه الذي يعرف بطريقة ما أنه صباح يوم الاثنين إلى الخوارزمية التي تختار لك توصيات Netflix المثالية. -- **لغات البرمجة وشخصياتها المذهلة** – تخيل أنك تدخل حفلة حيث لكل شخص قوى خارقة مختلفة وطرق لحل المشكلات. هذا هو عالم لغات البرمجة، وستحب التعرف عليها! -- **الأسس التي تجعل السحر الرقمي يحدث** – فكر في هذه كأروع مجموعة 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، وهو ما يعني ببساطة "نعم" و"لا" أو "تشغيل" و"إيقاف". هذا كل شيء! ولكن هنا يأتي السحر – لا يتعين علينا التحدث بلغة 1 و0 كما لو كنا في فيلم ماتريكس. هنا تأتي **لغات البرمجة** لإنقاذنا. إنها مثل وجود أفضل مترجم في العالم يأخذ أفكارك البشرية العادية ويحولها إلى لغة الكمبيوتر. +ما أذهلني عندما تعلمت هذا لأول مرة: الحواسيب في جوهرها بسيطة للغاية. هي تفهم فعليًا شيئين فقط – 1 و0، وهما في الأساس تعني "نعم" و"لا" أو "تشغيل" و"إيقاف". هذا كل شيء! لكنها تصبح سحرية هنا – لا نحتاج لأن نتحدث بالواحدات والأصفار كما لو كنا في المصفوفة. هنا تأتي **لغات البرمجة** لإنقاذنا. فهي مثل وجود أفضل مترجم في العالم يأخذ أفكارك البشرية العادية ويحوّلها إلى لغة الكمبيوتر. -وهنا ما يجعلني أشعر بالحماس كل صباح عندما أستيقظ: كل شيء رقمي في حياتك بدأ بشخص مثلك تمامًا، ربما جالسًا في بيجامته مع كوب قهوة، يكتب الكود على جهاز الكمبيوتر المحمول الخاص به. ذلك الفلتر في إنستغرام الذي يجعلك تبدو رائعًا؟ شخص ما برمجه. التوصية التي قادتك إلى أغنيتك المفضلة الجديدة؟ مطور بنى تلك الخوارزمية. التطبيق الذي يساعدك على تقسيم فاتورة العشاء مع أصدقائك؟ نعم، شخص ما فكر "هذا مزعج، أراهن أنني أستطيع إصلاح هذا" ثم... فعل ذلك! +وهذا ما لا يزال يصيبني بالقشعريرة كل صباح عندما أستيقظ: فعليًا *كل* شيء رقمي في حياتك بدأ بشخص مثلك تمامًا، ربما يجلس في بيجامته مع كوب قهوة، يكتب الشفرة على حاسوبه المحمول. ذلك الفلتر في إنستغرام الذي يجعلك تبدو بلا عيوب؟ شخص ما برمج ذلك. التوصية التي قادتك إلى أغنيتك المفضلة الجديدة؟ مطور صنع تلك الخوارزمية. التطبيق الذي يساعدك في تقسيم فاتورة العشاء مع الأصدقاء؟ نعم، شخص فكر "هذا مزعج، أظن أنني يمكنني إصلاحه" ثم… فعلها! -عندما تتعلم البرمجة، فأنت لا تكتسب مهارة جديدة فقط – بل تصبح جزءًا من مجتمع رائع من حلّال المشاكل الذين يقضون أيامهم في التفكير، "ماذا لو استطعت بناء شيء يجعل يوم شخص ما أفضل قليلاً؟" بصراحة، هل هناك شيء أكثر روعة من ذلك؟ +عندما تتعلم البرمجة، لا تكتسب مهارة جديدة فحسب – بل تصبح جزءًا من هذه الجماعة الرائعة من حلالي المشكلات الذين يقضون أيامهم يفكرون، "ماذا لو استطعت بناء شيء يجعل يوم شخص ما أفضل بقليل؟" بصراحة، هل هناك شيء أروع من ذلك؟ -✅ **معلومة ممتعة للبحث عنها**: إليك شيء رائع يمكنك البحث عنه عندما يكون لديك وقت فراغ – من تعتقد أنه كان أول مبرمج كمبيوتر في العالم؟ سأعطيك تلميحًا: قد لا يكون الشخص الذي تتوقعه! قصة هذا الشخص رائعة حقًا وتظهر أن البرمجة كانت دائمًا تدور حول حل المشكلات الإبداعي والتفكير خارج الصندوق. +✅ **مطاردة حقائق ممتعة**: إليك شيء رائع لتبحث عنه عندما يكون لديك بعض الوقت – من تعتقد أنه أول مبرمج حواسيب في العالم؟ سأعطيك تلميحًا: قد لا يكون من تتوقع! قصة هذا الشخص مثيرة للغاية وتظهر أن البرمجة كانت دائمًا عن حل المشكلات بإبداع والتفكير خارج الصندوق. -### 🧠 **وقت التحقق: كيف تشعر؟** +### 🧠 **وقت التقييم: كيف تشعر؟** **خذ لحظة للتفكير:** -- هل فكرة "إعطاء تعليمات لأجهزة الكمبيوتر" أصبحت واضحة لك الآن؟ -- هل يمكنك التفكير في مهمة يومية ترغب في أتمتتها باستخدام البرمجة؟ -- ما هي الأسئلة التي تدور في ذهنك حول هذا الشيء المسمى البرمجة؟ +- هل أصبحت فكرة "إعطاء تعليمات للحواسيب" واضحة الآن؟ +- هل يمكنك التفكير في مهمة يومية تود أتمتتها بالبرمجة؟ +- ما هي الأسئلة التي تخطر ببالك حول موضوع البرمجة هذا؟ -> **تذكر**: من الطبيعي تمامًا إذا كانت بعض المفاهيم لا تزال غامضة الآن. تعلم البرمجة يشبه تعلم لغة جديدة – يستغرق وقتًا حتى يبني عقلك تلك الروابط العصبية. أنت تقوم بعمل رائع! +> **تذكر**: من الطبيعي تمامًا أن تبدو بعض المفاهيم غير واضحة الآن. تعلم البرمجة يشبه تعلم لغة جديدة – يحتاج دماغك وقتًا لبناء تلك المسارات العصبية. أنت تقوم بعمل رائع! ## لغات البرمجة مثل نكهات مختلفة من السحر -حسنًا، هذا قد يبدو غريبًا، لكن ابق معي – لغات البرمجة تشبه كثيرًا أنواع الموسيقى المختلفة. فكر في الأمر: لديك الجاز، الذي يتميز بالسلاسة والارتجال، والروك الذي يتميز بالقوة والبساطة، والكلاسيكية التي تتميز بالأناقة والتنظيم، والهيب هوب الذي يتميز بالإبداع والتعبير. كل نوع له طابعه الخاص، ومجتمعه الخاص من المعجبين المتحمسين، وكل واحد مثالي لمزاج ومناسبة مختلفة. +حسنًا، هذا قد يبدو غريبًا، لكن تمسك معي – لغات البرمجة تشبه كثيرًا أنواع الموسيقى المختلفة. فكر في الأمر: لديك الجاز، الذي هو سلس ويعتمد على الارتجال، والروك الذي هو قوي ومباشر، والكلاسيكي الذي أنيق ومنظم، والهيب هوب الذي مبدع ومعبر. لكل نمط جوه الخاص، وجمهور من المعجبين المتحمسين، وكل واحد منها مثالي لأمزجة ومناسبات مختلفة. -لغات البرمجة تعمل بنفس الطريقة تمامًا! لن تستخدم نفس اللغة لبناء لعبة هاتف ممتعة كما تستخدم لتحليل كميات هائلة من بيانات المناخ، تمامًا كما لن تشغل موسيقى الميتال الصاخبة في صف يوغا (حسنًا، ربما ليس في معظم صفوف اليوغا! 😄). +لغات البرمجة تعمل بنفس الطريقة! لن تستخدم نفس اللغة لبناء لعبة موبايل ممتعة كما تستخدم لتحليل كميات هائلة من بيانات المناخ، تمامًا كما أنك لن تعزف ديث ميتال في فصل يوجا (حسنًا، في معظم صفوف اليوجا على الأقل! 😄). -لكن هنا ما يدهشني كل مرة أفكر فيه: هذه اللغات تشبه وجود مترجم رائع وصبور بجانبك. يمكنك التعبير عن أفكارك بطريقة طبيعية لعقلك البشري، وهم يتولون كل العمل المعقد لتحويل ذلك إلى لغة 1 و0 التي تتحدثها أجهزة الكمبيوتر. إنه مثل وجود صديق يتحدث بطلاقة "الإبداع البشري" و"منطق الكمبيوتر" – ولا يتعب أبدًا، ولا يحتاج إلى استراحة قهوة، ولا يحكم عليك إذا سألت نفس السؤال مرتين! +ولكن ما يفجر عقلي في كل مرة أفكر فيه: هذه اللغات هي مثل وجود أكثر مترجم عبقري وصبور في العالم جالس بجانبك. يمكنك التعبير عن أفكارك بطريقة طبيعية لدماغك البشري، وهم يتولون العمل المعقد للغاية لترجمتها إلى الواحدات والأصفار التي تتحدثها الحواسيب فعليًا. إنه كأن لديك صديقًا يجيد بطلاقة كل من "الإبداع البشري" و"منطق الكمبيوتر" – وهم لا يتعبون أبدًا، ولا يحتاجون إلى استراحات قهوة، ولا يحكمون عليك لأنك سألت نفس السؤال مرتين! ### لغات البرمجة الشهيرة واستخداماتها ```mermaid mindmap - root((Programming Languages)) - 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 + root((لغات البرمجة)) + تطوير الويب + جافا سكريبت + سحر الواجهة الأمامية + مواقع تفاعلية + تايب سكريبت + جافا سكريبت + أنواع + تطبيقات المؤسسات + البيانات والذكاء الاصطناعي + بايثون + علم البيانات + تعلم الآلة + الأتمتة + آر + الإحصائيات + البحث + تطبيقات الجوال + جافا + أندرويد + المؤسسات + سويفت 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** | تطوير الويب، واجهات المستخدم | تعمل في المتصفحات وتشغل المواقع التفاعلية | +| اللغة | الأفضل لـ | سبب شعبيتها | +|----------|----------|------------------| +| **JavaScript** | تطوير الويب، واجهات المستخدم | تعمل في المتصفحات وتدعم المواقع التفاعلية | | **Python** | علم البيانات، الأتمتة، الذكاء الاصطناعي | سهلة القراءة والتعلم، مكتبات قوية | -| **Java** | التطبيقات المؤسسية، تطبيقات أندرويد | مستقلة عن المنصة، قوية للأنظمة الكبيرة | +| **Java** | تطبيقات المؤسسات، تطبيقات أندرويد | مستقلة عن المنصة، قوية للأنظمة الكبيرة | | **C#** | تطبيقات ويندوز، تطوير الألعاب | دعم قوي من نظام مايكروسوفت | -| **Go** | خدمات السحابة، أنظمة الخلفية | سريعة، بسيطة، مصممة للحوسبة الحديثة | +| **Go** | خدمات السحابة، أنظمة الخادم الخلفي | سريعة، بسيطة، مصممة للحوسبة الحديثة | -### لغات عالية المستوى مقابل لغات منخفضة المستوى +### لغات المستوى العالي مقابل لغات المستوى المنخفض -حسنًا، هذا كان المفهوم الذي أربك عقلي عندما بدأت التعلم لأول مرة، لذا سأشاركك التشبيه الذي جعلني أفهمه أخيرًا – وأتمنى أن يساعدك أيضًا! +حسنًا، هذا كان صراحة المفهوم الذي كسر عقلي عندما بدأت التعلم، لذلك سأشاركك التشبيه الذي جعل الأمر يتضح لي – وآمل حقًا أن يساعدك أيضًا! -تخيل أنك تزور بلدًا لا تتحدث لغته، وتحتاج بشدة إلى العثور على أقرب حمام (كلنا مررنا بهذا، أليس كذلك؟ 😅): +تخيل أنك تزور دولة لا تتحدث لغتها، وتحتاج بشدة إلى إيجاد أقرب حمام (كلنا مررنا بذلك، أليس كذلك؟ 😅): -- **البرمجة منخفضة المستوى** تشبه تعلم اللهجة المحلية بشكل جيد جدًا بحيث يمكنك التحدث مع الجدة التي تبيع الفاكهة في الزاوية باستخدام إشارات ثقافية، وعبارات محلية، ونكات داخلية لا يفهمها إلا من نشأ هناك. مثير للإعجاب للغاية وفعال جدًا... إذا كنت تتحدث بطلاقة! ولكن قد يكون الأمر مربكًا جدًا عندما تحاول فقط العثور على حمام. +- **البرمجة منخفضة المستوى** مثل تعلم اللهجة المحلية جيدًا بحيث يمكنك الدردشة مع الجدة التي تبيع الفواكه على الزاوية باستخدام مراجع ثقافية، وتعابير محلية، ونكات داخلية لا يفهمها سوى من نشأ هناك. مثير للإعجاب وفعال جدًا... إذا كنت تجيدها! لكنها مربكة جدًا عندما تحاول فقط إيجاد حمام. -- **البرمجة عالية المستوى** تشبه وجود ذلك الصديق المحلي الرائع الذي يفهمك تمامًا. يمكنك أن تقول "أنا بحاجة ماسة للعثور على حمام" بلغة بسيطة، وهم يتولون كل الترجمة الثقافية ويعطونك الاتجاهات بطريقة منطقية لعقلك غير المحلي. +- **البرمجة عالية المستوى** مثل وجود صديق محلي رائع يفهمك تمامًا. يمكنك أن تقول "أحتاج بشدة إلى إيجاد حمام" بالإنجليزية البسيطة، وهو يتولى كل الترجمة الثقافية ويعطيك الاتجاهات بطريقة مفهومة لدماغك غير المحلي. بمصطلحات البرمجة: -- **اللغات منخفضة المستوى** (مثل Assembly أو C) تتيح لك إجراء محادثات مفصلة للغاية مع الأجهزة الفعلية للكمبيوتر، ولكن عليك التفكير مثل الآلة، وهو... حسنًا، دعنا نقول إنه تغيير عقلي كبير! -- **اللغات عالية المستوى** (مثل JavaScript، Python، أو C#) تتيح لك التفكير كإنسان بينما تتولى هي كل الحديث بلغة الآلة خلف الكواليس. بالإضافة إلى ذلك، لديها مجتمعات مرحبة مليئة بأشخاص يتذكرون كيف كان الأمر عندما كانوا مبتدئين ويريدون حقًا مساعدتك! +- **لغات المستوى المنخفض** (مثل Assembly أو 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
التحكم المباشر في العتاد"] - 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) – مناسبة للبشر:** ```javascript -// Step 1: Basic Fibonacci setup +// الخطوة 1: إعداد الأساسي لفبوناتشي const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**ما يفعله هذا الكود:** -- **تعريف** ثابت لتحديد عدد أرقام فيبوناتشي التي نريد إنشائها -- **تهيئة** متغيرين لتتبع الرقم الحالي والرقم التالي في التسلسل -- **إعداد** القيم الأولية (0 و1) التي تحدد نمط فيبوناتشي -- **عرض** رسالة تعريفية لتحديد الناتج +**هذا ما تفعله هذه الشفرة:** +- **تعريف** ثابت يحدد عدد أعداد فيبوناتشي التي نريد توليدها +- **تهيئة** متغيرين لتتبع الرقم الحالي والتالي في التسلسل +- **ضبط** القيم الابتدائية (0 و1) التي تحدد نمط فيبوناتشي +- **عرض** رسالة عنوان لتحديد ناتجنا ```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` -- **عرض** كل رقم مع موقعه باستخدام تنسيق القالب النصي -- **حساب** الرقم التالي في تسلسل فيبوناتشي بإضافة القيم الحالية والتالية -- **تحديث** متغيرات التتبع للانتقال إلى التكرار التالي +- **عرض** كل رقم مع موقعه باستخدام تنسيق القوالب الحرفية +- **حساب** الرقم التالي في فيبوناتشي بجمع القيم الحالية والتالية +- **تحديث** متغيرات التتبع للانتقال للتكرار التالي ```javascript -// Step 3: Modern functional approach +// الخطوة ٣: النهج الوظيفي الحديث const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// مثال على الاستخدام const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**في المثال أعلاه، قمنا بـ:** -- **إنشاء** وظيفة قابلة لإعادة الاستخدام باستخدام صياغة وظيفة السهم الحديثة -- **بناء** مصفوفة لتخزين التسلسل الكامل بدلاً من عرضه رقمًا برقم +**في الأعلى، قمنا بـ:** +- **إنشاء** دالة قابلة لإعادة الاستخدام باستخدام صياغة الدالة الحديثة بالسهم +- **بناء** مصفوفة لتخزين التسلسل الكامل بدلاً من العرض واحدًا تلو الآخر - **استخدام** فهرسة المصفوفة لحساب كل رقم جديد من القيم السابقة -- **إرجاع** التسلسل الكامل لاستخدامه بشكل مرن في أجزاء أخرى من البرنامج +- **إرجاع** التسلسل الكامل لاستخدام مرن في أجزاء أخرى من برنامجنا -**لغة منخفضة المستوى (ARM Assembly) – صديقة للكمبيوتر:** +**لغة منخفضة المستوى (ARM Assembly) – مناسبة للكمبيوتر:** ```assembly area ascen,code,readonly @@ -259,127 +257,127 @@ back add r0,r1 end ``` -لاحظ كيف أن نسخة JavaScript تُقرأ تقريبًا كتعليمات باللغة الإنجليزية، بينما تستخدم نسخة Assembly أوامر غامضة تتحكم مباشرة في معالج الكمبيوتر. كلاهما ينجز نفس المهمة، لكن اللغة عالية المستوى أسهل بكثير للفهم والكتابة والصيانة. +لاحظ كيف يبدو إصدار JavaScript كما لو كان تعليمات باللغة الإنجليزية تقريبًا، بينما يستخدم إصدار التجميع أوامر غامضة تتحكم مباشرة في معالج الكمبيوتر. كلاهما ينجز نفس المهمة بدقة، لكن لغة المستوى العالي أسهل بكثير على البشر لفهمها وكتابتها وصيانتها. **الاختلافات الرئيسية التي ستلاحظها:** -- **الوضوح**: JavaScript تستخدم أسماء وصفية مثل `fibonacciCount` بينما Assembly تستخدم تسميات غامضة مثل `r0`, `r1` -- **التعليقات**: اللغات عالية المستوى تشجع على كتابة تعليقات توضيحية تجعل الكود واضحًا وسهل الفهم. -- **الهيكل**: التدفق المنطقي للغة JavaScript يتماشى مع الطريقة التي يفكر بها البشر في حل المشكلات خطوة بخطوة. -- **الصيانة**: تحديث إصدار JavaScript لتلبية متطلبات مختلفة أمر بسيط وواضح. +- **سهولة القراءة**: يستخدم جافاسكريبت أسماء وصفية مثل `fibonacciCount` بينما يستخدم الأسمبلي تسميات مشفرة مثل `r0`، `r1` +- **التعليقات**: تشجع اللغات عالية المستوى على كتابة تعليقات تفسيرية تجعل الكود موثقًا ذاتيًا +- **الهيكلية**: يتطابق التدفق المنطقي لجافاسكريبت مع طريقة تفكير البشر في حل المشكلات خطوة بخطوة +- **الصيانة**: تحديث نسخة جافاسكريبت لمتطلبات مختلفة أمر بسيط وواضح -✅ **حول تسلسل فيبوناتشي**: هذا النمط الرقمي الرائع (حيث يساوي كل رقم مجموع الرقمين السابقين له: 0، 1، 1، 2، 3، 5، 8...) يظهر حرفيًا *في كل مكان* في الطبيعة! ستجده في دوامات عباد الشمس، أنماط أكواز الصنوبر، طريقة انحناء أصداف النوتيلوس، وحتى في كيفية نمو فروع الأشجار. إنه أمر مذهل كيف يمكن للرياضيات والبرمجة مساعدتنا في فهم وإعادة إنشاء الأنماط التي تستخدمها الطبيعة لخلق الجمال! +✅ **عن متتالية فيبوناتشي**: هذا النمط الرقمي الرائع تمامًا (حيث يساوي كل رقم مجموع الرقمين قبله: 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; let isRaining = false; ``` - -**فهم هذه المفاهيم:** -- **تخزين** القيم الثابتة في متغيرات `const` (مثل اسم الموقع) -- **استخدام** `let` للقيم التي يمكن أن تتغير أثناء تشغيل البرنامج -- **تعيين** أنواع بيانات مختلفة: نصوص، أرقام، وقيم منطقية (صحيح/خطأ) -- **اختيار** أسماء وصفية تشرح ما يحتويه كل متغير + +**فهم هذه المفاهيم:** +- **تخزين** القيم الثابتة في متغيرات `const` (مثل اسم الموقع) +- **استخدام** `let` للقيم التي قد تتغير خلال البرنامج +- **تعيين** أنواع بيانات مختلفة: نصوص، أرقام، وقيم منطقية (صح/خطأ) +- **اختيار** أسماء وصفية تشرح محتوى كل متغير ```javascript -// Step 2: Working with objects to group related data +// الخطوة 2: العمل مع الكائنات لتجميع البيانات ذات الصلة const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**في المثال أعلاه، قمنا بـ:** -- **إنشاء** كائن لتجميع معلومات الطقس ذات الصلة معًا -- **تنظيم** عدة أجزاء من البيانات تحت اسم متغير واحد -- **استخدام** أزواج المفتاح والقيمة لتسمية كل جزء من المعلومات بوضوح + +**في المثال أعلاه، لقد:** +- **أنشأنا** كائنًا لتجميع معلومات الطقس ذات الصلة معاً +- **نظمنا** عدة بيانات تحت اسم متغير واحد +- **استخدمنا** أزواج المفتاح والقيمة لتسمية كل جزء من المعلومات بوضوح ```javascript -// Step 3: Using and updating variables +// الخطوة 3: استخدام وتحديث المتغيرات 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}%`); ``` + +**ما تحتاج إلى معرفته:** +- **استخراج** خصائص معينة من الكائنات باستخدام التفكيك +- **إنشاء** متغيرات جديدة تلقائيًا بأسماء مفاتيح الكائن +- **تبسيط** الكود بتجنب تكرار الصيغة النقطية -**ما تحتاج إلى معرفته:** -- **استخراج** خصائص محددة من الكائنات باستخدام التعيين التفكيكي -- **إنشاء** متغيرات جديدة تلقائيًا بنفس أسماء مفاتيح الكائن -- **تبسيط** الكود عن طريق تجنب التدوين النقطي المتكرر - -### تدفق التحكم: تعليم برنامجك التفكير +### تدفق التحكم: تعليم برنامجك على التفكير -حسنًا، هنا حيث تصبح البرمجة مذهلة للغاية! **تدفق التحكم** هو أساسًا تعليم برنامجك كيفية اتخاذ قرارات ذكية، تمامًا كما تفعل كل يوم دون حتى التفكير في الأمر. +حسنًا، هذا هو الجزء الذي تصبح فيه البرمجة مذهلة حقًا! **تدفق التحكم** هو ببساطة تعليم برنامجك كيفية اتخاذ قرارات ذكية، تمامًا كما تفعل أنت كل يوم دون أن تفكر. -تخيل هذا: هذا الصباح ربما مررت بشيء مثل "إذا كان الجو ممطرًا، سأحمل مظلة. إذا كان الجو باردًا، سأرتدي معطفًا. إذا كنت متأخرًا، سأترك الإفطار وأحصل على قهوة في الطريق." عقلك يتبع هذه المنطقية الشرطية عشرات المرات كل يوم! +تخيل هذا: هذا الصباح ربما قلت لنفسك "إذا كانت تمطر، سأحمل مظلة. إذا كان الجو باردًا، سأرتدي جاكيتًا. إذا كنت متأخرًا، فسأتخطى الإفطار وأشرب القهوة في الطريق." دماغك يتبع هذا المنطق "إذا-ثم" عشرات المرات يوميًا بشكل تلقائي! -هذا ما يجعل البرامج تبدو ذكية وحيوية بدلاً من مجرد اتباع نص ممل ومتوقع. يمكنها بالفعل النظر في الموقف، وتقييم ما يحدث، والاستجابة بشكل مناسب. إنه مثل إعطاء برنامجك عقلًا يمكنه التكيف واتخاذ الخيارات! +هذا ما يجعل البرامج تبدو ذكية وحية بدلًا من أن تتبع نصًا مملًا ومتوقعًا فقط. يمكنها فعلاً أن تنظر إلى الموقف، تقيم ما يحدث، وترد بشكل مناسب. إنه كأنك تمنح برنامجك عقلًا يمكنه التكيف واتخاذ القرارات! -هل تريد أن ترى كيف يعمل هذا بشكل جميل؟ دعني أريك: +هل تريد أن ترى كيف يعمل هذا بشكل رائع؟ دعني أريك: ```javascript -// Step 1: Basic conditional logic +// الخطوة 1: المنطق الشرطي الأساسي const userAge = 17; if (userAge >= 18) { @@ -389,15 +387,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**ما يفعله هذا الكود:** -- **التحقق** مما إذا كان عمر المستخدم يلبي متطلبات التصويت -- **تنفيذ** كتل كود مختلفة بناءً على نتيجة الشرط -- **حساب** وعرض المدة حتى أهلية التصويت إذا كان العمر أقل من 18 -- **تقديم** ملاحظات محددة ومفيدة لكل سيناريو + +**إليك ما يفعله هذا الكود:** +- **التحقق** مما إذا كان عمر المستخدم يفي بمتطلبات التصويت +- **تنفيذ** كتل كود مختلفة بناءً على نتيجة الشرط +- **حساب** وعرض المدة المتبقية حتى يحق للمستخدم التصويت إذا كان دون 18 عامًا +- **تقديم** ملاحظات محددة ومفيدة لكل سيناريو ```javascript -// Step 2: Multiple conditions with logical operators +// الخطوة 2: شروط متعددة مع عوامل منطقية const userAge = 17; const hasPermission = true; @@ -409,26 +407,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**تفصيل ما يحدث هنا:** -- **دمج** شروط متعددة باستخدام المشغل `&&` (و) -- **إنشاء** تسلسل هرمي للشروط باستخدام `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) { @@ -447,58 +445,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**ينجز هذا الكود التالي:** +- **مقارنة** قيمة المتغير مع عدة حالات محددة +- **تجميع** الحالات المتشابهة معًا (أيام الأسبوع مقابل عطلات نهاية الأسبوع) +- **تنفيذ** كتلة الكود المناسبة عند العثور على تطابق +- **تضمين** حالة `default` لمعالجة القيم غير المتوقعة +- **استخدام** عبارات `break` لمنع استمرار تنفيذ الكود إلى الحالة التالية -**هذا الكود يحقق ما يلي:** -- **مطابقة** قيمة المتغير مع عدة حالات محددة -- **تجميع** الحالات المتشابهة معًا (أيام الأسبوع مقابل عطلات نهاية الأسبوع) -- **تنفيذ** كتلة الكود المناسبة عند العثور على تطابق -- **تضمين** حالة `default` للتعامل مع القيم غير المتوقعة -- **استخدام** عبارات `break` لمنع الكود من الاستمرار إلى الحالة التالية - -> 💡 **تشبيه واقعي**: فكر في تدفق التحكم كأنك تمتلك نظام GPS الأكثر صبرًا في العالم يقدم لك التوجيهات. قد يقول "إذا كان هناك ازدحام في شارع رئيسي، خذ الطريق السريع بدلاً من ذلك. إذا كان البناء يغلق الطريق السريع، جرب الطريق ذو المناظر الخلابة." البرامج تستخدم نفس النوع من المنطق الشرطي للاستجابة بذكاء لمواقف مختلفة وتقديم أفضل تجربة ممكنة للمستخدمين. +> 💡 **تشبيه من العالم الحقيقي**: فكر في تدفق التحكم كأن لديك جهاز GPS الصبور الأكثر في العالم يوجهك. قد يقول "إذا كان هناك ازدحام في شارع مين، خذ الطريق السريع بدلًا منه. إذا كان هناك إنشاءات تغلق الطريق السريع، جرب الطريق ذو المنظر الخلاب." تستخدم البرامج نفس نوع المنطق الشرطي للرد بذكاء على الحالات المختلفة ولتقديم أفضل تجربة للمستخدمين. -### 🎯 **اختبار المفاهيم: إتقان اللبنات الأساسية** +### 🎯 **فحص المفاهيم: إتقان اللبنات الأساسية** -**دعنا نرى كيف تسير الأمور مع الأساسيات:** -- هل يمكنك شرح الفرق بين المتغير والعبارة بكلماتك الخاصة؟ -- فكر في سيناريو واقعي حيث ستستخدم قرارًا إذا-ثم (مثل مثال التصويت لدينا) -- ما هو الشيء الذي فاجأك بشأن منطق البرمجة؟ +**لنرَ مدى تقدمك في الأساسيات:** +- هل يمكنك شرح الفرق بين المتغير والجملة البرمجية بكلماتك؟ +- فكر في سيناريو واقعي تستخدم فيه قرار إذا-ثم (مثل مثال التصويت) +- ما هو شيء واحد في منطق البرمجة فاجأك؟ -**تعزيز سريع للثقة:** +**تعزيز سريع للثقة:** ```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 -``` - -✅ **ما القادم**: سنستمتع كثيرًا بالغوص أعمق في هذه المفاهيم بينما نواصل هذه الرحلة الرائعة معًا! الآن، ركز فقط على الشعور بالإثارة بشأن كل الإمكانيات المذهلة التي تنتظرك. المهارات والتقنيات المحددة ستترسخ بشكل طبيعي مع الممارسة – أعدك أن هذا سيكون أكثر متعة مما تتوقع! +``` +✅ **ما الذي سيأتي بعد ذلك**: سنستمتع كثيرًا بالتعمق أكثر في هذه المفاهيم بينما نواصل هذه الرحلة الرائعة معًا! الآن، ركز فقط على الشعور بالإثارة تجاه كل الإمكانيات المذهلة التي تنتظرك. المهارات والتقنيات المحددة ستترسخ تلقائيًا مع الممارسة – أعدك أن هذه ستكون أكثر متعة مما قد تتوقع! -## أدوات العمل +## أدوات المهنة -حسنًا، هذا هو الجزء الذي يجعلني متحمسًا لدرجة أنني بالكاد أستطيع التحكم في نفسي! 🚀 نحن على وشك الحديث عن الأدوات الرائعة التي ستجعلك تشعر وكأنك حصلت للتو على مفاتيح سفينة فضائية رقمية. +حسنًا، هذا هو المكان الذي أشعر فيه بحماس لا يُوصف! 🚀 نحن على وشك التحدث عن الأدوات الرائعة التي ستجعلك تشعر وكأنك حصلت للتو على مفاتيح سفينة فضاء رقمية. -تعرف كيف يمتلك الطاهي تلك السكاكين المتوازنة تمامًا التي تبدو وكأنها امتداد لأيديهم؟ أو كيف يمتلك الموسيقي تلك الجيتار التي تبدو وكأنها تغني بمجرد لمسها؟ حسنًا، المطورون لديهم نسختهم الخاصة من هذه الأدوات السحرية، وإليك ما سيذهلك تمامًا – معظمها مجاني تمامًا! +هل تعرف كيف يكون لدى الشيف سكاكين متوازنة تمامًا تشعر وكأنها امتداد ليديه؟ أو كيف يكون لدى الموسيقي غيتار يبدو كأنه يغني في اللحظة التي يلمسه فيها؟ حسنًا، لدى المطورين نسختهم الخاصة من هذه الأدوات السحرية، وهنا ما سيبهرك تمامًا – معظمها مجاني بالكامل! -أنا تقريبًا أقفز من الكرسي وأنا أفكر في مشاركة هذه الأدوات معك لأنها أحدثت ثورة كاملة في كيفية بناء البرمجيات. نحن نتحدث عن مساعدات برمجية مدعومة بالذكاء الاصطناعي يمكنها المساعدة في كتابة الكود الخاص بك (لست أمزح!)، بيئات سحابية حيث يمكنك بناء تطبيقات كاملة من أي مكان به اتصال واي فاي، وأدوات تصحيح الأخطاء متطورة لدرجة أنها تشبه امتلاك رؤية بالأشعة السينية لبرامجك. +أنا أتكلم وأتحرك على كرسيي بحماس وأنا أفكر في مشاركتها معك لأنها ثورت تمامًا طريقة بناء البرمجيات لدينا. نتحدث عن مساعدي برمجة مدعومين بالذكاء الاصطناعي يمكنهم مساعدتك في كتابة الكود (لست أمزح!)، وبيئات سحابية حيث يمكنك بناء تطبيقات كاملة من أي مكان يتوفر فيه واي فاي، وأدوات تصحيح أخطاء متطورة جدًا تشبه أن يكون لديك رؤية أشعة إكس لبرامجك. -وهنا الجزء الذي لا يزال يجعلني أشعر بالقشعريرة: هذه ليست "أدوات للمبتدئين" التي ستتجاوزها. هذه هي نفس الأدوات الاحترافية التي يستخدمها المطورون في Google وNetflix واستوديو التطبيقات المستقل الذي تحبه في هذه اللحظة بالذات. ستشعر وكأنك محترف تمامًا أثناء استخدامها! +وهنا الجزء الذي مازال يثير قشرتي: هذه ليست أدوات "للمبتدئين" ستتجاوزها بسرعة. هذه هي نفس الأدوات المهنية التي يستخدمها مطورو جوجل ونتفليكس واستوديوهات التطبيقات المستقلة التي تحبها في هذه اللحظة بالذات. ستشعر بأنك محترف حقيقي وأنت تستخدمها! ```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 @@ -506,349 +503,352 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` - -### محررات الكود وبيئات التطوير المتكاملة: أصدقاؤك الرقميون الجدد +``` +### محررات التعليمات البرمجية وبيئات التطوير المتكاملة: أصدقاؤك الرقميون الجدد -دعنا نتحدث عن محررات الكود – هذه ستصبح حقًا أماكنك المفضلة الجديدة! فكر فيها كملاذك الشخصي للبرمجة حيث ستقضي معظم وقتك في صياغة وإتقان إبداعاتك الرقمية. +دعنا نتحدث عن محررات الكود – هذه على وشك أن تصبح أماكنك المفضلة حديثًا للتواجد! فكر فيها كمكانك الشخصي للترميز حيث ستقضي معظم وقتك في صياغة وتحسين إبداعاتك الرقمية. -لكن إليك ما هو سحري تمامًا بشأن المحررات الحديثة: إنها ليست مجرد محررات نصوص فاخرة. إنها مثل وجود أفضل مرشد برمجة بجانبك على مدار الساعة طوال أيام الأسبوع. إنها تلتقط أخطائك الإملائية قبل أن تلاحظها، تقترح تحسينات تجعلك تبدو كعبقري، تساعدك على فهم ما يفعله كل جزء من الكود، وبعضها يمكنه حتى التنبؤ بما ستكتبه وتقديم اقتراحات لإكمال أفكارك! +لكن ما هو السحري حقًا في المحررات الحديثة: إنها ليست مجرد محررات نصوص عادية. إنها كأن لديك أذكى وأفضل مرشد للبرمجة جالس بجانبك 24/7. تكتشف أخطاء كتابتك قبل أن تلاحظها، تقترح تحسينات تجعلك تبدو عبقريًا، تساعدك على فهم وظيفة كل قطعة كود، وبإمكان بعضها حتى توقع ما تود كتابته وتقترح إنهاء أفكارك! -أتذكر عندما اكتشفت الإكمال التلقائي لأول مرة – شعرت حرفيًا وكأنني أعيش في المستقبل. تبدأ بكتابة شيء، ومحررك يقول، "مرحبًا، هل كنت تفكر في هذه الوظيفة التي تفعل بالضبط ما تحتاجه؟" إنه مثل وجود قارئ أفكار كرفيق برمجة! +أتذكر عندما اكتشفت الإكمال التلقائي لأول مرة – شعرت حرفيًا وكأني أعيش في المستقبل. تبدأ بكتابة شيء، فيقول محررك "مرحبًا، هل كنت تفكر في هذه الدالة التي تفعل بالضبط ما تحتاج؟" إنه كأن لديك قارئ أفكار كرفيق ترميز! -**ما الذي يجعل هذه المحررات مذهلة للغاية؟** +**ما الذي يجعل هذه المحررات مذهلة جدًا؟** -محررات الكود الحديثة تقدم مجموعة رائعة من الميزات المصممة لتعزيز إنتاجيتك: +تقدم محررات الكود الحديثة مجموعة مبهرة من الميزات المصممة لتعزيز إنتاجيتك: -| الميزة | ما تفعله | لماذا تساعد | -|---------|--------------|--------------| -| **تمييز الصياغة** | تلوين أجزاء مختلفة من الكود | يجعل الكود أسهل للقراءة واكتشاف الأخطاء | -| **الإكمال التلقائي** | اقتراح الكود أثناء الكتابة | يسرع البرمجة ويقلل الأخطاء | -| **أدوات التصحيح** | تساعدك على العثور على الأخطاء وإصلاحها | توفر ساعات من وقت استكشاف الأخطاء | -| **الإضافات** | إضافة ميزات متخصصة | تخصيص المحرر لأي تقنية | -| **مساعدات الذكاء الاصطناعي** | اقتراح الكود والتفسيرات | تسريع التعلم والإنتاجية | +| الميزة | الوظيفة | الفائدة | +|-------------------|------------------------------|------------------------------------| +| **تمييز الصياغة** | تلوين أجزاء مختلفة من الكود | يجعل الكود أسهل للقراءة واكتشاف الأخطاء | +| **الإكمال التلقائي** | يقترح الكود أثناء الكتابة | يسرّع البرمجة ويقلل الأخطاء الإملائية | +| **أدوات تصحيح الأخطاء** | تساعدك على العثور وإصلاح الأخطاء | توفر ساعات من وقت حل المشاكل | +| **الإضافات** | تضيف ميزات متخصصة | خصص محررك لأي تقنية تستخدمها | +| **مساعدي الذكاء الاصطناعي** | يقترحون الكود والشروح | يسرّعون التعلم والإنتاجية | -> 🎥 **مصدر فيديو**: هل تريد رؤية هذه الأدوات أثناء العمل؟ تحقق من هذا [فيديو أدوات العمل](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)** (مجاني) -- الأكثر شعبية بين مطوري الويب -- نظام إضافات ممتاز -- محطة مدمجة وتكامل Git -- **الإضافات التي يجب أن تمتلكها**: - - [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) - اكتشاف الأخطاء الإملائية في الكود +**[فيجوال ستوديو كود](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مجاني) +- الأكثر شعبية بين مطوري الويب +- نظام إضافات ممتاز +- مدمج به الطرفية ودمج Git +- **إضافات لا بد منها**: + - [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) - اكتشاف الأخطاء الإملائية في الكود -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (مدفوع، مجاني للطلاب) -- أدوات تصحيح واختبار متقدمة -- إكمال الكود الذكي -- التحكم في الإصدارات مدمج +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (مدفوع، مجاني للطلاب) +- أدوات تصحيح واختبار متقدمة +- إكمال ذكي للكود +- تحكم مدمج في الإصدارات -**بيئات التطوير السحابية** (أسعار متنوعة) -- [GitHub Codespaces](https://github.com/features/codespaces) - كامل VS Code في متصفحك -- [Replit](https://replit.com/) - رائع للتعلم ومشاركة الكود -- [StackBlitz](https://stackblitz.com/) - تطوير ويب كامل وفوري +**بيئات تطوير سحابية** (بأسعار مختلفة) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code كامل في المتصفح +- [Replit](https://replit.com/) - ممتاز للتعلم ومشاركة الكود +- [StackBlitz](https://stackblitz.com/) - تطوير ويب كامل وفوري -> 💡 **نصيحة للبدء**: ابدأ بـ Visual Studio Code – إنه مجاني، يستخدم على نطاق واسع في الصناعة، ولديه مجتمع ضخم يقدم دروسًا وإضافات مفيدة. +> 💡 **نصيحة للمبتدئين**: ابدأ مع فيجوال ستوديو كود – إنه مجاني، واسع الاستخدام في الصناعة، ولديه مجتمع ضخم ينشئ دروس وإضافات مفيدة. -### متصفحات الويب: مختبرك السري لتطوير البرمجيات +### متصفحات الويب: مختبرك السري للتطوير -حسنًا، استعد لتفاجأ تمامًا! هل تعلم كيف كنت تستخدم المتصفحات لتصفح وسائل التواصل الاجتماعي ومشاهدة الفيديوهات؟ حسنًا، اتضح أنها كانت تخفي مختبرًا سريًا للمطورين مذهلًا طوال الوقت، فقط في انتظار أن تكتشفه! +حسنًا، استعد لأن ينفجر عقلك تمامًا! هل تعلم كيف كنت تستخدم المتصفحات لتصفح وسائل التواصل الاجتماعي ومشاهدة الفيديوهات؟ حسنًا، اتضح أنها كانت تخفي هذا المختبر السري المذهل للمطورين طوال الوقت، في انتظارك لاكتشافه! -كل مرة تنقر بزر الفأرة الأيمن على صفحة ويب وتختار "Inspect Element"، فإنك تفتح عالمًا مخفيًا من أدوات المطورين التي هي بصراحة أكثر قوة من بعض البرامج المكلفة التي كنت أدفع مئات الدولارات للحصول عليها. إنه مثل اكتشاف أن مطبخك العادي كان يخفي مختبرًا للطهاة المحترفين خلف لوحة سرية! -أول مرة أظهر لي أحدهم أدوات المطور في المتصفح، قضيت حوالي ثلاث ساعات فقط أضغط هنا وهناك وأقول: "انتظر، هل يمكنها فعل ذلك أيضًا؟!" يمكنك حرفيًا تعديل أي موقع في الوقت الفعلي، رؤية مدى سرعة تحميل كل شيء، اختبار كيف يبدو موقعك على أجهزة مختلفة، وحتى تصحيح أخطاء JavaScript مثل محترف حقيقي. إنه أمر مذهل للغاية! +في كل مرة تنقر بزر الماوس الأيمن على صفحة ويب وتختار "فحص العنصر"، فإنك تفتح عالمًا خفيًا من أدوات المطورين التي هي في الحقيقة أكثر قوة من بعض البرامج المكلفة التي كنت أدفع مئات الدولارات ثمنها. يشبه اكتشاف أن مطبخك العادي كان يخفي مختبر طهاة محترفين خلف لوح سري! +المرة الأولى التي عرّفني فيها شخص على أدوات مطوري المتصفح (DevTools)، قضيت حوالي ثلاث ساعات فقط وأنا أنقر هنا وهناك وأقول "انتظر، هل يمكنه فعل ذلك أيضًا؟!" يمكنك حرفيًا تعديل أي موقع ويب في الوقت الحقيقي، ورؤية مدى سرعة تحميل كل شيء بالضبط، واختبار كيف يبدو موقعك على أجهزة مختلفة، وحتى تصحيح أخطاء JavaScript كمحترف تمامًا. إنه أمر مذهل للغاية! **إليك لماذا المتصفحات هي سلاحك السري:** -عندما تنشئ موقعًا أو تطبيقًا ويب، تحتاج إلى رؤية كيف يبدو ويتصرف في العالم الحقيقي. المتصفحات لا تعرض عملك فقط، بل تقدم أيضًا ملاحظات تفصيلية حول الأداء، إمكانية الوصول، والمشكلات المحتملة. +عندما تنشئ موقع ويب أو تطبيق ويب، تحتاج إلى رؤية كيف يبدو ويتصرف في العالم الحقيقي. المتصفحات لا تعرض فقط عملك بل توفر أيضًا تغذية راجعة مفصلة حول الأداء، وسهولة الوصول، والمشكلات المحتملة. -#### أدوات المطور في المتصفح (DevTools) +#### أدوات مطوري المتصفح (DevTools) تتضمن المتصفحات الحديثة مجموعات تطوير شاملة: -| فئة الأداة | ما تقوم به | مثال على الاستخدام | -|------------|------------|--------------------| -| **مفتش العناصر** | عرض وتعديل HTML/CSS في الوقت الفعلي | تعديل التصميم لرؤية النتائج فورًا | -| **الكونسول** | عرض رسائل الخطأ واختبار JavaScript | تصحيح المشكلات وتجربة الكود | +| فئة الأداة | ماذا تفعل | مثال على الاستخدام | +|---------------|--------------|------------------| +| **مفتش العناصر** | عرض وتعديل HTML/CSS في الوقت الحقيقي | تعديل التنسيق لرؤية النتائج فورًا | +| **وحدة التحكم (Console)** | عرض رسائل الخطأ واختبار JavaScript | تصحيح المشكلات وتجربة الشيفرة | | **مراقب الشبكة** | تتبع كيفية تحميل الموارد | تحسين الأداء وأوقات التحميل | -| **مدقق إمكانية الوصول** | اختبار التصميم الشامل | ضمان عمل موقعك لجميع المستخدمين | -| **محاكي الأجهزة** | معاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب دون الحاجة إلى أجهزة متعددة | +| **مدقق سهولة الوصول** | اختبار التصميم الشامل | ضمان عمل موقعك لجميع المستخدمين | +| **محاكي الأجهزة** | المعاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب بدون وجود أجهزة متعددة | #### المتصفحات الموصى بها للتطوير -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - أدوات DevTools معيار الصناعة مع وثائق شاملة -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - أدوات ممتازة لشبكة CSS وإمكانية الوصول -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - مبني على Chromium مع موارد تطوير من Microsoft +- **[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)** - مبني على Chromium مع موارد مطوري مايكروسوفت -> ⚠️ **نصيحة اختبار مهمة**: اختبر دائمًا مواقعك في متصفحات متعددة! ما يعمل بشكل مثالي في Chrome قد يبدو مختلفًا في Safari أو Firefox. المطورون المحترفون يختبرون عبر جميع المتصفحات الرئيسية لضمان تجربة مستخدم متسقة. +> ⚠️ **نصيحة اختبار مهمة**: اختبر مواقعك دائمًا في متصفحات متعددة! ما يعمل بشكل مثالي في Chrome قد يبدو مختلفًا في Safari أو Firefox. يختبر المطورون المحترفون عبر كل المتصفحات الرئيسية لضمان تجربة مستخدم متسقة. -### أدوات سطر الأوامر: بوابتك إلى قوى المطور الخارقة -حسنًا، دعونا نكون صادقين تمامًا هنا بشأن سطر الأوامر، لأنني أريدك أن تسمع هذا من شخص يفهم الأمر حقًا. عندما رأيته لأول مرة – مجرد شاشة سوداء مخيفة مع نص يومض – فكرت حرفيًا: "لا، بالتأكيد لا! يبدو هذا وكأنه شيء من فيلم هاكرز في الثمانينيات، وأنا بالتأكيد لست ذكيًا بما يكفي لهذا!" 😅 +### أدوات سطر الأوامر: بوابتك إلى قوى خارقة كمطور -لكن إليك ما كنت أتمنى أن يخبرني به أحدهم حينها، وما سأخبرك به الآن: سطر الأوامر ليس مخيفًا – إنه في الواقع مثل إجراء محادثة مباشرة مع جهاز الكمبيوتر الخاص بك. فكر فيه كأنه الفرق بين طلب الطعام عبر تطبيق فاخر مع صور وقوائم (وهو لطيف وسهل) مقابل الدخول إلى مطعمك المحلي المفضل حيث يعرف الطاهي بالضبط ما تحب ويمكنه إعداد شيء مثالي بمجرد أن تقول "فاجئني بشيء رائع." +حسنًا، دعنا نصارح أنفسنا هنا حول سطر الأوامر، لأنني أريدك أن تسمع هذا من شخص يفهمه حقًا. عندما رأيته لأول مرة - مجرد شاشة سوداء مخيفة بها نص يومض - فكرت حرفيًا، "لا، بالتأكيد لا! هذا يبدو كشيء من فيلم هاكرز من ثمانينيات القرن الماضي، وأنا بالتأكيد لست ذكيًا بما يكفي لهذا!" 😅 -سطر الأوامر هو المكان الذي يذهب إليه المطورون ليشعروا وكأنهم سحرة حقيقيون. تكتب بضع كلمات تبدو سحرية (حسنًا، إنها مجرد أوامر، لكنها تبدو سحرية!)، تضغط على Enter، وبوم – لقد أنشأت هياكل مشاريع كاملة، قمت بتثبيت أدوات قوية من جميع أنحاء العالم، أو نشرت تطبيقك على الإنترنت ليشاهده الملايين. بمجرد أن تحصل على أول طعم لهذه القوة، يصبح الأمر إدمانًا بصراحة! +ولكن هنا ما كنت أتمنى أن يخبرني به شخص آنذاك، وما أخبرك به الآن: سطر الأوامر ليس مخيفًا – إنه فعليًا مثل التحدث مباشرة مع حاسوبك. فكر فيه كفرق بين طلب الطعام عبر تطبيق فاخر به صور وقوائم (وهو سهل وجميل) وبين الدخول إلى مطعمك المحلي المفضل حيث يعرف الشيف بالضبط ما تحب ويمكنه إعداد شيء مثالي بمجرد أن تقول "فاجئني بشيء رائع." + +سطر الأوامر هو المكان الذي يشعر فيه المطورون كأنهم سحرة حقيقيون. تكتب بعض الكلمات التي تبدو سحرية (حسنًا، هي مجرد أوامر، لكنها تبدو سحرية!)، تضغط Enter، وفجأة – لقد أنشأت هياكل مشاريع كاملة، أو ثبتت أدوات قوية من جميع أنحاء العالم، أو نشرت تطبيقك على الإنترنت ليشاهده الملايين. بمجرد أن تتذوق هذه القوة لأول مرة، تصبح مدمنًا عليها! **لماذا سيصبح سطر الأوامر أداتك المفضلة:** -بينما تعتبر الواجهات الرسومية رائعة للعديد من المهام، يتفوق سطر الأوامر في الأتمتة، الدقة، والسرعة. تعمل العديد من أدوات التطوير بشكل أساسي من خلال واجهات سطر الأوامر، وتعلم استخدامها بكفاءة يمكن أن يحسن إنتاجيتك بشكل كبير. +بينما الواجهات الرسومية رائعة للعديد من المهام، يتفوق سطر الأوامر في الأتمتة والدقة والسرعة. تعمل العديد من أدوات التطوير بشكل أساسي من خلال واجهات سطر الأوامر، وتعلم استخدامها بكفاءة يمكن أن يحسن إنتاجيتك بشكل كبير. ```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/)** | بيئة تشغيل JavaScript وإدارة الحزم | تشغيل JavaScript خارج المتصفحات، تثبيت أدوات التطوير الحديثة | -| **[Vite](https://vitejs.dev/)** | أداة بناء وخادم تطوير | تطوير سريع للغاية مع استبدال الوحدات الساخنة | -| **[ESLint](https://eslint.org/)** | جودة الكود | العثور على المشكلات في JavaScript وإصلاحها تلقائيًا | -| **[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)** 💻 - بيئة برمجة قوية -- **[Command Prompt](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)** 💻 - بيئة برمجة نصية قوية +- **[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/)** - محطة محسنة مع ميزات متقدمة +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - تطبيق الطرفية المدمج +- **[iTerm2](https://iterm2.com/)** - محطة طرفية محسنة بميزات متقدمة **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - الصدفة القياسية لنظام Linux -- **[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). مع الوقت، ستتقن تلقائيًا أوامر وتقنيات أتمتة متقدمة. + -### الوثائق: معلمك المتاح دائمًا للتعلم +### التوثيق: معلمك المتاح دائمًا للتعلم -حسنًا، دعني أشاركك سرًا صغيرًا سيجعلك تشعر بتحسن كبير بشأن كونك مبتدئًا: حتى أكثر المطورين خبرة يقضون جزءًا كبيرًا من وقتهم في قراءة الوثائق. وليس لأنهم لا يعرفون ما يفعلونه – بل لأن ذلك علامة على الحكمة! +حسنًا، دعني أشاركك سرًا صغيرًا سيجعلك تشعر بتحسن كبير تجاه كونك مبتدئًا: حتى أكثر المطورين خبرة يقضون جزءًا كبيرًا من وقتهم في قراءة التوثيق. وليس لأنهم لا يعرفون ماذا يفعلون – بل هو دليل على الحكمة! -فكر في الوثائق كأنك تمتلك وصولًا إلى أكثر المعلمين صبرًا ومعرفة الذين يتوفرون على مدار الساعة. عالق في مشكلة الساعة 2 صباحًا؟ الوثائق موجودة مع عناق افتراضي دافئ والإجابة التي تحتاجها بالضبط. تريد تعلم ميزة جديدة رائعة يتحدث عنها الجميع؟ الوثائق تدعمك بأمثلة خطوة بخطوة. تحاول فهم لماذا يعمل شيء ما بالطريقة التي يعمل بها؟ نعم، الوثائق جاهزة لتشرح لك بطريقة تجعلك تفهمها أخيرًا! +فكر في التوثيق كالوصول لأكثر المعلمين صبرًا وعلمًا في العالم والمتاحين 24/7. عالق في مشكلة في الثانية 2 صباحًا؟ التوثيق هنا مع حضن افتراضي دافئ وبالضبط الإجابة التي تحتاجها. تريد تعلم ميزة جديدة رائجة؟ التوثيق يدعمك بأمثلة خطوة بخطوة. تحاول فهم لماذا يعمل شيء ما بهذه الطريقة؟ بالطبع – التوثيق جاهز لشرح ذلك بطريقة تجعلك تفهم أخيرًا! -إليك شيء غير وجهة نظري تمامًا: عالم تطوير الويب يتحرك بسرعة كبيرة، ولا أحد (أعني لا أحد على الإطلاق!) يحتفظ بكل شيء في ذاكرته. لقد شاهدت مطورين كبار لديهم خبرة تزيد عن 15 عامًا يبحثون عن بناء جملة أساسي، وتعلم ماذا؟ هذا ليس محرجًا – إنه ذكي! الأمر لا يتعلق بامتلاك ذاكرة مثالية؛ بل يتعلق بمعرفة أين تجد الإجابات الموثوقة بسرعة وفهم كيفية تطبيقها. +إليك شيء غير وجهة نظري تمامًا: عالم تطوير الويب يتغير بسرعة خارقة، ولا أحد (أعني حرفيًا لا أحد!) يحفظ كل شيء عن ظهر قلب. شاهدت مطورين كبار بخبرة 15+ سنة يبحثون عن قواعد أساسية، وتعرف ماذا؟ هذا ليس محرجًا – هذا ذكي! المسألة ليست في امتلاك ذاكرة مثالية، بل في معرفة أين تجد إجابات موثوقة بسرعة وكيفية تطبيقها. -**إليك أين يحدث السحر الحقيقي:** +**هنا يحدث السحر الحقيقي:** -يقضي المطورون المحترفون جزءًا كبيرًا من وقتهم في قراءة الوثائق – ليس لأنهم لا يعرفون ما يفعلونه، بل لأن مشهد تطوير الويب يتطور بسرعة كبيرة بحيث يتطلب البقاء على اطلاع مستمر التعلم المستمر. تساعدك الوثائق الجيدة على فهم ليس فقط *كيف* تستخدم شيئًا ما، بل *لماذا* و*متى* تستخدمه. +يقضي المطورون المحترفون جزءًا كبيرًا من وقتهم في قراءة التوثيق – ليس لأنهم لا يعرفون ماذا يفعلون، بل لأن مجال تطوير الويب يتطور بسرعة هائلة والحفاظ على المعرفة المستحدثة يتطلب تعلمًا مستمرًا. التوثيق الرائع يساعدك على فهم ليس فقط *كيف* تستخدم شيئًا، بل و*لماذا* ومتى تستخدمه. -#### موارد الوثائق الأساسية +#### مصادر التوثيق الأساسية **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- المعيار الذهبي لوثائق تقنيات الويب -- أدلة شاملة لـ HTML، CSS، وJavaScript -- تتضمن معلومات توافق المتصفح -- تحتوي على أمثلة عملية وعروض تفاعلية +- المعيار الذهبي لتوثيق تقنيات الويب +- أدلة شاملة لـ HTML، و CSS، و JavaScript +- يشمل معلومات توافق المتصفحات +- يحتوي على أمثلة عملية وعروض تفاعلية **[Web.dev](https://web.dev)** (من Google) -- أفضل ممارسات تطوير الويب الحديث +- أفضل ممارسات تطوير الويب الحديثة - أدلة تحسين الأداء -- مبادئ التصميم الشامل وإمكانية الوصول -- دراسات حالة من مشاريع العالم الحقيقي +- مبادئ سهولة الوصول والتصميم الشامل +- دراسات حالة من مشاريع واقعية **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - موارد تطوير متصفح Edge -- أدلة تطبيقات الويب التقدمية -- رؤى تطوير عبر الأنظمة الأساسية +- أدلة Progressive Web App +- رؤى تطوير عبر المنصات **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- مناهج تعليمية منظمة +- مناهج تعلم منظمة - دورات فيديو من خبراء الصناعة -- تمارين برمجة عملية +- تمرينات برمجية عملية -> 📚 **استراتيجية الدراسة**: لا تحاول حفظ الوثائق – بدلاً من ذلك، تعلم كيفية التنقل فيها بكفاءة. ضع إشارات مرجعية للمراجع المستخدمة بشكل متكرر وتدرب على استخدام وظائف البحث للعثور على معلومات محددة بسرعة. +> 📚 **استراتيجية الدراسة**: لا تحاول حفظ التوثيق – بدلاً من ذلك، تعلم كيفية التنقل فيه بكفاءة. احفظ المراجع التي تستخدمها كثيرًا وتدرب على استخدام خاصية البحث لإيجاد المعلومات بسرعة. -### 🔧 **اختبار إتقان الأدوات: ما الذي يثير اهتمامك؟** +### 🔧 **فحص إتقان الأدوات: ما الذي يلامسك؟** **خذ لحظة للتفكير:** -- أي أداة أنت متحمس لتجربتها أولاً؟ (لا توجد إجابة خاطئة!) -- هل لا يزال سطر الأوامر يبدو مخيفًا، أم أنك فضولي بشأنه؟ -- هل يمكنك تخيل استخدام أدوات المطور في المتصفح لاستكشاف ما وراء الكواليس لمواقعك المفضلة؟ +- ما الأداة التي أنت متحمس لتجربتها أولاً؟ (لا توجد إجابة خاطئة!) +- هل لا يزال سطر الأوامر يبدو مخيفًا، أم أنك مهتم به؟ +- هل يمكنك تخيل استخدام أدوات مطوري المتصفح للتجسس على خلفية مواقعك المفضلة؟ ```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 🚀 استخدم وضع الوكيل لإكمال التحدي التالي: -**الوصف:** استكشف ميزات محرر الكود الحديث أو بيئة التطوير المتكاملة (IDE) وأظهر كيف يمكن أن تحسن سير عملك كمطور ويب. +**الوصف:** استكشف ميزات محرر شيفرة حديث أو IDE وشرح كيف يمكنه تحسين سير عملك كمطور ويب. -**المهمة:** اختر محرر كود أو بيئة تطوير متكاملة (مثل Visual Studio Code، WebStorm، أو IDE قائم على السحابة). قم بتحديد ثلاث ميزات أو إضافات تساعدك على كتابة، تصحيح، أو صيانة الكود بكفاءة أكبر. لكل منها، قدم شرحًا موجزًا عن كيفية تحسينها لسير عملك. +**المطلب:** اختر محرر شيفرة أو IDE (مثل Visual Studio Code، WebStorm، أو IDE قائم على السحابة). اذكر ثلاث ميزات أو امتدادات تساعدك على كتابة وتصحيح أو الحفاظ على الشيفرة بفعالية أكثر. لكل منها، قدم شرحًا مختصرًا عن كيفية استفادتك منها في سير العمل. --- ## 🚀 التحدي -**حسنًا، أيها المحقق، هل أنت مستعد لأول قضية لك؟** +**حسنًا، أيها المحقق، هل أنت مستعد لقضيتك الأولى؟** -الآن بعد أن حصلت على هذه الأساسيات الرائعة، لدي مغامرة ستساعدك على رؤية مدى تنوع وجاذبية عالم البرمجة حقًا. واستمع – هذا ليس عن كتابة الكود بعد، لذا لا يوجد ضغط هنا! فكر في نفسك كمحقق لغات برمجة في أول قضية مثيرة لك! +الآن بعد أن أصبحت لديك هذه الأساسيات الرائعة، لدي مغامرة ستساعدك على رؤية مدى التنوع والروعة لعالم البرمجة. واستمع - هذه ليست حول كتابة الشيفرة بعد، فلا ضغط في هذا الأمر! اعتبر نفسك محقق لغات برمجة في قضيتك المثيرة الأولى! -**مهمتك، إذا اخترت قبولها:** -1. **كن مستكشفًا للغات**: اختر ثلاث لغات برمجة من عوالم مختلفة تمامًا – ربما واحدة تبني مواقع، واحدة تنشئ تطبيقات جوال، وواحدة تحلل البيانات للعلماء. ابحث عن أمثلة لنفس المهمة البسيطة مكتوبة بكل لغة. أعدك أنك ستندهش تمامًا من مدى اختلافها أثناء القيام بنفس الشيء! +**مهمتك، إذا قررت قبولها:** +1. **كن مستكشف لغات**: اختر ثلاث لغات برمجة من عوالم مختلفة تمامًا – ربما واحدة لبناء المواقع، وأخرى لإنشاء تطبيقات الهاتف المحمول، وثالثة لمعالجة البيانات للعلماء. ابحث عن أمثلة لنفس المهمة البسيطة مكتوبة بكل لغة. أعدك بأنك ستندهش تمامًا من مدى اختلافها بينما تؤدي نفس الشيء بالضبط! -2. **اكتشف قصص أصلها**: ما الذي يجعل كل لغة مميزة؟ إليك حقيقة رائعة – كل لغة برمجة تم إنشاؤها لأن شخصًا ما فكر، "تعرف ماذا؟ يجب أن يكون هناك طريقة أفضل لحل هذه المشكلة المحددة." هل يمكنك معرفة ما كانت تلك المشكلات؟ بعض هذه القصص مثيرة للاهتمام حقًا! +2. **اكشف قصص نشأتها**: ما الذي يجعل كل لغة مميزة؟ هذه حقيقة رائعة – كل لغة برمجة تم إنشاؤها لأن شخصًا ما فكر، "تعرف ماذا؟ يجب أن تكون هناك طريقة أفضل لحل هذه المشكلة المحددة." هل يمكنك اكتشاف ما هي تلك المشكلات؟ بعض هذه القصص حقًا مثيرة! -3. **تعرف على المجتمعات**: تحقق من مدى ترحيب وشغف مجتمع كل لغة. البعض لديه ملايين المطورين الذين يشاركون المعرفة ويساعدون بعضهم البعض، والبعض الآخر أصغر ولكن مترابط للغاية وداعم. ستعجبك رؤية الشخصيات المختلفة لهذه المجتمعات! +3. **التقى المجتمعات**: اطلع على مدى ترحيب وشغف كل مجتمع للغة. بعضها يضم ملايين المطورين الذين يشاركون المعرفة ويساعدون بعضهم البعض، بينما البعض الآخر أصغر لكن مترابط وداعم بشكل كبير. ستحب رؤية الشخصيات المختلفة لهذه المجتمعات! -4. **اتبع شعورك الداخلي**: أي لغة تبدو أكثر سهولة بالنسبة لك الآن؟ لا تقلق بشأن اتخاذ الخيار "المثالي" – فقط استمع إلى حدسك! لا توجد إجابة خاطئة هنا، ويمكنك دائمًا استكشاف الآخرين لاحقًا. +4. **تابع حدسك**: أي لغة تبدو أكثر قربًا منك حاليًا؟ لا تشغل بالك بالاختيار "المثالي" – فقط استمع إلى إحساسك! لا توجد إجابة خاطئة هنا، ويمكنك دائمًا استكشاف لغات أخرى لاحقًا. -**عمل تحري إضافي**: حاول اكتشاف ما هي المواقع أو التطبيقات الرئيسية التي تم بناؤها بكل لغة. أضمن أنك ستُصدم عندما تعرف ما الذي يشغل Instagram، Netflix، أو تلك اللعبة الجوالة التي لا تستطيع التوقف عن لعبها! +**عمل تحقيق إضافي**: حاول اكتشاف ما هي المواقع أو التطبيقات الكبرى المبنية بكل لغة. أضمن لك أنك ستندهش عندما تعلم ما الذي يشغل إنستغرام، نيتفليكس، أو تلك اللعبة المحمولة التي لا تستطيع التوقف عن لعبها! -> 💡 **تذكر**: أنت لا تحاول أن تصبح خبيرًا في أي من هذه اللغات اليوم. أنت فقط تتعرف على الحي قبل أن تقرر أين تريد أن تستقر. خذ وقتك، استمتع بالأمر، ودع فضولك يقودك! +> 💡 **تذكر**: أنت لا تحاول أن تصبح خبيرًا في أي من هذه اللغات اليوم. أنت فقط تتعرف على الحي قبل أن تقرر أين تريد أن تقيم متجرك. خذ وقتك، استمتع، ودع فضولك يقودك! ## لنحتفل بما اكتشفته! -يا إلهي، لقد استوعبت الكثير من المعلومات الرائعة اليوم! أنا متحمس حقًا لرؤية مدى تأثير هذه الرحلة المذهلة عليك. وتذكر – هذا ليس اختبارًا تحتاج فيه إلى أن تكون مثاليًا. هذا أشبه بالاحتفال بكل الأشياء الرائعة التي تعلمتها عن هذا العالم المثير الذي أنت على وشك الغوص فيه! +يا إلهي، لقد استوعبت قدرًا هائلًا من المعلومات الرائعة اليوم! أنا متحمس حقًا لرؤية مدى التمسك بهذه الرحلة المذهلة. وتذكر – هذا ليس اختبارًا تحتاج أن تجتازه بشكل مثالي. هذا أقرب إلى احتفال بكل الأشياء الرائعة التي تعلمتها عن هذا العالم الرائع الذي ستغوص فيه قريبًا! -[خذ اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/web/) -## المراجعة والدراسة الذاتية +[خض اختبار ما بعد الدرس](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/). مجتمع البرمجة ترحيبي للغاية بالمبتدئين! +- شاهد بعض فيديوهات البرمجة الموجهة للمبتدئين على يوتيوب. هناك العديد من المبدعين الرائعين الذين يتذكرون كيف يكون الأمر عند البدء. +- فكر في الانضمام إلى لقاءات محلية أو مجتمعات إلكترونية. صدقني، المطورون يحبون مساعدة القادمين الجدد! + +> 🎯 **اسمع، هذا ما أريدك أن تتذكره**: لن تتوقع أن تصبح ساحر برمجة بين عشية وضحاها! أنت الآن فقط تتعرف على هذا العالم الرائع الجديد الذي على وشك أن تكون جزءًا منه. خذ وقتك، استمتع بالرحلة، وتذكر – كل مطور تعجب به كان يجلس يومًا ما تمامًا حيث أنت الآن، يشعر بالحماس وربما بقليل من الارباك. هذا أمر طبيعي تمامًا، ويعني أنك تسير على الطريق الصحيح! + -> 🎯 **اسمع، هذا ما أريدك أن تتذكره**: لا يُتوقع منك أن تصبح خبيرًا في البرمجة بين ليلة وضحاها! الآن، أنت فقط تتعرف على هذا العالم الجديد الرائع الذي ستصبح جزءًا منه. خذ وقتك، استمتع بالرحلة، وتذكر – كل مطور تعجب به كان يجلس في مكانك تمامًا، يشعر بالحماس وربما قليلًا من الارتباك. هذا طبيعي تمامًا، ويعني أنك تسير في الطريق الصحيح. ## المهمة -[قراءة الوثائق](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **تلميح صغير لمهمتك**: سأكون سعيدًا جدًا برؤية أنك تستكشف بعض الأدوات التي لم نتحدث عنها بعد! تجاوز المحررات، المتصفحات، وأدوات سطر الأوامر التي تحدثنا عنها – هناك عالم مذهل من أدوات التطوير الرائعة ينتظر أن يتم اكتشافه. ابحث عن الأدوات التي يتم تحديثها بانتظام ولديها مجتمعات نشطة وداعمة (عادةً ما تكون هذه الأدوات لديها أفضل الشروحات وأكثر الأشخاص دعمًا عندما تواجه مشكلة وتحتاج إلى يد مساعدة ودية). +> 💡 **دفعة صغيرة لمهمتك**: سأكون سعيدًا جدًا إذا استكشفت بعض الأدوات التي لم نتطرق إليها بعد! تخطَ المحررات، والمتصفحات، وأدوات سطر الأوامر التي تحدثنا عنها بالفعل – هناك عالم هائل من أدوات التطوير الرائعة في انتظارك لاكتشافها. ابحث عن تلك التي تتم صيانتها بفاعلية وتتمتع بمجتمعات نابضة بالحياة ومساعدة (هذه عادةً ما تحتوي على أفضل الدروس وأكثر الأشخاص دعمًا عندما تعلق وتحتاج إلى يد صديقة). --- ## 🚀 جدول رحلتك البرمجية -### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة** -- [ ] ضع إشارة مرجعية على مواقع 2-3 لغات برمجة أثارت اهتمامك -- [ ] قم بتنزيل Visual Studio Code إذا لم تقم بذلك بالفعل -- [ ] افتح أدوات المطور في متصفحك (F12) وانقر هنا وهناك على أي موقع -- [ ] انضم إلى مجتمع برمجي واحد (Dev.to، Reddit r/webdev، أو Stack Overflow) - -### ⏰ **ما يمكنك إنجازه خلال الساعة القادمة** -- [ ] أكمل اختبار ما بعد الدرس وفكر في إجاباتك -- [ ] قم بإعداد VS Code مع إضافة GitHub Copilot -- [ ] جرب مثال "Hello World" في لغتين برمجيتين مختلفتين عبر الإنترنت -- [ ] شاهد فيديو "يوم في حياة مطور" على YouTube -- [ ] ابدأ تحقيقك في لغات البرمجة (من التحدي) - -### 📅 **مغامرتك لمدة أسبوع** -- [ ] أكمل المهمة واستكشف 3 أدوات تطوير جديدة -- [ ] تابع 5 مطورين أو حسابات برمجية على وسائل التواصل الاجتماعي -- [ ] حاول بناء شيء صغير على CodePen أو Replit (حتى لو كان مجرد "مرحبًا، [اسمك]!") -- [ ] اقرأ منشور مدونة لمطور عن رحلته البرمجية -- [ ] انضم إلى لقاء افتراضي أو شاهد حديثًا عن البرمجة -- [ ] ابدأ تعلم اللغة التي اخترتها من خلال الدروس عبر الإنترنت - -### 🗓️ **تحولك خلال شهر** -- [ ] قم ببناء أول مشروع صغير لك (حتى لو كان مجرد صفحة ويب بسيطة!) -- [ ] ساهم في مشروع مفتوح المصدر (ابدأ بإصلاحات الوثائق) -- [ ] قم بتوجيه شخص بدأ للتو رحلته البرمجية -- [ ] أنشئ موقع محفظة المطور الخاص بك -- [ ] تواصل مع مجتمعات المطورين المحلية أو مجموعات الدراسة -- [ ] ابدأ التخطيط لمرحلة التعلم التالية - -### 🎯 **التأمل النهائي** - -**قبل أن تنتقل، خذ لحظة للاحتفال:** -- ما الشيء الذي أثار حماسك بشأن البرمجة اليوم؟ -- ما الأداة أو المفهوم الذي تريد استكشافه أولاً؟ -- كيف تشعر بشأن بدء رحلتك البرمجية؟ -- ما السؤال الذي ترغب في طرحه على مطور الآن؟ +### ⚡ **ما يمكنك فعله في الدقائق الخمس القادمة** +- [ ] احفظ في المفضلة مواقع 2-3 لغات برمجة لفتت انتباهك +- [ ] حمّل Visual Studio Code إذا لم تفعل ذلك بعد +- [ ] افتح أدوات المطور في متصفحك (F12) وانقر في أي موقع إلكتروني +- [ ] انضم إلى مجتمع برمجة واحد (Dev.to، Reddit r/webdev، أو Stack Overflow) + +### ⏰ **ما يمكنك تحقيقه خلال هذه الساعة** +- [ ] أكمل اختبار ما بعد الدرس وتأمل في إجاباتك +- [ ] جهز VS Code مع إضافة GitHub Copilot +- [ ] جرّب مثال "مرحبًا بالعالم" بلغتين برمجيتين مختلفتين أونلاين +- [ ] شاهد فيديو "يوم في حياة مطور" على يوتيوب +- [ ] ابدأ في عمل تحقيقك الخاص حول لغات البرمجة (من التحدي) + +### 📅 **مغامرتك التي تستمر أسبوعًا** +- [ ] أتمم المهمة واستكشف 3 أدوات تطوير جديدة +- [ ] تابع 5 مطورين أو حسابات برمجة على وسائل التواصل الاجتماعي +- [ ] جرّب بناء شيء صغير في CodePen أو Replit (حتى لو كان مجرد "مرحبًا، [اسمك]!") +- [ ] اقرأ تدوينة مطور واحدة عن رحلة برمجية لشخص ما +- [ ] انضم إلى لقاء افتراضي أو شاهد محاضرة برمجية +- [ ] ابدأ تعلم لغتك المختارة عبر الدروس الإلكترونية + +### 🗓️ **تحولك الذي يستمر شهرًا** +- [ ] ابني مشروعك الصغير الأول (حتى صفحة ويب بسيطة تُحسب!) +- [ ] ساهم في مشروع مفتوح المصدر (ابدأ بإصلاح التوثيق) +- [ ] علم شخصًا بدأ رحلته البرمجية للتو +- [ ] أنشئ موقع ملفك الشخصي كمطور +- [ ] تواصل مع مجتمعات مطورين محلية أو مجموعات دراسة +- [ ] ابدأ تخطيط هدفك التعليمي التالي + +### 🎯 **تقييم التأمل النهائي** + +**قبل أن تتابع، خذ لحظة للاحتفال:** +- ما هو الشيء الذي أثار حماسك في البرمجة اليوم؟ +- أي أداة أو مفهوم ترغب في استكشافه أولًا؟ +- كيف تشعر حيال بدء هذه الرحلة البرمجية؟ +- ما السؤال الذي تود طرحه على مطور الآن؟ ```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 اليوم + Curious: 3: أنت + Overwhelmed: 4: أنت + Excited: 5: أنت + section هذا الأسبوع + Exploring: 4: أنت + Learning: 5: أنت + Connecting: 4: أنت + section الشهر القادم + Building: 5: أنت + Confident: 5: أنت + Helping Others: 5: أنت ``` - -> 🌟 **تذكر**: كل خبير كان يومًا ما مبتدئًا. كل مطور كبير شعر تمامًا كما تشعر الآن – بالحماس، وربما قليلًا من الارتباك، وبالتأكيد فضوليًا بشأن ما هو ممكن. أنت في صحبة رائعة، وهذه الرحلة ستكون مذهلة. مرحبًا بك في عالم البرمجة الرائع! 🎉 +> 🌟 **تذكّر**: كل خبير كان مبتدئًا يومًا ما. كل مطور كبير شعر بنفس شعورك الآن – متحمس، وربما مرتبك قليلاً، وبالتأكيد فضولي حول ما هو ممكن. أنت في صحبة رائعة، وهذه الرحلة ستكون مذهلة. مرحبًا بك في العالم الرائع للبرمجة! 🎉 --- -**إخلاء المسؤولية**: -تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة. \ No newline at end of file + +**تنويه**: +تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى الانتباه إلى أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي والمعتمد. للمعلومات الهامة أو الحرجة، يُنصح بالاعتماد على الترجمة الاحترافية البشرية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ناتج عن استخدام هذه الترجمة. + \ No newline at end of file diff --git a/translations/ar/AGENTS.md b/translations/ar/AGENTS.md index 244b7cd08..16098058d 100644 --- a/translations/ar/AGENTS.md +++ b/translations/ar/AGENTS.md @@ -2,27 +2,27 @@ ## نظرة عامة على المشروع -هذا مستودع منهج تعليمي لتدريس أساسيات تطوير الويب للمبتدئين. المنهج هو دورة شاملة لمدة 12 أسبوعًا تم تطويرها بواسطة Microsoft Cloud Advocates، ويحتوي على 24 درسًا عمليًا تغطي JavaScript وCSS وHTML. +هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا طورتها Microsoft Cloud Advocates، تشمل 24 درسًا عمليًا تغطي JavaScript و CSS و HTML. ### المكونات الرئيسية -- **المحتوى التعليمي**: 24 درسًا منظمين في وحدات تعتمد على المشاريع -- **مشاريع عملية**: تيراريوم، لعبة الكتابة، امتداد المتصفح، لعبة الفضاء، تطبيق البنك، محرر الشيفرة، ومساعد الدردشة بالذكاء الاصطناعي -- **اختبارات تفاعلية**: 48 اختبارًا يحتوي كل منها على 3 أسئلة (تقييمات قبل/بعد الدرس) -- **دعم متعدد اللغات**: ترجمات مؤتمتة لأكثر من 50 لغة عبر GitHub Actions -- **التقنيات**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (لمشاريع الذكاء الاصطناعي) +- **المحتوى التعليمي**: 24 درسًا منظمًا في وحدات تعتمد على المشاريع +- **مشاريع عملية**: Terrarium, لعبة الطباعة، امتداد المتصفح، لعبة الفضاء، تطبيق مصرفي، محرر كود، ومساعد دردشة ذكي +- **اختبارات تفاعلية**: 48 اختبارًا يحتوي كل منها على 3 أسئلة (تقييمات قبل وبعد الدرس) +- **دعم متعدد اللغات**: ترجمات آلية لأكثر من 50 لغة عبر 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,13 +31,13 @@ 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 dev # ابدأ خادم التطوير +npm run build # بناء للإنتاج npm run lint # تشغيل ESLint ``` @@ -56,7 +56,7 @@ npm run format # التنسيق باستخدام Prettier ```bash cd 5-browser-extension/solution npm install -# اتبع تعليمات تحميل الامتدادات الخاصة بالمتصفح +# اتبع تعليمات تحميل الإضافات الخاصة بالمتصفح ``` ### مشاريع لعبة الفضاء @@ -64,128 +64,128 @@ npm install ```bash cd 6-space-game/solution npm install -# افتح index.html في المتصفح أو استخدم الخادم المباشر +# افتح index.html في المتصفح أو استخدم Live Server ``` -### مشروع الدردشة (خلفية Python) +### مشروع الدردشة (باك إند بايثون) ```bash cd 9-chat-project/solution/backend/python pip install openai -# تعيين متغير بيئة GITHUB_TOKEN +# تعيين متغير البيئة GITHUB_TOKEN python api.py ``` -## سير عمل التطوير +## سير العمل التطويري -### للمساهمين بالمحتوى +### للمساهمين في المحتوى -1. **انسخ المستودع إلى حساب GitHub الخاص بك (Fork)** -2. **استنسخ نسخة فورك محليًا** -3. **أنشئ فرعًا جديدًا** لإجراء التغييرات -4. اجري تغييرات على محتوى الدروس أو أمثلة الشيفرة -5. اختبر أي تغييرات في مجلدات المشاريع ذات الصلة -6. قدم طلبات سحب (Pull Requests) وفقًا لإرشادات المساهمة +1. **فرع المستودع** إلى حسابك على GitHub +2. **نسخ الفرع** محليًا +3. **إنشاء فرع جديد** للتعديلات التي ستجريها +4. أجرِ التعديلات على محتوى الدرس أو أمثلة الكود +5. اختبر تغييرات الكود في مجلدات المشاريع ذات الصلة +6. أرسل طلبات السحب وفقًا لإرشادات المساهمة ### للمتعلمين -1. انسخ أو استنسخ المستودع -2. انتقل إلى مجلدات الدروس بترتيبها +1. فرع أو استنسخ المستودع +2. انتقل تدريجيًا إلى مجلدات الدروس 3. اقرأ ملفات README لكل درس -4. أكمل اختبارات قبل الدرس على https://ff-quizzes.netlify.app/web/ -5. اعمل على أمثلة الشيفرة في مجلدات الدروس +4. أكمل الاختبارات قبل الدرس على https://ff-quizzes.netlify.app/web/ +5. تابع أمثلة الكود في مجلدات الدروس 6. أكمل الواجبات والتحديات -7. خذ اختبارات ما بعد الدرس +7. خُذ اختبارات ما بعد الدرس ### التطوير الحي -- **التوثيق**: شغل `docsify serve` من جذر المشروع (المنفذ 3000) -- **تطبيق الاختبار**: شغل `npm run dev` في مجلد quiz-app -- **المشاريع**: استخدم امتداد VS Code Live Server لمشاريع HTML -- **مشاريع API**: شغل `npm start` في مجلدات API المعنية +- **التوثيق**: شغّل الأمر `docsify serve` في المسار الجذري (المنفذ 3000) +- **تطبيق الاختبار**: شغّل `npm run dev` في مجلد quiz-app +- **المشاريع**: استخدم إضافة Live Server في VS Code لمشاريع HTML +- **مشاريع API**: شغّل `npm start` في مجلدات API المعنية ## تعليمات الاختبار -### اختبار تطبيق الاختبارات +### اختبار تطبيق الاختبار ```bash cd quiz-app -npm run lint # التحقق من وجود مشاكل في نمط الكود -npm run build # التحقق من نجاح البناء +npm run lint # التحقق من مشاكل نمط الكود +npm run build # التأكد من نجاح الإنشاء ``` ### اختبار API البنك ```bash cd 7-bank-project/api -npm run lint # تحقق من مشكلات نمط الكود -node server.js # تحقق من بدء الخادم بدون أخطاء +npm run lint # التحقق من مشاكل نمط الكود +node server.js # التحقق من بدء الخادم بدون أخطاء ``` -### منهجية الاختبار العامة +### نهج الاختبار العام -- هذا مستودع تعليمي بدون اختبارات مؤتمتة شاملة -- الاختبارات اليدوية تركز على: - - تشغيل أمثلة الشيفرة بدون أخطاء - - عمل الروابط في التوثيق بشكل صحيح - - اكتمال بناء المشاريع بنجاح - - اتباع الأمثلة لأفضل الممارسات +- هذا مستودع تعليمي بدون اختبارات آلية شاملة +- الاختبار اليدوي يركز على: + - تشغيل أمثلة الكود بدون أخطاء + - تأكد من عمل الروابط في التوثيق بشكل صحيح + - اكتمال بناء المشروع بنجاح + - اتباع أمثلة الكود لأفضل الممارسات -### فحوصات ما قبل الإرسال +### الفحوصات قبل الإرسال -- شغل `npm run lint` في المجلدات التي تحتوي package.json -- تحقق من صلاحية روابط Markdown -- اختبر أمثلة الشيفرة في المتصفح أو Node.js -- تأكد أن الترجمات تحافظ على البنية الصحيحة +- شغّل `npm run lint` في المجلدات التي تحوي package.json +- تحقق من صحة روابط markdown +- اختبر أمثلة الكود في المتصفح أو Node.js +- تأكد من أن الترجمات تحافظ على الهيكل الصحيح -## إرشادات نمط الشيفرة +## إرشادات نمط الكود ### جافا سكريبت -- استخدم بناء جملة ES6+ الحديثة -- اتبع إعدادات ESLint القياسية المقدمة في المشاريع -- استخدم أسماء متغيرات ودوال ذات معنى للتعليم -- أضف تعليقات توضح المفاهيم للمتعلمين -- نسق الشيفرة باستخدام Prettier حيثما كان مفعلاً +- استخدم صياغة ES6+ الحديثة +- اتبع تكوينات ESLint القياسية المقدمة في المشاريع +- استخدم أسماء متغيرات ودوال ذات معنى لتعزيز وضوح التعليم +- أضف تعليقات تشرح المفاهيم للمتعلمين +- نسق باستخدام Prettier حيثما تم التكوين -### HTML / CSS +### HTML/CSS -- عناصر HTML5 الدلالية -- مبادئ التصميم المستجيب -- قواعد واضحة لتسمية الأصناف (الكلاسات) -- تعليقات تفصيلية لتقنيات CSS للمتعلمين +- استخدم عناصر HTML5 الدلالية +- مبادئ التصميم المتجاوب +- تسميات واضحة للفئات (class) +- تعليقات تشرح تقنيات CSS للمتعلمين ### بايثون -- إرشادات نمط PEP 8 -- أمثلة شيفرة واضحة وتعليمية -- تعليمات النوع حيث تفيد في التعلم +- اتبع إرشادات نمط PEP 8 +- أمثلة كود واضحة وتعليمية +- استخدم تنبيهات النوع (Type hints) إن كان مفيدًا للتعلم ### توثيق Markdown -- تسلسل واضح للرؤوس -- كتل الشيفرة مع تحديد لغة البرمجة +- تسلسل واضح للعناوين +- كتل كود مع تحديد اللغة - روابط لموارد إضافية -- لقطات شاشة وصور في مجلد `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) -تم تكوين تطبيق الاختبارات للنشر على Azure Static Web Apps: +تم تكوين quiz-app للنشر على Azure Static Web Apps: ```bash cd quiz-app npm run build # ينشئ مجلد dist/ -# ينشر عبر سير عمل GitHub Actions عند الدفع إلى الفرع الرئيسي +# ينفذ النشر عبر سير عمل GitHub Actions عند الدفع إلى الفرع الرئيسي ``` تكوين Azure Static Web Apps: @@ -193,11 +193,11 @@ npm run build # ينشئ مجلد dist/ - **موقع المخرجات**: `dist` - **سير العمل**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### إنشاء ملف PDF للتوثيق +### توليد ملف PDF للتوثيق ```bash npm install # تثبيت docsify-to-pdf -npm run convert # إنشاء ملف PDF من مستندات.docs +npm run convert # إنشاء ملف PDF من المستندات ``` ### توثيق Docsify @@ -207,76 +207,76 @@ npm install -g docsify-cli # تثبيت Docsify على مستوى النظا docsify serve # الخادم على localhost:3000 ``` -### بناء خاص بالمشروع +### بناء خاص بكل مشروع قد يحتوي كل مجلد مشروع على عملية بناء خاصة به: -- مشاريع Vue: `npm run build` لإنشاء الحزم الإنتاجية -- مشاريع ثابتة: بدون خطوة بناء، قدّم الملفات مباشرة +- مشاريع Vue: `npm run build` لإنشاء الحزم للإنتاج +- المشاريع الثابتة: لا توجد خطوة بناء، تقديم الملفات مباشرة -## إرشادات طلب السحب +## إرشادات طلبات السحب ### صيغة العنوان -استخدم عناوين واضحة وواصفة توضح مجال التغيير: -- `[Quiz-app] إضافة اختبار جديد للدرس X` -- `[Lesson-3] إصلاح خطأ مطبعي في مشروع التيراريوم` -- `[Translation] إضافة الترجمة الإسبانية للدرس 5` -- `[Docs] تحديث تعليمات الإعداد` +استخدم عناوين واضحة وواصفة تشير إلى مجال التغيير: +- `[Quiz-app] أضف اختبارًا جديدًا للدرس X` +- `[Lesson-3] أصلح خطأ إملائي في مشروع Terrarium` +- `[Translation] أضف ترجمة إسبانية للدرس 5` +- `[Docs] حدث تعليمات الإعداد` ### الفحوصات المطلوبة -قبل تقديم طلب السحب: +قبل إرسال طلب السحب: -1. **جودة الشيفرة**: - - شغل `npm run lint` في مجلدات المشاريع المتأثرة - - أصلح كافة الأخطاء والتحذيرات +1. **جودة الكود**: + - شغّل `npm run lint` في مجلدات المشاريع المتأثرة + - أصلح جميع أخطاء التحليل التحذيرية 2. **التحقق من البناء**: - - شغل `npm run build` إذا كان ذلك ممكنًا + - شغّل `npm run build` إذا كان ذلك مطبقًا - تأكد من عدم وجود أخطاء في البناء 3. **التحقق من الروابط**: - - اختبر جميع روابط Markdown + - اختبر جميع روابط markdown - تحقق من عمل مراجع الصور 4. **مراجعة المحتوى**: - - تدقيق تهجئة ونحو - - تأكد من صحة الأمثلة التعليمية للكود - - تحقق من أن الترجمات تحافظ على المعنى الأصلي + - تدقيق إملائي ونحوي + - تأكد من صحة أمثلة الكود وتعليميتها + - تحقق من المحافظة على المعنى الأصلي في الترجمات ### متطلبات المساهمة -- الموافقة على اتفاقية ترخيص المساهمة من Microsoft (التحقق آليًا في أول طلب سحب) -- اتباع [مدونة السلوك لمصدر Microsoft المفتوح](https://opensource.microsoft.com/codeofconduct/) -- اطلع على [CONTRIBUTING.md](./CONTRIBUTING.md) للإرشادات المفصلة -- إرفاق أرقام القضايا في وصف طلب السحب إن وجدت +- الموافقة على اتفاقية ترخيص المساهمة من Microsoft (فحص تلقائي في أول طلب سحب) +- الالتزام ب[مدونة السلوك المفتوحة لمايكروسوفت](https://opensource.microsoft.com/codeofconduct/) +- راجع [CONTRIBUTING.md](./CONTRIBUTING.md) للإرشادات التفصيلية +- أشر إلى أرقام القضايا في وصف طلب السحب إن وجد ### عملية المراجعة -- يتم مراجعة طلبات السحب من قبل القائمين على الصيانة والمجتمع -- تُعطى الأولوية لوضوح المحتوى التعليمي -- يجب أن تتبع أمثلة الشيفرة أفضل الممارسات الحالية -- تُراجع الترجمات للدقة والملاءمة الثقافية +- مراجعة طلبات السحب من قبل الصيانة والمجتمع +- الأولوية لوضوح التعليم +- يجب أن تتبع أمثلة الكود أفضل الممارسات الحالية +- مراجعة الترجمات للدقة والملاءمة الثقافية ## نظام الترجمة -### الترجمة المؤتمتة +### الترجمة الآلية -- تستخدم GitHub Actions مع سير العمل co-op-translator -- تترجم تلقائيًا إلى أكثر من 50 لغة -- الملفات المصدرية في الدلائل الرئيسية +- يستخدم GitHub Actions مع سير العمل co-op-translator +- يترجم إلى أكثر من 50 لغة تلقائيًا +- الملفات المصدر في الدلائل الرئيسية - الملفات المترجمة في مجلدات `translations/{language-code}/` -### إضافة تحسينات الترجمة يدويًا +### إضافة تحسينات الترجمة اليدوية 1. حدد موقع الملف في `translations/{language-code}/` -2. أجرِ تحسينات مع الحفاظ على البنية -3. تأكد من استمرار عمل أمثلة الشيفرة +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 يلبي الحد الأدنى (node >=10) -- تحقق إذا كان المنفذ قيد الاستخدام بالفعل -- تأكد من تثبيت جميع التبعيات عبر `npm install` +**عدم بدء خادم API**: +- تحقق من أن نسخة Node.js تفي بالحد الأدنى (node >=10) +- تحقق إذا كان المنفذ مستخدمًا بالفعل +- تأكد من تثبيت جميع التبعيات باستخدام `npm install` -**امتداد المتصفح لا يتم تحميله**: -- تحقق من تنسيق ملف manifest.json بشكل صحيح -- راجع وحدة تحكم المتصفح لأي أخطاء +**امتداد المتصفح لا يعمل**: +- تحقق من صحة صياغة manifest.json +- تحقق من وحدة تحكم المتصفح للأخطاء - اتبع تعليمات تثبيت الامتداد الخاصة بالمتصفح **مشاكل مشروع الدردشة بايثون**: - تأكد من تثبيت حزمة OpenAI: `pip install openai` - تحقق من تعيين متغير البيئة GITHUB_TOKEN -- تحقق من أذونات الوصول إلى GitHub Models +- تحقق من أذونات الوصول لنماذج GitHub **عدم تقديم Docsify للتوثيق**: - ثبت docsify-cli عالميًا: `npm install -g docsify-cli` -- شغّل من دليل الجذر للمستودع -- تحقق من وجود `docs/_sidebar.md` +- شغّل الأمر من الدليل الجذري للمستودع +- تأكد من وجود `docs/_sidebar.md` ### نصائح بيئة التطوير -- استخدم VS Code مع امتداد Live Server لمشاريع HTML -- ثبت امتدادات ESLint وPrettier لتنسيق متناسق -- استخدم أدوات مطور المتصفح لتصحيح JavaScript -- لمشاريع Vue، ثبت امتداد Vue DevTools للمتصفح +- استخدم VS Code مع إضافة Live Server لمشاريع HTML +- ثبت إضافات ESLint و Prettier لتنسيق موحد +- استخدم أدوات المتصفح لتصحيح جافا سكريبت +- لمشاريع Vue، ثبت إضافة Vue DevTools للمتصفح ### اعتبارات الأداء -- العدد الكبير لملفات الترجمة (50+ لغة) يجعل الاستنساخ الكامل ضخمًا -- استخدم استنساخ سطحي إذا كنت تعمل على المحتوى فقط: `git clone --depth 1` +- عدد كبير من الملفات المترجمة (أكثر من 50 لغة) يجعل النسخ الكاملة كبيرًا +- استخدم استنساخ عميق ضحل عند العمل على المحتوى فقط: `git clone --depth 1` - استبعد الترجمات من عمليات البحث عند العمل على المحتوى الإنجليزي -- قد تكون عمليات البناء بطيئة في التشغيل الأول (npm install، بناء Vite) +- عمليات البناء قد تكون بطيئة في أول تشغيل (npm install، بناء Vite) ## اعتبارات الأمان -### المتغيرات البيئية +### متغيرات البيئة -- لا يجب أبدًا حفظ مفاتيح API في المستودع +- يجب ألا يتم الالتزام بمفاتيح API في المستودع - استخدم ملفات `.env` (مضمّنة في `.gitignore`) -- وضح المتغيرات البيئية المطلوبة في ملفات README الخاصة بالمشاريع +- وثّق متغيرات البيئة المطلوبة في ملفات README الخاصة بالمشاريع ### مشاريع بايثون - استخدم بيئات افتراضية: `python -m venv venv` - حافظ على تحديث التبعيات -- يجب أن يكون لرموز GitHub الأذونات الدنيا المطلوبة +- يجب أن تمتلك رموز GitHub صلاحيات قليلة قدر الإمكان -### الوصول إلى GitHub Models +### وصول نماذج GitHub -- تُطلب رموز وصول شخصية (PAT) لـ GitHub Models -- يجب تخزين الرموز كمتغيرات بيئية -- لا تقم بحفظ الرموز أو بيانات الاعتماد في المستودع +- يتطلب الوصول رموز وصول شخصية (PAT) +- يجب تخزين الرموز كمتغيرات بيئة +- لا تلتزم الرموز أو بيانات الاعتماد في المستودع ## ملاحظات إضافية ### الجمهور المستهدف -- مبتدئون كاملون في تطوير الويب -- طلاب ومتعلّمون ذاتيون -- مدرسون يستخدمون المنهج في الفصول الدراسية -- المحتوى مصمم لسهولة الوصول وبناء المهارات تدريجيًا +- مبتدئون تامون في تطوير الويب +- الطلاب والتعلم الذاتي +- المعلمون الذين يستخدمون المنهج داخل الصفوف +- المحتوى مصمم للوصول السهل وبناء المهارات تدريجيًا -### فلسفة التعليم +### الفلسفة التعليمية -- نهج التعلم المعتمد على المشاريع -- فحوصات معرفية متكررة (اختبارات) -- تمارين برمجية عملية -- أمثلة تطبيقية من الواقع -- التركيز على الأساسيات قبل الأُطُر +- نهج التعلم القائم على المشاريع +- اختبارات معرفة متكررة (اختبارات قصيرة) +- تمارين عملية في البرمجة +- أمثلة تطبيقية من العالم الحقيقي +- التركيز على الأساسيات قبل الأُطُر (frameworks) ### صيانة المستودع - مجتمع نشط من المتعلمين والمساهمين - تحديثات منتظمة للتبعيات والمحتوى -- مراقبة القضايا والمناقشات بواسطة القائمين على الصيانة +- مراقبة القضايا والمناقشات من قِبل القائمين على الصيانة - تحديثات الترجمة مؤتمتة عبر 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) موصى به للمتعلمين -- دورات إضافية: الذكاء الاصطناعي التوليدي، علوم البيانات، التعلم الآلي، منهجيات إنترنت الأشياء متاحة +- دورات إضافية: الذكاء الاصطناعي التوليدي، علم البيانات، التعلم الآلي، مناهج إنترنت الأشياء متاحة ### العمل مع مشاريع محددة -للحصول على تعليمات مفصلة حول المشاريع الفردية، راجع ملفات README في: -- `quiz-app/README.md` - تطبيق الاختبارات بـ Vue 3 -- `7-bank-project/README.md` - تطبيق البنك مع المصادقة -- `5-browser-extension/README.md` - تطوير امتداد المتصفح +للتعليمات التفصيلية عن المشاريع الفردية، راجع ملفات 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` - مشروع مساعد الدردشة بالذكاء الاصطناعي +- `9-chat-project/README.md` - مشروع مساعد دردشة ذكي -### هيكل المونوريبو +### هيكل المونوريبوزيتوري -على الرغم من عدم كونه مونوريبو تقليدي، يحتوي هذا المستودع على مشاريع مستقلة متعددة: -- كل درس مستقل بذاته +بينما ليس مونوريبوزيتوري تقليدي، يحتوي هذا المستودع على مشاريع مستقلة متعددة: +- كل درس مستقل ذاتيًا - المشاريع لا تشترك في التبعيات -- العمل على مشاريع فردية دون التأثير على الأخرى -- استنساخ المستودع الكامل لتجربة المنهج بالكامل +- العمل على المشاريع الفردية بدون التأثير على الأخرى +- استنسخ المستودع كاملًا للحصول على تجربة المنهج الكامل --- -**إخلاء مسؤولية**: -تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [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/ar/README.md b/translations/ar/README.md index 8b207284e..5d122bf29 100644 --- a/translations/ar/README.md +++ b/translations/ar/README.md @@ -12,257 +12,268 @@ # تطوير الويب للمبتدئين - منهج دراسي -تعلم أساسيات تطوير الويب من خلال دورتنا الشاملة التي تستمر 12 أسبوعًا من قبل دعاة مايكروسوفت السحابيين. كل واحدة من الدروس الـ 24 تغوص في JavaScript و CSS و HTML عبر مشاريع عملية مثل التيراريوم، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات والنقاشات والتكليفات العملية. حسّن مهاراتك وفعّل استيعابك للمعرفة باستخدام طريقتنا التعليمية القائمة على المشاريع. ابدأ رحلة الترميز الخاصة بك اليوم! +تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تستمر 12 أسبوعًا من قِبل دعاة السحابة في مايكروسوفت. كل درس من الدروس الـ 24 يغوص في JavaScript و CSS و HTML من خلال مشاريع تطبيقية مثل التيراريومات، امتدادات المتصفح، وألعاب الفضاء. شارك في اختبارات، مناقشات، وواجبات عملية. حسن مهاراتك وعزز احتفاظك بالمعرفة من خلال منهجنا الفعال المبني على المشاريع. ابدأ رحلتك في الترميز اليوم! -انضم إلى مجتمع Azure AI Foundry على Discord +انضم إلى مجتمع 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) -2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**انضم إلى Azure AI Foundry على Discord والتقِ بالخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4) +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) ### 🌐 دعم متعدد اللغات -#### مدعوم عبر GitHub Action (مؤتمت ومُحدث دائمًا) +#### مدعوم عبر إجراء GitHub (آلي ومحدث دائمًا) -[Arabic](./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](../ur/README.md) | [Vietnamese](../vi/README.md) +[العربية](./README.md) | [البنغالية](../bn/README.md) | [البلغارية](../bg/README.md) | [البورمية (ميانمار)](../my/README.md) | [الصينية (المبسطة)](../zh-CN/README.md) | [الصينية (التقليدية، هونغ كونغ)](../zh-HK/README.md) | [الصينية (التقليدية، ماكاو)](../zh-MO/README.md) | [الصينية (التقليدية، تايوان)](../zh-TW/README.md) | [الكرواتية](../hr/README.md) | [التشيكية](../cs/README.md) | [الدانماركية](../da/README.md) | [الهولندية](../nl/README.md) | [الإستونية](../et/README.md) | [الفنلندية](../fi/README.md) | [الفرنسية](../fr/README.md) | [الألمانية](../de/README.md) | [اليونانية](../el/README.md) | [العبرية](../he/README.md) | [الهندية](../hi/README.md) | [الهنغارية](../hu/README.md) | [الإندونيسية](../id/README.md) | [الإيطالية](../it/README.md) | [اليابانية](../ja/README.md) | [الكانتادية](../kn/README.md) | [الكورية](../ko/README.md) | [الليتوانية](../lt/README.md) | [الماليزية](../ms/README.md) | [المالايالامية](../ml/README.md) | [الماراثية](../mr/README.md) | [النيبالية](../ne/README.md) | [النيجيرية بيدجن](../pcm/README.md) | [النرويجية](../no/README.md) | [الفارسية (اللغة الفارسية)](../fa/README.md) | [البولندية](../pl/README.md) | [البرتغالية (البرازيل)](../pt-BR/README.md) | [البرتغالية (البرتغال)](../pt-PT/README.md) | [البنجابية (غورموخي)](../pa/README.md) | [الرومانية](../ro/README.md) | [الروسية](../ru/README.md) | [الصربية (السيريلية)](../sr/README.md) | [السلوفاكية](../sk/README.md) | [السلوفينية](../sl/README.md) | [الإسبانية](../es/README.md) | [السواحيلية](../sw/README.md) | [السويدية](../sv/README.md) | [التاغالوغ (الفلبينية)](../tl/README.md) | [التاميلية](../ta/README.md) | [التيلجو](../te/README.md) | [التايلاندية](../th/README.md) | [التركية](../tr/README.md) | [الأوكرانية](../uk/README.md) | [الأردية](../ur/README.md) | [الفيتنامية](../vi/README.md) -> **تفضل الاستنساخ محليًا؟** - -> يحتوي هذا المستودع على أكثر من 50 ترجمة للغات مما يزيد بشكل كبير من حجم التنزيل. لاستنساخ بدون الترجمات، استخدم sparse checkout: +> **تفضل النسخ محليًا؟** +> +> يحتوي هذا المستودع على أكثر من 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) +[![افتح في 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 🚀" في معظم الفصول. إنه تحدٍ جديد لك لتنجزه باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع Agent من قبل، هو قادر ليس فقط على إنشاء النصوص بل يمكنه أيضًا إنشاء وتحرير الملفات، تشغيل الأوامر والمزيد. -### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_ +### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_ -تم إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تفقده [المشروع](./9-chat-project/README.md) +تمت إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تحقق منه [المشروع](./9-chat-project/README.md) -### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إصداره للتو +### 📣 إعلان - _منهج جديد_ عن الذكاء الاصطناعي التوليدي لجافا سكريبت تم إصداره للتو -لا تفوت منهج الذكاء الاصطناعي التوليدي الجديد! +لا تفوت منهجنا الجديد عن الذكاء الاصطناعي التوليدي! -زر [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/ar/background.148a8d43afde5730.webp) - دروس تغطي كل شيء من الأساسيات إلى RAG. -- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المصاحب. +- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق. - سرد ممتع وجذاب، ستسافر عبر الزمن! ![character](../../translated_images/ar/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) لمواد دراسية إضافية. +لتطوير تعليمك أكثر، نوصي بشدة باستكشاف [مايكروسوفت ليرن](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 -ضمن نسختك من هذا المستودع التي أنشأتها، انقر على زر **Code** واختر **Open with Codespaces**. سينشئ هذا Codespace جديد لتعمل فيه. +في نسختك من هذا المستودع التي أنشأتها، انقر زر **Code** واختر **Open with Codespaces**. سيُنشئ هذا مساحة عمل جديدة للعمل فيها. ![Codespace](../../translated_images/ar/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) كمحرر نصوص، والذي يحتوي أيضًا على [طرفية (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). - - -1. انسخ المستودع إلى جهازك. يمكنك فعل ذلك بالنقر على زر **Code** ونسخ الرابط: +توصيتنا هي استخدام [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) داخل [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](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وشغّل الأمر التالي، مستبدلاً `` بعنوان URL الذي قمت بنسخه للتو: ```bash git clone ``` -2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **ملف** > **فتح مجلد** واختيار المجلد الذي قمت باستنساخه. +2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي قمت باستنساخه للتو. + -> الإضافات الموصى بها لـ Visual Studio Code: +> التوصيات الخاصة بالامتدادات في 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) - لمساعدتك في كتابة الكود بسرعة أكبر +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك في كتابة الشيفرة بسرعة أكبر -## 📂 تشمل كل درس: +## 📂 كل درس يشمل: -- ملاحظة رسمية اختيارية +- ملاحظات تخطيطية اختيارية - فيديو تكميلي اختياري -- اختبار دافئ قبل الدرس +- اختبار تمهيدي قبل الدرس - درس مكتوب -- للدروس القائمة على المشاريع، أدلة خطوة بخطوة حول كيفية بناء المشروع -- فحوصات معرفية +- للدروس المبنية على المشاريع، إرشادات خطوة بخطوة لبناء المشروع +- اختبار معرفة - تحدي -- قراءة تكميلية +- قراءة تكملية - واجب -- [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/web/) +- [اختبار بعد الدرس](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 | أساسيات JavaScript | أنواع بيانات JavaScript | أساسيات أنواع بيانات JavaScript | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | أساسيات JavaScript | الدوال والطرق | تعلم عن الدوال والطرق لإدارة منطق التطبيق | [الدوال والطرق](./2-js-basics/2-functions-methods/README.md) | Jasmine و Christopher | -| 06 | أساسيات JavaScript | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرارات | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | أساسيات JavaScript | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في التطبيق | بناء الـ 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 | +| 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 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) | إغلاق جافا سكريبت، التلاعب بـ 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 باستخدام متغيرات مخزنة في التخزين المحلي | [واجهات برمجة التطبيقات، النماذج، والتخزين المحلي](./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، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [لعبة الفضاء](./6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشف كيف يمكن للعناصر أن تتحرك باستخدام الإحداثيات الكارتيزية وواجهة برمجة تطبيقات Canvas | [تحريك العناصر](./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 | [المساعدون الذكيون](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعدك الذكي الخاص | [مشروع المساعد الذكي](./9-chat-project/README.md) | Chris | - -## 🏫 المنهجية التعليمية - -تم تصميم منهجنا مع مبادئ تعليمية رئيسية: -* التعلم القائم على المشاريع +| 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 باستخدام المتغيرات المخزنة في التخزين المحلي | [APIs، النماذج، والتخزين المحلي](./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، المستخدمة للرسم على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [لعبة الفضاء](./6-space-game/solution/README.md) | تحريك العناصر حول الشاشة | اكتشف كيف يمكن للعناصر أن تكتسب الحركة باستخدام الإحداثيات الديكارتية وواجهة برمجة Canvas | [تحريك العناصر](./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 | [مساعدي الذكاء الاصطناعي](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعد الذكاء الاصطناعي الخاص بك | [مشروع مساعد الذكاء الاصطناعي](./9-chat-project/README.md) | Chris | + +## 🏫 المنهجية التربوية + +تم تصميم منهجنا الدراسي باستخدام مبدأين تربويين رئيسيين في الاعتبار: +* التعلم المبني على المشاريع * الاختبارات المتكررة -البرنامج يعلم أساسيات JavaScript و HTML و CSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيتمكن الطلاب من اكتساب خبرة عملية من خلال بناء لعبة طباعة، تيراريوم افتراضي، امتداد متصفح صديق للبيئة، لعبة بأسلوب غزاة الفضاء، وتطبيق مصرفي للأعمال. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب. +يقوم البرنامج بتدريس أساسيات JavaScript و HTML و CSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سوف تتاح للطلاب الفرصة لاكتساب خبرة عملية من خلال بناء لعبة طباعة، تيراريوم افتراضي، امتداد متصفح صديق للبيئة، لعبة بأسلوب غزاة الفضاء، وتطبيق بنكي للأعمال. مع نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب. -> 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلّم](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) على منصة Microsoft Learn! -من خلال ضمان تطابق المحتوى مع المشاريع، يصبح التعلم أكثر متعة للطلاب ويزداد تثبيت المفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات 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 للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل اعتماد إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج هي تعلم عن 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/#/). قم بتفريع هذا المستودع، [تثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على الوجهة المحلية الخاصة بك: `localhost:3000`. +## 🧭 الوصول دون اتصال -## 📘 PDF +يمكنك تشغيل هذه الوثائق دون اتصال بالإنترنت باستخدام [Docsify](https://docsify.js.org/#/). قم بتفريع هذا المستودع، [تثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذري لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على جهازك المحلي: `localhost:3000`. +## 📘 PDF يمكن العثور على ملف PDF لجميع الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 دورات أخرى -فريقنا ينتج دورات أخرى! تحقق من: + +يقوم فريقنا بإنتاج دورات أخرى! تحقق من: ### LangChain -[![LangChain4j للمبتدئين](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js للمبتدئين](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain للمبتدئين](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents -[![AZD للمبتدئين](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI للمبتدئين](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP للمبتدئين](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![وكلاء الذكاء الاصطناعي للمبتدئين](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) +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![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) --- ### سلسلة الذكاء الاصطناعي التوليدي -[![الذكاء الاصطناعي التوليدي للمبتدئين](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) -[![الذكاء الاصطناعي التوليدي (.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) -[![الذكاء الاصطناعي التوليدي (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) -[![الذكاء الاصطناعي التوليدي (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) +[![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) +[![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) --- -### التعلم الأساسي -[![تعلم الآلة للمبتدئين](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) -[![علم البيانات للمبتدئين](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) -[![الذكاء الاصطناعي للمبتدئين](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) -[![الأمن السيبراني للمبتدئين](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![تطوير الويب للمبتدئين](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![إنترنت الأشياء للمبتدئين](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![تطوير XR للمبتدئين](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) +### التعليم الأساسي +[![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) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![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) --- -### سلسلة كوبايلوت -[![كوبايلوت للبرمجة الزوجية بالذكاء الاصطناعي](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) -[![كوبايلوت لـ 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) -[![مغامرة كوبايلوت](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) +### سلسلة الكوبيلوت +[![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/de/.co-op-translator.json b/translations/de/.co-op-translator.json index 69d779724..f0afbd2ba 100644 --- a/translations/de/.co-op-translator.json +++ b/translations/de/.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-06T09:24:35+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:37:25+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "de" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T15:46:17+00:00", + "translation_date": "2026-03-06T16:50:26+00:00", "source_file": "AGENTS.md", "language_code": "de" }, @@ -516,8 +516,8 @@ "language_code": "de" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T15:42:19+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:34:03+00:00", "source_file": "README.md", "language_code": "de" }, diff --git a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4701ef1e0..47fed66eb 100644 --- a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,86 +1,85 @@ -# Einführung in Programmiersprachen und moderne Entwickler-Tools +# Einführung in Programmiersprachen und moderne Entwicklerwerkzeuge -Hey du, zukünftiger Entwickler! 👋 Darf ich dir etwas erzählen, das mir jeden einzelnen Tag eine Gänsehaut bereitet? Du bist kurz davor zu entdecken, dass Programmieren nicht nur etwas mit Computern zu tun hat – es geht darum, echte Superkräfte zu besitzen, um deine wildesten Ideen zum Leben zu erwecken! +Hallo, zukünftiger Entwickler! 👋 Darf ich dir etwas erzählen, das mir jeden einzelnen Tag eine Gänsehaut bereitet? Du wirst gleich entdecken, dass Programmieren nicht nur etwas mit Computern zu tun hat – es sind tatsächlich Superkräfte, mit denen du deine wildesten Ideen zum Leben erwecken kannst! -Du kennst diesen Moment, wenn du deine Lieblings-App benutzt und alles einfach perfekt zusammenpasst? Wenn du auf einen Knopf tippst und etwas absolut Magisches passiert, das dich denken lässt: „Wow, wie haben die DAS gemacht?“ Nun, jemand wie du – wahrscheinlich gerade in seinem Lieblingscafé um 2 Uhr morgens mit dem dritten Espresso – hat den Code geschrieben, der diese Magie erschaffen hat. Und hier kommt das, was dir den Kopf sprengen wird: Am Ende dieser Lektion wirst du nicht nur verstehen, wie sie es gemacht haben, sondern du wirst es kaum erwarten können, es selbst auszuprobieren! +Kennst du diesen Moment, wenn du deine Lieblings-App benutzt und einfach alles perfekt zusammenpasst? Wenn du auf einen Button tippst und etwas absolut Magisches passiert, das dich denken lässt: „Wow, wie haben sie das gemacht?“ Nun, genau jemand wie du – wahrscheinlich gerade in seinem Lieblingscafé um 2 Uhr morgens bei seinem dritten Espresso – hat den Code geschrieben, der diese Magie erschaffen hat. Und jetzt kommt das, was dich umhauen wird: Am Ende dieser Lektion wirst du nicht nur verstehen, wie sie das gemacht haben, sondern du wirst es selbst ausprobieren wollen! -Schau mal, ich kann total nachvollziehen, wenn Programmieren gerade einschüchternd wirkt. Als ich angefangen habe, dachte ich ehrlich, man müsse ein Mathegenie sein oder seit fünf Jahren programmieren. Aber weißt du, was meine Sichtweise komplett verändert hat? Programmieren ist genau so, wie eine neue Sprache zu lernen. Man fängt mit „Hallo“ und „Danke“ an, dann bestellt man Kaffee, und ehe man sich versieht, führt man tiefgründige philosophische Gespräche! Nur in diesem Fall sprechen wir mit Computern, und weißt du was? Sie sind die geduldigsten Gesprächspartner, die du je haben wirst – sie richten sich nie nach deinen Fehlern und freuen sich immer darauf, es nochmal zu versuchen! +Hör zu, ich verstehe total, wenn Programmieren im Moment einschüchternd wirkt. Als ich anfing, dachte ich ehrlich, man müsse entweder ein Mathegenie sein oder seit seinem fünften Lebensjahr programmieren. Aber weißt du, was meine Perspektive komplett verändert hat? Programmieren ist genau so, wie eine neue Sprache lernen. Du beginnst mit „Hallo“ und „Danke“, arbeitest dich hoch bis zum Kaffeebestellen, und ehe du dich versiehst, führst du tiefgründige philosophische Gespräche! Nur dass du in diesem Fall mit Computern sprichst, und ganz ehrlich? Die sind die geduldigsten Gesprächspartner, die du je haben wirst – sie beurteilen deine Fehler nie und freuen sich immer, es nochmal zu versuchen! -Heute werden wir die unglaublichen Werkzeuge erkunden, die moderne Webentwicklung nicht nur möglich, sondern richtig süchtig machend machen. Ich spreche von genau denselben Editoren, Browsern und Workflows, die Entwickler bei Netflix, Spotify und deinem Lieblings-Indie-App-Studio jeden einzelnen Tag verwenden. Und hier kommt der Teil, der dich einen Freudentanz machen lässt: Die meisten dieser professionellen, industrieweiten Werkzeuge sind komplett kostenlos! +Heute erkunden wir die unglaublichen Werkzeuge, die moderne Webentwicklung nicht nur möglich machen, sondern richtig süchtig. Ich rede von genau den gleichen Editoren, Browsern und Workflows, die Entwickler bei Netflix, Spotify und deinem liebsten Indie-App-Studio jeden Tag nutzen. Und jetzt kommt der Teil, der dich vor Freude tanzen lässt: Die meisten dieser professionellen, branchenüblichen Tools sind komplett kostenlos! ![Intro Programming](../../../../translated_images/de/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Deine Programmierreise heute + title Deine Programmierreise Heute section Entdecken Was ist Programmierung: 5: You Programmiersprachen: 4: You Werkzeugübersicht: 5: You section Erkunden Code-Editoren: 4: You - Browser & Entwicklertools: 5: You + Browser & DevTools: 5: You Kommandozeile: 3: You section Üben Sprachdetektiv: 4: You Werkzeugerkundung: 5: You - Community-Verbindung: 5: You + Gemeinschaftsverbindung: 5: You ``` -## Lass uns sehen, was du schon weißt! +## Schauen wir mal, was du schon weißt! -Bevor wir in den Spaß eintauchen, bin ich neugierig – was weißt du schon über diese Programmierwelt? Und hör zu, wenn du diese Fragen siehst und denkst: „Ich habe buchstäblich keinen Schimmer von irgendwas“, dann ist das nicht nur okay, das ist perfekt! Das bedeutet, du bist genau am richtigen Ort. Denk an dieses Quiz wie an das Aufwärmen vor einem Workout – wir bereiten nur die Gehirnmuskeln vor! - -[Mach das Pre-Lesson-Quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +Bevor wir in den Spaß starten, interessiert mich: Was weißt du schon über diese Programmierwelt? Und hör zu, falls du dir jetzt denkst „Ich habe tatsächlich keinen Schimmer von alledem“, ist das nicht nur okay, sondern perfekt! Das bedeutet, du bist genau richtig hier. Betrachte dieses Quiz wie das Dehnen vor dem Workout – wir wärmen nur diese Denkmuskeln auf! +[Mach das Pre-Lesson-Quiz](https://ff-quizzes.netlify.app/web/) ## Das Abenteuer, auf das wir uns gemeinsam begeben -Okay, ich bin wirklich voller Vorfreude, was wir heute erkunden werden! Im Ernst, ich wünschte, ich könnte dein Gesicht sehen, wenn einige dieser Konzepte Klick machen. Hier ist die unglaubliche Reise, auf die wir uns begeben: +Okay, ich freue mich wirklich riesig auf das, was wir heute entdecken werden! Ehrlich, ich wünschte, ich könnte dein Gesicht sehen, wenn dir mancher dieser Konzepte „klick“ macht. Das ist die unglaubliche Reise, auf die wir gemeinsam gehen: -- **Was Programmieren eigentlich ist (und warum es das coolste überhaupt ist!)** – Wir werden entdecken, wie Code buchstäblich die unsichtbare Magie ist, die alles um dich herum antreibt, vom Wecker, der irgendwie weiß, dass Montagmorgen ist, bis hin zum Algorithmus, der deine Netflix-Empfehlungen perfekt kuratiert -- **Programmiersprachen und ihre erstaunlichen Persönlichkeiten** – Stell dir vor, du gehst auf eine Party, bei der jede Person ganz andere Superkräfte und Problemlösungsmethoden hat. So ist die Welt der Programmiersprachen, und du wirst es lieben, sie kennenzulernen! -- **Die grundlegenden Bausteine, die digitale Magie möglich machen** – Stell sie dir als das ultimative kreative LEGO-Set vor. Sobald du verstehst, wie diese Teile zusammenpassen, wirst du erkennen, dass du buchstäblich alles bauen kannst, was deine Fantasie träumt -- **Professionelle Werkzeuge, die dir das Gefühl geben, gerade einen Zauberstab in die Hand gelegt bekommen zu haben** – Ich übertreibe nicht – diese Tools lassen dich wirklich fühlen, als hättest du Superkräfte, und das Beste? Es sind genau dieselben, die die Profis verwenden! +- **Was Programmieren eigentlich ist (und warum es das coolste überhaupt ist!)** – Wir werden entdecken, wie Code buchstäblich die unsichtbare Magie ist, die alles um dich herum antreibt, von dem Wecker, der irgendwie weiß, dass Montagmorgen ist, bis zum Algorithmus, der deine Netflix-Empfehlungen perfekt kuratiert +- **Programmiersprachen und ihre fantastischen Persönlichkeiten** – Stell dir vor, du betrittst eine Party, bei der jede Person ganz unterschiedliche Superkräfte und Lösungswege hat. So ist die Welt der Programmiersprachen, und du wirst sie lieben lernen! +- **Die grundlegenden Bausteine, die digitale Magie ermöglichen** – Denk daran wie das ultimative kreative LEGO-Set. Sobald du verstehst, wie diese Teile zusammenpassen, wirst du merken, dass du buchstäblich alles bauen kannst, was deine Fantasie träumen lässt +- **Professionelle Werkzeuge, die dir das Gefühl geben, gerade einen Zauberstab in die Hand bekommen zu haben** – Ich übertreibe nicht – diese Tools werden dich wirklich wie einen Superhelden fühlen lassen, und das Beste? Es sind genau die, die Profis nutzen! -> 💡 **Hier ist das Wichtigste:** Versuch heute nicht einmal, alles auswendig zu lernen! Im Moment sollst du nur das Feuer der Begeisterung spüren, was alles möglich ist. Die Details bleiben ganz natürlich hängen, während wir zusammen üben – so funktioniert echtes Lernen! +> 💡 **Hier ist die Sache**: Versuch nicht heute alles auswendig zu lernen! Im Moment will ich nur, dass du diesen Funken Aufregung spürst, was möglich ist. Die Details wirst du automatisch mit der Zeit lernen – so funktioniert echtes Lernen! -> Du kannst diese Lektion auch auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) machen! +> Du kannst diese Lektion auch auf [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) machen! ## Was genau *ist* eigentlich Programmieren? -Okay, packen wir die Millionen-Dollar-Frage an: Was ist Programmieren wirklich? +Okay, jetzt die Millionen-Dollar-Frage: Was ist Programmieren wirklich? -Ich erzähle dir eine Geschichte, die meine Sicht darauf komplett verändert hat. Letzte Woche habe ich versucht, meiner Mutter zu erklären, wie man unsere neue Smart-TV-Fernbedienung benutzt. Ich ertappte mich dabei zu sagen: „Drück den roten Knopf, aber nicht den großen roten Knopf, den kleinen roten Knopf links... nein, deine andere linke Seite... okay, jetzt halt ihn zwei Sekunden gedrückt, nicht eine, nicht drei...“ Kommt dir das bekannt vor? 😅 +Ich erzähle dir eine Geschichte, die meine Sichtweise komplett verändert hat. Letzte Woche wollte ich meiner Mutter erklären, wie man unsere neue Smart-TV-Fernbedienung benutzt. Ich ertappte mich dabei, Dinge zu sagen wie „Drück den roten Knopf, aber nicht den großen roten Knopf, den kleinen roten Knopf links… nein, dein anderes links… okay, jetzt halt ihn zwei Sekunden gedrückt, nicht eins, nicht drei…“ Kommt dir das bekannt vor? 😅 -Das ist Programmieren! Es ist die Kunst, unglaublich detaillierte, Schritt-für-Schritt-Anweisungen zu geben für etwas, das sehr mächtig ist, aber alles perfekt erklärt bekommen muss. Nur dass du hier nicht deiner Mutter erklärst (die fragen könnte: „Welcher rote Knopf?!“), sondern einem Computer (der genau das macht, was du sagst – auch wenn das, was du gesagt hast, nicht ganz das ist, was du meintest). +Das ist Programmieren! Es ist die Kunst, extrem detaillierte Schritt-für-Schritt-Anweisungen zu geben an etwas, das sehr mächtig ist, aber alles perfekt erklärt bekommen muss. Nur dass du nicht deiner Mutter erklärst (die fragen könnte „Welchen roten Knopf?!“), sondern einem Computer (der genau das tut, was du sagst, auch wenn das nicht genau das war, was du meintest). -Was mich umgehauen hat, als ich das zum ersten Mal gelernt habe: Computer sind im Grunde genommen ziemlich simpel. Sie verstehen buchstäblich nur zwei Dinge – 1 und 0, was im Grunde „ja“ und „nein“ oder „an“ und „aus“ bedeutet. Das war’s! Aber hier wird es magisch – wir müssen nicht in 1en und 0en sprechen, als wären wir in der Matrix. Hier kommen **Programmiersprachen** ins Spiel. Sie sind wie der beste Übersetzer der Welt, der deine vollkommen normalen menschlichen Gedanken in Computersprache übersetzt. +Was mich total beeindruckt hat, als ich das zum ersten Mal verstanden habe: Computer sind eigentlich ziemlich einfach in ihrem Kern. Sie verstehen buchstäblich nur zwei Dinge – 1 und 0, was im Grunde nur „Ja“ und „Nein“ oder „An“ und „Aus“ bedeutet. Das war’s! Aber hier wird es magisch – wir müssen nicht in 1en und 0en reden wie in der Matrix. Dafür gibt es **Programmiersprachen**. Die sind wie der beste Übersetzer der Welt, der deine ganz normalen menschlichen Gedanken in Computersprache übersetzt. -Und hier ist das, was mir jeden Morgen echte Gänsehaut bereitet: Buchstäblich *alles* Digitale in deinem Leben begann mit jemandem genau wie dir, wahrscheinlich im Schlafanzug mit einer Tasse Kaffee, der Code auf seinem Laptop tippte. Dieser Instagram-Filter, der dich makellos aussehen lässt? Jemand hat den Code dafür geschrieben. Die Empfehlung, die dich zu deinem neuen Lieblingssong geführt hat? Ein Entwickler hat diesen Algorithmus gebaut. Die App, die dir hilft, die Rechnung fürs Abendessen mit Freunden zu teilen? Jep, jemand dachte: „Das ist nervig, das kann ich bestimmt reparieren“ – und dann hat er es getan! +Und hier ist etwas, das mir morgens immer noch echte Gänsehaut bereitet: Buchstäblich *alles* Digitale in deinem Leben hat irgendwann mit jemandem angefangen, der genau so war wie du, wahrscheinlich im Pyjama mit einer Tasse Kaffee, der Code auf seinem Laptop getippt hat. Dieser Instagram-Filter, der dich makellos aussehen lässt? Jemand hat den programmiert. Die Empfehlung, die dich zu deinem neuen Lieblingslied geführt hat? Ein Entwickler hat diesen Algorithmus gebaut. Die App, mit der du Rechnungen mit Freunden teilst? Ja, jemand hat gedacht „Das nervt, ich könnte das wohl lösen“ und dann... hat er es getan! -Wenn du programmieren lernst, lernst du nicht nur eine neue Fähigkeit – du wirst Teil dieser unglaublichen Community von Problemlösern, die ihre Tage damit verbringen zu denken: „Was, wenn ich etwas bauen könnte, das jemanden den Tag nur ein bisschen besser macht?“ Mal ehrlich, gibt es was Cooleres? +Wenn du programmierst, lernst du nicht nur eine neue Fähigkeit – du wirst Teil dieser unglaublichen Community von Problemlösern, die ihre Tage damit verbringen, zu denken: „Was wäre, wenn ich etwas bauen könnte, das jemandem den Tag ein kleines bisschen besser macht?“ Gibt es ehrlich etwas Cooleres? -✅ **Spaß-Fakt-Suche**: Hier ist etwas super Cooles zum Nachschlagen, wenn du mal Zeit hast – wer war deiner Meinung nach die weltweit erste Computerprogrammiererin? Ich gebe dir einen Tipp: Es ist vielleicht nicht die Person, die du erwartest! Die Geschichte dahinter ist absolut faszinierend und zeigt, dass Programmieren schon immer um kreatives Problemlösen und Querdenken ging. +✅ **Spaß-Fakt-Suche**: Hier ist etwas super Cooles, das du dir anschauen kannst, wenn du mal eine freie Minute hast – Wer war wohl der erste Computerprogrammierer der Welt? Ich gebe dir einen Tipp: Es ist vielleicht nicht die Person, die du erwartest! Die Geschichte hinter dieser Person ist faszinierend und zeigt, dass Programmieren immer schon kreatives Problemlösen und unkonventionelles Denken war. -### 🧠 **Kurzer Check: Wie fühlst du dich?** +### 🧠 **Gefühls-Check: Wie fühlst du dich?** -**Nimm dir einen Moment zum Nachdenken:** -- Macht dir der Gedanke „Anweisungen an Computer geben“ jetzt Sinn? -- Fallen dir tägliche Aufgaben ein, die du gerne mit Programmierung automatisieren würdest? -- Welche Fragen gehen dir gerade zum Thema Programmieren durch den Kopf? +**Nimm dir einen Moment:** +- Macht die Idee von „Anweisungen an Computer geben“ jetzt für dich Sinn? +- Kannst du dir eine tägliche Aufgabe vorstellen, die du gerne mit Programmieren automatisieren würdest? +- Welche Fragen schwirren dir so im Kopf durch diesen Programmierkram? -> **Denk daran:** Es ist total normal, wenn dir einige Konzepte gerade noch etwas verwirrend vorkommen. Programmieren zu lernen ist wie eine neue Sprache lernen – das Gehirn braucht Zeit, um neue Verbindungen zu knüpfen. Du machst das super! +> **Erinnere dich:** Es ist total normal, wenn manche Konzepte im Moment noch verschwommen sind. Programmieren zu lernen ist wie eine neue Sprache lernen – dein Gehirn braucht Zeit, um die neuronalen Verbindungen zu schaffen. Du machst das großartig! -## Programmiersprachen sind wie verschiedene Zaubergeschmäcker +## Programmiersprachen sind wie verschiedene Geschmacksrichtungen von Magie -Okay, das klingt jetzt vielleicht komisch, aber bleib dran – Programmiersprachen sind wie verschiedene Musikrichtungen. Überleg mal: Es gibt Jazz, der weich und improvisierend ist, Rock, der kraftvoll und direkt ist, Klassik, die elegant und strukturiert ist, und Hip-Hop, der kreativ und ausdrucksstark ist. Jede Stilrichtung hat ihre eigene Atmosphäre, ihre eigene Community von leidenschaftlichen Fans, und jede ist perfekt für verschiedene Stimmungen und Anlässe. +Okay, das klingt jetzt komisch, aber bleib dran – Programmiersprachen sind wie verschiedene Musikrichtungen. Denk mal drüber nach: Es gibt Jazz, der smooth und improvisiert ist, Rock, kraftvoll und direkt, Klassik, elegant und strukturiert, und Hip-Hop, kreativ und expressiv. Jede Stilrichtung hat ihre eigene Stimmung, ihre leidenschaftliche Fangemeinde und ist für unterschiedliche Stimmungen und Anlässe perfekt. -Programmiersprachen funktionieren genau so! Du würdest nicht dieselbe Sprache verwenden, um ein lustiges Mobile-Spiel zu bauen, wie du sie nutzen würdest, um riesige Datenmengen zum Klima zu verarbeiten – genauso wenig würdest du Death Metal im Yoga-Kurs hören (naja, die meisten Yoga-Kurse jedenfalls! 😄). +Programmiersprachen funktionieren genau so! Du würdest nicht dieselbe Sprache benutzen, um ein lustiges Mobile Game zu machen, wie um riesige Klima-Datenmengen zu verarbeiten, genau so wenig wie du Death Metal beim Yoga hören würdest (naja, bei den meisten Yogakursen jedenfalls! 😄). -Aber hier kommt das, was mich jedes Mal umhaut, wenn ich drüber nachdenke: Diese Sprachen sind wie der geduldigste, brillanteste Dolmetscher der Welt, der direkt neben dir sitzt. Du kannst deine Ideen auf eine Weise ausdrücken, die deinem menschlichen Gehirn natürlich vorkommt, und sie erledigen all die unglaublich komplexe Arbeit, das in die 1en und 0en zu übersetzen, die Computer tatsächlich sprechen. Es ist wie ein Freund, der perfekt zweisprachig ist in „menschlicher Kreativität“ und „Computerlogik“ – und nie müde wird, nie Kaffeepausen braucht und dich auch nicht beurteilt, wenn du dieselbe Frage zweimal stellst! +Aber was mich jedes Mal echt umhaut: Diese Sprachen sind wie der geduldigste und brillante Dolmetscher, der direkt neben dir sitzt. Du kannst deine Ideen so ausdrücken, dass es deinem menschlichen Gehirn natürlich vorkommt, und sie übernehmen die unglaublich komplexe Übersetzung in die 1en und 0en, die Computer tatsächlich sprechen. Es ist wie ein Freund, der perfekt „menschliche Kreativität“ und „Computerlogik“ beherrscht – und der nie müde wird, keine Kaffeepausen braucht und dich nie dafür verurteilt, dieselbe Frage zweimal zu stellen! -### Beliebte Programmiersprachen und ihre Anwendungsgebiete +### Beliebte Programmiersprachen und ihre Einsatzbereiche ```mermaid mindmap @@ -113,7 +112,7 @@ mindmap Systeme & Leistung C++ Spiele - Leistungs-kritisch + Leistungs kritisch Rust Speichersicherheit Systemprogrammierung @@ -121,41 +120,41 @@ mindmap Cloud-Dienste Skalierbares Backend ``` -| Sprache | Am besten geeignet für | Warum sie beliebt ist | -|----------|--------------------------------------|---------------------------------------------| -| **JavaScript** | Webentwicklung, Benutzeroberflächen | Läuft in Browsern und ermöglicht interaktive Websites | -| **Python** | Datenwissenschaft, Automatisierung, KI | Leicht zu lesen und zu lernen, mächtige Bibliotheken | +| Sprache | Am besten geeignet für | Warum es beliebt ist | +|----------|----------|------------------| +| **JavaScript** | Webentwicklung, Benutzeroberflächen | Läuft in Browsern und treibt interaktive Webseiten an | +| **Python** | Datenwissenschaft, Automatisierung, KI | Einfach zu lesen und zu lernen, leistungsstarke Bibliotheken | | **Java** | Unternehmensanwendungen, Android-Apps | Plattformunabhängig, robust für große Systeme | | **C#** | Windows-Anwendungen, Spieleentwicklung | Starke Unterstützung im Microsoft-Ökosystem | -| **Go** | Cloud-Services, Backend-Systeme | Schnell, einfach, für moderne IT konzipiert | +| **Go** | Cloud Services, Backend-Systeme | Schnell, einfach, für moderne IT entwickelt | ### Hochsprachen vs. Maschinensprachen -Okay, das war ehrlich gesagt das Konzept, das mein Gehirn ursprünglich zerschmettert hat, als ich angefangen habe. Deshalb teile ich die Analogie, die das endlich für mich erklärt hat – und ich hoffe sehr, dass sie auch dir hilft! +Okay, das war ehrlich gesagt das Konzept, das mich anfangs echt überfordert hat, deshalb teile ich dir die Analogie, die es für mich klick machen ließ – und ich hoffe, sie hilft dir auch! -Stell dir vor, du bist in einem Land, dessen Sprache du nicht sprichst und brauchst dringend eine Toilette (wir waren doch alle schon mal dort, oder? 😅): +Stell dir vor, du bist in einem Land, dessen Sprache du nicht sprichst, und musst dringend eine Toilette finden (wir waren doch alle schon mal dort, oder? 😅): -- **Low-Level-Programmierung** ist wie das Erlernen des lokalen Dialekts so gut, dass du mit der Großmutter, die an der Ecke Obst verkauft, plaudern kannst – mit kulturellen Anspielungen, Slang und Insider-Witzen, die nur jemand versteht, der dort aufgewachsen ist. Super beeindruckend und unglaublich effizient... wenn du fließend bist! Aber ziemlich überwältigend, wenn du einfach nur eine Toilette finden willst. +- **Low-level Programmierung** ist, als würdest du den lokalen Dialekt so gut lernen, dass du mit der Großmutter am Obststand plaudern kannst, inklusive kultureller Referenzen, regionalem Slang und Insiderwitzen, die nur jemand versteht, der dort aufgewachsen ist. Super beeindruckend und sehr effizient... wenn du zufällig fließend bist! Aber ziemlich überwältigend, wenn du nur eine Toilette suchst. -- **High-Level-Programmierung** ist wie dieser fantastische lokale Freund, der dich einfach versteht. Du kannst auf Englisch sagen „Ich muss dringend zur Toilette“ und er macht die ganze kulturelle Übersetzung und gibt dir eine Wegbeschreibung, die für dein nicht-lokales Gehirn völlig Sinn macht. +- **High-level Programmierung** ist wie dieser wunderbare lokale Freund, der dich einfach versteht. Du sagst „Ich muss dringend eine Toilette finden“ auf einfachem Englisch, und er kümmert sich um alle kulturellen Übersetzungen und gibt dir eine Wegbeschreibung, die für dein nicht-lokales Gehirn total Sinn macht. -In Programmierbegriffen heißt das: -- **Low-Level-Sprachen** (wie Assembly oder C) erlauben dir unglaublich detaillierte Gespräche mit der tatsächlichen Hardware des Computers, aber du musst wie eine Maschine denken, was... naja, sagen wir mal, ein großer mentaler Sprung ist! -- **High-Level-Sprachen** (wie JavaScript, Python oder C#) erlauben dir, wie ein Mensch zu denken, während sie den ganzen Maschinencode hinter den Kulissen erledigen. Plus: Sie haben unglaublich einladende Communities voller Leute, die sich daran erinnern, wie es war, neu zu sein, und wirklich helfen wollen! +In Programmierbegriffen: +- **Low-level Sprachen** (wie Assembly oder C) erlauben es dir, extrem detaillierte Unterhaltungen mit der Hardware des Computers zu führen, aber du musst wie eine Maschine denken, was... naja, eine ziemlich große Umstellung ist! +- **High-level Sprachen** (wie JavaScript, Python oder C#) erlauben es dir, wie ein Mensch zu denken, während sie die Maschinensprache hinter den Kulissen übernehmen. Außerdem gibt es riesige, einladende Communities voller Leute, die sich daran erinnern, wie es war, neu zu sein, und die dir wirklich helfen wollen! -Rate mal, womit ich dir empfehle zu starten? 😉 Hochsprachen sind wie Stützräder, die du eigentlich nie abnehmen willst, weil sie das ganze Erlebnis viel angenehmer machen! +Rate mal, mit welchen ich empfehle zu starten? 😉 Hochsprachen sind wie Stützräder, die du nie wirklich abmachen willst, weil sie das ganze Erlebnis einfach so viel angenehmer machen! ```mermaid flowchart TB - A["👤 Menschlicher Gedanke:
'Ich möchte Fibonacci-Zahlen berechnen'"] --> B{Programmiersprachniveau wählen} + A["👤 Menschlicher Gedanke:
'Ich möchte Fibonacci-Zahlen berechnen'"] --> B{Wählen Sie die Sprachebene} - B -->|Hoch-Level| C["🌟 JavaScript/Python
Einfach zu lesen und zu schreiben"] - B -->|Niedrig-Level| D["⚙️ Assembler/C
Direkte Hardwaresteuerung"] + B -->|Hochsprachen| C["🌟 JavaScript/Python
Einfach zu lesen und zu schreiben"] + B -->|Maschinennah| D["⚙️ Assembly/C
Direkte Hardwaresteuerung"] - C --> E["📝 Schreiben: fibonacci(10)"] - D --> F["📝 Schreiben: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Schreibe: fibonacci(10)"] + D --> F["📝 Schreibe: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer-Verständnis:
Übersetzer übernimmt Komplexität"] + E --> G["🤖 Computerverständnis:
Übersetzer übernimmt Komplexität"] F --> G G --> H["💻 Gleiches Ergebnis:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,15 +163,15 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Lass mich dir zeigen, warum Hochsprachen viel freundlicher sind +### Ich zeige dir, warum Hochsprachen viel freundlicher sind -Okay, gleich zeige ich dir etwas, das perfekt demonstriert, warum ich mich in Hochsprachen verliebt habe. Aber zuerst – ich brauche dein Versprechen. Wenn du das erste Code-Beispiel siehst, gerate nicht in Panik! Es soll einschüchternd aussehen. Genau das ist der Punkt! +Okay, ich zeige dir jetzt etwas, das perfekt zeigt, warum ich mich in Hochsprachen verliebt habe, aber zuerst – ich brauche dein Versprechen. Wenn du das erste Codebeispiel siehst, gerate nicht in Panik! Es soll einschüchternd aussehen. Genau das will ich zeigen! -Wir werden dieselbe Aufgabe in zwei komplett unterschiedlichen Stilen ansehen. Beide erstellen eine sogenannte Fibonacci-Folge – ein wunderschönes mathematisches Muster, bei dem jede Zahl die Summe der beiden vorherigen ist: 0, 1, 1, 2, 3, 5, 8, 13... (Spaßfakt: Dieses Muster findest du buchstäblich überall in der Natur – Sonnenblumensamen-Spiralen, Tannenzapfenmuster, sogar wie Galaxien entstehen!) +Wir betrachten dieselbe Aufgabe in zwei völlig unterschiedlichen Stilen. Beide erzeugen die sogenannte Fibonacci-Folge – ein wunderschönes mathematisches Muster, bei dem jede Zahl die Summe der beiden vorherigen ist: 0, 1, 1, 2, 3, 5, 8, 13... (Fun Fact: Dieses Muster findet sich buchstäblich überall in der Natur – Sonnenblumenkerne in Spiralen, Zapfenmuster, sogar wie Galaxien entstehen!) Bereit, den Unterschied zu sehen? Los geht’s! -**Hochsprache (JavaScript) – menschenfreundlich:** +**Hochsprache (JavaScript) – Menschlich verständlich:** ```javascript // Schritt 1: Grundlegende Fibonacci-Einrichtung @@ -184,10 +183,10 @@ console.log('Fibonacci sequence:'); ``` **Das macht dieser Code:** -- **Deklariert** eine Konstante, um festzulegen, wie viele Fibonacci-Zahlen wir generieren wollen -- **Initialisiert** zwei Variablen, um die aktuelle und nächste Zahl in der Folge zu verfolgen -- **Setzt** die Anfangswerte (0 und 1), die das Fibonacci-Muster definieren -- **Zeigt** eine Überschrift an, um die Ausgabe zu kennzeichnen +- **Deklariert** eine Konstante, die festlegt, wie viele Fibonacci-Zahlen wir erzeugen wollen +- **Initialisiert** zwei Variablen, um die aktuelle und die nächste Zahl der Folge zu verfolgen +- **Setzt** die Startwerte (0 und 1), die das Fibonacci-Muster definieren +- **Zeigt** eine Überschrift an, um unsere Ausgabe zu kennzeichnen ```javascript // Schritt 2: Erzeuge die Sequenz mit einer Schleife @@ -201,11 +200,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**So läuft das hier ab:** -- **Schleife** über jede Position in unserer Folge mit einer `for`-Schleife -- **Zeigt** jede Zahl mit ihrer Position unter Verwendung von Template Literal Formatierung an -- **Berechnet** die nächste Fibonacci-Zahl durch Addition der aktuellen und nächsten Werte -- **Aktualisiert** unsere Tracking-Variablen für die nächste Iteration +**So entsteht das hier:** +- **Schleifen** wir durch jede Position in unserer Folge mit einer `for`-Schleife +- **Geben** wir jede Zahl mit ihrer Position formatiert aus +- **Berechnen** wir die nächste Fibonacci-Zahl durch Addition der aktuellen und nächsten Werte +- **Aktualisieren** wir unsere Variablen, um zur nächsten Iteration weiterzugehen ```javascript // Schritt 3: Moderner funktionaler Ansatz @@ -226,11 +225,11 @@ console.log(fibSequence); **Oben haben wir:** - **Eine wiederverwendbare Funktion** mit moderner Pfeilfunktion-Syntax erstellt -- **Ein Array gebaut**, um die gesamte Folge zu speichern statt einzelnen Ausgabezeilen -- **Array-Indizierung verwendet**, um jede neue Zahl aus vorherigen Werten zu berechnen -- **Die komplette Folge zurückgegeben**, um sie flexibel an anderen Stellen zu nutzen +- **Ein Array gebaut,** um die komplette Folge zu speichern anstatt sie einzeln auszugeben +- **Array-Indizes genutzt,** um jede neue Zahl aus vorherigen Werten zu berechnen +- **Die vollständige Folge zurückgegeben,** damit wir sie flexibel anderswo nutzen können -**Niedrigsprache (ARM Assembly) – computerfreundlich:** +**Niedrigsprache (ARM Assembly) – Computer-freundlich:** ```assembly area ascen,code,readonly @@ -257,28 +256,27 @@ back add r0,r1 end ``` -Beachte, wie die JavaScript-Version fast wie englische Anweisungen liest, während die Assembly-Version kryptische Befehle nutzt, die direkt den Prozessor des Computers steuern. Beide lösen exakt dieselbe Aufgabe, aber die Hochsprache ist für Menschen viel leichter zu verstehen, zu schreiben und zu pflegen. - -**Wichtige Unterschiede, die dir auffallen werden:** -- **Lesbarkeit**: JavaScript verwendet beschreibende Namen wie `fibonacciCount`, während Assembly kryptische Bezeichnungen wie `r0`, `r1` nutzt -- **Kommentare**: Hochrangige Sprachen fördern erklärende Kommentare, die den Code selbstdokumentierend machen -- **Struktur**: Der logische Ablauf von JavaScript entspricht der Art, wie Menschen Schritt für Schritt über Probleme nachdenken -- **Wartung**: Das Aktualisieren der JavaScript-Version für verschiedene Anforderungen ist einfach und klar +Beachte, wie die JavaScript-Version fast wie englische Anweisungen liest, während die Assembly-Version kryptische Befehle nutzt, die direkt den Prozessor steuern. Beide erledigen exakt dieselbe Aufgabe, aber die Hochsprache ist für Menschen viel leichter zu verstehen, zu schreiben und zu warten. -✅ **Über die Fibonacci-Folge**: Dieses absolut wunderschöne Zahlenmuster (bei dem jede Zahl der Summe der beiden vorhergehenden entspricht: 0, 1, 1, 2, 3, 5, 8...) taucht buchstäblich *überall* in der Natur auf! Du findest es in Sonnenblumenwirbeln, Tannenzapfenmustern, der Art, wie Nautilus-Schalen sich wölben, und sogar darin, wie Baumzweige wachsen. Es ist ziemlich verblüffend, wie Mathematik und Programmierung uns helfen können, die Muster zu verstehen und nachzubilden, die die Natur nutzt, um Schönheit zu erschaffen! +**Wesentliche Unterschiede, die dir auffallen werden:** +- **Lesbarkeit**: JavaScript verwendet beschreibende Namen wie `fibonacciCount`, während Assembly kryptische Bezeichnungen wie `r0`, `r1` nutzt +- **Kommentare**: Hochsprachen ermutigen zu erklärenden Kommentaren, die den Code selbstdokumentierend machen +- **Struktur**: Der logische Ablauf von JavaScript entspricht, wie Menschen Schritt-für-Schritt über Probleme nachdenken +- **Wartung**: Das Aktualisieren der JavaScript-Version für verschiedene Anforderungen ist unkompliziert und klar +✅ **Über die Fibonacci-Folge**: Dieses absolut wunderschöne Zahlenmuster (bei dem jede Zahl die Summe der beiden vorherigen ist: 0, 1, 1, 2, 3, 5, 8 ...) findet sich buchstäblich *überall* in der Natur! Du findest es in Sonnenblumen-Spiralen, Tannenzapfen-Mustern, der Form von Nautilus-Schalen und sogar im Wachstum von Baumzweigen. Es ist ziemlich verblüffend, wie Mathematik und Code uns helfen können, die Muster zu verstehen und nachzubilden, die die Natur nutzt, um Schönheit zu erschaffen! ## Die Bausteine, die die Magie möglich machen -Also, jetzt wo du gesehen hast, wie Programmiersprachen in Aktion aussehen, lass uns die grundlegenden Bausteine anschauen, aus denen buchstäblich jedes jemals geschriebene Programm besteht. Denk daran wie an die wichtigsten Zutaten in deinem Lieblingsrezept – sobald du verstehst, was jede einzelne tut, wirst du in fast jeder Sprache Code lesen und schreiben können! +Okay, jetzt, wo du gesehen hast, wie Programmiersprachen in Aktion aussehen, lass uns die grundlegenden Bausteine zerlegen, aus denen buchstäblich jedes jemals geschriebene Programm besteht. Denk an sie als die wesentlichen Zutaten in deinem Lieblingsrezept – wenn du verstehst, was jede einzelne bewirkt, kannst du Code in so gut wie jeder Sprache lesen und schreiben! -Das ist ein bisschen wie die Grammatik des Programmierens lernen. Erinnerst du dich noch aus der Schule, als du über Substantive, Verben und Satzbau gelernt hast? Programmieren hat seine eigene Grammatikversion, und ehrlich gesagt ist sie viel logischer und nachsichtiger als die englische Grammatik je war! 😄 +Das ist ein bisschen so, als würdest du die Grammatik des Programmierens lernen. Erinnerst du dich noch aus der Schule, als du Nomen, Verben und wie man Sätze bildet gelernt hast? Programmieren hat seine eigene Grammatik, und ehrlich gesagt ist sie viel logischer und nachsichtiger als die englische Grammatik! 😄 ### Anweisungen: Die Schritt-für-Schritt-Anleitungen -Fangen wir mit **Anweisungen** an – sie sind wie einzelne Sätze in einem Gespräch mit deinem Computer. Jede Anweisung sagt dem Computer, genau eine Sache zu tun, ähnlich wie Wegbeschreibungen: „Hier links abbiegen“, „An der roten Ampel stoppen“, „Auf diesem Parkplatz parken“. +Fangen wir mit **Anweisungen (Statements)** an – das sind einzelne Sätze in einer Konversation mit deinem Computer. Jede Anweisung sagt dem Computer, genau eine Sache zu tun, ähnlich wie Wegbeschreibungen: „Hier links abbiegen“, „An der roten Ampel anhalten“, „Auf diesem Parkplatz parken“. -Was ich an Anweisungen liebe, ist wie lesbar sie meistens sind. Schau dir das an: +Was ich an Anweisungen liebe, ist, wie meist gut lesbar sie sind. Schau dir das an: ```javascript // Grundlegende Anweisungen, die einzelne Aktionen ausführen @@ -286,31 +284,31 @@ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Das macht dieser Code:** -- **Deklariert** eine konstante Variable, um den Namen eines Benutzers zu speichern -- **Zeigt** eine Begrüßungsnachricht in der Konsolenausgabe an -- **Berechnet** und speichert das Ergebnis einer mathematischen Operation + +**Das macht dieser Code:** +- **Deklariert** eine Konstantenvariable, um den Namen eines Nutzers zu speichern +- **Zeigt** eine Begrüßungsnachricht in der Konsole an +- **Berechnet** und speichert das Ergebnis einer mathematischen Operation ```javascript // Anweisungen, die mit Webseiten interagieren document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Schritt für Schritt passiert hier:** -- **Ändert** den Titel der Webseite, der im Browser-Tab erscheint -- **Verändert** die Hintergrundfarbe des gesamten Seitenkörpers + +**Schritt für Schritt passiert Folgendes:** +- **Ändert** den Titel der Webseite, der im Browser-Tab angezeigt wird +- **Verändert** die Hintergrundfarbe des gesamten Seitenkörpers ### Variablen: Das Speichersystem deines Programms -Okay, **Variablen** sind ehrlich gesagt eines meiner absoluten Lieblingskonzepte zum Lehren, weil sie so sehr wie Dinge sind, die du jeden Tag benutzt! +Okay, **Variablen** sind ehrlich gesagt eines meiner absoluten Lieblingsthemen zum Erklären, weil sie so sehr wie Dinge funktionieren, die du jeden Tag benutzt! -Denk mal an dein Telefonbuch. Du merkst dir nicht die Telefonnummern aller Leute – stattdessen speicherst du „Mama“, „Beste Freundin“ oder „Pizza-Lieferdienst, der bis 2 Uhr nachts liefert“ und lässt dein Telefon die tatsächlichen Nummern merken. Variablen funktionieren genauso! Sie sind wie beschriftete Behälter, in denen dein Programm Informationen speichern und später mit einem aussagekräftigen Namen abrufen kann. +Denk mal an dein Telefon-Adressbuch. Du merkst dir nicht jede Telefonnummer – stattdessen speicherst du „Mama“, „Beste Freundin“ oder „Pizzalieferdienst bis 2 Uhr morgens“ und dein Telefon merkt sich die echten Nummern. Variablen funktionieren genau so! Sie sind wie beschriftete Behälter, in denen dein Programm Informationen speichern und später über einen sinnvollen Namen wiederfinden kann. -Das Coole ist: Variablen können sich ändern, während dein Programm läuft (daher der Name „Variable“ – siehst du, was die da gemacht haben?). So wie du den Kontakt für den Pizza-Lieferdienst updatest, wenn du einen noch besseren findest, können Variablen aktualisiert werden, wenn dein Programm neue Informationen lernt oder sich die Situation ändert! +Das Coole daran: Variablen können sich ändern, während dein Programm läuft (daher der Name „Variable“ – merkst du, was sie gemacht haben?). Genauso wie du den Pizzalieferdienst-Kontakt aktualisierst, wenn du einen besseren gefunden hast, können Variablen aktualisiert werden, wenn dein Programm neue Informationen lernt oder sich Situationen ändern! -Ich zeige dir, wie wunderschön einfach das sein kann: +Ich zeige dir mal, wie einfach das sein kann: ```javascript // Schritt 1: Erstellen von Basisvariablen @@ -319,12 +317,12 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Was diese Konzepte bedeuten:** -- **Speichere** unveränderliche Werte in `const` Variablen (wie Name der Webseite) -- **Benutze** `let` für Werte, die sich im Programmverlauf ändern können -- **Weise zu** unterschiedliche Datentypen zu: Strings (Text), Zahlen und Booleans (wahr/falsch) -- **Wähle** beschreibende Namen, die erklären, was jede Variable enthält + +**Verstehen dieser Konzepte:** +- **Speichere** unveränderliche Werte in `const`-Variablen (wie den Site-Namen) +- **Nutze** `let` für Werte, die sich im Programm ändern können +- **Weise** verschiedene Datentypen zu: Strings (Text), Zahlen und Booleans (wahr/falsch) +- **Wähle** beschreibende Namen, die erklären, was jede Variable enthält ```javascript // Schritt 2: Arbeiten mit Objekten, um verwandte Daten zu gruppieren @@ -334,11 +332,11 @@ const weatherData = { windSpeed: 12 }; ``` - -**Oben haben wir:** -- **Ein Objekt erstellt**, um zusammengehörige Wetterinformationen zu gruppieren -- **Mehrere Datenstücke unter einem Variablennamen organisiert** -- **Schlüssel-Wert-Paare verwendet**, um jede Information klar zu beschriften + +**Oben haben wir:** +- **Ein Objekt erstellt**, um zusammengehörige Wetterinformationen zu gruppieren +- **Mehrere Datenstücke** unter einem Variablennamen organisiert +- **Schlüssel-Wert-Paare verwendet**, um jede Information klar zu beschriften ```javascript // Schritt 3: Verwendung und Aktualisierung von Variablen @@ -349,33 +347,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`); currentWeather = "cloudy"; temperature = 68; ``` - -**Hier verstehen wir jeden Teil:** -- **Zeige** Informationen mit Template-Literalen und `${}`-Syntax an -- **Greife auf Objekt-Eigenschaften zu** mit Punktnotation (`weatherData.windSpeed`) -- **Aktualisiere** mit `let` deklarierte Variablen, um sich ändernde Bedingungen darzustellen -- **Kombiniere** mehrere Variablen, um sinnvolle Nachrichten zu erzeugen + +**Schauen wir uns die einzelnen Teile an:** +- **Zeige** Informationen mit Template-Literals und der `${}`-Syntax an +- **Greife zu** auf Objekteigenschaften mit Punktnotation (`weatherData.windSpeed`) +- **Aktualisiere** mit `let` deklarierte Variablen, um veränderte Bedingungen widerzuspiegeln +- **Kombiniere** mehrere Variablen, um sinnvolle Nachrichten zu erstellen ```javascript // Schritt 4: Modernes Destructuring für saubereren Code const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**Das musst du wissen:** +- **Extrahiere** bestimmte Eigenschaften aus Objekten mit Destructuring Assignment +- **Erzeuge** automatisch neue Variablen mit den gleichen Namen wie die Objekt-Schlüssel +- **Vereinfache** den Code durch Vermeidung mehrfacher Punktnotation -**Was du wissen musst:** -- **Extrahiere** spezifische Eigenschaften aus Objekten mit Destrukturierungszuweisung -- **Erstelle** automatisch neue Variablen mit den gleichen Namen wie die Objektschlüssel -- **Vereinfache** den Code, indem du sich wiederholende Punktnotation vermeidest - -### Steuerung des Programmflusses: Deinem Programm beibringen, zu denken +### Kontrollfluss: Deinem Programm beibringen zu denken -Okay, hier wird Programmieren wirklich verblüffend! **Kontrollfluss** bedeutet im Grunde, deinem Programm beizubringen, wie es kluge Entscheidungen trifft, genau wie du das jeden Tag ganz selbstverständlich tust. +Das hier ist der Teil, an dem Programmieren absolut verblüffend wird! **Kontrollfluss** bedeutet im Grunde, deinem Programm beizubringen, wie es intelligente Entscheidungen treffen kann, genau wie du es jeden Tag ganz automatisch machst. -Stell dir vor: Heute Morgen hast du bestimmt gedacht: „Wenn es regnet, nehme ich einen Regenschirm. Wenn es kalt ist, ziehe ich eine Jacke an. Wenn ich spät dran bin, überspringe ich das Frühstück und hole mir unterwegs Kaffee.“ Dein Gehirn folgt dieser Wenn-Dann-Logik dutzende Male jeden Tag ganz automatisch! +Stell dir vor: Heute Morgen hast du wahrscheinlich etwa gedacht: „Wenn es regnet, nehme ich einen Regenschirm mit. Wenn es kalt ist, ziehe ich eine Jacke an. Wenn ich spät dran bin, überspringe ich das Frühstück und nehme unterwegs einen Kaffee.“ Dein Gehirn folgt ganz natürlich dieser Wenn-Dann-Logik dutzende Male am Tag! -Das ist es, was Programme intelligent und lebendig wirken lässt, statt nur einem langweiligen, vorhersehbaren Drehbuch zu folgen. Sie können eine Situation betrachten, auswerten, was passiert, und angemessen reagieren. Es ist, als hätten sie ein Gehirn, das sich anpasst und Entscheidungen treffen kann! +Das macht Programme intelligent und lebendig, anstatt dass sie nur einem langweiligen, vorhersehbaren Skript folgen. Sie können eine Situation anschauen, bewerten, was los ist, und angemessen reagieren. Es ist fast so, als würdest du deinem Programm ein Gehirn geben, das sich anpassen und Entscheidungen treffen kann! -Willst du sehen, wie schön das funktioniert? Ich zeige es dir: +Willst du sehen, wie genial das funktioniert? Ich zeige es dir: ```javascript // Schritt 1: Grundlegende bedingte Logik @@ -388,12 +386,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Das macht dieser Code:** -- **Überprüft**, ob das Alter des Benutzers für die Wahlberechtigung ausreicht -- **Führt** verschiedene Codeblöcke basierend aufs Ergebnis der Bedingung aus -- **Berechnet** und zeigt an, wie lange es noch bis zur Wahlberechtigung dauert, falls unter 18 -- **Gibt** für jeden Fall spezifisches, hilfreiches Feedback + +**Das macht dieser Code:** +- **Prüft**, ob das Alter des Nutzers die Wahlberechtigung erfüllt +- **Führt** verschiedene Codeblöcke je nach Bedingungsergebnis aus +- **Berechnet** und zeigt an, wie lange es bis zur Wahlberechtigung dauert, falls unter 18 +- **Gibt** spezifisches, hilfreiches Feedback für jedes Szenario ```javascript // Schritt 2: Mehrere Bedingungen mit logischen Operatoren @@ -408,26 +406,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Was hier passiert, im Detail:** -- **Kombiniert** mehrere Bedingungen mit dem `&&` (und) Operator -- **Erstellt** eine Hierarchie von Bedingungen mit `else if` für mehrere Szenarien -- **Behandelt** alle möglichen Fälle mit einer abschließenden `else`-Anweisung -- **Gibt** klares, umsetzbares Feedback für jede Situation + +**Das passiert hier im Detail:** +- **Verknüpft** mehrere Bedingungen mit dem `&&` (und)-Operator +- **Erstellt** eine Hierarchie von Bedingungen mit `else if` für verschiedene Szenarien +- **Erfasst** alle möglichen Fälle mit einem abschließenden `else` +- **Gibt** klar verständliches, hilfreiches Feedback für jede Situation ```javascript -// Schritt 3: Kurzform der Bedingung mit ternärem Operator +// Schritt 3: Prägnante Bedingung mit ternärem Operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Merke dir:** -- **Verwende** den ternären Operator (`? :`) für einfache Zwei-Optionen-Bedingungen -- **Schreibe** zuerst die Bedingung, dann `?`, dann Ergebnis, wenn wahr, dann `:`, dann Ergebnis, wenn falsch -- **Wende** dieses Muster an, wenn du Werte auf Basis von Bedingungen zuweisen willst + +**Das solltest du dir merken:** +- **Nutze** den ternären Operator (`? :`) für einfache Zwei-Option-Bedingungen +- **Schreibe** zuerst die Bedingung, dann `?`, dann die wahre Ausgabe, dann `:`, dann die falsche Ausgabe +- **Verwende** dieses Muster, wenn du Werte basierend auf Bedingungen zuweisen willst ```javascript -// Schritt 4: Umgang mit mehreren speziellen Fällen +// Schritt 4: Umgang mit mehreren spezifischen Fällen const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -446,55 +444,55 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**Dieser Code macht Folgendes:** +- **Vergleicht** den Variablenwert mit mehreren spezifischen Fällen +- **Fasst** ähnliche Fälle zusammen (Werktage vs. Wochenenden) +- **Führt** den passenden Codeblock aus, wenn eine Übereinstimmung gefunden wird +- **Beinhaltet** einen `default`-Fall für unerwartete Werte +- **Verwendet** `break`-Anweisungen, um zu verhindern, dass der Code in weitere Fälle läuft -**Dieser Code macht Folgendes:** -- **Vergleicht** den Variablenwert mit mehreren spezifischen Fällen -- **Gruppiert** ähnliche Fälle zusammen (Wochentage vs. Wochenenden) -- **Führt** den passenden Codeblock aus, wenn ein Treffer vorliegt -- **Beinhaltet** einen `default`-Fall für unerwartete Werte -- **Verwendet** `break`-Anweisungen, um zu verhindern, dass der Code in den nächsten Fall weiterläuft - -> 💡 **Echtes Beispiel**: Stell dir Kontrollfluss wie das geduldigste GPS der Welt vor, das dir Anweisungen gibt. Es könnte sagen: „Wenn auf der Hauptstraße Verkehr ist, nimm die Autobahn. Wenn die Autobahn gesperrt ist, versuche die landschaftlich schöne Route.“ Programme verwenden genau dieselbe Art bedingter Logik, um intelligent auf verschiedene Situationen zu reagieren und immer das beste Nutzererlebnis zu bieten. +> 💡 **Alltagsvergleich**: Stell dir den Kontrollfluss wie das geduldigste GPS der Welt vor, das dir Anweisungen gibt. Es sagt: „Wenn auf der Hauptstraße Stau ist, nimm lieber die Autobahn. Wenn Baustellen die Autobahn blockieren, versuch die malerische Strecke.“ Programme nutzen genau diese Art von bedingter Logik, um intelligent auf verschiedene Situationen zu reagieren und Nutzern immer die beste Erfahrung zu bieten. -### 🎯 **Konzept-Check: Baustein-Meisterschaft** +### 🎯 **Konzept-Check: Bausteine meistern** -**Mal sehen, wie du mit den Grundlagen zurechtkommst:** -- Kannst du den Unterschied zwischen einer Variable und einer Anweisung mit eigenen Worten erklären? -- Denk an ein Beispiel aus der echten Welt, in dem du eine Wenn-Dann-Entscheidung treffen würdest (wie in unserem Wahl-Beispiel) -- Was hat dich an der Programmierlogik am meisten überrascht? +**Lass uns mal schauen, wie es mit den Grundlagen steht:** +- Kannst du in deinen eigenen Worten den Unterschied zwischen einer Variable und einer Anweisung erklären? +- Denk an ein Beispiel aus dem echten Leben, in dem du eine Wenn-Dann-Entscheidung treffen würdest (wie bei unserem Wahlrecht-Beispiel) +- Was hat dich an der Programmierlogik am meisten überrascht? -**Schneller Selbstvertrauens-Aufbau:** +**Kleiner Selbstvertrauens-Kick:** ```mermaid flowchart LR - A["📝 Anweisungen
(Instruktionen)"] --> B["📦 Variablen
(Speicher)"] --> C["🔀 Programmfluss
(Entscheidungen)"] --> D["🎉 Funktionierendes Programm!"] + A["📝 Anweisungen
(Anweisungen)"] --> B["📦 Variablen
(Speicher)"] --> C["🔀 Programmfluss
(Entscheidungen)"] --> D["🎉 Funktionierendes Programm!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **Was als Nächstes kommt**: Wir werden absolut viel Spaß haben, diese Konzepte immer weiter zu vertiefen, während wir diese unglaubliche Reise zusammen fortsetzen! Konzentriere dich jetzt einfach darauf, die Vorfreude auf all die erstaunlichen Möglichkeiten zu spüren, die vor dir liegen. Die speziellen Fähigkeiten und Techniken wirst du ganz natürlich lernen, wenn wir zusammen üben – ich verspreche, das macht viel mehr Spaß, als du vielleicht denkst! +``` +✅ **Was als Nächstes kommt:** Wir werden richtig viel Spaß haben, wenn wir diese Konzepte weiter vertiefen und gemeinsam diese unglaubliche Reise fortsetzen! Konzentriere dich erstmal darauf, dich auf all die fantastischen Möglichkeiten zu freuen, die vor dir liegen. Die speziellen Fähigkeiten und Techniken werden sich ganz natürlich festigen, wenn wir gemeinsam üben – ich verspreche, das wird viel mehr Spaß machen, als du erwartest! -## Werkzeuge des Handwerks +## Werkzeuge des Fachs -Okay, hier werde ich ehrlich so aufgeregt, dass ich mich kaum beherrschen kann! 🚀 Wir werden jetzt über die unglaublichen Werkzeuge sprechen, die dir das Gefühl geben werden, als hättest du gerade die Schlüssel zu einem digitalen Raumschiff bekommen. +Okay, ehrlich gesagt bekomme ich hier richtig Gänsehaut vor Aufregung! 🚀 Wir sprechen jetzt über die unglaublichen Werkzeuge, mit denen du dich fühlen wirst, als hättest du gerade die Schlüssel zu einem digitalen Raumschiff in die Hand bekommen. -Kennst du das, wenn ein Koch diese perfekt ausbalancierten Messer hat, die sich wie eine Verlängerung seiner Hände anfühlen? Oder wenn ein Musiker eine Gitarre hat, die zu singen scheint, sobald er sie berührt? Entwickler haben ihre eigene Version solcher magischen Werkzeuge, und hier kommt etwas, das dich absolut umhauen wird – die meisten davon sind komplett kostenlos! +Du kennst doch sicher diese perfekt ausgewogenen Messer, die ein Koch hat und die sich fast wie eine Verlängerung der eigenen Hände anfühlen? Oder den Musiker, der eine Gitarre besitzt, die förmlich zu singen beginnt, sobald er sie berührt? Entwickler haben ihre ganz eigene Version dieser magischen Werkzeuge, und das, was dich umhauen wird – die meisten davon sind absolut kostenlos! -Ich hüpfe praktisch auf meinem Stuhl, weil ich es kaum erwarten kann, diese mit dir zu teilen, denn sie haben die Art revolutioniert, wie wir Software entwickeln. Wir sprechen von KI-gestützten Code-Assistenten, die dir beim Schreiben deines Codes helfen können (kein Scherz!), Cloud-Umgebungen, in denen du ganze Anwendungen von buchstäblich überall mit WLAN bauen kannst, und Debugging-Tools, die so ausgefeilt sind, dass sie wie Röntgenblick für deine Programme sind. +Ich freue mich so sehr, dir das zu zeigen, denn diese Tools haben die Softwareentwicklung komplett revolutioniert. Wir reden von KI-gestützten Programmierassistenten, die deinen Code schreiben helfen können (ernsthaft!), Cloud-Entwicklungsumgebungen, in denen du ganze Apps von überall mit WLAN bauen kannst, und so ausgefeilten Debuggern, dass sie beinahe als Röntgenblick für deine Programme gelten könnten. -Und hier kommt der Teil, der mir immer noch eine Gänsehaut macht: Das sind keine „Anfänger-Werkzeuge“, die du irgendwann überholst. Das sind genau die gleichen professionellen Werkzeuge, die Entwickler bei Google, Netflix und dem Indie-App-Studio, das du liebst, gerade jetzt verwenden. Du wirst dich wie ein Profi fühlen, wenn du sie benutzt! +Und hier kommt der Teil, der mir immer noch eine Gänsehaut macht: Das sind keine „Anfänger-Werkzeuge“, mit denen du schnell rauswächst. Das sind exakt die gleichen professionellen Tools, die Entwickler bei Google, Netflix und dem Indie-App-Studio, das du liebst, gerade in diesem Moment benutzen. Du wirst dich fühlen wie ein absoluter Profi! ```mermaid graph TD A["💡 Deine Idee"] --> B["⌨️ Code-Editor
(VS Code)"] B --> C["🌐 Browser DevTools
(Testen & Debuggen)"] C --> D["⚡ Befehlszeile
(Automatisierung & Werkzeuge)"] - D --> E["📚 Dokumentation
(Lernen & Referenz)"] - E --> F["🚀 Unglaubliche Webanwendung!"] + D --> E["📚 Dokumentation
(Lernen & Nachschlagen)"] + E --> F["🚀 Unglaubliche Web-App!"] B -.-> G["🤖 KI-Assistent
(GitHub Copilot)"] - C -.-> H["📱 Gerätetests
(Responsives Design)"] + C -.-> H["📱 Gerätetest
(Responsives Design)"] D -.-> I["📦 Paketmanager
(npm, yarn)"] E -.-> J["👥 Gemeinschaft
(Stack Overflow)"] @@ -504,97 +502,97 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` +``` ### Code-Editoren und IDEs: Deine neuen digitalen besten Freunde -Lass uns über Code-Editoren sprechen – die werden wirklich bald zu deinen Lieblingsplätzen zum Abhängen! Stell dir vor, es ist dein persönliches Programmier-Heiligtum, wo du die meiste Zeit verbringen wirst, um deine digitalen Kreationen zu gestalten und zu perfektionieren. +Lass uns über Code-Editoren sprechen – die werden wirklich bald zu deinen Lieblingsorten zum Abhängen! Stell sie dir als deinen persönlichen Code-Sanctuary vor, in dem du die meiste Zeit damit verbringst, deine digitalen Kreationen zu erschaffen und zu perfektionieren. -Aber das Wahre Wunder an modernen Editoren ist: Sie sind nicht nur schicke Texteditoren. Sie sind wie der brillanteste, unterstützendste Programmier-Mentor, der 24/7 direkt neben dir sitzt. Sie fangen deine Tippfehler ab, bevor du sie überhaupt bemerkst, schlagen Verbesserungen vor, die dich wie ein Genie aussehen lassen, helfen dir zu verstehen, was jeder Codeabschnitt macht, und manche können sogar vorhersagen, was du als Nächstes tippen willst, und bieten an, deine Gedanken zu vervollständigen! +Aber das absolut Magische an modernen Editoren ist: Sie sind nicht einfach nur schicke Texteditoren. Sie sind wie der brillanteste, unterstützendste Programmier-Mentor, der rund um die Uhr neben dir sitzt. Sie fangen Tippfehler ab, bevor du sie überhaupt bemerkst, schlagen Verbesserungen vor, die dich zum Genie machen, helfen dir zu verstehen, was jeder Codeabschnitt tut, und manche von ihnen können sogar antizipieren, was du gleich tippen willst und bieten dir an, deine Gedanken fertigzuschreiben! -Ich erinnere mich daran, wie ich das erste Mal Autovervollständigung entdeckt habe – ich hatte wirklich das Gefühl, in der Zukunft zu leben. Du beginnst etwas zu tippen und dein Editor sagt: „Hey, wolltest du diese Funktion nutzen, die genau das macht, was du brauchst?“ Es ist, als hättest du einen Gedankenleser als Programmierkumpel! +Ich erinnere mich noch, als ich zum ersten Mal Auto-Completion entdeckt habe – ich hatte das Gefühl, in der Zukunft zu leben. Du fängst an zu tippen, und dein Editor sagt: „Hey, wolltest du nicht diese Funktion, die genau das macht, was du brauchst?“ Es ist fast wie ein Gedankenleser als dein Coding-Buddy! **Was macht diese Editoren so unglaublich?** -Moderne Code-Editoren bieten eine beeindruckende Reihe von Funktionen, die deine Produktivität steigern: +Moderne Code-Editoren bieten eine beeindruckende Anzahl an Funktionen, die deine Produktivität steigern: -| Funktion | Was sie macht | Warum sie hilft | +| Funktion | Was es macht | Warum es hilft | |---------|--------------|--------------| -| **Syntaxhervorhebung** | Färbt verschiedene Teile deines Codes ein | Macht Code lesbarer und Fehler leichter erkennbar | -| **Autovervollständigung** | Schlägt Code beim Tippen vor | Beschleunigt das Programmieren und reduziert Tippfehler | -| **Debugging-Tools** | Helfen dir Fehler zu finden und zu beheben | Spart Stunden bei der Fehlersuche | -| **Erweiterungen** | Fügen spezielle Features hinzu | Passe deinen Editor an jede Technologie an | -| **KI-Assistenten** | Schlagen Code und Erklärungen vor | Beschleunigen das Lernen und die Produktivität | +| **Syntax-Hervorhebung** | Färbt verschiedene Teile deines Codes | Macht den Code leichter lesbar und Fehler sichtbar | +| **Auto-Vervollständigung** | Schlägt Code während des Tippens vor | Beschleunigt das Programmieren und reduziert Tippfehler | +| **Debugging-Tools** | Hilft Fehler zu finden und zu beheben | Spart Stunden an Fehlersuche | +| **Erweiterungen** | Fügen spezialisierte Funktionen hinzu | Passe deinen Editor für jede Technologie an | +| **KI-Assistenten** | Schlagen Code und Erklärungen vor | Beschleunigen Lernen und Produktivität | -> 🎥 **Video-Ressource**: Möchtest du diese Werkzeuge in Aktion sehen? Schau dir dieses [Tools of the Trade Video](https://youtube.com/watch?v=69WJeXGBdxg) für einen umfassenden Überblick an. +> 🎥 **Video-Ressource**: Willst du diese Werkzeuge in Aktion sehen? Schau dir dieses [Tools of the Trade Video](https://youtube.com/watch?v=69WJeXGBdxg) für einen umfassenden Überblick an. #### Empfohlene Editoren für Webentwicklung -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (kostenlos) -- Am beliebtesten bei Webentwicklern -- Ausgezeichnetes Erweiterungs-Ökosystem -- Eingebautes Terminal und Git-Integration -- **Must-Have-Erweiterungen**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – KI-gestützte Codevorschläge - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – Echtzeit-Zusammenarbeit - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – Automatische Codeformatierung - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – Rechtschreibprüfung im Code +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Kostenlos) +- Bei Webentwicklern am beliebtesten +- Hervorragendes Erweiterungs-Ökosystem +- Integriertes Terminal und Git +- **Unverzichtbare Erweiterungen**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – KI-gestützte Codevorschläge + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – Echtzeit-Zusammenarbeit + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – Automatisches Codeformatieren + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – Fängt Tippfehler im Code auf -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (kostenpflichtig, kostenlos für Studenten) -- Fortgeschrittene Debugging- und Testtools -- Intelligente Codevervollständigung -- Integrierte Versionskontrolle +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Bezahlt, kostenlos für Studierende) +- Fortgeschrittene Debugging- und Testwerkzeuge +- Intelligente Code-Vervollständigung +- Integrierte Versionskontrolle -**Cloud-basierte IDEs** (verschiedene Preise) -- [GitHub Codespaces](https://github.com/features/codespaces) – Volles VS Code im Browser -- [Replit](https://replit.com/) – Super zum Lernen und Teilen von Code -- [StackBlitz](https://stackblitz.com/) – Sofortige Full-Stack-Webentwicklung +**Cloud-basierte IDEs** (Verschiedene Preise) +- [GitHub Codespaces](https://github.com/features/codespaces) – Vollständiges VS Code im Browser +- [Replit](https://replit.com/) – Ideal zum Lernen und Teilen von Code +- [StackBlitz](https://stackblitz.com/) – Sofortige Full-Stack-Webentwicklung -> 💡 **Einstiegstipp**: Fang mit Visual Studio Code an – es ist kostenlos, in der Branche weit verbreitet und hat eine riesige Community, die hilfreiche Tutorials und Erweiterungen erstellt. +> 💡 **Einstiegstipp**: Starte mit Visual Studio Code – es ist kostenlos, in der Branche weit verbreitet und hat eine riesige Community, die hilfreiche Tutorials und Erweiterungen erstellt. ### Webbrowser: Dein geheimes Entwicklungslabor -Bereite dich darauf vor, völlig begeistert zu sein! Du weißt, wie du Browser benutzt, um durch soziale Medien zu scrollen und Videos anzusehen? Nun, es stellt sich heraus, dass sie die ganze Zeit diesen unglaublichen geheimen Entwickler-Laborraum versteckt hatten, nur darauf wartend, dass du ihn entdeckst! +Okay, mach dich bereit, total überrascht zu werden! Du nutzt Browser ja bisher, um durch Social Media zu scrollen und Videos zu schauen, richtig? Dabei haben sie die ganze Zeit ein unglaubliches geheimes Entwicklerlabor versteckt – und warten nur darauf, dass du es entdeckst! -Jedes Mal, wenn du mit der rechten Maustaste auf eine Webseite klickst und „Element untersuchen“ wählst, öffnest du eine verborgene Welt von Entwicklerwerkzeugen, die ehrlich gesagt mächtiger sind als manche teure Software, für die ich früher hunderte Euro bezahlt habe. Es ist, als würdest du entdecken, dass deine ganz normale Küche hinter einer geheimen Tür ein Labor für Profiköche versteckt! -Als mir zum ersten Mal jemand die Browser-DevTools gezeigt hat, habe ich etwa drei Stunden damit verbracht, einfach nur herumzuklicken und zu denken: "WARTEN, DAS KANN DAS AUCH?!" Du kannst wirklich jede Website in Echtzeit bearbeiten, genau sehen, wie schnell alles lädt, testen, wie deine Seite auf verschiedenen Geräten aussieht, und sogar JavaScript wie ein echter Profi debuggen. Das ist absolut verblüffend! +Jedes Mal, wenn du mit der rechten Maustaste auf eine Webseite klickst und „Element untersuchen“ wählst, öffnest du eine verborgene Welt von Entwicklerwerkzeugen, die ehrlicherweise mächtiger sind als manche teure Software, für die ich früher hunderte von Euro bezahlt habe. Es ist, als würdest du entdecken, dass deine ganz normale Küche hinter einer geheimen Klappe ein Profi-Küchenlabor beherbergt! +Als mir zum ersten Mal jemand die Browser-DevTools zeigte, verbrachte ich etwa drei Stunden damit, einfach nur herumzuklicken und zu denken: „WARTEN, DAS KANN ER AUCH?!“ Du kannst buchstäblich jede Website in Echtzeit bearbeiten, genau sehen, wie schnell alles lädt, testen, wie deine Seite auf verschiedenen Geräten aussieht, und sogar JavaScript wie ein echter Profi debuggen. Es ist absolut faszinierend! -**Deshalb sind Browser dein geheimer Trumpf:** +**Darum sind Browser deine Geheimwaffe:** -Wenn du eine Website oder Webanwendung erstellst, musst du sehen, wie sie in der realen Welt aussieht und sich verhält. Browser zeigen nicht nur deine Arbeit an, sondern liefern auch detailliertes Feedback zu Leistung, Zugänglichkeit und möglichen Problemen. +Wenn du eine Website oder Webanwendung erstellst, musst du sehen, wie sie in der realen Welt aussieht und sich verhält. Browser zeigen nicht nur dein Werk an, sondern liefern auch detailliertes Feedback zur Performance, Zugänglichkeit und zu potenziellen Problemen. -#### Browser-Entwicklertools (DevTools) +#### Browser Developer Tools (DevTools) -Moderne Browser enthalten umfassende Entwicklungspakete: +Moderne Browser beinhalten umfangreiche Entwicklungstools: -| Tool-Kategorie | Was es macht | Beispielanwendung | -|---------------|--------------|------------------| -| **Element-Inspektor** | HTML/CSS in Echtzeit ansehen und bearbeiten | Styling anpassen, um sofortige Ergebnisse zu sehen | +| Toolkategorie | Was es macht | Beispielanwendung | +|---------------|--------------|-------------------| +| **Element-Inspektor** | HTML/CSS in Echtzeit ansehen und editieren | Stil anpassen und sofortige Ergebnisse sehen | | **Konsole** | Fehlermeldungen ansehen und JavaScript testen | Probleme debuggen und mit Code experimentieren | -| **Netzwerk-Monitor** | Nachverfolgen, wie Ressourcen geladen werden | Leistung und Ladezeiten optimieren | -| **Zugänglichkeits-Prüfer** | Inklusives Design testen | Sicherstellen, dass deine Seite für alle Nutzer funktioniert | -| **Geräte-Simulator** | Vorschau auf verschiedenen Bildschirmgrößen | Responsives Design ohne mehrere Geräte testen | +| **Netzwerkmonitor** | Nachverfolgen, wie Ressourcen geladen werden | Performance und Ladezeiten optimieren | +| **Zugänglichkeitsprüfer** | Auf inklusive Gestaltung testen | Sicherstellen, dass deine Seite für alle Nutzer funktioniert | +| **Gerätesimulator** | Vorschau auf verschiedenen Bildschirmgrößen | Responsive Design ohne mehrere Geräte testen | #### Empfohlene Browser für die Entwicklung - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Industriestandard DevTools mit umfangreicher Dokumentation -- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Hervorragende CSS Grid- und Zugänglichkeits-Tools -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Aufbau auf Chromium mit Microsofts Entwicklerressourcen +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Hervorragende CSS Grid- und Zugänglichkeitswerkzeuge +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Auf Chromium basierend mit Microsofts Entwicklerressourcen -> ⚠️ **Wichtiger Test-Tipp**: Teste deine Websites immer in mehreren Browsern! Was in Chrome perfekt funktioniert, kann in Safari oder Firefox anders aussehen. Professionelle Entwickler testen in allen großen Browsern, um konsistente Nutzererfahrungen zu gewährleisten. +> ⚠️ **Wichtiger Test-Tipp**: Teste deine Websites immer in mehreren Browsern! Was in Chrome perfekt funktioniert, kann in Safari oder Firefox anders aussehen. Professionelle Entwickler testen in allen wichtigen Browsern, um eine konsistente Nutzererfahrung sicherzustellen. -### Kommandozeilen-Tools: Dein Tor zu Entwickler-Superkräften +### Kommandozeilen-Tools: Dein Zugang zu Entwickler-Superkräften -Okay, jetzt mal ehrlich zum Thema Kommandozeile, denn ich will, dass du das von jemandem hörst, der es wirklich versteht. Als ich sie zum ersten Mal sah – nur dieser furchteinflößende schwarze Bildschirm mit blinkendem Text – dachte ich buchstäblich: „Nee, auf keinen Fall! Das sieht aus wie aus einem Hackerfilm der 1980er, und ich bin auf keinen Fall schlau genug dafür!“ 😅 +Okay, lass uns ganz ehrlich sein über die Kommandozeile, denn ich möchte, dass du das von jemandem hörst, der es wirklich versteht. Als ich sie zum ersten Mal sah – nur dieser beängstigende schwarze Bildschirm mit blinkendem Text – dachte ich buchstäblich: „Nein, auf keinen Fall! Das sieht aus wie aus einem Hacker-Film der 80er, und ich bin definitiv nicht klug genug dafür!“ 😅 -Aber hier ist, was ich mir damals gewünscht hätte, dass mir jemand sagt, und was ich dir jetzt sage: Die Kommandozeile ist nicht gruselig – sie ist tatsächlich wie ein direktes Gespräch mit deinem Computer. Stell sie dir vor wie den Unterschied zwischen Essen über eine schicke App mit Bildern und Menüs zu bestellen (was nett und einfach ist) und deinem Lieblingsrestaurant vor Ort, wo der Koch genau weiß, was du magst, und dir etwas Perfektes zaubert, nur weil du sagst „Überrasche mich mit etwas Großartigem.“ +Aber hier ist, was ich mir damals gewünscht hätte, dass mir jemand sagt, und was ich dir gerade jetzt erzähle: Die Kommandozeile ist nicht beängstigend – sie ist eigentlich wie ein direkter Dialog mit deinem Computer. Stell es dir vor wie der Unterschied zwischen Essen über eine schicke App mit Bildern und Menüs zu bestellen (was nett und einfach ist) und deinem Lieblingsrestaurant vor Ort, wo der Koch genau weiß, was du magst und etwas Perfektes zaubert, wenn du sagst: „Überrasche mich mit etwas Tollem.“ -Die Kommandozeile ist der Ort, an dem Entwickler sich wie absolute Zauberer fühlen. Du tippst ein paar scheinbar magische Worte ein (okay, es sind nur Befehle, aber sie fühlen sich magisch an!), drückst Enter und BOOM – du hast komplette Projektstrukturen erstellt, leistungsstarke Werkzeuge aus der ganzen Welt installiert oder deine App ins Internet für Millionen von Menschen gestellt. Wenn du diesen ersten Vorgeschmack auf diese Macht hast, ist das ehrlich gesagt ziemlich süchtig machend! +Die Kommandozeile ist der Ort, an dem Entwickler sich wie absolute Zauberer fühlen. Du tippst ein paar scheinbar magische Wörter (okay, es sind Befehle, aber sie fühlen sich magisch an!), drückst Enter und BOOM – du hast ganze Projektstrukturen erstellt, mächtige Tools aus der ganzen Welt installiert oder deine App ins Internet gestellt, damit Millionen sie sehen können. Wenn du einmal diese Macht gespürt hast, wird es ehrlich gesagt ziemlich süchtig machen! -**Warum die Kommandozeile dein Lieblingswerkzeug wird:** +**Darum wird die Kommandozeile dein Lieblingstool sein:** -Während grafische Oberflächen für viele Aufgaben großartig sind, glänzt die Kommandozeile bei Automatisierung, Präzision und Geschwindigkeit. Viele Entwicklungswerkzeuge funktionieren hauptsächlich über Kommandozeilen-Schnittstellen, und das effiziente Lernen ihrer Nutzung kann deine Produktivität dramatisch steigern. +Während grafische Oberflächen für viele Aufgaben großartig sind, glänzt die Kommandozeile bei Automatisierung, Präzision und Geschwindigkeit. Viele Entwicklungstools arbeiten hauptsächlich über Kommandozeilenschnittstellen, und sie effizient zu nutzen, kann deine Produktivität drastisch steigern. ```bash # Schritt 1: Erstellen und navigieren Sie zum Projektverzeichnis @@ -603,8 +601,8 @@ cd my-awesome-website ``` **Das macht dieser Code:** -- **Ein neues Verzeichnis namens "my-awesome-website"** für dein Projekt erstellen -- **Ins neu erstellte Verzeichnis wechseln,** um mit der Arbeit zu beginnen +- **Erstellt** ein neues Verzeichnis namens „my-awesome-website“ für dein Projekt +- **Wechselt** in das neu erstellte Verzeichnis, um die Arbeit zu beginnen ```bash # Schritt 2: Projekt mit package.json initialisieren @@ -616,13 +614,13 @@ npm install --save-dev @eslint/js ``` **Schritt für Schritt passiert Folgendes:** -- **Initialisierung** eines neuen Node.js-Projekts mit Standardeinstellungen via `npm init -y` -- **Installation** von Vite als modernes Build-Tool für schnelle Entwicklung und Produktions-Builds -- **Hinzufügen** von Prettier für automatische Code-Formatierung und ESLint für Code-Qualitätsprüfungen -- **Verwendung** des `--save-dev` Flags, um diese als reine Entwicklungsabhängigkeiten zu markieren +- **Initialisiert** ein neues Node.js-Projekt mit den Standard-Einstellungen via `npm init -y` +- **Installiert** Vite als modernes Build-Tool für schnelle Entwicklung und Produktions-Builds +- **Fügt hinzu** Prettier für automatische Code-Formatierung und ESLint für Code-Qualitätsprüfungen +- **Verwendet** den `--save-dev`-Schalter, um diese als reine Entwicklungsabhängigkeiten zu markieren ```bash -# Schritt 3: Projektstruktur und Dateien erstellen +# Schritt 3: Erstellen Sie die Projektstruktur und Dateien mkdir src assets echo 'My Site

Hello World

' > index.html @@ -631,30 +629,30 @@ npx vite ``` **Oben haben wir:** -- **Unser Projekt organisiert,** indem wir separate Ordner für Quellcode und Assets erstellt haben -- **Eine einfache HTML-Datei** mit korrekter Dokumentstruktur generiert -- **Den Vite-Entwicklungsserver gestartet** für Live Reloading und Hot Module Replacement +- **Organisiert** unser Projekt durch separate Ordner für Quellcode und Assets +- **Generiert** eine einfache HTML-Datei mit korrektem Dokumentaufbau +- **Gestartet** den Vite-Entwicklungsserver für Live-Reloading und Hot-Module-Replacement -#### Unverzichtbare Kommandozeilen-Tools für Webentwicklung +#### Unverzichtbare Kommandozeilentools für Webentwicklung | Tool | Zweck | Warum du es brauchst | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | Versionskontrolle | Änderungen nachverfolgen, mit anderen zusammenarbeiten, Arbeit sichern | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript-Laufzeit & Paketverwaltung | JavaScript außerhalb des Browsers ausführen, moderne Entwicklungswerkzeuge installieren | -| **[Vite](https://vitejs.dev/)** | Build-Tool & Entwicklungsserver | Blitzschnelle Entwicklung mit Hot Module Replacement | -| **[ESLint](https://eslint.org/)** | Code-Qualität | Automatisch Probleme im JavaScript finden und beheben | -| **[Prettier](https://prettier.io/)** | Code-Formatierung | Deinen Code einheitlich formatiert und lesbar halten | +| **[Git](https://git-scm.com/)** | Versionskontrolle | Änderungen verfolgen, mit anderen zusammenarbeiten, Backup erstellen | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript-Laufzeit & Paketverwaltung | JavaScript außerhalb von Browsern ausführen, moderne Entwicklungstools installieren | +| **[Vite](https://vitejs.dev/)** | Build-Tool & Dev-Server | Sehr schnelle Entwicklung mit Hot-Module-Replacement | +| **[ESLint](https://eslint.org/)** | Codequalität | Probleme im JavaScript automatisch finden und beheben | +| **[Prettier](https://prettier.io/)** | Codeformatierung | Deinen Code durchgängig formatiert und lesbar halten | #### Plattform-spezifische Optionen **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Moderner, funktionsreicher Terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Leistungsstarke Skriptumgebung -- **[Eingabeaufforderung (Command Prompt)](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Traditionelle Windows-Kommandozeile +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Leistungsfähige Skriptumgebung +- **[Eingabeaufforderung](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Traditionelle Windows-Kommandozeile **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Eingebaute Terminal-Anwendung -- **[iTerm2](https://iterm2.com/)** – Erweiterter Terminal mit erweiterten Funktionen +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Eingebautes Terminalprogramm +- **[iTerm2](https://iterm2.com/)** – Erweitertes Terminal mit zusätzlichen Features **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standard-Linux-Shell @@ -662,124 +660,124 @@ npx vite > 💻 = Vorinstalliert im Betriebssystem -> 🎯 **Lernpfad**: Beginne mit grundlegenden Befehlen wie `cd` (Verzeichnis wechseln), `ls` oder `dir` (Dateien auflisten) und `mkdir` (Ordner erstellen). Übe mit modernen Workflow-Befehlen wie `npm install`, `git status` und `code .` (öffnet das aktuelle Verzeichnis in VS Code). Mit zunehmendem Komfort wirst du automatisch fortgeschrittenere Befehle und Automatisierungstechniken lernen. +> 🎯 **Lernpfad**: Starte mit Basisbefehlen wie `cd` (Verzeichnis wechseln), `ls` oder `dir` (Dateien auflisten) und `mkdir` (Ordner erstellen). Übe moderne Workflow-Befehle wie `npm install`, `git status` und `code .` (öffnet das aktuelle Verzeichnis in VS Code). Je sicherer du wirst, desto mehr wirst du fortgeschrittene Befehle und Automatisierungstechniken kennenlernen. -### Dokumentation: Dein immer verfügbarer Lernmentor +### Dokumentation: Dein jederzeit verfügbarer Lernmentor -Okay, ich verrate dir ein kleines Geheimnis, das dich als Anfänger wirklich erleichtern wird: Selbst die erfahrensten Entwickler verbringen einen riesigen Teil ihrer Zeit mit dem Lesen von Dokumentation. Und das liegt nicht daran, dass sie nicht wissen, was sie tun – es ist tatsächlich ein Zeichen von Weisheit! +Okay, ich teile ein kleines Geheimnis, das dich viel entspannter macht, Anfänger zu sein: Selbst die erfahrensten Entwickler verbringen einen großen Teil ihrer Zeit mit Lesen von Dokumentationen. Und das nicht, weil sie keine Ahnung haben – sondern es ist tatsächlich ein Zeichen von Weisheit! -Denk an Dokumentation wie an den Zugang zu den geduldigsten, wissendsten Lehrern der Welt, die jederzeit verfügbar sind. Bei einem Problem um 2 Uhr nachts? Dokumentation ist da mit einer warmen virtuellen Umarmung und genau der Antwort, die du brauchst. Du willst etwas über ein cooles neues Feature lernen, über das alle sprechen? Dokumentation unterstützt dich mit Schritt-für-Schritt-Beispielen. Du versuchst zu verstehen, warum etwas so funktioniert, wie es tut? Genau, die Dokumentation erklärt es dir auf eine Art, die endlich Sinn macht! +Sieh Dokumentation wie den Zugang zu den geduldigsten und kenntnisreichsten Lehrern der Welt, die 24/7 für dich da sind. Stehst du um 2 Uhr nachts vor einem Problem? Die Dokumentation ist da mit einer warmen virtuellen Umarmung und genau der Antwort, die du brauchst. Willst du eine coole neue Funktion lernen, über die alle sprechen? Die Dokumentation steht dir mit Schritt-für-Schritt-Beispielen zur Seite. Versucht du zu verstehen, warum etwas so funktioniert, wie es funktioniert? Genau, die Dokumentation erklärt dir alles, bis es endlich klick macht! -Etwas, das meine Perspektive komplett verändert hat: Die Welt der Webentwicklung bewegt sich unglaublich schnell, und niemand (wirklich niemand!) behält alles im Kopf. Ich habe Senior-Entwickler mit über 15 Jahren Erfahrung gesehen, die grundlegende Syntax nachschlagen, und weißt du was? Das ist nicht peinlich – das ist schlau! Es geht nicht darum, ein perfektes Gedächtnis zu haben; es geht darum, zu wissen, wo man verlässliche Antworten schnell findet und wie man sie anwendet. +Hier ist etwas, was meine Perspektive komplett verändert hat: Die Webentwicklung bewegt sich unglaublich schnell, und niemand (wirklich niemand!) behält alles im Kopf. Ich habe Senior Entwickler mit 15+ Jahren Erfahrung gesehen, wie sie grundlegende Syntax nachgeschlagen haben, und weißt du was? Das ist nicht peinlich – das ist schlau! Es geht nicht um perfektes Gedächtnis, sondern darum zu wissen, wo du verlässliche Antworten schnell findest und wie du sie anwendest. -**Hier passiert die eigentliche Magie:** +**Hier passiert die wahre Magie:** -Professionelle Entwickler verbringen einen bedeutenden Teil ihrer Zeit mit dem Lesen von Dokumentation – nicht weil sie nicht wissen, was sie tun, sondern weil der Webentwicklungsbereich sich so schnell entwickelt, dass es kontinuierliches Lernen braucht, um auf dem Laufenden zu bleiben. Gute Dokumentation hilft dir zu verstehen, nicht nur *wie* man etwas benutzt, sondern *warum* und *wann*. +Professionelle Entwickler verbringen viel Zeit mit Dokumentation – nicht weil sie keine Ahnung hätten, sondern weil die Webentwicklung sich so schnell verändert, dass kontinuierliches Lernen nötig ist. Gute Dokumentation hilft dir nicht nur zu verstehen, *wie* man etwas benutzt, sondern auch *warum* und *wann*. #### Unverzichtbare Dokumentationsressourcen **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Der Goldstandard für Webtechnologie-Dokumentation -- Umfassende Leitfäden für HTML, CSS und JavaScript -- Beinhaltet Informationen zur Browser-Kompatibilität -- Enthält praxisnahe Beispiele und interaktive Demos +- Goldstandard für Webtechnologie-Dokumentationen +- Umfassende Anleitungen zu HTML, CSS und JavaScript +- Enthält Browserkompatibilitätsinformationen +- Beinhaltet praktische Beispiele und interaktive Demos **[Web.dev](https://web.dev)** (von Google) - Moderne Best Practices der Webentwicklung - Leitfäden zur Performance-Optimierung -- Prinzipien für Zugänglichkeit und inklusives Design +- Zugänglichkeits- und inklusive Designprinzipien - Fallstudien aus echten Projekten **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ressourcen zur Entwicklung für den Edge-Browser -- Progressive Web-App-Anleitungen +- Ressourcen für die Entwicklung mit Edge Browser +- Progressive Web App-Anleitungen - Einblicke in plattformübergreifende Entwicklung **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - Strukturierte Lerncurricula - Videokurse von Branchenexperten -- Praxisnahe Programmierübungen +- Praktische Programmierübungen -> 📚 **Lernstrategie**: Versuche nicht, Dokumentation auswendig zu lernen – lerne vielmehr, wie du sie effizient navigierst. Lege häufig genutzte Referenzen als Lesezeichen an und übe die Suchfunktionen, um gezielt Informationen schnell zu finden. +> 📚 **Lernstrategie**: Versuche nicht, Dokumentation auswendig zu lernen – sondern lerne, sie effizient zu navigieren. Lege dir Lesezeichen für häufig genutzte Referenzen an und übe, die Suchfunktion zu nutzen, um schnell spezifische Informationen zu finden. -### 🔧 **Tool-Beherrschungs-Check: Was spricht dich an?** +### 🔧 **Tool-Mastery-Check: Was spricht dich am meisten an?** **Nimm dir einen Moment und überlege:** -- Welches Tool möchtest du als erstes ausprobieren? (Es gibt keine falsche Antwort!) -- Fühlt sich die Kommandozeile noch einschüchternd an oder bist du neugierig? -- Kannst du dir vorstellen, mit den Browser-DevTools hinter die Kulissen deiner Lieblingswebsites zu schauen? +- Welches Tool möchtest du zuerst ausprobieren? (Es gibt kein falsches Ergebnis!) +- Fühlst du dich von der Kommandozeile noch eingeschüchtert, oder bist du neugierig geworden? +- Kannst du dir vorstellen, Browser-DevTools zu nutzen, um hinter die Kulissen deiner Lieblingswebsites zu blicken? ```mermaid -pie title "Mit Werkzeugen verbrachte Entwicklerzeit" +pie title "Entwicklerzeit mit Werkzeugen" "Code Editor" : 40 - "Browser Testen" : 25 - "Kommandozeile" : 15 - "Dokumentation Lesen" : 15 + "Browser Testing" : 25 + "Command Line" : 15 + "Dokumentation lesen" : 15 "Debugging" : 5 ``` -> **Interessanter Einblick**: Die meisten Entwickler verbringen etwa 40 % ihrer Zeit im Code-Editor, aber schau mal, wie viel Zeit fürs Testen, Lernen und Problemlösen draufgeht. Programmieren ist nicht nur Code schreiben – es geht darum, Erlebnisse zu gestalten! +> **Interessante Erkenntnis**: Die meisten Entwickler verbringen etwa 40 % ihrer Zeit im Code-Editor, aber achte mal darauf, wie viel Zeit fürs Testen, Lernen und Problemlösen draufgeht. Programmieren ist nicht nur Code schreiben – es geht darum, Erlebnisse zu schaffen! -✅ **Zum Nachdenken**: Hier ist etwas Interessantes – wie denkst du, unterscheiden sich die Werkzeuge zum Erstellen von Websites (Entwicklung) von denen, die das Aussehen gestalten (Design)? Es ist wie der Unterschied zwischen einem Architekten, der ein schönes Haus entwirft, und dem Bauunternehmer, der es tatsächlich baut. Beides ist wichtig, aber sie brauchen unterschiedliche Werkzeugkästen! Diese Denkweise wird dir wirklich helfen, das große Ganze zu sehen, wie Websites lebendig werden. +✅ **Denk mal drüber nach**: Hier eine interessante Frage – wie denkst du, unterscheiden sich Tools für die Entwicklung von Webseiten von denen zum Design der Optik? Es ist wie der Unterschied zwischen einem Architekten, der ein schönes Haus plant, und dem Bauunternehmer, der es tatsächlich baut. Beides ist wichtig, aber sie brauchen unterschiedliche Werkzeugkästen! Diese Denkweise hilft dir wirklich, das große Ganze zu sehen, wie Websites entstehen. -## GitHub Copilot Agent Challenge 🚀 +## GitHub Copilot Agent Herausforderung 🚀 -Nutze den Agentenmodus, um die folgende Herausforderung zu meistern: +Nutze den Agent-Modus, um folgende Herausforderung zu meistern: -**Beschreibung:** Erkunde die Funktionen eines modernen Code-Editors oder einer IDE und zeige, wie sie deinen Arbeitsfluss als Webentwickler verbessern können. +**Beschreibung:** Erkunde die Funktionen eines modernen Code-Editors oder einer IDE und zeige, wie er deinen Workflow als Webentwickler verbessern kann. -**Anweisung:** Wähle einen Code-Editor oder eine IDE (wie Visual Studio Code, WebStorm oder eine cloudbasierte IDE). Liste drei Funktionen oder Erweiterungen auf, die dir helfen, Code effizienter zu schreiben, zu debuggen oder zu verwalten. Gib für jede eine kurze Erklärung, wie sie deinen Workflow unterstützt. +**Aufgabe:** Wähle einen Code-Editor oder eine IDE (z. B. Visual Studio Code, WebStorm oder eine Cloud-basierte IDE). Liste drei Features oder Erweiterungen auf, die dir helfen, Code effizienter zu schreiben, zu debuggen oder zu verwalten. Erläutere für jedes kurz, wie es deinen Workflow unterstützt. --- ## 🚀 Herausforderung -**Bereit für deinen ersten Fall, Detektiv?** +**Also, Detektiv, bereit für deinen ersten Fall?** -Jetzt, wo du diese tolle Grundlage hast, wartet ein Abenteuer auf dich, das dir zeigt, wie unglaublich vielfältig und faszinierend die Programmierwelt wirklich ist. Und keine Sorge – es geht noch nicht darum, Code zu schreiben, also kein Stress! Stell dir vor, du bist ein Programmiersprachen-Detektiv bei deinem allerersten spannenden Fall! +Jetzt, wo du diese tolle Grundlage hast, habe ich ein Abenteuer für dich, das dir zeigt, wie unglaublich vielfältig und faszinierend die Programmierwelt wirklich ist. Und hör zu – es geht hier noch nicht ums Programmieren, also kein Druck! Denk an dich wie an einen Programmier-Sprachdetektiv bei deinem allerersten spannenden Fall! -**Deine Mission, solltest du sie annehmen:** -1. **Werde ein Sprachentdecker:** Wähle drei Programmiersprachen aus völlig unterschiedlichen Welten – vielleicht eine zum Erstellen von Websites, eine für mobile Apps und eine für die Datenverarbeitung in der Wissenschaft. Finde Beispiele für dieselbe einfache Aufgabe, geschrieben in jeder Sprache. Ich verspreche dir, du wirst erstaunt sein, wie unterschiedlich sie aussehen können, obwohl sie das Gleiche tun! +**Deine Mission, falls du sie annimmst:** +1. **Werde Sprachentdecker**: Wähle drei Programmiersprachen aus völlig unterschiedlichen Welten – vielleicht eine, die Websites baut, eine, die mobile Apps erstellt, und eine, die Daten für Wissenschaftler auswertet. Finde Beispiele für die gleiche einfache Aufgabe, jeweils in jeder Sprache geschrieben. Ich verspreche dir, du wirst absolut erstaunt sein, wie unterschiedlich sie aussehen, obwohl sie genau dasselbe machen! -2. **Ergründe ihre Ursprungsgeschichten:** Was macht jede Sprache besonders? Ein cooler Fakt – jede einzelne Programmiersprache wurde erstellt, weil jemand dachte: „Weißt du was? Es muss einen besseren Weg geben, dieses spezielle Problem zu lösen.“ Kannst du herausfinden, welche Probleme das waren? Einige dieser Geschichten sind wirklich faszinierend! +2. **Entdecke ihre Ursprungsgeschichten**: Was macht jede Sprache besonders? Hier ein cooler Fakt – jede Programmiersprache wurde geschaffen, weil jemand dachte: „Weißt du was? Es muss einen besseren Weg geben, genau dieses Problem zu lösen.“ Kannst du herausfinden, welche Probleme das waren? Einige dieser Geschichten sind wirklich faszinierend! -3. **Lerne die Communities kennen:** Schau dir an, wie einladend und leidenschaftlich die Community jeder Sprache ist. Manche haben Millionen Entwickler, die Wissen teilen und sich gegenseitig helfen, andere sind kleiner, aber unglaublich eng verbunden und unterstützend. Du wirst die verschiedenen Persönlichkeiten dieser Communities lieben! +3. **Lerne die Communities kennen**: Sieh dir an, wie willkommen heißend und leidenschaftlich die Community jeder Sprache ist. Manche haben Millionen von Entwicklern, die Wissen teilen und einander helfen, andere sind kleiner aber sehr eng verbunden und unterstützend. Du wirst die verschiedenen Persönlichkeiten dieser Communities lieben! -4. **Folge deinem Bauchgefühl:** Welche Sprache fühlt sich gerade am zugänglichsten für dich an? Mach dir keinen Stress mit der „perfekten“ Wahl – hör einfach auf dein Bauchgefühl! Es gibt wirklich keine falsche Antwort, und du kannst später immer weitere Sprachen erkunden. +4. **Vertrau deinem Bauchgefühl**: Welche Sprache wirkt gerade am zugänglichsten für dich? Mach dir keinen Stress wegen der „perfekten“ Wahl – hör einfach auf dein Gefühl! Es gibt ehrlich gesagt keine falsche Antwort, und du kannst später immer andere erkunden. -**Bonus-Detektivarbeit:** Finde heraus, welche großen Websites oder Apps mit jeder Sprache gebaut sind. Ich garantiere dir, du wirst überrascht sein, zu erfahren, was Instagram, Netflix oder dieses mobile Spiel antreibt, das du einfach nicht mehr aus der Hand legen kannst! +**Bonus-Detektivarbeit**: Finde heraus, welche großen Websites oder Apps mit jeder Sprache gebaut wurden. Ich garantiere dir, du wirst schockiert sein, was Instagram, Netflix oder dein Lieblings-Mobilspiel antreibt! -> 💡 **Denke daran:** Du versuchst heute nicht, Experte in einer dieser Sprachen zu werden. Du lernst erstmal nur die Nachbarschaft kennen, bevor du dich entscheidest, wo du dich niederlassen willst. Nimm dir Zeit, hab Spaß dabei und lass dich von deiner Neugier leiten! +> 💡 **Denke daran**: Du musst heute kein Experte in irgendeiner dieser Sprachen werden. Du lernst nur die Nachbarschaft kennen, bevor du entscheidest, wo du dich niederlassen möchtest. Nimm dir Zeit, hab Spaß dabei und lass deine Neugier leiten! ## Lass uns feiern, was du entdeckt hast! -Wow, du hast heute so viele unglaubliche Informationen aufgenommen! Ich freue mich wirklich darauf zu sehen, wie viel von dieser großartigen Reise bei dir hängen geblieben ist. Und denk daran – das ist kein Test, bei dem du alles perfekt machen musst. Das ist eher eine Feier all der coolen Dinge, die du über diese faszinierende Welt gelernt hast, in die du bald eintauchst! +Heilige Makrele, du hast heute so viele unglaubliche Informationen aufgenommen! Ich freue mich wirklich darauf zu sehen, wie viel von dieser fantastischen Reise bei dir hängen geblieben ist. Und denk daran – das ist kein Test, bei dem du alles perfekt machen musst. Das ist eher eine Feier von all den coolen Dingen, die du über diese faszinierende Welt gelernt hast, in die du eintauchst! [Mach das Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/) -## Überprüfung & Selbststudium -**Nimm dir Zeit, um zu erkunden und dabei Spaß zu haben!** +## Rückblick & Selbststudium -Du hast heute viel geschafft, und darauf kannst du stolz sein! Jetzt kommt der spaßige Teil – die Themen zu erforschen, die deine Neugier geweckt haben. Denk daran, das ist keine Hausaufgabe – es ist ein Abenteuer! +**Nimm dir Zeit, um zu erkunden und Spaß zu haben!** +Du hast heute eine Menge geschafft, und darauf kannst du wirklich stolz sein! Jetzt kommt der spaßige Teil – das Erkunden der Themen, die deine Neugier geweckt haben. Denk daran, das ist keine Hausaufgabe – es ist ein Abenteuer! **Tauche tiefer ein in das, was dich begeistert:** -**Arbeite praktisch mit Programmiersprachen:** +**Werde praktisch mit Programmiersprachen:** - Besuche die offiziellen Webseiten von 2-3 Sprachen, die deine Aufmerksamkeit erregt haben. Jede hat ihre eigene Persönlichkeit und Geschichte! -- Probiere einige Online-Coding-Playgrounds wie [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) oder [Replit](https://replit.com/). Hab keine Angst zu experimentieren – du kannst nichts kaputt machen! -- Lies darüber, wie deine Lieblingssprache entstanden ist. Wirklich, einige dieser Ursprungsgeschichten sind faszinierend und helfen dir zu verstehen, warum Sprachen so funktionieren, wie sie es tun. +- Probiere einige Online-Coding-Spielplätze wie [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), oder [Replit](https://replit.com/) aus. Hab keine Angst zu experimentieren – du kannst nichts kaputt machen! +- Lies darüber, wie deine Lieblingssprache entstanden ist. Ehrlich, einige dieser Ursprungsgeschichten sind faszinierend und helfen dir zu verstehen, warum Sprachen so funktionieren, wie sie es tun. -**Mache dich vertraut mit deinen neuen Werkzeugen:** -- Lade Visual Studio Code herunter, falls du es noch nicht getan hast – es ist kostenlos und du wirst es lieben! -- Verbringe ein paar Minuten beim Stöbern im Extensions-Marktplatz. Es ist wie ein App-Store für deinen Code-Editor! -- Öffne die Entwicklerwerkzeuge deines Browsers und klicke einfach mal herum. Mach dir keine Sorgen, alles zu verstehen – lerne einfach, was dort ist. +**Werde vertraut mit deinen neuen Werkzeugen:** +- Lade Visual Studio Code herunter, falls du das noch nicht getan hast – es ist kostenlos und du wirst es lieben! +- Verbringe ein paar Minuten damit, im Extensions-Marktplatz zu stöbern. Es ist wie ein App-Store für deinen Code-Editor! +- Öffne die Entwicklertools deines Browsers und klicke dich einfach mal durch. Mach dir keine Sorgen, alles zu verstehen – gewöhne dich einfach an das, was dort ist. **Tritt der Community bei:** -- Folge einigen Entwickler-Communities auf [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) oder [GitHub](https://github.com/). Die Programmier-Community ist für Neulinge unglaublich einladend! -- Schau dir einige anfängerfreundliche Coding-Videos auf YouTube an. Es gibt so viele großartige Creators, die sich daran erinnern, wie es ist, neu anzufangen. -- Ziehe in Erwägung, lokalen Meetups oder Online-Communities beizutreten. Vertrau mir, Entwickler helfen gerne Neulingen! +- Folge einigen Entwickler-Communities auf [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), oder [GitHub](https://github.com/). Die Programmier-Community ist unglaublich offen und freundlich zu Neulingen! +- Schaue dir anfängerfreundliche Programmier-Videos auf YouTube an. Es gibt so viele großartige Creator, die sich daran erinnern, wie es ist, am Anfang zu stehen. +- Ziehe in Betracht, lokalen Meetups oder Online-Communities beizutreten. Vertrau mir, Entwickler lieben es, Neulingen zu helfen! -> 🎯 **Hör zu, das ist, was du dir merken sollst**: Du musst über Nacht kein Programmiergenie werden! Im Moment lernst du einfach diese erstaunliche neue Welt kennen, der du bald angehören wirst. Nimm dir Zeit, genieße die Reise, und denk daran – jeder Entwickler, den du bewunderst, saß einmal genau dort, wo du jetzt sitzt, voller Vorfreude und vielleicht ein wenig überwältigt. Das ist ganz normal und bedeutet, dass du es richtig machst! +> 🎯 **Merk dir Folgendes**: Von dir wird nicht erwartet, dass du über Nacht zum Programmier-Profi wirst! Im Moment lernst du gerade einfach nur diese erstaunliche neue Welt kennen, deren Teil du bald sein wirst. Nimm dir Zeit, genieße die Reise und denk daran – jeder Entwickler, den du bewunderst, saß einmal genau da, wo du jetzt sitzt, fühlte sich aufgeregt und vielleicht ein bisschen überfordert. Das ist völlig normal und zeigt, dass du auf dem richtigen Weg bist! @@ -787,70 +785,70 @@ Du hast heute viel geschafft, und darauf kannst du stolz sein! Jetzt kommt der s [Reading the Docs](assignment.md) -> 💡 **Ein kleiner Anstoß für deine Aufgabe**: Ich würde mich sehr freuen, wenn du einige Tools entdeckst, die wir noch nicht behandelt haben! Überspringe die Editoren, Browser und Kommandozeilen-Tools, über die wir schon gesprochen haben – da draußen gibt es ein ganzes unglaubliches Universum an großartigen Entwicklungstools, die nur darauf warten, entdeckt zu werden. Suche nach solchen, die aktiv gepflegt werden und lebendige, hilfsbereite Communities haben (diese haben meist die besten Tutorials und die unterstützendsten Menschen, wenn du mal festhängst und eine freundliche Hand brauchst). +> 💡 **Ein kleiner Anstoß für deine Aufgabe**: Ich würde es sehr lieben, wenn du einige Tools entdeckst, die wir noch nicht behandelt haben! Überspring die Editoren, Browser und Kommandozeilen-Tools, über die wir schon gesprochen haben – da draußen gibt es eine ganze unglaubliche Welt erstaunlicher Entwicklungstools, die nur darauf warten, entdeckt zu werden. Suche nach solchen, die aktiv gepflegt werden und lebendige, hilfsbereite Communities haben (diese bieten meist die besten Tutorials und die unterstützendsten Menschen, wenn du irgendwann mal feststeckst und eine helfende Hand brauchst). --- -## 🚀 Deine Programmierreise-Zeitleiste +## 🚀 Dein Programmier-Reiseplan ### ⚡ **Was du in den nächsten 5 Minuten tun kannst** -- [ ] Lesezeichen für 2-3 Webseiten von Programmiersprachen setzen, die dich angesprochen haben +- [ ] Lesezeichen für 2-3 Webseiten von Programmiersprachen setzen, die dein Interesse geweckt haben - [ ] Visual Studio Code herunterladen, falls noch nicht geschehen -- [ ] Die DevTools deines Browsers (F12) öffnen und auf irgendeiner Webseite herumklicken -- [ ] Einer Programmier-Community beitreten (Dev.to, Reddit r/webdev oder Stack Overflow) +- [ ] Die DevTools (F12) deines Browsers öffnen und auf irgendeiner Webseite herumklicken +- [ ] Einer Programmierer-Community beitreten (Dev.to, Reddit r/webdev oder Stack Overflow) ### ⏰ **Was du in dieser Stunde schaffen kannst** -- [ ] Das Quiz nach der Lektion abschließen und deine Antworten reflektieren +- [ ] Das Quiz nach der Lektion absolvieren und deine Antworten reflektieren - [ ] VS Code mit der GitHub Copilot-Erweiterung einrichten -- [ ] Ein "Hello World"-Beispiel online in 2 verschiedenen Programmiersprachen ausprobieren -- [ ] Ein "Day in the Life of a Developer"-Video auf YouTube anschauen -- [ ] Mit deiner Programmier-Sprachdetektivarbeit beginnen (aus der Challenge) +- [ ] Ein "Hello World"-Beispiel in 2 unterschiedlichen Programmiersprachen online ausprobieren +- [ ] Ein "Day in the Life of a Developer"-Video auf YouTube ansehen +- [ ] Mit deiner Programmiersprachen-Detektivarbeit beginnen (aus der Challenge) ### 📅 **Dein einwöchiges Abenteuer** - [ ] Die Aufgabe abschließen und 3 neue Entwicklungstools erkunden - [ ] 5 Entwickler oder Programmier-Accounts in sozialen Medien folgen -- [ ] Versuche, etwas Kleines in CodePen oder Replit zu bauen (auch nur "Hallo, [Dein Name]!") -- [ ] Einen Entwicklerblogpost über jemandes Programmierreise lesen +- [ ] Versuche, etwas Kleines in CodePen oder Replit zu bauen (selbst „Hello, [Dein Name]!“ zählt) +- [ ] Einen Entwickler-Blogbeitrag über die Programmierreise von jemandem lesen - [ ] An einem virtuellen Meetup teilnehmen oder einen Programmier-Vortrag anschauen -- [ ] Mit deinem gewählten Sprachlernprogramm online starten +- [ ] Beginne, deine gewählte Sprache mit Online-Tutorials zu lernen ### 🗓️ **Deine einmonatige Transformation** -- [ ] Dein erstes kleines Projekt bauen (auch eine einfache Webseite zählt!) -- [ ] Zu einem Open-Source-Projekt beitragen (fang mit Dokumentationskorrekturen an) -- [ ] Jemanden mentorieren, der gerade erst mit dem Programmieren beginnt -- [ ] Deine Entwickler-Portfolio-Webseite erstellen -- [ ] Dich mit lokalen Entwickler-Communities oder Lerngruppen verbinden -- [ ] Deinen nächsten Lern-Meilenstein planen +- [ ] Baue dein erstes kleines Projekt (selbst eine einfache Webseite zählt!) +- [ ] Trage zu einem Open-Source-Projekt bei (fang mit Dokumentationskorrekturen an) +- [ ] Mentoriere jemanden, der gerade erst mit dem Programmieren anfängt +- [ ] Erstelle deine Entwickler-Portfolio-Webseite +- [ ] Vernetze dich mit lokalen Entwickler-Communities oder Lerngruppen +- [ ] Fang an, deinen nächsten Lern-Meilenstein zu planen ### 🎯 **Abschließende Reflexion** **Bevor du weitermachst, nimm dir einen Moment zum Feiern:** -- Was hat dich heute am Programmieren besonders begeistert? -- Welches Tool oder Konzept möchtest du als Erstes erforschen? -- Wie fühlst du dich beim Start dieser Programmierreise? -- Welche Frage würdest du einem Entwickler gerade gerne stellen? +- Was hat dich heute beim Programmieren besonders begeistert? +- Welches Tool oder Konzept möchtest du zuerst erkunden? +- Wie fühlst du dich bei dem Start deiner Programmierreise? +- Welche Frage würdest du einem Entwickler gerade jetzt gern stellen? ```mermaid journey title Deine Reise zum Aufbau von Selbstvertrauen section Heute - Neugierig: 3: Du - Überwältigt: 4: Du - Aufgeregt: 5: Du + Neugierig: 3: You + Überwältigt: 4: You + Aufgeregt: 5: You section Diese Woche - Erkunden: 4: Du - Lernen: 5: Du - Verbinden: 4: Du + Erkunden: 4: You + Lernen: 5: You + Vernetzen: 4: You section Nächster Monat - Aufbauen: 5: Du - Selbstbewusst: 5: Du - Anderen Helfen: 5: Du + Aufbau: 5: You + Selbstbewusst: 5: You + Anderen Helfen: 5: You ``` -> 🌟 **Denk daran**: Jeder Experte war einmal Anfänger. Jeder erfahrene Entwickler hat sich genau so gefühlt wie du jetzt – begeistert, vielleicht ein wenig überwältigt und auf jeden Fall neugierig, was möglich ist. Du bist in großartiger Gesellschaft, und diese Reise wird unglaublich sein. Willkommen in der wundervollen Welt des Programmierens! 🎉 +> 🌟 **Denk daran**: Jeder Experte war einmal Anfänger. Jeder Senior-Entwickler hat sich genau so gefühlt wie du jetzt – aufgeregt, vielleicht etwas überfordert und definitiv neugierig, was alles möglich ist. Du bist in großartiger Gesellschaft, und diese Reise wird unglaublich sein. Willkommen in der wundervollen Welt des Programmierens! 🎉 --- **Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, kann nicht ausgeschlossen werden, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in der jeweiligen Originalsprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen. +Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, bitten wir zu beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Verwendung dieser Übersetzung entstehen. \ No newline at end of file diff --git a/translations/de/AGENTS.md b/translations/de/AGENTS.md index de9b07739..0499a5845 100644 --- a/translations/de/AGENTS.md +++ b/translations/de/AGENTS.md @@ -2,42 +2,42 @@ ## Projektübersicht -Dies ist ein Bildungs-Curriculum-Repository zum Lehren der Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, entwickelt von Microsoft Cloud Advocates, mit 24 praxisorientierten Lektionen, die JavaScript, CSS und HTML abdecken. +Dies ist ein Bildungs-Curriculum-Repository zum Erlernen der Grundlagen der Webentwicklung für Einsteiger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, der von Microsoft Cloud Advocates entwickelt wurde und 24 praxisorientierte Lektionen zu JavaScript, CSS und HTML umfasst. ### Hauptkomponenten - **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen -- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent -- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vor- und Nach-Lektionsbewertungen) -- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für 50+ Sprachen über GitHub Actions +- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Bank-App, Code-Editor und KI-Chat-Assistent +- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vor-/Nach-Lektion-Bewertungen) +- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für über 50 Sprachen via GitHub Actions - **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte) ### Architektur -- Bildungsrepository mit lektionbasierter Struktur -- Jeder Lektionen-Ordner enthält README, Codebeispiele und Lösungen +- Bildungs-Repository mit lektionenbasierter Struktur +- Jeder Lektionen-Ordner enthält README, Code-Beispiele und Lösungen - Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionenprojekte) - Übersetzungssystem mit GitHub Actions (co-op-translator) -- Dokumentation bereitgestellt via Docsify und als PDF verfügbar +- Dokumentation bereitgestellt über Docsify und als PDF verfügbar ## Setup-Befehle -Dieses Repository dient primär dem Konsumieren von Bildungsinhalten. Für das Arbeiten mit spezifischen Projekten: +Dieses Repository dient hauptsächlich dem Konsum von Bildungsinhalten. Für die Arbeit mit bestimmten Projekten: -### Haupt-Repository Setup +### Haupt-Repository-Setup ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz App Setup (Vue 3 + Vite) +### Quiz-App Setup (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Entwicklungsserver starten -npm run build # Für die Produktion bauen +npm run build # Für Produktion erstellen npm run lint # ESLint ausführen ``` @@ -51,7 +51,7 @@ npm run lint # ESLint ausführen npm run format # Mit Prettier formatieren ``` -### Browser-Erweiterungsprojekte +### Browser-Erweiterungs-Projekte ```bash cd 5-browser-extension/solution @@ -59,12 +59,12 @@ npm install # Befolgen Sie die browserspezifischen Anweisungen zum Laden der Erweiterung ``` -### Space Game Projekte +### Weltraumspiel-Projekte ```bash cd 6-space-game/solution npm install -# Öffnen Sie index.html im Browser oder verwenden Sie Live Server +# Öffne index.html im Browser oder verwende Live Server ``` ### Chat-Projekt (Python Backend) @@ -78,148 +78,148 @@ python api.py ## Entwicklungs-Workflow -### Für Inhaltsbeitragende +### Für Inhaltsbeiträge -1. **Repository forken** in dein GitHub-Konto -2. **Fork lokal klonen** -3. **Neuen Branch** für Änderungen erstellen -4. Änderungen an Lektionstexten oder Codebeispielen vornehmen -5. Codeänderungen in relevanten Projektordnern testen -6. Pull Requests gemäß den Beitragsrichtlinien einreichen +1. **Forken Sie das Repository** in Ihr GitHub-Konto +2. **Klonen Sie Ihren Fork** lokal +3. **Erstellen Sie einen neuen Branch** für Ihre Änderungen +4. Nehmen Sie Änderungen am Lektionstext oder Codebeispielen vor +5. Testen Sie Codeänderungen in relevanten Projektverzeichnissen +6. Reichen Sie Pull-Requests gemäß den Beitragsrichtlinien ein ### Für Lernende 1. Repository forken oder klonen -2. Lektionen-Ordner nacheinander durchgehen -3. README-Dateien jeder Lektion lesen -4. Pre-Lesson Quizze auf https://ff-quizzes.netlify.app/web/ absolvieren -5. Codebeispiele in Lektionen bearbeiten -6. Aufgaben und Herausforderungen abschließen -7. Post-Lektion Quizze durchführen +2. Navigieren Sie sequentiell durch die Lektionen-Ordner +3. Lesen Sie die README-Dateien für jede Lektion +4. Machen Sie Vor-Lektionen-Quizze unter https://ff-quizzes.netlify.app/web/ +5. Arbeiten Sie die Codebeispiele in den Lektionen-Ordnern durch +6. Erledigen Sie Aufgaben und Herausforderungen +7. Nehmen Sie an Nach-Lektionen-Quizzen teil ### Live-Entwicklung -- **Dokumentation**: `docsify serve` im Root-Verzeichnis ausführen (Port 3000) -- **Quiz-App**: `npm run dev` im quiz-app-Verzeichnis ausführen -- **Projekte**: VS Code Live Server Extension für HTML-Projekte nutzen -- **API-Projekte**: `npm start` in jeweiligen API-Ordnern ausführen +- **Dokumentation**: Führen Sie `docsify serve` im Root-Verzeichnis aus (Port 3000) +- **Quiz-App**: Führen Sie `npm run dev` im quiz-app-Verzeichnis aus +- **Projekte**: Verwenden Sie die VS Code Live Server-Erweiterung für HTML-Projekte +- **API-Projekte**: Führen Sie `npm start` in den jeweiligen API-Verzeichnissen aus ## Testanweisungen -### Quiz App Testen +### Quiz-App Testen ```bash cd quiz-app npm run lint # Überprüfen Sie auf Stilprobleme im Code -npm run build # Überprüfen Sie, ob der Build erfolgreich ist +npm run build # Stellen Sie sicher, dass der Build erfolgreich ist ``` -### Bank API Testen +### Bank-API Testen ```bash cd 7-bank-project/api npm run lint # Überprüfe auf Code-Stilprobleme -node server.js # Überprüfen, ob der Server ohne Fehler startet +node server.js # Verifiziere, dass der Server ohne Fehler startet ``` ### Allgemeiner Testansatz -- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests -- Manueller Test fokussiert auf: - - Codebeispiele laufen fehlerfrei - - Links in Dokumentation funktionieren korrekt - - Projekt-Builds laufen erfolgreich durch - - Beispiele folgen Best-Practices +- Dies ist ein Bildungs-Repository ohne umfassende automatisierte Tests +- Manuelles Testen konzentriert sich auf: + - Fehlerfreies Ausführen der Codebeispiele + - Funktionierende Links in der Dokumentation + - Erfolgreiche Projekt-Builds + - Einhaltung von Best Practices in den Beispielen -### Vor-Einreichungs-Checks +### Prüfungen vor dem Einreichen -- `npm run lint` in Verzeichnissen mit package.json ausführen -- Markdown-Links auf Gültigkeit prüfen -- Codebeispiele im Browser oder Node.js testen -- Übersetzungen auf korrekte Struktur prüfen +- Führen Sie `npm run lint` in Verzeichnissen mit package.json aus +- Überprüfen Sie die Gültigkeit der Markdown-Links +- Testen Sie Codebeispiele im Browser oder Node.js +- Stellen Sie sicher, dass Übersetzungen die Struktur beibehalten -## Code-Stil-Richtlinien +## Code-Stilrichtlinien ### JavaScript -- Moderne ES6+ Syntax verwenden -- Standard ESLint-Konfigurationen in Projekten einhalten -- Sinnvolle Variablen- und Funktionsnamen für Bildungszwecke nutzen -- Kommentare zur Erklärung von Konzepten hinzufügen -- Formatierung mit Prettier, wo konfiguriert +- Verwenden Sie moderne ES6+-Syntax +- Folgen Sie den standardmäßigen ESLint-Konfigurationen in den Projekten +- Verwenden Sie aussagekräftige Variablen- und Funktionsnamen zur besseren Verständlichkeit +- Fügen Sie Kommentare zur Erklärung von Konzepten für Lernende hinzu +- Formatieren Sie mit Prettier, wo konfiguriert ### HTML/CSS -- Semantische HTML5-Elemente verwenden -- Responsive Design-Prinzipien beachten +- Semantische HTML5-Elemente +- Prinzipien des responsiven Designs - Klare Klassennamen-Konventionen - Kommentare zur Erklärung von CSS-Techniken für Lernende ### Python -- PEP 8 Stilrichtlinien einhalten -- Klare, erklärende Codebeispiele -- Type-Hints wo sinnvoll für Lernzwecke +- PEP 8 Stilrichtlinien +- Klare, didaktische Codebeispiele +- Typ-Hinweise, wo hilfreich für das Lernen ### Markdown-Dokumentation -- Klare Überschriftenhierarchie +- Klare Gliederungshierarchie - Codeblöcke mit Sprachangabe -- Links zu weiterführenden Ressourcen -- Screenshots und Bilder in `images/` Verzeichnissen -- Alt-Text für Bilder zur Barrierefreiheit +- Verlinkung zu weiteren Ressourcen +- Screenshots und Bilder in `images/`-Verzeichnissen +- Alternativtexte für Bilder zur Barrierefreiheit ### Dateiorganisation -- Lektionen sequenziell nummeriert (1-getting-started-lessons, 2-js-basics, etc.) +- Lektionen fortlaufend nummeriert (1-getting-started-lessons, 2-js-basics usw.) - Jedes Projekt hat `solution/` und oft `start/` oder `your-work/` Verzeichnisse -- Bilder in lektionenspezifischen `images/` Ordnern gespeichert -- Übersetzungen in `translations/{language-code}/` Struktur +- Bilder in lektionenspezifischen `images/`-Ordnern gespeichert +- Übersetzungen in `translations/{language-code}/` Unterordnern ## Build und Deployment -### Quiz App Deployment (Azure Static Web Apps) +### Quiz-App Deployment (Azure Static Web Apps) -Die quiz-app ist für das Deployment auf Azure Static Web Apps konfiguriert: +Die quiz-app ist für Azure Static Web Apps Deployment konfiguriert: ```bash cd quiz-app npm run build # Erstellt den Ordner dist/ -# Führt Deployment über GitHub Actions Workflow bei Push auf main durch +# Führt die Bereitstellung über den GitHub Actions-Workflow bei Push auf main durch ``` Azure Static Web Apps Konfiguration: - **App-Standort**: `/quiz-app` -- **Ausgabestandort**: `dist` +- **Output-Standort**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Dokumentation PDF-Erstellung +### PDF-Erstellung der Dokumentation ```bash npm install # Installiere docsify-to-pdf -npm run convert # Generiere PDF aus Docs +npm run convert # Erzeuge PDF aus docs ``` ### Docsify Dokumentation ```bash npm install -g docsify-cli # Docsify global installieren -docsify serve # Lokalhost:3000 bedienen +docsify serve # Auf localhost:3000 bereitstellen ``` -### Projektspezifische Builds +### Projekt-spezifische Builds -Jedes Projektverzeichnis kann einen eigenen Build-Prozess haben: +Jedes Projektverzeichnis kann seinen eigenen Build-Prozess haben: - Vue-Projekte: `npm run build` erzeugt Produktions-Bundles - Statische Projekte: Kein Build-Schritt, Dateien werden direkt bereitgestellt ## Pull-Request-Richtlinien -### Titelformat +### Titel-Format -Klare, beschreibende Titel verwenden, die den Änderungsbereich angeben: +Verwenden Sie klare, beschreibende Titel, die den Änderungsbereich angeben: - `[Quiz-app] Neues Quiz für Lektion X hinzufügen` -- `[Lesson-3] Tippfehler im Terrarium-Projekt beheben` +- `[Lesson-3] Tippfehler im Terrarium-Projekt korrigieren` - `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen` - `[Docs] Setup-Anweisungen aktualisieren` @@ -228,55 +228,55 @@ Klare, beschreibende Titel verwenden, die den Änderungsbereich angeben: Vor dem Einreichen eines PR: 1. **Codequalität**: - - `npm run lint` in betroffenen Projektordnern ausführen - - Alle Linting-Fehler und -Warnungen beheben + - Führen Sie `npm run lint` in den betroffenen Projektverzeichnissen aus + - Beheben Sie alle Linting-Fehler und Warnungen 2. **Build-Verifikation**: - - `npm run build` ausführen, falls zutreffend - - Keine Build-Fehler zulassen + - Führen Sie ggf. `npm run build` aus + - Stellen Sie sicher, dass keine Build-Fehler auftreten 3. **Linkprüfung**: - - Alle Markdown-Links testen - - Funktionalität der Bildreferenzen prüfen + - Testen Sie alle Markdown-Links + - Überprüfen Sie Bildreferenzen 4. **Inhaltsprüfung**: - - Rechtschreibung und Grammatik prüfen - - Codebeispiele auf Korrektheit und pädagogischen Wert kontrollieren - - Übersetzungen auf Bedeutungstreue überprüfen + - Korrekturlesen auf Rechtschreibung und Grammatik + - Sicherstellen, dass Codebeispiele korrekt und didaktisch sind + - Überprüfen, dass Übersetzungen die Originalbedeutung wahren ### Beitragsanforderungen -- Microsoft CLA zustimmen (automatische Prüfung im ersten PR) -- Microsoft Open Source Code of Conduct einhalten: https://opensource.microsoft.com/codeofconduct/ -- Details in [CONTRIBUTING.md](./CONTRIBUTING.md) nachlesen -- Issue-Nummern wenn möglich im PR-Beschreibung referenzieren +- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR) +- Befolgung des [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für detaillierte Richtlinien +- Referenzierung von Issue-Nummern in der PR-Beschreibung, falls zutreffend -### Review-Prozess +### Überprüfungsprozess -- PRs werden von Maintainers und Community überprüft -- Pädagogische Klarheit hat Priorität -- Codebeispiele sollten aktuellen Best Practices folgen -- Übersetzungen auf Genauigkeit und kulturelle Angemessenheit geprüft +- PRs werden von Maintainers und Community geprüft +- Didaktische Klarheit hat Priorität +- Codebeispiele sollten den aktuellen Best Practices folgen +- Übersetzungen werden auf Genauigkeit und kulturelle Angemessenheit geprüft ## Übersetzungssystem ### Automatisierte Übersetzung -- Nutzt GitHub Actions mit co-op-translator Workflow -- Übersetzt automatisch in 50+ Sprachen -- Quelldateien in Hauptverzeichnissen -- Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen +- Verwendet GitHub Actions mit co-op-translator Workflow +- Übersetzt automatisch in über 50 Sprachen +- Quelldateien in den Hauptverzeichnissen +- Übersetzte Dateien in `translations/{language-code}/` Ordnern -### Manuelle Verbesserungen hinzufügen +### Manuelle Übersetzungsverbesserungen hinzufügen 1. Datei in `translations/{language-code}/` finden -2. Verbesserungen vornehmen, Struktur erhalten +2. Verbesserungen vornehmen und dabei die Struktur bewahren 3. Sicherstellen, dass Codebeispiele weiterhin funktionieren -4. Lokalisierte Quizinhalte testen +4. Eventuell lokalisierte Quiz-Inhalte testen ### Übersetzungs-Metadaten -Übersetzte Dateien enthalten Metadaten-Header: +Übersetzte Dateien enthalten Metadaten-Kopfzeile: ```markdown ``` -## Debugging und Fehlerbehebung +## Fehlerbehebung und Problembehandlung ### Häufige Probleme **Quiz-App startet nicht**: -- Node.js Version prüfen (v14+ empfohlen) -- `node_modules` und `package-lock.json` löschen, `npm install` neu ausführen -- Prüfen auf Port-Konflikte (Standard: Vite nutzt Port 5173) +- Überprüfen der Node.js-Version (v14+ empfohlen) +- Löschen von `node_modules` und `package-lock.json`, danach `npm install` ausführen +- Prüfen auf Port-Konflikte (Standard: Vite verwendet Port 5173) **API-Server startet nicht**: -- Node.js Version mindestens 10 prüfen +- Node.js-Version prüfen (node >=10) - Prüfen, ob Port bereits belegt ist -- Alle Abhängigkeiten mit `npm install` installieren +- Sicherstellen, dass alle Abhängigkeiten mit `npm install` installiert sind **Browser-Erweiterung lädt nicht**: -- Manifest.json korrekt formatiert prüfen +- Manifest.json auf korrekte Formatierung prüfen - Browser-Konsole auf Fehler überprüfen -- Browser-spezifische Installationsanweisungen befolgen +- Browser-spezifische Installationsanweisungen beachten -**Python Chat-Projekt Probleme**: +**Probleme mit Python-Chat-Projekt**: - OpenAI-Paket installiert? `pip install openai` - Umgebungsvariable GITHUB_TOKEN gesetzt? -- Zugriffsrechte für GitHub Modelle prüfen +- Zugriff auf GitHub-Modelle prüfen -**Docsify liefert keine Docs**: +**Docsify liefert keine Dokumentation aus**: - docsify-cli global installieren: `npm install -g docsify-cli` -- Vom Root-Verzeichnis des Repositorys starten +- Im Root-Verzeichnis des Repositories ausführen - Sicherstellen, dass `docs/_sidebar.md` existiert -### Tipps für Entwicklungsumgebung +### Tipps zur Entwicklungsumgebung -- VS Code mit Live Server Erweiterung für HTML-Projekte verwenden -- ESLint und Prettier Extensions für konsistentes Formatieren installieren -- Browser DevTools zum Debuggen von JavaScript nutzen -- Für Vue Projekte Vue DevTools Browser-Erweiterung verwenden +- VS Code mit Live Server-Erweiterung für HTML-Projekte verwenden +- ESLint- und Prettier-Erweiterungen für konsistente Formatierung installieren +- Browser-DevTools zum Debuggen von JavaScript nutzen +- Für Vue-Projekte Vue DevTools Browser-Erweiterung installieren -### Performance Überlegungen +### Performance-Überlegungen - Große Anzahl übersetzter Dateien (50+ Sprachen) führt zu großen Klonen -- Bei nur Content-Arbeiten shallow clone verwenden: `git clone --depth 1` -- Übersetzungen bei Suche nach englischem Inhalt ausnehmen -- Build-Prozesse können im ersten Lauf langsam sein (npm install, Vite Build) +- Verwenden Sie ein flaches Klon mit `git clone --depth 1`, wenn nur Inhalte bearbeitet werden +- Übersetzungen bei der Suche ausnehmen, wenn englische Inhalte bearbeitet werden +- Build-Prozesse können beim ersten Lauf langsam sein (npm install, Vite build) ## Sicherheitsüberlegungen ### Umgebungsvariablen -- API-Schlüssel dürfen niemals ins Repository gelangen -- `.env` Dateien verwenden (bereits in `.gitignore`) -- Benötigte Umgebungsvariablen in Projekt-READMEs dokumentieren +- API-Schlüssel dürfen nie im Repository gespeichert werden +- Verwenden Sie `.env` Dateien (bereits in `.gitignore` enthalten) +- Erforderliche Umgebungsvariablen in den Projekt-READMEs dokumentieren ### Python-Projekte -- Virtuelle Umgebungen nutzen: `python -m venv venv` +- Virtuelle Umgebungen verwenden: `python -m venv venv` - Abhängigkeiten aktuell halten -- GitHub Token mit minimal notwendigen Rechten nutzen +- GitHub-Tokens sollten nur minimale erforderliche Berechtigungen haben -### GitHub Modelle Zugriff +### Zugriff auf GitHub-Modelle -- Personal Access Tokens (PAT) für GitHub Modelle erforderlich +- Persönliche Zugriffstoken (PAT) werden für GitHub-Modelle benötigt - Tokens als Umgebungsvariablen speichern -- Tokens oder Zugangsdaten niemals committen +- Nie Tokens oder Anmeldedaten im Repository commiten -## Weitere Hinweise +## Zusätzliche Hinweise ### Zielgruppe -- Komplettanfänger in Webentwicklung +- Komplettanfänger in der Webentwicklung - Studierende und Selbstlernende - Lehrkräfte, die das Curriculum im Unterricht einsetzen -- Inhalte sind auf Zugänglichkeit und schrittweises Lernen ausgelegt +- Inhalte sind auf Zugänglichkeit und schrittweisen Kompetenzaufbau ausgelegt ### Pädagogische Philosophie -- Projektbasierter Lernansatz -- Regelmäßige Wissensabfragen (Quizze) -- Praktische Programmierübungen -- Beispiele aus der Praxis +- Projektbasiertes Lernen +- Häufige Wissensüberprüfungen (Quizze) +- Praktische Coding-Übungen +- Praxisnahe Beispiele - Fokus auf Grundlagen vor Frameworks -### Repository Wartung +### Repository-Wartung - Aktive Community von Lernenden und Beitragenden -- Regelmäßige Aktualisierungen von Abhängigkeiten und Inhalten +- Regelmäßige Updates von Abhängigkeiten und Inhalten - Issues und Diskussionen werden von Maintainers überwacht - Übersetzungsupdates automatisiert via GitHub Actions @@ -381,28 +381,28 @@ CO_OP_TRANSLATOR_METADATA: - [Microsoft Learn Module](https://docs.microsoft.com/learn/) - [Student Hub Ressourcen](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) empfohlen für Lernende -- Weitere Kurse: Generative AI, Data Science, ML, IoT Curricula verfügbar +- Weitere Kurse: Generative KI, Data Science, ML, IoT Curricula verfügbar ### Arbeiten mit spezifischen Projekten -Detaillierte Anweisungen zu einzelnen Projekten in den README-Dateien: +Für detaillierte Anweisungen zu einzelnen Projekten siehe README-Dateien in: - `quiz-app/README.md` - Vue 3 Quiz-Anwendung -- `7-bank-project/README.md` - Banking-Anwendung mit Authentifizierung -- `5-browser-extension/README.md` - Browsererweiterungsentwicklung +- `7-bank-project/README.md` - Bankanwendung mit Authentifizierung +- `5-browser-extension/README.md` - Entwicklung von Browser-Erweiterungen - `6-space-game/README.md` - Canvas-basiertes Spiel -- `9-chat-project/README.md` - KI-Chat-Assistent Projekt +- `9-chat-project/README.md` - KI-Chat-Assistent-Projekt ### Monorepo-Struktur -Obwohl kein klassisches Monorepo, enthält dieses Repository mehrere unabhängige Projekte: +Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte: - Jede Lektion ist eigenständig - Projekte teilen keine Abhängigkeiten -- Arbeit an einzelnen Projekten ohne Beeinträchtigung anderer -- Gesamtes Repo klonen für komplettes Curriculum-Erlebnis +- Arbeiten Sie an einzelnen Projekten, ohne andere zu beeinflussen +- Klonen Sie das gesamte Repository für die vollständige Curriculum-Erfahrung --- -**Haftungsausschluss**: -Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle, menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen. +**Haftungsausschluss**: +Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir nach Genauigkeit streben, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle anzusehen. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen. \ No newline at end of file diff --git a/translations/de/README.md b/translations/de/README.md index a6358fac4..046d7a0f7 100644 --- a/translations/de/README.md +++ b/translations/de/README.md @@ -10,259 +10,271 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Webentwicklung für Anfänger – Ein Lehrplan +# Webentwicklung für Anfänger - Ein Lehrplan -Lernen Sie die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele. Arbeiten Sie mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessern Sie Ihre Fähigkeiten und optimieren Sie die Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Beginnen Sie noch heute Ihre Programmierreise! +Lerne die Grundlagen der Webentwicklung mit unserem umfassenden 12-wöchigen Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen vertieft JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Engagiere dich mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessere deine Fähigkeiten und optimiere dein Wissensspeicher mit unserer effektiven projektbasierten Didaktik. Starte noch heute deine Programmierreise! -Treten Sie der Azure AI Foundry Discord-Community bei +Tritt der Azure AI Foundry Discord Community bei [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Folgen Sie diesen Schritten, um mit diesen Ressourcen zu starten: -1. **Repository forken**: Klicken Sie auf [![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) +Folge diesen Schritten, um die Ressourcen zu nutzen: +1. **Repository forken**: Klicke [![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. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Treten Sie dem Azure AI Foundry Discord bei und treffen Sie Experten und andere Entwickler**](https://discord.com/invite/ByRwuEEgH4) +3. [**Tritt dem Azure AI Foundry Discord bei und triff Experten und andere Entwickler**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Mehrsprachige Unterstützung -#### Unterstützt durch GitHub Action (Automatisiert & Immer Aktuell) +#### Unterstützt über GitHub Action (Automatisiert & immer aktuell) -[Arabisch](../ar/README.md) | [Bengalisch](../bn/README.md) | [Bulgarisch](../bg/README.md) | [Birmanisch (Myanmar)](../my/README.md) | [Chinesisch (vereinfacht)](../zh-CN/README.md) | [Chinesisch (traditionell, Hongkong)](../zh-HK/README.md) | [Chinesisch (traditionell, Macau)](../zh-MO/README.md) | [Chinesisch (traditionell, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tschechisch](../cs/README.md) | [Dänisch](../da/README.md) | [Niederländisch](../nl/README.md) | [Estnisch](../et/README.md) | [Finnisch](../fi/README.md) | [Französisch](../fr/README.md) | [Deutsch](./README.md) | [Griechisch](../el/README.md) | [Hebräisch](../he/README.md) | [Hindi](../hi/README.md) | [Ungarisch](../hu/README.md) | [Indonesisch](../id/README.md) | [Italienisch](../it/README.md) | [Japanisch](../ja/README.md) | [Kannada](../kn/README.md) | [Koreanisch](../ko/README.md) | [Litauisch](../lt/README.md) | [Malaiisch](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalesisch](../ne/README.md) | [Nigerianisches Pidgin](../pcm/README.md) | [Norwegisch](../no/README.md) | [Persisch (Farsi)](../fa/README.md) | [Polnisch](../pl/README.md) | [Portugiesisch (Brasilien)](../pt-BR/README.md) | [Portugiesisch (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumänisch](../ro/README.md) | [Russisch](../ru/README.md) | [Serbisch (Kyrillisch)](../sr/README.md) | [Slowakisch](../sk/README.md) | [Slowenisch](../sl/README.md) | [Spanisch](../es/README.md) | [Swahili](../sw/README.md) | [Schwedisch](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailändisch](../th/README.md) | [Türkisch](../tr/README.md) | [Ukrainisch](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamesisch](../vi/README.md) +[Arabisch](../ar/README.md) | [Bengalisch](../bn/README.md) | [Bulgarisch](../bg/README.md) | [Birmanisch (Myanmar)](../my/README.md) | [Chinesisch (vereinfacht)](../zh-CN/README.md) | [Chinesisch (traditionell, Hongkong)](../zh-HK/README.md) | [Chinesisch (traditionell, Macau)](../zh-MO/README.md) | [Chinesisch (traditionell, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tschechisch](../cs/README.md) | [Dänisch](../da/README.md) | [Niederländisch](../nl/README.md) | [Estnisch](../et/README.md) | [Finnisch](../fi/README.md) | [Französisch](../fr/README.md) | [Deutsch](./README.md) | [Griechisch](../el/README.md) | [Hebräisch](../he/README.md) | [Hindi](../hi/README.md) | [Ungarisch](../hu/README.md) | [Indonesisch](../id/README.md) | [Italienisch](../it/README.md) | [Japanisch](../ja/README.md) | [Kannada](../kn/README.md) | [Koreanisch](../ko/README.md) | [Litauisch](../lt/README.md) | [Malaiisch](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalesisch](../ne/README.md) | [Nigerianisches Pidgin](../pcm/README.md) | [Norwegisch](../no/README.md) | [Persisch (Farsi)](../fa/README.md) | [Polnisch](../pl/README.md) | [Portugiesisch (Brasilien)](../pt-BR/README.md) | [Portugiesisch (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumänisch](../ro/README.md) | [Russisch](../ru/README.md) | [Serbisch (Kyrillisch)](../sr/README.md) | [Slowakisch](../sk/README.md) | [Slowenisch](../sl/README.md) | [Spanisch](../es/README.md) | [Suaheli](../sw/README.md) | [Schwedisch](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailändisch](../th/README.md) | [Türkisch](../tr/README.md) | [Ukrainisch](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamesisch](../vi/README.md) > **Lieber lokal klonen?** - -> Dieses Repository enthält über 50 Sprachübersetzungen, was die Download-Größe erheblich erhöht. Um ohne Übersetzungen zu klonen, nutzen Sie sparse checkout: +> +> Dieses Repository enthält über 50 Sprachübersetzungen, was die Download-Größe erheblich erhöht. Um ohne Übersetzungen zu klonen, verwende 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' > ``` -> So erhalten Sie alles, was Sie benötigen, um den Kurs mit einem viel schnelleren Download abzuschließen. +> +> **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" +> ``` +> +> Damit erhältst du alles, um den Kurs zu absolvieren – und der Download geht viel schneller. -**Wenn Sie weitere Übersetzungssprachen wünschen, finden Sie die unterstützten Sprachen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Wenn du weitere Übersetzungen wünschst, findest du die unterstützten Sprachen [hier](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) #### 🧑‍🎓 _Bist du Student?_ -Besuche die [**Student Hub Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Ressourcen für Anfänger, Studierendenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatgutschein zu erhalten. Das ist die Seite, die du als Lesezeichen speichern und von Zeit zu Zeit überprüfen solltest, da wir monatlich Inhalt austauschen. +Besuche die [**Student Hub-Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Anfängerressourcen, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Diese Seite solltest du als Lesezeichen speichern und regelmäßig besuchen, da wir monatlich Inhalte austauschen. ### 📣 Ankündigung – Neue GitHub Copilot Agent Mode Herausforderungen zum Abschließen! -Neue Herausforderung hinzugefügt, suche in den meisten Kapiteln nach „GitHub Copilot Agent Challenge 🚀“. Das ist eine neue Herausforderung, die du mit GitHub Copilot und dem Agent-Modus abschließen kannst. Wenn du den Agent-Modus noch nicht benutzt hast, er kann nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und vieles mehr. +Neue Herausforderung hinzugefügt, suche nach "GitHub Copilot Agent Challenge 🚀" in den meisten Kapiteln. Das ist eine neue Challenge für dich, die du mit GitHub Copilot und dem Agent Mode abschließen kannst. Falls du den Agent Mode noch nicht benutzt hast: Er erzeugt nicht nur Text, sondern kann auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr. -### 📣 Ankündigung – _Neues Projekt mit Generativer KI bauen_ +### 📣 Ankündigung – _Neues Projekt mit Generativer KI_ -Neues AI-Assistenten-Projekt hinzugefügt, schau es dir an [Projekt](./9-chat-project/README.md) +Neues KI-Assistent-Projekt gerade hinzugefügt, schau es dir an [Projekt](./9-chat-project/README.md) ### 📣 Ankündigung – _Neuer Lehrplan_ zu Generativer KI für JavaScript wurde gerade veröffentlicht -Verpasse nicht unseren neuen Lehrplan zur Generativen KI! +Verpasse nicht unseren neuen Generative AI Lehrplan! -Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um zu starten! +Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen! ![Background](../../translated_images/de/background.148a8d43afde5730.webp) - Lektionen, die alles von den Grundlagen bis zu RAG abdecken. -- Interagiere mit historischen Charakteren mittels GenAI und unserer Begleit-App. -- Spaßige und fesselnde Erzählweise, du wirst durch die Zeit reisen! +- Interagiere mit historischen Figuren mit GenAI und unserer Begleit-App. +- Spaßige und fesselnde Erzählweise, du reist durch die Zeit! ![character](../../translated_images/de/character.5c0dd8e067ffd693.webp) -Jede Lektion beinhaltet eine Aufgabe, einen Wissenscheck und eine Challenge, die dich in Themen wie: + +Jede Lektion enthält eine Aufgabe, einen Wissenscheck und eine Challenge, die dich beim Lernen von Themen wie den folgenden leitet: - Prompting und Prompt-Engineering -- Text- und Bild-App-Generierung -- Suchanwendungen -anleiten. +- Text- und Bildanwendungs-Generierung +- Suchanwendungen + +Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um loszulegen! + -Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um zu starten! ## 🌱 Erste Schritte -> **Lehrkräfte**, wir haben [einige Vorschläge](for-teachers.md) aufgenommen, wie Sie diesen Lehrplan verwenden können. Wir freuen uns auf Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Lehrkräfte**, wir haben [einige Vorschläge](for-teachers.md) aufgenommen, wie ihr diesen Lehrplan nutzen könnt. Wir freuen uns über euer Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** starten für jede Lektion mit einem Pre-Lecture-Quiz und folgen mit dem Lesen des Vorlesungsmaterials, dem Abschließen der verschiedenen Aktivitäten und überprüfen ihr Verständnis mit dem Post-Lecture-Quiz. +**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, beginne jede Lektion mit einem Pre-Lecture-Quiz, lese dann das Vorlesungsmaterial, bearbeite die verschiedenen Aktivitäten und überprüfe dein Verständnis mit dem Post-Lecture-Quiz. -Um dein Lernerlebnis zu verbessern, verbinde dich mit deinen Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind erwünscht in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), wo unser Moderatorenteam für deine Fragen zur Verfügung steht. +Um dein Lernen zu verbessern, vernetze dich mit deinen Mitlernenden, um gemeinsam an Projekten zu arbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) erwünscht, wo unser Moderatorenteam deine Fragen beantwortet. -Für deine weitere Bildung empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) zu erkunden, um zusätzliches Lernmaterial zu finden. +Für eine weiterführende Ausbildung empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden. ### 📋 Einrichtung deiner Umgebung -Dieser Lehrplan verfügt über eine sofort einsatzfertige Entwicklungsumgebung! Zu Beginn kannst du wählen, ob du den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_einer browserbasierten Umgebung ohne Installation_) oder lokal auf deinem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchtest. +Dieser Lehrplan verfügt über eine sofort einsatzbereite Entwicklungsumgebung! Du kannst zu Beginn wählen, ob du den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte, installfreie Umgebung_) oder lokal auf deinem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchtest. -#### Erstelle dein Repository -Damit du deine Arbeit einfach speichern kannst, empfehlen wir dir, eine eigene Kopie dieses Repositories anzulegen. Das kannst du tun, indem du oben auf der Seite den Button **Use this template** anklickst. Dadurch wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt. +#### Erstelle dein eigenes Repository +Damit du deine Arbeit leicht speichern kannst, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Dazu klicke auf den Button **Use this template** oben auf der Seite. Damit wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt. Folge diesen Schritten: -1. **Repository forken**: Klicke auf den „Fork“-Button oben rechts auf dieser Seite. +1. **Repository forken**: Klicke auf den „Fork“-Button rechts oben auf dieser Seite. 2. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Betrieb des Lehrplans in einem Codespace +#### Ausführen des Lehrplans in einem Codespace -In deiner erstellten Kopie des Repositories klickst du auf den **Code**-Button und wählst **Open with Codespaces** aus. Dadurch wird ein neuer Codespace zum Arbeiten für dich erstellt. +In deiner eigenen Kopie dieses Repositorys, klicke auf den Button **Code** und wähle **Open with Codespaces**. Dies erstellt einen neuen Codespace, in dem du arbeiten kannst. ![Codespace](../../translated_images/de/createcodespace.0238bbf4d7a8d955.webp) -#### Betrieb des Lehrplans lokal auf deinem Computer - -Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Kommandozeilen-Tool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](../../1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für diese Tools, damit du das auswählen kannst, was am besten für dich passt. +#### Ausführen des Lehrplans lokal auf deinem Computer -Unsere Empfehlung ist es, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor zu verwenden, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) besitzt. Du kannst Visual Studio Code [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Kommandozeilen-Tool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](../../1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für diese Werkzeuge, sodass du wählen kannst, was am besten zu dir passt. -1. Klone dein Repository auf deinen Computer. Das kannst du tun, indem du den **Code**-Button anklickst und die URL kopierst: +Wir empfehlen die Nutzung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bietet. Visual Studio Code kannst du [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Klone dein Repository auf deinen Computer. Du kannst dies tun, indem du auf die **Code**-Schaltfläche klickst und die URL kopierst: [CodeSpace](./images/createcodespace.png) -Dann öffnen Sie das [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führen Sie den folgenden Befehl aus, wobei Sie `` durch die URL ersetzen, die Sie gerade kopiert haben: + + Öffne dann [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führe den folgenden Befehl aus, wobei du `` durch die gerade kopierte URL ersetzt: ```bash git clone ``` -2. Öffnen Sie den Ordner in Visual Studio Code. Dies können Sie tun, indem Sie auf **Datei** > **Ordner öffnen** klicken und den gerade geklonten Ordner auswählen. +2. Öffne den Ordner in Visual Studio Code. Du kannst dies tun, indem du auf **Datei** > **Ordner öffnen** klickst und den gerade geklonten Ordner auswählst. -> Empfohlene Visual Studio Code Erweiterungen: +> Empfohlene Visual Studio Code-Erweiterungen: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - um HTML-Seiten innerhalb von Visual Studio Code vorzuschauen -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - um Ihnen beim schnelleren Schreiben von Code zu helfen +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - um HTML-Seiten direkt in Visual Studio Code vorzuschauen +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - um dir beim schnelleren Schreiben von Code zu helfen ## 📂 Jede Lektion beinhaltet: -- optionale Sketchnote +- optionales Sketchnote - optionales ergänzendes Video -- Aufwärm-Quiz vor der Lektion +- Aufwärmquiz vor der Lektion - schriftliche Lektion -- bei projektbasierten Lektionen Schritt-für-Schritt-Anleitungen zum Aufbau des Projekts -- Wissenskontrollen +- für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts +- Wissensüberprüfungen - eine Herausforderung - ergänzende Lektüre - Aufgabe - [Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/) -> **Eine Anmerkung zu den Quizzen**: Alle Quizze befinden sich im Quiz-app-Ordner, insgesamt 48 Quizze mit je drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar, die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folgen Sie der Anleitung im `quiz-app`-Ordner. +> **Ein Hinweis zu den Quizzen**: Alle Quizze sind im Ordner Quiz-app enthalten, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folge den Anweisungen im Ordner `quiz-app`. ## 🗃️ Lektionen -| | Projektname | Vermittelte Konzepte | Lernziele | Verlinkte Lektion | Autor | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Einstieg | Einführung in Programmierung und Werkzeuge | Lernen Sie die grundlegenden Grundlagen der meisten Programmiersprachen und über Software, die professionellen Entwicklern hilft | [Einführung in Programmiersprachen und Werkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Einstieg | Grundlagen von GitHub, einschließlich Teamarbeit | Wie man GitHub im Projekt verwendet und mit anderen an einem Code-Repository zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Einstieg | Barrierefreiheit | Lernen Sie die Grundlagen der Web-Barrierefreiheit | [Grundlagen Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS-Grundlagen | JavaScript Datentypen | Die Grundlagen von JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS-Grundlagen | Funktionen und Methoden | Lernen Sie Funktionen und Methoden zur Steuerung des Anwendungslogikflusses | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher | -| 06 | JS-Grundlagen | Entscheidungen mit JS treffen | Lernen Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsstrukturen erstellen | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS-Grundlagen | Arrays und Schleifen | Arbeiten Sie mit Daten unter Verwendung von Arrays und Schleifen in JavaScript | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in der Praxis | Erstellen Sie das HTML, um ein Online-Terrarium anzulegen, mit Fokus auf den Aufbau eines Layouts | [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in der Praxis | Erstellen Sie das CSS zur Gestaltung des Online-Terrariums, mit Fokus auf die Grundlagen von CSS und responsive Design | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstellen Sie das JavaScript, um das Terrarium als Drag/Drop-Oberfläche zu gestalten, mit Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Aufbau eines Tipp-Spiels | Lernen Sie, wie Sie Tastatureignisse verwenden, um die Logik Ihrer JavaScript-App zu steuern | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lernen Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browsererweiterung gestalten | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Erstellen eines Formulars, Aufrufen einer API und Speichern von Variablen im lokalen Speicher | Erstellen Sie die JavaScript-Elemente Ihrer Browser-Erweiterung zum Aufrufen einer API unter Verwendung von Variablen im lokalen Speicher | [APIs, Formulare und lokaler Speicher](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Verwenden Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lernen Sie über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lernen Sie Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung auf den Spielebau | [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Zeichnen auf Canvas | Lernen Sie die Canvas-API kennen, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird | [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Bewegen von Elementen auf dem Bildschirm | Entdecken Sie, wie Elemente mit kartesischen Koordinaten und der Canvas-API Bewegung erhalten | [Bewegen von Elementen](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisions­erkennung | Lassen Sie Elemente kollidieren und aufeinander reagieren, basierend auf Tastatureingaben, und fügen Sie eine Cooldown-Funktion hinzu | [Kollisionserkennung](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Punkteverwaltung | Führen Sie mathematische Berechnungen basierend auf dem Status und der Leistung des Spiels durch | [Punkteverwaltung](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Beenden und Neustarten des Spiels | Lernen Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung von Assets und Zurücksetzen von Variablen | [Die Endbedingung](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-Vorlagen und Routen in einer Webanwendung | Lernen Sie, wie Sie das Gerüst einer mehrseitigen Website-Architektur mit Routing und HTML-Vorlagen erstellen | [HTML-Vorlagen und Routen](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Login- und Registrierungsformular erstellen | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt | [Formulare](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Methoden zum Abrufen und Verwalten von Daten | Wie Daten in Ihre App hinein- und herausfließen, wie man sie abruft, speichert und entsorgt | [Daten](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Konzepte des State Managements | Lernen Sie, wie Ihre App den Zustand beibehält und diesen programmatisch verwaltet | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode-Code](../../8-code-editor) | Arbeiten mit VScode | Lernen Sie, wie man einen Code-Editor benutzt | [Verwendung des VScode Code Editors](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeiten mit KI | Lernen Sie, wie Sie Ihren eigenen KI-Assistenten erstellen | [KI-Assistent-Projekt](./9-chat-project/README.md) | Chris | +| | Projektname | Erlernte Konzepte | Lernziele | Verknüpfte Lektion | Autor | +| :-: | :----------------------------------------------------: | :------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------: | :----------------: | +| 01 | Erste Schritte | Einführung in Programmierung und Werkzeuge | Erlerne die grundlegenden Konzepte der meisten Programmiersprachen und Software, die professionelle Entwickler verwenden | [Einführung in Programmiersprachen und Werkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Erste Schritte | Grundlagen von GitHub, inklusive Teamarbeit | Wie man GitHub im Projekt nutzt und mit anderen an einer Codebasis zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Erste Schritte | Barrierefreiheit | Erlerne die Grundlagen der Web-Barrierefreiheit | [Grundlagen der Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS-Grundlagen | JavaScript-Datentypen | Die Grundlagen der JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS-Grundlagen | Funktionen und Methoden | Lerne Funktionen und Methoden kennen, um den Ablauf einer Anwendung zu steuern | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher | +| 06 | JS-Grundlagen | Entscheidungen in JS treffen | Lerne, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS-Grundlagen | Arrays und Schleifen | Arbeite mit Daten in JavaScript mithilfe von Arrays und Schleifen | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in der Praxis | Erstelle das HTML, um ein Online-Terrarium zu bauen, mit Schwerpunkt auf Layout | [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in der Praxis | Erstelle das CSS, um das Online-Terrarium zu stylen, mit Fokus auf CSS-Grundlagen und responsives Design | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstelle das JavaScript, damit das Terrarium als Drag/Drop-Oberfläche funktioniert, Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Tipp-Spiel](./4-typing-game/solution/README.md) | Ein Tipp-Spiel bauen | Lerne, wie Tastaturereignisse zur Steuerung der Logik deiner JavaScript-App verwendet werden | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lerne, wie Browser funktionieren, ihre Geschichte und wie man erste Elemente einer Browsererweiterung erstellt | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Formular erstellen, API aufrufen und Variablen im lokalen Speicher ablegen | Erstelle JavaScript-Elemente deiner Browsererweiterung, um eine API unter Verwendung lokal gespeicherter Variablen zu nutzen | [APIs, Formulare und lokaler Speicher](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Nutze die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lerne über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lerne Vererbung mittels Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung für den Bau eines Spiels | [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Zeichnen auf Canvas | Lerne die Canvas-API kennen, um Elemente auf einem Bildschirm zu zeichnen | [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Elemente auf dem Bildschirm bewegen | Entdecke, wie Elemente Bewegung mit kartesischen Koordinaten und der Canvas-API erhalten | [Elemente bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Kollisions-Erkennung | Lasse Elemente kollidieren und aufeinander reagieren, nutze Tastendrucke und implementiere eine Abklingfunktion zur Leistungssteigerung | [Kollisions-Erkennung](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Punkte zählen | Führe mathematische Berechnungen basierend auf Spielstatus und Leistung durch | [Punkte zählen](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Spiel beenden und neu starten | Lerne, wie man das Spiel beendet und neu startet, inklusive Bereinigung von Ressourcen und Zurücksetzen von Variablen | [Die Endbedingung](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Bankanwendung](./7-bank-project/solution/README.md) | HTML-Templates und Routen in einer Web-App | Lerne, wie man das Gerüst einer mehrseitigen Webseite mithilfe von Routing und HTML-Templates erstellt | [HTML-Templates und Routen](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Bankanwendung](./7-bank-project/solution/README.md) | Login- und Registrierungsformular erstellen | Lerne, wie man Formulare baut und Validierungsroutinen behandelt | [Formulare](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Bankanwendung](./7-bank-project/solution/README.md) | Methoden zum Abrufen und Nutzen von Daten | Wie Daten in die App gelangen und wieder herausfließen, wie man sie abruft, speichert und entfernt | [Daten](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Bankanwendung](./7-bank-project/solution/README.md) | Konzepte des State-Managements | Lerne, wie deine App Zustände behält und wie man diese programmatisch verwaltet | [State-Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeiten mit VScode | Lerne, wie du einen Code-Editor benutzt | [Visual Studio Code Editor verwenden](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [KI-Assistenten](./9-chat-project/README.md) | Arbeiten mit KI | Lerne, wie du deinen eigenen KI-Assistenten baust | [KI-Assistenten-Projekt](./9-chat-project/README.md) | Chris | ## 🏫 Pädagogik -Unser Lehrplan ist nach zwei wesentlichen pädagogischen Prinzipien gestaltet: +Unser Curriculum basiert auf zwei zentralen pädagogischen Prinzipien: * projektbasiertes Lernen * häufige Quizze -Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die heutige Webentwickler verwenden. Studierende haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Space-Invaders-artiges Spiel und eine Banking-App für Unternehmen entwickeln. Am Ende der Reihe haben die Studierenden ein solides Verständnis der Webentwicklung erworben. +Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die heutige Webentwickler nutzen. Die Studierenden haben die Gelegenheit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browser-Erweiterung, ein Weltraum-Invader-artiges Spiel und eine Bankanwendung für Unternehmen bauen. Am Ende der Reihe verfügen die Studierenden über ein solides Verständnis der Webentwicklung. -> 🎓 Sie können die ersten Lektionen dieses Curriculums als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) bei Microsoft Learn absolvieren! +> 🎓 Die ersten Lektionen dieses Curriculums kannst du auch als [Learning Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn absolvieren! -Indem sichergestellt wird, dass die Inhalte mit Projekten übereinstimmen, wird der Prozess für die Studierenden ansprechender gestaltet und die Beibehaltung der Konzepte verbessert. Wir haben außerdem mehrere Einsteigerlektionen zu den Grundlagen von JavaScript geschrieben, um Konzepte einzuführen, begleitet von einem Video aus der Tutorialsammlung „[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“, deren Autoren teilweise zum Curriculum beigetragen haben. +Indem sichergestellt wird, dass die Inhalte auf Projekte abgestimmt sind, wird der Prozess für die Lernenden spannender und die Behaltensrate der Konzepte verbessert. Wir haben auch mehrere Einstiegskapitel zu den Grundlagen von JavaScript geschrieben und mit Videos aus der Tutorial-Reihe "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kombiniert – einige der Autoren haben zu diesem Curriculum beigetragen. -Zudem setzt ein niedrigschwelliges Quiz vor einer Unterrichtsstunde die Lernintention der Studierenden, während ein zweites Quiz nach dem Unterricht die weitere Beibehaltung sichert. Dieses Curriculum wurde so gestaltet, dass es flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte starten klein und werden bis zum Ende des 12-Wochen-Zyklus zunehmend komplexer. +Darüber hinaus setzt ein niedrigschwelliges Quiz vor der Lektion die Lernabsicht der Studierenden, während ein weiteres Quiz danach die Behaltensrate sicherstellt. Das Curriculum wurde so konzipiert, dass es flexibel und unterhaltsam ist und sowohl vollständig als auch teilweise absolviert werden kann. Die Projekte starten klein und werden im Verlauf des 12-Wochen-Zyklus zunehmend komplexer. -Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten für Webentwickler zu konzentrieren, bevor ein Framework eingesetzt wird, wäre ein guter nächster Schritt zum Abschluss dieses Curriculums, Node.js über eine weitere Videosammlung zu lernen: „[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“. +Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten eines Webentwicklers vor der Anwendung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt nach Abschluss dieses Curriculums das Erlernen von Node.js anhand einer weiteren Videoserie: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Besuchen Sie unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über Ihr konstruktives Feedback! +> Besuche unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über dein konstruktives Feedback! ## 🧭 Offline-Zugriff -Sie können diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) ausführen. Forken Sie dieses Repository, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner und geben Sie dann im Stammordner dieses Repositories `docsify serve` ein. Die Website wird auf Port 3000 auf Ihrem lokalen Host bereitgestellt: `localhost:3000`. +Du kannst diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) verwenden. Forke dieses Repo, [installiere Docsify](https://docsify.js.org/#/quickstart) auf deinem lokalen Rechner und gib dann im Stammordner dieses Repos `docsify serve` ein. Die Website wird auf Port 3000 auf deinem localhost ausgeführt: `localhost:3000`. ## 📘 PDF +Eine PDF mit allen Lektionen ist [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) zu finden. -Ein PDF aller Lektionen finden Sie [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +## 🎒 Andere Kurse -## 🎒 Weitere Kurse Unser Team produziert weitere Kurse! Schau dir an: ### LangChain -[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j für Anfänger](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js für Anfänger](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain für Anfänger](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agents -[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![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) +### Azure / Edge / MCP / Agenten +[![AZD für Anfänger](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI für Anfänger](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP für Anfänger](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![KI-Agenten für Anfänger](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) -[![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) -[![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) +### Generative KI-Serie +[![Generative KI für Anfänger](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 KI (.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 KI (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) +[![Generative KI (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) -[![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) -[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![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) +### Kernlernen +[![ML für Anfänger](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) +[![Datenwissenschaft für Anfänger](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) +[![KI für Anfänger](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) +[![Cybersicherheit für Anfänger](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Webentwicklung für Anfänger](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT für Anfänger](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR-Entwicklung für Anfänger](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) +### Copilot-Serie +[![Copilot für KI-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 für 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-Abenteuer](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) ## Hilfe erhalten -Wenn du feststeckst oder Fragen zum Erstellen von KI-Anwendungen hast. Schließe dich anderen Lernenden und erfahrenen Entwicklern an, um über MCP zu diskutieren. Es ist eine unterstützende Community, in der Fragen willkommen sind und Wissen frei geteilt wird. +Wenn du festhängst oder Fragen zum Erstellen von KI-Anwendungen hast: Trete anderen Lernenden und erfahrenen Entwicklern in den Diskussionen über MCP bei. Es ist eine unterstützende Community, in der Fragen willkommen sind und Wissen frei geteilt wird. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Wenn du Feedback zum Produkt hast oder Fehler beim Erstellen auftreten, besuche: +Wenn du Produktfeedback hast oder beim Bauen auf Fehler stößt, besuche: [![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) ## Lizenz -Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen findest du in der [LICENSE](../../LICENSE) Datei. +Dieses Repository ist unter der MIT-Lizenz lizenziert. Siehe die [LICENSE](../../LICENSE) Datei für weitere Informationen. --- **Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, bitten wir zu beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen. +Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen. \ No newline at end of file diff --git a/translations/ru/.co-op-translator.json b/translations/ru/.co-op-translator.json index 8b04da455..e750716fd 100644 --- a/translations/ru/.co-op-translator.json +++ b/translations/ru/.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-03T23:14:20+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:43:56+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ru" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T15:57:30+00:00", + "translation_date": "2026-03-06T16:51:51+00:00", "source_file": "AGENTS.md", "language_code": "ru" }, @@ -516,8 +516,8 @@ "language_code": "ru" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T15:50:50+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:39:46+00:00", "source_file": "README.md", "language_code": "ru" }, diff --git a/translations/ru/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ru/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4ee27682a..d0fb3a11c 100644 --- a/translations/ru/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ru/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ # Введение в языки программирования и современные инструменты разработчика + +Привет, будущий разработчик! 👋 Могу я рассказать тебе кое-что, что до сих пор каждый божий день заставляет меня испытывать трепет? Ты вот-вот откроешь для себя, что программирование — это не просто про компьютеры, это про настоящие суперспособности, с помощью которых можно воплотить в жизнь самые сумасшедшие идеи! -Привет, будущий разработчик! 👋 Могу я рассказать тебе кое-что, что до сих пор вызывает у меня мурашки каждый день? Ты собираешься узнать, что программирование — это не просто работа с компьютерами, это настоящая суперсила, которая позволяет воплощать в жизнь самые смелые идеи! +Ты знаешь тот момент, когда пользуешься своим любимым приложением, и всё просто складывается идеально? Когда нажимаешь кнопку, и происходит нечто волшебное, из-за чего думаешь: «Вау, а как они ЭТО сделали?» Так вот, кто-то, такой же как ты — вероятно, сидящий в своём любимом кафе в 2 часа ночи с третьим эспрессо — написал код, который создаёт эту магию. И сейчас тебя поразит вот что: к концу этого урока ты не только поймёшь, как это было сделано, но ещё и зажжёшься попробовать сделать это сам! -Ты знаешь тот момент, когда пользуешься любимым приложением, и все работает идеально? Когда нажимаешь кнопку, и происходит что-то абсолютно волшебное, заставляющее тебя задуматься: «Вау, как они ЭТО сделали?» Так вот, кто-то, возможно, такой же, как ты — сидя в любимой кофейне в два часа ночи с третьим эспрессо — написал код, который создал эту магию. И вот что тебя удивит: к концу этого урока ты не только поймешь, как они это сделали, но и захочешь попробовать сам! +Послушай, я отлично понимаю, если программирование сейчас кажется пугающим. Когда я начал, честно думал, что нужно быть каким-то математическим гением или кодить с пяти лет. Но вот что полностью изменило моё восприятие: программирование — это как учиться разговаривать на новом языке. Сначала «привет» и «спасибо», потом уже можешь заказать кофе, а через некоторое время ведёшь глубокие философские беседы! Только в этом случае ты разговариваешь с компьютерами, и, честно? Они самые терпеливые собеседники, которых ты когда-либо встречал — они никогда не осуждают ошибки и всегда рады попробовать снова! -Слушай, я прекрасно понимаю, если программирование кажется тебе пугающим прямо сейчас. Когда я только начинал, я честно думал, что для этого нужно быть каким-то математическим гением или заниматься кодированием с пяти лет. Но вот что полностью изменило мое представление: программирование — это как изучение нового языка. Ты начинаешь с «привет» и «спасибо», затем переходишь к заказу кофе, а потом, не успеешь оглянуться, как уже ведешь глубокие философские беседы! Только в данном случае ты разговариваешь с компьютерами, и, честно говоря, они самые терпеливые собеседники — они никогда не осуждают твои ошибки и всегда готовы попробовать снова! +Сегодня мы познакомимся с невероятными инструментами, которые делают современную веб-разработку не просто возможной, а по-настоящему увлекательной. Речь идёт именно о тех редакторах, браузерах и рабочих процессах, которыми ежедневно пользуются разработчики Netflix, Spotify и твоей любимой инди-студии. И вот что заставит тебя танцевать от счастья: большинство этих профессиональных, отраслевых инструментов совершенно бесплатны! -Сегодня мы изучим невероятные инструменты, которые делают современную веб-разработку не только возможной, но и по-настоящему увлекательной. Я говорю о тех же редакторах, браузерах и рабочих процессах, которые разработчики Netflix, Spotify и твоей любимой студии приложений используют каждый день. И вот что заставит тебя пуститься в пляс от радости: большинство этих профессиональных инструментов, которые являются стандартом в индустрии, абсолютно бесплатны! - -![Введение в программирование](../../../../translated_images/ru/webdev101-programming.d6e3f98e61ac4bff.webp) +![Intro Programming](../../../../translated_images/ru/webdev101-programming.d6e3f98e61ac4bff.webp) > Скетчноут от [Tomomi Imura](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) -## Приключение, которое мы начнем вместе +## Приключение, которое мы начинаем вместе -Окей, я искренне в восторге от того, что мы будем изучать сегодня! Честно, я бы хотел видеть ваше лицо, когда некоторые из этих концепций станут понятны. Вот невероятное путешествие, которое мы совершим вместе: +Хорошо, я действительно радуюсь и бьюсь в дрожь от того, что мы сегодня будем изучать! Серьёзно, хотел бы я видеть твоё лицо, когда какие-то концепции прямо «щелкнут». Вот наше невероятное путешествие: -- **Что такое программирование (и почему это самое крутое занятие!)** — Мы узнаем, как код буквально является невидимой магией, которая управляет всем вокруг нас, от будильника, который знает, что наступило утро понедельника, до алгоритма, который идеально подбирает рекомендации на Netflix. -- **Языки программирования и их удивительные особенности** — Представьте, что вы пришли на вечеринку, где каждый человек обладает уникальными суперспособностями и способами решения задач. Именно так выглядит мир языков программирования, и вам понравится знакомиться с ними! -- **Основные строительные блоки, которые создают цифровую магию** — Подумайте о них как о самом креативном наборе LEGO. Как только вы поймете, как эти элементы соединяются, вы осознаете, что можете построить буквально все, что придет вам в голову. -- **Профессиональные инструменты, которые заставят вас почувствовать себя волшебником** — Я не преувеличиваю — эти инструменты действительно дадут вам ощущение суперсилы, и самое лучшее? Это те же инструменты, которые используют профессионалы! +- **Что такое программирование на самом деле (и почему это самая крутая вещь!)** — мы узнаем, как код — это буквально невидимая магия, которая запускает всё вокруг, начиная от будильника, который почему-то знает, что сегодня понедельник, и заканчивая алгоритмом, который подбирает тебе идеальные рекомендации Netflix. +- **Языки программирования и их удивительные личности** — представь, что ты приходишь на вечеринку, где каждый человек обладает совершенно разными суперспособностями и способами решения проблем. Таков мир языков программирования, и тебе понравится их знакомство! +- **Основные строительные блоки, создающие цифровую магию** — подумай об этом, как об идеальном творческом наборе 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, что по сути означает «да» и «нет» или «включено» и «выключено». И все! Но вот где начинается магия — нам не нужно говорить на языке 1 и 0, как будто мы в «Матрице». Здесь на помощь приходят **языки программирования**. Они как лучшие переводчики в мире, которые берут ваши совершенно нормальные человеческие мысли и переводят их на язык компьютера. +Вот что ошеломило меня, когда я впервые это понял: компьютеры на самом деле довольно просты в своей основе. Они буквально понимают только две вещи — 1 и 0, что по сути значит «да» и «нет» или «вкл» и «выкл». Вот и всё! Но вот где начинается магия — нам не нужно говорить на 1 и 0, как в Матрице. Здесь на помощь приходят **языки программирования**. Это словно лучший переводчик в мире, который берёт твои вполне обычные человеческие мысли и переводит их на язык компьютера. -И вот что до сих пор вызывает у меня мурашки каждое утро, когда я просыпаюсь: буквально *все* цифровое в вашей жизни началось с кого-то, возможно, сидящего в пижаме с чашкой кофе, печатающего код на своем ноутбуке. Тот фильтр в Instagram, который делает вас безупречным? Кто-то закодировал это. Рекомендация, которая привела вас к вашей новой любимой песне? Разработчик создал этот алгоритм. Приложение, которое помогает вам делить счет за ужин с друзьями? Да, кто-то подумал: «Это неудобно, я могу это исправить», и затем... они сделали это! +И вот что до сих пор будоражит меня каждое утро: буквально *всё* цифровое в твоей жизни началось с кого-то такого же, как ты, наверное, сидящего в пижаме с чашкой кофе и печатающего код на ноутбуке. Тот фильтр в Instagram, который делает тебя безупречным? Кто-то написал этот код. Рекомендация, которая привела тебя к новой любимой песне? Разработчик создал этот алгоритм. Приложение, которое помогает делить счёт в ресторане с друзьями? Да, кто-то подумал: «Это неудобно, я могу это исправить» — и сделал это! -Когда вы учитесь программировать, вы не просто осваиваете новый навык — вы становитесь частью этого невероятного сообщества решателей проблем, которые каждый день думают: «А что, если я смогу создать что-то, что сделает чей-то день немного лучше?» Честно, есть ли что-то круче этого? +Когда ты учишься программировать, ты не просто осваиваешь новый навык — ты становишься частью потрясающего сообщества решателей задач, которые тратят свои дни на размышления: «А что, если я создам что-то, что сделает чей-то день чуточку лучше?» Честно, разве может быть что-то круче? -✅ **Интересный факт**: Вот что стоит поискать, когда у вас будет свободная минутка — как вы думаете, кто был первым программистом в мире? Подскажу: это может быть не тот, кого вы ожидаете! История этого человека абсолютно увлекательна и показывает, что программирование всегда было связано с творческим решением задач и нестандартным мышлением. +✅ **Задачка для ума**: Вот что здорово поискать, когда будет свободная минутка — кто, по твоему мнению, был первым программистом в мире? Дам подсказку: это может быть не тот человек, кого ты ожидаешь! История этого человека совершенно потрясающая и показывает, что программирование всегда было про творческое решение задач и нестандартное мышление. -### 🧠 **Время проверки: как вы себя чувствуете?** +### 🧠 **Проверочные вопросы: Как ты себя чувствуешь?** -**Возьмите минутку, чтобы подумать:** -- Идея «давать инструкции компьютерам» теперь понятна? -- Можете ли вы придумать ежедневную задачу, которую хотели бы автоматизировать с помощью программирования? -- Какие вопросы у вас возникают о программировании? +**Подумай на минутку:** +- Понятна ли тебе теперь идея «давать инструкции компьютерам»? +- Можешь ли ты представить какую-нибудь повседневную задачу, которую хотел бы автоматизировать с помощью программирования? +- Какие вопросы пока вертятся у тебя в голове про этот мир программирования? -> **Помните**: Это совершенно нормально, если некоторые концепции пока кажутся вам неясными. Изучение программирования — это как изучение нового языка, вашему мозгу нужно время, чтобы построить эти нейронные связи. Вы молодцы! +> **Помни**: это абсолютно нормально, если некоторые понятия кажутся размытыми сейчас. Учиться программировать — это как учить новый язык — мозгу нужно время, чтобы построить новые нейронные связи. Ты делаешь отлично! -## Языки программирования — как разные вкусы магии +## Языки программирования похожи на разные вкусы магии -Окей, это может звучать странно, но доверьтесь мне — языки программирования очень похожи на разные жанры музыки. Подумайте: есть джаз, который плавный и импровизационный, рок — мощный и прямолинейный, классика — элегантная и структурированная, и хип-хоп — креативный и выразительный. У каждого стиля есть своя атмосфера, свое сообщество страстных поклонников, и каждый из них идеально подходит для разных настроений и случаев. +Ладно, это прозвучит странно, но держись — языки программирования очень похожи на разные типы музыки. Представь: у тебя есть джаз — гладкий и импровизационный, рок — мощный и прямолинейный, классика — элегантная и структурированная, и хип-хоп — креативный и выразительный. Каждый стиль имеет свой вайб, своё сообщество страстных поклонников, и каждый идеально подходит под разное настроение и случаи. -Языки программирования работают точно так же! Вы не будете использовать один и тот же язык для создания веселой мобильной игры и для обработки огромных объемов климатических данных, так же как вы не будете включать дэт-метал на занятии йогой (ну, на большинстве занятий йогой! 😄). +Языки программирования работают точно так же! Ты бы не стал использовать тот же язык для создания забавной мобильной игры и для обработки громадного массива климатических данных, так же как ты бы не стал играть дэт-метал на занятиях йогой (ну, по крайней мере на большинстве из них! 😄). -Но вот что меня поражает каждый раз, когда я думаю об этом: эти языки — как самый терпеливый и блестящий переводчик в мире, сидящий рядом с вами. Вы можете выражать свои идеи так, как это естественно для вашего человеческого мозга, а они берут на себя всю невероятно сложную работу по переводу этого на язык 1 и 0, который понимают компьютеры. Это как иметь друга, который идеально владеет и «человеческим творчеством», и «компьютерной логикой» — и он никогда не устает, не нуждается в перерывах на кофе и не осуждает вас за то, что вы задаете один и тот же вопрос дважды! +А вот что меня каждый раз поражает до глубины души: эти языки — это как самый терпеливый и блестящий переводчик в мире, который сидит рядом с тобой. Ты можешь выражать свои идеи так, как удобно твоему человеческому мозгу, а он берёт на себя всю невероятно сложную работу по переводу на 1 и 0, на которых на самом деле говорит компьютер. Это как иметь друга, который идеально владеет и «человеческим творчеством», и «компьютерной логикой» — и он никогда не устает, не берёт перерыв на кофе и не осуждает тебя за повторные вопросы! -### Популярные языки программирования и их применение +### Популярные языки программирования и их применения ```mermaid mindmap - root((Programming Languages)) + root((Языки программирования)) Web Development JavaScript - Frontend Magic - Interactive Websites + Магия фронтенда + Интерактивные веб-сайты TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + Типы + Корпоративные приложения Data & AI Python - Data Science - Machine Learning - Automation + Наука о данных + Машинное обучение + Автоматизация R - Statistics - Research + Статистика + Исследования Mobile Apps Java Android - Enterprise + Корпоративные Swift iOS - Apple Ecosystem + Экосистема Apple Kotlin - Modern Android - Cross-platform + Современный Android + Кроссплатформенность Systems & Performance C++ - Games - Performance Critical + Игры + Критичные по производительности Rust - Memory Safety - System Programming + Безопасность памяти + Системное программирование Go - Cloud Services - Scalable Backend + Облачные сервисы + Масштабируемый бэкенд ``` - -| Язык | Лучшее применение | Почему он популярен | -|------|-------------------|---------------------| -| **JavaScript** | Веб-разработка, пользовательские интерфейсы | Работает в браузерах и обеспечивает интерактивность сайтов | -| **Python** | Наука о данных, автоматизация, ИИ | Легкий для чтения и изучения, мощные библиотеки | -| **Java** | Корпоративные приложения, Android-приложения | Независимость от платформы, надежность для крупных систем | +| Язык | Лучшее применение | Почему популярен | +|----------|----------|------------------| +| **JavaScript** | Веб-разработка, пользовательские интерфейсы | Работает в браузерах и поддерживает интерактивные сайты | +| **Python** | Наука о данных, автоматизация, ИИ | Легко читать и учить, мощные библиотеки | +| **Java** | Корпоративные приложения, Android-приложения | Независим от платформы, надёжен для крупных систем | | **C#** | Windows-приложения, разработка игр | Сильная поддержка экосистемы Microsoft | -| **Go** | Облачные сервисы, серверные системы | Быстрый, простой, создан для современных вычислений | +| **Go** | Облачные сервисы, серверная часть | Быстрый, простой, создан для современной вычислительной техники | -### Высокоуровневые и низкоуровневые языки +### Языки высокого и низкого уровня -Окей, это была концепция, которая буквально взорвала мой мозг, когда я только начинал учиться, поэтому я поделюсь аналогией, которая наконец помогла мне понять — и надеюсь, она поможет и вам! +Честно, именно эта концепция взорвала мне мозг при первом знакомстве с программированием, так что расскажу аналогию, которая помогла мне её понять — надеюсь, она поможет и тебе! -Представьте, что вы посещаете страну, где не говорите на местном языке, и вам срочно нужно найти ближайший туалет (мы все были в такой ситуации, правда? 😅): +Представь, что ты приехал в страну, где не говоришь на языке, и отчаянно пытаешься найти туалет (мы туда все попадали, правда? 😅): -- **Низкоуровневое программирование** — это как изучение местного диалекта настолько хорошо, что вы можете общаться с бабушкой, продающей фрукты на углу, используя культурные отсылки, местный сленг и внутренние шутки, которые понимают только те, кто вырос там. Очень впечатляюще и невероятно эффективно... если вы случайно владеете языком! Но довольно сложно, если вы просто пытаетесь найти туалет. +- **Языки низкого уровня** — это как если бы ты так хорошо изучил местный диалект, что можешь общаться с бабушкой, что торгует фруктами на углу, используя культурные отсылки, местный сленг и внутренние шутки, понятные только местным. Супер впечатляет и очень эффективно… если ты действительно свободно говоришь! Но довольно сложно, когда ты просто пытаешься найти туалет. -- **Высокоуровневое программирование** — это как иметь того удивительного местного друга, который просто понимает вас. Вы можете сказать: «Мне действительно нужно найти туалет» на обычном английском, и он берет на себя весь культурный перевод и дает вам инструкции, которые имеют смысл для вашего не местного мозга. +- **Языки высокого уровня** — это как если бы рядом был замечательный местный друг, который просто понимает тебя. Ты можешь сказать «Мне очень нужен туалет» на обычном английском, а он позаботится о культурном переводе и даст тебе понятные указания, подходящие для твоего неродного ума. -В терминах программирования: -- **Низкоуровневые языки** (например, Assembly или C) позволяют вести невероятно детализированные разговоры с аппаратным обеспечением компьютера, но вам нужно думать как машина, что... ну, скажем так, это довольно серьезный сдвиг в мышлении! -- **Высокоуровневые языки** (например, JavaScript, Python или C#) позволяют вам думать как человек, пока они берут на себя всю машинную речь. Кроме того, у них есть невероятно дружелюбные сообщества, полные людей, которые помнят, каково это быть новичком, и искренне хотят помочь! +На языке программирования: +- **Языки низкого уровня** (например, Assembly или 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["🌟 JavaScript/Python
Легко читать и писать"] + B -->|Низкий уровень| D["⚙️ Ассемблер/C
Прямое управление аппаратурой"] - 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) — человеко-дружелюбный:** ```javascript -// Step 1: Basic Fibonacci setup +// Шаг 1: Основная настройка Фибоначчи const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Что делает этот код:** -- **Объявляет** константу для указания количества чисел Фибоначчи, которые мы хотим сгенерировать +**Вот что делает этот код:** +- **Объявляет** константу, чтобы указать, сколько чисел Фибоначчи мы хотим сгенерировать - **Инициализирует** две переменные для отслеживания текущего и следующего чисел в последовательности -- **Устанавливает** начальные значения (0 и 1), которые определяют узор Фибоначчи -- **Выводит** заголовок, чтобы обозначить наш результат +- **Устанавливает** стартовые значения (0 и 1), которые задают паттерн Фибоначчи +- **Выводит** заголовок для идентификации нашего результата ```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` +- **Выводит** каждое число с его позицией с использованием шаблонной строки +- **Вычисляет** следующее число Фибоначчи как сумму текущего и следующего +- **Обновляет** переменные для перехода к следующей итерации ```javascript -// Step 3: Modern functional approach +// Шаг 3: Современный функциональный подход const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Пример использования const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**В приведенном выше коде мы:** -- **Создали** многоразовую функцию, используя современный синтаксис стрелочных функций -- **Построили** массив для хранения всей последовательности вместо вывода по одному числу -- **Использовали** индексацию массива для вычисления каждого нового числа на основе предыдущих значений +**В приведённом выше коде мы:** +- **Создали** переиспользуемую функцию, используя современный синтаксис стрелочных функций +- **Построили** массив для хранения всей последовательности вместо показа по одному числу +- **Использовали** индексацию массива, чтобы вычислять новое число на основе предыдущих - **Вернули** полную последовательность для гибкого использования в других частях программы -**Низкоуровневый язык (ARM Assembly) — дружелюбный для компьютера:** +**Язык низкого уровня (ARM Assembly) — компьютеро-дружелюбный:** ```assembly area ascen,code,readonly @@ -259,63 +257,63 @@ back add r0,r1 end ``` -Обратите внимание, как версия на JavaScript читается почти как инструкции на английском языке, в то время как версия на Assembly использует загадочные команды, которые напрямую управляют процессором компьютера. Оба выполняют одну и ту же задачу, но высокоуровневый язык гораздо проще для понимания, написания и поддержки. +Обрати внимание, как версия на JavaScript читается почти как инструкция на английском, а версия на Assembly использует загадочные команды, которые управляют процессором напрямую. Оба решают одну и ту же задачу, но язык высокого уровня намного удобнее для понимания, написания и поддержки человеком. -**Основные различия, которые вы заметите:** -- **Читаемость**: JavaScript использует описательные названия, такие как `fibonacciCount`, в то время как Assembly использует загадочные метки, такие как `r0`, `r1`. -- **Комментарии**: Высокоуровневые языки программирования поощряют пояснительные комментарии, которые делают код самодокументируемым. -- **Структура**: Логика JavaScript соответствует тому, как люди мыслят о решении задач шаг за шагом. -- **Поддержка**: Обновление версии JavaScript для различных требований выполняется просто и понятно. +**Ключевые различия, которые ты заметишь:** +- **Читаемость**: JavaScript использует описательные имена, такие как `fibonacciCount`, в то время как Assembly использует загадочные метки, такие как `r0`, `r1` +- **Комментарии**: Языки высокого уровня поощряют объяснительные комментарии, которые делают код самодокументируемым +- **Структура**: Логический поток JavaScript совпадает с тем, как люди думают о проблемах шаг за шагом +- **Поддержка**: Обновление версии на JavaScript для разных требований простое и понятное -✅ **О последовательности Фибоначчи**: Этот невероятно красивый числовой узор (где каждое число равно сумме двух предыдущих: 0, 1, 1, 2, 3, 5, 8...) встречается буквально *везде* в природе! Вы найдете его в спиралях подсолнухов, узорах шишек, изгибах раковин наутилуса и даже в том, как растут ветви деревьев. Просто потрясающе, как математика и код помогают нам понять и воссоздать узоры, которые природа использует для создания красоты! +✅ **О последовательности Фибоначчи**: Эта абсолютно красивая числовая последовательность (где каждое число равно сумме двух предыдущих: 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; @@ -323,13 +321,13 @@ let isRaining = false; ``` **Понимание этих концепций:** -- **Храните** неизменяемые значения в переменных `const` (например, название сайта). -- **Используйте** `let` для значений, которые могут изменяться в ходе программы. -- **Присваивайте** разные типы данных: строки (текст), числа и логические значения (true/false). -- **Выбирайте** описательные имена, которые объясняют, что содержит каждая переменная. +- **Храните** неизменяемые значения в `const` переменных (например, название сайта) +- **Используйте** `let` для значений, которые могут меняться в процессе работы программы +- **Присваивайте** разные типы данных: строки (текст), числа и булевы значения (true/false) +- **Выбирайте** описательные имена, которые объясняют, что хранит каждая переменная ```javascript -// Step 2: Working with objects to group related data +// Шаг 2: Работа с объектами для группировки связанных данных const weatherData = { location: "San Francisco", humidity: 65, @@ -337,50 +335,50 @@ const weatherData = { }; ``` -**В приведенном выше примере мы:** -- **Создали** объект для группировки связанных данных о погоде. -- **Организовали** несколько частей данных под одним именем переменной. -- **Использовали** пары ключ-значение для четкой маркировки каждой части информации. +**В приведённом выше примере мы:** +- **Создали** объект для группировки связанных данных о погоде +- **Организовали** несколько кусков данных под одним именем переменной +- **Использовали** пары ключ-значение для чёткого обозначения каждой информации ```javascript -// Step 3: Using and updating variables +// Шаг 3: Использование и обновление переменных 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}%`); ``` **Что нужно знать:** -- **Извлечение** конкретных свойств из объектов с помощью деструктурирующего присваивания. -- **Создание** новых переменных автоматически с теми же именами, что и ключи объекта. -- **Упрощение** кода, избегая повторяющейся точечной нотации. +- **Извлекайтe** конкретные свойства из объектов с помощью деструктуризации +- **Создавайте** новые переменные автоматически с теми же именами, что и ключи объекта +- **Упрощайте** код, избегая повторяющейся точечной нотации -### Управление потоком: Учим программу думать +### Управление потоком: учим программу думать -Хорошо, вот где программирование становится абсолютно потрясающим! **Управление потоком** – это, по сути, обучение вашей программы принимать умные решения, точно так же, как вы делаете это каждый день, даже не задумываясь. +Хорошо, здесь программирование становится по-настоящему удивительным! **Управление потоком** — это, по сути, обучение вашей программы принимать умные решения, именно так, как вы делаете это каждый день, не задумываясь. -Представьте: сегодня утром вы, вероятно, прошли через что-то вроде "Если идет дождь, я возьму зонт. Если холодно, я надену куртку. Если я опаздываю, я пропущу завтрак и возьму кофе по пути." Ваш мозг естественным образом следует этой логике "если-то" десятки раз каждый день! +Представьте, что сегодня утром вы скорее всего подумали: «Если идёт дождь, возьму зонт. Если холодно — надену куртку. Если опаздываю — пропущу завтрак и возьму кофе по пути». Ваш мозг естественным образом следует этой логике «если-то» десятки раз в день! -Это то, что делает программы умными и живыми, а не просто следующими скучному, предсказуемому сценарию. Они могут действительно смотреть на ситуацию, оценивать, что происходит, и реагировать соответствующим образом. Это как дать вашей программе мозг, который может адаптироваться и принимать решения! +Вот что делает программы умными и живыми, а не просто скучным исполнением предсказуемого сценария. Они могут реально смотреть на ситуацию, оценивать происходящее и отвечать соответственно. Это как дать программе мозг, который может адаптироваться и принимать решения! -Хотите увидеть, как это работает? Позвольте показать: +Хотите увидеть, как это здорово работает? Позвольте показать: ```javascript -// Step 1: Basic conditional logic +// Шаг 1: Основная условная логика const userAge = 17; if (userAge >= 18) { @@ -391,14 +389,14 @@ if (userAge >= 18) { } ``` -**Что делает этот код:** -- **Проверяет**, соответствует ли возраст пользователя требованиям для голосования. -- **Выполняет** разные блоки кода в зависимости от результата условия. -- **Вычисляет** и отображает, сколько времени осталось до возможности голосования, если возраст меньше 18. -- **Предоставляет** конкретную, полезную обратную связь для каждого сценария. +**Этот код делает следующее:** +- **Проверяет**, соответствует ли возраст пользователя требованиям для голосования +- **Выполняет** разные блоки кода в зависимости от результата условия +- **Рассчитывает** и показывает, сколько осталось до возможности голосовать, если пользователь младше 18 +- **Предоставляет** конкретную, полезную обратную связь для каждой ситуации ```javascript -// Step 2: Multiple conditions with logical operators +// Шаг 2: Несколько условий с логическими операторами const userAge = 17; const hasPermission = true; @@ -411,25 +409,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}`); ``` -**Что нужно помнить:** -- **Используйте** тернарный оператор (`? :`) для простых условий с двумя вариантами. -- **Пишите** условие сначала, затем `?`, затем результат для true, затем `:`, затем результат для false. -- **Применяйте** этот шаблон, когда нужно присвоить значения на основе условий. +**Что надо запомнить:** +- **Используйте** тернарный оператор (`? :`) для простых условий с двумя вариантами +- **Пишите** условие сначала, затем `?`, потом результат для true, потом `:`, затем результат для false +- **Применяйте** этот шаблон для присвоения значений на основе условий ```javascript -// Step 4: Handling multiple specific cases +// Шаг 4: Обработка нескольких конкретных случаев const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -450,56 +448,55 @@ switch (dayOfWeek) { ``` **Этот код выполняет следующее:** -- **Сравнивает** значение переменной с несколькими конкретными случаями. -- **Группирует** похожие случаи вместе (будни против выходных). -- **Выполняет** соответствующий блок кода, когда найдено совпадение. -- **Включает** случай `default` для обработки неожиданных значений. -- **Использует** операторы `break`, чтобы предотвратить выполнение следующего случая. +- **Сравнивает** значение переменной с несколькими конкретными случаями +- **Группирует** похожие случаи вместе (будние дни против выходных) +- **Выполняет** соответствующий блок кода при совпадении +- **Включает** `default` для обработки неожиданных значений +- **Использует** `break` для предотвращения продолжения к следующему случаю -> 💡 **Аналогия из реального мира**: Представьте управление потоком как самый терпеливый GPS, который дает вам указания. Он может сказать: "Если на Main Street пробка, поезжайте по шоссе. Если на шоссе идет ремонт, попробуйте живописный маршрут." Программы используют точно такую же условную логику, чтобы реагировать разумно на разные ситуации и всегда предоставлять пользователям лучший возможный опыт. +> 💡 **Реальный пример**: Представьте, что управление потоком — это как самый терпеливый 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 ``` +✅ **Что будет дальше**: Мы с огромным удовольствием погрузимся глубже в эти концепции, продолжая это невероятное путешествие вместе! А пока просто сосредоточьтесь на том волнении от всех удивительных возможностей впереди. Специфические навыки и техники придут естественно по мере практики — обещаю, это будет гораздо веселее, чем вы ожидаете! -✅ **Что будет дальше**: Мы будем с огромным удовольствием углубляться в эти концепции, продолжая это невероятное путешествие вместе! Сейчас просто сосредоточьтесь на том, чтобы почувствовать волнение от всех удивительных возможностей, которые вас ждут впереди. Конкретные навыки и техники запомнятся естественным образом, когда мы будем практиковаться вместе – обещаю, это будет намного веселее, чем вы могли ожидать! - -## Инструменты для работы +## Инструменты профессии -Хорошо, вот здесь я действительно так взволнован, что едва могу сдержаться! 🚀 Мы собираемся поговорить об удивительных инструментах, которые заставят вас почувствовать, будто вам только что вручили ключи от цифрового космического корабля. +Итак, честно говоря, сейчас я так взволнован, что еле сдерживаюсь! 🚀 Сейчас мы поговорим о невероятных инструментах, которые заставят вас почувствовать, будто вам только что вручили ключи от цифрового космического корабля. -Знаете, как у шеф-повара есть идеально сбалансированные ножи, которые ощущаются как продолжение его рук? Или как у музыканта есть та самая гитара, которая начинает "петь", как только он касается ее? У разработчиков есть своя версия этих волшебных инструментов, и вот что вас абсолютно поразит – большинство из них совершенно бесплатны! +Вы знаете, как у шеф-повара есть идеально сбалансированные ножи, которые кажутся продолжением его рук? Или как у музыканта есть гитара, которая начинает петь, как только он к ней прикасается? У разработчиков тоже есть свои волшебные инструменты, и вот что вас по-настоящему ошеломит — большая часть из них абсолютно бесплатна! -Я буквально подпрыгиваю на стуле, думая о том, чтобы поделиться ими с вами, потому что они полностью революционизировали то, как мы создаем программное обеспечение. Мы говорим о помощниках программирования с искусственным интеллектом, которые могут помочь писать ваш код (я не шучу!), облачных средах, где вы можете создавать целые приложения буквально из любого места с Wi-Fi, и инструментах отладки, настолько сложных, что они похожи на рентгеновское зрение для ваших программ. +Я буквально подпрыгиваю от нетерпения поделиться ими с вами, потому что эти инструменты полностью изменили то, как мы создаём софт. Речь идёт об помощниках на основе ИИ, которые помогают писать код (и это не шутка!), облачных средах, где можно создавать целые приложения буквально из любой точки с Wi-Fi, и инструментах отладки настолько продвинутых, что это как иметь рентгеновское зрение для ваших программ. -И вот часть, которая до сих пор вызывает у меня мурашки: это не "инструменты для начинающих", которые вы перерастете. Это те же самые профессиональные инструменты, которые разработчики Google, Netflix и той инди-студии приложений, которую вы любите, используют прямо сейчас. Вы будете чувствовать себя настоящим профессионалом, используя их! +И вот что до сих пор приводит меня в восторг: это не просто «начинающие» инструменты, которые вы перерастёте. Это те же профессиональные средства, что используют разработчики из Google, Netflix и той независимой студии, что вам нравится, здесь и сейчас. Вы почувствуете себя настоящим профи, используя их! ```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["🤖 AI Ассистент
(GitHub Copilot)"] + C -.-> H["📱 Тестирование Устройств
(Адаптивный Дизайн)"] + D -.-> I["📦 Менеджеры Пакетов
(npm, yarn)"] + E -.-> J["👥 Сообщество
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -508,176 +505,177 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - ### Редакторы кода и IDE: ваши новые цифровые лучшие друзья -Давайте поговорим о редакторах кода – они серьезно станут вашими новыми любимыми местами для работы! Представьте их как ваше личное убежище для кодирования, где вы будете проводить большую часть времени, создавая и совершенствуя свои цифровые творения. +Поговорим о редакторах кода — они буквально станут вашим новым любимым местом! Представьте их как личное святилище программирования, где вы будете проводить большую часть времени, создавая и совершенствуя свои цифровые творения. -Но вот что абсолютно волшебно в современных редакторах: это не просто красивые текстовые редакторы. Это как если бы рядом с вами 24/7 сидел самый блестящий и поддерживающий наставник по программированию. Они ловят ваши опечатки, прежде чем вы их заметите, предлагают улучшения, которые заставляют вас выглядеть гением, помогают понять, что делает каждый кусочек кода, и некоторые из них даже предсказывают, что вы собираетесь написать, и предлагают закончить ваши мысли! +Но вот что по-настоящему волшебно в современных редакторах: это не просто красивые текстовые редакторы. Это как самый блестящий и поддерживающий наставник по программированию, сидящий рядом с вами круглосуточно. Они ловят опечатки ещё до того, как вы их заметите, предлагают улучшения, которые заставят вас выглядеть гением, помогают понять, что делает каждая строчка кода, а некоторые даже предугадывают, что вы собираетесь написать, и предлагают дополнить ваши мысли! -Я помню, когда впервые открыл для себя автодополнение – я буквально почувствовал, что живу в будущем. Вы начинаете писать что-то, и ваш редактор говорит: "Эй, вы думали об этой функции, которая делает именно то, что вам нужно?" Это как если бы у вас был читающий мысли напарник по кодированию! +Я помню, как впервые открыл для себя автодополнение — я буквально почувствовал, что живу в будущем. Начинаешь печатать, и редактор такой: «Эй, ты, наверное, хотел использовать эту функцию, которая делает как раз то, что нужно?» Это как иметь друга, который читает мысли во время кодинга! **Что делает эти редакторы такими невероятными?** -Современные редакторы кода предлагают впечатляющий набор функций, разработанных для повышения вашей продуктивности: +Современные редакторы предлагают впечатляющий набор функций, направленных на повышение вашей продуктивности: -| Функция | Что она делает | Почему это помогает | -|---------|----------------|---------------------| -| **Подсветка синтаксиса** | Раскрашивает разные части вашего кода | Упрощает чтение кода и поиск ошибок | -| **Автодополнение** | Предлагает код, пока вы печатаете | Ускоряет кодирование и уменьшает количество опечаток | -| **Инструменты отладки** | Помогают находить и исправлять ошибки | Экономят часы на устранение неполадок | -| **Расширения** | Добавляют специализированные функции | Настраивают редактор для любой технологии | -| **AI-помощники** | Предлагают код и объяснения | Ускоряют обучение и продуктивность | +| Функция | Что делает | Зачем нужна | +|---------|------------|-------------| +| **Подсветка синтаксиса** | Красит разные части кода | Делает код проще для чтения и поиска ошибок | +| **Автодополнение** | Предлагает код по мере набора | Ускоряет программирование и снижает количество опечаток | +| **Инструменты отладки** | Помогают находить и исправлять ошибки | Экономит часы на поиске проблем | +| **Расширения** | Добавляют специализированные функции | Настраивают редактор под любую технологию | +| **Ассистенты на базе ИИ** | Предлагают код и объяснения | Ускоряют обучение и повышают эффективность | -> 🎥 **Видео-ресурс**: Хотите увидеть эти инструменты в действии? Посмотрите [видео о инструментах для работы](https://youtube.com/watch?v=69WJeXGBdxg) для подробного обзора. +> 🎥 **Видео ресурс**: Хотите увидеть эти инструменты в действии? Посмотрите [видео “Tools of the Trade”](https://youtube.com/watch?v=69WJeXGBdxg) для полного обзора. #### Рекомендуемые редакторы для веб-разработки -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Бесплатно) -- Самый популярный среди веб-разработчиков. -- Отличная экосистема расширений. -- Встроенный терминал и интеграция с Git. +**[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) - совместная работа в реальном времени. - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - автоматическое форматирование кода. - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - поиск опечаток в коде. + - [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) — проверка орфографии в коде -**[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/) — мгновенная разработка веб-приложений full-stack -> 💡 **Совет для начала**: Начните с Visual Studio Code – он бесплатный, широко используется в индустрии и имеет огромное сообщество, создающее полезные учебные материалы и расширения. +> 💡 **Совет для начала**: Начинайте с Visual Studio Code — это бесплатно, широко используется в индустрии и имеет огромную сообщество с полезными туториалами и расширениями. -### Веб-браузеры: ваша секретная лаборатория для разработки +### Веб-браузеры: ваша секретная лаборатория разработки -Хорошо, приготовьтесь к тому, чтобы ваш разум был полностью поражен! Знаете, как вы использовали браузеры для прокрутки социальных сетей и просмотра видео? Оказывается, они скрывали эту невероятную секретную лабораторию разработчика все это время, просто ожидая, когда вы ее откроете! +Хорошо, приготовьтесь к тому, что ваш мозг будет взорван! Вы знаете, что вы используете браузеры, чтобы листать соцсети и смотреть видео? Оказывается, они всё это время прятали невероятную секретную лабораторию разработчика, которая просто ждала, чтобы вы её обнаружили! -Каждый раз, когда вы нажимаете правой кнопкой мыши на веб-странице и выбираете "Inspect Element", вы открываете скрытый мир инструментов разработчика, которые, честно говоря, мощнее, чем некоторые дорогие программы, за которые я раньше платил сотни долларов. Это как обнаружить, что ваша обычная кухня скрывает профессиональную лабораторию шеф-повара за секретной панелью! -Когда мне впервые показали инструменты разработчика в браузере, я провел около трех часов, просто нажимая на разные кнопки и восклицая: "ПОДОЖДИ, ОН МОЖЕТ ДЕЛАТЬ И ЭТО?!" Вы буквально можете редактировать любой сайт в реальном времени, видеть, как быстро загружается каждая его часть, тестировать, как ваш сайт выглядит на разных устройствах, и даже отлаживать JavaScript, как настоящий профессионал. Это просто потрясающе! +Каждый раз, когда вы кликаете правой кнопкой мыши на веб-странице и выбираете «Просмотр кода» или «Инспектировать элемент», вы открываете скрытый мир инструментов разработчика, которые честно говоря мощнее, чем некоторые дорогие программы, за которые я раньше платил сотни долларов. Это как понять, что ваша обычная кухня на самом деле скрывает лабораторию профессионального шефа за тайной дверью! +Впервые, когда кто-то показал мне DevTools в браузере, я потратил около трёх часов просто кликая и восклицая: «ПОДОЖДИ, ОН ЕЩЁ И ЭТО МОЖЕТ?!» Ты буквально можешь редактировать любой сайт в реальном времени, видеть, как быстро всё загружается, тестировать, как твой сайт выглядит на разных устройствах, и даже отлаживать JavaScript, как настоящий профи. Это просто потрясающе! -**Почему браузеры — ваш секретное оружие:** +**Вот почему браузеры — ваше секретное оружие:** -Когда вы создаете сайт или веб-приложение, вам нужно увидеть, как оно выглядит и работает в реальном мире. Браузеры не только отображают вашу работу, но и предоставляют подробную информацию о производительности, доступности и возможных проблемах. +Когда вы создаёте сайт или веб-приложение, вам нужно видеть, как оно выглядит и ведёт себя в реальной среде. Браузеры не только отображают вашу работу, но и предоставляют подробную обратную связь о производительности, доступности и возможных проблемах. -#### Инструменты разработчика в браузере (DevTools) +#### Инструменты разработчика браузера (DevTools) -Современные браузеры включают в себя комплексные наборы инструментов для разработчиков: +Современные браузеры включают комплексные наборы инструментов: -| Категория инструмента | Что он делает | Пример использования | -|------------------------|---------------|-----------------------| -| **Инспектор элементов** | Просмотр и редактирование HTML/CSS в реальном времени | Настройка стилей с мгновенным результатом | +| Категория инструмента | Что делает | Пример использования | +|-----------------------|------------|---------------------| +| **Инспектор элементов** | Просмотр и редактирование HTML/CSS в реальном времени | Настройка стиля с мгновенным результатом | | **Консоль** | Просмотр сообщений об ошибках и тестирование JavaScript | Отладка проблем и эксперименты с кодом | | **Монитор сети** | Отслеживание загрузки ресурсов | Оптимизация производительности и времени загрузки | -| **Проверка доступности** | Тестирование инклюзивного дизайна | Убедитесь, что ваш сайт доступен для всех пользователей | -| **Симулятор устройств** | Предварительный просмотр на экранах разных размеров | Тестирование адаптивного дизайна без множества устройств | +| **Проверка доступности** | Тестирование инклюзивного дизайна | Гарантия работы сайта для всех пользователей | +| **Симулятор устройств** | Просмотр на разных размерах экранов | Тестирование отзывчивого дизайна без нескольких устройств | #### Рекомендуемые браузеры для разработки -- **[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)** - Основан на Chromium, с ресурсами для разработчиков от Microsoft +- **[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 с ресурсами для разработчиков от Microsoft + +> ⚠️ **Важный совет по тестированию**: всегда проверяйте свои сайты в нескольких браузерах! То, что идеально работает в Chrome, может выглядеть иначе в Safari или Firefox. Профессиональные разработчики тестируют во всех основных браузерах, чтобы обеспечить одинаковый пользовательский опыт. -> ⚠️ **Важный совет по тестированию**: Всегда тестируйте свои сайты в нескольких браузерах! То, что идеально работает в Chrome, может выглядеть иначе в Safari или Firefox. Профессиональные разработчики тестируют свои проекты во всех основных браузерах, чтобы обеспечить единообразный пользовательский опыт. -### Инструменты командной строки: ваш путь к суперспособностям разработчика +### Командная строка: ваш путь к суперспособностям разработчика -Давайте будем честными: когда я впервые увидел командную строку — этот пугающий черный экран с мигающим текстом — я буквально подумал: "Нет, ни за что! Это выглядит как что-то из хакерского фильма 80-х, и я точно недостаточно умён для этого!" 😅 +Хорошо, давайте честно поговорим о командной строке, потому что я хочу, чтобы вы услышали это от человека, который действительно это понимает. Когда я впервые увидел её — этот страшный чёрный экран с мигающим текстом — я буквально подумал: «Нет, ни в коем случае! Выглядит как что-то из хакерского фильма 80-х, и я определённо не настолько умный для этого!» 😅 -Но вот что я хотел бы знать тогда, и что я говорю вам сейчас: командная строка не страшная — на самом деле, это как прямой разговор с вашим компьютером. Представьте, что это как разница между заказом еды через модное приложение с картинками и меню (что, конечно, удобно) и походом в любимый местный ресторан, где шеф-повар знает, что вам нравится, и может приготовить что-то идеальное, просто услышав "удивите меня чем-нибудь вкусным". +Но вот что я хотел бы, чтобы мне сказали тогда, и что говорю вам сейчас: командная строка не страшна — это как прямой разговор с вашим компьютером. Представьте, что это разница между заказом еды через крутое приложение с картинками и меню (что удобно и просто) и походом в ваш любимый местный ресторан, где шеф знает точно, что вы любите, и может приготовить что-то идеальное, просто сказав «удиви меня чем-то потрясающим». -Командная строка — это место, где разработчики чувствуют себя настоящими волшебниками. Вы вводите несколько, казалось бы, магических слов (хорошо, это просто команды, но они действительно кажутся магическими!), нажимаете Enter, и БАЦ — вы создаете целые структуры проектов, устанавливаете мощные инструменты со всего мира или размещаете свое приложение в интернете для миллионов пользователей. Как только вы почувствуете эту силу, это становится действительно увлекательным! +Командная строка — это место, куда разработчики приходят, чтобы почувствовать себя настоящими волшебниками. Вы вводите несколько, казалось бы, волшебных слов (ну, это просто команды, но они кажутся волшебными!), нажимаете Enter, и БА-БАХ — вы создали целые структуры проектов, установили мощные инструменты со всего мира или развернули своё приложение в интернете для миллионов людей. Как только попробуете эту мощь, она становится по-настоящему затягивающей! **Почему командная строка станет вашим любимым инструментом:** -Хотя графические интерфейсы отлично подходят для многих задач, командная строка превосходит их в автоматизации, точности и скорости. Многие инструменты для разработки работают преимущественно через интерфейсы командной строки, и умение эффективно ими пользоваться может значительно повысить вашу продуктивность. +Хотя графические интерфейсы хороши для многих задач, командная строка превосходна в автоматизации, точности и скорости. Многие инструменты разработки работают именно через командную строку, и изучение эффективного использования значительно повысит вашу продуктивность. ```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 как современный инструмент сборки для быстрой разработки и сборки +- **Инициализирует** новый проект Node.js с настройками по умолчанию через `npm init -y` +- **Устанавливает** Vite как современный инструмент сборки для быстрой разработки и продакшн-сборок - **Добавляет** Prettier для автоматического форматирования кода и ESLint для проверки качества кода -- **Использует** флаг `--save-dev`, чтобы отметить их как зависимости только для разработки +- **Использует** флаг `--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 для живого обновления и замены модулей на лету +- **Запустили** сервер разработки Vite для живой перезагрузки и горячей замены модулей -#### Основные инструменты командной строки для веб-разработки +#### Необходимые инструменты командной строки для веб-разработки -| Инструмент | Назначение | Зачем он нужен | -|------------|------------|----------------| +| Инструмент | Назначение | Зачем нужен | +|------------|------------|-------------| | **[Git](https://git-scm.com/)** | Контроль версий | Отслеживание изменений, совместная работа, резервное копирование | -| **[Node.js & npm](https://nodejs.org/)** | Среда выполнения JavaScript и управление пакетами | Запуск JavaScript вне браузеров, установка современных инструментов разработки | -| **[Vite](https://vitejs.dev/)** | Инструмент сборки и сервер разработки | Молниеносная разработка с заменой модулей на лету | +| **[Node.js & npm](https://nodejs.org/)** | Среда выполнения JavaScript и менеджер пакетов | Запуск JavaScript вне браузера, установка современных инструментов разработки | +| **[Vite](https://vitejs.dev/)** | Инструмент сборки и dev-сервер | Молниеносная разработка с горячей заменой модулей | | **[ESLint](https://eslint.org/)** | Качество кода | Автоматический поиск и исправление проблем в JavaScript | -| **[Prettier](https://prettier.io/)** | Форматирование кода | Поддержание кода в едином формате и удобочитаемости | +| **[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)** 💻 - Мощная среда для скриптов -- **[Command Prompt](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/)** - Улучшенный терминал с расширенными функциями +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 — встроенное терминальное приложение +- **[iTerm2](https://iterm2.com/)** — расширенный терминал с дополнительными функциями **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандартная оболочка Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Продвинутый эмулятор терминала +- **[Bash](https://www.gnu.org/software/bash/)** 💻 — стандартная оболочка Linux +- **[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 лет искали базовый синтаксис, и знаете что? Это не стыдно – это умно! Дело не в идеальной памяти, а в умении быстро находить надежные ответы и понимать, как их применять. +Думайте о документации как о доступе к самым терпеливым, знающим учителям в мире, которые всегда на связи. Застряли над проблемой в 2 часа ночи? Документация там, чтобы обнять виртуальным теплом и дать именно тот ответ, который вам нужен. Хотите узнать про какую-то новую крутецкую функцию, о которой все говорят? Документация поддержит вас пошаговыми примерами. Пытаетесь понять, почему что-то работает именно так? Вы угадали — документация объяснит это так, что наконец-то всё станет ясно! + +Вот что кардинально изменило мой взгляд: мир веб-разработки развивается бешеными темпами, и никто (никто!) не держит всё в памяти. Я видел, как старшие разработчики с опытом 15+ лет ищут базовый синтаксис, и знаете что? Это не стыдно — это умно! Дело не в совершенной памяти, а в умении быстро находить надёжные ответы и понимании, как их применять. **Вот где происходит настоящая магия:** -Профессиональные разработчики значительную часть времени проводят за чтением документации – не потому, что они не знают, что делают, а потому что мир веб-разработки развивается так быстро, что для того, чтобы быть в курсе, требуется постоянное обучение. Хорошая документация помогает понять не только *как* использовать что-то, но и *почему* и *когда* это использовать. +Профессиональные разработчики проводят много времени за чтением документации — не потому что не знают, что делают, а потому что в быстро меняющемся мире веб-разработки нужно постоянно учиться. Хорошая документация помогает понять не только *как* использовать что-то, но и *почему* и *когда* это делать. #### Основные ресурсы документации @@ -685,174 +683,174 @@ npx vite - Золотой стандарт документации по веб-технологиям - Полные руководства по HTML, CSS и JavaScript - Включает информацию о совместимости с браузерами -- Содержит практические примеры и интерактивные демонстрации +- Практические примеры и интерактивные демо **[Web.dev](https://web.dev)** (от Google) -- Лучшие практики современной веб-разработки +- Современные лучшие практики веб-разработки - Руководства по оптимизации производительности - Принципы доступности и инклюзивного дизайна - Кейсы из реальных проектов **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Ресурсы для разработки в браузере Edge -- Руководства по прогрессивным веб-приложениям -- Инсайты по кросс-платформенной разработке +- Руководства по Progressive Web App +- Информация по кроссплатформенной разработке **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структурированные учебные программы -- Видеокурсы от экспертов индустрии -- Практические упражнения по программированию +- Структурированные учебные курсы +- Видео от экспертов отрасли +- Практические задания по программированию -> 📚 **Стратегия обучения**: Не пытайтесь запомнить документацию – вместо этого научитесь эффективно ориентироваться в ней. Сохраняйте закладки на часто используемые ссылки и практикуйтесь в использовании функций поиска для быстрого нахождения нужной информации. +> 📚 **Стратегия изучения**: не пытайтесь запомнить документацию — учитесь эффективно её использовать. Добавляйте в закладки часто используемые ссылки и учитесь быстро находить конкретную информацию через поиск. -### 🔧 **Проверка мастерства инструментов: что вам откликается?** +### 🔧 **Проверка мастерства: что вас больше всего заинтересовало?** -**Подумайте:** -- Какой инструмент вам больше всего хочется попробовать в первую очередь? (Нет неправильных ответов!) -- Командная строка все еще кажется пугающей, или вы уже заинтересованы? -- Можете ли вы представить, как используете инструменты разработчика браузера, чтобы заглянуть за кулисы ваших любимых сайтов? +**Подумайте немного:** +- Какой инструмент вы больше всего хотите опробовать первым? (Правильного или неправильного ответа нет!) +- Командная строка всё ещё кажется пугающей или вы уже заинтересованы? +- Можете ли вы представить, как использовать 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 🚀 -Используйте режим Agent, чтобы выполнить следующий вызов: +Используйте режим Агент для выполнения следующего задания: -**Описание:** Исследуйте функции современного редактора кода или IDE и продемонстрируйте, как он может улучшить ваш рабочий процесс как веб-разработчика. +**Описание:** Изучите функции современного редактора кода или IDE и покажите, как он может улучшить ваш рабочий процесс веб-разработчика. -**Задание:** Выберите редактор кода или 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/) -## Обзор и самостоятельное изучение +[Пройти тест после урока](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) -### ⏰ **Что можно достичь за час** -- [ ] Пройдите тест после урока и проанализируйте свои ответы -- [ ] Настройте VS Code с расширением GitHub Copilot -- [ ] Попробуйте пример "Hello World" на 2 разных языках программирования онлайн -- [ ] Посмотрите видео "День из жизни разработчика" на YouTube -- [ ] Начните исследование выбранного языка программирования (из задания) +### ⏰ **Что вы можете успеть сделать за этот час** +- [ ] Пройти постурочное тестирование и обдумать полученные ответы +- [ ] Настроить VS Code с расширением GitHub Copilot +- [ ] Попробовать пример «Hello World» на 2 разных языках программирования онлайн +- [ ] Посмотреть видео «День из жизни программиста» на YouTube +- [ ] Начать расследование по языкам программирования (из челленджа) ### 📅 **Ваше недельное приключение** -- [ ] Выполните задание и изучите 3 новых инструмента для разработки -- [ ] Подпишитесь на 5 разработчиков или аккаунтов о программировании в социальных сетях -- [ ] Попробуйте создать что-то небольшое в CodePen или Replit (хотя бы "Привет, [Ваше имя]!") -- [ ] Прочитайте блог разработчика о его пути в программировании -- [ ] Присоединитесь к виртуальной встрече или посмотрите доклад о программировании -- [ ] Начните изучение выбранного языка с помощью онлайн-уроков +- [ ] Выполнить задание и изучить 3 новых инструмента для разработки +- [ ] Подписаться на 5 разработчиков или программных аккаунтов в соцсетях +- [ ] Попробовать создать что-то простое в CodePen или Replit (даже просто «Hello, [Ваше имя]!») +- [ ] Прочитать один блог пост разработчика о его пути в программировании +- [ ] Присоединиться к виртуальному митапу или посмотреть доклад о программировании +- [ ] Начать изучать выбранный язык с помощью онлайн-уроков ### 🗓️ **Ваше месячное преобразование** -- [ ] Создайте свой первый небольшой проект (даже простой веб-сайт подойдет!) -- [ ] Внесите вклад в проект с открытым исходным кодом (начните с исправления документации) -- [ ] Станьте наставником для кого-то, кто только начинает изучать программирование -- [ ] Создайте свой сайт-портфолио разработчика -- [ ] Свяжитесь с местными сообществами разработчиков или учебными группами -- [ ] Начните планировать свою следующую учебную цель +- [ ] Создать свой первый небольшой проект (даже простая веб-страница считается!) +- [ ] Внести вклад в проект с открытым исходным кодом (начните с исправления документации) +- [ ] Наставлять того, кто только начал путь в программировании +- [ ] Создать свой сайт-портфолио разработчика +- [ ] Связаться с местными сообществами разработчиков или учебными группами +- [ ] Начать планировать следующую цель обучения -### 🎯 **Итоговая рефлексия** +### 🎯 **Итоговое размышление** -**Прежде чем двигаться дальше, сделайте паузу и отпразднуйте:** -- Что вас больше всего вдохновило в программировании сегодня? +**Прежде чем продолжить, уделите минуту празднованию:** +- Что в программировании сегодня вас больше всего вдохновило? - Какой инструмент или концепцию вы хотите изучить в первую очередь? -- Как вы себя чувствуете, начиная этот путь в программировании? -- Какой вопрос вы бы хотели задать разработчику прямо сейчас? +- Какие у вас чувства по поводу начала этого пути в программировании? +- Какой вопрос вы хотели бы сейчас задать разработчику? ```mermaid journey - title Your Confidence Building Journey - section Today + title Ваш путь к уверенности + section Сегодня Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Эта неделя Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Следующий месяц Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Помните**: Каждый эксперт когда-то был новичком. Каждый опытный разработчик когда-то чувствовал себя так же, как вы сейчас – вдохновленным, возможно, немного растерянным, но определенно любопытным к тому, что возможно. Вы в отличной компании, и это путешествие будет невероятным. Добро пожаловать в удивительный мир программирования! 🎉 +> 🌟 **Помните**: каждый эксперт когда-то был новичком. Каждый опытный разработчик когда-то чувствовал то же, что и вы сейчас – волнение, возможно, небольшое замешательство и определённый интерес к возможностям. Вы в отличной компании, и это путешествие будет невероятным. Добро пожаловать в удивительный мир программирования! 🎉 --- + **Отказ от ответственности**: -Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода. \ No newline at end of file +Этот документ был переведен с помощью службы автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия по обеспечению точности, просим учитывать, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется воспользоваться профессиональным переводом, выполненным человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода. + \ No newline at end of file diff --git a/translations/ru/AGENTS.md b/translations/ru/AGENTS.md index b90184e53..46993503b 100644 --- a/translations/ru/AGENTS.md +++ b/translations/ru/AGENTS.md @@ -2,46 +2,46 @@ ## Обзор проекта -Это репозиторий учебной программы для обучения основам веб-разработки для начинающих. Учебная программа представляет собой всесторонний 12-недельный курс, разработанный командой Microsoft Cloud Advocates, включающий 24 практических урока, охватывающих JavaScript, CSS и HTML. +Это репозиторий учебной программы для обучения основам веб-разработки для начинающих. Учебная программа — это комплексный 12-недельный курс, разработанный Microsoft Cloud Advocates, включающий 24 практических урока по JavaScript, CSS и HTML. ### Ключевые компоненты -- **Образовательный контент**: 24 структурированных урока, организованных в модули на основе проектов -- **Практические проекты**: Террариум, Игра на скорость печати, Расширение для браузера, Космическая игра, Банковское приложение, Редактор кода и AI чат-ассистент -- **Интерактивные викторины**: 48 викторин с 3 вопросами каждая (оценка до и после урока) -- **Многоязычная поддержка**: Автоматические переводы на 50+ языков с помощью GitHub Actions -- **Технологии**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектов) +- **Образовательный контент**: 24 структурированных урока, организованных в проектно-ориентированные модули +- **Практические проекты**: Террариум, Игра на набор текста, Расширение для браузера, Космическая игра, Банковское приложение, Редактор кода и чат-ассистент с ИИ +- **Интерактивные викторины**: 48 викторин с 3 вопросами каждая (оценка до и после урока) +- **Многоязычная поддержка**: Автоматические переводы на 50+ языков с использованием 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 ## Команды для настройки -Этот репозиторий предназначен в основном для изучения образовательного контента. Для работы с конкретными проектами: +Этот репозиторий предназначен в первую очередь для изучения образовательного контента. Для работы с конкретными проектами: -### Настройка основного репозитория +### Основная настройка репозитория ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - + ### Настройка Quiz App (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Запустить сервер разработки -npm run build # Сборка для продакшена +npm run build # Собрать для продакшена npm run lint # Запустить ESLint ``` - -### Bank Project API (Node.js + Express) + +### API банковского проекта (Node.js + Express) ```bash cd 7-bank-project/api @@ -50,15 +50,15 @@ npm start # Запустить сервер API npm run lint # Запустить ESLint npm run format # Отформатировать с помощью Prettier ``` - + ### Проекты расширений для браузера ```bash cd 5-browser-extension/solution npm install -# Следуйте инструкциям по загрузке расширений для конкретного браузера +# Следуйте инструкциям по загрузке расширения, специфичным для браузера ``` - + ### Проекты космической игры ```bash @@ -66,8 +66,8 @@ cd 6-space-game/solution npm install # Откройте index.html в браузере или используйте Live Server ``` - -### Чат-проект (бэкенд на Python) + +### Проект чата (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -75,33 +75,33 @@ pip install openai # Установите переменную окружения GITHUB_TOKEN python api.py ``` - + ## Рабочий процесс разработки -### Для авторов контента +### Для контрибьюторов контента -1. **Сделайте fork репозитория** в свой аккаунт GitHub -2. **Клонируйте ваш fork** локально -3. **Создайте новую ветку** для ваших изменений -4. Внесите изменения в учебный контент или примеры кода -5. Тестируйте любые изменения кода в соответствующих каталогах проектов -6. Отправляйте pull request согласно правилам вклада +1. **Сделайте форк репозитория** в свой аккаунт GitHub +2. **Склонируйте форк** локально +3. **Создайте новую ветку** для своих изменений +4. Внесите изменения в содержимое уроков или примеры кода +5. Проверьте изменения кода в соответствующих директориях проектов +6. Отправьте pull requests в соответствии с руководством по вкладам ### Для обучающихся -1. Сделайте fork или клон репозитория -2. Последовательно переходите в каталоги уроков -3. Читайте README файлы каждого урока -4. Проходите предварительные викторины на https://ff-quizzes.netlify.app/web/ -5. Выполняйте примеры кода в папках уроков -6. Делайте домашние задания и вызовы -7. Проходите викторины после уроков +1. Сделайте форк или склонируйте репозиторий +2. Последовательно перейдите в директории уроков +3. Прочитайте README каждого урока +4. Пройдите предварительные викторины на https://ff-quizzes.netlify.app/web/ +5. Выполняйте примеры кода в папках уроков +6. Выполните задания и вызовы +7. Пройдите пост-урочные викторины -### Живое развитие +### Живая разработка -- **Документация**: Запустите `docsify serve` в корне (порт 3000) -- **Quiz App**: Запустите `npm run dev` в директории quiz-app -- **Проекты**: Используйте расширение Live Server в VS Code для HTML проектов +- **Документация**: Запустите `docsify serve` в корне (порт 3000) +- **Quiz App**: Запустите `npm run dev` в директории quiz-app +- **Проекты**: Используйте расширение VS Code Live Server для HTML-проектов - **API проекты**: Запустите `npm start` в соответствующих API директориях ## Инструкции по тестированию @@ -113,170 +113,170 @@ cd quiz-app npm run lint # Проверить проблемы со стилем кода npm run build # Проверить успешность сборки ``` - + ### Тестирование Bank API ```bash cd 7-bank-project/api -npm run lint # Проверить наличие проблем со стилем кода +npm run lint # Проверить проблемы со стилем кода node server.js # Проверить, что сервер запускается без ошибок ``` - + ### Общий подход к тестированию -- Это образовательный репозиторий без комплексных автоматизированных тестов -- Ручное тестирование сосредоточено на: - - Запуске примеров кода без ошибок - - Работе ссылок в документации - - Успешном завершении сборки проектов - - Следовании примеров лучшим практикам +- Это образовательный репозиторий без комплексных автоматизированных тестов +- Ручное тестирование ориентировано на: + - Запуск примеров кода без ошибок + - Проверку работоспособности ссылок в документации + - Успешную сборку проектов + - Следование примеров лучшим практикам ### Проверки перед отправкой -- Запустите `npm run lint` в папках с package.json -- Проверьте валидность ссылок в markdown -- Тестируйте примеры кода в браузере или Node.js -- Убедитесь, что переводы сохраняют правильную структуру +- Запустите `npm run lint` в директориях с package.json +- Проверьте валидность ссылок markdown +- Протестируйте примеры кода в браузере или Node.js +- Убедитесь, что переводы сохраняют корректную структуру ## Руководство по стилю кода ### JavaScript -- Используйте современный синтаксис ES6+ -- Следуйте стандартным конфигурациям ESLint в проектах -- Используйте осмысленные имена переменных и функций для образовательной ясности -- Добавляйте комментарии, объясняющие концепции для учеников -- Форматируйте с помощью Prettier, где настроено +- Используйте современный синтаксис ES6+ +- Следуйте стандартным конфигурациям ESLint в проектах +- Используйте осмысленные имена переменных и функций для образовательной ясности +- Добавляйте комментарии с объяснениями концепций для обучающихся +- Форматируйте код с помощью Prettier, если это настроено ### HTML/CSS -- Семантические элементы HTML5 -- Принципы адаптивного дизайна -- Чёткие соглашения по именованию классов -- Комментарии, объясняющие CSS техники для обучения +- Семантические элементы HTML5 +- Принципы адаптивного дизайна +- Четкие соглашения по именованию классов +- Комментарии с объяснениями 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}/` -## Сборка и развертывание +## Сборка и деплоймент ### Развертывание Quiz App (Azure Static Web Apps) -Приложение quiz-app настроено для развертывания в Azure Static Web Apps: +quiz-app настроен для деплоймента в Azure Static Web Apps: ```bash cd quiz-app npm run build # Создает папку dist/ # Выполняет развертывание через рабочий процесс GitHub Actions при пуше в main ``` - -Конфигурация Azure Static Web Apps: -- **Расположение приложения**: `/quiz-app` -- **Расположение вывода**: `dist` -- **Рабочий процесс**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +Конфигурация Azure Static Web Apps: +- **Путь приложения**: `/quiz-app` +- **Путь вывода**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Генерация PDF документации ```bash npm install # Установить docsify-to-pdf -npm run convert # Сгенерировать PDF из docs +npm run convert # Генерировать PDF из docs ``` - + ### Документация Docsify ```bash npm install -g docsify-cli # Установите Docsify глобально docsify serve # Запустить на localhost:3000 ``` + +### Сборка для отдельных проектов -### Сборки по проектам - -Каждая директория проекта может иметь собственный процесс сборки: -- Vue проекты: `npm run build` создаёт production сборки -- Статические проекты: Без шага сборки, файлы подаются напрямую +В каждой директории проекта может быть свой процесс сборки: +- Vue проекты: `npm run build` создает продакшен-сборки +- Статические проекты: сборка не требуется, файлы подаются напрямую -## Правила Pull Request +## Руководство по pull request ### Формат заголовка -Используйте ясные, описательные заголовки, указывающие область изменений: -- `[Quiz-app] Добавить новую викторину для урока X` -- `[Lesson-3] Исправить опечатку в проекте террариума` -- `[Translation] Добавить испанский перевод для урока 5` +Используйте понятные, описательные заголовки, указывающие область изменений: +- `[Quiz-app] Добавить новую викторину для урока X` +- `[Lesson-3] Исправить опечатку в проекте Террариум` +- `[Translation] Добавить испанский перевод для урока 5` - `[Docs] Обновить инструкции по настройке` -### Обязательные проверки +### Необходимые проверки -Перед отправкой PR: +Перед отправкой PR: -1. **Качество кода**: - - Запустите `npm run lint` в затронутых директориях проектов - - Исправьте все ошибки и предупреждения линтера +1. **Качество кода**: + - Запустите `npm run lint` в затронутых директориях + - Исправьте все ошибки и предупреждения lint -2. **Проверка сборки**: - - Запустите `npm run build` если применимо - - Убедитесь, что нет ошибок сборки +2. **Проверка сборки**: + - Запустите `npm run build` при необходимости + - Убедитесь в отсутствии ошибок сборки -3. **Проверка ссылок**: - - Проверьте все markdown ссылки +3. **Валидация ссылок**: + - Проверьте все markdown-ссылки - Убедитесь, что ссылки на изображения работают -4. **Проверка контента**: - - Вычитайте орфографию и грамматику - - Убедитесь, что примеры кода корректны и образовательны - - Проверьте, что переводы сохраняют оригинальный смысл +4. **Проверка содержимого**: + - Проверьте орфографию и грамматику + - Убедитесь в правильности и образовательной ценности примеров кода + - Проверьте точность переводов -### Требования к вкладу +### Требования к внесению вклада -- Согласие с Microsoft CLA (автоматическая проверка при первом PR) -- Следование [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Смотрите подробные инструкции в [CONTRIBUTING.md](./CONTRIBUTING.md) -- Укажите номера issues в описании PR, если применимо +- Согласие с Microsoft CLA (автоматическая проверка при первом PR) +- Соблюдение [Кодекса поведения Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/) +- Подробные инструкции в [CONTRIBUTING.md](./CONTRIBUTING.md) +- Упоминание номеров задач в описании PR при наличии -### Процесс ревью +### Процесс проверки -- PR проверяются ответственными и сообществом -- Приоритет — образовательная ясность -- Примеры кода должны соответствовать действующим лучшим практикам +- PR проверяются поддерживающими и сообществом +- Приоритет на образовательную ясность +- Примеры кода должны соответствовать текущим лучшим практикам - Переводы проверяются на точность и культурную адекватность ## Система перевода ### Автоматический перевод -- Использует GitHub Actions с workflow co-op-translator -- Автоматический перевод на 50+ языков -- Исходные файлы в главных каталогах -- Переведённые файлы в каталогах `translations/{language-code}/` +- Использует GitHub Actions с workflow co-op-translator +- Автоматический перевод на 50+ языков +- Исходные файлы в основных директориях +- Переведённые файлы в директориях `translations/{language-code}/` -### Добавление ручных улучшений перевода +### Добавление улучшений в ручной перевод -1. Найдите файл в `translations/{language-code}/` -2. Внесите улучшения, сохраняя структуру -3. Убедитесь, что примеры кода остаются работоспособными -4. Проверьте любой локализованный викторинный контент +1. Найдите файл в `translations/{language-code}/` +2. Внесите улучшения, сохраняя структуру +3. Убедитесь, что примеры кода остаются работоспособными +4. Проверьте локализованный контент викторин ### Метаданные перевода -Переведённые файлы включают заголовок с метаданными: +Переведённые файлы содержат заголовок с метаданными: ```markdown ``` - + ## Отладка и устранение неполадок ### Распространённые проблемы -**Приложение викторины не запускается**: -- Проверьте версию Node.js (рекомендуется v14+) -- Удалите `node_modules` и `package-lock.json`, затем запустите `npm install` заново +**Quiz app не запускается**: +- Проверьте версию Node.js (рекомендуется v14+) +- Удалите `node_modules` и `package-lock.json`, затем снова выполните `npm install` - Проверьте конфликты портов (по умолчанию Vite использует порт 5173) -**Сервер API не запускается**: -- Убедитесь, что версия Node.js не ниже 10 -- Проверьте, что порт не занят -- Убедитесь, что все зависимости установлены (`npm install`) +**API сервер не запускается**: +- Убедитесь, что версия Node.js не ниже 10 +- Проверьте, не занят ли порт +- Установите все зависимости через `npm install` -**Расширение браузера не загружается**: -- Проверьте правильность формата manifest.json -- Проверьте консоль браузера на ошибки -- Следуйте инструкциям по установке расширений в вашем браузере +**Расширение браузера не загружается**: +- Проверьте правильность формата manifest.json +- Смотрите ошибки в консоли браузера +- Следуйте инструкциям по установке расширения для конкретного браузера -**Проблемы с чат-проектом на Python**: -- Убедитесь, что установлен пакет OpenAI: `pip install openai` -- Проверьте, что переменная окружения GITHUB_TOKEN установлена -- Проверьте разрешения доступа GitHub Models +**Проблемы с Python чат-проектом**: +- Убедитесь, что пакет OpenAI установлен: `pip install openai` +- Проверьте, что установлен GITHUB_TOKEN в переменных среды +- Проверьте разрешения доступа к GitHub Models -**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 для единообразного форматирования -- Используйте инструменты разработчика в браузере для отладки JavaScript -- Для Vue проектов установите Vue DevTools расширение браузера +- Используйте VS Code с расширением Live Server для HTML проектов +- Устанавливайте расширения ESLint и Prettier для согласованного форматирования +- Используйте DevTools браузера для отладки JavaScript +- Для проектов Vue установите расширение Vue DevTools ### Особенности производительности -- Большое количество переведённых файлов (50+ языков) увеличивает размер полного клона -- Используйте неглубокий клон, если работаете только с контентом: `git clone --depth 1` -- Исключайте переводы из поиска при работе с английским контентом +- Большое количество переведённых файлов (50+ языков) делает полные клонирования тяжелыми +- Используйте shallow clone, если работаете только с контентом: `git clone --depth 1` +- Исключите переводы из поиска при работе с английским контентом - Процессы сборки могут быть медленными при первом запуске (npm install, сборка Vite) ## Вопросы безопасности ### Переменные окружения -- Ключи API никогда не должны попадать в репозиторий -- Используйте `.env` файлы (уже в `.gitignore`) +- Ключи API никогда не должны попадать в репозиторий +- Используйте `.env` файлы (уже внесены в `.gitignore`) - Документируйте необходимые переменные окружения в README проектов ### Python проекты -- Используйте виртуальные окружения: `python -m venv venv` -- Обновляйте зависимости -- Токены GitHub должны иметь минимально необходимые права +- Используйте виртуальные окружения: `python -m venv venv` +- Обновляйте зависимости +- Токены GitHub должны иметь минимально необходимые разрешения ### Доступ к GitHub Models -- Требуются персональные токены доступа (PAT) -- Токены нужно хранить как переменные окружения -- Никогда не коммитите токены или учетные данные +- Для GitHub Models требуются Personal Access Tokens (PAT) +- Токены следует хранить в переменных среды +- Никогда не коммитьте токены или учетные данные ## Дополнительные заметки ### Целевая аудитория -- Абсолютные новички в веб-разработке -- Студенты и самоучки -- Преподаватели, использующие курс в классе -- Контент разработан с учётом доступности и постепенного обучения +- Абсолютные новички в веб-разработке +- Студенты и самоучки +- Преподаватели, использующие программу в классе +- Контент разработан с учетом доступности и постепенного освоения навыков ### Образовательная философия -- Проектно-ориентированный подход к обучению -- Частые проверки знаний (викторины) -- Практические упражнения по программированию -- Примеры применения в реальных задачах -- Акцент на фундаментальных знаниях до изучения фреймворков +- Проектно-ориентированное обучение +- Частые проверки знаний (викторины) +- Практические упражнения по программированию +- Примеры реальных приложений +- Сфокусированность на основах до изучения фреймворков ### Поддержка репозитория -- Активное сообщество обучающихся и участников -- Регулярные обновления зависимостей и контента -- Мониторинг issues и обсуждений ответственными +- Активное сообщество обучающихся и контрибьюторов +- Регулярные обновления зависимостей и контента +- Мониторинг тикетов и дискуссий со стороны поддерживающих - Автоматическое обновление переводов через 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, Data Science, ML, 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) рекомендуется для обучающихся +- Дополнительные курсы: Generative AI, Data Science, ML, 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` - Проект чат-ассистента с ИИ ### Структура монорепозитория -Хотя это не традиционный монорепозиторий, этот репозиторий содержит несколько независимых проектов: -- Каждый урок автономен -- Проекты не разделяют зависимости -- Работа с отдельными проектами не влияет на другие -- Клонируйте весь репозиторий для полного опыта курсовой программы +Хотя это не традиционный монорепозиторий, он содержит несколько независимых проектов: +- Каждый урок автономен +- Проекты не делят зависимости +- Работайте с отдельными проектами без влияния на другие +- Клонируйте весь репозиторий для полного опыта обучения --- -**Отказ от ответственности**: -Этот документ был переведён с помощью сервиса автоматического перевода [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/ru/README.md b/translations/ru/README.md index f89a07076..6078c0ddb 100644 --- a/translations/ru/README.md +++ b/translations/ru/README.md @@ -10,20 +10,20 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Веб-разработка для начинающих — Учебная программа +# Веб-разработка для начинающих - учебная программа -Освойте основы веб-разработки с нашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий подробно изучает JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и выполняйте практические задания. Повышайте свои навыки и оптимизируйте запоминание с помощью нашей эффективной проектно-ориентированной методики. Начните свой путь в программировании уже сегодня! +Изучите основы веб-разработки с нашим 12-недельным комплексным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной проектной педагогики. Начните свой путь в программировании уже сегодня! -Присоединяйтесь к сообществу Azure AI Foundry в Discord +Присоединяйтесь к сообществу 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` -3. [**Присоединяйтесь к Azure AI Foundry Discord и встречайтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4) +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 (автоматически и всегда актуально) @@ -31,183 +31,192 @@ [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](./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 переводов на разные языки, что значительно увеличивает размер загрузки. Чтобы клонировать без переводов, используйте 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" +> ``` +> +> Это даст вам все необходимое для прохождения курса с гораздо более быстрой загрузкой. -**Если вы хотите, чтобы были добавлены дополнительные языки перевода, они перечислены [здесь](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) #### 🧑‍🎓 _Вы студент?_ -Посетите страницу [**Student Hub**](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 Challenge 🚀» в большинстве разделов. Это новое задание для вас, используя GitHub Copilot и режим Agent. Если вы ранее не пользовались режимом Agent, он не только генерирует текст, но и может создавать и редактировать файлы, выполнять команды и многое другое. +Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новая задача для вас с использованием GitHub Copilot и режима агента. Если вы ранее не использовали режим агента, он способен не только генерировать текст, но и создавать и редактировать файлы, запускать команды и многое другое. -### 📣 Объявление — _Новый проект с использованием генеративного ИИ_ +### 📣 Объявление - _Новый проект с использованием Generative AI_ -Недавно добавлен новый проект AI Assistant, посмотрите его [проект](./9-chat-project/README.md) +Новый проект AI Assistant только что добавлен, ознакомьтесь с [проектом](./9-chat-project/README.md) -### 📣 Объявление — _Новая учебная программа_ по генеративному ИИ для JavaScript только что выпущена +### 📣 Объявление - _Новая учебная программа_ по Generative AI для JavaScript уже выпущена -Не пропустите нашу новую программу по генеративному ИИ! +Не пропустите нашу новую учебную программу по Generative 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), чтобы начать! -![Фон](../../translated_images/ru/background.148a8d43afde5730.webp) +![Background](../../translated_images/ru/background.148a8d43afde5730.webp) -- Уроки от основ до RAG. -- Взаимодействуйте с историческими персонажами, используя GenAI и наше сопутствующее приложение. -- Веселый и увлекательный сюжет, вы будете путешествовать во времени! +- Уроки охватывают все от основ до RAG. +- Взаимодействуйте с историческими персонажами с помощью GenAI и нашего сопутствующего приложения. +- Веселый и увлекательный рассказ, вы путешествуете во времени! -![персонаж](../../translated_images/ru/character.5c0dd8e067ffd693.webp) +![character](../../translated_images/ru/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 -В вашей копии этого репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы. +В созданной вами копии репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст для вас новый Codespace для работы. ![Codespace](../../translated_images/ru/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) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и выполните следующую команду, заменив `` на URL, который вы только что скопировали: + + Затем откройте [Терминал](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) и выполните следующую команду, заменив `` на только что скопированный URL: ```bash git clone ``` -2. Откройте папку в Visual Studio Code. Вы можете сделать это, кликнув **Файл** > **Открыть папку** и выбрав только что клонированную папку. +2. Откройте папку в Visual Studio Code. Для этого нажмите **File** > **Open Folder** и выберите только что клонированную папку. -> Рекомендуемые расширения Visual Studio Code: +> Рекомендуемые расширения 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) — для более быстрого написания кода +> * [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) — для помощи в более быстром написании кода ## 📂 Каждый урок включает: - необязательные скетчноуты - необязательное дополнительное видео -- разогревающий квиз перед уроком +- разминка-квиз перед уроком - письменный урок -- для уроков с проектами — пошаговые руководства по созданию проекта +- для проектных уроков — пошаговые руководства по созданию проекта - проверки знаний -- челлендж -- дополнительное чтение +- вызов/челлендж +- дополнительные материалы для чтения - задание - [квиз после урока](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 | [Террариум](./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 | [Замыкания JS и работа с DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Игра на скорость набора](./4-typing-game/solution/README.md) | Создание игры для набора текста | Научиться использовать события клавиатуры для управления логикой JS приложения | [Событийно-ориентированное программирование](./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 и хранение переменных в localStorage | Написать 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 | Изучить наследование с помощью классов и композиции, а также паттерн Pub/Sub перед созданием игры | [Введение в продвинутую разработку игр](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Космическая игра](./6-space-game/solution/README.md) | Рисование на canvas | Познакомиться с Canvas API, используемым для рисования на экране | [Рисование на canvas](./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 Ассистент](./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, чтобы сделать террариум интерфейсом drag/drop, с фокусом на замыкания и манипуляции DOM | [Замыкания и 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 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнать, как работают браузеры, их историю и как создать первые элементы расширения для браузера | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Создание формы, вызов API и сохранение данных в локальном хранилище | Создать JavaScript компоненты расширения для вызова API с использованием переменных в локальном хранилище | [API, формы и локальное хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Расширение для браузера Green](./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) | Рисование на canvas | Изучить Canvas API для рисования элементов на экране | [Рисование на Canvas](./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 ассистента](./9-chat-project/README.md) | Chris | ## 🏫 Педагогика Наша учебная программа разработана с учётом двух ключевых педагогических принципов: -* обучение через проекты +* обучение на основе проектов * частые квизы -Программа обучает основам JavaScript, HTML и CSS, а также современным инструментам и методам, используемым современными веб-разработчиками. Студенты получат возможность получить практический опыт, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле космических захватчиков и банковское приложение для бизнеса. К концу серии студенты приобретут прочное понимание веб-разработки. +Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и методикам, используемым современными веб-разработчиками. Студенты получат возможность получить практический опыт, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле space-invader и банковское приложение для бизнеса. К концу курса студенты будут уверенно владеть основами веб-разработки. -> 🎓 Вы можете пройти первые несколько уроков этой программы как [Обучающий путь](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) на Microsoft Learn! -Обеспечение соответствия содержания проектам делает процесс более увлекательным для студентов и способствует лучшему усвоению концепций. Мы также написали несколько вводных уроков по основам JavaScript с видео из серии "[Beginners Series to: JavaScript](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)", авторы которых частично участвовали в создании этой программы. -Кроме того, небольшой квиз перед занятием задаёт настрой учащегося на изучение темы, а второй квиз после класса обеспечивает лучшее закрепление материала. Эта учебная программа разработана быть гибкой и интересной, её можно пройти полностью или частично. Проекты начинаются с простых и усложняются к концу 12-недельного цикла. +Кроме того, низкоценностный квиз перед занятием задаёт студенту намерение изучать тему, а второй квиз после занятия способствует дальнейшему запоминанию. Эта программа была разработана, чтобы быть гибкой и увлекательной и может проходиться целиком или частично. Проекты начинаются с малого и становятся всё более сложными к концу 12-недельного цикла. -Хотя мы сознательно избегали внедрения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках веб-разработчика перед изучением фреймворков, хорошим следующим шагом после этой программы будет изучение Node.js через другую видеосерию: "[Beginner Series to: 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`. Веб-сайт будет доступен на порту 3000 по адресу `localhost:3000`. +Вы можете просматривать эту документацию офлайн с помощью [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем компьютере, затем в корневой папке этого репозитория введите команду `docsify serve`. Веб-сайт будет запущен на порту 3000 на вашем localhost: `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 @@ -216,7 +225,7 @@ PDF со всеми уроками доступен [здесь](https://microso [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agents +### Azure / Edge / MCP / Агенты [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) @@ -232,7 +241,7 @@ PDF со всеми уроками доступен [здесь](https://microso --- -### Основы обучения +### Базовое обучение [![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) @@ -251,7 +260,7 @@ PDF со всеми уроками доступен [здесь](https://microso ## Получение помощи -Если вы застряли или у вас есть вопросы по созданию ИИ-приложений, присоединяйтесь к другим учащимся и опытным разработчикам в обсуждениях на тему MCP. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно распространяются. +Если вы застряли или у вас есть вопросы по созданию AI-приложений, присоединяйтесь к обсуждениям вместе с другими учащимися и опытными разработчиками о MCP. Это поддерживающее сообщество, где приветствуются вопросы и свободно делятся знаниями. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) @@ -261,11 +270,11 @@ PDF со всеми уроками доступен [здесь](https://microso ## Лицензия -Этот репозиторий лицензирован по лицензии 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