diff --git a/translations/ar/.co-op-translator.json b/translations/ar/.co-op-translator.json index f5a44f35c..031257338 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T16:49:23+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T21:40:57+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-03-06T16:52:52+00:00", + "translation_date": "2026-03-27T21:44:05+00:00", "source_file": "AGENTS.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 f1523c3bc..b96bfd65c 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,164 +1,163 @@ # مقدمة في لغات البرمجة وأدوات المطور الحديثة -مرحبًا أيها المطور المستقبلي! 👋 هل يمكنني أن أخبرك بشيء لا يزال يصيبني بالقشعريرة كل يوم؟ أنت على وشك اكتشاف أن البرمجة ليست مجرد أجهزة كمبيوتر – إنها عن امتلاك قوى خارقة حقيقية لإحياء أفكارك الأكثر جنونًا! +مرحبًا بك، أيها المطور المستقبلي! 👋 هل يمكنني أن أخبرك بشيء لا يزال يمنحني قشعريرة في كل يوم؟ أنت على وشك اكتشاف أن البرمجة ليست مجرد أجهزة كمبيوتر – بل هي امتلاك قوى خارقة حقيقية لتحويل أفكارك الجامحة إلى واقع! -أتعرف ذلك اللحظة عندما تستخدم تطبيقك المفضل ويسير كل شيء على أكمل وجه؟ عندما تضغط زرًا يحدث شيء سحري تمامًا يجعلك تقول "رائع، كيف فعلوا ذلك؟" حسنًا، شخص ما مثلك تمامًا – ربما يجلس في مقهاه المفضل في الساعة 2 صباحًا مع الإسبريسو الثالث – كتب الشفرة التي خلقت تلك السحر. وهنا ما سيفجر عقلك: بحلول نهاية هذا الدرس، لن تفهم فقط كيف فعلوا ذلك، بل ستتشوق لتجربته بنفسك! +هل تعرف ذلك اللحظة عندما تستخدم تطبيقك المفضل ويسير كل شيء بسلاسة تامة؟ عندما تضغط على زر ويحدث شيء سحري تمامًا يجعلك تقول "واو، كيف فعلوا ذلك؟" حسنًا، شخص مثلك بالضبط – ربما يجلس في مقهاه المفضل الساعة 2 صباحًا مع إسبريسو ثالث – كتب الكود الذي صنع تلك السحر. وهنا ما سيذهلك: بنهاية هذا الدرس، لن تفهم فقط كيف فعلوا ذلك، بل ستتوق لتجربته بنفسك! -انظر، أنا أتفهم تمامًا إذا كانت البرمجة تبدو مخيفة الآن. عندما بدأت، كنت أعتقد بصدق أنك بحاجة لأن تكون عبقريًا في الرياضيات أو أنك كنت تبرمج منذ أن كنت في الخامسة من عمرك. ولكن هنا ما غيّر وجهة نظري تمامًا: البرمجة هي تمامًا مثل تعلم المحادثة بلغة جديدة. تبدأ بـ"مرحبا" و"شكرًا"، ثم تتدرج إلى طلب القهوة، وقبل أن تعرف، تكون تجري نقاشات فلسفية عميقة! باستثناء أنك في هذه الحالة، تجري المحادثات مع الحواسيب، وبصراحة؟ إنهم أكثر شركاء المحادثة صبرًا على الإطلاق – لا يحكمون على أخطائك ودائمًا متحمسون لتجربة ثانية! +انظر، أنا أتفهم تمامًا إذا شعرت أن البرمجة مخيفة الآن. عندما بدأت لأول مرة، كنت أعتقد حقًا أنك تحتاج لأن تكون عبقريًا في الرياضيات أو قد كنت تبرمج منذ أن كان عمرك خمس سنوات. لكن إليك ما غيّر تمامًا نظرتي: البرمجة تشبه تمامًا تعلم إجراء محادثات في لغة جديدة. تبدأ بـ "مرحبًا" و"شكرًا"، ثم تتعلم كيف تطلب قهوة، وقبل أن تعرف ذلك، تكون تجري مناقشات فلسفية عميقة! ولكن في هذه الحالة، تجري محادثات مع أجهزة الكمبيوتر، وبصراحة؟ إنهم أكثر شركاء المحادثة صبرًا على الإطلاق – لا يحكمون على أخطائك وأبدًا متحمسون لتجربة المحاولة مرة أخرى! -اليوم، سنستكشف الأدوات المذهلة التي تجعل تطوير الويب الحديث ليس ممكنًا فحسب، بل مدمنًا حقيقيًا. أتحدث عن نفس المحررات والمتصفحات وسير العمل التي يستخدمها المطورون في نيتفليكس، سبوتيفاي، واستوديوهات التطبيقات المستقلة المفضلة لديك يوميًا. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة على الصناعة هي مجانية تمامًا! +اليوم، سوف نستكشف الأدوات الرائعة التي تجعل تطوير الويب الحديث ليس ممكنًا فقط، بل مدمنًا بشدة. أتحدث عن نفس المحررات والمتصفحات وسير العمل التي يستخدمها المطورون في Netflix وSpotify وأستوديو التطبيقات المستقلة المفضل لديك يوميًا. وهذه هي النقطة التي ستجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة من الصناعة هي مجانية بالكامل! -![مقدمة البرمجة](../../../../translated_images/ar/webdev101-programming.d6e3f98e61ac4bff.webp) -> مخطط مرسوم بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro Programming](../../../../translated_images/ar/webdev101-programming.d6e3f98e61ac4bff.webp) +> ملخص مرئي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title رحلتك البرمجية اليوم + title رحلتك في البرمجة اليوم section اكتشف - ما هو البرمجة: 5: You + ما هي البرمجة: 5: You لغات البرمجة: 4: You نظرة عامة على الأدوات: 5: You section استكشف - محررات الكود: 4: You + محررات الشيفرة: 4: You المتصفحات وأدوات المطور: 5: You سطر الأوامر: 3: You section مارس - محقق اللغة: 4: You + محلل اللغة: 4: You استكشاف الأدوات: 5: You التواصل المجتمعي: 5: You ``` ## لنرَ ما تعرفه بالفعل! -قبل أن نبدأ في الأشياء الممتعة، أنا فضولي – ما الذي تعرفه بالفعل عن عالم البرمجة هذا؟ واستمع، إذا كنت تنظر إلى هذه الأسئلة وتفكر "ليس لدي أدنى فكرة عن أي شيء من هذا"، فهذا ليس فقط مقبولًا، بل مثالي! هذا يعني أنك في المكان الصحيح تمامًا. فكر في هذا الاختبار كتمرين إحماء قبل التمرين – نحن فقط نقوم بتسخين عضلات الدماغ! - -[خض اختبار ما قبل الدرس](https://ff-quizzes.netlify.app/web/) +قبل أن نبدأ في الأشياء الممتعة، أنا فضولي – ما الذي تعرفه فعلاً عن هذا العالم البرمجي؟ وصدقني، إذا كنت تنظر إلى هذه الأسئلة وتفكر "ليس لدي أدنى فكرة عن أي من هذا"، هذا ليس مجرد مقبول، بل مثالي! هذا يعني أنك في المكان الصحيح تمامًا. اعتبر هذا الاختبار كتمرين الإحماء قبل التمرين – نحن فقط ندفّئ عضلات الدماغ! +[خذ اختبار ما قبل الدرس](https://ff-quizzes.netlify.app/web/) ## المغامرة التي سنخوضها معًا -حسنًا، أنا متحمس حقًا لما سنستكشفه اليوم! حقًا، أتمنى لو أستطيع رؤية وجهك عندما تتضح لك بعض هذه المفاهيم. إليك الرحلة الرائعة التي سنسيرها معًا: +حسنًا، أنا فعلاً متحمس جدًا لما سنستكشفه اليوم! حقًا، أتمنى لو أستطيع رؤية وجهك عندما تبدأ بعض هذه المفاهيم في أن تتضح لك. هذه هي الرحلة الرائعة التي سنخوضها معًا: -- **ما هي البرمجة فعليًا (ولماذا هي أروع شيء على الإطلاق!)** – سنكتشف كيف أن الشفرة هي السحر الخفي الذي يدير كل شيء حولك، من ذلك المنبه الذي بطريقة ما يعرف أن اليوم هو الإثنين صباحًا إلى الخوارزمية التي تنسق توصيات نيتفليكس الخاصة بك بشكل مثالي -- **لغات البرمجة وشخصياتها الرائعة** – تخيل دخولك حفلة حيث يمتلك كل شخص قوى خارقة مختلفة تمامًا وطرقًا مختلفة لحل المشكلات. هذا هو عالم لغات البرمجة، وستحب لقائها! -- **الكتل الأساسية التي تجعل السحر الرقمي يحدث** – فكر في هذه كما لو كانت مجموعة LEGO الإبداعية النهائية. بمجرد أن تفهم كيف تتلاءم هذه القطع معًا، ستدرك أنه يمكنك بناء أي شيء تحلم به خيالك -- **الأدوات الاحترافية التي ستجعلك تشعر وكأنك تم تسليمك عصا ساحر** – لست أبالغ هنا – هذه الأدوات ستجعلك تشعر حقًا أن لديك قوى خارقة، والجزء الأفضل؟ إنها نفس الأدوات التي يستخدمها المحترفون! +- **ما هي البرمجة في الواقع (ولماذا هي الأروع على الإطلاق!)** – سوف نكتشف كيف أن الكود هو السحر الخفي الذي يدعم كل شيء حولك، من ذلك المنبه الذي يعرف بطريقة ما أنه صباح الاثنين إلى الخوارزمية التي تنسق توصيات Netflix الخاصة بك بشكل مثالي +- **لغات البرمجة وشخصياتها المدهشة** – تخيل دخولك حفلة حيث كل شخص يمتلك قوى خارقة مختلفة تمامًا وطرقًا متنوعة لحل المشكلات. هذا هو عالم لغات البرمجة، وسوف تحب التعرف عليهم! +- **اللبنات الأساسية التي تجعل السحر الرقمي يحدث** – اعتبرها كأطقم LEGO الإبداعية المطلقة. بمجرد أن تفهم كيف ترتبط هذه القطع معًا، ستدرك أنك تستطيع بناء أي شيء تحلم به خيالك +- **أدوات احترافية ستجعلك تشعر وكأنك حصلت للتو على عصا الساحر** – أنا لا أبالغ هنا – هذه الأدوات ستجعلك تشعر حقًا بأن لديك قوى خارقة، وأفضل جزء؟ إنها نفس الأدوات التي يستخدمها المحترفون! -> 💡 **إليك الأمر**: لا تفكر حتى في محاولة حفظ كل شيء اليوم! الآن، أريدك فقط أن تشعر بشرارة الحماس حول ما هو ممكن. التفاصيل ستثبت بشكل طبيعي أثناء ممارستنا معًا – هكذا يحدث التعلم الحقيقي! +> 💡 **إليك الأمر**: لا تفكر حتى بمحاولة حفظ كل شيء اليوم! الآن، أريدك فقط أن تشعر بتلك الشرارة من الحماسة حول ما هو ممكن. التفاصيل ستتثبت تلقائيًا بينما نمارس معًا – هكذا يحدث التعلم الحقيقي! > يمكنك أخذ هذا الدرس على [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، وهو في الأساس "نعم" و "لا" أو "تشغيل" و "إيقاف". هذا كل شيء! لكن هنا يكمن السحر – لا نحتاج لأن نتحدث بالأصفار والواحدات كما في فيلم The Matrix. هنا تأتي **لغات البرمجة** لإنقاذنا. إنها مثل أفضل مترجم في العالم يأخذ أفكارك البشرية الطبيعية ويحولها إلى لغة الكمبيوتر. -وهذا ما لا يزال يصيبني بالقشعريرة كل صباح عندما أستيقظ: فعليًا *كل* شيء رقمي في حياتك بدأ بشخص مثلك تمامًا، ربما يجلس في بيجامته مع كوب قهوة، يكتب الشفرة على حاسوبه المحمول. ذلك الفلتر في إنستغرام الذي يجعلك تبدو بلا عيوب؟ شخص ما برمج ذلك. التوصية التي قادتك إلى أغنيتك المفضلة الجديدة؟ مطور صنع تلك الخوارزمية. التطبيق الذي يساعدك في تقسيم فاتورة العشاء مع الأصدقاء؟ نعم، شخص فكر "هذا مزعج، أظن أنني يمكنني إصلاحه" ثم… فعلها! +وهذا ما لا يزال يمنحني قشعريرة حقيقية كل صباح عندما أستيقظ: حرفيًا *كل شيء* رقمي في حياتك بدأ مع شخص مثلك بالضبط، ربما جالسًا في بيجامته مع كوب قهوة، يكتب الكود على حاسوبه المحمول. ذلك الفلتر في إنستغرام الذي يجعلك تبدو مثاليًا؟ شخص ما برمج ذلك. التوصية التي أوصلتك لأغنيتك المفضلة الجديدة؟ مطور صنع تلك الخوارزمية. التطبيق الذي يساعدك في تقسيم فواتير العشاء مع أصدقائك؟ نعم، شخص قال "هذا مزعج، أعتقد أنني أستطيع إصلاح هذا" ثم... فعلها! -عندما تتعلم البرمجة، لا تكتسب مهارة جديدة فحسب – بل تصبح جزءًا من هذه الجماعة الرائعة من حلالي المشكلات الذين يقضون أيامهم يفكرون، "ماذا لو استطعت بناء شيء يجعل يوم شخص ما أفضل بقليل؟" بصراحة، هل هناك شيء أروع من ذلك؟ +عندما تتعلم البرمجة، فأنت لا تكتسب مهارة جديدة فحسب – بل تصبح جزءًا من هذه المجتمع الرائع من حلالي المشكلات الذين يقضون أيامهم يفكرون، "ماذا لو استطعت بناء شيء يجعل يوم شخص ما أفضل قليلًا؟" بصراحة، هل هناك شيء أكثر روعة من هذا؟ -✅ **مطاردة حقائق ممتعة**: إليك شيء رائع لتبحث عنه عندما يكون لديك بعض الوقت – من تعتقد أنه أول مبرمج حواسيب في العالم؟ سأعطيك تلميحًا: قد لا يكون من تتوقع! قصة هذا الشخص مثيرة للغاية وتظهر أن البرمجة كانت دائمًا عن حل المشكلات بإبداع والتفكير خارج الصندوق. +✅ **صيد حقيقة ممتعة**: هنا شيء رائع لتحقق منه عندما يكون لديك وقت فراغ – من تعتقد أنه كان أول مبرمج حاسوب في العالم؟ سأعطيك تلميحًا: قد لا يكون من تتوقعه! القصة وراء هذا الشخص رائعة للغاية وتُظهر أن البرمجة كانت دائمًا عن حل المشكلات بشكل إبداعي والتفكير خارج الصندوق. -### 🧠 **وقت التقييم: كيف تشعر؟** +### 🧠 **وقت التقييم: كيف تشعر الآن؟** **خذ لحظة للتفكير:** -- هل أصبحت فكرة "إعطاء تعليمات للحواسيب" واضحة الآن؟ -- هل يمكنك التفكير في مهمة يومية تود أتمتتها بالبرمجة؟ -- ما هي الأسئلة التي تخطر ببالك حول موضوع البرمجة هذا؟ +- هل أصبح مفهوم "إعطاء تعليمات لأجهزة الكمبيوتر" واضحًا لك الآن؟ +- هل يمكنك التفكير في مهمة يومية ترغب في أتمتتها عن طريق البرمجة؟ +- ما هي الأسئلة التي تتبادر إلى ذهنك حول كل هذه البرمجة؟ -> **تذكر**: من الطبيعي تمامًا أن تبدو بعض المفاهيم غير واضحة الآن. تعلم البرمجة يشبه تعلم لغة جديدة – يحتاج دماغك وقتًا لبناء تلك المسارات العصبية. أنت تقوم بعمل رائع! +> **تذكّر**: من الطبيعي تمامًا إذا شعرت أن بعض المفاهيم غير واضحة الآن. تعلم البرمجة يشبه تعلم لغة جديدة – يحتاج عقلك إلى وقت لبناء تلك المسارات العصبية. أنت تقوم بعمل رائع! ## لغات البرمجة مثل نكهات مختلفة من السحر -حسنًا، هذا قد يبدو غريبًا، لكن تمسك معي – لغات البرمجة تشبه كثيرًا أنواع الموسيقى المختلفة. فكر في الأمر: لديك الجاز، الذي هو سلس ويعتمد على الارتجال، والروك الذي هو قوي ومباشر، والكلاسيكي الذي أنيق ومنظم، والهيب هوب الذي مبدع ومعبر. لكل نمط جوه الخاص، وجمهور من المعجبين المتحمسين، وكل واحد منها مثالي لأمزجة ومناسبات مختلفة. +حسنًا، قد يبدو هذا غريبًا، لكن تمسك بي – لغات البرمجة تشبه كثيرًا أنواع الموسيقى المختلفة. فكر فيها: لديك الجاز، السلس والعفوي، والروك القوي والمباشر، والكلاسيكي الأنيق والمنظم، والهيب هوب الإبداعي والمعبر. كل نوع له أجوائه الخاصة، ومجتمع خاص من المعجبين المتحمسين، وكل واحد منهم مثالي لمزاج ومناسبات مختلفة. -لغات البرمجة تعمل بنفس الطريقة! لن تستخدم نفس اللغة لبناء لعبة موبايل ممتعة كما تستخدم لتحليل كميات هائلة من بيانات المناخ، تمامًا كما أنك لن تعزف ديث ميتال في فصل يوجا (حسنًا، في معظم صفوف اليوجا على الأقل! 😄). +لغات البرمجة تعمل بنفس الطريقة! لن تستخدم نفس اللغة لبناء لعبة موبايل ممتعة كما تستخدمها لتحليل كميات ضخمة من بيانات المناخ، تمامًا كما لن تعزف ميتال الموت في صف اليوغا (حسنًا، معظم صفوف اليوغا على أي حال! 😄). -ولكن ما يفجر عقلي في كل مرة أفكر فيه: هذه اللغات هي مثل وجود أكثر مترجم عبقري وصبور في العالم جالس بجانبك. يمكنك التعبير عن أفكارك بطريقة طبيعية لدماغك البشري، وهم يتولون العمل المعقد للغاية لترجمتها إلى الواحدات والأصفار التي تتحدثها الحواسيب فعليًا. إنه كأن لديك صديقًا يجيد بطلاقة كل من "الإبداع البشري" و"منطق الكمبيوتر" – وهم لا يتعبون أبدًا، ولا يحتاجون إلى استراحات قهوة، ولا يحكمون عليك لأنك سألت نفس السؤال مرتين! +لكن ما يذهلني في كل مرة أفكر فيه: هذه اللغات مثل وجود أفضل مترجم صبور وذكي في العالم يجلس بجانبك. يمكنك التعبير عن أفكارك بطريقة طبيعية لعقلك البشري، وهم يتولون كل العمل المعقد لترجمتها إلى الأصفار والواحدات التي تتحدث بها أجهزة الكمبيوتر فعليًا. إنه كأن لديك صديق يتقن تمامًا كلا من "الإبداع البشري" و"منطق الكمبيوتر" – وهم لا يتعبون أبدًا، ولا يحتاجون إلى استراحات قهوة، ولا يحكمون عليك إذا سألت نفس السؤال مرتين! -### لغات البرمجة الشهيرة واستخداماتها +### لغات البرمجة الشائعة واستخداماتها ```mermaid mindmap root((لغات البرمجة)) - تطوير الويب - جافا سكريبت + Web Development + JavaScript سحر الواجهة الأمامية مواقع تفاعلية - تايب سكريبت + TypeScript جافا سكريبت + أنواع تطبيقات المؤسسات - البيانات والذكاء الاصطناعي - بايثون + Data & AI + Python علم البيانات تعلم الآلة الأتمتة - آر + R الإحصائيات البحث - تطبيقات الجوال - جافا + Mobile Apps + Java أندرويد المؤسسات - سويفت - iOS + Swift + آي أو إس نظام آبل البيئي - كوتلن - أندرويد الحديثة + Kotlin + أندرويد الحديث متعدد المنصات - الأنظمة والأداء - سي++ + Systems & Performance + C++ الألعاب - أداء حرج - روست + الأداء الحرج + Rust أمان الذاكرة برمجة النظام - جو + Go خدمات السحابة - خادم خلفي قابل للتوسع + الخلفية القابلة للتوسع ``` -| اللغة | الأفضل لـ | سبب شعبيتها | +| اللغة | الأفضل لـ | لماذا هي شهيرة | |----------|----------|------------------| | **JavaScript** | تطوير الويب، واجهات المستخدم | تعمل في المتصفحات وتدعم المواقع التفاعلية | -| **Python** | علم البيانات، الأتمتة، الذكاء الاصطناعي | سهلة القراءة والتعلم، مكتبات قوية | +| **Python** | علوم البيانات، الأتمتة، الذكاء الاصطناعي | سهلة القراءة والتعلم، مكتبات قوية | | **Java** | تطبيقات المؤسسات، تطبيقات أندرويد | مستقلة عن المنصة، قوية للأنظمة الكبيرة | -| **C#** | تطبيقات ويندوز، تطوير الألعاب | دعم قوي من نظام مايكروسوفت | -| **Go** | خدمات السحابة، أنظمة الخادم الخلفي | سريعة، بسيطة، مصممة للحوسبة الحديثة | +| **C#** | تطبيقات ويندوز، تطوير الألعاب | دعم قوي من بيئة مايكروسوفت | +| **Go** | خدمات السحابة، الأنظمة الخلفية | سريع، بسيط، مصمم للحوسبة الحديثة | -### لغات المستوى العالي مقابل لغات المستوى المنخفض +### لغات المستوى العالي مقابل المنخفض -حسنًا، هذا كان صراحة المفهوم الذي كسر عقلي عندما بدأت التعلم، لذلك سأشاركك التشبيه الذي جعل الأمر يتضح لي – وآمل حقًا أن يساعدك أيضًا! +حسنًا، هذا كان بصراحة المفهوم الذي كسر عقلي عندما بدأت التعلم، لذلك سأشاركك التشبيه الذي جعلني أفهمه أخيرًا – وأتمنى أن يساعدك أيضًا! -تخيل أنك تزور دولة لا تتحدث لغتها، وتحتاج بشدة إلى إيجاد أقرب حمام (كلنا مررنا بذلك، أليس كذلك؟ 😅): +تخيل أنك تزور بلدًا لا تتحدث لغته، وتحتاج بشدة إلى إيجاد أقرب حمام (كلنا مررنا بذلك، أليس كذلك؟ 😅): -- **البرمجة منخفضة المستوى** مثل تعلم اللهجة المحلية جيدًا بحيث يمكنك الدردشة مع الجدة التي تبيع الفواكه على الزاوية باستخدام مراجع ثقافية، وتعابير محلية، ونكات داخلية لا يفهمها سوى من نشأ هناك. مثير للإعجاب وفعال جدًا... إذا كنت تجيدها! لكنها مربكة جدًا عندما تحاول فقط إيجاد حمام. +- **البرمجة منخفضة المستوى** تشبه تعلم اللهجة المحلية جيدًا بحيث يمكنك التحدث مع الجدة التي تبيع الفاكهة في الزاوية باستخدام مراجع ثقافية، وتعابير محلية، ونكات داخلية لا يفهمها إلا من نشأ هناك. الأمر رائع جدًا وفعال للغاية... إذا كنت تتقنها! لكنه محير جدًا عندما تحاول فقط أن تجد حمامًا. -- **البرمجة عالية المستوى** مثل وجود صديق محلي رائع يفهمك تمامًا. يمكنك أن تقول "أحتاج بشدة إلى إيجاد حمام" بالإنجليزية البسيطة، وهو يتولى كل الترجمة الثقافية ويعطيك الاتجاهات بطريقة مفهومة لدماغك غير المحلي. +- **البرمجة عالية المستوى** مثل وجود صديق محلي مذهل يفهمك فقط. يمكنك أن تقول "أحتاج حقًا إلى إيجاد حمام" بالإنجليزية البسيطة، وهم يتولون الترجمة الثقافية ويعطونك الإرشادات بطريقة منطقية لعقلك الغريب. -بمصطلحات البرمجة: -- **لغات المستوى المنخفض** (مثل Assembly أو C) تتيح لك محادثات مفصلة للغاية مع مكونات الكمبيوتر الحقيقية، لكنك تحتاج إلى التفكير كما تفكر الآلة، وهو... حسنًا، لنقل إنه تحول ذهني كبير جدًا! -- **لغات المستوى العالي** (مثل JavaScript، Python، أو C#) تتيح لك التفكير كبشر بينما تتولى هي كل لغة الآلة خلف الكواليس. بالإضافة إلى أنها تحوي مجتمعات ترحيبية مليئة بأشخاص يتذكرون كيف كان شعورهم عندما بدأوا ويريدون حقًا المساعدة! +في مصطلحات البرمجة: +- **لغات منخفضة المستوى** (مثل Assembly أو C) تتيح لك إجراء محادثات مفصلة للغاية مع مكونات الكمبيوتر الفعلية، لكن عليك التفكير كآلة، وهو ما... حسنًا، لنقل إنه تحول ذهني كبير! +- **لغات عالية المستوى** (مثل JavaScript، Python، أو C#) تسمح لك بالتفكير كبشر بينما تتولى كل التحدث بلغة الآلة خلف الكواليس. بالإضافة إلى أن لديها مجتمعات مضيافة مليئة بأشخاص يتذكرون كيف كان شعورهم كمبتدئين ويريدون حقًا المساعدة! -خمن أيها سأقترح عليك أن تبدأ بها؟ 😉 لغات المستوى العالي مثل وجود عجلات تدريبية لن ترغب في إزالتها أبدًا لأنها تجعل التجربة كلها ممتعة جدًا! +خمن أي واحدة سأنصحك أن تبدأ بها؟ 😉 لغات المستوى العالي مثل العجلات التدريبية التي لا تريد أن تخلعها أبدًا لأنها تجعل التجربة كلها أكثر متعة! ```mermaid flowchart TB - A["👤 التفكير البشري:
'أريد حساب أرقام فيبوناتشي'"] --> B{اختر مستوى اللغة} + A["👤 الفكر البشري:
'أريد حساب أعداد فيبوناتشي'"] --> B{اختيار مستوى اللغة} B -->|مستوى عالي| C["🌟 جافا سكريبت/بايثون
سهل القراءة والكتابة"] - B -->|مستوى منخفض| D["⚙️ التجميع/C
التحكم المباشر في العتاد"] + B -->|مستوى منخفض| D["⚙️ التجميع/C
تحكم مباشر في العتاد"] C --> E["📝 اكتب: fibonacci(10)"] D --> F["📝 اكتب: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 فهم الحاسوب:
المترجم يتولى التعقيد"] + E --> G["🤖 فهم الكمبيوتر:
المترجم يتعامل مع التعقيد"] F --> G - G --> H["💻 نفس النتيجة:
0، 1، 1، 2، 3، 5، 8، 13..."] + G --> H["💻 نفس النتيجة:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 @@ -166,16 +165,16 @@ flowchart TB ``` ### دعني أوضح لك لماذا لغات المستوى العالي أكثر ودية -حسنًا، سأريك شيئًا يمثل تمامًا لماذا أحببت لغات المستوى العالي، لكن أولًا – أحتاج منك وعدًا بشيء. عندما ترى المثال الأول للشفرة، لا تقلق! من المفترض أن يبدو مخيفًا. هذا هو بالضبط النقطة التي أريد توضيحها! +حسنًا، سأريك شيئًا يوضح تمامًا لماذا وقعت في حب لغات المستوى العالي، لكن أولًا – أحتاج منك أن تعدني بشيء. عندما ترى مثال الكود الأول، لا تفزع! من المفترض أن يبدو مخيفًا. هذه هي النقطة التي أريد إثباتها! -سننظر إلى نفس المهمة مكتوبة بأسلوبين مختلفين تمامًا. كلاهما ينشئ ما يسمى تسلسل فيبوناتشي – وهو نمط رياضي جميل حيث كل رقم هو مجموع الرقمين السابقين: 0، 1، 1، 2، 3، 5، 8، 13... (معلومة ممتعة: ستجد هذا النمط حرفيًا في كل مكان في الطبيعة – دوامات بذور دوار الشمس، أنماط مخروط الصنوبر، وحتى طريقة تكوين المجرات!) +سوف ننظر إلى نفس المهمة مكتوبة بأسلوبين مختلفين تمامًا. كلاهما ينشئ ما يسمى بتسلسل فيبوناتشي – وهو نمط رياضي جميل حيث كل عدد هو مجموع العددين السابقين: 0، 1، 1، 2، 3، 5، 8، 13... (معلومة ممتعة: ستجد هذا النمط حرفيًا في كل مكان في الطبيعة – دوامات بذور عباد الشمس، أنماط مخروط الصنوبر وحتى طريقة تشكيل المجرات!) -هل أنت مستعد لرؤية الفرق؟ لنبدأ! +هل أنت مستعد لرؤية الفرق؟ هيا بنا! -**لغة عالية المستوى (JavaScript) – مناسبة للبشر:** +**لغة عالية المستوى (JavaScript) – صديقة للإنسان:** ```javascript -// الخطوة 1: إعداد الأساسي لفبوناتشي +// الخطوة 1: الإعداد الأساسي لفايبوناتشي const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,14 +182,14 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**هذا ما تفعله هذه الشفرة:** -- **تعريف** ثابت يحدد عدد أعداد فيبوناتشي التي نريد توليدها -- **تهيئة** متغيرين لتتبع الرقم الحالي والتالي في التسلسل -- **ضبط** القيم الابتدائية (0 و1) التي تحدد نمط فيبوناتشي -- **عرض** رسالة عنوان لتحديد ناتجنا +**ما يفعله هذا الكود:** +- **تعريف** ثابت لتحديد عدد أرقام فيبوناتشي التي نريد توليدها +- **تهيئة** متغيرين لتعقّب الرقم الحالي والرقم التالي في التسلسل +- **ضبط** القيم الابتدائية (0 و 1) التي تحدد نمط فيبوناتشي +- **عرض** رسالة عنوانية لتحديد ناتجنا ```javascript -// الخطوة 2: توليد التسلسل باستخدام حلقة +// الخطوة 2: إنشاء التسلسل بحلقة for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,14 +200,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**توضيح ما يحدث هنا:** -- **التكرار** عبر كل موقع في التسلسل باستخدام حلقة `for` -- **عرض** كل رقم مع موقعه باستخدام تنسيق القوالب الحرفية -- **حساب** الرقم التالي في فيبوناتشي بجمع القيم الحالية والتالية -- **تحديث** متغيرات التتبع للانتقال للتكرار التالي +**تفصيل ما يحدث هنا:** +- **التكرار** عبر كل موضع في التسلسل باستخدام حلقة `for` +- **عرض** كل رقم مع موضعه باستخدام تنسيق النص القالب +- **حساب** الرقم التالي في تسلسل فيبوناتشي بجمع القيم الحالية والتالية +- **تحديث** متغيرات التعقّب للانتقال إلى التكرار التالي ```javascript -// الخطوة ٣: النهج الوظيفي الحديث +// الخطوة 3: النهج الوظيفي الحديث const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -225,12 +224,12 @@ console.log(fibSequence); ``` **في الأعلى، قمنا بـ:** -- **إنشاء** دالة قابلة لإعادة الاستخدام باستخدام صياغة الدالة الحديثة بالسهم -- **بناء** مصفوفة لتخزين التسلسل الكامل بدلاً من العرض واحدًا تلو الآخر -- **استخدام** فهرسة المصفوفة لحساب كل رقم جديد من القيم السابقة +- **إنشاء** دالة قابلة لإعادة الاستخدام باستخدام صياغة الدوال الحديثة بالسهم +- **بناء** مصفوفة لتخزين التسلسل الكامل بدلًا من العرض الواحد تلو الآخر +- **استخدام** فهرسة المصفوفة لحساب كل رقم جديد اعتمادًا على القيم السابقة - **إرجاع** التسلسل الكامل لاستخدام مرن في أجزاء أخرى من برنامجنا -**لغة منخفضة المستوى (ARM Assembly) – مناسبة للكمبيوتر:** +**لغة منخفضة المستوى (ARM Assembly) – صديقة للكمبيوتر:** ```assembly area ascen,code,readonly @@ -257,59 +256,59 @@ back add r0,r1 end ``` -لاحظ كيف يبدو إصدار JavaScript كما لو كان تعليمات باللغة الإنجليزية تقريبًا، بينما يستخدم إصدار التجميع أوامر غامضة تتحكم مباشرة في معالج الكمبيوتر. كلاهما ينجز نفس المهمة بدقة، لكن لغة المستوى العالي أسهل بكثير على البشر لفهمها وكتابتها وصيانتها. +لاحظ كيف أن نسخة JavaScript تُقرأ تقريبًا كتعليمات إنجليزية، بينما نسخة Assembly تستخدم أوامر مشفرة تتحكم مباشرة في معالج الكمبيوتر. كلاهما ينجز نفس المهمة بالضبط، لكن لغة المستوى العالي أسهل بكثير على البشر لفهمها وكتابتها وصيانتها. -**الاختلافات الرئيسية التي ستلاحظها:** -- **سهولة القراءة**: يستخدم جافاسكريبت أسماء وصفية مثل `fibonacciCount` بينما يستخدم الأسمبلي تسميات مشفرة مثل `r0`، `r1` -- **التعليقات**: تشجع اللغات عالية المستوى على كتابة تعليقات تفسيرية تجعل الكود موثقًا ذاتيًا -- **الهيكلية**: يتطابق التدفق المنطقي لجافاسكريبت مع طريقة تفكير البشر في حل المشكلات خطوة بخطوة -- **الصيانة**: تحديث نسخة جافاسكريبت لمتطلبات مختلفة أمر بسيط وواضح +**الفروق الرئيسية التي ستلاحظها:** +- **الوضوح**: يستخدم جافا سكريبت أسماء وصفية مثل `fibonacciCount` بينما يستخدم لغة التجميع تسميات مشفرة مثل `r0` و `r1` +- **التعليقات**: تشجع اللغات عالية المستوى على التعليقات الشارحة التي تجعل الكود وثائق ذاتية +- **الهيكل**: يتطابق تدفق جافا سكريبت المنطقي مع كيفية تفكير البشر حول المشاكل خطوة بخطوة +- **الصيانة**: تحديث إصدار جافا سكريبت لمتطلبات مختلفة أمر بسيط وواضح -✅ **عن متتالية فيبوناتشي**: هذا النمط الرقمي الرائع تمامًا (حيث يساوي كل رقم مجموع الرقمين قبله: 0، 1، 1، 2، 3، 5، 8...) يظهر حرفيًا *في كل مكان* في الطبيعة! ستجده في دوامات عباد الشمس، ونمط الصنوبر، وطريقة تقوس صدفيات النوتيلوس، وحتى في كيفية نمو فروع الأشجار. إنه أمر مذهل حقًا كيف يمكن للرياضيات والكود مساعدتنا على فهم وإعادة إنشاء الأنماط التي تستخدمها الطبيعة لصنع الجمال! +✅ **عن متتالية فيبوناتشي**: هذا النمط العددي الرائع حقًا (حيث يساوي كل رقم مجموع الرقمين السابقين له: 0، 1، 1، 2، 3، 5، 8...) يظهر حرفياً *في كل مكان* في الطبيعة! ستجده في لفائف دوار الشمس، وأنماط أقماع الصنوبر، وطريقة انحناء أصداف الناوتيلوس، وحتى في كيفية نمو فروع الأشجار. من المذهل حقًا كيف تساعدنا الرياضيات والبرمجة على فهم وإعادة إنشاء الأنماط التي تستخدمها الطبيعة لخلق الجمال! ## اللبنات الأساسية التي تجعل السحر يحدث -حسنًا، الآن بعد أن رأيت كيف تبدو لغات البرمجة في العمل، دعنا نحلل القطع الأساسية التي تشكل حرفيًا كل برنامج تم كتابته على الإطلاق. فكر في هذه كمكونات أساسية في وصفتك المفضلة — بمجرد أن تفهم وظيفة كل واحدة منها، ستتمكن من قراءة وكتابة الكود في أي لغة تقريبًا! +حسنًا، الآن بعد أن رأيت كيف تبدو لغات البرمجة أثناء العمل، دعنا نكسر الأجزاء الأساسية التي تشكل حرفيًا كل برنامج تم كتابته على الإطلاق. فكر في هذه على أنها المكونات الأساسية في وصفتك المفضلة – بمجرد أن تفهم وظيفة كل منها، ستتمكن من قراءة وكتابة الكود في أي لغة تقريبًا! -هذا يشبه إلى حد ما تعلم قواعد النحو للبرمجة. هل تتذكر في المدرسة عندما تعلمت عن الأسماء والأفعال وكيفية تركيب الجمل؟ للبرمجة نسختها الخاصة من القواعد، وبصراحة، هي أكثر منطقية وتسامحًا بكثير من قواعد اللغة الإنجليزية! 😄 +هذا يشبه إلى حد كبير تعلم قواعد البرمجة. تذكر عندما كنت في المدرسة وتعلمت عن الأسماء، الأفعال، وكيفية تركيب الجمل؟ للبرمجة قواعدها الخاصة، وبصراحة، هي أكثر منطقية وتساهلاً بكثير من قواعد اللغة الإنجليزية! 😄 ### الجمل البرمجية: التعليمات خطوة بخطوة -لنبدأ بـ **الجمل البرمجية** – هذه تشبه جمل منفردة في محادثة مع جهاز الكمبيوتر الخاص بك. كل جملة تخبر الكمبيوتر أن ينفذ شيئًا محددًا، كأن تعطيه إرشادات: "انعطف يسارًا هنا"، "قف عند الإشارة الحمراء"، "اركن في هذا المكان". +لنبدأ بـ **الجمل البرمجية** – هي مثل الجمل الفردية في حوار مع حاسوبك. كل جملة تخبر الحاسوب بتنفيذ شيء محدد، تمامًا مثل إعطاء الاتجاهات: "انعطف يسارًا هنا"، "توقف عند الضوء الأحمر"، "اركن في تلك البقعة". -ما يعجبني في الجمل البرمجية هو مدى سهولة قراءتها عادةً. ألقِ نظرة على هذا: +ما أحببته في الجمل هو مدى سهولة قراءتها عادة. انظر هذا: ```javascript -// عبارات أساسية تنفذ إجراءات منفردة +// بيانات أساسية تقوم بأداء أفعال فردية const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**إليك ما يفعله هذا الكود:** -- **إعلان** عن متغير ثابت لحفظ اسم المستخدم -- **عرض** رسالة ترحيب على مخرج الكونسول -- **حساب** وتخزين نتيجة عملية رياضية + +**هذا ما يفعله هذا الكود:** +- **إعلان** متغير ثابت لتخزين اسم المستخدم +- **عرض** رسالة ترحيب على وحدة إخراج الكونسول +- **حساب** وتخزين نتيجة عملية رياضية ```javascript -// بيانات تتفاعل مع صفحات الويب +// عبارات تتفاعل مع صفحات الويب document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**خطوة بخطوة، إليك ما يحدث:** -- **تعديل** عنوان صفحة الويب الذي يظهر على تبويب المتصفح -- **تغيير** لون خلفية جسم الصفحة بالكامل + +**خطوة بخطوة، هذا ما يحدث:** +- **تعديل** عنوان صفحة الويب الذي يظهر في تبويب المتصفح +- **تغيير** لون خلفية جسم الصفحة بالكامل ### المتغيرات: نظام ذاكرة برنامجك -حسنًا، **المتغيرات** هي حقًا واحدة من مفاهيمي المفضلة جدًا للتدريس لأنها تشبه كثيرًا الأشياء التي تستخدمها يوميًا! +حسنًا، **المتغيرات** هي بصراحة من أفكاري المفضلة للتعليم لأنها تشبه أشياء تستخدمها كل يوم! -فكر في قائمة جهات اتصال هاتفك للحظة. أنت لا تحفظ أرقام الجميع عن ظهر قلب – بل تحفظ "أمي"، "أفضل صديق"، أو "مطعم البيتزا الذي يوصل حتى الساعة 2 صباحًا" وتترك لهاتفك أن يتذكر الأرقام الحقيقية. المتغيرات تعمل بنفس الطريقة! إنها كحاويات معنونة حيث يمكن لبرنامجك أن يخزن المعلومات ويستدعيها لاحقًا باستخدام اسم مفهوم فعلاً. +فكر في دفتر هاتفك لثانية. أنت لا تحفظ أرقام هواتف الجميع – بدلاً من ذلك، تحفظ "أمي"، "أفضل صديق"، أو "مطعم البيتزا الذي يوصل حتى الثانية صباحًا" وتترك هاتفك يتذكر الأرقام الفعلية. المتغيرات تعمل بنفس الطريقة! هي مثل حاويات معنونة حيث يمكن لبرنامجك تخزين المعلومات واسترجاعها لاحقًا باستخدام أسماء ذات معنى. -وهنا الجزء الرائع: يمكن للمتغيرات أن تتغير أثناء تشغيل البرنامج (ومن هنا جاء اسم "متغير" – هل لاحظت؟). تمامًا كما قد تقوم بتحديث جهة اتصال مطعم البيتزا حين تكتشف مكانًا أفضل، يمكن تحديث المتغيرات مع تعلم برنامجك معلومات جديدة أو تغير الظروف! +وهنا الجميل فعلاً: يمكن للمتغيرات أن تتغير أثناء تشغيل البرنامج (ومن هنا جاء اسم "متغير"). تمامًا كما قد تحدّث جهة اتصال مطعم البيتزا عندما تكتشف مكانًا أفضل، يمكن تحديث المتغيرات عندما يتعلم برنامجك معلومات جديدة أو تتغير الظروف! -دعني أريك كيف يمكن أن يكون هذا بسيطًا وجميلاً: +دعني أوضح لك كيف يمكن أن يكون هذا بسيطًا جدًا: ```javascript // الخطوة 1: إنشاء المتغيرات الأساسية @@ -318,12 +317,12 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**فهم هذه المفاهيم:** -- **تخزين** القيم الثابتة في متغيرات `const` (مثل اسم الموقع) -- **استخدام** `let` للقيم التي قد تتغير خلال البرنامج -- **تعيين** أنواع بيانات مختلفة: نصوص، أرقام، وقيم منطقية (صح/خطأ) -- **اختيار** أسماء وصفية تشرح محتوى كل متغير + +**فهم هذه المفاهيم:** +- **تخزين** القيم الثابتة في متغيرات `const` (مثل اسم الموقع) +- **استخدام** `let` للقيم التي يمكن أن تتغير أثناء البرنامج +- **تعيين** أنواع بيانات مختلفة: سلاسل نصية، أرقام، وقيم صحيحة/خاطئة (boolean) +- **اختيار** أسماء وصفية تشرح محتوى كل متغير ```javascript // الخطوة 2: العمل مع الكائنات لتجميع البيانات ذات الصلة @@ -333,11 +332,11 @@ const weatherData = { windSpeed: 12 }; ``` - -**في المثال أعلاه، لقد:** -- **أنشأنا** كائنًا لتجميع معلومات الطقس ذات الصلة معاً -- **نظمنا** عدة بيانات تحت اسم متغير واحد -- **استخدمنا** أزواج المفتاح والقيمة لتسمية كل جزء من المعلومات بوضوح + +**في الأعلى، قمنا بـ:** +- **إنشاء** كائن لتجميع معلومات الطقس ذات الصلة معًا +- **تنظيم** عدة قطع بيانات تحت اسم متغير واحد +- **استخدام** أزواج المفتاح والقيمة لوضع علامات واضحة على كل معلومة ```javascript // الخطوة 3: استخدام وتحديث المتغيرات @@ -348,36 +347,36 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`); currentWeather = "cloudy"; temperature = 68; ``` - -**لنفهم كل جزء:** -- **عرض** المعلومات باستخدام القوالب النصية مع صيغة `${}` -- **الوصول** إلى خصائص الكائن باستخدام النقطة (`weatherData.windSpeed`) -- **تحديث** المتغيرات المعلنة بـ `let` لتعكس الظروف المتغيرة -- **دمج** عدة متغيرات لصياغة رسائل ذات معنى + +**دعونا نفهم كل جزء:** +- **عرض** المعلومات باستخدام القوالب النصية مع تركيب `${}` +- **الوصول** إلى خصائص الكائن باستخدام النقطة (`weatherData.windSpeed`) +- **تحديث** المتغيرات المعلنة بـ `let` لتعكس الظروف المتغيرة +- **دمج** عدة متغيرات لإنشاء رسائل ذات معنى ```javascript // الخطوة 4: التفكيك الحديث لكود أنظف const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**ما تحتاج إلى معرفته:** -- **استخراج** خصائص معينة من الكائنات باستخدام التفكيك -- **إنشاء** متغيرات جديدة تلقائيًا بأسماء مفاتيح الكائن -- **تبسيط** الكود بتجنب تكرار الصيغة النقطية -### تدفق التحكم: تعليم برنامجك على التفكير +**ما تحتاج إلى معرفته:** +- **استخراج** خصائص محددة من الكائنات باستخدام التدمير (destructuring assignment) +- **إنشاء** متغيرات جديدة تلقائيًا بنفس أسماء مفاتيح الكائن +- **تبسيط** الكود بتجنب التكرار في كتابة النقطة -حسنًا، هذا هو الجزء الذي تصبح فيه البرمجة مذهلة حقًا! **تدفق التحكم** هو ببساطة تعليم برنامجك كيفية اتخاذ قرارات ذكية، تمامًا كما تفعل أنت كل يوم دون أن تفكر. +### تدفق التحكم: تعليم برنامجك كيفية التفكير -تخيل هذا: هذا الصباح ربما قلت لنفسك "إذا كانت تمطر، سأحمل مظلة. إذا كان الجو باردًا، سأرتدي جاكيتًا. إذا كنت متأخرًا، فسأتخطى الإفطار وأشرب القهوة في الطريق." دماغك يتبع هذا المنطق "إذا-ثم" عشرات المرات يوميًا بشكل تلقائي! +حسنًا، هنا تصبح البرمجة مذهلة حقًا! **تدفق التحكم** هو ببساطة تعليم برنامجك كيفية اتخاذ قرارات ذكية، تمامًا كما تفعل أنت يوميًا دون أن تفكر كثيرًا. -هذا ما يجعل البرامج تبدو ذكية وحية بدلًا من أن تتبع نصًا مملًا ومتوقعًا فقط. يمكنها فعلاً أن تنظر إلى الموقف، تقيم ما يحدث، وترد بشكل مناسب. إنه كأنك تمنح برنامجك عقلًا يمكنه التكيف واتخاذ القرارات! +تخيل هذا: صباح اليوم ربما مررت بـ "إذا كانت تمطر، سأحمل مظلة. إذا كان الجو باردًا، سأرتدي سترة. إذا تأخرت، سأفوت الفطور وأخذ قهوة في الطريق." دماغك يتبع هذا المنطق الشرطي عشرات المرات يوميًا بشكل طبيعي! -هل تريد أن ترى كيف يعمل هذا بشكل رائع؟ دعني أريك: +هذا ما يجعل البرامج تبدو ذكية وحية بدلًا من اتباع سيناريو ممل ومتكرر فقط. يمكنها فعليًا النظر في الموقف، تقييم ما يحدث، والرد بشكل مناسب. كأنك تمنح برنامجك عقلًا قادرًا على التكيف واتخاذ القرارات! + +هل تريد أن ترى كيف يعمل ذلك بشكل رائع؟ دعني أوضح لك: ```javascript -// الخطوة 1: المنطق الشرطي الأساسي +// الخطوة 1: منطق الشرط الأساسي const userAge = 17; if (userAge >= 18) { @@ -387,15 +386,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**إليك ما يفعله هذا الكود:** -- **التحقق** مما إذا كان عمر المستخدم يفي بمتطلبات التصويت -- **تنفيذ** كتل كود مختلفة بناءً على نتيجة الشرط -- **حساب** وعرض المدة المتبقية حتى يحق للمستخدم التصويت إذا كان دون 18 عامًا -- **تقديم** ملاحظات محددة ومفيدة لكل سيناريو + +**ما يقوم به هذا الكود:** +- **التحقق** إذا كان عمر المستخدم يستوفي شرط التصويت +- **تنفيذ** كتل كود مختلفة حسب نتيجة الشرط +- **حساب** وعرض المدة المتبقية حتى يصبح المستخدم مؤهلاً للتصويت إذا كان عمره أقل من 18 +- **تقديم** ملاحظات مفيدة ومحددة لكل سيناريو ```javascript -// الخطوة 2: شروط متعددة مع عوامل منطقية +// الخطوة 2: شروط متعددة باستخدام عوامل منطقية const userAge = 17; const hasPermission = true; @@ -407,23 +406,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**تفصيل ما يحدث هنا:** -- **دمج** عدة حالات شرطية باستخدام العامل `&&` (و) -- **إنشاء** تسلسل هرمي من الشروط باستخدام `else if` لسيناريوهات متعددة -- **معالجة** جميع الحالات الممكنة بعبارة `else` النهائية -- **تقديم** ملاحظات واضحة وقابلة للتنفيذ لكل حالة مختلفة + +**تفصيل ما يحدث هنا:** +- **دمج** شروط متعددة باستخدام عامل `&&` (و) +- **إنشاء** تسلسل هرمي من الشروط باستخدام `else if` لسيناريوهات مختلفة +- **معالجة** جميع الحالات الممكنة عبر جملة `else` نهائية +- **تقديم** ملاحظات واضحة وقابلة للتنفيذ لكل حالة مختلفة ```javascript -// الخطوة 3: شرط موجز باستخدام عامل ثلاثي +// الخطوة 3: شرط مختصر باستخدام عامل التشغيل الثلاثي const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**ما يجب أن تتذكره:** -- **استخدام** معامل الثلاثي (`? :`) لحالات شرطية بسيطة ذات خيارين -- **كتابة** الشرط أولًا، تليه `?`، ثم نتيجة صحيحة، ثم `:`، ثم نتيجة خاطئة -- **تطبيق** هذا النمط عندما تحتاج إلى تعيين قيم بناءً على شروط + +**ما يجب تذكره:** +- **استخدام** عامل الثلاثي (`? :`) لشروط بسيطة ذات خيارين +- **كتابة** الشرط أولًا، يليها `?` ثم النتيجة الصحيحة، ثم `:` ثم النتيجة الخاطئة +- **تطبيق** هذا النمط عندما تحتاج إلى تعيين قيم بناءً على شروط ```javascript // الخطوة 4: التعامل مع حالات محددة متعددة @@ -445,56 +444,56 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**ينجز هذا الكود التالي:** -- **مقارنة** قيمة المتغير مع عدة حالات محددة -- **تجميع** الحالات المتشابهة معًا (أيام الأسبوع مقابل عطلات نهاية الأسبوع) -- **تنفيذ** كتلة الكود المناسبة عند العثور على تطابق -- **تضمين** حالة `default` لمعالجة القيم غير المتوقعة -- **استخدام** عبارات `break` لمنع استمرار تنفيذ الكود إلى الحالة التالية -> 💡 **تشبيه من العالم الحقيقي**: فكر في تدفق التحكم كأن لديك جهاز GPS الصبور الأكثر في العالم يوجهك. قد يقول "إذا كان هناك ازدحام في شارع مين، خذ الطريق السريع بدلًا منه. إذا كان هناك إنشاءات تغلق الطريق السريع، جرب الطريق ذو المنظر الخلاب." تستخدم البرامج نفس نوع المنطق الشرطي للرد بذكاء على الحالات المختلفة ولتقديم أفضل تجربة للمستخدمين. +**يحقق هذا الكود ما يلي:** +- **مطابقة** قيمة المتغير مع عدة حالات محددة +- **تجميع** حالات مماثلة معًا (أيام الأسبوع مقابل عطلة نهاية الأسبوع) +- **تنفيذ** كتلة الكود المناسبة عندما يتم العثور على تطابق +- **تضمين** حالة `default` للتعامل مع القيم غير المتوقعة +- **استخدام** جمل `break` لمنع استمرار الكود للحالة التالية -### 🎯 **فحص المفاهيم: إتقان اللبنات الأساسية** +> 💡 **تشبيه من الواقع**: فكر في تدفق التحكم كأنه نظام ملاحة GPS الأكثر صبرًا في العالم يعطيك الاتجاهات. قد يقول "إذا كان هناك ازدحام في الشارع الرئيسي، خذ الطريق السريع بدلاً من ذلك. إذا كان هناك بناء في الطريق السريع، جرب الطريق ذو المناظر الطبيعية." تستخدم البرامج نفس نوع المنطق الشرطي للرد بذكاء على المواقف المختلفة وتوفير أفضل تجربة للمستخدمين دائمًا. -**لنرَ مدى تقدمك في الأساسيات:** -- هل يمكنك شرح الفرق بين المتغير والجملة البرمجية بكلماتك؟ -- فكر في سيناريو واقعي تستخدم فيه قرار إذا-ثم (مثل مثال التصويت) +### 🎯 **اختبار المفهوم: إتقان اللبنات الأساسية** + +**لنرى كيف تسير مع الأساسيات:** +- هل تستطيع شرح الفرق بين المتغير والجملة البرمجية بكلماتك الخاصة؟ +- فكر في سيناريو واقعي تستخدم فيه قرار إذا-ثم (مثل مثال التصويت) - ما هو شيء واحد في منطق البرمجة فاجأك؟ -**تعزيز سريع للثقة:** +**تعزيز سريع للثقة:** ```mermaid flowchart LR - A["📝 التعليمات
(الأوامر)"] --> B["📦 المتغيرات
(التخزين)"] --> C["🔀 سير التحكم
(القرارات)"] --> D["🎉 البرنامج العامل!"] + A["📝 تعليمات
(تعليمات)"] --> B["📦 متغيرات
(تخزين)"] --> C["🔀 تدفق التحكم
(قرارات)"] --> D["🎉 برنامج يعمل!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **ما الذي سيأتي بعد ذلك**: سنستمتع كثيرًا بالتعمق أكثر في هذه المفاهيم بينما نواصل هذه الرحلة الرائعة معًا! الآن، ركز فقط على الشعور بالإثارة تجاه كل الإمكانيات المذهلة التي تنتظرك. المهارات والتقنيات المحددة ستترسخ تلقائيًا مع الممارسة – أعدك أن هذه ستكون أكثر متعة مما قد تتوقع! +``` +✅ **ما هو قادم**: سنستمتع كثيرًا بالغوص أعمق في هذه المفاهيم مع استمرار رحلتنا الرائعة معًا! الآن فقط ركز على الشعور بهذا الحماس حول كل الإمكانيات الرائعة المقبلة. المهارات والتقنيات المحددة ستتثبت طبيعيًا أثناء ممارستنا معًا – أعدك أن هذا سيكون ممتعًا أكثر مما تتوقع! ## أدوات المهنة -حسنًا، هذا هو المكان الذي أشعر فيه بحماس لا يُوصف! 🚀 نحن على وشك التحدث عن الأدوات الرائعة التي ستجعلك تشعر وكأنك حصلت للتو على مفاتيح سفينة فضاء رقمية. +حسنًا، هنا أتحمس بشدة لدرجة لا أستطيع السيطرة على نفسي! 🚀 نحن على وشك التحدث عن الأدوات الرائعة التي ستجعلك تشعر وكأنك تسلمت مفاتيح مركبة فضائية رقمية. -هل تعرف كيف يكون لدى الشيف سكاكين متوازنة تمامًا تشعر وكأنها امتداد ليديه؟ أو كيف يكون لدى الموسيقي غيتار يبدو كأنه يغني في اللحظة التي يلمسه فيها؟ حسنًا، لدى المطورين نسختهم الخاصة من هذه الأدوات السحرية، وهنا ما سيبهرك تمامًا – معظمها مجاني بالكامل! +تعرف كيف لدى الشيف تلك السكاكين المتوازنة تمامًا والتي تشعر وكأنها امتداد ليده؟ أو كيف لدى الموسيقي تلك الجيتار التي تبدو وكأنها تغني بمجرد أن يلمسها؟ حسنًا، لدى المطورين نسختنا الخاصة من هذه الأدوات السحرية، وهنا ما سيدهشك تمامًا – معظمها مجاني بالكامل! -أنا أتكلم وأتحرك على كرسيي بحماس وأنا أفكر في مشاركتها معك لأنها ثورت تمامًا طريقة بناء البرمجيات لدينا. نتحدث عن مساعدي برمجة مدعومين بالذكاء الاصطناعي يمكنهم مساعدتك في كتابة الكود (لست أمزح!)، وبيئات سحابية حيث يمكنك بناء تطبيقات كاملة من أي مكان يتوفر فيه واي فاي، وأدوات تصحيح أخطاء متطورة جدًا تشبه أن يكون لديك رؤية أشعة إكس لبرامجك. +أنا عمليًا أقفز على الكرسي وأنا أفكر في مشاركتها معك لأنها غيرت تمامًا طريقة بناء البرمجيات لدينا. نحن نتحدث عن مساعدين للبرمجة مدعومين بالذكاء الاصطناعي يمكنهم مساعدتك في كتابة الكود (أنا لا أمزح!)، وبيئات سحابية حيث يمكنك بناء تطبيقات كاملة من أي مكان متوفر فيه واي فاي، وأدوات تصحيح أخطاء متطورة للغاية كأنها تملك رؤية أشعة-X لبرامجك. -وهنا الجزء الذي مازال يثير قشرتي: هذه ليست أدوات "للمبتدئين" ستتجاوزها بسرعة. هذه هي نفس الأدوات المهنية التي يستخدمها مطورو جوجل ونتفليكس واستوديوهات التطبيقات المستقلة التي تحبها في هذه اللحظة بالذات. ستشعر بأنك محترف حقيقي وأنت تستخدمها! +وهنا الجزء الذي لا زال يبعث في قلبي القشعريرة: هذه ليست "أدوات للمبتدئين" ستتجاوزها. هذه هي نفس الأدوات المهنية التي يستخدمها مطورو جوجل، ونتفلكس، واستوديو التطبيقات المستقلة الذين تحب معهم العمل في هذه اللحظة بالذات. ستشعر بأنك محترف حقًا أثناء استخدامها! ```mermaid graph TD - A["💡 فكرتك"] --> B["⌨️ محرر الأكواد
(VS Code)"] + A["💡 فكرتك"] --> B["⌨️ محرر التعليمات البرمجية
(VS Code)"] B --> C["🌐 أدوات تطوير المتصفح
(الاختبار وتصحيح الأخطاء)"] C --> D["⚡ سطر الأوامر
(الأتمتة والأدوات)"] - D --> E["📚 الوثائق
(التعلم والمرجعية)"] + D --> E["📚 التوثيق
(التعلم والمرجع)"] E --> F["🚀 تطبيق ويب مذهل!"] B -.-> G["🤖 مساعد الذكاء الاصطناعي
(GitHub Copilot)"] - C -.-> H["📱 اختبار الجهاز
(تصميم متجاوب)"] - D -.-> I["📦 مدراء الحزم
(npm, yarn)"] + C -.-> H["📱 اختبار الأجهزة
(تصميم متجاوب)"] + D -.-> I["📦 مدراء الحزم
(npm، yarn)"] E -.-> J["👥 المجتمع
(Stack Overflow)"] style A fill:#fff59d @@ -503,106 +502,106 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### محررات التعليمات البرمجية وبيئات التطوير المتكاملة: أصدقاؤك الرقميون الجدد +``` +### محررات ومُتكاملات تطوير الشيفرة: أصدقاؤك الرقميون الجدد -دعنا نتحدث عن محررات الكود – هذه على وشك أن تصبح أماكنك المفضلة حديثًا للتواجد! فكر فيها كمكانك الشخصي للترميز حيث ستقضي معظم وقتك في صياغة وتحسين إبداعاتك الرقمية. +دعنا نتحدث عن محررات الشيفرة – هذه بصراحة على وشك أن تصبح أماكنك المفضلة الجديدة للتواجد فيها! فكر فيها كملاذك الشخصي للبرمجة حيث ستقضي معظم وقتك في صياغة وتحسين إبداعاتك الرقمية. -لكن ما هو السحري حقًا في المحررات الحديثة: إنها ليست مجرد محررات نصوص عادية. إنها كأن لديك أذكى وأفضل مرشد للبرمجة جالس بجانبك 24/7. تكتشف أخطاء كتابتك قبل أن تلاحظها، تقترح تحسينات تجعلك تبدو عبقريًا، تساعدك على فهم وظيفة كل قطعة كود، وبإمكان بعضها حتى توقع ما تود كتابته وتقترح إنهاء أفكارك! +لكن ما هو السحري حقًا في المحررات الحديثة: إنها ليست مجرد محررات نصوص مزخرفة. وكأن لديك معلم برمجة لامع وداعم جالس بجانبك 24/7. يلتقط أخطاء الكتابة قبل أن تلاحظها، يقترح تحسينات تجعلك تبدو كعبقري، يساعدك على فهم كل قطعة كود، وبعضها حتى يتنبأ بما أنت على وشك كتابته ويعرض إكمال فكرتك! -أتذكر عندما اكتشفت الإكمال التلقائي لأول مرة – شعرت حرفيًا وكأني أعيش في المستقبل. تبدأ بكتابة شيء، فيقول محررك "مرحبًا، هل كنت تفكر في هذه الدالة التي تفعل بالضبط ما تحتاج؟" إنه كأن لديك قارئ أفكار كرفيق ترميز! +أتذكر عندما اكتشفت الإكمال التلقائي للمرة الأولى – شعرت حرفيًا كأنني أعيش في المستقبل. تبدأ في كتابة شيء، ومحررك يقول، "مهلاً، هل كنت تفكر في هذه الدالة التي تفعل بالضبط ما تحتاجه؟" إنه مثل وجود قارئ أفكار كرفيق برمجة! -**ما الذي يجعل هذه المحررات مذهلة جدًا؟** +**ما الذي يجعل هذه المحررات رائعة جدًا؟** -تقدم محررات الكود الحديثة مجموعة مبهرة من الميزات المصممة لتعزيز إنتاجيتك: +توفر محررات الشيفرة الحديثة مجموعة مذهلة من الميزات المصممة لتعزيز إنتاجيتك: -| الميزة | الوظيفة | الفائدة | -|-------------------|------------------------------|------------------------------------| -| **تمييز الصياغة** | تلوين أجزاء مختلفة من الكود | يجعل الكود أسهل للقراءة واكتشاف الأخطاء | -| **الإكمال التلقائي** | يقترح الكود أثناء الكتابة | يسرّع البرمجة ويقلل الأخطاء الإملائية | -| **أدوات تصحيح الأخطاء** | تساعدك على العثور وإصلاح الأخطاء | توفر ساعات من وقت حل المشاكل | -| **الإضافات** | تضيف ميزات متخصصة | خصص محررك لأي تقنية تستخدمها | -| **مساعدي الذكاء الاصطناعي** | يقترحون الكود والشروح | يسرّعون التعلم والإنتاجية | +| الميزة | ماذا تفعل | لماذا تساعد | +|---------|--------------|--------------| +| **تمييز بناء الجملة** | يلوّن أجزاء مختلفة من الكود | يجعل الكود أسهل للقراءة واكتشاف الأخطاء | +| **الإكمال التلقائي** | يقترح الشيفرة أثناء الكتابة | يسرّع الترميز ويقلل الأخطاء الإملائية | +| **أدوات تصحيح الأخطاء** | تساعدك على العثور على الأخطاء وإصلاحها | توفر ساعات من الوقت في حل المشاكل | +| **الإضافات** | تضيف ميزات متخصصة | تخصص محررك لأي تقنية تستخدمها | +| **مساعدي الذكاء الاصطناعي** | يقترح الشيفرة ويشرحها | يسرّع التعلم والإنتاجية | -> 🎥 **مصدر فيديو**: هل تريد رؤية هذه الأدوات في العمل؟ شاهد هذا [فيديو أدوات المهنة](https://youtube.com/watch?v=69WJeXGBdxg) لمحة شاملة. +> 🎥 **مصدر فيديو**: هل تريد رؤية هذه الأدوات أثناء العمل؟ شاهد هذا الفيديو [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) لمحة شاملة. #### المحررات الموصى بها لتطوير الويب -**[فيجوال ستوديو كود](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) - اكتشاف الأخطاء الإملائية في الكود +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مجاني) +- الأكثر شعبية بين مطوري الويب +- نظام إضافات ممتاز +- مدمج به الطرفية وتكامل جيت +- **الإضافات الأساسية**: + - [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 – مجاني، يستخدم على نطاق واسع في الصناعة، ويوجد مجتمع ضخم يصنع شروحات وإضافات مفيدة. -### متصفحات الويب: مختبرك السري للتطوير +### متصفحات الويب: مختبر التطوير السري الخاص بك -حسنًا، استعد لأن ينفجر عقلك تمامًا! هل تعلم كيف كنت تستخدم المتصفحات لتصفح وسائل التواصل الاجتماعي ومشاهدة الفيديوهات؟ حسنًا، اتضح أنها كانت تخفي هذا المختبر السري المذهل للمطورين طوال الوقت، في انتظارك لاكتشافه! +حسنًا، استعد لأن ينفجر عقلك تمامًا! تعرف كيف كنت تستخدم المتصفحات للتصفح عبر وسائل التواصل الاجتماعي ومشاهدة الفيديوهات؟ إذًا اتضح أنها كانت تخبئ لك هذا المختبر المطور الرائع طوال الوقت، تنتظر فقط أن تكتشفه! -في كل مرة تنقر بزر الماوس الأيمن على صفحة ويب وتختار "فحص العنصر"، فإنك تفتح عالمًا خفيًا من أدوات المطورين التي هي في الحقيقة أكثر قوة من بعض البرامج المكلفة التي كنت أدفع مئات الدولارات ثمنها. يشبه اكتشاف أن مطبخك العادي كان يخفي مختبر طهاة محترفين خلف لوح سري! -المرة الأولى التي عرّفني فيها شخص على أدوات مطوري المتصفح (DevTools)، قضيت حوالي ثلاث ساعات فقط وأنا أنقر هنا وهناك وأقول "انتظر، هل يمكنه فعل ذلك أيضًا؟!" يمكنك حرفيًا تعديل أي موقع ويب في الوقت الحقيقي، ورؤية مدى سرعة تحميل كل شيء بالضبط، واختبار كيف يبدو موقعك على أجهزة مختلفة، وحتى تصحيح أخطاء JavaScript كمحترف تمامًا. إنه أمر مذهل للغاية! +في كل مرة تضغط بزر الفأرة الأيمن على صفحة ويب وتختار "فحص العنصر"، تفتح عالمًا مخفيًا من أدوات المطور القوية التي هي في الحقيقة أقوى من بعض البرامج المكلفة التي كنت أدفع مئات الدولارات من أجلها. إنه يشبه اكتشاف أن مطبخك القديم العادي كان يخفي مختبر طهاة محترفين خلف لوحة سرية! +في المرة الأولى التي أظهر لي فيها شخص ما أدوات تطوير المتصفح (DevTools)، قضيت حوالي ثلاث ساعات فقط وأنا أضغط هنا وهناك وأقول "انتظر، هل يمكنه أن يفعل هذا أيضًا؟!" يمكنك حرفيًا تعديل أي موقع ويب في الوقت الحقيقي، ورؤية مدى سرعة تحميل كل شيء بالضبط، واختبار كيف يبدو موقعك على أجهزة مختلفة، وحتى تصحيح أخطاء جافا سكريبت مثل المحترف تمامًا. إنه أمر مذهل للغاية! **إليك لماذا المتصفحات هي سلاحك السري:** -عندما تنشئ موقع ويب أو تطبيق ويب، تحتاج إلى رؤية كيف يبدو ويتصرف في العالم الحقيقي. المتصفحات لا تعرض فقط عملك بل توفر أيضًا تغذية راجعة مفصلة حول الأداء، وسهولة الوصول، والمشكلات المحتملة. +عندما تقوم بإنشاء موقع ويب أو تطبيق ويب، تحتاج إلى رؤية كيف يبدو وكيف يتصرف في العالم الحقيقي. المتصفحات لا تعرض عملك فقط، بل توفر أيضًا تعليقات تفصيلية حول الأداء، وسهولة الوصول، والمشكلات المحتملة. #### أدوات مطوري المتصفح (DevTools) تتضمن المتصفحات الحديثة مجموعات تطوير شاملة: -| فئة الأداة | ماذا تفعل | مثال على الاستخدام | +| فئة الأداة | ما تقوم به | حالة استخدام مثال | |---------------|--------------|------------------| -| **مفتش العناصر** | عرض وتعديل HTML/CSS في الوقت الحقيقي | تعديل التنسيق لرؤية النتائج فورًا | -| **وحدة التحكم (Console)** | عرض رسائل الخطأ واختبار JavaScript | تصحيح المشكلات وتجربة الشيفرة | +| **مُفحص العناصر** | عرض وتحرير HTML/CSS في الوقت الحقيقي | ضبط التنسيق لرؤية النتائج الفورية | +| **وحدة التحكم** | عرض رسائل الخطأ واختبار جافا سكريبت | تصحيح المشاكل وتجربة الكود | | **مراقب الشبكة** | تتبع كيفية تحميل الموارد | تحسين الأداء وأوقات التحميل | | **مدقق سهولة الوصول** | اختبار التصميم الشامل | ضمان عمل موقعك لجميع المستخدمين | -| **محاكي الأجهزة** | المعاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب بدون وجود أجهزة متعددة | +| **محاكي الجهاز** | معاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب دون الحاجة لأجهزة متعددة | #### المتصفحات الموصى بها للتطوير -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - أدوات تطوير معيارية في الصناعة مع توثيق واسع +- **[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 مع موارد مطوري مايكروسوفت +- **[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 -# الخطوة 1: إنشاء مجلد المشروع والانتقال إليه +# الخطوة 1: إنشاء والدخول إلى دليل المشروع mkdir my-awesome-website cd my-awesome-website ``` **ما يفعله هذا الكود:** -- **إنشاء** مجلد جديد يسمى "my-awesome-website" لمشروعك -- **الانتقال** إلى المجلد الذي تم إنشاؤه حديثًا لبدء العمل +- **إنشاء** دليل جديد يسمى "my-awesome-website" لمشروعك +- **الانتقال** إلى الدليل الذي تم إنشاؤه حديثًا للبدء في العمل ```bash # الخطوة 2: تهيئة المشروع باستخدام package.json @@ -615,9 +614,9 @@ npm install --save-dev @eslint/js **خطوة بخطوة، هذا ما يحدث:** - **تهيئة** مشروع Node.js جديد بالإعدادات الافتراضية باستخدام `npm init -y` -- **تثبيت** Vite كأداة بناء حديثة لتطوير وبناء سريع -- **إضافة** Prettier لتنسيق الشيفرة تلقائيًا و ESLint لفحص جودة الشيفرة -- **استخدام** العلامة `--save-dev` لوضع هذه التبعيات كاعتمادات خاصة بالتطوير فقط +- **تثبيت** Vite كأداة بناء حديثة للتطوير السريع وبناءات الإنتاج +- **إضافة** Prettier لتنسيق الكود تلقائيًا و ESLint لفحص جودة الكود +- **استخدام** العلامة `--save-dev` لتعليم هذه الحزم كمصدر تطوير فقط ```bash # الخطوة 3: إنشاء هيكل المشروع والملفات @@ -629,104 +628,104 @@ 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/)** | وقت تشغيل جافا سكريبت وإدارة الحزم | تشغيل جافا سكريبت خارج المتصفحات، تثبيت أدوات تطوير حديثة | +| **[Vite](https://vitejs.dev/)** | أداة بناء وخادم تطوير | تطوير سريع جدًا مع استبدال الوحدات الحي | +| **[ESLint](https://eslint.org/)** | جودة الكود | اكتشاف وإصلاح المشاكل في جافا سكريبت تلقائيًا | +| **[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 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://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - سطر الأوامر التقليدي في ويندوز -**macOS:** +**ماك أو إس:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - تطبيق الطرفية المدمج -- **[iTerm2](https://iterm2.com/)** - محطة طرفية محسنة بميزات متقدمة +- **[iTerm2](https://iterm2.com/)** - طرفية محسنة مع ميزات متقدمة -**Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - الشل القياسي في لينوكس +**لينكس:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - الغلاف القياسي في لينكس - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - محاكي طرفية متقدم > 💻 = مثبت مسبقًا على نظام التشغيل -> 🎯 **مسار التعلم**: ابدأ بالأوامر الأساسية مثل `cd` (تغيير المجلد)، `ls` أو `dir` (عرض الملفات)، و `mkdir` (إنشاء مجلد). تدرب على أوامر سير العمل الحديثة مثل `npm install`، `git status`، و `code .` (يفتح المجلد الحالي في VS Code). مع الوقت، ستتقن تلقائيًا أوامر وتقنيات أتمتة متقدمة. +> 🎯 **مسار التعلم**: ابدأ بالأوامر الأساسية مثل `cd` (تغيير الدليل)، `ls` أو `dir` (قائمة الملفات)، و `mkdir` (إنشاء مجلد). مارس مع أوامر سير العمل الحديثة مثل `npm install`، `git status`، و `code .` (فتح الدليل الحالي في VS Code). مع ازدياد راحتك، ستتعلم تلقائيًا المزيد من الأوامر المتقدمة وتقنيات الأتمتة. -### التوثيق: معلمك المتاح دائمًا للتعلم +### التوثيق: معلم المعرفة المتوفر دائمًا -حسنًا، دعني أشاركك سرًا صغيرًا سيجعلك تشعر بتحسن كبير تجاه كونك مبتدئًا: حتى أكثر المطورين خبرة يقضون جزءًا كبيرًا من وقتهم في قراءة التوثيق. وليس لأنهم لا يعرفون ماذا يفعلون – بل هو دليل على الحكمة! +حسنًا، دعني أشاركك سرًا صغيرًا سيجعل شعورك أفضل كثيرًا كونك مبتدئًا: حتى المطورين الأكثر خبرة يقضون جزءًا كبيرًا من وقتهم في قراءة التوثيق. وليس لأنهم لا يعرفون ما يفعلون – بل لأنه علامة على الحكمة! -فكر في التوثيق كالوصول لأكثر المعلمين صبرًا وعلمًا في العالم والمتاحين 24/7. عالق في مشكلة في الثانية 2 صباحًا؟ التوثيق هنا مع حضن افتراضي دافئ وبالضبط الإجابة التي تحتاجها. تريد تعلم ميزة جديدة رائجة؟ التوثيق يدعمك بأمثلة خطوة بخطوة. تحاول فهم لماذا يعمل شيء ما بهذه الطريقة؟ بالطبع – التوثيق جاهز لشرح ذلك بطريقة تجعلك تفهم أخيرًا! +فكر في التوثيق كالوصول إلى أكثر المعلمين صبرًا ومعرفة في العالم والمتاحين على مدار الساعة. علقت في مشكلة الساعة 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 -- رؤى تطوير عبر المنصات +- أدلة التطبيقات التقدمية (PWA) +- رؤى عن التطوير متعدد المنصات **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- مناهج تعلم منظمة +- مناهج تعليم منظمة - دورات فيديو من خبراء الصناعة -- تمرينات برمجية عملية +- تمارين برمجة عملية -> 📚 **استراتيجية الدراسة**: لا تحاول حفظ التوثيق – بدلاً من ذلك، تعلم كيفية التنقل فيه بكفاءة. احفظ المراجع التي تستخدمها كثيرًا وتدرب على استخدام خاصية البحث لإيجاد المعلومات بسرعة. +> 📚 **استراتيجية الدراسة**: لا تحاول حفظ التوثيق – بدلاً من ذلك، تعلم كيفية التنقل فيه بكفاءة. ضع إشارة مرجعية على المراجع المستخدمة بشكل متكرر ومارس استخدام خاصية البحث لإيجاد معلومات محددة بسرعة. -### 🔧 **فحص إتقان الأدوات: ما الذي يلامسك؟** +### 🔧 **فحص إتقان الأدوات: ما الذي يهمك؟** **خذ لحظة للتفكير:** - ما الأداة التي أنت متحمس لتجربتها أولاً؟ (لا توجد إجابة خاطئة!) -- هل لا يزال سطر الأوامر يبدو مخيفًا، أم أنك مهتم به؟ -- هل يمكنك تخيل استخدام أدوات مطوري المتصفح للتجسس على خلفية مواقعك المفضلة؟ +- هل لا يزال سطر الأوامر مخيفًا بالنسبة لك، أم أنت فضولي تجاهه؟ +- هل يمكنك تخيل استخدام أدوات تطوير المتصفح للتسلل خلف الكواليس في مواقعك المفضلة؟ ```mermaid -pie title "الوقت الذي يقضيه المطور مع الأدوات" - "محرر الشفرة" : 40 +pie title "وقت المطور المخصص للأدوات" + "محرر الكود" : 40 "اختبار المتصفح" : 25 "سطر الأوامر" : 15 "قراءة الوثائق" : 15 "تصحيح الأخطاء" : 5 ``` -> **معلومة ممتعة**: يقضي معظم المطورين حوالي 40٪ من وقتهم في محرر الشيفرة الخاص بهم، لكن لاحظ كم من الوقت يذهب للاختبار والتعلم وحل المشكلات. البرمجة ليست مجرد كتابة شيفرة – إنها صياغة تجارب! +> **معلومة ممتعة**: معظم المطورين يقضون حوالي 40% من وقتهم في محرر الأكواد، لكن لاحظ كم من الوقت يُستخدم للاختبار، والتعلم، وحل المشكلات. البرمجة ليست فقط عن كتابة الكود – بل عن صياغة التجارب! -✅ **غذاء للتفكير**: إليك شيئًا مثيرًا للتفكير – كيف تعتقد أن أدوات بناء المواقع (التطوير) قد تختلف عن أدوات تصميم شكلها (التصميم)؟ مثل الفرق بين مهندس معماري يصمم منزلًا جميلًا والمقاول الذي يبنيه بالفعل. كلاهما ضروري لكن يحتاجان إلى أدوات مختلفة! هذا النوع من التفكير سيساعدك حقًا على رؤية الصورة الأكبر لكيفية حياة المواقع. +✅ **غذاء للتفكير**: إليك شيء مثير للتأمل – كيف تعتقد أن أدوات بناء المواقع (التطوير) قد تختلف عن أدوات تصميم كيف تبدو (التصميم)؟ الأمر مثل الفرق بين مهندس معماري يصمم بيتًا جميلاً والمقاول الذي يبنيه فعليًا. كلاهما ضروري، لكنهما يحتاجان لصناديق أدوات مختلفة! هذا النوع من التفكير سيساعدك حقًا على رؤية الصورة الأكبر لكيفية حياة المواقع. -## تحدي GitHub Copilot Agent 🚀 +## تحدي وكيل GitHub Copilot 🚀 استخدم وضع الوكيل لإكمال التحدي التالي: -**الوصف:** استكشف ميزات محرر شيفرة حديث أو IDE وشرح كيف يمكنه تحسين سير عملك كمطور ويب. +**الوصف:** استكشف ميزات محرر شفرة حديث أو بيئة تطوير متكاملة (IDE) وأظهر كيف يمكنها تحسين سير عملك كمطور ويب. -**المطلب:** اختر محرر شيفرة أو IDE (مثل Visual Studio Code، WebStorm، أو IDE قائم على السحابة). اذكر ثلاث ميزات أو امتدادات تساعدك على كتابة وتصحيح أو الحفاظ على الشيفرة بفعالية أكثر. لكل منها، قدم شرحًا مختصرًا عن كيفية استفادتك منها في سير العمل. +**الموجه:** اختر محرر شفرة أو IDE (مثل Visual Studio Code، WebStorm، أو IDE مستضاف على السحابة). اذكر ثلاث ميزات أو إضافات تساعدك على كتابة وتصحيح أو صيانة الكود بشكل أكثر كفاءة. لكل منها، قدّم شرحًا موجزًا لكيف تفيد سير عملك. --- @@ -734,50 +733,50 @@ pie title "الوقت الذي يقضيه المطور مع الأدوات" **حسنًا، أيها المحقق، هل أنت مستعد لقضيتك الأولى؟** -الآن بعد أن أصبحت لديك هذه الأساسيات الرائعة، لدي مغامرة ستساعدك على رؤية مدى التنوع والروعة لعالم البرمجة. واستمع - هذه ليست حول كتابة الشيفرة بعد، فلا ضغط في هذا الأمر! اعتبر نفسك محقق لغات برمجة في قضيتك المثيرة الأولى! +الآن بعد أن أصبحت تمتلك هذا الأساس الرائع، لدي مغامرة ستساعدك على رؤية مدى تنوع وعظمة عالم البرمجة. واسمع – الأمر ليس متعلقًا بكتابة الكود بعد، فلا ضغط هنا! اعتبر نفسك محقق لغات برمجة في قضيتك المثيرة الأولى! -**مهمتك، إذا قررت قبولها:** -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/). مجتمع البرمجة ترحيبي للغاية بالمبتدئين! -- شاهد بعض فيديوهات البرمجة الموجهة للمبتدئين على يوتيوب. هناك العديد من المبدعين الرائعين الذين يتذكرون كيف يكون الأمر عند البدء. -- فكر في الانضمام إلى لقاءات محلية أو مجتمعات إلكترونية. صدقني، المطورون يحبون مساعدة القادمين الجدد! +- تابع بعض مجتمعات المطورين على [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/)، أو [GitHub](https://github.com/). مجتمع البرمجة مرحب جدًا بالوافدين الجدد! +- شاهد بعض فيديوهات الترميز للمبتدئين على يوتيوب. هناك العديد من المبدعين الرائعين الذين يتذكرون ماذا يعني أن تبدأ. +- فكر في الانضمام إلى لقاءات محلية أو مجتمعات عبر الإنترنت. صدقني، المطورون يحبون مساعدة القادمين الجدد! -> 🎯 **اسمع، هذا ما أريدك أن تتذكره**: لن تتوقع أن تصبح ساحر برمجة بين عشية وضحاها! أنت الآن فقط تتعرف على هذا العالم الرائع الجديد الذي على وشك أن تكون جزءًا منه. خذ وقتك، استمتع بالرحلة، وتذكر – كل مطور تعجب به كان يجلس يومًا ما تمامًا حيث أنت الآن، يشعر بالحماس وربما بقليل من الارباك. هذا أمر طبيعي تمامًا، ويعني أنك تسير على الطريق الصحيح! +> 🎯 **استمع، هذا ما أريدك أن تتذكره**: لا يُتوقع منك أن تصبح ساحر برمجة بين عشية وضحاها! الآن، أنت فقط تتعرف على هذا العالم الجديد الرائع الذي على وشك أن تكون جزءًا منه. خذ وقتك، استمتع بالرحلة، وتذكر – كل مطور تعجب به كان جالسًا يومًا تمامًا حيث أنت الآن، يشعر بالحماس وربما القليل من الارتباك. هذا طبيعي تمامًا، ويعني أنك تسير في الطريق الصحيح! @@ -785,70 +784,70 @@ pie title "الوقت الذي يقضيه المطور مع الأدوات" [Reading the Docs](assignment.md) -> 💡 **دفعة صغيرة لمهمتك**: سأكون سعيدًا جدًا إذا استكشفت بعض الأدوات التي لم نتطرق إليها بعد! تخطَ المحررات، والمتصفحات، وأدوات سطر الأوامر التي تحدثنا عنها بالفعل – هناك عالم هائل من أدوات التطوير الرائعة في انتظارك لاكتشافها. ابحث عن تلك التي تتم صيانتها بفاعلية وتتمتع بمجتمعات نابضة بالحياة ومساعدة (هذه عادةً ما تحتوي على أفضل الدروس وأكثر الأشخاص دعمًا عندما تعلق وتحتاج إلى يد صديقة). +> 💡 **دفعة صغيرة لمهمتك**: أود حقًا أن أراك تستكشف بعض الأدوات التي لم نتحدث عنها بعد! تخطَ المحررات والمتصفحات وأدوات سطر الأوامر التي تحدثنا عنها – هناك عالم كامل من أدوات التطوير الرائعة بانتظارك لتكتشفها. ابحث عن أدوات يتم صيانتها بنشاط ولها مجتمعات حيوية وداعمة (عادةً ما يكون لديهم أفضل الدروس وأكثر الأشخاص ودًا عندما تعلق وتحتاج لمساعدة). --- -## 🚀 جدول رحلتك البرمجية +## 🚀 جدول رحلتك في البرمجة -### ⚡ **ما يمكنك فعله في الدقائق الخمس القادمة** -- [ ] احفظ في المفضلة مواقع 2-3 لغات برمجة لفتت انتباهك -- [ ] حمّل Visual Studio Code إذا لم تفعل ذلك بعد -- [ ] افتح أدوات المطور في متصفحك (F12) وانقر في أي موقع إلكتروني +### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة** +- [ ] احفظ 2-3 مواقع للغات برمجة جذبت اهتمامك +- [ ] حمّل Visual Studio Code إذا لم تفعل بعد +- [ ] افتح أدوات مطور المتصفح (F12) وانقر في أي موقع - [ ] انضم إلى مجتمع برمجة واحد (Dev.to، Reddit r/webdev، أو Stack Overflow) -### ⏰ **ما يمكنك تحقيقه خلال هذه الساعة** -- [ ] أكمل اختبار ما بعد الدرس وتأمل في إجاباتك -- [ ] جهز VS Code مع إضافة GitHub Copilot -- [ ] جرّب مثال "مرحبًا بالعالم" بلغتين برمجيتين مختلفتين أونلاين +### ⏰ **ما يمكنك إنجازه خلال هذه الساعة** +- [ ] أكمل اختبار ما بعد الدرس وفكر في إجاباتك +- [ ] جهز VS Code مع امتداد GitHub Copilot +- [ ] جرّب مثال "Hello World" بلغتين برمجيتين مختلفتين عبر الإنترنت - [ ] شاهد فيديو "يوم في حياة مطور" على يوتيوب -- [ ] ابدأ في عمل تحقيقك الخاص حول لغات البرمجة (من التحدي) +- [ ] ابدأ بالبحث عن لغات البرمجة (من التحدي) -### 📅 **مغامرتك التي تستمر أسبوعًا** -- [ ] أتمم المهمة واستكشف 3 أدوات تطوير جديدة +### 📅 **مغامرتك التي تستمر لأسبوع** +- [ ] أكمل المهمة واستكشف 3 أدوات تطوير جديدة - [ ] تابع 5 مطورين أو حسابات برمجة على وسائل التواصل الاجتماعي -- [ ] جرّب بناء شيء صغير في CodePen أو Replit (حتى لو كان مجرد "مرحبًا، [اسمك]!") -- [ ] اقرأ تدوينة مطور واحدة عن رحلة برمجية لشخص ما -- [ ] انضم إلى لقاء افتراضي أو شاهد محاضرة برمجية -- [ ] ابدأ تعلم لغتك المختارة عبر الدروس الإلكترونية +- [ ] جرّب بناء شيء صغير في CodePen أو Replit (حتى مجرد "Hello, [اسمك]!") +- [ ] اقرأ تدوينة مطور عن رحلة برمجته +- [ ] انضم إلى لقاء افتراضي أو شاهد حديثًا برمجيًا +- [ ] ابدأ بتعلم لغتك المختارة من خلال الدروس عبر الإنترنت -### 🗓️ **تحولك الذي يستمر شهرًا** -- [ ] ابني مشروعك الصغير الأول (حتى صفحة ويب بسيطة تُحسب!) +### 🗓️ **تحولك خلال شهر** +- [ ] ابنِ مشروعك الصغير الأول (حتى صفحة ويب بسيطة تُحسب!) - [ ] ساهم في مشروع مفتوح المصدر (ابدأ بإصلاح التوثيق) -- [ ] علم شخصًا بدأ رحلته البرمجية للتو -- [ ] أنشئ موقع ملفك الشخصي كمطور +- [ ] ارشد شخصًا يبدأ رحلته البرمجية للتو +- [ ] أنشئ موقعاً إلكترونياً لمحفظتك كمطور - [ ] تواصل مع مجتمعات مطورين محلية أو مجموعات دراسة -- [ ] ابدأ تخطيط هدفك التعليمي التالي +- [ ] ابدأ بتخطيط هدف تعلمك التالي -### 🎯 **تقييم التأمل النهائي** +### 🎯 **تأمل ختامي** **قبل أن تتابع، خذ لحظة للاحتفال:** -- ما هو الشيء الذي أثار حماسك في البرمجة اليوم؟ -- أي أداة أو مفهوم ترغب في استكشافه أولًا؟ +- ما هو الشيء الذي أثار حماسك اليوم في البرمجة؟ +- أي أداة أو مفهوم تريد استكشافه أولاً؟ - كيف تشعر حيال بدء هذه الرحلة البرمجية؟ -- ما السؤال الذي تود طرحه على مطور الآن؟ +- ما هو السؤال الذي تود طرحه على مطور الآن؟ ```mermaid journey - title رحلتك في بناء الثقة بالنفس + title رحلتك لبناء الثقة بالنفس section اليوم - Curious: 3: أنت - Overwhelmed: 4: أنت - Excited: 5: أنت + فضولي: 3: You + مرهق: 4: You + متحمس: 5: You section هذا الأسبوع - Exploring: 4: أنت - Learning: 5: أنت - Connecting: 4: أنت + استكشاف: 4: You + تعلم: 5: You + تواصل: 4: You section الشهر القادم - Building: 5: أنت - Confident: 5: أنت - Helping Others: 5: أنت + بناء: 5: You + واثق: 5: You + مساعدة الآخرين: 5: You ``` -> 🌟 **تذكّر**: كل خبير كان مبتدئًا يومًا ما. كل مطور كبير شعر بنفس شعورك الآن – متحمس، وربما مرتبك قليلاً، وبالتأكيد فضولي حول ما هو ممكن. أنت في صحبة رائعة، وهذه الرحلة ستكون مذهلة. مرحبًا بك في العالم الرائع للبرمجة! 🎉 +> 🌟 **تذكر**: كل خبير كان مبتدئًا يومًا ما. كل مطور متمرس شعر بنفس شعورك الآن – متحمس، ربما مرتبك قليلاً، وبالتأكيد فضولي حول ما هو ممكن. أنت في صحبة رائعة، وهذه الرحلة ستكون مذهلة. مرحبًا بك في العالم الرائع للبرمجة! 🎉 --- -**تنويه**: -تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [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/AGENTS.md b/translations/ar/AGENTS.md index 16098058d..c97410d93 100644 --- a/translations/ar/AGENTS.md +++ b/translations/ar/AGENTS.md @@ -2,23 +2,23 @@ ## نظرة عامة على المشروع -هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا طورتها Microsoft Cloud Advocates، تشمل 24 درسًا عمليًا تغطي JavaScript و CSS و HTML. +هذا مستودع منهج تعليمي لتعليم أساسيات تطوير الويب للمبتدئين. المنهج عبارة عن دورة شاملة لمدة 12 أسبوعًا تم تطويرها من قبل دعاة سحابة مايكروسوفت، تتضمن 24 درسًا عمليًا تغطي جافا سكريبت، CSS، وHTML. ### المكونات الرئيسية -- **المحتوى التعليمي**: 24 درسًا منظمًا في وحدات تعتمد على المشاريع -- **مشاريع عملية**: Terrarium, لعبة الطباعة، امتداد المتصفح، لعبة الفضاء، تطبيق مصرفي، محرر كود، ومساعد دردشة ذكي -- **اختبارات تفاعلية**: 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، بايثون (لمشاريع الذكاء الاصطناعي) ### الهيكلية -- مستودع تعليمي به هيكل يعتمد على الدروس -- يحتوي كل مجلد درس على README، أمثلة الكود، والحلول -- مشاريع مستقلة في مجلدات منفصلة (quiz-app، مشاريع الدروس المختلفة) -- نظام ترجمة باستخدام GitHub Actions (co-op-translator) -- توثيق مقدم عبر Docsify ومتوافر كملف PDF +- مستودع تعليمي به هيكل قائم على الدروس +- يحتوي كل مجلد درس على README، أمثلة تعليمية، وحلول +- مشاريع مستقلة في مجلدات منفصلة (quiz-app، مشاريع الدروس المختلفة) +- نظام الترجمة يستخدم GitHub Actions (co-op-translator) +- الوثائق مقدمة عبر Docsify ومتوفرة أيضًا كملف PDF ## أوامر الإعداد @@ -36,8 +36,8 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # ابدأ خادم التطوير -npm run build # بناء للإنتاج +npm run dev # بدء خادم التطوير +npm run build # البناء للإنتاج npm run lint # تشغيل ESLint ``` @@ -56,7 +56,7 @@ npm run format # التنسيق باستخدام Prettier ```bash cd 5-browser-extension/solution npm install -# اتبع تعليمات تحميل الإضافات الخاصة بالمتصفح +# اتبع تعليمات تحميل الإضافة الخاصة بالمتصفح ``` ### مشاريع لعبة الفضاء @@ -64,45 +64,45 @@ npm install ```bash cd 6-space-game/solution npm install -# افتح index.html في المتصفح أو استخدم Live Server +# افتح index.html في المتصفح أو استخدم الخادم الحي ``` -### مشروع الدردشة (باك إند بايثون) +### مشروع الدردشة (خلفية بايثون) ```bash cd 9-chat-project/solution/backend/python pip install openai -# تعيين متغير البيئة GITHUB_TOKEN +# تعيين المتغير البيئي GITHUB_TOKEN python api.py ``` -## سير العمل التطويري +## سير عمل التطوير ### للمساهمين في المحتوى -1. **فرع المستودع** إلى حسابك على GitHub -2. **نسخ الفرع** محليًا -3. **إنشاء فرع جديد** للتعديلات التي ستجريها -4. أجرِ التعديلات على محتوى الدرس أو أمثلة الكود -5. اختبر تغييرات الكود في مجلدات المشاريع ذات الصلة -6. أرسل طلبات السحب وفقًا لإرشادات المساهمة +1. **استنسخ المستودع** إلى حساب GitHub الخاص بك +2. **انسخ الاستنساخ محليًا** +3. **أنشئ فرعًا جديدًا** لتغييراتك +4. قم بإجراء تغييرات على محتوى الدروس أو أمثلة الشيفرة +5. اختبر أي تغييرات على الشيفرة في مجلدات المشاريع المعنية +6. قدم طلبات سحب طبقًا لإرشادات المساهمة ### للمتعلمين -1. فرع أو استنسخ المستودع -2. انتقل تدريجيًا إلى مجلدات الدروس -3. اقرأ ملفات README لكل درس -4. أكمل الاختبارات قبل الدرس على https://ff-quizzes.netlify.app/web/ -5. تابع أمثلة الكود في مجلدات الدروس -6. أكمل الواجبات والتحديات -7. خُذ اختبارات ما بعد الدرس +1. استنسخ أو انسخ المستودع +2. انتقل إلى مجلدات الدروس بالتسلسل +3. اقرأ ملفات README لكل درس +4. أكمل اختبارات ما قبل الدرس عبر https://ff-quizzes.netlify.app/web/ +5. قم بتنفيذ الأمثلة البرمجية في مجلدات الدروس +6. أكمل الواجبات والتحديات +7. خذ اختبارات ما بعد الدرس -### التطوير الحي +### التطوير المباشر -- **التوثيق**: شغّل الأمر `docsify serve` في المسار الجذري (المنفذ 3000) -- **تطبيق الاختبار**: شغّل `npm run dev` في مجلد quiz-app -- **المشاريع**: استخدم إضافة Live Server في VS Code لمشاريع HTML -- **مشاريع API**: شغّل `npm start` في مجلدات API المعنية +- **الوثائق**: قم بتشغيل `docsify serve` من الجذر (المنفذ 3000) +- **تطبيق الاختبار**: شغل `npm run dev` في مجلد quiz-app +- **المشاريع**: استخدم ملحق VS Code Live Server لمشاريع HTML +- **مشاريع API**: شغل `npm start` في مجلدات API المعنية ## تعليمات الاختبار @@ -111,172 +111,172 @@ python api.py ```bash cd quiz-app npm run lint # التحقق من مشاكل نمط الكود -npm run build # التأكد من نجاح الإنشاء +npm run build # التحقق من نجاح البناء ``` ### اختبار 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 +- تحقق من صحة روابط الماركداون +- اختبر أمثلة الشيفرة في المتصفح أو Node.js +- تأكد من أن الترجمة تحافظ على البنية الصحيحة -## إرشادات نمط الكود +## إرشادات نمط الشيفرة ### جافا سكريبت -- استخدم صياغة ES6+ الحديثة -- اتبع تكوينات ESLint القياسية المقدمة في المشاريع -- استخدم أسماء متغيرات ودوال ذات معنى لتعزيز وضوح التعليم -- أضف تعليقات تشرح المفاهيم للمتعلمين -- نسق باستخدام Prettier حيثما تم التكوين +- استخدام صياغة ES6+ الحديثة +- اتباع تهيئات ESLint القياسية المقدمة في المشاريع +- استخدام أسماء متغيرات ودوال ذات معنى للتوضيح التعليمي +- إضافة تعليقات تشرح المفاهيم للمتعلمين +- التنسيق باستخدام Prettier حيثما تم التهيئة ### HTML/CSS -- استخدم عناصر HTML5 الدلالية -- مبادئ التصميم المتجاوب -- تسميات واضحة للفئات (class) -- تعليقات تشرح تقنيات CSS للمتعلمين +- عناصر HTML5 الدلالية +- مبادئ التصميم المتجاوب +- تسميات واضحة للفئات (classes) +- تعليقات تشرح تقنيات CSS للمتعلمين ### بايثون -- اتبع إرشادات نمط PEP 8 -- أمثلة كود واضحة وتعليمية -- استخدم تنبيهات النوع (Type hints) إن كان مفيدًا للتعلم +- إرشادات نمط PEP 8 +- أمثلة شيفرة واضحة وتعليمية +- تعليمات النوع حيثما تسهل التعلم -### توثيق 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) -تم تكوين quiz-app للنشر على Azure Static Web Apps: +تم تهيئة تطبيق الاختبار للنشر على Azure Static Web Apps: ```bash cd quiz-app npm run build # ينشئ مجلد dist/ -# ينفذ النشر عبر سير عمل GitHub Actions عند الدفع إلى الفرع الرئيسي +# ينشر عبر سير عمل GitHub Actions عند الدفع إلى الفرع الرئيسي ``` -تكوين Azure Static Web Apps: -- **موقع التطبيق**: `/quiz-app` -- **موقع المخرجات**: `dist` -- **سير العمل**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +إعداد Azure Static Web Apps: +- **موقع التطبيق**: `/quiz-app` +- **موقع الإخراج**: `dist` +- **سير العمل**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### توليد ملف PDF للتوثيق +### إنشاء ملفات PDF للوثائق ```bash npm install # تثبيت docsify-to-pdf -npm run convert # إنشاء ملف PDF من المستندات +npm run convert # توليد ملف PDF من المستندات ``` ### توثيق Docsify ```bash npm install -g docsify-cli # تثبيت Docsify على مستوى النظام -docsify serve # الخادم على localhost:3000 +docsify serve # الخدمة على localhost:3000 ``` ### بناء خاص بكل مشروع -قد يحتوي كل مجلد مشروع على عملية بناء خاصة به: -- مشاريع Vue: `npm run build` لإنشاء الحزم للإنتاج -- المشاريع الثابتة: لا توجد خطوة بناء، تقديم الملفات مباشرة +قد يحتوي كل مشروع على عملية بناء خاصة به: +- مشاريع Vue: أمر `npm run build` لإنشاء حزم الإنتاج +- المشاريع الثابتة: لا تحتاج لخطوة بناء، تقدم الملفات مباشرة -## إرشادات طلبات السحب +## إرشادات طلب السحب ### صيغة العنوان -استخدم عناوين واضحة وواصفة تشير إلى مجال التغيير: -- `[Quiz-app] أضف اختبارًا جديدًا للدرس X` -- `[Lesson-3] أصلح خطأ إملائي في مشروع Terrarium` -- `[Translation] أضف ترجمة إسبانية للدرس 5` -- `[Docs] حدث تعليمات الإعداد` +استخدم عناوين واضحة ووصفيه تشير إلى مجال التغيير: +- `[Quiz-app] إضافة اختبار جديد للدرس X` +- `[Lesson-3] تصحيح خطأ إملائي في مشروع terrarium` +- `[Translation] إضافة الترجمة الإسبانية للدرس 5` +- `[Docs] تحديث تعليمات الإعداد` ### الفحوصات المطلوبة -قبل إرسال طلب السحب: +قبل تقديم طلب السحب: -1. **جودة الكود**: - - شغّل `npm run lint` في مجلدات المشاريع المتأثرة - - أصلح جميع أخطاء التحليل التحذيرية +1. **جودة الشيفرة**: + - شغّل `npm run lint` في مجلدات المشاريع + - أصلح جميع أخطاء وإنذارات الفحص -2. **التحقق من البناء**: - - شغّل `npm run build` إذا كان ذلك مطبقًا - - تأكد من عدم وجود أخطاء في البناء +2. **التحقق من البناء**: + - نفذ `npm run build` إن استدعى الأمر + - تحقق من عدم وجود أخطاء في البناء -3. **التحقق من الروابط**: - - اختبر جميع روابط markdown - - تحقق من عمل مراجع الصور +3. **التحقق من الروابط**: + - اختبر جميع روابط الماركداون + - تحقق من عمل إشارات الصور -4. **مراجعة المحتوى**: - - تدقيق إملائي ونحوي - - تأكد من صحة أمثلة الكود وتعليميتها - - تحقق من المحافظة على المعنى الأصلي في الترجمات +4. **مراجعة المحتوى**: + - تدقيق نحوي وإملائي + - التأكد من صحة أمثلة الشيفرات وجودتها التعليمية + - التأكد من دقة الترجمات ومعناها الأصلي ### متطلبات المساهمة -- الموافقة على اتفاقية ترخيص المساهمة من Microsoft (فحص تلقائي في أول طلب سحب) -- الالتزام ب[مدونة السلوك المفتوحة لمايكروسوفت](https://opensource.microsoft.com/codeofconduct/) -- راجع [CONTRIBUTING.md](./CONTRIBUTING.md) للإرشادات التفصيلية -- أشر إلى أرقام القضايا في وصف طلب السحب إن وجد +- الموافقة على اتفاقية ترخيص مساهمات مايكروسوفت (فحص آلي على أول طلب سحب) +- اتباع [مدونة قواعد السلوك المفتوح لمايكروسوفت](https://opensource.microsoft.com/codeofconduct/) +- راجع [CONTRIBUTING.md](./CONTRIBUTING.md) للتفاصيل +- المرجعية لأرقام القضايا في وصف طلب السحب إن وجد ### عملية المراجعة -- مراجعة طلبات السحب من قبل الصيانة والمجتمع -- الأولوية لوضوح التعليم -- يجب أن تتبع أمثلة الكود أفضل الممارسات الحالية -- مراجعة الترجمات للدقة والملاءمة الثقافية +- مراجعة طلبات السحب من قبل الصيانة والمجتمع +- التركيز على الوضوح التعليمي +- يجب أن تتبع أمثلة الشيفرة أفضل الممارسات الحالية +- مراجعة الترجمات للتحقق من الدقة والتوافق الثقافي ## نظام الترجمة ### الترجمة الآلية -- يستخدم GitHub Actions مع سير العمل co-op-translator -- يترجم إلى أكثر من 50 لغة تلقائيًا -- الملفات المصدر في الدلائل الرئيسية -- الملفات المترجمة في مجلدات `translations/{language-code}/` +- يستخدم GitHub Actions مع سير العمل 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` -- تحقق من تعارض المنافذ (افتراضي: 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 +**مشاكل مشروع دردشة بايثون**: +- تأكد من تثبيت حزمة OpenAI: `pip install openai` +- تحقق من تعيين متغير البيئة GITHUB_TOKEN +- راجع أذونات الوصول لنماذج GitHub -**عدم تقديم Docsify للتوثيق**: -- ثبت docsify-cli عالميًا: `npm install -g docsify-cli` -- شغّل الأمر من الدليل الجذري للمستودع -- تأكد من وجود `docs/_sidebar.md` +**عدم عرض Docsify للوثائق**: +- ثبت docsify-cli عالميًا: `npm install -g docsify-cli` +- شغّل الأمر من جذر المستودع +- تحقق من وجود ملف `docs/_sidebar.md` ### نصائح بيئة التطوير -- استخدم VS Code مع إضافة Live Server لمشاريع HTML -- ثبت إضافات ESLint و Prettier لتنسيق موحد -- استخدم أدوات المتصفح لتصحيح جافا سكريبت -- لمشاريع Vue، ثبت إضافة Vue DevTools للمتصفح +- استخدم VS Code مع ملحق Live Server لمشاريع HTML +- ثبت ملحقات ESLint وPrettier للتنسيق المتسق +- استخدم أدوات المطورين في المتصفح لتصحيح JavaScript +- لمشاريع Vue، ثبت ملحق Vue DevTools للمتصفح ### اعتبارات الأداء -- عدد كبير من الملفات المترجمة (أكثر من 50 لغة) يجعل النسخ الكاملة كبيرًا -- استخدم استنساخ عميق ضحل عند العمل على المحتوى فقط: `git clone --depth 1` -- استبعد الترجمات من عمليات البحث عند العمل على المحتوى الإنجليزي -- عمليات البناء قد تكون بطيئة في أول تشغيل (npm install، بناء Vite) +- عدد كبير من الملفات المترجمة (>50 لغة) يعني أن الاستنساخ الكامل ضخم +- استخدم استنساخ ضحل إذا كنت تعمل فقط على المحتوى: `git clone --depth 1` +- استثنِ الترجمات من البحث عند العمل على المحتوى بالإنجليزية +- قد تكون عمليات البناء بطيئة في التشغيل الأول (npm install، بناء Vite) ## اعتبارات الأمان ### متغيرات البيئة -- يجب ألا يتم الالتزام بمفاتيح API في المستودع -- استخدم ملفات `.env` (مضمّنة في `.gitignore`) -- وثّق متغيرات البيئة المطلوبة في ملفات README الخاصة بالمشاريع +- لا يجب أبدًا تضمين مفاتيح API في المستودع +- استخدم ملفات `.env` (مضمّنة بالفعل في `.gitignore`) +- وثق متغيرات البيئة المطلوبة في ملفات README للمشاريع ### مشاريع بايثون -- استخدم بيئات افتراضية: `python -m venv venv` -- حافظ على تحديث التبعيات -- يجب أن تمتلك رموز GitHub صلاحيات قليلة قدر الإمكان +- استخدم بيئات افتراضية: `python -m venv venv` +- حافظ على تحديث التبعيات +- يجب أن تمتلك رموز GitHub أقل الصلاحيات المطلوبة ### وصول نماذج GitHub -- يتطلب الوصول رموز وصول شخصية (PAT) -- يجب تخزين الرموز كمتغيرات بيئة -- لا تلتزم الرموز أو بيانات الاعتماد في المستودع +- تتطلب رموز وصول شخصية (PAT) لنماذج GitHub +- يجب تخزين الرموز كمتغيرات بيئية +- لا تقم أبدًا بتضمين الرموز أو بيانات الاعتماد في المستودع ## ملاحظات إضافية ### الجمهور المستهدف -- مبتدئون تامون في تطوير الويب -- الطلاب والتعلم الذاتي -- المعلمون الذين يستخدمون المنهج داخل الصفوف -- المحتوى مصمم للوصول السهل وبناء المهارات تدريجيًا +- المبتدئون الكاملون في تطوير الويب +- الطلاب والمتعلمون الذاتيّون +- المعلمون الذين يستخدمون المنهج داخل الفصول الدراسية +- تم تصميم المحتوى ليكون وصوليًا وبناء مهارات تدريجي -### الفلسفة التعليمية +### فلسفة التعليم -- نهج التعلم القائم على المشاريع -- اختبارات معرفة متكررة (اختبارات قصيرة) -- تمارين عملية في البرمجة -- أمثلة تطبيقية من العالم الحقيقي -- التركيز على الأساسيات قبل الأُطُر (frameworks) +- نهج التعلم القائم على المشاريع +- فحوصات معرفية متكررة (اختبارات) +- تمارين تعليمية عملية +- أمثلة تطبيقية من الواقع +- التركيز على الأساسيات قبل الأُطُر البرمجية ### صيانة المستودع -- مجتمع نشط من المتعلمين والمساهمين -- تحديثات منتظمة للتبعيات والمحتوى -- مراقبة القضايا والمناقشات من قِبل القائمين على الصيانة -- تحديثات الترجمة مؤتمتة عبر GitHub Actions +- مجتمع نشط من المتعلمين والمساهمين +- تحديثات منتظمة للتبعيات والمحتوى +- مراقبة القضايا والنقاشات من قبل الصيانة +- تحديث الترجمة يتم تلقائيًا عبر GitHub Actions -### الموارد المرتبطة +### موارد ذات صلة -- [وحدات Microsoft Learn](https://docs.microsoft.com/learn/) -- [موارد Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) موصى به للمتعلمين -- دورات إضافية: الذكاء الاصطناعي التوليدي، علم البيانات، التعلم الآلي، مناهج إنترنت الأشياء متاحة +- [وحدات 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` - تطوير امتدادات المتصفح -- `6-space-game/README.md` - تطوير لعبة باستخدام Canvas -- `9-chat-project/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` - مشروع مساعد دردشة بالذكاء الاصطناعي -### هيكل المونوريبوزيتوري +### هيكلية المونوريبو -بينما ليس مونوريبوزيتوري تقليدي، يحتوي هذا المستودع على مشاريع مستقلة متعددة: -- كل درس مستقل ذاتيًا -- المشاريع لا تشترك في التبعيات -- العمل على المشاريع الفردية بدون التأثير على الأخرى -- استنسخ المستودع كاملًا للحصول على تجربة المنهج الكامل +رغم أنه ليس مونوريبو تقليدي، يحتوي هذا المستودع على عدة مشاريع مستقلة: +- كل درس مستقل بذاته +- المشاريع لا تشترك في التبعيات +- يمكنك العمل على مشاريع فردية دون التأثير على الأخرى +- استنسخ المستودع كاملًا لتجربة المنهج الكامل --- -**إخلاء المسؤولية**: -تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [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 f0afbd2ba..1c6c12bc3 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T16:37:25+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T21:33:43+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-03-06T16:50:26+00:00", + "translation_date": "2026-03-27T21:42:04+00:00", "source_file": "AGENTS.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 47fed66eb..94e325c6c 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,12 +1,12 @@ # Einführung in Programmiersprachen und moderne Entwicklerwerkzeuge + +Hallo du zukünftiger Entwickler! 👋 Darf ich dir etwas erzählen, das mir jeden Tag aufs Neue Gänsehaut bereitet? Du wirst gleich entdecken, dass Programmieren nicht nur etwas mit Computern zu tun hat – es ist, als hätte man echte Superkräfte, um seine kühnsten 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! +Kennst du diesen Moment, wenn du deine Lieblings-App benutzt und einfach alles perfekt zusammenpasst? Wenn du auf einen Knopf tippst und etwas absolut Magisches passiert, das dich denken lässt: „Wow, wie haben die das eigentlich gemacht?“ Nun, jemand genau wie du – wahrscheinlich gerade um 2 Uhr morgens in seinem Lieblingscafé mit dem dritten Espresso – hat den Code geschrieben, der diese Magie erschaffen hat. Und jetzt kommt etwas, das dir den Kopf sprengen wird: Am Ende dieser Lektion wirst du nicht nur verstehen, wie sie das gemacht haben, sondern du wirst es selbst ausprobieren wollen! -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, ich verstehe total, wenn dir Programmieren jetzt noch einschüchternd vorkommt. Als ich angefangen habe, dachte ich ehrlich, man müsse ein Mathe-Genie sein oder seit fünf Jahren coden. Aber dann hat sich meine Sicht komplett geändert: Programmieren ist genau wie das Lernen einer neuen Sprache. Du fängst mit „Hallo“ und „Danke“ an, dann lernst du, einen Kaffee zu bestellen, und bevor du es merkst, führst du tiefgründige philosophische Gespräche! Nur dass du in diesem Fall Gespräche mit Computern führst, und ehrlich? Sie sind die geduldigsten Gesprächspartner, die es gibt – sie verurteilen deine Fehler nie und sind immer bereit, 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 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! +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 Arbeitsabläufen, die Entwickler bei Netflix, Spotify und deinem Lieblings-Indie-App-Studio jeden Tag benutzen. Und jetzt kommt das, was dich einen Freudentanz machen lässt: Die meisten dieser professionellen, branchenüblichen Werkzeuge sind komplett kostenlos! ![Intro Programming](../../../../translated_images/de/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) @@ -27,59 +27,60 @@ journey Werkzeugerkundung: 5: You Gemeinschaftsverbindung: 5: You ``` -## Schauen wir mal, was du schon weißt! +## Mal sehen, 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 liest und denkst: „Ich habe wirklich keine Ahnung von dem Ganzen,“ dann ist das nicht nur okay, das ist perfekt! Das bedeutet, du bist genau am richtigen Ort. Sieh dieses Quiz wie ein Aufwärmen vor dem Training – wir dehnen gerade unsere Denkmuskeln! -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! +[Nimm am Pre-Lesson-Quiz teil](https://ff-quizzes.netlify.app/web/) -[Mach das Pre-Lesson-Quiz](https://ff-quizzes.netlify.app/web/) -## Das Abenteuer, auf das wir uns gemeinsam begeben +## Das Abenteuer, das wir zusammen erleben werden -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: +Okay, ich bin wirklich total aufgeregt, was wir heute alles entdecken werden! Ehrlich, ich wünschte, ich könnte dein Gesicht sehen, wenn dir manche dieser Konzepte klar werden. Hier ist die unglaubliche Reise, die wir gemeinsam antreten: -- **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! +- **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 deinem Wecker, der irgendwie weiß, dass Montagmorgen ist, bis hin zu dem Algorithmus, der deine Netflix-Empfehlungen perfekt trifft +- **Programmiersprachen und ihre großartigen Persönlichkeiten** – Stell dir vor, du kommst zu einer Party, bei der jede Person ganz unterschiedliche Superkräfte und Lösungswege hat. So ist die Welt der Programmiersprachen, und du wirst es lieben, sie kennenzulernen! +- **Die grundlegenden Bausteine, die digitale Magie möglich machen** – Stell dir das als das ultimative kreative LEGO-Set vor. Wenn du weißt, wie diese Teile zusammenpassen, wirst du erkennen, dass du buchstäblich alles bauen kannst, was deine Fantasie sich ausdenkt +- **Professionelle Werkzeuge, die dich fühlen lassen, als hättest du gerade einen Zauberstab bekommen** – Ich übertreibe nicht – diese Werkzeuge geben dir wirklich das Gefühl, Superkräfte zu haben, und das Beste? Es sind dieselben, die die Profis benutzen! -> 💡 **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! +> 💡 **Hier das Wichtigste**: Versuch heute nicht alles auswendig zu lernen! Im Moment möchte ich nur, dass du dieses Funken von Begeisterung spürst, was alles möglich ist. Die Details setzen sich ganz von selbst fest, wenn wir zusammen üben – so funktioniert echtes Lernen! > 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? +## Also, was genau *ist* Programmieren eigentlich? -Okay, jetzt die Millionen-Dollar-Frage: Was ist Programmieren wirklich? +Okay, wir gehen die eine Million-Dollar-Frage an: Was ist Programmieren wirklich? -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? 😅 +Ich erzähle dir eine Geschichte, die meine Sichtweise komplett verändert hat. Letzte Woche habe ich meiner Mutter erklärt, 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 links... nein, dein anderes links... okay, jetzt halte ihn zwei Sekunden, nicht eine, nicht drei...“ Kommt dir das bekannt vor? 😅 -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). +Das ist Programmieren! Es ist die Kunst, unglaublich detaillierte Schritt-für-Schritt-Anweisungen zu geben – an etwas, das sehr mächtig ist, aber jede Kleinigkeit genau erklärt bekommen muss. Nur dass du nicht deiner Mutter erklärst (die fragen kann: „Welcher rote Knopf?!“), sondern einem Computer (der genau das macht, was du sagst, auch wenn das nicht ganz das war, was du meintest). -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. +Das, was bei mir für Gänsehaut sorgte, als ich das zum ersten Mal verstanden habe: Computer sind im Kern eigentlich ziemlich einfach. Sie verstehen buchstäblich nur zwei Dinge – 1 und 0, was so viel bedeutet wie „ja“ und „nein“ oder „an“ und „aus“. Und das war’s! Aber hier wird es magisch – wir müssen nicht in 1en und 0en sprechen, als wären wir in "The Matrix". Hier kommen **Programmiersprachen** ins Spiel. Sie sind wie der weltbeste Übersetzer, der deine ganz normalen menschlichen Gedanken nimmt und sie in Computersprache umwandelt. -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! +Und das, was mir jeden Morgen wieder echte Gänsehaut bereitet: buchstäblich *alles* Digitale in deinem Leben hat mit jemandem angefangen, der genau wie du war, wahrscheinlich im Schlafanzug, mit einer Tasse Kaffee, und der gerade Code auf seinem Laptop getippt hat. 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, mit der du die Rechnung beim Abendessen mit Freunden aufteilst? Ja, jemand hat gedacht: „Das nervt, das kann ich besser machen“ – und dann... hat er es getan! -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? +Wenn du programmieren lernst, nimmst du nicht nur eine neue Fähigkeit auf – du wirst Teil einer unglaublichen Community von Problemlösern, die ihren Tag damit verbringen, zu denken: „Was wäre, wenn ich etwas bauen könnte, das jemandes Tag ein bisschen besser macht?“ Ehrlich, gibt es etwas Cooleres? -✅ **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. +✅ **Spaßige Fakten-Suche**: Hier ist etwas super Cooles, das du dir anschauen kannst, wenn du einen Moment Zeit hast – Wer war wohl der erste Computerprogrammierer der Welt? Ich gebe dir einen Tipp: Es ist wahrscheinlich nicht die Person, die du erwartest! Die Geschichte dieser Person ist absolut faszinierend und zeigt, dass Programmieren schon immer kreatives Problemlösen und Querdenken war. -### 🧠 **Gefühls-Check: Wie fühlst du dich?** +### 🧠 **Check-in: Wie fühlst du dich?** -**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? +**Nimm dir einen Moment zum Nachdenken:** +- Macht die Idee, „Anweisungen an Computer zu geben“, jetzt Sinn für dich? +- Kannst du dir eine tägliche Aufgabe vorstellen, die du mit Programmieren automatisieren möchtest? +- Welche Fragen kommen dir gerade in den Sinn beim Thema Programmieren? -> **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! +> **Denk daran**: Es ist völlig normal, wenn einige Konzepte gerade noch unklar sind. Programmieren lernen ist wie eine neue Sprache lernen – es braucht Zeit, bis das Gehirn diese neuen Verbindungen aufbaut. Du machst das super! ## Programmiersprachen sind wie verschiedene Geschmacksrichtungen von Magie -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. +Okay, das wird jetzt komisch klingen, aber bleib dran – Programmiersprachen sind wie verschiedene Musikrichtungen. Denk mal drüber nach: Du hast Jazz, der geschmeidig und improvisiert ist, Rock, der kraftvoll und direkt ist, Klassik, die elegant und strukturiert ist, und Hip-Hop, der kreativ und ausdrucksstark ist. Jeder Stil hat seine eigene Stimmung, seine eigene Community begeisterter Fans, und jede passt zu unterschiedlichen Stimmungen und Anlässen. -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! 😄). +Programmiersprachen funktionieren genau so! Du würdest nicht dieselbe Sprache benutzen, um ein spaßiges Handyspiel zu bauen, wie du sie für die Verarbeitung riesiger Klimadatenmengen nutzen würdest – so wie du nicht Death Metal zum Yoga hören würdest (naja, bei den meisten Yogakursen jedenfalls! 😄). -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! +Aber hier kommt das, was mich jedes Mal umhaut, wenn ich darüber nachdenke: Diese Sprachen sind wie der geduldigste, brillanteste Dolmetscher der Welt, der direkt neben dir sitzt. Du kannst deine Ideen so ausdrücken, wie es deinem menschlichen Gehirn natürlich erscheint, und sie übernehmen die unglaublich komplexe Arbeit, das in die 1en und 0en umzusetzen, die Computer tatsächlich sprechen. Es ist, als hättest du einen Freund, der perfekt „menschliche Kreativität“ und „Computersprache“ beherrscht – und der wird nie müde, braucht keine Kaffeepausen und verurteilt dich nie, wenn du dieselbe Frage zweimal stellst! -### Beliebte Programmiersprachen und ihre Einsatzbereiche +### Beliebte Programmiersprachen und ihre Einsatzgebiete ```mermaid mindmap @@ -112,49 +113,49 @@ mindmap Systeme & Leistung C++ Spiele - Leistungs kritisch + Leistungs-kritisch Rust - Speichersicherheit + Speicher-sicherheit Systemprogrammierung Go Cloud-Dienste Skalierbares Backend ``` -| 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 | +| Sprache | Am besten geeignet für | Warum sie beliebt ist | +|----------|-----------------------|---------------------| +| **JavaScript** | Webentwicklung, Benutzeroberflächen | Läuft in Browsern und macht interaktive Websites möglich | +| **Python** | Datenwissenschaft, Automatisierung, KI | Einfach zu lesen und zu lernen, mächtige 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 entwickelt | +| **Go** | Cloud-Dienste, Backend-Systeme | Schnell, einfach, für modernes Computing entwickelt | -### Hochsprachen vs. Maschinensprachen +### Hochsprachen vs. Maschinennah -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! +Okay, das war ehrlich gesagt das Konzept, das mich am Anfang völlig verwirrt hat. Ich werde dir jetzt die Analogie erzählen, die mir endlich geholfen hat – ich hoffe, sie hilft dir auch! -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? 😅): +Stell dir vor, du bist in einem Land, dessen Sprache du nicht sprichst, und du musst dringend die nächste Toilette finden (das kennen wir doch alle, oder? 😅): -- **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. +- **Maschinennahe Programmierung** ist, als würdest du den lokalen Dialekt so gut lernen, dass du mit der Großmutter am Obststand auf der Ecke sprichst – mit kulturellen Anspielungen, lokalem Slang und Insider-Witzen, die nur jemand versteht, der dort aufgewachsen ist. Super beeindruckend und unglaublich effizient ... wenn du zufällig fließend bist! Aber ziemlich überwältigend, wenn du eigentlich nur eine Toilette suchst. -- **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. +- **Hochsprachen** sind wie dieser wunderbare lokale Freund, der dich einfach versteht. Du sagst einfach auf Englisch: „Ich muss dringend auf die Toilette,“ und er übersetzt alles kulturell und gibt dir Wegbeschreibungen, die deinem nicht-lokalen Gehirn vollkommen Sinn machen. 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! +- **Maschinennahe Sprachen** (wie Assembly oder C) lassen dich extrem detailliert mit der Hardware des Computers sprechen, aber du musst wie eine Maschine denken, was... naja, sagen wir mal, ein ziemlich großer mentaler Wandel ist! +- **Hochsprachen** (wie JavaScript, Python oder C#) lassen dich wie ein Mensch denken, während sie hinter den Kulissen die Maschinensprache übernehmen. Außerdem haben sie unglaublich freundliche Communities mit Leuten, die sich daran erinnern, wie es ist, neu zu sein, und die dir echt helfen wollen! -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! +Rate mal, mit welchen ich vorschlagen werde, dass du anfängst? 😉 Hochsprachen sind wie Stützräder, die du eigentlich nie abnehmen willst, weil sie das Ganze so viel angenehmer machen! ```mermaid flowchart TB - A["👤 Menschlicher Gedanke:
'Ich möchte Fibonacci-Zahlen berechnen'"] --> B{Wählen Sie die Sprachebene} + A["👤 Menschliches Denken:
'Ich möchte Fibonacci-Zahlen berechnen'"] --> B{Programmiersprachen-Level wählen} - B -->|Hochsprachen| C["🌟 JavaScript/Python
Einfach zu lesen und zu schreiben"] - B -->|Maschinennah| D["⚙️ Assembly/C
Direkte Hardwaresteuerung"] + B -->|Hoch-Level| C["🌟 JavaScript/Python
Leicht zu lesen und schreiben"] + B -->|Niedrig-Level| D["⚙️ Assembly/C
Direkte Hardware-Steuerung"] - C --> E["📝 Schreibe: fibonacci(10)"] - D --> F["📝 Schreibe: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Schreiben: fibonacci(10)"] + D --> F["📝 Schreiben: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computerverständnis:
Übersetzer übernimmt Komplexität"] + E --> G["🤖 Computer-Verständnis:
Übersetzer übernimmt Komplexität"] F --> G G --> H["💻 Gleiches Ergebnis:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -165,13 +166,13 @@ flowchart TB ``` ### Ich zeige dir, warum Hochsprachen viel freundlicher sind -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! +Okay, ich zeige dir gleich etwas, das perfekt demonstriert, warum ich mich in Hochsprachen verliebt habe. Aber vorher – versprich mir eins: Wenn du das erste Codebeispiel siehst, gerate nicht in Panik! Es soll einschüchternd aussehen. Genau das will ich zeigen! -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!) +Wir schauen uns dieselbe Aufgabe in zwei komplett verschiedenen Stilen an. Beide erzeugen die sogenannte Fibonacci-Folge – das ist 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 findest du buchstäblich überall in der Natur – Sonnenblumenkerne, Tannenzapfenmuster, sogar wie Galaxien sich formen!) Bereit, den Unterschied zu sehen? Los geht’s! -**Hochsprache (JavaScript) – Menschlich verständlich:** +**Hochsprache (JavaScript) – menschenfreundlich:** ```javascript // Schritt 1: Grundlegende Fibonacci-Einrichtung @@ -183,10 +184,10 @@ console.log('Fibonacci sequence:'); ``` **Das macht dieser Code:** -- **Deklariert** eine Konstante, die festlegt, wie viele Fibonacci-Zahlen wir erzeugen wollen +- **Deklariert** eine Konstante, die angibt, wie viele Fibonacci-Zahlen generiert werden sollen - **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 +- **Zeigt** eine Kopfzeile zur Kennzeichnung unserer Ausgabe an ```javascript // Schritt 2: Erzeuge die Sequenz mit einer Schleife @@ -200,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**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 +**So funktioniert das im Detail:** +- **Schleife** durch jede Position der Folge mit einer `for`-Schleife +- **Zeigt** jede Zahl mit ihrer Position mithilfe von Template Literals an +- **Berechnet** die nächste Fibonacci-Zahl durch Addition der aktuellen und nächsten Werte +- **Aktualisiert** die Variablen, um zur nächsten Iteration überzugehen ```javascript // Schritt 3: Moderner funktionaler Ansatz @@ -224,12 +225,12 @@ console.log(fibSequence); ``` **Oben haben wir:** -- **Eine wiederverwendbare Funktion** mit moderner Pfeilfunktion-Syntax erstellt -- **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 +- **Eine wiederverwendbare Funktion** mit moderner Arrow Function Syntax erstellt +- **Ein Array gebaut,** um die komplette Folge statt einzeln auszugeben, zu speichern +- **Array-Indizierung benutzt,** um jede neue Zahl aus den vorherigen Werten zu berechnen +- **Die komplette Folge zurückgegeben,** damit wir sie flexibel an anderen Stellen im Programm nutzen können -**Niedrigsprache (ARM Assembly) – Computer-freundlich:** +**Maschinennahe Sprache (ARM Assembly) – computerfreundlich:** ```assembly area ascen,code,readonly @@ -256,27 +257,28 @@ 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 steuern. Beide erledigen exakt dieselbe Aufgabe, aber die Hochsprache ist für Menschen viel leichter zu verstehen, zu schreiben und zu warten. +Auffällig ist, wie die JavaScript-Version fast wie englische Anweisungen liest, während die Assembly-Version kryptische Befehle verwendet, die direkt den Prozessor des Computers steuern. Beide erledigen exakt dieselbe Aufgabe, aber die Hochsprache ist für Menschen viel leichter zu verstehen, zu schreiben und zu pflegen. + +**Wesentliche Unterschiede, die du bemerken wirst:** +- **Lesbarkeit**: JavaScript verwendet beschreibende Namen wie `fibonacciCount`, während Assembly kryptische Bezeichnungen wie `r0`, `r1` nutzt +- **Kommentare**: Hochsprachen fördern erklärende Kommentare, die den Code selbstdokumentierend machen +- **Struktur**: JavaScripts logischer Ablauf entspricht der Art, wie Menschen Probleme Schritt für Schritt denken +- **Wartung**: Die Aktualisierung der JavaScript-Version für unterschiedliche Anforderungen ist unkompliziert und klar -**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 der Summe der beiden vorherigen entspricht: 0, 1, 1, 2, 3, 5, 8...) taucht buchstäblich *überall* in der Natur auf! Du findest es in Sonnenblumenspiralen, Tannenzapfenmustern, der Art, wie Nautilus-Schalen sich winden, und sogar darin, wie sich Baumzweige entwickeln. Es ist ziemlich beeindruckend, wie Mathematik und Code uns helfen können, die Muster zu verstehen und nachzubilden, mit denen die Natur Schönheit erschafft! -✅ **Ü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 +## Die Bausteine, die die Magie Wirklichkeit werden lassen -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! +Okay, jetzt wo du gesehen hast, wie Programmiersprachen in Aktion aussehen, lass uns die grundlegenden Bestandteile zerlegen, aus denen buchstäblich jedes jemals geschriebene Programm besteht. Denk daran wie an die wesentlichen Zutaten in deinem Lieblingsrezept – wenn du verstehst, was jede einzelne tut, wirst du in der Lage sein, Code in so gut wie jeder Sprache zu lesen und zu schreiben! -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! 😄 +Das ist so ähnlich wie die Grammatik des Programmierens zu lernen. Erinnerst du dich noch aus der Schule, als du Nomen, Verben und Satzbau gelernt hast? Programmieren hat seine eigene Version von Grammatik, und ehrlich gesagt ist sie viel logischer und nachsichtiger als die englische Grammatik jemals war! 😄 -### Anweisungen: Die Schritt-für-Schritt-Anleitungen +### Anweisungen: Schritt-für-Schritt-Anleitungen -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“. +Beginnen wir mit **Statements** – sie sind wie einzelne Sätze in einem Gespräch mit deinem Computer. Jede Anweisung sagt dem Computer, genau eine bestimmte Sache zu tun, ähnlich wie Wegbeschreibungen: „Hier links abbiegen“, „An der Ampel anhalten“, „Auf diesem Parkplatz parken“. -Was ich an Anweisungen liebe, ist, wie meist gut lesbar sie sind. Schau dir das an: +Was ich an Statements liebe, ist, wie lesbar sie meist sind. Schau dir das an: ```javascript // Grundlegende Anweisungen, die einzelne Aktionen ausführen @@ -284,96 +286,96 @@ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**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 + +**Das macht dieser Code:** +- **Deklariert** eine konstante Variable, um den Namen eines Benutzers zu speichern +- **Gibt** eine Begrüßungsmeldung auf der Konsole aus +- **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 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 +**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 -Okay, **Variablen** sind ehrlich gesagt eines meiner absoluten Lieblingsthemen zum Erklären, weil sie so sehr wie Dinge funktionieren, die du jeden Tag benutzt! +### Variablen: Das Speicher-System deines Programms -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. +Okay, **Variablen** sind ehrlich gesagt eines meiner absoluten Lieblingskonzepte zu vermitteln, weil sie so sehr wie Dinge funktionieren, die du jeden Tag benutzt! -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! +Denk mal kurz an dein Telefonbuch. Du merkst dir nicht jede Telefonnummer – stattdessen speicherst du „Mama“, „Bester Freund“ oder „Pizzaservice, der bis 2 Uhr nachts liefert“ und lässt dein Telefon sich die tatsächlichen Nummern merken. Variablen funktionieren genau so! Sie sind wie beschriftete Behälter, in denen dein Programm Informationen speichern und später mit einem Namen abrufen kann, der tatsächlich Sinn ergibt. -Ich zeige dir mal, wie einfach das sein kann: +Das wirklich Coole: Variablen können sich ändern, während dein Programm läuft (daher der Name „variabel“ – hast du das gesehen?). So wie du den Kontakt zum Pizzaservice aktualisieren kannst, wenn du einen besseren findest, können Variablen aktualisiert werden, wenn dein Programm neue Informationen erfährt oder sich die Situation ändert! + +Ich zeige dir, wie schön einfach das sein kann: ```javascript -// Schritt 1: Erstellen von Basisvariablen +// Schritt 1: Erstellen grundlegender Variablen const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**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 + +**Diese Konzepte verstehen:** +- **Speichere** unveränderliche Werte in `const`-Variablen (wie den Namen der Webseite) +- **Verwende** `let` für Werte, die sich während des Programms ändern können +- **Weise zu** 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 +// Schritt 2: Arbeiten mit Objekten, um zusammengehörige Daten zu gruppieren const weatherData = { location: "San Francisco", humidity: 65, 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 + +**Im oberen Beispiel 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 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Aktualisierung veränderbarer Variablen +// Aktualisierung änderbarer Variablen currentWeather = "cloudy"; temperature = 68; ``` - -**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 + +**Schauen wir uns jeden Teil an:** +- **Gib** Informationen mit Template Literals und der `${}`-Syntax aus +- **Greife** auf Eigenschaften von Objekten über Punktnotation zu (`weatherData.windSpeed`) +- **Aktualisiere** Variablen, die mit `let` deklariert wurden, um sich ändernde Bedingungen widerzuspiegeln +- **Kombiniere** mehrere Variablen, um aussagekräftige 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 -### Kontrollfluss: Deinem Programm beibringen zu denken +**Das solltest du wissen:** +- **Extrahiere** spezifische Eigenschaften von Objekten mit Destructuring Assignment +- **Erstelle** automatisch neue Variablen mit genau den gleichen Namen wie Objektschlüssel +- **Vereinfache** Code, indem du Wiederholungen der Punktnotation vermeidest + +### Steuerung des Programmflusses: Deinem Programm das Denken beibringen -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. +Okay, hier wird Programmieren absolut beeindruckend! **Control Flow** ist im Grunde genommen, deinem Programm beizubringen, wie es kluge Entscheidungen trifft – genau so, wie du es jeden Tag tust, ohne darüber nachzudenken. -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! +Stell dir vor: Heute Morgen hast du bestimmt so 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 unterwegs einen Kaffee.“ Dein Hirn folgt natürlich genau dieser Wenn-Dann-Logik dutzende Male am Tag! -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! +Genau das lässt Programme intelligent und lebendig wirken, anstatt einfach nur einem langweiligen, vorhersehbaren Skript zu folgen. Sie können sich eine Situation anschauen, bewerten, was passiert, und entsprechend reagieren. Es ist, als würdest du deinem Programm ein Gehirn geben, das sich anpassen und Entscheidungen treffen kann! -Willst du sehen, wie genial das funktioniert? Ich zeige es dir: +Willst du sehen, wie schön das funktioniert? Hier: ```javascript // Schritt 1: Grundlegende bedingte Logik @@ -386,12 +388,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**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 + +**Dieser Code macht Folgendes:** +- **Prüft**, ob das Alter des Benutzers die Wahlberechtigung erfüllt +- **Führt** je nach Bedingung unterschiedliche Code-Blöcke aus +- **Berechnet** und zeigt an, wie lange es noch bis zur Wahlberechtigung dauert, falls unter 18 +- **Gibt** spezifisches, hilfreiches Feedback für jedes Szenario ```javascript // Schritt 2: Mehrere Bedingungen mit logischen Operatoren @@ -406,23 +408,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**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 + +**Das passiert hier im Detail:** +- **Kombiniere** mehrere Bedingungen mit dem `&&` (und) Operator +- **Erstelle** eine Bedingungshierarchie mit `else if` für mehrere Szenarien +- **Behandle** alle möglichen Fälle mit einem abschließenden `else`-Statement +- **Gib** klare, handlungsorientierte Rückmeldungen für jede Situation ```javascript // Schritt 3: Prägnante Bedingung mit ternärem Operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**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 + +**Das solltest du dir merken:** +- **Nutze** den ternären Operator (`? :`) für einfache Zwei-Optionen-Entscheidungen +- **Schreibe** zuerst die Bedingung, dann `?`, dann das Ergebnis, wenn wahr, dann `:`, dann das Ergebnis, wenn falsch +- **Wende** dieses Muster an, wenn du Werte aufgrund von Bedingungen zuweisen musst ```javascript // Schritt 4: Umgang mit mehreren spezifischen Fällen @@ -444,57 +446,57 @@ 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 -> 💡 **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. +**Dieser Code bewirkt:** +- **Vergleiche** den Variablenwert mit mehreren spezifischen Fällen +- **Gruppiere** ähnliche Fälle (Wochentage vs. Wochenende) +- **Führe** den passenden Codeblock aus, sobald eine Übereinstimmung vorliegt +- **Enthält** einen `default`-Fall, um unerwartete Werte zu behandeln +- **Verwende** `break`-Statements, um das Weiterschalten zum nächsten Fall zu verhindern + +> 💡 **Analogie aus dem echten Leben**: Denk an Control Flow wie an das geduldigste Navi der Welt, das dir Anweisungen gibt. Es könnte sagen: „Wenn auf der Hauptstraße Stau ist, nimm lieber die Autobahn. Wenn dort eine Baustelle ist, versuche die landschaftlich schönere Route.“ Programme verwenden genau diese Art von bedingter Logik, um intelligent auf unterschiedliche Situationen zu reagieren und den Nutzern stets das bestmögliche Erlebnis zu bieten. -### 🎯 **Konzept-Check: Bausteine meistern** +### 🎯 **Concept Check: Beherrschung der Bausteine** -**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? +**Mal sehen, wie gut du die Grundlagen verstanden hast:** +- Kannst du den Unterschied zwischen einer Variable und einer Anweisung mit eigenen Worten erklären? +- Denk an ein reales Szenario, in dem du eine Wenn-Dann-Entscheidung treffen würdest (wie unser Beispiel mit der Wahlberechtigung) +- Was hat dich an der Programmierlogik am meisten überrascht? -**Kleiner Selbstvertrauens-Kick:** +**Schneller Selbstvertrauens-Booster:** ```mermaid flowchart LR - A["📝 Anweisungen
(Anweisungen)"] --> B["📦 Variablen
(Speicher)"] --> C["🔀 Programmfluss
(Entscheidungen)"] --> D["🎉 Funktionierendes Programm!"] + A["📝 Anweisungen
(Befehle)"] --> B["📦 Variablen
(Speicher)"] --> C["🔀 Programmfluss
(Entscheidungen)"] --> D["🎉 Funktionsfähiges Programm!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **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! +``` +✅ **Was als Nächstes kommt**: Wir werden richtig viel Spaß haben und tiefer in diese Konzepte eintauchen, während wir gemeinsam diese unglaubliche Reise fortsetzen! Im Moment konzentriere dich einfach darauf, diese Aufregung über all die erstaunlichen Möglichkeiten, die vor dir liegen, zu spüren. Die genauen Fähigkeiten und Techniken werden ganz natürlich mit der Übung kommen – ich verspreche dir, das wird viel mehr Spaß machen, als du vielleicht denkst! -## Werkzeuge des Fachs +## Werkzeuge des Handwerks -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. +Okay, hier werde ich ehrlich so aufgeregt, dass ich mich kaum zurückhalten kann! 🚀 Wir werden gerade über die unglaublichen Werkzeuge sprechen, die dir das Gefühl geben, als hättest du gerade die Schlüssel zu einem digitalen Raumschiff bekommen. -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! +Weißt du, wie ein Koch diese perfekt ausbalancierten Messer hat, die sich wie eine Verlängerung seiner Hände anfühlen? Oder wie ein Musiker diese eine Gitarre hat, die zu singen scheint, sobald er sie berührt? Nun, Entwickler haben ihre eigene Version dieser magischen Werkzeuge, und hier kommt etwas, das dir den Verstand sprengen wird – die meisten davon sind völlig kostenlos! -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. +Ich bin praktisch auf meinem Stuhl hin und her gehüpft, weil ich sie mit dir teilen will, denn sie haben komplett revolutioniert, wie wir Software bauen. Wir reden von KI-gestützten Codierassistenten, 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-Werkzeugen, die so ausgeklügelt sind, als hättest du Röntgenblick für deine Programme. -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! +Und das hier ist der Teil, der mir immer noch Gänsehaut macht: Das sind keine „Anfängerwerkzeuge“, die du schnell hinter dir lässt. Das sind genau die gleichen professionellen Tools, die Entwickler bei Google, Netflix und dem Indie-App-Studio, das du liebst, gerade in diesem Moment einsetzen. Du wirst dich wie ein richtiger Profi fühlen, wenn du sie benutzt! ```mermaid graph TD A["💡 Deine Idee"] --> B["⌨️ Code-Editor
(VS Code)"] B --> C["🌐 Browser DevTools
(Testen & Debuggen)"] - C --> D["⚡ Befehlszeile
(Automatisierung & Werkzeuge)"] + C --> D["⚡ Kommandozeile
(Automatisierung & Werkzeuge)"] D --> E["📚 Dokumentation
(Lernen & Nachschlagen)"] - E --> F["🚀 Unglaubliche Web-App!"] + E --> F["🚀 Tolle Web-App!"] B -.-> G["🤖 KI-Assistent
(GitHub Copilot)"] - C -.-> H["📱 Gerätetest
(Responsives Design)"] + C -.-> H["📱 Gerätetest
(Responsive Design)"] D -.-> I["📦 Paketmanager
(npm, yarn)"] - E -.-> J["👥 Gemeinschaft
(Stack Overflow)"] + E -.-> J["👥 Community
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -502,107 +504,107 @@ 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 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. +Lass uns über Code-Editoren reden – die werden wirklich bald zu deinen Lieblingsplätzen zum Abhängen! Stell sie dir als deinen persönlichen Programmier-Rückzugsort vor, an dem du die meiste Zeit damit verbringst, deine digitalen Kreationen zu erschaffen und zu perfektionieren. -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! +Aber hier ist das absolut Magische an modernen Editoren: Sie sind nicht einfach nur schicke Texteditoren. Sie sind wie der brillanteste, unterstützendste Mentor beim Programmieren, 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 gerade tippen willst und bieten an, deine Gedanken zu vervollständigen! -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! +Ich erinnere mich noch, als ich die Autovervollständigung das erste Mal entdeckt habe – ich hatte das Gefühl, in der Zukunft zu leben. Du fängst an etwas zu tippen, und dein Editor sagt: „Hey, meintest du diese Funktion, die genau das tut, was du brauchst?“ Es ist, als hättest du einen Gedankenleser als Programmierbuddy! **Was macht diese Editoren so unglaublich?** -Moderne Code-Editoren bieten eine beeindruckende Anzahl an Funktionen, die deine Produktivität steigern: +Moderne Code-Editoren bieten eine beeindruckende Bandbreite an Funktionen, die deine Produktivität steigern: -| Funktion | Was es macht | Warum es hilft | +| Funktion | Was sie macht | Warum sie hilft | |---------|--------------|--------------| -| **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 | +| **Syntaxhervorhebung** | Färbt verschiedene Teile deines Codes | Macht Code leichter lesbar und Fehler schneller auffindbar | +| **Autovervollständigung** | Schlägt Code vor, während du tippst | Beschleunigt das Programmieren und reduziert Tippfehler | +| **Debugging-Werkzeuge** | Hilft dir, Fehler zu finden und zu beheben | Spart Stunden bei der Fehlersuche | +| **Erweiterungen** | Fügt spezialisierte Funktionen hinzu | Passe deinen Editor für jede Technologie an | +| **KI-Assistenten** | Schlagen Code und Erklärungen vor | Beschleunigt Lernen und Produktivität | -> 🎥 **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. +> 🎥 **Video-Ressource**: Willst du diese Tools in Aktion sehen? Schau dir dieses [Tools of the Trade Video](https://youtube.com/watch?v=69WJeXGBdxg) für eine umfassende Übersicht an. #### Empfohlene Editoren für Webentwicklung -**[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 +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Kostenlos) +- Am beliebtesten bei Webentwicklern +- Hervorragendes Ökosystem von Erweiterungen +- 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) - Automatisches Codeformatieren + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fängt Tippfehler in deinem Code auf -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Bezahlt, kostenlos für Studierende) -- Fortgeschrittene Debugging- und Testwerkzeuge -- Intelligente Code-Vervollständigung -- Integrierte Versionskontrolle +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Kostenpflichtig, kostenlos für Studierende) +- Fortschrittliche Debug- und Test-Werkzeuge +- Intelligente Codevervollständigung +- Eingebaute Versionskontrolle -**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 +**Cloud-basierte IDEs** (Verschiedene Preismodelle) +- [GitHub Codespaces](https://github.com/features/codespaces) - Vollständiges VS Code im Browser +- [Replit](https://replit.com/) - Perfekt zum Lernen und Teilen von Code +- [StackBlitz](https://stackblitz.com/) - Sofortige Full-Stack-Webentwicklung -> 💡 **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. +> 💡 **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. -### Webbrowser: Dein geheimes Entwicklungslabor +### Webbrowser: Dein geheimes Entwicklerlabor -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! +Okay, mach dich darauf gefasst, völlig begeistert zu sein! Du hast Browser bisher benutzt, um durch Social Media zu scrollen und Videos zu schauen? Nun, es stellt sich heraus, dass sie all die Zeit ein unglaublich geheimes Entwicklerlabor versteckt hielten, nur darauf wartend, von dir entdeckt zu werden! -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! +Jedes Mal, wenn du auf einer Webseite rechtsklickst und „Element untersuchen“ auswä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 von Euros bezahlt habe. Es ist, als würdest du entdecken, dass deine ganz normale Küche hinter einer geheimen Tür ein Labor eines Profikochs verbirgt! +Das erste Mal, als mir jemand die Browser-DevTools zeigte, habe ich ungefähr drei Stunden damit verbracht, einfach nur herumzuklicken und zu sagen: „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 debuggen wie ein absoluter Profi. Es ist wirklich umwerfend! -**Darum sind Browser deine Geheimwaffe:** +**Deshalb sind Browser dein geheimer Trumpf:** -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. +Wenn du eine Website oder Webanwendung erstellst, musst du sehen, wie sie in der Praxis aussieht und sich verhält. Browser zeigen nicht nur deine Arbeit an, sondern liefern auch detailliertes Feedback über Performance, Barrierefreiheit und mögliche Probleme. #### Browser Developer Tools (DevTools) -Moderne Browser beinhalten umfangreiche Entwicklungstools: +Moderne Browser enthalten umfassende Entwicklungssuiten: -| 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 | -| **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 | +| Tool-Kategorie | Was es tut | Beispielanwendung | +|---------------|--------------|------------------| +| **Element-Inspektor** | HTML/CSS in Echtzeit ansehen und bearbeiten | Stil anpassen, um sofortige Ergebnisse zu sehen | +| **Konsole** | Fehlermeldungen anzeigen und JavaScript testen | Probleme debuggen und mit Code experimentieren | +| **Netzwerk-Monitor** | Nachverfolgen, wie Ressourcen geladen werden | Performance und Ladezeiten optimieren | +| **Barrierefreiheitsprüfer** | Eingeschlossene Gestaltung testen | Sicherstellen, dass deine Seite für alle Nutzer funktioniert | +| **Gerätesimulator** | Vorschau auf verschiedenen Bildschirmgrößen | Responsives 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änglichkeitswerkzeuge -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Auf Chromium basierend mit Microsofts Entwicklerressourcen +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Branchenstandard DevTools mit umfangreicher Dokumentation +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Ausgezeichnete CSS Grid- und Barrierefreiheitswerkzeuge +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Basierend auf Chromium 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 wichtigen Browsern, um eine konsistente Nutzererfahrung sicherzustellen. +> ⚠️ **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 konsistente Nutzererfahrungen zu gewährleisten. ### Kommandozeilen-Tools: Dein Zugang zu Entwickler-Superkräften -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!“ 😅 +Okay, lass uns mal einen ganz ehrlichen Moment über die Kommandozeile haben, denn ich will, dass du das von jemandem hörst, der es wirklich versteht. Als ich sie zum ersten Mal sah – nur diesen schrecklichen schwarzen Bildschirm mit blinkendem Text – dachte ich buchstäblich: „Nein, auf keinen Fall! Das sieht aus wie aus einem Hackerfilm der 1980er, und ich bin bestimmt nicht schlau genug dafür!“ 😅 -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.“ +Aber hier ist, was ich damals gerne gesagt bekommen hätte und was ich dir jetzt sage: Die Kommandozeile ist nicht beängstigend – sie ist tatsächlich wie ein direktes Gespräch mit deinem Computer. Stell es dir vor wie den Unterschied zwischen Essen über eine schicke App mit Bildern und Menüs zu bestellen (was nett und einfach ist) und in dein Lieblingslokal zu gehen, wo der Koch genau weiß, was du magst, und dir etwas Perfektes zaubert, nur weil du „Überrasche mich mit etwas Tollem“ sagst. -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! +Die Kommandozeile ist der Ort, an dem Entwickler sich wie absolute Zauberer fühlen. Du tippst ein paar scheinbar magische Worte (okay, es sind nur Befehle, aber sie fühlen sich magisch an!), drückst Enter, und BOOM – du hast ganze Projektstrukturen erstellt, leistungsstarke Tools aus aller Welt installiert oder deine App online für Millionen Zuschauer bereitgestellt. Sobald du den ersten Geschmack dieser Macht erhältst, ist es ehrlich gesagt ziemlich süchtig machend! -**Darum wird die Kommandozeile dein Lieblingstool sein:** +**Darum wird die Kommandozeile dein Lieblingswerkzeug sein:** -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. +Während grafische Schnittstellen für viele Aufgaben großartig sind, glänzt die Kommandozeile bei Automatisierung, Präzision und Geschwindigkeit. Viele Entwicklungstools funktionieren hauptsächlich über Kommandozeilen-Schnittstellen, und sie effizient zu nutzen, kann deine Produktivität enorm steigern. ```bash # Schritt 1: Erstellen und navigieren Sie zum Projektverzeichnis mkdir my-awesome-website cd my-awesome-website ``` - + **Das macht dieser Code:** -- **Erstellt** ein neues Verzeichnis namens „my-awesome-website“ für dein Projekt -- **Wechselt** in das neu erstellte Verzeichnis, um die Arbeit zu beginnen +- **Erstelle** ein neues Verzeichnis namens "my-awesome-website" für dein Projekt +- **Wechsle** in das neu erstellte Verzeichnis, um mit der Arbeit zu beginnen ```bash # Schritt 2: Projekt mit package.json initialisieren @@ -612,172 +614,169 @@ npm init -y npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` - + **Schritt für Schritt passiert Folgendes:** -- **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 +- **Initialisiere** ein neues Node.js-Projekt mit Standardeinstellungen via `npm init -y` +- **Installiere** Vite als modernes Build-Tool für schnelle Entwicklung und Produktions-Builds +- **Füge hinzu** Prettier für automatische Code-Formatierung und ESLint für Code-Qualitätsprüfungen +- **Verwende** den `--save-dev`-Schalter, um diese als Entwicklungsabhängigkeiten zu markieren ```bash -# Schritt 3: Erstellen Sie die Projektstruktur und Dateien +# Schritt 3: Projektstruktur und Dateien erstellen mkdir src assets echo 'My Site

Hello World

' > index.html # Entwicklungsserver starten npx vite ``` - + **Oben haben wir:** - **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 +- **Generiert** eine einfache HTML-Datei mit korrekter Dokumentstruktur +- **Gestartet** den Vite Development Server für Live Reloading und Hot Module Replacement -#### Unverzichtbare Kommandozeilentools für Webentwicklung +#### Essenzielle Kommandozeilen-Tools für Webentwicklung | Tool | Zweck | Warum du es brauchst | |------|---------|-----------------| -| **[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 | +| **[Git](https://git-scm.com/)** | Versionskontrolle | Änderungen verfolgen, mit anderen zusammenarbeiten, Backup machen | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript-Laufzeit & Paketmanagement | JavaScript außerhalb des Browsers ausführen, moderne Entwicklungstools installieren | +| **[Vite](https://vitejs.dev/)** | Build-Tool & Dev-Server | 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 konsistent 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)** 💻 – Leistungsfähige Skriptumgebung -- **[Eingabeaufforderung](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Traditionelle Windows-Kommandozeile +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Modernes, funktionsreiches Terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Leistungsstarke Skriptumgebung +- **[Eingabeaufforderung](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 – Traditionelle Windows-Kommandozeile -**macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Eingebautes Terminalprogramm +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Eingebautes Terminal - **[iTerm2](https://iterm2.com/)** – Erweitertes Terminal mit zusätzlichen Features -**Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standard-Linux-Shell +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standard Linux-Shell - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Fortgeschrittener Terminal-Emulator > 💻 = Vorinstalliert im Betriebssystem -> 🎯 **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. +> 🎯 **Lernpfad**: Beginne mit Grundbefehlen 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 .` (aktuelles Verzeichnis im VS Code öffnen). Mit der Zeit wirst du automatisch fortgeschrittene Befehle und Automatisierungstechniken erlernen. -### Dokumentation: Dein jederzeit verfügbarer Lernmentor +### Dokumentation: Dein immer verfügbarer Lernmentor -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! +Okay, ich verrate dir ein kleines Geheimnis, das dir als Anfänger wirklich hilft: Selbst die erfahrensten Entwickler verbringen einen großen Teil ihrer Zeit mit dem Lesen von Dokumentationen. Und das nicht, weil sie nicht wissen, was sie tun – es ist eigentlich ein Zeichen von Weisheit! -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! +Betrachte Dokumentation wie den Zugang zu den geduldigsten, fachkundigsten Lehrern der Welt, die rund um die Uhr erreichbar sind. Hängst du um 2 Uhr morgens an einem Problem fest? Die Dokumentation ist da mit einer virtuellen Umarmung und genau der Antwort, die du brauchst. Willst du etwas über eine coole neue Funktion lernen, von der alle sprechen? Die Dokumentation unterstützt dich mit Schritt-für-Schritt-Beispielen. Versuchst du zu verstehen, warum etwas so funktioniert, wie es funktioniert? Richtig geraten – die Dokumentation erklärt es so, dass es endlich klick macht! -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. +Etwas, das meine Sichtweise komplett verändert hat: Die Webentwicklung verändert sich unglaublich schnell, und niemand (ich meine wirklich niemand!) hat alles auswendig gelernt. Ich habe Senior-Entwickler mit über 15 Jahren Erfahrung gesehen, wie sie 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, sondern zu wissen, wo du verlässliche Antworten schnell findest und wie du sie anwendest. -**Hier passiert die wahre Magie:** +**Hier passiert die echte Magie:** -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*. +Professionelle Entwickler verbringen einen bedeutenden Teil ihrer Zeit mit dem Lesen von Dokumentationen – nicht, weil sie nichts wissen, sondern weil die Webentwicklung sich so schnell weiterentwickelt, dass man kontinuierlich dazulernen muss. Gute Dokumentation hilft dir, nicht nur zu verstehen, *wie* man etwas verwendet, sondern auch *warum* und *wann*. -#### Unverzichtbare Dokumentationsressourcen +#### Essenzielle Dokumentationsressourcen -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Goldstandard für Webtechnologie-Dokumentationen -- Umfassende Anleitungen zu HTML, CSS und JavaScript -- Enthält Browserkompatibilitätsinformationen -- Beinhaltet praktische Beispiele und interaktive Demos +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- Der Goldstandard für Webtechnologie-Dokumentation +- Umfassende Anleitungen zu HTML, CSS und JavaScript +- Enthält Informationen zur Browserkompatibilität +- Praktische Beispiele und interaktive Demos -**[Web.dev](https://web.dev)** (von Google) -- Moderne Best Practices der Webentwicklung -- Leitfäden zur Performance-Optimierung -- Zugänglichkeits- und inklusive Designprinzipien +**[Web.dev](https://web.dev)** (von Google) +- Moderne Best Practices für Webentwicklung +- Leitfäden zur Performance-Optimierung +- Prinzipien zu Barrierefreiheit und inklusivem Design - Fallstudien aus echten Projekten -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ressourcen für die Entwicklung mit Edge Browser -- Progressive Web App-Anleitungen -- Einblicke in plattformübergreifende Entwicklung +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Entwicklungsressourcen für den Edge-Browser +- Progressive Web App-Anleitungen +- Erkenntnisse zur plattformübergreifenden Entwicklung -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturierte Lerncurricula -- Videokurse von Branchenexperten +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Strukturierte Lerncurricula +- Videokurse von Branchenexperten - Praktische Programmierübungen -> 📚 **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. +> 📚 **Lernstrategie**: Versuche nicht, Dokumentationen auswendig zu lernen – lerne vielmehr, wie du sie effizient navigierst. Speichere oft genutzte Referenzen als Lesezeichen und übe, Suchfunktionen zu verwenden, um schnell spezifische Informationen zu finden. -### 🔧 **Tool-Mastery-Check: Was spricht dich am meisten an?** +### 🔧 **Tool-Mastery-Check: Was spricht dich an?** -**Nimm dir einen Moment und überlege:** -- 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? +**Nimm dir einen Moment zum Nachdenken:** +- Welches Tool möchtest du als Erstes ausprobieren? (Es gibt keine falsche Antwort!) +- Fühlt sich die Kommandozeile immer noch einschüchternd an, oder bist du neugierig darauf? +- Kannst du dir vorstellen, Browser-DevTools zu verwenden, um einen Blick hinter den Vorhang deiner Lieblings-Websites zu werfen? ```mermaid -pie title "Entwicklerzeit mit Werkzeugen" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 +pie title "Von Entwicklern mit Werkzeugen verbrachte Zeit" + "Code-Editor" : 40 + "Browser-Test" : 25 + "Kommandozeile" : 15 "Dokumentation lesen" : 15 "Debugging" : 5 -``` -> **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! +``` +> **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 gestalten! -✅ **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. +✅ **Denkanstoß**: Hier noch etwas Interessantes zum Nachdenken – wie denkst du, unterscheiden sich Werkzeuge zum Erstellen von Websites (Entwicklung) von denen zum Gestalten ihres Aussehens (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 verschiedene Werkzeugkästen! Solches Denken hilft dir wirklich, das große Ganze zu sehen, wie Websites zum Leben erweckt werden. -## GitHub Copilot Agent Herausforderung 🚀 +## GitHub Copilot Agent Challenge 🚀 -Nutze den Agent-Modus, um folgende Herausforderung zu meistern: +Benutze den Agent-Modus, um folgende Herausforderung zu lösen: -**Beschreibung:** Erkunde die Funktionen eines modernen Code-Editors oder einer IDE und zeige, wie er deinen Workflow als Webentwickler verbessern kann. +**Beschreibung:** Erkunde die Funktionen eines modernen Code-Editors oder einer IDE und zeige, wie sie deinen Workflow als Webentwickler verbessern kann. -**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. +**Aufgabe:** Wähle einen Code-Editor oder eine IDE (z. B. 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 warten. Erkläre jeweils kurz, wie sie deinen Workflow verbessern. --- ## 🚀 Herausforderung -**Also, Detektiv, bereit für deinen ersten 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, 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. **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! +**Alles klar, Detektiv, bereit für deinen ersten Fall?** -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! +Jetzt, wo du diese großartige Grundlage hast, wartet ein Abenteuer, 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! Du bist ein Detektiv für Programmiersprachen auf deinem allerersten spannenden Fall! -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. +**Deine Mission, solltest du sie annehmen:** +1. **Sprach-Explorer werden**: Wähle drei Programmiersprachen aus komplett unterschiedlichen Bereichen – vielleicht eine für Webseiten, eine für mobile Apps und eine, die Daten für Wissenschaftler verarbeitet. Finde Beispiele derselben einfachen Aufgabe in allen drei Sprachen. Ich verspreche, du wirst total erstaunt sein, wie unterschiedlich sie aussehen können und trotzdem exakt dasselbe tun! +2. **Ihre Ursprungsgeschichten entdecken**: Was macht jede Sprache besonders? Hier ein cooler Fakt: Jede einzelne Programmiersprache wurde geschaffen, weil jemand dachte: „Weißt du was? Es muss eine bessere Lösung für dieses spezielle Problem geben.“ Kannst du herausfinden, welche Probleme das waren? Manche Geschichten sind wirklich faszinierend! +3. **Lerne die Communities kennen**: Schau dir an, wie einladend und leidenschaftlich jede Sprach-Community ist. Manche haben Millionen Entwickler, die Wissen teilen und sich helfen, andere sind kleiner, aber unglaublich eng verbunden und unterstützend. Du wirst lieben, die verschiedenen Persönlichkeiten dieser Communities zu sehen! +4. **Folge deinem Bauchgefühl**: Welche Sprache fühlt sich gerade für dich am zugänglichsten an? Mach dir keinen Stress mit einer „perfekten“ Wahl – hör einfach auf dein Gefühl! Es gibt wirklich keine falsche Antwort hier, und später kannst du immer noch andere ausprobieren. -**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! +**Bonus-Detektivarbeit:** Finde heraus, welche großen Websites oder Apps mit jeder Sprache gebaut wurden. Ich garantiere dir, du wirst schockiert sein, mit welcher Sprache Instagram, Netflix oder dein Lieblings-Handyspiel funktionieren! -> 💡 **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! +> 💡 **Denk daran**: Heute willst du kein Experte für irgendeine Sprache werden. Du lernst nur die Nachbarschaft kennen, bevor du entscheidest, wo du dein „Geschäft“ aufmachen willst. Nimm dir Zeit, hab Spaß, und lass dich von deiner Neugier leiten! ## Lass uns feiern, was du entdeckt hast! -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! +Heiliger Strohsack, du hast heute so viel 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 hier ist kein Test, bei dem du alles perfekt machen musst. Es ist eher eine Feier all der coolen Dinge, die du über diese faszinierende Welt gelernt hast, in die du bald eintauchst! [Mach das Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/) ## Rückblick & Selbststudium -**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! +**Nimm dir Zeit zum Erkunden und hab Spaß dabei!** +Du hast heute schon viel gelernt, und darauf kannst du stolz sein! Jetzt kommt der spaßige Teil – die Themen zu erkunden, die deine Neugier geweckt haben. Denk daran, das hier ist keine Hausaufgabe – es ist ein Abenteuer! **Tauche tiefer ein in das, was dich begeistert:** -**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-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. +**Probier Programmier­sprachen praktisch aus:** +- Besuche die offiziellen Webseiten von 2-3 Sprachen, die dich interessiert haben. Jede hat ihre eigene Persönlichkeit und Geschichte! +- Probiere Online-Coding-Spielplätze wie [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) oder [Replit](https://replit.com/) aus. Hab keine Angst zu experimentieren – kaputt machen kannst du nichts! +- Lies darüber, wie deine Lieblingssprache entstanden ist. Ehrlich, manche dieser Entstehungsgeschichten sind faszinierend und helfen dir zu verstehen, warum Sprachen so funktionieren, wie sie es tun. -**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. +**Mach dich mit deinen neuen Werkzeugen vertraut:** +- Lade Visual Studio Code herunter, falls du es noch nicht gemacht hast – es ist kostenlos und du wirst es lieben! +- Verbringe ein paar Minuten im Extensions-Marktplatz. Das ist wie ein App-Store für deinen Code-Editor! +- Öffne die Entwickler-Tools deines Browsers und klick dich einfach mal durch. Kein Stress, alles zu verstehen – mach dich einfach mit dem Verfügbaren vertraut. **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 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! +- Folge ein paar Entwickler-Communities auf [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) oder [GitHub](https://github.com/). Die Programmier-Community heißt Neulinge wirklich herzlich willkommen! +- Schau dir ein paar anfängerfreundliche Coding-Videos auf YouTube an. Es gibt so viele großartige Creator, die sich daran erinnern, wie es war, ganz am Anfang zu stehen. +- Überlege, ob du an lokalen Treffen oder Online-Communities teilnimmst. Glaub mir, Entwickler helfen Neulingen gerne! -> 🎯 **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! +> 🎯 **Hör zu, das sollst du dir merken**: Du musst nicht über Nacht zum Programmier-Wunderkind werden! Im Moment lernst du einfach nur diese erstaunliche neue Welt kennen, zu der du bald gehören wirst. Nimm dir Zeit, genieße die Reise und denk daran – jeder einzelne Entwickler, den du bewunderst, saß irgendwann genau dort, wo du jetzt bist, fühlte sich aufgeregt und vielleicht ein wenig überwältigt. Das ist ganz normal und bedeutet, dass du auf dem richtigen Weg bist! @@ -785,70 +784,70 @@ Du hast heute eine Menge geschafft, und darauf kannst du wirklich stolz sein! Je [Reading the Docs](assignment.md) -> 💡 **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). +> 💡 **Ein kleiner Anstoß für deine Aufgabe**: Ich würde mich total freuen, wenn du einige Tools erkundest, 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 voller toller Entwicklungstools, die nur darauf warten, entdeckt zu werden. Such dir welche aus, die aktiv gepflegt werden und lebendige, hilfsbereite Communities haben (die bieten meist die besten Tutorials und die freundlichsten Leute, wenn du mal feststeckst und eine helfende Hand brauchst). --- -## 🚀 Dein Programmier-Reiseplan +## 🚀 Dein Zeitplan für die Programmier-Reise ### ⚡ **Was du in den nächsten 5 Minuten tun kannst** -- [ ] Lesezeichen für 2-3 Webseiten von Programmiersprachen setzen, die dein Interesse geweckt haben +- [ ] 2-3 Webseiten von Programmiersprachen, die dich interessieren, als Lesezeichen speichern - [ ] Visual Studio Code herunterladen, falls noch nicht geschehen -- [ ] Die DevTools (F12) deines Browsers öffnen und auf irgendeiner Webseite herumklicken -- [ ] Einer Programmierer-Community beitreten (Dev.to, Reddit r/webdev oder Stack Overflow) +- [ ] Die DevTools deines Browsers (F12) öffnen und auf beliebigen Webseiten herumklicken +- [ ] Einer Programmier-Community beitreten (Dev.to, Reddit r/webdev oder Stack Overflow) ### ⏰ **Was du in dieser Stunde schaffen kannst** -- [ ] Das Quiz nach der Lektion absolvieren und deine Antworten reflektieren +- [ ] Das Quiz nach der Lektion abschließen und deine Antworten reflektieren - [ ] VS Code mit der GitHub Copilot-Erweiterung einrichten -- [ ] 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) +- [ ] Ein „Hello World“-Beispiel in 2 verschiedenen Programmiersprachen online ausprobieren +- [ ] Ein Video „Ein Tag im Leben eines Entwicklers“ auf YouTube ansehen +- [ ] Mit der „Programmiersprachen-Detektivarbeit“ (aus der Challenge) beginnen -### 📅 **Dein einwöchiges Abenteuer** +### 📅 **Dein Abenteuer für die ganze Woche** - [ ] 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 (selbst „Hello, [Dein Name]!“ zählt) +- [ ] Etwas Kleines in CodePen oder Replit bauen (auch nur „Hallo, [Dein Name]!“) - [ ] Einen Entwickler-Blogbeitrag über die Programmierreise von jemandem lesen -- [ ] An einem virtuellen Meetup teilnehmen oder einen Programmier-Vortrag anschauen -- [ ] Beginne, deine gewählte Sprache mit Online-Tutorials zu lernen +- [ ] An einem virtuellen Meetup teilnehmen oder einen Programmier-Vortrag schauen +- [ ] Deine gewählte Sprache mit Online-Tutorials lernen -### 🗓️ **Deine einmonatige Transformation** -- [ ] 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 +### 🗓️ **Deine Veränderung im Laufe des Monats** +- [ ] Dein erstes kleines Projekt bauen (auch eine einfache Webseite zählt!) +- [ ] Zu einem Open-Source-Projekt beitragen (zuerst mit Dokumentationskorrekturen) +- [ ] Jemanden betreuen, der gerade erst mit dem Programmieren anfängt +- [ ] Deine Entwickler-Portfolio-Webseite erstellen +- [ ] Kontakt zu lokalen Entwickler-Communities oder Lerngruppen aufnehmen +- [ ] Deinen nächsten Lern-Meilenstein planen ### 🎯 **Abschließende Reflexion** **Bevor du weitermachst, nimm dir einen Moment zum Feiern:** -- Was hat dich heute beim Programmieren besonders begeistert? +- Was hat dich heute am Programmieren am meisten 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? +- Wie fühlst du dich beim Start dieser Programmierreise? +- Welche Frage möchtest du gerade einem Entwickler stellen? ```mermaid journey title Deine Reise zum Aufbau von Selbstvertrauen section Heute - Neugierig: 3: You - Überwältigt: 4: You - Aufgeregt: 5: You + Neugierig: 3: Du + Überwältigt: 4: Du + Aufgeregt: 5: Du section Diese Woche - Erkunden: 4: You - Lernen: 5: You - Vernetzen: 4: You + Erkunden: 4: Du + Lernen: 5: Du + Vernetzen: 4: Du section Nächster Monat - Aufbau: 5: You - Selbstbewusst: 5: You - Anderen Helfen: 5: You + Aufbauen: 5: Du + Selbstbewusst: 5: Du + Anderen Helfen: 5: Du ``` -> 🌟 **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! 🎉 +> 🌟 **Denk daran**: Jeder Experte war einmal Anfänger. Jeder Senior-Entwickler hat sich genau so gefühlt wie du jetzt – aufgeregt, vielleicht ein bisschen überwältigt und auf jeden Fall neugierig, was möglich ist. Du bist in großartiger Gesellschaft, und diese Reise wird unglaublich. Willkommen in der wunderbaren Welt des Programmierens! 🎉 --- **Haftungsausschluss**: -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. +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 die automatisierte Übersetzung Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in der Originalsprache ist als maßgebliche Quelle zu betrachten. 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. \ No newline at end of file diff --git a/translations/de/AGENTS.md b/translations/de/AGENTS.md index 0499a5845..be94e014b 100644 --- a/translations/de/AGENTS.md +++ b/translations/de/AGENTS.md @@ -2,42 +2,42 @@ ## Projektübersicht -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. +Dies ist ein Bildungs-Curriculum-Repository zum Unterrichten der Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-wöchiger Kurs, entwickelt von Microsoft Cloud Advocates, mit 24 praktischen Lektionen zu JavaScript, CSS und HTML. -### Hauptkomponenten +### Hauptbestandteile -- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen -- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Bank-App, Code-Editor und KI-Chat-Assistent +- **Bildungsinhalt**: 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-/Nach-Lektion-Bewertungen) -- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für über 50 Sprachen via GitHub Actions +- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für 50+ Sprachen via GitHub Actions - **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte) ### Architektur -- 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) +- Bildungsrepository mit lektionenbasierter Struktur +- Jeder Lektionenordner enthält README, Codebeispiele und Lösungen +- Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionen-Projekte) - Übersetzungssystem mit GitHub Actions (co-op-translator) -- Dokumentation bereitgestellt über Docsify und als PDF verfügbar +- Dokumentation bereitgestellt via Docsify und als PDF verfügbar -## Setup-Befehle +## Einrichtung Befehle -Dieses Repository dient hauptsächlich dem Konsum von Bildungsinhalten. Für die Arbeit mit bestimmten Projekten: +Dieses Repository dient hauptsächlich zum Konsumieren von Bildungsinhalten. Für die Arbeit mit spezifischen Projekten: -### Haupt-Repository-Setup +### Haupt-Repository-Einrichtung ```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 Einrichtung (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Entwicklungsserver starten -npm run build # Für Produktion erstellen +npm run build # Für die Produktion bauen npm run lint # ESLint ausführen ``` @@ -51,7 +51,7 @@ npm run lint # ESLint ausführen npm run format # Mit Prettier formatieren ``` -### Browser-Erweiterungs-Projekte +### Browser-Erweiterungsprojekte ```bash cd 5-browser-extension/solution @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# Öffne index.html im Browser oder verwende Live Server +# Öffnen Sie index.html im Browser oder verwenden Sie Live Server ``` ### Chat-Projekt (Python Backend) @@ -76,105 +76,105 @@ pip install openai python api.py ``` -## Entwicklungs-Workflow +## Entwicklungsablauf -### Für Inhaltsbeiträge +### Für Inhaltsmitwirkende -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 +1. **Forke das Repository** in deinem GitHub-Konto +2. **Klonen deinen Fork** lokal +3. **Erstelle einen neuen Branch** für deine Änderungen +4. Änderungen an Lektionstexten oder Codebeispielen vornehmen +5. Codeänderungen in relevanten Projektverzeichnissen testen +6. Pull Requests entsprechend der Beitragsrichtlinien einreichen ### Für Lernende 1. Repository forken oder klonen -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 +2. Nacheinander durch Lektionenverzeichnisse navigieren +3. README-Dateien jeder Lektion lesen +4. Vor-Lektion-Quizze auf https://ff-quizzes.netlify.app/web/ absolvieren +5. Codebeispiele in Lektionenordnern durcharbeiten +6. Aufgaben und Herausforderungen abschließen +7. Nach-Lektion-Quizze machen ### Live-Entwicklung -- **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 +- **Dokumentation**: `docsify serve` im Root ausführen (Port 3000) +- **Quiz-App**: `npm run dev` im quiz-app-Verzeichnis ausführen +- **Projekte**: Verwende VS Code Live Server Erweiterung für HTML-Projekte +- **API-Projekte**: `npm start` in jeweiligen API-Verzeichnissen ausführen ## Testanweisungen -### Quiz-App Testen +### Quiz-App Test ```bash cd quiz-app -npm run lint # Überprüfen Sie auf Stilprobleme im Code -npm run build # Stellen Sie sicher, dass der Build erfolgreich ist +npm run lint # Überprüfen Sie auf Probleme mit dem Code-Stil +npm run build # Überprüfen Sie, ob der Build erfolgreich ist ``` -### Bank-API Testen +### Bank API Test ```bash cd 7-bank-project/api -npm run lint # Überprüfe auf Code-Stilprobleme -node server.js # Verifiziere, dass der Server ohne Fehler startet +npm run lint # Überprüfen auf Probleme mit dem Code-Stil +node server.js # Überprüfen, ob der Server ohne Fehler startet ``` ### Allgemeiner Testansatz -- 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 +- Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests +- Manueller Testfokus: + - Codebeispiele laufen fehlerfrei + - Links in der Dokumentation funktionieren korrekt + - Projekt-Builds werden erfolgreich abgeschlossen + - Beispiele folgen Best Practices -### Prüfungen vor dem Einreichen +### Vor-Einreichungs-Checks -- 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 +- `npm run lint` in Verzeichnissen mit package.json ausführen +- Markdown-Links auf Gültigkeit prüfen +- Codebeispiele im Browser oder Node.js testen +- Prüfen, dass Übersetzungen die richtige Struktur beibehalten ## Code-Stilrichtlinien ### JavaScript -- 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 +- Nutze moderne ES6+ Syntax +- Folge den standardmäßigen ESLint-Konfigurationen in Projekten +- Verwende aussagekräftige Variablen- und Funktionsnamen zur Bildungsklarheit +- Füge Kommentare hinzu, die Konzepte für Lernende erklären +- Formatierung mit Prettier, wenn konfiguriert ### HTML/CSS - Semantische HTML5-Elemente -- Prinzipien des responsiven Designs +- Responsive Design Prinzipien - Klare Klassennamen-Konventionen -- Kommentare zur Erklärung von CSS-Techniken für Lernende +- Kommentare, die CSS-Techniken für Lernende erklären ### Python - PEP 8 Stilrichtlinien -- Klare, didaktische Codebeispiele +- Klare, lehrreiche Codebeispiele - Typ-Hinweise, wo hilfreich für das Lernen ### Markdown-Dokumentation -- Klare Gliederungshierarchie +- Klare Überschriften-Hierarchie - Codeblöcke mit Sprachangabe -- Verlinkung zu weiteren Ressourcen -- Screenshots und Bilder in `images/`-Verzeichnissen -- Alternativtexte für Bilder zur Barrierefreiheit +- Links zu zusätzlichen Ressourcen +- Screenshots und Bilder in `images/` Verzeichnissen +- Alt-Text für Bilder zur Barrierefreiheit -### Dateiorganisation +### Datei-Organisation -- Lektionen fortlaufend nummeriert (1-getting-started-lessons, 2-js-basics usw.) +- Lektionen sequenziell 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}/` Unterordnern +- Bilder werden in lektion-spezifischen `images/` Ordnern gespeichert +- Übersetzungen in `translations/{language-code}/` Struktur ## Build und Deployment @@ -185,15 +185,15 @@ 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 die Bereitstellung über den GitHub Actions-Workflow bei Push auf main durch +# Führt die Bereitstellung über GitHub Actions Workflow bei Push zum Branch main durch ``` Azure Static Web Apps Konfiguration: - **App-Standort**: `/quiz-app` -- **Output-Standort**: `dist` +- **Ausgabeort**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### PDF-Erstellung der Dokumentation +### Dokumentation PDF-Erstellung ```bash npm install # Installiere docsify-to-pdf @@ -203,80 +203,80 @@ npm run convert # Erzeuge PDF aus docs ### Docsify Dokumentation ```bash -npm install -g docsify-cli # Docsify global installieren +npm install -g docsify-cli # Installiere Docsify global docsify serve # Auf localhost:3000 bereitstellen ``` ### Projekt-spezifische Builds -Jedes Projektverzeichnis kann seinen eigenen Build-Prozess haben: +Jedes Projektverzeichnis kann einen eigenen Build-Prozess haben: - Vue-Projekte: `npm run build` erzeugt Produktions-Bundles -- Statische Projekte: Kein Build-Schritt, Dateien werden direkt bereitgestellt +- Statische Projekte: Kein Build Schritt, Dateien direkt servieren -## Pull-Request-Richtlinien +## Pull-Request Richtlinien ### Titel-Format -Verwenden Sie klare, beschreibende Titel, die den Änderungsbereich angeben: +Verwende klare, beschreibende Titel, die den Änderungsbereich anzeigen: - `[Quiz-app] Neues Quiz für Lektion X hinzufügen` -- `[Lesson-3] Tippfehler im Terrarium-Projekt korrigieren` +- `[Lesson-3] Tippfehler im Terrarium-Projekt beheben` - `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen` - `[Docs] Setup-Anweisungen aktualisieren` ### Erforderliche Prüfungen -Vor dem Einreichen eines PR: +Vor dem Einreichen eines Pull Requests: -1. **Codequalität**: - - Führen Sie `npm run lint` in den betroffenen Projektverzeichnissen aus - - Beheben Sie alle Linting-Fehler und Warnungen +1. **Code-Qualität**: + - `npm run lint` in betroffenen Projektverzeichnissen ausführen + - Alle Linting-Fehler und Warnungen beheben 2. **Build-Verifikation**: - - Führen Sie ggf. `npm run build` aus - - Stellen Sie sicher, dass keine Build-Fehler auftreten + - `npm run build` wenn zutreffend ausführen + - Sicherstellen, dass keine Build-Fehler vorliegen -3. **Linkprüfung**: - - Testen Sie alle Markdown-Links - - Überprüfen Sie Bildreferenzen +3. **Link-Validierung**: + - Alle Markdown-Links testen + - Bildverweise prüfen 4. **Inhaltsprüfung**: - Korrekturlesen auf Rechtschreibung und Grammatik - - Sicherstellen, dass Codebeispiele korrekt und didaktisch sind - - Überprüfen, dass Übersetzungen die Originalbedeutung wahren + - Sicherstellen, dass Codebeispiele korrekt und bildend sind + - Übersetzungen auf Bedeutungsintaktheit prüfen ### Beitragsanforderungen -- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR) +- Zustimmung zur Microsoft CLA (automatische Überprü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 +- Referenzierung von Issue-Nummern im PR-Beschreibung falls zutreffend -### Überprüfungsprozess +### Review-Prozess - 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 +- Bildungsverständlichkeit hat Priorität +- Codebeispiele sollten aktuellen Best Practices folgen +- Übersetzungen auf Genauigkeit und kulturelle Angemessenheit geprüft ## Übersetzungssystem ### Automatisierte Übersetzung - 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 +- Übersetzt automatisch in 50+ Sprachen +- Quell-Dateien in Hauptverzeichnissen +- Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen -### Manuelle Übersetzungsverbesserungen hinzufügen +### Manuelle Verbesserungen an Übersetzungen 1. Datei in `translations/{language-code}/` finden -2. Verbesserungen vornehmen und dabei die Struktur bewahren -3. Sicherstellen, dass Codebeispiele weiterhin funktionieren -4. Eventuell lokalisierte Quiz-Inhalte testen +2. Verbesserungen bei Erhalt der Struktur vornehmen +3. Sicherstellen, dass Codebeispiele funktionsfähig bleiben +4. Lokalisiertes Quiz-Material testen ### Übersetzungs-Metadaten -Übersetzte Dateien enthalten Metadaten-Kopfzeile: +Übersetzte Dateien enthalten Metadaten-Header: ```markdown ``` -## Fehlerbehebung und Problembehandlung +## Debugging und Fehlersuche ### Häufige Probleme **Quiz-App startet nicht**: -- Ü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) +- Node.js Version prüfen (v14+ empfohlen) +- `node_modules` und `package-lock.json` löschen, danach `npm install` ausführen +- Auf Port-Konflikte prüfen (Standard: Vite verwendet Port 5173) -**API-Server startet nicht**: -- Node.js-Version prüfen (node >=10) +**API Server startet nicht**: +- Node.js Version >= 10 sicherstellen - Prüfen, ob Port bereits belegt ist -- Sicherstellen, dass alle Abhängigkeiten mit `npm install` installiert sind +- Alle Abhängigkeiten mit `npm install` installieren **Browser-Erweiterung lädt nicht**: -- Manifest.json auf korrekte Formatierung prüfen +- manifest.json auf korrekte Formatierung prüfen - Browser-Konsole auf Fehler überprüfen -- Browser-spezifische Installationsanweisungen beachten +- Browser-spezifische Installationsanleitungen befolgen -**Probleme mit Python-Chat-Projekt**: +**Python Chat-Projekt Probleme**: - OpenAI-Paket installiert? `pip install openai` -- Umgebungsvariable GITHUB_TOKEN gesetzt? -- Zugriff auf GitHub-Modelle prüfen +- GITHUB_TOKEN Umgebungsvariable gesetzt? +- Zugriffsrechte für GitHub Models prüfen -**Docsify liefert keine Dokumentation aus**: +**Docsify liefert keine Dokumentation**: - docsify-cli global installieren: `npm install -g docsify-cli` -- Im Root-Verzeichnis des Repositories ausführen -- Sicherstellen, dass `docs/_sidebar.md` existiert +- Vom Repository-Root aus starten +- Prüfen, ob `docs/_sidebar.md` existiert ### Tipps zur Entwicklungsumgebung -- 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 +- VS Code mit Live Server Erweiterung für HTML-Projekte verwenden +- ESLint und Prettier Erweiterungen für einheitliche Formatierung installieren +- Browser DevTools zum JavaScript Debuggen nutzen +- Für Vue-Projekte Vue DevTools Browser-Erweiterung verwenden -### Performance-Überlegungen +### Performance Aspekt -- Große Anzahl übersetzter Dateien (50+ Sprachen) führt zu großen Klonen -- 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) +- Große Anzahl an Übersetzungsdateien (50+ Sprachen) führt zu großen Klonen +- Shallow Clone verwenden, wenn nur Inhaltsarbeit gewünscht: `git clone --depth 1` +- Übersetzungen bei Arbeit am englischen Inhalt von Suchvorgängen ausnehmen +- Build-Prozesse können beim ersten Lauf langsam sein (npm install, Vite Build) ## Sicherheitsüberlegungen ### Umgebungsvariablen -- 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 +- API-Schlüssel niemals ins Repository commiten +- `.env` Dateien verwenden (bereits in `.gitignore`) +- Benötigte Umgebungsvariablen in Projekt-READMEs dokumentieren ### Python-Projekte - Virtuelle Umgebungen verwenden: `python -m venv venv` - Abhängigkeiten aktuell halten -- GitHub-Tokens sollten nur minimale erforderliche Berechtigungen haben +- GitHub Tokens mit minimal erforderlichen Berechtigungen nutzen -### Zugriff auf GitHub-Modelle +### GitHub Models Zugriff -- Persönliche Zugriffstoken (PAT) werden für GitHub-Modelle benötigt +- Personal Access Tokens (PAT) für GitHub Models erforderlich - Tokens als Umgebungsvariablen speichern -- Nie Tokens oder Anmeldedaten im Repository commiten +- Tokens oder Zugangsdaten niemals committen ## Zusätzliche Hinweise ### Zielgruppe -- Komplettanfänger in der Webentwicklung +- Absolute Anfänger in Webentwicklung - Studierende und Selbstlernende - Lehrkräfte, die das Curriculum im Unterricht einsetzen -- Inhalte sind auf Zugänglichkeit und schrittweisen Kompetenzaufbau ausgelegt +- Inhalte sind auf Barrierefreiheit und schrittweise Kompetenzentwicklung ausgelegt -### Pädagogische Philosophie +### Bildungskonzept - Projektbasiertes Lernen - Häufige Wissensüberprüfungen (Quizze) -- Praktische Coding-Übungen -- Praxisnahe Beispiele +- Praktische Programmierübungen +- Beispiele mit realweltlichen Anwendungen - Fokus auf Grundlagen vor Frameworks ### Repository-Wartung -- Aktive Community von Lernenden und Beitragenden -- Regelmäßige Updates von Abhängigkeiten und Inhalten +- Aktive Gemeinschaft von Lernenden und Mitwirkenden +- Regelmäßige Aktualisierung von Abhängigkeiten und Inhalten - Issues und Diskussionen werden von Maintainers überwacht -- Übersetzungsupdates automatisiert via GitHub Actions +- Übersetzungsupdates automatisiert über GitHub Actions ### Verwandte Ressourcen - [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 KI, Data Science, ML, IoT Curricula verfügbar +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) empfiehlt sich für Lernende +- Weitere Kurse: Generative AI, Data Science, ML, IoT Curricula verfügbar -### Arbeiten mit spezifischen Projekten +### Arbeit mit spezifischen Projekten -Für detaillierte Anweisungen zu einzelnen Projekten siehe README-Dateien in: +Für detaillierte Anleitungen zu einzelnen Projekten siehe README-Dateien in: - `quiz-app/README.md` - Vue 3 Quiz-Anwendung -- `7-bank-project/README.md` - Bankanwendung mit Authentifizierung -- `5-browser-extension/README.md` - Entwicklung von Browser-Erweiterungen +- `7-bank-project/README.md` - Banking-App mit Authentifizierung +- `5-browser-extension/README.md` - Browser-Erweiterungsentwicklung - `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 traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte: - Jede Lektion ist eigenständig - Projekte teilen keine Abhängigkeiten -- Arbeiten Sie an einzelnen Projekten, ohne andere zu beeinflussen -- Klonen Sie das gesamte Repository für die vollständige Curriculum-Erfahrung +- Arbeit an Einzelprojekten ohne Beeinflussung anderer +- Gesamtes Repo klonen für das komplette Curriculum-Erlebnis --- -**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. +**Haftungsausschluss**: +Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, 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 wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung 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 e750716fd..edb631512 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T16:43:56+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T21:37:10+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-03-06T16:51:51+00:00", + "translation_date": "2026-03-27T21:43:05+00:00", "source_file": "AGENTS.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 d0fb3a11c..aae1209aa 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,94 +1,94 @@ -# Введение в языки программирования и современные инструменты разработчика - -Привет, будущий разработчик! 👋 Могу я рассказать тебе кое-что, что до сих пор каждый божий день заставляет меня испытывать трепет? Ты вот-вот откроешь для себя, что программирование — это не просто про компьютеры, это про настоящие суперспособности, с помощью которых можно воплотить в жизнь самые сумасшедшие идеи! +# Введение в языки программирования и современные инструменты для разработчиков -Ты знаешь тот момент, когда пользуешься своим любимым приложением, и всё просто складывается идеально? Когда нажимаешь кнопку, и происходит нечто волшебное, из-за чего думаешь: «Вау, а как они ЭТО сделали?» Так вот, кто-то, такой же как ты — вероятно, сидящий в своём любимом кафе в 2 часа ночи с третьим эспрессо — написал код, который создаёт эту магию. И сейчас тебя поразит вот что: к концу этого урока ты не только поймёшь, как это было сделано, но ещё и зажжёшься попробовать сделать это сам! +Привет, будущий разработчик! 👋 Можно я расскажу тебе кое-что, что до сих пор каждый день вызывает у меня мурашки? Ты вот-вот откроешь для себя, что программирование — это не просто про компьютеры – это настоящие суперспособности дарить жизнь самым смелым идеям! -Послушай, я отлично понимаю, если программирование сейчас кажется пугающим. Когда я начал, честно думал, что нужно быть каким-то математическим гением или кодить с пяти лет. Но вот что полностью изменило моё восприятие: программирование — это как учиться разговаривать на новом языке. Сначала «привет» и «спасибо», потом уже можешь заказать кофе, а через некоторое время ведёшь глубокие философские беседы! Только в этом случае ты разговариваешь с компьютерами, и, честно? Они самые терпеливые собеседники, которых ты когда-либо встречал — они никогда не осуждают ошибки и всегда рады попробовать снова! +Знаешь тот момент, когда пользуешься своим любимым приложением, и всё складывается идеально? Когда нажимаешь кнопку и случается что-то по-настоящему волшебное, заставляющее тебя сказать «вау, как они ЭТО сделали?» Так вот, кто-то такой же, как ты — вероятно, сидящий в любимом кафе в 2 часа ночи с третьим эспрессо — написал код, который создал это волшебство. И вот что поразит тебя до глубины души: к концу этого урока ты не только поймёшь, как они это сделали, но и будешь гореть желанием попробовать самому! -Сегодня мы познакомимся с невероятными инструментами, которые делают современную веб-разработку не просто возможной, а по-настоящему увлекательной. Речь идёт именно о тех редакторах, браузерах и рабочих процессах, которыми ежедневно пользуются разработчики Netflix, Spotify и твоей любимой инди-студии. И вот что заставит тебя танцевать от счастья: большинство этих профессиональных, отраслевых инструментов совершенно бесплатны! +Слушай, я полностью понимаю, если сейчас программирование кажется пугающим. Когда я начинал, я честно думал, будто нужно быть каким-то математическим гением или кодить с пяти лет. Но вот что полностью поменяло моё восприятие: программирование – это точно так же, как учиться разговаривать на новом языке. Сначала ты учишься говорить «привет» и «спасибо», потом можешь заказать кофе, а вскоре уже ведёшь глубокие философские беседы! Только в этом случае беседуешь с компьютерами, и знаешь что? Они самые терпеливые собеседники на свете – никогда не осуждают ошибки и всегда рады попробовать снова! + +Сегодня мы изучим невероятные инструменты, которые делают современную веб-разработку не просто возможной, а по-настоящему захватывающей. Я говорю о тех же редакторах, браузерах и рабочих процессах, которыми пользуются разработчики Netflix, Spotify и твоей любимой инди-студии. И вот что заставит тебя устроить счастливый танец: большинство этих профессиональных, индустриальных инструментов — абсолютно бесплатны! ![Intro Programming](../../../../translated_images/ru/webdev101-programming.d6e3f98e61ac4bff.webp) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Ваш путь в программировании сегодня - section Открывать + title Ваше программирование сегодня + section Discover Что такое программирование: 5: You Языки программирования: 4: You Обзор инструментов: 5: You - section Изучать + section Explore Редакторы кода: 4: You - Браузеры и инструменты разработчика: 5: You + Браузеры и DevTools: 5: You Командная строка: 3: You - section Практиковаться - Детектив языков: 4: You - Исследование инструментов: 5: You + section Practice + Детектив языка: 4: You + Изучение инструментов: 5: You Связь с сообществом: 5: You ``` -## Давай узнаем, что ты уже знаешь! +## Давай посмотрим, что ты уже знаешь! -Прежде чем перейти к развлечениям, мне интересно — что ты уже знаешь о мире программирования? И слушай, если при взгляде на эти вопросы ты думаешь: «У меня абсолютно ноль понятия обо всём этом», это не просто нормально, это идеально! Значит, ты в самом правильном месте. Считай этот тест как разминку перед тренировкой — просто разогреваем мозговые мышцы! +Прежде чем прыгать в весёлое, мне интересно — что ты уже знаешь об этом программном мире? И слушай, если ты читаешь эти вопросы и думаешь «я вообще ничего не понимаю», это не просто нормально — это отлично! Значит, ты в точности в нужном месте. Представь, что этот тест — как разминка перед тренировкой — мы просто разогреваем мозговые мышцы! -[Пройти пре-уроковый тест](https://ff-quizzes.netlify.app/web/) +[Пройти предурочный тест](https://ff-quizzes.netlify.app/web/) -## Приключение, которое мы начинаем вместе +## Приключение, на которое мы собираемся отправиться вместе -Хорошо, я действительно радуюсь и бьюсь в дрожь от того, что мы сегодня будем изучать! Серьёзно, хотел бы я видеть твоё лицо, когда какие-то концепции прямо «щелкнут». Вот наше невероятное путешествие: +Ладно, я искренне не могу усидеть на месте от того, что мы собираемся исследовать сегодня! Серьёзно, хотелось бы увидеть твоё лицо, когда некоторые из этих концепций щёлкнут. Вот удивительное путешествие, в которое мы отправляемся вместе: -- **Что такое программирование на самом деле (и почему это самая крутая вещь!)** — мы узнаем, как код — это буквально невидимая магия, которая запускает всё вокруг, начиная от будильника, который почему-то знает, что сегодня понедельник, и заканчивая алгоритмом, который подбирает тебе идеальные рекомендации Netflix. -- **Языки программирования и их удивительные личности** — представь, что ты приходишь на вечеринку, где каждый человек обладает совершенно разными суперспособностями и способами решения проблем. Таков мир языков программирования, и тебе понравится их знакомство! -- **Основные строительные блоки, создающие цифровую магию** — подумай об этом, как об идеальном творческом наборе LEGO. Когда ты поймёшь, как эти элементы сочетаются, осознаешь, что можешь построить буквально всё, что вздумается воображению. -- **Профессиональные инструменты, которые заставят тебя почувствовать, что тебе только что вручили волшебную палочку** — я не шучу — эти инструменты действительно заставят тебя почувствовать, что у тебя суперспособности, и самое классное? Это те же самые инструменты, что используют профи! +- **Что такое программирование на самом деле (и почему это самая классная вещь!)** – Мы узнаем, как код буквально является невидимой магией, которая управляет всем вокруг, от будильника, который каким-то образом знает, что сейчас понедельник, до алгоритма, идеально подбирающего рекомендации в Netflix +- **Языки программирования и их уникальные личности** – Представь, что приходишь на вечеринку, где у каждого гостя совершенно разные суперспособности и способы решения задач. Вот таков мир языков программирования, и ты полюбишь знакомство с ними! +- **Основные кирпичики, из которых строится цифровое волшебство** – Подумай об этом, как о самом крутом наборе LEGO для творчества. Как только поймёшь, как эти кусочки соединяются, ты осознаешь, что можешь построить буквально всё, что придёт в твоё воображение +- **Профессиональные инструменты, с которыми ты почувствуешь себя обладателем волшебной палочки** – Я не шучу — эти инструменты действительно заставят тебя почувствовать себя супергероем, а самое классное? Это те самые, что используют профессионалы! -> 💡 **Вот в чём дело**: даже не пытайся сегодня всё запомнить! Сейчас я лишь хочу, чтобы тебя вдохновило то, что возможно. Детали закрепятся сами собой, когда мы будем практиковаться вместе — именно так происходит настоящее обучение! +> 💡 **Вот в чём дело**: Не пытайся запомнить всё сегодня! Сейчас я хочу, чтобы ты почувствовал искру интереса к возможностям. Детали закрепятся сами по мере практики — вот как происходит настоящее обучение! > Ты можешь пройти этот урок на [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((Языки программирования)) Web Development JavaScript - Магия фронтенда - Интерактивные веб-сайты + Волшебство фронтенда + Интерактивные сайты TypeScript JavaScript + Типы Корпоративные приложения @@ -103,17 +103,17 @@ mindmap Mobile Apps Java Android - Корпоративные + Корпоративный Swift iOS Экосистема Apple Kotlin Современный Android - Кроссплатформенность + Кроссплатформенный Systems & Performance C++ Игры - Критичные по производительности + Критичные к производительности Rust Безопасность памяти Системное программирование @@ -121,41 +121,41 @@ mindmap Облачные сервисы Масштабируемый бэкенд ``` -| Язык | Лучшее применение | Почему популярен | +| Язык | Лучше всего подходит для | Почему популярен | |----------|----------|------------------| -| **JavaScript** | Веб-разработка, пользовательские интерфейсы | Работает в браузерах и поддерживает интерактивные сайты | +| **JavaScript** | Веб-разработка, интерфейсы пользователей | Работает в браузерах, оживляет сайты | | **Python** | Наука о данных, автоматизация, ИИ | Легко читать и учить, мощные библиотеки | -| **Java** | Корпоративные приложения, Android-приложения | Независим от платформы, надёжен для крупных систем | -| **C#** | Windows-приложения, разработка игр | Сильная поддержка экосистемы Microsoft | -| **Go** | Облачные сервисы, серверная часть | Быстрый, простой, создан для современной вычислительной техники | +| **Java** | Корпоративные приложения, Android-приложения | Независим от платформы, надёжен для больших систем | +| **C#** | Windows-приложения, разработка игр | Сильная поддержка в экосистеме Microsoft | +| **Go** | Облачные сервисы, бекенд-системы | Быстрый, простой, создан для современных вычислений | ### Языки высокого и низкого уровня -Честно, именно эта концепция взорвала мне мозг при первом знакомстве с программированием, так что расскажу аналогию, которая помогла мне её понять — надеюсь, она поможет и тебе! +Ладно, честно говоря, эта концепция сломала мне мозг, когда я только начинал, так что поделюсь аналогией, которая, наконец, заставила меня понять – очень надеюсь, что она поможет и тебе! -Представь, что ты приехал в страну, где не говоришь на языке, и отчаянно пытаешься найти туалет (мы туда все попадали, правда? 😅): +Представь, что ты в другой стране, где не говоришь на языке, и срочно нужно найти ближайший туалет (ну, мы все в такой ситуации оказывались, правда? 😅): -- **Языки низкого уровня** — это как если бы ты так хорошо изучил местный диалект, что можешь общаться с бабушкой, что торгует фруктами на углу, используя культурные отсылки, местный сленг и внутренние шутки, понятные только местным. Супер впечатляет и очень эффективно… если ты действительно свободно говоришь! Но довольно сложно, когда ты просто пытаешься найти туалет. +- **Языки низкого уровня** — это как знать местный диалект так хорошо, что ты можешь беседовать с бабушкой, продающей фрукты на углу, используя культурные ссылки, местный сленг и внутренние шутки, которые поймёт только тот, кто там вырос. Очень впечатляет и невероятно эффективно... если ты свободно говоришь! Но довольно сложно, когда просто хочешь найти туалет. -- **Языки высокого уровня** — это как если бы рядом был замечательный местный друг, который просто понимает тебя. Ты можешь сказать «Мне очень нужен туалет» на обычном английском, а он позаботится о культурном переводе и даст тебе понятные указания, подходящие для твоего неродного ума. +- **Языки высокого уровня** — это как иметь удивительного местного друга, который тебя понимает. Ты говоришь: «Мне реально нужно найти туалет» по-английски, а он уже делает всю культурную «переводческую работу» и даёт инструкции, понятные твоему чужестранному мозгу. -На языке программирования: -- **Языки низкого уровня** (например, Assembly или C) позволяют говорить с самим оборудованием компьютера невероятно подробно, но для этого нужно мыслить как машина, что... скажем так, довольно сильный сдвиг в мышлении! -- **Языки высокого уровня** (такие как JavaScript, Python или C#) позволяют думать как человек, в то время как они решают всю «машинную речь» за кулисами. Плюс у них есть невероятно дружелюбные сообщества, где много людей, которые помнят, каким страшным было быть новеньким, и искренне хотят помочь! +В терминах программирования: +- **Языки низкого уровня** (например, Ассемблер или C) позволяют вести очень подробные разговоры с самим «железом» компьютера, но требуют мыслить как машина, что... скажем так, большой ментальный сдвиг! +- **Языки высокого уровня** (например, JavaScript, Python или C#) позволяют думать как человек, а они берут на себя всю машинную лексику за кулисами. К тому же у них невероятно дружелюбные сообщества, где помнят, как это быть новичком, и искренне хотят помочь! -Угадай, с чего я советую тебе начинать? 😉 Языки высокого уровня — как тренировочные колёса, которые ты на самом деле никогда не захочешь снимать, потому что они делают весь опыт намного приятнее! +Угадай, с чего я предлагаю начать? 😉 Языки высокого уровня – как вспомогательные колёсики, которые ты никогда не захочешь убирать, потому что они делают весь опыт гораздо приятнее! ```mermaid flowchart TB A["👤 Человеческая мысль:
'Я хочу вычислить числа Фибоначчи'"] --> B{Выбрать уровень языка} B -->|Высокий уровень| C["🌟 JavaScript/Python
Легко читать и писать"] - B -->|Низкий уровень| D["⚙️ Ассемблер/C
Прямое управление аппаратурой"] + B -->|Низкий уровень| D["⚙️ Ассемблер/C
Прямое управление оборудованием"] C --> E["📝 Написать: fibonacci(10)"] D --> F["📝 Написать: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Понимание компьютера:
Транслятор справляется со сложностью"] + E --> G["🤖 Понимание компьютера:
Переводчик справляется со сложностью"] F --> G G --> H["💻 Тот же результат:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,15 +164,15 @@ flowchart TB 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 // Шаг 1: Основная настройка Фибоначчи @@ -184,10 +184,10 @@ console.log('Fibonacci sequence:'); ``` **Вот что делает этот код:** -- **Объявляет** константу, чтобы указать, сколько чисел Фибоначчи мы хотим сгенерировать -- **Инициализирует** две переменные для отслеживания текущего и следующего чисел в последовательности -- **Устанавливает** стартовые значения (0 и 1), которые задают паттерн Фибоначчи -- **Выводит** заголовок для идентификации нашего результата +- **Объявляет** константу, указывающую, сколько чисел Фибоначчи нужно сгенерировать +- **Инициализирует** две переменные для отслеживания текущего и следующего числа в последовательности +- **Задаёт** стартовые значения (0 и 1), определяющие паттерн Фибоначчи +- **Выводит** заголовок, идентифицирующий наш вывод ```javascript // Шаг 2: Сгенерировать последовательность с помощью цикла @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Разбор того, что происходит далее:** -- **Перебирает** каждую позицию в последовательности с помощью цикла `for` -- **Выводит** каждое число с его позицией с использованием шаблонной строки -- **Вычисляет** следующее число Фибоначчи как сумму текущего и следующего -- **Обновляет** переменные для перехода к следующей итерации +**Разбор того, что происходит здесь:** +- **Проходит в цикле** по каждой позиции последовательности с помощью `for`-цикла +- **Выводит** каждое число с его позицией, используя шаблонные строки +- **Вычисляет** следующее число Фибоначчи, складывая текущие и следующие значения +- **Обновляет** переменные, переходя к следующему шагу цикла ```javascript // Шаг 3: Современный функциональный подход @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**В приведённом выше коде мы:** -- **Создали** переиспользуемую функцию, используя современный синтаксис стрелочных функций -- **Построили** массив для хранения всей последовательности вместо показа по одному числу -- **Использовали** индексацию массива, чтобы вычислять новое число на основе предыдущих -- **Вернули** полную последовательность для гибкого использования в других частях программы +**В приведённом коде мы:** +- **Создали** переиспользуемую функцию с помощью современного синтаксиса стрелочной функции +- **Построили** массив для хранения всей последовательности вместо вывода по одному числу +- **Использовали** индексацию массива для вычисления каждого нового числа на основе предыдущих +- **Вернули** всю последовательность для гибкого использования в других частях программы -**Язык низкого уровня (ARM Assembly) — компьютеро-дружелюбный:** +**Язык низкого уровня (ARM Assembly) – удобочитаемый машиной:** ```assembly area ascen,code,readonly @@ -257,74 +257,73 @@ back add r0,r1 end ``` -Обрати внимание, как версия на JavaScript читается почти как инструкция на английском, а версия на Assembly использует загадочные команды, которые управляют процессором напрямую. Оба решают одну и ту же задачу, но язык высокого уровня намного удобнее для понимания, написания и поддержки человеком. - -**Ключевые различия, которые ты заметишь:** -- **Читаемость**: JavaScript использует описательные имена, такие как `fibonacciCount`, в то время как Assembly использует загадочные метки, такие как `r0`, `r1` -- **Комментарии**: Языки высокого уровня поощряют объяснительные комментарии, которые делают код самодокументируемым -- **Структура**: Логический поток JavaScript совпадает с тем, как люди думают о проблемах шаг за шагом -- **Поддержка**: Обновление версии на JavaScript для разных требований простое и понятное +Обрати внимание, как версия на JavaScript читается почти как инструкции на английском, в то время как версия на Ассемблере использует загадочные команды, напрямую управляющие процессором компьютера. Обе выполняют одну и ту же задачу, но язык высокого уровня гораздо проще для человека – его легче понять, писать и поддерживать. -✅ **О последовательности Фибоначчи**: Эта абсолютно красивая числовая последовательность (где каждое число равно сумме двух предыдущих: 0, 1, 1, 2, 3, 5, 8...) встречается буквально *везде* в природе! Вы найдете её в спиралях подсолнуха, узорах шишек, изгибах раковины наутилуса и даже в том, как растут ветви деревьев. Впечатляет, как математика и код могут помочь нам понять и воссоздать узоры, которые природа использует для создания красоты! +**Ключевые отличия, которые ты заметишь:** +- **Читаемость**: JavaScript использует описательные имена, такие как `fibonacciCount`, тогда как Assembly использует криптичные метки типа `r0`, `r1` +- **Комментарии**: Языки высокого уровня поощряют объясняющие комментарии, которые делают код само-документируемым +- **Структура**: Логический поток JavaScript совпадает с тем, как человек шаг за шагом думает над задачей +- **Поддержка**: Обновлять JavaScript-вариант для разных требований просто и понятно +✅ **О последовательности Фибоначчи**: Эта абсолютно великолепная числовая последовательность (где каждое число равно сумме двух предыдущих: 0, 1, 1, 2, 3, 5, 8...) встречается буквально *повсюду* в природе! Вы найдете её в спиралях подсолнечника, в рисунках шишек, в изгибах раковин наутилуса и даже в том, как растут ветви деревьев. Просто поражает, как математика и код помогают понять и воспроизвести закономерности, которые природа использует для создания красоты! -## Строительные блоки, которые создают магию +## Строительные блоки, создающие магию -Итак, теперь, когда вы увидели, как выглядят языки программирования на практике, давайте разберём основные элементы, которые составляют буквально каждую написанную программу. Представьте их как базовые ингредиенты вашего любимого рецепта – как только вы поймёте, что делает каждый из них, вы сможете читать и писать код практически на любом языке! +Итак, теперь, когда вы увидели, как выглядят языки программирования в действии, давайте разберем основные элементы, из которых состоит буквально каждая написанная программа. Представьте их как основные ингредиенты вашего любимого рецепта — когда вы поймете, что делает каждый из них, вы сможете читать и писать код почти на любом языке! -Это похоже на изучение грамматики программирования. Помните, как в школе учили существительные, глаголы и как строить предложения? Программирование имеет свою грамматику, и честно говоря, она намного логичнее и снисходительнее, чем английская! 😄 +Это как изучение грамматики программирования. Помните, как в школе учились существительным, глаголам и составлению предложений? У программирования есть своя «грамматика», и честно говоря, она гораздо логичнее и снисходительнее, чем английская! 😄 -### Инструкции: пошаговые команды +### Операторы: Инструкции шаг за шагом -Начнём с **инструкций** — это как отдельные предложения в разговоре с вашим компьютером. Каждая инструкция говорит компьютеру сделать одну конкретную вещь, почти как указания: «Поверни налево здесь», «Стой на красный свет», «Запаркуйся там». +Начнем с **операторов** — это как отдельные предложения в разговоре с вашим компьютером. Каждый оператор говорит компьютеру сделать что-то конкретное, словно давая указания: «Поверни налево здесь», «Остановись на красный свет», «Припаркуйся на том месте». -Мне нравится, как обычно читается код с инструкциями. Посмотрите: +Что мне нравится в операторах, так это то, как они обычно читаются. Посмотрите на это: ```javascript -// Основные операторы, выполняющие отдельные действия +// Основные операторы, выполняющие одиночные действия const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Вот что делает этот код:** -- **Объявляет** константную переменную для хранения имени пользователя -- **Отображает** приветственное сообщение в консоли -- **Вычисляет** и сохраняет результат математической операции + +**Что делает этот код:** +- **Объявляет** константную переменную для хранения имени пользователя +- **Выводит** приветственное сообщение в консоль +- **Вычисляет** и сохраняет результат математической операции ```javascript -// Операторы, взаимодействующие с веб-страницами +// Операторы, которые взаимодействуют с веб-страницами document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` + +**По шагам, что происходит:** +- **Изменяет** заголовок страницы, отображаемый во вкладке браузера +- **Меняет** цвет фона всего тела страницы -**Шаг за шагом, вот что происходит:** -- **Изменяет** заголовок страницы, который отображается во вкладке браузера -- **Меняет** цвет фона всего тела страницы - -### Переменные: память вашей программы +### Переменные: Память вашей программы -Хорошо, **переменные** — честно, одна из моих абсолютных любимых концепций для обучения, потому что они очень похожи на вещи, которые вы уже используете каждый день! +Хорошо, **переменные** — честно говоря, одна из моих любимых тем для объяснения, потому что они очень похожи на то, что вы используете ежедневно! -Подумайте о списке контактов на вашем телефоне. Вы не запоминаете номера всех — вместо этого сохраняете «Мама», «Лучший друг» или «Пиццерия, которая доставляет до 2 ночи», а телефон запоминает номера. Переменные работают точно так же! Они – как подписанные контейнеры, где ваша программа может хранить информацию и потом получать к ней доступ по понятному имени. +Подумайте на секунду о контактной книге на вашем телефоне. Вы не запоминаете все номера наизусть — вместо этого сохраняете «Мама», «Лучший друг» или «Пиццерия с доставкой до 2 ночи», а телефон помнит реальные номера. Переменные — это то же самое! Это как именованные контейнеры, где программа может хранить информацию и позже извлекать её по имени, которое действительно имеет смысл. -Вот что действительно круто: переменные могут изменяться во время выполнения программы (отсюда и название «переменная» – видите, что сделали?). Так же, как вы можете обновить контакт пиццерии, когда находите место получше, переменные могут обновляться, когда программа узнаёт новую информацию или ситуация меняется! +Самое классное: переменные могут изменяться во время работы программы (отсюда и название «переменная» — видите, что тут задумали?). Как вы обновляете контакт пиццерии, если находите лучшее место, так и переменные могут обновляться, когда программа получает новую информацию или меняются обстоятельства! -Позвольте показать, насколько это просто: +Покажу, как это просто и красиво: ```javascript -// Шаг 1: Создание основных переменных +// Шаг 1: Создание базовых переменных const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Понимание этих концепций:** -- **Храните** неизменяемые значения в `const` переменных (например, название сайта) -- **Используйте** `let` для значений, которые могут меняться в процессе работы программы -- **Присваивайте** разные типы данных: строки (текст), числа и булевы значения (true/false) -- **Выбирайте** описательные имена, которые объясняют, что хранит каждая переменная + +**Понимаем концепцию:** +- **Хранить** неизменяемые значения с помощью `const` (например, название сайта) +- **Использовать** `let` для значений, меняющихся в ходе программы +- **Присваивать** разные типы данных — строки (текст), числа, булевые значения (true/false) +- **Выбирать** описательные имена, объясняющие содержимое переменной ```javascript // Шаг 2: Работа с объектами для группировки связанных данных @@ -334,11 +333,11 @@ const weatherData = { windSpeed: 12 }; ``` - -**В приведённом выше примере мы:** -- **Создали** объект для группировки связанных данных о погоде -- **Организовали** несколько кусков данных под одним именем переменной -- **Использовали** пары ключ-значение для чёткого обозначения каждой информации + +**В этом примере мы:** +- **Создали** объект для объединения связанных данных о погоде +- **Организовали** множество данных под одним именем переменной +- **Использовали** пары ключ-значение для четкой маркировки каждой части информации ```javascript // Шаг 3: Использование и обновление переменных @@ -349,33 +348,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`); currentWeather = "cloudy"; temperature = 68; ``` - -**Давайте разберём каждую часть:** -- **Отображаем** информацию с помощью шаблонных строк и синтаксиса `${}` -- **Получаем доступ** к свойствам объекта через точечную нотацию (`weatherData.windSpeed`) -- **Обновляем** переменные, объявленные с помощью `let`, чтобы отражать меняющиеся условия -- **Объединяем** несколько переменных для создания осмысленных сообщений + +**Поясним каждый элемент:** +- **Выводить** информацию с помощью шаблонных литералов и синтаксиса `${}` +- **Обращаться** к свойствам объекта с помощью точечной нотации (`weatherData.windSpeed`) +- **Обновлять** переменные, объявленные через `let`, чтобы отражать изменения +- **Комбинировать** несколько переменных для создания осмысленных сообщений ```javascript // Шаг 4: Современное деструктурирование для более чистого кода const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**Что важно знать:** +- **Извлекать** конкретные свойства из объектов с помощью деструктуризации +- **Создавать** новые переменные с такими же именами, как у ключей объекта +- **Упрощать** код, избегая повторного обращения через точку -**Что нужно знать:** -- **Извлекайтe** конкретные свойства из объектов с помощью деструктуризации -- **Создавайте** новые переменные автоматически с теми же именами, что и ключи объекта -- **Упрощайте** код, избегая повторяющейся точечной нотации - -### Управление потоком: учим программу думать +### Управление потоком: Учим программу думать -Хорошо, здесь программирование становится по-настоящему удивительным! **Управление потоком** — это, по сути, обучение вашей программы принимать умные решения, именно так, как вы делаете это каждый день, не задумываясь. +А теперь начинается самое удивительное! **Управление потоком** — это обучение вашей программы принимать умные решения, так же как вы делаете это каждый день, не задумываясь. -Представьте, что сегодня утром вы скорее всего подумали: «Если идёт дождь, возьму зонт. Если холодно — надену куртку. Если опаздываю — пропущу завтрак и возьму кофе по пути». Ваш мозг естественным образом следует этой логике «если-то» десятки раз в день! +Представьте: утром вы думаете «Если идет дождь, возьму зонт. Если холодно — надену куртку. Если опаздываю — пропущу завтрак и возьму кофе с собой». Ваш мозг автоматически применяет такую логику if-then десятки раз в день! -Вот что делает программы умными и живыми, а не просто скучным исполнением предсказуемого сценария. Они могут реально смотреть на ситуацию, оценивать происходящее и отвечать соответственно. Это как дать программе мозг, который может адаптироваться и принимать решения! +Именно это делает программы умными и живыми, а не просто выполняющими скучный, предсказуемый сценарий. Они смотрят на ситуацию, оценивают, что происходит, и отвечают адекватно. Это как дать программе мозг, который может адаптироваться и принимать решения! -Хотите увидеть, как это здорово работает? Позвольте показать: +Хочешь увидеть, как это здорово работает? Посмотри: ```javascript // Шаг 1: Основная условная логика @@ -388,12 +387,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Этот код делает следующее:** -- **Проверяет**, соответствует ли возраст пользователя требованиям для голосования -- **Выполняет** разные блоки кода в зависимости от результата условия -- **Рассчитывает** и показывает, сколько осталось до возможности голосовать, если пользователь младше 18 -- **Предоставляет** конкретную, полезную обратную связь для каждой ситуации + +**Что делает этот код:** +- **Проверяет**, соответствует ли возраст пользователя требованиям для голосования +- **Выполняет** разные блоки кода в зависимости от результата проверки +- **Вычисляет** и выводит, сколько осталось до получения права голосовать, если меньше 18 +- **Предоставляет** конкретную, полезную обратную связь для каждого случая ```javascript // Шаг 2: Несколько условий с логическими операторами @@ -408,23 +407,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Разберём, что происходит здесь:** -- **Комбинирует** несколько условий с помощью оператора `&&` (и) -- **Создаёт** иерархию условий с использованием `else if` для нескольких сценариев -- **Обрабатывает** все возможные случаи с помощью финального `else` -- **Предоставляет** ясную и полезную обратную связь для каждой ситуации + +**Разбор происходящего:** +- **Комбинирует** несколько условий с помощью оператора `&&` (и) +- **Создает** иерархию условий с помощью `else if` для нескольких сценариев +- **Обрабатывает** все возможные случаи с помощью заключительного `else` +- **Дает** понятные и полезные рекомендации для каждого варианта ```javascript // Шаг 3: Краткое условие с тернарным оператором const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Что надо запомнить:** -- **Используйте** тернарный оператор (`? :`) для простых условий с двумя вариантами -- **Пишите** условие сначала, затем `?`, потом результат для true, потом `:`, затем результат для false -- **Применяйте** этот шаблон для присвоения значений на основе условий + +**Что важно запомнить:** +- **Использовать** тернарный оператор (`? :`) для простых условий с двумя вариантами +- **Писать** условие сначала, потом `?`, далее результат при true, затем `:`, и результ при false +- **Применять** этот синтаксис для присвоения значений на основе условий ```javascript // Шаг 4: Обработка нескольких конкретных случаев @@ -446,56 +445,56 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**Этот код делает следующее:** +- **Сравнивает** значение переменной с несколькими конкретными случаями +- **Группирует** похожие случаи (будни и выходные) +- **Выполняет** соответствующий блок кода при совпадении +- **Использует** `default` для обработки неожиданных значений +- **Применяет** `break`, чтобы не переходить к следующему случаю неправомерно -**Этот код выполняет следующее:** -- **Сравнивает** значение переменной с несколькими конкретными случаями -- **Группирует** похожие случаи вместе (будние дни против выходных) -- **Выполняет** соответствующий блок кода при совпадении -- **Включает** `default` для обработки неожиданных значений -- **Использует** `break` для предотвращения продолжения к следующему случаю - -> 💡 **Реальный пример**: Представьте, что управление потоком — это как самый терпеливый GPS в мире, который даёт вам указания. Он может сказать: «Если на Главной улице пробка, езжайте по шоссе. Если шоссе перекрыто строительством, выберите живописный маршрут». Программы используют тот же тип условной логики, чтобы умно реагировать на разные ситуации и всегда обеспечивать лучший пользовательский опыт. +> 💡 **Реальная аналогия**: Управление потоком похоже на самый терпеливый GPS в мире, который говорит: «Если на Главной улице пробка, поезжайте по шоссе. Если шоссе заблокировано стройкой, выберите живописный маршрут». Программы используют такую же условную логику, чтобы разумно реагировать на разные ситуации и всегда давать пользователям лучший опыт. -### 🎯 **Проверка знаний: Мастерство строительных блоков** +### 🎯 **Проверка знаний: Мастерство базовых блоков** -**Давайте проверим, как вы усвоили основы:** -- Можете ли вы своими словами объяснить разницу между переменной и инструкцией? -- Придумайте реальный пример, где бы вы использовали условие if-then (как в нашем примере с голосованием) -- Что из логики программирования вас удивило больше всего? +**Проверим, как вы поняли основы:** +- Можете ли вы объяснить разницу между переменной и оператором своими словами? +- Придумайте реальный пример, где используете if-then решение (например, наш пример с голосованием) +- Что в логике программирования вас удивило больше всего? -**Быстрый заряд уверенности:** +**Небольшой заряд уверенности:** ```mermaid flowchart LR - A["📝 Операторы
(Инструкции)"] --> B["📦 Переменные
(Хранение)"] --> C["🔀 Управление потоком
(Решения)"] --> D["🎉 Рабочая программа!"] + A["📝 Операторы
(Инструкции)"] --> B["📦 Переменные
(Хранилище)"] --> C["🔀 Управление Потоком
(Решения)"] --> D["🎉 Рабочая программа!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **Что будет дальше**: Мы с огромным удовольствием погрузимся глубже в эти концепции, продолжая это невероятное путешествие вместе! А пока просто сосредоточьтесь на том волнении от всех удивительных возможностей впереди. Специфические навыки и техники придут естественно по мере практики — обещаю, это будет гораздо веселее, чем вы ожидаете! +``` +✅ **Что будет дальше**: Мы собираемся с огромным удовольствием углубиться в эти концепции и продолжить это невероятное путешествие вместе! Сейчас просто наслаждайтесь предвкушением всех удивительных возможностей впереди. Конкретные навыки и техники обязательно закрепятся естественным путём, пока мы практикуемся — обещаю, это будет гораздо веселее, чем вы ожидаете! ## Инструменты профессии -Итак, честно говоря, сейчас я так взволнован, что еле сдерживаюсь! 🚀 Сейчас мы поговорим о невероятных инструментах, которые заставят вас почувствовать, будто вам только что вручили ключи от цифрового космического корабля. +Итак, вот тут я просто не могу сдержать свой восторг! 🚀 Сейчас мы поговорим о потрясающих инструментах, которые заставят вас почувствовать, будто вам только что вручили ключи от цифрового космического корабля. -Вы знаете, как у шеф-повара есть идеально сбалансированные ножи, которые кажутся продолжением его рук? Или как у музыканта есть гитара, которая начинает петь, как только он к ней прикасается? У разработчиков тоже есть свои волшебные инструменты, и вот что вас по-настоящему ошеломит — большая часть из них абсолютно бесплатна! +Знаете, у повара есть идеальные ножи, которые словно продолжение его рук? Или у музыканта есть гитара, которая начинает петь с первого прикосновения? У разработчиков тоже есть свои волшебные инструменты, и вот что вас точно удивит — большинство из них абсолютно бесплатные! -Я буквально подпрыгиваю от нетерпения поделиться ими с вами, потому что эти инструменты полностью изменили то, как мы создаём софт. Речь идёт об помощниках на основе ИИ, которые помогают писать код (и это не шутка!), облачных средах, где можно создавать целые приложения буквально из любой точки с Wi-Fi, и инструментах отладки настолько продвинутых, что это как иметь рентгеновское зрение для ваших программ. +Я просто прыгаю от нетерпения, чтобы рассказать вам о них, потому что они полностью изменили подход к созданию ПО. Речь идёт об ИИ-помощниках в кодировании, которые могут помогать писать код (я не шучу!), облачных средах, где можно создавать приложения из любой точки с Wi-Fi, и мощных средствах отладки, которые словно дают рентгеновское зрение вашим программам. -И вот что до сих пор приводит меня в восторг: это не просто «начинающие» инструменты, которые вы перерастёте. Это те же профессиональные средства, что используют разработчики из Google, Netflix и той независимой студии, что вам нравится, здесь и сейчас. Вы почувствуете себя настоящим профи, используя их! +И вот что до сих пор вызывает мурашки по коже: это вовсе не инструменты для начинающих, от которых быстро откажешься. Это те же профессиональные инструменты, которыми пользуются разработчики из Google, Netflix и той инди-студии, которую вы любите, прямо в этот самый момент. Вы будете чувствовать себя настоящим профи, используя их! ```mermaid graph TD - A["💡 Ваша Идея"] --> B["⌨️ Редактор Кода
(VS Code)"] - B --> C["🌐 Инструменты Браузера
(Тестирование и Отладка)"] - C --> D["⚡ Командная Строка
(Автоматизация и Инструменты)"] - D --> E["📚 Документация
(Обучение и Справка)"] - E --> F["🚀 Потрясающее Веб-приложение!"] + A["💡 Ваша идея"] --> B["⌨️ Редактор кода
(VS Code)"] + B --> C["🌐 Инструменты разработчика браузера
(Тестирование и отладка)"] + C --> D["⚡ Командная строка
(Автоматизация и инструменты)"] + D --> E["📚 Документация
(Обучение и справка)"] + E --> F["🚀 Потрясающее веб-приложение!"] - B -.-> G["🤖 AI Ассистент
(GitHub Copilot)"] - C -.-> H["📱 Тестирование Устройств
(Адаптивный Дизайн)"] - D -.-> I["📦 Менеджеры Пакетов
(npm, yarn)"] + B -.-> G["🤖 AI помощник
(GitHub Copilot)"] + C -.-> H["📱 Тестирование устройств
(Адаптивный дизайн)"] + D -.-> I["📦 Менеджеры пакетов
(npm, yarn)"] E -.-> J["👥 Сообщество
(Stack Overflow)"] style A fill:#fff59d @@ -504,97 +503,96 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### Редакторы кода и IDE: ваши новые цифровые лучшие друзья +``` +### Редакторы кода и IDE: Ваши новые цифровые друзья -Поговорим о редакторах кода — они буквально станут вашим новым любимым местом! Представьте их как личное святилище программирования, где вы будете проводить большую часть времени, создавая и совершенствуя свои цифровые творения. +Поговорим о редакторах кода — они скоро станут вашими любимыми местами для работы! Представьте их личным святилищем программиста, где вы проводите большую часть времени, создавая и совершенствуя свои цифровые творения. -Но вот что по-настоящему волшебно в современных редакторах: это не просто красивые текстовые редакторы. Это как самый блестящий и поддерживающий наставник по программированию, сидящий рядом с вами круглосуточно. Они ловят опечатки ещё до того, как вы их заметите, предлагают улучшения, которые заставят вас выглядеть гением, помогают понять, что делает каждая строчка кода, а некоторые даже предугадывают, что вы собираетесь написать, и предлагают дополнить ваши мысли! +Но вот что действительно волшебно в современных редакторах: они не просто красивые текстовые редакторы. Это как самый умный и поддерживающий наставник по программированию, сидящий рядом с вами 24/7. Они находят ваши опечатки ещё до того, как вы их заметите, предлагают улучшения, которые делают вас гением, помогают понять, что делает каждая строчка кода, а некоторые даже могут предсказать, что вы собираетесь написать, и предлагают дополнить ваши мысли! -Я помню, как впервые открыл для себя автодополнение — я буквально почувствовал, что живу в будущем. Начинаешь печатать, и редактор такой: «Эй, ты, наверное, хотел использовать эту функцию, которая делает как раз то, что нужно?» Это как иметь друга, который читает мысли во время кодинга! +Я помню, когда впервые открыл автодополнение — казалось, я живу в будущем. Начинаешь что-то писать, а редактор говорит: «Ты, случайно, не хотел использовать вот эту функцию, которая идеально подходит?» Это словно иметь спутника с телепатическими способностями! -**Что делает эти редакторы такими невероятными?** +**Почему эти редакторы такие невероятные?** -Современные редакторы предлагают впечатляющий набор функций, направленных на повышение вашей продуктивности: +Современные редакторы кода предлагают впечатляющий набор функций, призванных повысить вашу продуктивность: -| Функция | Что делает | Зачем нужна | -|---------|------------|-------------| -| **Подсветка синтаксиса** | Красит разные части кода | Делает код проще для чтения и поиска ошибок | -| **Автодополнение** | Предлагает код по мере набора | Ускоряет программирование и снижает количество опечаток | -| **Инструменты отладки** | Помогают находить и исправлять ошибки | Экономит часы на поиске проблем | +| Особенность | Что делает | Зачем нужна | +|-------------|------------|-------------| +| **Подсветка синтаксиса** | Раскрашивает разные части кода | Делает код легче читаемым и помогает находить ошибки | +| **Автодополнение** | Предлагает код во время набора | Ускоряет кодирование и уменьшает опечатки | +| **Инструменты отладки** | Помогают искать и исправлять ошибки | Экономят часы на поиске проблем | | **Расширения** | Добавляют специализированные функции | Настраивают редактор под любую технологию | -| **Ассистенты на базе ИИ** | Предлагают код и объяснения | Ускоряют обучение и повышают эффективность | +| **ИИ-ассистенты** | Предлагают код и пояснения | Ускоряют обучение и работу | -> 🎥 **Видео ресурс**: Хотите увидеть эти инструменты в действии? Посмотрите [видео “Tools of the Trade”](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) — проверка орфографии в коде - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (платно, бесплатно для студентов) -- Продвинутые инструменты отладки и тестирования -- Интеллектуальное автодополнение кода -- Встроенная система контроля версий +**[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) — поиск опечаток в коде -**Облачные IDE** (разные цены) -- [GitHub Codespaces](https://github.com/features/codespaces) — полноценный VS Code в браузере -- [Replit](https://replit.com/) — отлично подходит для обучения и обмена кодом -- [StackBlitz](https://stackblitz.com/) — мгновенная разработка веб-приложений full-stack +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Платно, бесплатно для студентов) +- Продвинутые инструменты отладки и тестирования +- Интеллектуальное автодополнение +- Встроенный контроль версий -> 💡 **Совет для начала**: Начинайте с Visual Studio Code — это бесплатно, широко используется в индустрии и имеет огромную сообщество с полезными туториалами и расширениями. +**Облачные IDE** (Разные цены) +- [GitHub Codespaces](https://github.com/features/codespaces) — полнофункциональный VS Code в браузере +- [Replit](https://replit.com/) — отлично подходит для обучения и обмена кодом +- [StackBlitz](https://stackblitz.com/) — мгновенная полнофункциональная веб-разработка +> 💡 **Совет новичку**: Начните с Visual Studio Code — бесплатно, широко используется в индустрии и поддерживается огромным сообществом с множеством полезных руководств и расширений. -### Веб-браузеры: ваша секретная лаборатория разработки +### Веб-браузеры: Ваша секретная лаборатория разработчика -Хорошо, приготовьтесь к тому, что ваш мозг будет взорван! Вы знаете, что вы используете браузеры, чтобы листать соцсети и смотреть видео? Оказывается, они всё это время прятали невероятную секретную лабораторию разработчика, которая просто ждала, чтобы вы её обнаружили! +Приготовьтесь, ум просто взорвётся! Вы ведь привыкли использовать браузеры, чтобы листать соцсети и смотреть видео, верно? Так вот, оказывается, все это время они скрывали невероятную секретную лабораторию для разработчиков, которую вы только что готовы открыть! -Каждый раз, когда вы кликаете правой кнопкой мыши на веб-странице и выбираете «Просмотр кода» или «Инспектировать элемент», вы открываете скрытый мир инструментов разработчика, которые честно говоря мощнее, чем некоторые дорогие программы, за которые я раньше платил сотни долларов. Это как понять, что ваша обычная кухня на самом деле скрывает лабораторию профессионального шефа за тайной дверью! -Впервые, когда кто-то показал мне DevTools в браузере, я потратил около трёх часов просто кликая и восклицая: «ПОДОЖДИ, ОН ЕЩЁ И ЭТО МОЖЕТ?!» Ты буквально можешь редактировать любой сайт в реальном времени, видеть, как быстро всё загружается, тестировать, как твой сайт выглядит на разных устройствах, и даже отлаживать JavaScript, как настоящий профи. Это просто потрясающе! +Каждый раз, когда вы кликаете правой кнопкой мыши на странице и выбираете «Просмотреть элемент», вы открываете скрытый мир инструментов разработчика, которые по мощи превосходят даже дорогостоящие программы, за которые я раньше платил сотни долларов. Это словно обнаружить, что ваша обычная кухня на самом деле прячет лабораторию шеф-повара за секретной панелью! +Впервые, когда кто-то показал мне инструменты разработчика в браузере, я потратил около трёх часов, просто кликая и восклицая: «СТОЙ, ЭТО ТАК ЖЕ МОЖНО?!» Ты буквально можешь редактировать любой сайт в реальном времени, видеть, насколько быстро всё загружается, тестировать, как выглядит твой сайт на разных устройствах, и даже отлаживать JavaScript, как настоящий профи. Это просто поражает! **Вот почему браузеры — ваше секретное оружие:** -Когда вы создаёте сайт или веб-приложение, вам нужно видеть, как оно выглядит и ведёт себя в реальной среде. Браузеры не только отображают вашу работу, но и предоставляют подробную обратную связь о производительности, доступности и возможных проблемах. +Когда вы создаёте веб-сайт или веб-приложение, вам нужно видеть, как оно выглядит и ведёт себя в реальном мире. Браузеры не просто отображают вашу работу, но и дают подробную обратную связь о производительности, доступности и возможных проблемах. -#### Инструменты разработчика браузера (DevTools) +#### Инструменты разработчика в браузере (DevTools) -Современные браузеры включают комплексные наборы инструментов: +Современные браузеры включают в себя комплексные наборы инструментов для разработки: | Категория инструмента | Что делает | Пример использования | -|-----------------------|------------|---------------------| -| **Инспектор элементов** | Просмотр и редактирование HTML/CSS в реальном времени | Настройка стиля с мгновенным результатом | +|---------------|--------------|------------------| +| **Инспектор элементов** | Просмотр и редактирование HTML/CSS в реальном времени | Настройка стилей с мгновенным результатом | | **Консоль** | Просмотр сообщений об ошибках и тестирование JavaScript | Отладка проблем и эксперименты с кодом | -| **Монитор сети** | Отслеживание загрузки ресурсов | Оптимизация производительности и времени загрузки | -| **Проверка доступности** | Тестирование инклюзивного дизайна | Гарантия работы сайта для всех пользователей | -| **Симулятор устройств** | Просмотр на разных размерах экранов | Тестирование отзывчивого дизайна без нескольких устройств | +| **Мониторинг сети** | Отслеживание загрузки ресурсов | Оптимизация производительности и времени загрузки | +| **Проверка доступности** | Тестирование инклюзивного дизайна | Обеспечение работы сайта для всех пользователей | +| **Симулятор устройств** | Просмотр на разных размерах экранов | Тестирование адаптивного дизайна без множества устройств | #### Рекомендуемые браузеры для разработки -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** — отраслевой стандарт DevTools с обширной документацией +- **[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 +- **[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-х, и я определённо не настолько умный для этого!» 😅 +Ладно, давайте на миг будем абсолютно честными насчёт командной строки, потому что я хочу, чтобы вы услышали это от человека, который действительно это понимает. Когда я впервые увидел её — просто чёрный пугающий экран с мигающим текстом — я буквально подумал: «Нет, ни за что! Это похоже на что-то из хакерского фильма 1980-х, и я точно недостаточно умен для этого!» 😅 -Но вот что я хотел бы, чтобы мне сказали тогда, и что говорю вам сейчас: командная строка не страшна — это как прямой разговор с вашим компьютером. Представьте, что это разница между заказом еды через крутое приложение с картинками и меню (что удобно и просто) и походом в ваш любимый местный ресторан, где шеф знает точно, что вы любите, и может приготовить что-то идеальное, просто сказав «удиви меня чем-то потрясающим». +Но вот что я хотел бы, чтобы мне тогда сказали, и что говорю вам сейчас: командная строка не страшная — это как вести прямой разговор с вашим компьютером. Представьте, что это как разница между заказом еды через удобное приложение с картинками и меню (это легко) и походом в ваш любимый местный ресторан, где шеф знает, что вам нравится, и может приготовить идеальное блюдо, просто услышав «удиви меня чем-то потрясающим». -Командная строка — это место, куда разработчики приходят, чтобы почувствовать себя настоящими волшебниками. Вы вводите несколько, казалось бы, волшебных слов (ну, это просто команды, но они кажутся волшебными!), нажимаете Enter, и БА-БАХ — вы создали целые структуры проектов, установили мощные инструменты со всего мира или развернули своё приложение в интернете для миллионов людей. Как только попробуете эту мощь, она становится по-настоящему затягивающей! +Командная строка — это место, где разработчики чувствуют себя настоящими волшебниками. Вы вводите несколько кажущихся волшебными слов (на самом деле это просто команды, но они действительно кажутся волшебными!), нажимаете Enter, и БАХ — вы создаёте целые проекты, устанавливаете мощные инструменты со всего мира или разворачиваете своё приложение в интернете для миллионов пользователей. Как только вы попробуете это, это действительно затягивает! **Почему командная строка станет вашим любимым инструментом:** -Хотя графические интерфейсы хороши для многих задач, командная строка превосходна в автоматизации, точности и скорости. Многие инструменты разработки работают именно через командную строку, и изучение эффективного использования значительно повысит вашу продуктивность. +Хотя графические интерфейсы хороши во многих задачах, командная строка отлично подходит для автоматизации, точности и скорости. Многие инструменты разработки работают преимущественно через командную строку, и умение эффективно использовать их значительно повысит вашу производительность. ```bash # Шаг 1: Создайте и перейдите в каталог проекта @@ -603,11 +601,11 @@ cd my-awesome-website ``` **Что делает этот код:** -- **Создаёт** новую папку с именем "my-awesome-website" для вашего проекта -- **Переходит** в только что созданную папку для начала работы +- **Создаёт** новую папку с названием "my-awesome-website" для вашего проекта +- **Переходит** в созданную папку, чтобы начать работу ```bash -# Шаг 2: Инициализируйте проект с package.json +# Шаг 2: Инициализация проекта с package.json npm init -y # Установите современные инструменты разработки @@ -616,170 +614,170 @@ 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 -# Шаг 3: Создать структуру проекта и файлы +# Шаг 3: Создайте структуру проекта и файлы mkdir src assets echo 'My Site

Hello World

' > index.html -# Запустить сервер разработки +# Запустите сервер разработки npx vite ``` **В итоге мы:** -- **Организовали** проект, создав отдельные папки для исходного кода и ресурсов +- **Организовали** проект, создав отдельные папки для исходного кода и ассетов - **Сгенерировали** базовый HTML-файл с правильной структурой документа -- **Запустили** сервер разработки Vite для живой перезагрузки и горячей замены модулей +- **Запустили** сервер разработки Vite для живой перезагрузки и хот-модульного обновления -#### Необходимые инструменты командной строки для веб-разработки +#### Важные инструменты командной строки для веб-разработки | Инструмент | Назначение | Зачем нужен | -|------------|------------|-------------| +|------|---------|-----------------| | **[Git](https://git-scm.com/)** | Контроль версий | Отслеживание изменений, совместная работа, резервное копирование | -| **[Node.js & npm](https://nodejs.org/)** | Среда выполнения JavaScript и менеджер пакетов | Запуск JavaScript вне браузера, установка современных инструментов разработки | -| **[Vite](https://vitejs.dev/)** | Инструмент сборки и dev-сервер | Молниеносная разработка с горячей заменой модулей | -| **[ESLint](https://eslint.org/)** | Качество кода | Автоматический поиск и исправление проблем в JavaScript | -| **[Prettier](https://prettier.io/)** | Форматирование кода | Поддержание единого и читаемого стиля кода | +| **[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)** — современный и функциональный терминал +- **[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 +- **[Командная строка](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 — традиционная командная строка Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 — встроенное терминальное приложение -- **[iTerm2](https://iterm2.com/)** — расширенный терминал с дополнительными функциями +- **[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)** — продвинутый эмулятор терминала -> 💻 = предустановлено в операционной системе +> 💻 = Предустановлено в операционной системе -> 🎯 **Путь обучения**: начните с базовых команд, таких как `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 -- Информация по кроссплатформенной разработке +- Ресурсы для разработки под браузер Edge +- Руководства по прогрессивным веб-приложениям +- Инсайты по кроссплатформенной разработке **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структурированные учебные курсы -- Видео от экспертов отрасли -- Практические задания по программированию +- Структурированные учебные программы +- Видеокурсы от экспертов индустрии +- Практические упражнения по программированию -> 📚 **Стратегия изучения**: не пытайтесь запомнить документацию — учитесь эффективно её использовать. Добавляйте в закладки часто используемые ссылки и учитесь быстро находить конкретную информацию через поиск. +> 📚 **Стратегия изучения**: Не пытайтесь запомнить документацию — учитесь эффективно её использовать. Закладывайте в закладки часто используемые справочники и тренируйтесь быстро находить нужную информацию с помощью поиска. -### 🔧 **Проверка мастерства: что вас больше всего заинтересовало?** +### 🔧 **Проверка мастерства работы с инструментами: что откликается вам?** -**Подумайте немного:** -- Какой инструмент вы больше всего хотите опробовать первым? (Правильного или неправильного ответа нет!) -- Командная строка всё ещё кажется пугающей или вы уже заинтересованы? -- Можете ли вы представить, как использовать DevTools браузера, чтобы заглянуть за кулисы ваших любимых сайтов? +**Подумайте на минуту:** +- Какой инструмент вам больше всего хочется попробовать первым? (Правильных или неправильных ответов нет!) +- Командная строка всё ещё кажется пугающей или вы заинтересованы в ней? +- Можете представить себя использующим DevTools браузера, чтобы заглянуть за кулисы ваших любимых сайтов? ```mermaid -pie title "Время разработчика, проведённое с инструментами" - "Редактор кода" : 40 - "Тестирование в браузере" : 25 - "Командная строка" : 15 - "Чтение документации" : 15 +pie title "Время Разработчика, Потраченное на Инструменты" + "Редактор Кода" : 40 + "Тестирование в Браузере" : 25 + "Командная Строка" : 15 + "Чтение Документации" : 15 "Отладка" : 5 ``` -> **Забавный факт**: большинство разработчиков проводят около 40% времени в своём редакторе кода, но обратите внимание, сколько времени уходит на тестирование, обучение и решение проблем. Программирование — это не только написание кода, это создание впечатлений! +> **Интересный факт**: большинство разработчиков проводят около 40% времени в редакторе кода, но заметьте, сколько времени уходит на тестирование, обучение и решение проблем. Программирование — это не только написание кода, но и создание впечатлений! -✅ **Пища для размышлений**: вот интересный вопрос — как вы думаете, чем инструменты для создания сайтов (разработка) отличаются от инструментов для их дизайна? Это как разница между архитектором, который проектирует красивый дом, и подрядчиком, который его строит. Оба важны, но у них разные наборы инструментов! Такое мышление поможет вам увидеть общую картину того, как рождаются сайты. +✅ **Пища для размышлений**: вот над чем стоит подумать — как вы думаете, чем инструменты для создания сайтов (разработка) отличаются от инструментов для их дизайна? Это как разница между архитектором, проектирующим красивый дом, и подрядчиком, который его строит. Оба важны, но инструменты у них разные! Такое мышление поможет вам лучше понять, как оживают сайты. -## Вызов GitHub Copilot Agent 🚀 +## Вызов от GitHub Copilot 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. Там много замечательных авторов, которые помнят, как это — только начинать. +- Подумайте о том, чтобы посетить локальные митапы или присоединиться к онлайн-сообществам. Поверьте, разработчики обожают помогать новичкам! -> 🎯 **Слушайте, что я хочу, чтобы вы запомнили**: от вас не ждут, что вы станете мастером программирования за одну ночь! Сейчас вы только знакомитесь с удивительным новым миром, частью которого скоро станете. Не спешите, наслаждайтесь путешествием и помните – каждый разработчик, которым вы восхищаетесь, когда-то сидел ровно там же, где и вы сейчас, чувствуя восторг и, возможно, немного растерянности. Это совершенно нормально и значит, что вы всё делаете правильно! +> 🎯 **Запомните главное**: от вас не ожидается стать асом программирования за одну ночь! Сейчас вы просто знакомитесь с этим удивительным новым миром, частью которого станете. Не спешите, наслаждайтесь процессом, и помните — каждый разработчик, которым вы восхищаетесь, когда-то сидел ровно там, где вы сейчас, испытывая восторг и, возможно, немного растерянности. Это абсолютно нормально, и значит, что вы на верном пути! @@ -787,70 +785,70 @@ pie title "Время разработчика, проведённое с инс [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, если еще не сделали этого +- [ ] Открыть DevTools в браузере (F12) и покликать по любому сайту +- [ ] Присоединиться к одному из сообществ программистов (Dev.to, Reddit r/webdev или Stack Overflow) -### ⏰ **Что вы можете успеть сделать за этот час** -- [ ] Пройти постурочное тестирование и обдумать полученные ответы +### ⏰ **Что можно успеть за этот час** +- [ ] Пройти викторину после урока и подумать над ответами - [ ] Настроить VS Code с расширением GitHub Copilot -- [ ] Попробовать пример «Hello World» на 2 разных языках программирования онлайн -- [ ] Посмотреть видео «День из жизни программиста» на YouTube -- [ ] Начать расследование по языкам программирования (из челленджа) +- [ ] Попробовать сделать пример «Hello World» на 2 разных языках программирования онлайн +- [ ] Посмотреть видео «День из жизни разработчика» на YouTube +- [ ] Начать своё детективное расследование о языках программирования (из вызова) ### 📅 **Ваше недельное приключение** -- [ ] Выполнить задание и изучить 3 новых инструмента для разработки -- [ ] Подписаться на 5 разработчиков или программных аккаунтов в соцсетях -- [ ] Попробовать создать что-то простое в CodePen или Replit (даже просто «Hello, [Ваше имя]!») -- [ ] Прочитать один блог пост разработчика о его пути в программировании +- [ ] Выполнить задание и исследовать 3 новых инструмента для разработки +- [ ] Подписаться на 5 разработчиков или аккаунтов о программировании в соцсетях +- [ ] Попробовать создать что-то маленькое в CodePen или Replit (даже просто «Hello, [Ваше имя]!») +- [ ] Прочитать один блог-пост разработчика о его пути в программировании - [ ] Присоединиться к виртуальному митапу или посмотреть доклад о программировании -- [ ] Начать изучать выбранный язык с помощью онлайн-уроков +- [ ] Начать изучать выбранный язык по онлайн-курсам -### 🗓️ **Ваше месячное преобразование** -- [ ] Создать свой первый небольшой проект (даже простая веб-страница считается!) -- [ ] Внести вклад в проект с открытым исходным кодом (начните с исправления документации) -- [ ] Наставлять того, кто только начал путь в программировании +### 🗓️ **Ваше месячное превращение** +- [ ] Сделать свой первый небольшой проект (даже простая веб-страница считается!) +- [ ] Внести вклад в open-source проект (начните с исправления документации) +- [ ] Помогать кому-то, кто только начинает свой путь в программировании - [ ] Создать свой сайт-портфолио разработчика -- [ ] Связаться с местными сообществами разработчиков или учебными группами -- [ ] Начать планировать следующую цель обучения +- [ ] Связаться с локальными сообществами разработчиков или учебными группами +- [ ] Начать планировать следующий этап обучения -### 🎯 **Итоговое размышление** +### 🎯 **Итоговая проверка размышлений** -**Прежде чем продолжить, уделите минуту празднованию:** -- Что в программировании сегодня вас больше всего вдохновило? +**Прежде чем продолжить, найдите время отпраздновать:** +- Что из программирования сегодня вас больше всего вдохновило? - Какой инструмент или концепцию вы хотите изучить в первую очередь? -- Какие у вас чувства по поводу начала этого пути в программировании? -- Какой вопрос вы хотели бы сейчас задать разработчику? +- Как вы относите себя к началу этого пути в программировании? +- Какой вопрос вы хотели бы задать разработчику прямо сейчас? ```mermaid journey - title Ваш путь к уверенности + title Ваш путь к укреплению уверенности section Сегодня - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You + Любопытство: 3: You + Перегруженность: 4: You + Взволнованность: 5: You section Эта неделя - Exploring: 4: You - Learning: 5: You - Connecting: 4: You + Исследование: 4: You + Обучение: 5: You + Общение: 4: You section Следующий месяц - Building: 5: You - Confident: 5: You - Helping Others: 5: You + Созидание: 5: You + Уверенность: 5: You + Помощь другим: 5: You ``` -> 🌟 **Помните**: каждый эксперт когда-то был новичком. Каждый опытный разработчик когда-то чувствовал то же, что и вы сейчас – волнение, возможно, небольшое замешательство и определённый интерес к возможностям. Вы в отличной компании, и это путешествие будет невероятным. Добро пожаловать в удивительный мир программирования! 🎉 +> 🌟 **Помните**: каждый эксперт когда-то был начинающим. Каждый опытный разработчик однажды чувствовал себя точно так же, как вы сейчас — взволнованным, возможно, немного ошеломленным и определенно любопытным узнать, что возможно. Вы в отличной компании, и это путешествие будет невероятным. Добро пожаловать в чудесный мир программирования! 🎉 --- **Отказ от ответственности**: -Этот документ был переведен с помощью службы автоматического перевода [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/ru/AGENTS.md b/translations/ru/AGENTS.md index 46993503b..0efe8ed92 100644 --- a/translations/ru/AGENTS.md +++ b/translations/ru/AGENTS.md @@ -2,25 +2,25 @@ ## Обзор проекта -Это репозиторий учебной программы для обучения основам веб-разработки для начинающих. Учебная программа — это комплексный 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 структурированных урока, организованных в проектно-ориентированные модули +- **Практические проекты**: Террариум, Игра на скорость набора, Расширение браузера, Космическая игра, Банковское приложение, Редактор кода, и AI чат-ассистент +- **Интерактивные викторины**: 48 викторин с 3 вопросами в каждой (оценка до/после урока) +- **Многоязычная поддержка**: Автоматический перевод на 50+ языков с помощью GitHub Actions +- **Технологии**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектов) ### Архитектура -- Образовательный репозиторий со структурой на основе уроков -- В каждой папке урока содержатся README, примеры кода и решения -- Отдельные проекты в отдельных директориях (quiz-app, различные проекты из уроков) -- Система перевода с использованием GitHub Actions (co-op-translator) -- Документация доступна через Docsify и в формате PDF +- Образовательный репозиторий с уроковой структурой +- В каждой папке урока находятся README, примеры кода и решения +- Отдельные проекты в отдельных директориях (quiz-app, различные проекты уроков) +- Система перевода с использованием GitHub Actions (co-op-translator) +- Документация предоставляется через Docsify и доступна в формате PDF -## Команды для настройки +## Команды настройки Этот репозиторий предназначен в первую очередь для изучения образовательного контента. Для работы с конкретными проектами: @@ -30,7 +30,7 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - + ### Настройка Quiz App (Vue 3 + Vite) ```bash @@ -40,25 +40,25 @@ npm run dev # Запустить сервер разработки npm run build # Собрать для продакшена npm run lint # Запустить ESLint ``` - + ### API банковского проекта (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # Запустить сервер API +npm start # Запустить API сервер npm run lint # Запустить ESLint npm run format # Отформатировать с помощью Prettier ``` - -### Проекты расширений для браузера + +### Проекты расширения браузера ```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 Backend) + +### Проект чата (Python backend) ```bash cd 9-chat-project/solution/backend/python @@ -75,34 +75,34 @@ pip install openai # Установите переменную окружения GITHUB_TOKEN python api.py ``` - + ## Рабочий процесс разработки ### Для контрибьюторов контента -1. **Сделайте форк репозитория** в свой аккаунт GitHub -2. **Склонируйте форк** локально -3. **Создайте новую ветку** для своих изменений -4. Внесите изменения в содержимое уроков или примеры кода -5. Проверьте изменения кода в соответствующих директориях проектов -6. Отправьте pull requests в соответствии с руководством по вкладам +1. **Сделайте форк репозитория** в свой аккаунт на GitHub +2. **Клонируйте ваш форк** локально +3. **Создайте новую ветку** для ваших изменений +4. Внесите изменения в содержимое уроков или примеры кода +5. Протестируйте любые изменения кода в соответствующих директориях проектов +6. Отправьте pull request в соответствии с руководством по внесению изменений ### Для обучающихся -1. Сделайте форк или склонируйте репозиторий -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 -- **Проекты**: Используйте расширение VS Code Live Server для HTML-проектов -- **API проекты**: Запустите `npm start` в соответствующих API директориях +- **Документация**: Запустите `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 -- Принципы адаптивного дизайна -- Четкие соглашения по именованию классов +- Семантические элементы HTML5 +- Принципы адаптивного дизайна +- Четкие правила именования классов - Комментарии с объяснениями CSS-техник для обучающихся ### Python -- Руководство по стилю PEP 8 -- Четкие, образовательные примеры кода -- Аннотации типов, где это полезно для обучения +- Соблюдайте стиль PEP 8 +- Четкие, образовательные примеры кода +- Тайпинги, где полезно для обучения -### Документация Markdown +### Markdown документация -- Четкая иерархия заголовков -- Блоки кода с указанием языка -- Ссылки на дополнительные ресурсы -- Скриншоты и изображения в папках `images/` -- Alt-тексты для изображений для доступности +- Чистая иерархия заголовков +- Блоки кода с указанием языка +- Ссылки на дополнительные ресурсы +- Скриншоты и изображения в папках `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}/` -## Сборка и деплоймент +## Сборка и деплой -### Развертывание Quiz App (Azure Static Web Apps) +### Деплой 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 +# Выполняет деплой через GitHub Actions при push в main ``` - -Конфигурация Azure Static Web Apps: -- **Путь приложения**: `/quiz-app` -- **Путь вывода**: `dist` + +Конфигурация 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 из документов ``` - + ### Документация Docsify ```bash npm install -g docsify-cli # Установите Docsify глобально docsify serve # Запустить на localhost:3000 ``` - -### Сборка для отдельных проектов -В каждой директории проекта может быть свой процесс сборки: -- Vue проекты: `npm run build` создает продакшен-сборки +### Сборки для отдельных проектов + +Каждый каталог проекта может иметь собственный процесс сборки: +- 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](https://opensource.microsoft.com/codeofconduct/) -- Подробные инструкции в [CONTRIBUTING.md](./CONTRIBUTING.md) -- Упоминание номеров задач в описании PR при наличии +- Необходимо согласиться с Microsoft CLA (автоматическая проверка при первом PR) +- Следовать [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- См [CONTRIBUTING.md](./CONTRIBUTING.md) для подробных инструкций +- Указывайте номера issues в описании 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 ``` - + ## Отладка и устранение неполадок ### Распространённые проблемы -**Quiz app не запускается**: -- Проверьте версию 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 для согласованного форматирования -- Используйте DevTools браузера для отладки JavaScript -- Для проектов Vue установите расширение Vue DevTools +- Используйте VS Code с расширением Live Server для HTML проектов +- Установите расширения ESLint и Prettier для единообразного форматирования +- Используйте инструменты разработчика в браузере для отладки JavaScript +- Для Vue проектов установите расширение Vue DevTools для браузера ### Особенности производительности -- Большое количество переведённых файлов (50+ языков) делает полные клонирования тяжелыми -- Используйте shallow clone, если работаете только с контентом: `git clone --depth 1` -- Исключите переводы из поиска при работе с английским контентом -- Процессы сборки могут быть медленными при первом запуске (npm install, сборка Vite) +- Большое количество переведённых файлов (50+ языков) делает полное клонирование объёмным +- Используйте неглубокое клонирование для работы только с контентом: `git clone --depth 1` +- Исключайте переводы из поиска при работе с английским содержимым +- Первые сборки могут идти медленно (npm install, сборка Vite) ## Вопросы безопасности ### Переменные окружения -- Ключи API никогда не должны попадать в репозиторий -- Используйте `.env` файлы (уже внесены в `.gitignore`) +- API ключи нельзя коммитить в репозиторий +- Используйте `.env` файлы (уже в `.gitignore`) - Документируйте необходимые переменные окружения в README проектов ### Python проекты -- Используйте виртуальные окружения: `python -m venv venv` -- Обновляйте зависимости +- Используйте виртуальные окружения: `python -m venv venv` +- Поддерживайте зависимости в актуальном состоянии - Токены GitHub должны иметь минимально необходимые разрешения ### Доступ к GitHub Models -- Для GitHub Models требуются Personal Access Tokens (PAT) -- Токены следует хранить в переменных среды -- Никогда не коммитьте токены или учетные данные +- Для доступа к GitHub Models необходимы Personal Access Tokens (PAT) +- Токены должны храниться в переменных окружения +- Никогда не коммитьте токены и учетные данные ## Дополнительные заметки ### Целевая аудитория -- Абсолютные новички в веб-разработке -- Студенты и самоучки -- Преподаватели, использующие программу в классе -- Контент разработан с учетом доступности и постепенного освоения навыков +- Полные новички в веб-разработке +- Студенты и самоучки +- Преподаватели, применяющие учебную программу в классе +- Контент разработан с учетом доступности и постепенного наращивания навыков ### Образовательная философия -- Проектно-ориентированное обучение -- Частые проверки знаний (викторины) -- Практические упражнения по программированию -- Примеры реальных приложений -- Сфокусированность на основах до изучения фреймворков +- Подход, основанный на обучении через проекты +- Частая проверка знаний (викторины) +- Практические упражнения по кодированию +- Примеры применения в реальных сценариях +- Акцент на фундаментальных знаниях до изучения фреймворков ### Поддержка репозитория -- Активное сообщество обучающихся и контрибьюторов -- Регулярные обновления зависимостей и контента -- Мониторинг тикетов и дискуссий со стороны поддерживающих -- Автоматическое обновление переводов через GitHub Actions +- Активное сообщество обучающихся и контрибьюторов +- Регулярные обновления зависимостей и содержания +- Вопросы и обсуждения под контролем мейнтейнеров +- Автоматическое обновление переводов с помощью GitHub Actions ### Связанные ресурсы -- [Модули Microsoft Learn](https://docs.microsoft.com/learn/) -- [Ресурсы Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендуется для обучающихся -- Дополнительные курсы: Generative AI, Data Science, ML, IoT +- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендован для обучающихся +- Дополнительные курсы: генеративный ИИ, дата-сайенс, машинное обучение, 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` - Проект чат-ассистента с ИИ +Для подробных инструкций по отдельным проектам смотрите 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 чат-ассистента ### Структура монорепозитория -Хотя это не традиционный монорепозиторий, он содержит несколько независимых проектов: -- Каждый урок автономен -- Проекты не делят зависимости -- Работайте с отдельными проектами без влияния на другие -- Клонируйте весь репозиторий для полного опыта обучения +Хотя это не традиционный монорепозиторий, данный репозиторий содержит несколько независимых проектов: +- Каждый урок автономен +- Проекты не имеют общих зависимостей +- Работа с отдельными проектами не влияет на другие +- Клонируйте весь репозиторий для полного опыта курса --- -**Отказ от ответственности**: -Этот документ был переведен с помощью сервиса AI-перевода [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