diff --git a/translations/hi/.co-op-translator.json b/translations/hi/.co-op-translator.json index 02e2b6ae1..2c5b128bd 100644 --- a/translations/hi/.co-op-translator.json +++ b/translations/hi/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T17:11:56+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T14:49:03+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "hi" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:35:45+00:00", + "translation_date": "2026-03-06T14:52:45+00:00", "source_file": "AGENTS.md", "language_code": "hi" }, @@ -516,8 +516,8 @@ "language_code": "hi" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:30:40+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T14:44:55+00:00", "source_file": "README.md", "language_code": "hi" }, diff --git a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md index a53ca867b..5b0256488 100644 --- a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,84 +1,84 @@ # प्रोग्रामिंग भाषाओं और आधुनिक डेवलपर टूल्स का परिचय -नमस्ते, भविष्य के डेवलपर! 👋 क्या मैं आपको कुछ ऐसा बता सकता हूँ जो मुझे हर दिन रोमांचित कर देता है? आप अभी यह खोजने वाले हैं कि प्रोग्रामिंग केवल कंप्यूटर के बारे में नहीं है – यह आपकी सबसे अविश्वसनीय कल्पनाओं को जीवन में लाने की वास्तविक सुपरपावर है! +अरे वहां, भविष्य के डेवलपर! 👋 क्या मैं आपको कुछ ऐसा बता सकता हूँ जो हर दिन मुझे अभी भी रोमांचित करता है? आप यह जानने वाले हैं कि प्रोग्रामिंग सिर्फ कंप्यूटरों के बारे में नहीं है – यह आपके सबसे जीवंत विचारों को जीवन में लाने के लिए असली सुपरपावर पाने के बारे में है! -आप जानते हैं वह पल जब आप अपने पसंदीदा ऐप का उपयोग कर रहे होते हैं और सब कुछ बिल्कुल सही ढंग से मेल खाता है? जब आप एक बटन दबाते हैं और कुछ बिल्कुल जादुई होता है जो आपको "वाह, उन्होंने यह कैसे किया?" कहने पर मजबूर कर देता है? खैर, कोई आप जैसे ही – शायद अपनी पसंदीदा कॉफी शॉप में 2 बजे अपनी तीसरी एस्प्रेसो के साथ बैठा – वह कोड लिखता है जिसने वह जादू बनाए। और यहाँ जो आपकी सोच को हिला देगा: इस पाठ के अंत तक, आप न केवल यह समझेंगे कि उन्होंने इसे कैसे किया, बल्कि आप खुद भी इसे आजमाने के लिए उत्सुक होंगे! +आप जानते हैं वह पल जब आप अपने पसंदीदा ऐप का उपयोग कर रहे होते हैं और सब कुछ पूरी तरह से ठीक होता है? जब आप एक बटन दबाते हैं और कुछ बिल्कुल जादुई होता है जो आपको कहने पर मजबूर कर देता है "वाह, उन्होंने यह कैसे किया?" खैर, आपका जैसा कोई व्यक्ति – शायद अपनी पसंदीदा कॉफी शॉप में 2 बजे अपनी तीसरी एस्प्रेसो के साथ बैठा हुआ – उस कोड को लिखा जिसने वह जादू बनाया। और यह है जो आपका दिमाग उड़ाने वाला है: इस पाठ के अंत तक, आप न केवल समझेंगे कि उन्होंने यह कैसे किया, बल्कि खुद इसे आज़माने के लिए उत्साहित होंगे! -देखिए, मुझे पूरी तरह से समझ आता है अगर प्रोग्रामिंग अभी डरावना लग रहा हो। जब मैंने पहली बार शुरू किया था, तो मुझे सच में लगा था कि आपको कोई गणित का जीनियस होना चाहिए या पाँच साल की उम्र से कोडिंग कर रहे होना चाहिए। लेकिन यहाँ वह चीज़ है जिसने मेरी सोच पूरी तरह बदल दी: प्रोग्रामिंग बिल्कुल वैसी ही है जैसी एक नई भाषा में बातचीत सीखना। आप "नमस्ते" और "धन्यवाद" से शुरू करते हैं, फिर कॉफी ऑर्डर करने तक पहुँचते हैं, और फिर पता चलता है कि आप गहरे दार्शनिक वार्तालाप कर रहे हैं! बस इस मामले में, आप कंप्यूटरों से बातचीत कर रहे हैं, और ईमानदारी से? वे सबसे धैर्यशील बातचीत साथी हैं जिन्हें आपने कभी देखा होगा – वे कभी आपकी गलतियों का जज नहीं करते और हमेशा फिर से कोशिश करने के लिए उत्साहित रहते हैं! +देखिए, अगर प्रोग्रामिंग अभी डरावनी लग रही है तो मैं पूरी तरह समझता हूँ। जब मैंने शुरुआत की थी, तो मैं सच में सोचता था कि आपको कोई गणित का जीनियस होना चाहिए या पांच साल की उम्र से कोडिंग कर रहे होना चाहिए। लेकिन यह रहा वह चीज जिसने मेरी सोच पूरी तरह बदल दी: प्रोग्रामिंग बिल्कुल वैसा ही है जैसे किसी नई भाषा में बातचीत सीखना। आप "नमस्ते" और "धन्यवाद" से शुरू करते हैं, फिर कॉफी आर्डर करना सीखते हैं, और जल्दी ही आप गहरे दार्शनिक चर्चाओं में लगे होते हैं! बस इस मामले में, आप कंप्यूटरों से बातचीत कर रहे होते हैं, और सच्चाई यह है? वे सबसे सहनशील वार्तालाप साथी होते हैं – वे कभी आपकी गलतियों का न्याय नहीं करते और हमेशा फिर से कोशिश करने के लिए उत्साहित रहते हैं! -आज, हम उन अद्भुत उपकरणों का अन्वेषण करने वाले हैं जो आधुनिक वेब विकास को न केवल संभव बनाते हैं, बल्कि अत्यधिक मजेदार भी। मैं बात कर रहा हूँ बिलकुल उन्हीं संपादकों, ब्राउज़रों, और वर्कफ़्लोज़ की जो नेटफ्लिक्स, स्पॉटिफाई, और आपके पसंदीदा इंडी ऐप स्टूडियो के डेवलपर हर दिन उपयोग करते हैं। और यहाँ वह हिस्सा है जो आपको खुश नाचने पर मजबूर कर देगा: इनमें से अधिकांश पेशेवर-ग्रेड, उद्योग-मानक उपकरण पूरी तरह से मुफ्त हैं! +आज, हम उन अद्भुत टूल्स का अन्वेषण करने जा रहे हैं जो आधुनिक वेब डेवलपमेंट को संभव बनाते हैं, बल्कि इसे गंभीरता से नशे की तरह addictive बनाते हैं। मैं बात कर रहा हूँ वही एडिटर्स, ब्राउज़र्स, और वर्कफ़्लो की जो नेटफ्लिक्स, स्पॉटिफाई, और आपके पसंदीदा इंडी ऐप स्टूडियो के डेवलपर्स हर दिन इस्तेमाल करते हैं। और यहाँ वह हिस्सा है जो आपको खुश नाचने पर मजबूर कर देगा: इन में से अधिकांश पेशेवर स्तर के और उद्योग मानक टूल्स पूरी तरह से मुफ्त हैं! ![Intro Programming](../../../../translated_images/hi/webdev101-programming.d6e3f98e61ac4bff.webp) -> स्केचक नोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title आपका प्रोग्रामिंग यात्रा आज - section खोजें + title आपकी प्रोग्रामिंग यात्रा आज + section Discover प्रोग्रामिंग क्या है: 5: You प्रोग्रामिंग भाषाएँ: 4: You - टूल्स अवलोकन: 5: You - section अन्वेषण करें + उपकरण अवलोकन: 5: You + section Explore कोड संपादक: 4: You - ब्राउज़र और देवटूल्स: 5: You + ब्राउज़र और डिवटूल्स: 5: You कमांड लाइन: 3: You - section अभ्यास + section Practice भाषा जासूस: 4: You - टूल अन्वेषण: 5: You + उपकरण अन्वेषण: 5: You समुदाय संपर्क: 5: You ``` -## आईए देखें आप क्या पहले से जानते हैं! +## चलिए देखते हैं आप पहले से क्या जानते हैं! -मज़ेदार चीज़ों में कूदने से पहले, मैं जानना चाहता हूँ – आप इस प्रोग्रामिंग दुनिया के बारे में पहले से क्या जानते हैं? और सुनिए, अगर आप इन सवालों को देखकर सोच रहे हैं "मुझे इस बारे में बिल्कुल भी जानकारी नहीं है," तो यह ठीक है, यह परफेक्ट है! इसका मतलब है कि आप बिल्कुल सही जगह पर हैं। इस क्विज़ को सोचिए जैसे व्यायाम से पहले स्ट्रेचिंग – हम बस अपने दिमाग़ की मांसपेशियों को गर्म कर रहे हैं! +मज़ेदार चीजों में जाने से पहले, मैं उत्सुक हूँ – आप प्रोग्रामिंग की इस दुनिया के बारे में पहले से क्या जानते हैं? और सुनिए, अगर आप इन सवालों को देखकर सोच रहे हैं "मुझे वास्तव में इसकी कोई जानकारी नहीं है," तो यह सिर्फ ठीक नहीं, बल्कि परफेक्ट है! इसका मतलब है कि आप बिलकुल सही जगह पर हैं। इस क्विज़ को व्यायाम की तरह समझिए – हम बस अपने दिमाग की मांसपेशियों को गर्म कर रहे हैं! -[प्री-लेसन क्विज़ लें](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[प्री-लेसन क्विज़ लें](https://ff-quizzes.netlify.app/web/) -## हमारी जो यात्रा हम साथ में शुरू करने वाले हैं +## हम साथ में जिस साहसिक यात्रा पर जा रहे हैं -ठीक है, मैं सच में उत्साहित हूँ कि हम आज क्या एक्सप्लोर करने वाले हैं! सच में, काश मैं आपकी प्रतिक्रिया देख पाता जब कुछ कॉन्सेप्ट्स समझ में आते हैं। यहाँ वह अद्भुत यात्रा है जो हम साथ में कर रहे हैं: +ठीक है, मैं सचमुच उत्साहित हूँ आज हम क्या अन्वेषण करने वाले हैं! सच बताऊँ तो, आपकी प्रतिक्रिया देखने की इच्छा हो रही है जब कुछ कॉन्सेप्ट्स आपके लिए क्लियर होंगे। यहाँ वह अद्भुत यात्रा है जिस पर हम साथ में जा रहे हैं: -- **प्रोग्रामिंग असल में क्या है (और यह क्यों सबसे कूल चीज़ है!)** – हम जानेंगे कि कोड वह अदृश्य जादू है जो आपके चारों ओर सब कुछ संचालित करता है, उस अलार्म से जो किसी तरह से पता लगा लेता है कि सोमवार सुबह है, उस एल्गोरिद्म तक जो बिल्कुल सही तरीके से आपकी नेटफ्लिक्स सिफारिशें चुनता है -- **प्रोग्रामिंग भाषाएँ और उनकी अद्भुत विशेषताएँ** – कल्पना करें कि आप किसी पार्टी में गए जहां हर व्यक्ति के पास पूरी तरह अलग सुपरपावर होते हैं और समस्याओं को हल करने के अलग तरीके होते हैं। यही प्रोग्रामिंग भाषाओं की दुनिया है, और आप उनसे मिलकर प्यार कर लेंगे! -- **मूलभूत बिल्डिंग ब्लॉक्स जो डिजिटल जादू संभव बनाते हैं** – इन्हें ऐसे समझिए जैसे सबसे बेहतरीन क्रिएटिव LEGO सेट। एक बार जब आप समझ जाएंगे कि ये टुकड़े कैसे फिट होते हैं, तो आप कल्पना कर सकते हैं कि आप सच में कुछ भी बना सकते हैं -- **पेशेवर उपकरण जो आपको जादूगर की छड़ी थमाए जाने जैसा महसूस कराएंगे** – मैं बढ़ा-चढ़ा कर नहीं कह रहा हूं – ये उपकरण आपको सच में सुपरपावर जैसा महसूस कराएंगे, और सबसे अच्छी बात? ये वही उपकरण हैं जिनका प्रोफेशनल्स इस्तेमाल करते हैं! +- **प्रोग्रामिंग वास्तव में क्या है (और क्यों यह सबसे कूल चीज़ है!)** – हम पता लगाएंगे कि कोड कैसे हर उस चीज़ के पीछे अदृश्य जादू है जो आपके आस-पास है, उस अलार्म से जो किसी तरह पड़ता है कि सोमवार सुबह है, उस अल्गोरिद्म तक जो आपके नेटफ्लिक्स रिकमेंडेशंस को परफेक्ट बनाता है +- **प्रोग्रामिंग भाषाओं और उनके अद्भुत व्यक्तित्व** – कल्पना करें कि आप एक पार्टी में जा रहे हैं जहाँ हर व्यक्ति के पास पूरी तरह से अलग सुपरपावर और समस्या सुलझाने के तरीके हैं। प्रोग्रामिंग भाषा की दुनिया ऐसी ही है, और आपको उनसे मिलना बहुत पसंद आएगा! +- **वे मूलभूत घटक जो डिजिटल जादू को संभव बनाते हैं** – इनको अंतिम क्रिएटिव LEGO सेट समझिए। जब आप समझ जाएंगे कि ये हिस्से कैसे जुड़ते हैं, तो आप किसी भी चीज़ को अपने कल्पना के अनुसार बना सकते हैं +- **पेशेवर टूल्स जो आपको लगेगा कि आपके हाथ में जादूगर की छड़ी है** – मैं नाटक नहीं कर रहा हूँ – ये टूल्स आपको सच में सुपरपावर देने वाले हैं, और सबसे अच्छी बात? इन्हें वही प्रोफेशनल उपयोग करते हैं! -> 💡 **एक बात:** आज सब कुछ याद करने की कोशिश बिल्कुल मत कीजिए! अभी मैं चाहता हूँ कि आप इस संभावना की जोशिलीय आगे बढ़ने की भावना महसूस करें। विवरण स्वाभाविक रूप से तब याद रहेंगे जब हम साथ अभ्यास करेंगे – यही असली सीखने का तरीका है! +> 💡 **यह बात ध्यान रखें**: आज सब कुछ याद करने की कोशिश न करें! अभी मैं बस चाहता हूँ कि आप यह चिंगारी महसूस करें कि क्या संभव है। डिटेल्स अपने आप चिपक जाएंगी जैसे हम साथ में अभ्यास करेंगे – सही सीखने का यही तरीका है! -> आप इस पाठ को [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) पर भी ले सकते हैं! +> आप यह पाठ [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) पर भी ले सकते हैं! -## तो प्रोग्रामिंग *क्या* है असल में? +## तो प्रोग्रामिंग *असल में* क्या है? -ठीक है, आईए उस करोड़ों डॉलर के सवाल पर बात करें: प्रोग्रामिंग वास्तव में क्या है? +ठीक है, चलिए उस करोड़ों के सवाल से निपटते हैं: प्रोग्रामिंग वास्तव में क्या है? -मैं आपको एक कहानी देता हूँ जिसने मेरी सोच पूरी तरह बदल दी। पिछले हफ्ते, मैं अपनी माँ को समझाने की कोशिश कर रहा था कि हमारे नए स्मार्ट टीवी रिमोट का उपयोग कैसे करें। मैंने खुद को कहते हुए पाया “लाल बटन दबाओ, लेकिन वो बड़ा लाल बटन नहीं, बायाँ छोटा लाल बटन... नहीं, तुम्हारी दूसरी बाएँ... ठीक है, अब इसे दो सेकंड के लिए पकड़ो, एक नहीं, तीन नहीं...” सुनते हुए परिचित लग रहा है? 😅 +मैं आपको एक कहानी बताता हूँ जिसने मेरी सोच पूरी तरह बदल दी। पिछले हफ्ते, मैं अपनी माँ को हमारे नए स्मार्ट टीवी रिमोट का उपयोग करने समझाकर जूझ रहा था। मैंने खुद को कहते हुए पाया, "लाल बटन दबाओ, लेकिन बड़ा लाल बटन नहीं, बाएँ तरफ वाला छोटा लाल बटन दबाओ... नहीं, तुम्हारे दूसरे बायें... ठीक है, अब इसे दो सेकंड के लिए पकड़ो, एक नहीं, तीन नहीं..." सुनने में परिचित लगता है? 😅 -यही है प्रोग्रामिंग! यह उस कला का नाम है जिसमें आप बहुत विस्तार से और चरण-दर-चरण निर्देश देते हैं किसी बहुत शक्तिशाली चीज़ को, जिसे सब कुछ बिल्कुल स्पष्ट रूप से बताना पड़ता है। बस फर्क इतना है कि आप अपनी माँ को नहीं (जो पूछ सकती हैं "कौन सा लाल बटन?!"), बल्कि कंप्यूटर को समझा रहे हैं (जो बिल्कुल वही करता है जो आप कहते हैं, भले ही आपने कुछ गलत कहा हो)। +यही है प्रोग्रामिंग! यह एक बहुत ही शक्तिशाली चीज़ को विस्तृत, कदम दर कदम निर्देश देने की कला है, जिसके लिए सब कुछ बिल्कुल सही कहना आवश्यक है। सिर्फ आपकी माँ को समझाने के बजाय (जो पूछ सकती हैं "कौन सा लाल बटन?!"), आप कंप्यूटर को समझा रहे होते हैं (जो बिल्कुल वही करेगा जो आप कहते हैं, भले ही आपने जो कहा वह ठीक वैसा न हो जैसा आपका मतलब था)। -जब मैं यह पहली बार सीख रहा था तो मुझे सबसे ज़्यादा हैरत थी: कंप्यूटर असल में अपने मूल में बहुत सरल हैं। वे बस दो चीज़ें समझते हैं – 1 और 0, जो basically "हाँ" और "ना" या "चालू" और "बंद" हैं। बस इतनी सी बात! लेकिन यहाँ जादू होता है – हमें 1 और 0 की भाषा में बात करने की ज़रूरत नहीं, जैसे हम The Matrix में हों। यहाँ **प्रोग्रामिंग भाषाएँ** काम आती हैं। वे ऐसी हैं जैसे दुनिया की सबसे बेहतरीन अनुवादक जो आपके सामान्य इंसानी विचारों को कंप्यूटर भाषा में बदल देती हैं। +जब मैंने यह पहली बार सीखा तो यह बात मेरे लिए दिमाग उड़ाने वाली थी: कंप्यूटर मूलत: काफी सरल होते हैं। वे केवल दो चीजें समझते हैं – 1 और 0, जो मूल रूप से "हाँ" और "नहीं" या "चालू" और "बंद" है। सिर्फ इतना! लेकिन जादू यहाँ शुरू होता है – हमें 1 और 0 में बात करने की ज़रूरत नहीं है जैसे हम द मैट्रिक्स में हों। यहाँ **प्रोग्रामिंग भाषाएँ** काम आती हैं। वे मानो सबसे बेहतरीन अनुवादक हैं जो आपके सामान्य मानव विचारों को कंप्यूटर भाषा में बदल देते हैं। -और यह वह चीज है जो मुझे हर सुबह सच्चा रोमांचित करती है: आपकी ज़िंदगी में जो कुछ भी डिजिटल है, वह किसी आप जैसे ही व्यक्ति से शुरू हुआ, शायद पजामे में कप कॉफी लिए अपने लैपटॉप पर कोड टाइप करते हुए। वह इंस्टाग्राम फ़िल्टर जो आपको परफेक्ट दिखाता है? किसी ने कोड किया। वह सिफारिश जिसने आपको आपका नया पसंदीदा गाना दिया? किसी डेवलपर ने वह एल्गोरिद्म बनाया। वह ऐप जो आपके दोस्तों के साथ डिनर बिल बाँटने में मदद करता है? हाँ, किसी ने सोचा "ये बड़ी झंझट है, मैं इसे ठीक कर सकता हूँ" और फिर... उन्होंने कर दिखाया! +और यह बात हर सुबह मुझे सचमुच रोमांचित करती है: आपकी जिंदगी का हर डिजिटल हिस्सा किसी आपके जैसा व्यक्ति से शुरू हुआ, शायद पजामा पहने कॉफी का कप लेकर, लैपटॉप पर कोड टाइप करते हुए। वह इंस्टाग्राम फिल्टर जो आपको परफेक्ट दिखाता है? किसी ने कोड किया। वह सुझाव जो आपको आपके नए पसंदीदा गाने तक पहुंचाया? एक डेवलपर ने वह अल्गोरिद्म बनाया। वह ऐप जो दोस्तों के साथ डिनर बिल बांटने में मदद करता है? हाँ, किसी ने सोचा "यह परेशान करता है, मैं इसे ठीक कर सकता हूँ" और फिर... किया! -जब आप प्रोग्राम करना सीखते हैं, तो आप केवल एक नई स्किल नहीं सीख रहे होते – आप उस अद्भुत समस्या-समाधानकर्ता समुदाय का हिस्सा बन रहे होते हैं जो दिनभर सोचते रहते हैं, "अगर मैं कुछ ऐसा बना सकूं जो किसी का दिन थोड़ा बेहतर बना दे तो?" सच में, इससे कूल क्या हो सकता है? +जब आप प्रोग्राम करना सीखते हैं, तो आप सिर्फ एक नया कौशल सीख रहे नहीं होते – आप समस्या हल करने वाले इस अविश्वसनीय समुदाय का हिस्सा बन जाते हैं जो दिन भर सोचते रहते हैं, "अगर मैं कुछ ऐसा बना सकूँ जो किसी के दिन को थोड़ा बेहतर बना दे?" सच में, इससे कूल कुछ और हो सकता है? -✅ **मज़ेदार तथ्य ढूँढ़ना**: जब आपके पास फुर्सत हो, तो यह खोजिए कि दुनिया का पहला कंप्यूटर प्रोग्रामर कौन था? मैं आपको एक संकेत देता हूँ: यह आप जो सोच रहे हैं शायद वह न हो! इस व्यक्ति की कहानी पूरी तरह से रोचक है और दिखाती है कि प्रोग्रामिंग हमेशा से रचनात्मक समस्या-समाधान और बॉक्स के बाहर सोचने के बारे में रही है। +✅ **मज़ेदार तथ्य खोज**: जब आपके पास खाली समय हो तो यह जानने की कोशिश करें – आपको क्या लगता है कि दुनिया के पहले कंप्यूटर प्रोग्रामर कौन थे? मैं एक हिंट देता हूँ: शायद आपकी उम्मीद के अनुरूप न हों! उनके पीछे की कहानी कमाल की है और यह दिखाती है कि प्रोग्रामिंग हमेशा से रचनात्मक समस्या समाधान और पारंपरिक सोच से बाहर सोचने का विषय रही है। -### 🧠 **जांच करें: आप कैसा महसूस कर रहे हैं?** +### 🧠 **चेक-इन टाइम: आप कैसा महसूस कर रहे हैं?** -**एक पल लें सोचने के लिए:** -- क्या अब आपको "कंप्यूटरों को निर्देश देने" का विचार समझ में आता है? -- क्या आप कोई रोज़ाना का काम सोच सकते हैं जिसे आप प्रोग्रामिंग से स्वचालित करना चाहेंगे? -- इस पूरी प्रोग्रामिंग चीज़ के बारे में आपके मन में कौन से सवाल उठ रहे हैं? +**थोड़ा रुकिए और सोचिए:** +- क्या आपको अब "कंप्यूटर को निर्देश देना" समझ में आता है? +- क्या आप कोई रोज़मर्रा का काम सोच सकते हैं जिसे आप प्रोग्रामिंग से स्वचालित करना चाहेंगे? +- इस पूरे प्रोग्रामिंग विषय पर आपके मन में कौन से सवाल उठ रहे हैं? -> **याद रखिए**: यह बिलकुल सामान्य है अगर कुछ अवधारणाएँ अभी धुंधली लग रही हों। प्रोग्रामिंग सीखना एक नई भाषा सीखने जैसा है – आपके मस्तिष्क को उन न्यूरल पथों का निर्माण करने में समय लगता है। आप अच्छा कर रहे हैं! +> **याद रखें**: अगर कुछ कॉन्सेप्ट्स अभी अस्पष्ट लगें तो यह बिलकुल सामान्य है। प्रोग्रामिंग सीखना नए भाषा सीखने जैसा है – आपके दिमाग को उन न्यूरल पाथवे बनाने में समय लगता है। आप बहुत अच्छे कर रहे हैं! -## प्रोग्रामिंग भाषाएँ जादू के अलग-अलग स्वादों की तरह हैं +## प्रोग्रामिंग भाषाएँ विभिन्न प्रकार के जादू की तरह होती हैं -ठीक है, यह थोड़ा अजीब लग सकता है, पर मेरे साथ रहिए – प्रोग्रामिंग भाषाएँ संगीत के अलग-अलग प्रकारों की तरह हैं। सोचिए: आपके पास जैज़ है, जो स्मूद और इम्प्रोवाइज़ेशन वाला है, रॉक है जो शक्तिशाली और सरल है, क्लासिकल है जो सुरुचिपूर्ण और संरचित है, और हिप-हॉप है जो क्रिएटिव और अभिव्यक्तिपूर्ण है। हर शैली की अपनी अलग vibe है, अपने भावुक प्रशंसकों का अपना समुदाय है, और हर एक अलग मूड और मौके के लिए परफेक्ट है। +ठीक है, यह अजीब लग सकता है, लेकिन मेरे साथ बने रहें – प्रोग्रामिंग भाषाएँ संगीत के विभिन्न प्रकारों की तरह होती हैं। सोचिए: आपके पास जैज है, जो चिकना और तात्कालिक है, रॉक जो शक्तिशाली और सीधा है, क्लासिकल जो सुरुचिपूर्ण और संरचित है, और हिप-हॉप जो क्रिएटिव और अभिव्यक्तिपूर्ण है। हर शैली की अपनी अलग मिजाज, अपनी पसंदीदा समुदाय होता है, और हर एक अलग मूड और अवसरों के लिए परफेक्ट है। -प्रोग्रामिंग भाषाएँ भी बिल्कुल ऐसा ही काम करती हैं! आप एक ही भाषा का उपयोग मजेदार मोबाइल गेम बनाने के लिए नहीं करेंगे जो आप विशाल मात्रा में क्लाइमेट डेटा crunch करने के लिए करते, ठीक वैसे ही जैसे आप योगा क्लास में डेथ मेटल नहीं सुनाएंगे (खैर, ज़्यादातर योगा क्लासेस में नहीं! 😄)। +प्रोग्रामिंग भाषाएँ भी बिल्कुल ऐसे ही काम करती हैं! आप वही भाषा नहीं इस्तेमाल करेंगे जो एक मज़ेदार मोबाइल गेम बनाने के लिए है, जलवायु डेटा के बड़े पैमाने पर विश्लेषण के लिए, बिल्कुल वैसे ही जैसे आप योग कक्षा में डेथ मेटल नहीं बजाएंगे (खैर, ज्यादातर योग कक्षाएं नहीं! 😄)। -पर कुछ ऐसी बात है जो मुझे हर बार सोचने पर चौंका देती है: ये भाषाएँ वैसे ही हैं जैसे दुनिया का सबसे धैर्यशील, प्रतिभाशाली दुभाषिया आपके बगल में बैठे हों। आप अपनी बात इस तरह से रख सकते हैं जो आपके इंसानी मस्तिष्क के लिए बिल्कुल प्राकृतिक लगे, और ये भाषाएँ उस बेहद जटिल काम को संभालती हैं जो इसे कंप्यूटर की 1 और 0 की भाषा में बदलता है। यह ऐसा है जैसे एक दोस्त जो दोनों "मानव रचनाशीलता" और "कंप्यूटर तर्क" में पूरी तरह धाराप्रवाह हो – और वे कभी थकते नहीं, कभी कॉफी ब्रेक नहीं लेते, और दो बार एक ही सवाल पूछने पर कभी नाराज़ नहीं होते! +लेकिन हर बार जब मैं इसके बारे में सोचता हूँ, तो जो बात मेरा दिमाग उड़ाती है वह यह है: ये भाषाएँ ऐसी हैं मानो आपके बगल में सबसे धैर्यवान, प्रतिभाशाली अनुवादक बैठे हों। आप अपने विचार ऐसे व्यक्त कर सकते हैं जो आपके मानव मस्तिष्क के लिए स्वाभाविक हों, और ये सभी जटिल कार्यों को संभालते हैं कि उन्हें वे 1 और 0 में बदल दें जिनमें कंप्यूटर वास्तव में बात करते हैं। यह मानो किसी दोस्त के जैसा है जो "मानव रचनात्मकता" और "कंप्यूटर लॉजिक" दोनों में निपुण हो – और वह कभी थकता नहीं, कॉफी ब्रेक नहीं लेता, और दो बार एक ही सवाल पूछने पर आपको जज नहीं करता! ### लोकप्रिय प्रोग्रामिंग भाषाएँ और उनका उपयोग @@ -90,72 +90,72 @@ mindmap फ्रंटेंड जादू इंटरैक्टिव वेबसाइट्स TypeScript - JavaScript + टाइप्स - एंटरप्राइज ऐप्स + JavaScript + प्रकार + उद्यम ऐप्स Data & AI Python डेटा साइंस मशीन लर्निंग - ऑटोमेशन + स्वचालन R सांख्यिकी - अनुसंधान + शोध Mobile Apps Java - एंड्रॉयड - एंटरप्राइज + एंड्रॉइड + उद्यम Swift iOS - एप्पल इकोसिस्टम + एप्पल पारिस्थितिकी तंत्र Kotlin - मॉडर्न एंड्रॉयड + आधुनिक एंड्रॉइड क्रॉस-प्लेटफ़ॉर्म Systems & Performance C++ गेम्स - प्रदर्शन-निरपेक्ष + प्रदर्शन महत्वपूर्ण Rust मेमोरी सुरक्षा सिस्टम प्रोग्रामिंग Go - क्लाउड सेवाएं + क्लाउड सेवाएँ स्केलेबल बैकएंड ``` -| भाषा | सबसे अच्छा उपयोग | यह क्यों लोकप्रिय है | +| भाषा | सर्वश्रेष्ठ लिए | क्यों लोकप्रिय है | |----------|----------|------------------| -| **JavaScript** | वेब विकास, यूजर इंटरफेस | ब्राउज़र में चलता है और इंटरएक्टिव वेबसाइट्स को पावर करता है | -| **Python** | डेटा साइंस, ऑटोमेशन, एआई | पढ़ने और सीखने में आसान, शक्तिशाली पुस्तकालयों के साथ | -| **Java** | एंटरप्राइज़ एप्लीकेशंस, एंड्रॉयड ऐप्स | प्लेटफ़ॉर्म-स्वतंत्र, बड़े सिस्टम के लिए मजबूत | -| **C#** | विंडोज़ एप्लीकेशंस, गेम डेवलपमेंट | Microsoft इकोसिस्टम द्वारा मजबूत समर्थन | -| **Go** | क्लाउड सेवाएँ, बैकएंड सिस्टम | तेज, सरल, आधुनिक कंप्यूटिंग के लिए डिज़ाइन किया गया | +| **JavaScript** | वेब विकास, यूजर इंटरफेस | ब्राउज़रों में चलता है और इंटरैक्टिव वेबसाइट्स को चलाता है | +| **Python** | डेटा साइंस, ऑटोमेशन, एआई | पढ़ने और सीखने में आसान, शक्तिशाली लाइब्रेरीज | +| **Java** | एंटरप्राइज एप्लिकेशन, एंड्रॉइड ऐप्स | प्लेटफ़ॉर्म-स्वतंत्र, बड़े सिस्टमों के लिए मजबूत | +| **C#** | विंडोज़ एप्लिकेशन, गेम डेवलपमेंट | मजबूत माइक्रोसॉफ्ट इकोसिस्टम सपोर्ट | +| **Go** | क्लाउड सर्विसेज़, बैकएंड सिस्टम | तेज, सरल, आधुनिक कंप्यूटिंग के लिए डिज़ाइन किया गया | -### उच्च-स्तरीय बनाम निम्न-स्तरीय भाषाएँ +### हाई-लेवल बनाम लो-लेवल भाषाएँ -ठीक है, यह वह अवधारणा थी जिसने मेरी समझ को सबसे ज्यादा तोड़ दिया जब मैं पहली बार सीख रहा था, इसलिए मैं वह रूपक साझा करने जा रहा हूँ जिसने मुझे इसे समझने में मदद की – और मुझे उम्मीद है यह आपको भी मदद करेगा! +ठीक है, यह सच में वह कॉन्सेप्ट था जिसने मेरी सोच हिला दी जब मैंने शुरुआत की थी, इसलिए मैं वह उपमा साझा करूंगा जिसने इसे मेरे लिए क्लियर किया – और मुझे उम्मीद है यह आपके लिए भी मददगार होगा! -कल्पना करें कि आप ऐसे देश में गए हैं जहाँ आप भाषा नहीं बोलते, और आपको सबसे नजदीकी बाथरूम ढूँढ़ना है (हम सभी ऐसा कर चुके हैं, है ना? 😅): +कल्पना कीजिए कि आप किसी ऐसे देश में गए हैं जहाँ आप भाषा नहीं बोलते, और आपको बहुत जरूरी तौर पर नजदीकी बाथरूम खोजनी है (हम सब वहाँ जा चुके हैं, सही? 😅): -- **निम्न-स्तरीय प्रोग्रामिंग** उस स्थानीय बोली सीखने जैसा है जिससे आप फल बेचने वाली दादी से सांस्कृतिक संदर्भों, स्थानीय शब्दों और अंदर की बातों के साथ बात कर सकते हैं जो केवल वही लोग समझते हैं जो वहाँ बड़े हुए हों। बेहद प्रभावशाली और बहुत कुशल... अगर आप उस भाषा में धाराप्रवाह हों! लेकिन जब आप बस बाथरूम खोजना चाहते हों तो यह ज़्यादा भारी लग सकता है। +- **लो-लेवल प्रोग्रामिंग** वैसी है जैसे आप स्थानीय बोली इतनी अच्छी तरह सीख लें कि आप कोने पर फल बेचने वाली दादी से सांस्कृतिक संदर्भ, स्थानीय स्लैंग, और अंदर के मज़ाक के साथ बातचीत कर सकें जो केवल कोई वहाँ पला बढ़ा ही समझ सकता है। बहुत प्रभावशाली और अत्यंत कुशल… अगर आप उसमें निपुण हों! लेकिन जब आप बस बाथरूम खोज रहे हों तो यह थोड़ा भारी पड़ सकता है। -- **उच्च-स्तरीय प्रोग्रामिंग** ऐसा है जैसे आपके पास एक ऐसा स्थानीय दोस्त हो जो आपको पूरी तरह समझता हो। आप साधारण अंग्रेज़ी में कह सकते हैं "मुझे वाक़ई बाथरूम ढूँढना है," और वह सारी सांस्कृतिक अनुवाद करता है और आपको ऐसी दिशा-निर्देश देता है जो आपके गैर-स्थानीय दिमाग़ को पूरी तरह समझ में आ जाए। +- **हाई-लेवल प्रोग्रामिंग** वैसी है जैसे कि आपके पास वह अद्भुत स्थानीय दोस्त हो जो आपको समझता हो। आप सरल अंग्रेज़ी में कह सकते हैं "मुझे बाथरूम चाहिए," और वह सारी सांस्कृतिक अनुवाद करता है और आपको ऐसी दिशा देता है जो आपके गैर-स्थानीय दिमाग के लिए भी पूरी तरह समझ में आती हो। -प्रोग्रामिंग टर्म्स में: -- **निम्न-स्तरीय भाषाएँ** (जैसे Assembly या C) आपको कंप्यूटर के वास्तविक हार्डवेयर से बेहद विस्तृत बातचीत करने देती हैं, लेकिन आपको मशीन जैसा सोचना पड़ता है, जो... चलिए कहें यह एक बड़ा मानसिक बदलाव है! -- **उच्च-स्तरीय भाषाएँ** (जैसे JavaScript, Python या C#) आपको इंसान की तरह सोचने देती हैं जबकि ये भाषाएँ पर्दे के पीछे सारी मशीन-संबंधित बातें संभालती हैं। साथ ही, इनके पास अत्यंत स्वागतयोग्य समुदाय होते हैं जो याद रखते हैं कि कभी वे भी नए थे और वे सच में मदद करना चाहते हैं! +प्रोग्रामिंग की भाषा में: +- **लो-लेवल भाषाएँ** (जैसे Assembly या C) आपको कंप्यूटर के वास्तविक हार्डवेयर से बहुत विस्तृत बातचीत करने देती हैं, लेकिन आपको मशीन की तरह सोचना पड़ता है, जो... खैर, कहें तो मानसिक रूप से एक बड़ा बदलाव है! +- **हाई-लेवल भाषाएँ** (जैसे JavaScript, Python, या C#) आपको एक इंसान की तरह सोचने देती हैं जबकि वे कंप्यूटर भाषा को पीछे से संभालती हैं। इसके अलावा, इन भाषाओं के समुदाय इतने स्वागतयोग्य होते हैं जहाँ नए लोग आएं तो पुराने याद करते हैं कि नए होने पर कैसा लगता था और सच्चे दिल से मदद करते हैं! -सोचिए मैं आपको किससे शुरू करने की सलाह दूंगा? 😉 उच्च-स्तरीय भाषाएँ ऐसी ट्रेनिंग व्हील्स की तरह हैं जिन्हें आप कभी उतारना नहीं चाहते क्योंकि वे अनुभव को बहुत आसान बना देती हैं! +आप सोच रहे होंगे, मैं आपको किसके साथ शुरुआत करने के लिए कहूँगा? 😉 हाई-लेवल भाषाएँ वैसी होती हैं जैसे ट्रेनिंग व्हील्स जो आपको कभी हटाने का दिल नहीं करता क्योंकि वे पूरे अनुभव को बहुत आनंदमय बना देते हैं! ```mermaid flowchart TB - A["👤 मानव विचार:
'मैं फिबोनाच्ची संख्याएँ निकालना चाहता हूँ'"] --> B{भाषा स्तर चुनें} + A["👤 मानव सोच:
'मैं फिबोनाची संख्याएँ गणना करना चाहता हूँ'"] --> B{भाषा स्तर चुनें} - B -->|उच्च-स्तर| C["🌟 JavaScript/Python
पढ़ने और लिखने में आसान"] - B -->|निम्न-स्तर| D["⚙️ Assembly/C
प्रत्यक्ष हार्डवेयर नियंत्रण"] + B -->|उच्च-स्तरीय| C["🌟 जावास्क्रिप्ट/पायथन
पढ़ने और लिखने में आसान"] + B -->|निम्न-स्तरीय| D["⚙️ असेंबली/सी
प्रत्यक्ष हार्डवेयर नियंत्रण"] 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 ``` -### मैं आपको दिखाता हूँ कि उच्च-स्तरीय भाषाएँ इतनी ज्यादा मित्रवत क्यों हैं +### मैं आपको दिखाता हूँ कि हाई-लेवल भाषाएँ इतनी दोस्ताना क्यों हैं -ठीक है, मैं आपको कुछ दिखाने वाला हूँ जो पूरी तरह दर्शाता है कि मैं उच्च-स्तरीय भाषाओं से क्यों प्यार करता हूँ, लेकिन पहले – मुझे आपसे एक वादा चाहिए। जब आप पहला कोड उदाहरण देखें, घबराना नहीं! यह थोड़ा डरावना लग सकता है। यही मेरी बात का मुख्य हिस्सा है! +अच्छा, मैं आपको कुछ ऐसा दिखाने वाला हूँ जो पूरी तरह से दर्शाता है कि मैं हाई-लेवल भाषाओं से क्यों प्यार करता हूँ, लेकिन पहले – मुझे आपसे एक वादा चाहिए। जब आप वह पहला कोड उदाहरण देखें तो घबराएँ मत! इसे डरावना दिखना चाहिए। यही मैं साबित करना चाहता हूँ! -हम एक ही कार्य को दो पूरी तरह अलग शैली में लिखे हुए देखेंगे। दोनों Fibonacci अनुक्रम बनाते हैं – यह एक खूबसूरत गणितीय पैटर्न है जहाँ प्रत्येक संख्या पिछले दो की कुल होती है: 0, 1, 1, 2, 3, 5, 8, 13... (मज़ेदार तथ्य: यह पैटर्न आपको प्रकृति में हर जगह मिलेगा – सूरजमुखी के बीजों की घुमावदार लकीरें, पाइनकोन के पैटर्न, यहां तक कि आकाशगंगाओं के बनने का तरीका भी!) +हम एक ही काम को दो बिल्कुल अलग स्टाइलों में लिखी हुई देखेंगे। दोनों उस चीज़ को बनाते हैं जिसे Fibonacci अनुक्रम कहते हैं – यह एक सुंदर गणितीय पैटर्न है जहाँ हर नंबर पिछले दो नंबरों का योग होता है: 0, 1, 1, 2, 3, 5, 8, 13... (मज़ेदार तथ्य: आप यह पैटर्न प्रकृति में हर जगह पाएंगे – सूरजमुखी के बीजों के सर्पिल, पाइंस के फूल के पैटर्न, यहाँ तक कि आकाशगंगाओं के गठन में!) -मुक़ाबला देखने के लिए तैयार? चलिए शुरू करते हैं! +तैयार हैं फर्क देखने के लिए? चलिए! -**उच्च-स्तरीय भाषा (JavaScript) – मानव-मैत्रीपूर्ण:** +**हाई-लेवल भाषा (JavaScript) – मानव-अनुकूल:** ```javascript // चरण 1: बुनियादी फिबोनाच्ची सेटअप @@ -184,28 +184,28 @@ console.log('Fibonacci sequence:'); ``` **यह कोड क्या करता है:** -- **घोषित करें** एक कॉन्स्टेंट कि हम कितने फिबोनाची नंबर जनरेट करना चाहते हैं -- **शुरुआत करें** दो वेरिएबल्स जो अनुक्रम में वर्तमान और अगली संख्या को ट्रैक करें -- **सेट करें** शुरुआती मान (0 और 1) जो फिबोनाची पैटर्न को परिभाषित करते हैं -- **दिखाएँ** एक हेडर संदेश अपने आउटपुट को पहचानने के लिए +- **घोषणा** करता है एक कॉन्स्टेंट कि हमें कितने Fibonacci नंबर जनरेट करने हैं +- **इनिशियलाइज़** करता है दो वैरिएबल जो अनुक्रम के वर्तमान और अगले नंबर को ट्रैक करते हैं +- **सेटअप** करता है शुरुआती मान (0 और 1) जो Fibonacci पैटर्न को परिभाषित करते हैं +- **प्रदर्शित** करता है एक शीर्षक संदेश जो हमारे आउटपुट की पहचान करता है ```javascript -// चरण 2: लूप के साथ अनुक्रम बनाएँ +// चरण 2: एक लूप के साथ अनुक्रम उत्पन्न करें for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // अनुक्रम में अगला संख्या गणना करें + // अनुक्रम में अगला नंबर निकालें const sum = current + next; current = next; next = sum; } ``` -**यहाँ क्या होता है:** -- **लूप करें** अनुक्रम की हर स्थिति पर `for` लूप का उपयोग कर -- **दिखाएँ** प्रत्येक संख्या को उसकी स्थिति के साथ टेम्पलेट लिटरल फॉर्मेटिंग के माध्यम से -- **गणना करें** अगली फिबोनाची संख्या को वर्तमान और अगले मान जोड़कर -- **अपडेट करें** हमारे ट्रैकिंग वेरिएबल्स को अगली पुनरावृत्ति के लिए +**यहाँ क्या होता है, उसका विश्लेषण:** +- **लूप** करता है हमारे अनुक्रम के प्रत्येक स्थान पर `for` लूप का उपयोग कर +- **प्रदर्शित** करता है हर नंबर को उसके स्थान के साथ टेम्प्लेट लिटरल फॉर्मेटिंग के ज़रिये +- **गणना** करता है अगला Fibonacci नंबर वर्तमान और अगले मान को जोड़कर +- **अपडेट** करता है हमारे ट्रैकिंग वैरिएबल्स को अगले चक्र में जाने के लिए ```javascript // चरण 3: आधुनिक कार्यात्मक दृष्टिकोण @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**ऊपर हमने किया है:** -- **बनाया** एक पुन: प्रयोज्य फ़ंक्शन आधुनिक ऐरो फ़ंक्शन सिंटैक्स का उपयोग करते हुए -- **बनाया** एक एरे जिसमें पूरा अनुक्रम संग्रहीत किया गया, बजाय एक-एक करके दिखाने के -- **इस्तेमाल किया** एरे इंडेक्सिंग हर नए नंबर की गणना करने के लिए पिछले मानों से -- **रिटर्न किया** पूरा अनुक्रम ताकि इसे प्रोग्राम के अन्य भागों में फ्लेक्सिबली उपयोग किया जा सके +**ऊपर हमने:** +- **बनाया** एक पुन: उपयोग योग्य फ़ंक्शन आधुनिक तीर फ़ंक्शन सिंटैक्स का उपयोग करके +- **संभाला** एक एरे जिससे पूरा श्रृंखला संग्रहित की जाए बजाय एक एक करके दिखाने के +- **इस्तेमाल किया** एरे इंडेक्सिंग जिससे हर नया नंबर पिछले मानों से निकाला जाए +- **लौटाया** पूरी श्रृंखला प्रोग्राम के अन्य हिस्सों में लचीलेपन के लिए -**निम्न-स्तरीय भाषा (ARM Assembly) – कंप्यूटर-मैत्रीपूर्ण:** +**लो-लेवल भाषा (ARM Assembly) – कंप्यूटर-अनुकूल:** ```assembly area ascen,code,readonly @@ -257,127 +257,128 @@ back add r0,r1 end ``` -ध्यान दें कि JavaScript संस्करण लगभग अंग्रेज़ी निर्देशों जैसा पढ़ता है, जबकि Assembly संस्करण में ऐसे रहस्यमय कमांड हैं जो सीधे कंप्यूटर के प्रोसेसर को नियंत्रित करते हैं। दोनों काम बिल्कुल समान पूरा करते हैं, लेकिन उच्च-स्तरीय भाषा मनुष्यों के लिए समझना, लिखना, और बनाए रखना कहीं अधिक आसान है। +ध्यान दें कि JavaScript संस्करण लगभग अंग्रेज़ी निर्देशों की तरह पढ़ता है, जबकि Assembly संस्करण ऐसे गुप्त कमांडों का उपयोग करता है जो सीधे कंप्यूटर के प्रोसेसर को नियंत्रित करते हैं। दोनों एक ही काम पूरा करते हैं, लेकिन हाई-लेवल भाषा इंसानों के लिए समझना, लिखना और बनाए रखना बहुत आसान है। + +**मुख्य अंतर जो आप देखेंगे:** +- **पढ़ने में आसान**: JavaScript वर्णनात्मक नामों का उपयोग करता है जैसे `fibonacciCount` जबकि Assembly गुप्त लेबल जैसे `r0`, `r1` का उपयोग करता है +- **टिप्पणियाँ**: उच्च-स्तरीय भाषाएं व्याख्यात्मक टिप्पणियाँ प्रोत्साहित करती हैं जो कोड को आत्म-प्रलेखित बनाती हैं +- **संरचना**: JavaScript का तार्किक प्रवाह आदमियों की तरह समस्या को चरण-दर-चरण सोचने से मेल खाता है +- **रखरखाव**: अलग-अलग आवश्यकताओं के लिए JavaScript संस्करण को अपडेट करना सरल और स्पष्ट है -**मुख्य फर्क जो आप देखेंगे:** -- **पठन योग्यता**: JavaScript में वर्णनात्मक नाम जैसे `fibonacciCount` होते हैं जबकि Assembly में रहस्यमय लेबल्स जैसे `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 बजे तक डिलीवर करती है" सहेज लेते हैं और फोन खुद नंबर याद रखता है। वेरिएबल्स भी बिल्कुल ऐसे ही होते हैं! वे लेबल वाले कंटेनर की तरह होते हैं जहाँ आपका प्रोग्राम जानकारी संग्रह कर सकता है और बाद में नाम के जरिए उसे पुनः प्राप्त कर सकता है जो सच में समझ में आता है। +अपनी फोन की संपर्क सूची के बारे में सोचें। आप हर किसी का फोन नंबर याद नहीं रखते – बल्कि आप "माँ," "सबसे अच्छा दोस्त," या "पिज़्ज़ा जगह जो 2 बजे तक डिलीवरी करती है" सहेजते हैं और आपका फोन असली नंबर याद रखता है। चर बिल्कुल इसी तरह काम करते हैं! वे लेबल वाले कंटेनर की तरह होते हैं जहां आपका प्रोग्राम जानकारी संग्रहीत कर सकता है और बाद में उसे समझदारी से नाम द्वारा पुनः प्राप्त कर सकता है। -यह दिलचस्प है: वेरिएबल्स आपके प्रोग्राम के चलते समय बदल सकते हैं (इसी कारण इन्हें "वेरिएबल" कहा जाता है – समझे?). जैसे आप पिज़्ज़ा की दुकान का संपर्क अपडेट कर सकते हैं यदि कहीं बेहतर मिल जाए, वैसे ही वेरिएबल्स तब अपडेट होते हैं जब प्रोग्राम नई जानकारी सीखता है या परिस्थिति बदलती है! +यह वास्तव में मज़ेदार है: जैसे-जैसे आपका प्रोग्राम चलता है, चर बदल सकते हैं (इसलिए इन्हें "चर" कहा जाता है – समझ गए ना?). ठीक वैसे ही जैसे आप अपने पिज़्ज़ा जगह के संपर्क को अपडेट करते हैं जब आपको कोई बेहतर जगह मिलती है, चर भी प्रोग्राम के नई जानकारी सीखने या परिस्थितियों के बदलने पर अपडेट हो सकते हैं! -आइए मैं आपको दिखाता हूँ कि यह कितना सरल और खूबसूरत हो सकता है: +आइए मैं आपको दिखाऊं कि यह कितना खूबसूरती से सरल हो सकता है: ```javascript -// चरण 1: मूल चर बनाना +// चरण 1: बुनियादी वेरिएबल्स बनाना const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**इन अवधारणाओं को समझना:** -- `const` वेरिएबल्स में अपरिवर्तनीय मान संग्रहीत करें (जैसे साइट का नाम) -- `let` का उपयोग उन मानों के लिए करें जो प्रोग्राम के दौरान बदल सकते हैं -- विभिन्न डाटा प्रकारों को सौंपें: स्ट्रिंग्स (टेक्स्ट), संख्याएं, और बूलीयन (सही/गलत) -- वर्णनात्मक नाम चुनें जो समझाएं कि हर वेरिएबल में क्या है + +**इन अवधारणाओं को समझना:** +- `const` चर में अपरिवर्तनीय मान संग्रहित करें (जैसे साइट का नाम) +- `let` का उपयोग उन मानों के लिए करें जो आपके प्रोग्राम के दौरान बदल सकते हैं +- विभिन्न डेटा प्रकार सौंपें: स्ट्रिंग (पाठ), संख्याएं, और बूलियन (सत्य/असत्य) +- वर्णनात्मक नाम चुनें जो बताते हैं कि प्रत्येक चर में क्या है ```javascript -// चरण 2: संबंधित डेटा को समूहित करने के लिए वस्तुओं के साथ कार्य करना +// चरण 2: संबंधित डेटा को समूहित करने के लिए ऑब्जेक्ट्स के साथ काम करना const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**ऊपर हमने:** -- एक ऑब्जेक्ट बनाया जो मौसम से संबंधित जानकारी को एक साथ रखता है -- एक ही वेरिएबल नाम के तहत कई डेटा टुकड़े व्यवस्थित किए -- प्रत्येक जानकारी के टुकड़े को स्पष्ट रूप से लेबल करने के लिए की-वैल्यू पेयर इस्तेमाल किए + +**ऊपर, हमने:** +- संबंधित मौसम जानकारी को एक वस्तु में समूहित किया +- कई डेटा टुकड़ों को एक चर नाम के अंतर्गत व्यवस्थित किया +- प्रत्येक डेटा को स्पष्ट रूप से लेबल करने के लिए कुंजी-मूल्य जोड़े का उपयोग किया ```javascript -// चरण 3: चर का उपयोग और अपडेट करना +// चरण 3: वेरिएबल्स का उपयोग करना और उन्हें अपडेट करना console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// परिवर्तनीय चर को अपडेट करना +// परिवर्तनीय वेरिएबल्स को अपडेट करना currentWeather = "cloudy"; temperature = 68; ``` - -**आइए हर हिस्से को समझें:** -- टेम्प्लेट लिटरेल्स का उपयोग करके `${}` सिंटैक्स से जानकारी दिखाएं -- डॉट नोटेशन (`weatherData.windSpeed`) से ऑब्जेक्ट प्रॉपर्टीज़ तक पहुँचें -- `let` से घोषित वेरिएबल्स को बदलते हालात के अनुसार अपडेट करें -- कई वेरिएबल्स को मिलाकर सार्थक संदेश बनाएं + +**हर हिस्से को समझें:** +- टेम्प्लेट लिटरल्स का उपयोग करके `${}` सिंटैक्स के साथ जानकारी प्रदर्शित करें +- डॉट नोटेशन (`weatherData.windSpeed`) का उपयोग करके वस्तु की विशेषताओं तक पहुँचें +- बदलती स्थिति को प्रतिबिंबित करने के लिए `let` से घोषित चर को अपडेट करें +- अर्थपूर्ण संदेश बनाने के लिए कई चर संयोजित करें ```javascript -// चरण 4: साफ़ कोड के लिए आधुनिक डीस्ट्रक्चरिंग +// चरण 4: स्वच्छ कोड के लिए आधुनिक डेस्ट्रक्चरिंग const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**आपको जानना ज़रूरी है:** -- ऑब्जेक्ट से विशिष्ट प्रॉपर्टीज़ डिस्ट्रक्चरिंग असाइनमेंट से निकालें -- ऑब्जेक्ट कीस के समान नामों वाले नए वेरिएबल्स स्वतः बनाएं -- बार-बार डॉट नोटेशन इस्तेमाल करने से बचकर कोड को सरल बनाएं + +**आपको जो जानना जरूरी है:** +- वस्तुओं से विशिष्ट गुणों को डिकंस्ट्रक्चरिंग असाइनमेंट से निकालें +- ऑब्जेक्ट की चाबियों के समान नाम के साथ नए चर स्वचालित रूप से बनाएं +- अक्सर दोहराए जाने वाले डॉट नोटेशन से बचकर कोड को सरल बनाएं ### नियंत्रण प्रवाह: अपने प्रोग्राम को सोचने की शिक्षा देना -ठीक है, यहाँ प्रोग्रामिंग वास्तव में दिमाग घुमाने वाली हो जाती है! **कंट्रोल फ्लो** बुनियादी तौर पर आपके प्रोग्राम को स्मार्ट निर्णय लेना सिखाना है, बिलकुल उसी तरह जैसे आप हर दिन बिना सोचे समझे करते हैं। +ठीक है, यह वह जगह है जहां प्रोग्रामिंग बिल्कुल दिमाग उड़ाने वाली हो जाती है! **नियंत्रण प्रवाह** मूल रूप से आपके प्रोग्राम को स्मार्ट निर्णय लेना सिखाना है, बिल्कुल वैसे ही जैसे आप बिना सोचे वैसे करते हैं। -कल्पना कीजिए: आज सुबह आपने ऐसा कुछ किया होगा जैसे "अगर बारिश हो रही है, तो छाता लूँगा। अगर ठंड है, तो जैकेट पहनूंगा। अगर मैं देर से हूँ, तो नाश्ता छोड़कर रास्ते में कॉफी लूँगा।" आपका दिमाग स्वाभाविक रूप से हर दिन इस तरह के कई फैसले करता है! +कल्पना करें: आज सुबह आपने कुछ ऐसा किया होगा "अगर बारिश हो रही है, तो मैं छाता ले जाऊंगा। अगर ठंड है, तो जैकेट पहनूंगा। अगर मैं देर से चल रहा हूं, तो नाश्ता छोड़ दूंगा और रास्ते में कॉफ़ी लूंगा।" आपका दिमाग स्वाभाविक रूप से इस if-then तर्क का पालन करता है दिन में दर्जनों बार! -यही वजह है कि प्रोग्राम्स बुद्धिमान और जीवंत लगते हैं, केवल एक उबाऊ, अनुमानित स्क्रिप्ट का पालन नहीं करते। वे स्थिति को देख सकते हैं, परिस्थितियों का मूल्यांकन कर सकते हैं, और सही प्रतिक्रिया दे सकते हैं। यह आपके प्रोग्राम को एक दिमाग देने जैसा है जो अनुकूलन कर सकता है और निर्णय ले सकता है! +इसी कारण प्रोग्राम बुद्धिमान और जीवंत लगते हैं बजाय कुछ उबाऊ, पूर्वानुमेय स्क्रिप्ट का पालन करने के। वे वास्तव में स्थिति को देख सकते हैं, मूल्यांकन कर सकते हैं कि क्या हो रहा है, और उपयुक्त प्रतिक्रिया दे सकते हैं। यह ऐसा है जैसे आपके प्रोग्राम को एक दिमाग दिया हो जो अनुकूलित कर सकता है और विकल्प चुन सकता है! -देखना चाहते हैं कि यह कितना खूबसूरती से काम करता है? मैं दिखाता हूँ: +देखना चाहते हैं कि यह कितना खूबसूरती से काम करता है? मैं आपको दिखाता हूं: ```javascript -// चरण 1: मूल शर्तीय तर्क +// चरण 1: मूल सशर्त तर्क const userAge = 17; if (userAge >= 18) { @@ -387,15 +388,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 +408,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,24 +446,24 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**यह कोड निम्न कार्य करता है:** -- वेरिएबल के मान को कई विशिष्ट मामलों के साथ मिलाता है -- समान मामलों को समूहित करता है (वर्किंग दिन बनाम सप्ताहांत) -- जब मेल मिलता है तो उपयुक्त कोड ब्लॉक चलाता है -- अप्रत्याशित मानों को संभालने के लिए `default` मामला शामिल करता है -- कोड को अगले मामले तक जाने से रोकने के लिए `break` स्टेटमेंट का उपयोग करता है -> 💡 **वास्तविक दुनिया की तुलना**: कंट्रोल फ्लो को ऐसे समझिए जैसे आपके पास दुनिया का सबसे धीरज वाला GPS हो जो आपको दिशानिर्देश देता है। यह कह सकता है "अगर मेन स्ट्रीट पर ट्रैफिक है, तो हाईवे लें। अगर हाईवे पर निर्माण कार्य है, तो मनोरम रास्ता आजमाएं।" प्रोग्राम इसी तरह की शर्तीय लॉजिक का इस्तेमाल करते हैं ताकि वे बुद्धिमानी से विभिन्न परिस्थितियों का जवाब दें और उपयोगकर्ताओं को सर्वोत्तम अनुभव प्रदान करें। +**यह कोड निम्नलिखित करता है:** +- चर मान को कई विशिष्ट मामलों के खिलाफ मिलान करता है +- समान मामलों को समूहबद्ध करता है (सप्ताह के दिन बनाम सप्ताहांत) +- मैच मिलने पर उपयुक्त कोड ब्लॉक निष्पादित करता है +- अप्रत्याशित मानों को संभालने के लिए `default` केस शामिल करता है +- अगले केस में कोड जारी न रहने देने के लिए `break` कथनों का उपयोग करता है -### 🎯 **अवधारणा जाँच: निर्माण खंडों में महारत** +> 💡 **वास्तविक दुनिया का उपमा**: नियंत्रण प्रवाह को ऐसे सोचें जैसे दुनिया का सबसे धैर्यवान जीपीएस जो आपको दिशा-निर्देश दे रहा हो। यह कह सकता है "अगर मेन स्ट्रीट पर ट्रैफ़िक है, तो राजमार्ग लें। अगर राजमार्ग निर्माण बंद है, तो प्राकृतिक रास्ता ले।" प्रोग्राम बिल्कुल इसी प्रकार की सशर्त तर्क प्रणाली का उपयोग करते हैं ताकि वे अलग-अलग स्थितियों पर बुद्धिमानी से प्रतिक्रिया दे सकें और हमेशा उपयोगकर्ताओं को सर्वोत्तम अनुभव प्रदान कर सकें। -**देखते हैं कि आप मूल बातें कितना समझे हैं:** -- क्या आप अपने शब्दों में वेरिएबल और स्टेटमेंट के बीच का अंतर समझा सकते हैं? -- एक वास्तविक जीवन की स्थिति सोचिए जहाँ आप if-then निर्णय का उपयोग कर सकें (जैसे हमारा मतदान उदाहरण) -- प्रोग्रामिंग लॉजिक के बारे में कौन सी बात ने आपको आश्चर्यचकित किया? +### 🎯 **अवधारणा जांच: बिल्डिंग ब्लॉक्स विशेषज्ञता** -**त्वरित आत्मविश्वास बढ़ाने वाला:** +**आइए देखें आप मूल बातें कितनी अच्छी तरह समझते हैं:** +- क्या आप अपने शब्दों में चर और वक्तव्य के बीच अंतर समझा सकते हैं? +- कोई वास्तविक स्थिति सोचें जहां आप if-then निर्णय का उपयोग करेंगे (जैसे हमारा मतदान उदाहरण) +- प्रोग्रामिंग तर्क में आपको कौन सी बात सबसे अधिक आश्चर्यचकित करती है? + +**त्वरित आत्मविश्वास बढ़ाने वाला:** ```mermaid flowchart LR A["📝 कथन
(निर्देश)"] --> B["📦 चर
(भंडारण)"] --> C["🔀 नियंत्रण प्रवाह
(निर्णय)"] --> D["🎉 कार्यशील प्रोग्राम!"] @@ -471,31 +472,31 @@ flowchart LR style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **आगे क्या आने वाला है**: हम इन अवधारणाओं में और गहराई से उतरेंगे और इस अद्भुत यात्रा को साथ मिलकर जारी रखेंगे! अभी बस उन सभी शानदार संभावनाओं को लेकर उत्साहित होने पर ध्यान दें जो आपके सामने हैं। विशेष कौशल और तकनीकें अभ्यास के दौरान स्वाभाविक रूप से आ जाएंगी – मुझे विश्वास है कि यह उम्मीद से कहीं अधिक मज़ेदार होगा! +``` +✅ **आगामी विषय**: हम इन अवधारणाओं में गहराई से जाने वाले हैं और इस अद्भुत यात्रा को साथ में जारी रखेंगे! अभी बस इस बात पर ध्यान दें कि आपके सामने कितनी अद्भुत संभावनाएं हैं। विशिष्ट कौशल और तकनीकें स्वाभाविक रूप से अभ्यास के साथ आपके पास आएंगी – मैं वादा करता हूं कि यह आप की अपेक्षा से कहीं ज्यादा मज़ेदार होने वाला है! -## व्यापार के उपकरण +## उपकरण -ठीक है, यहाँ मैं इतना उत्साहित हूँ कि खुद को रोक नहीं पा रहा! 🚀 हम उन अविश्वसनीय उपकरणों के बारे में बात करने वाले हैं जो आपको ऐसा महसूस कराएंगे जैसे आपको डिजिटल अंतरिक्ष यान की चाबियाँ मिल गई हों। +ठीक है, सच कहूं तो अब मैं इतना उत्साहित हूं कि खुद को रोकना मुश्किल हो रहा है! 🚀 हम बात करने जा रहे हैं उन अद्भुत उपकरणों की जो आपको ऐसा महसूस कराएंगे जैसे आपको एक डिजिटल अंतरिक्ष यान की चाबियाँ सौंप दी गई हों। -आप जानते हैं जैसे एक शेफ के पास बेंजोरी नाइफ्स होते हैं जो उनके हाथों का विस्तार लगते हैं? या जैसे एक संगीतकार के पास एक गिटार होता है जो छूते ही संगीत गाने लगता है? वैसे ही डेवलपर्स के पास अपने जादुई उपकरण होते हैं, और यहाँ कुछ है जो आपका दिमाग उड़ाने वाला है – इनमें से अधिकांश पूरी तरह से मुफ़्त हैं! +आप जानते हैं कैसे एक शेफ के पास परफेक्टली बैलेंस्ड चाकू होते हैं जो उनके हाथों का एक्सटेंशन महसूस होते हैं? या किसी संगीतकार के पास वह एक गिटार जो छूते ही गाना शुरू कर देता है? ठीक वैसे ही, डेवलपर्स के पास भी ऐसे जादुई उपकरण होते हैं, और यहाँ क्या है जो आपको पूरी तरह से हैरान कर देगा – उनमें से अधिकांश पूरी तरह से मुफ्त हैं! -मैं इस बारे में सोचकर बिल्कुल उछल रहा हूँ कि ये उपकरण आपके साथ साझा करूँ क्योंकि इन्होंने सॉफ्टवेयर बनाने के तरीके में क्रांति ला दी है। हम बात कर रहे हैं AI-सक्षम कोडिंग असिस्टेंट्स की जो आपके कोड को लिखने में सहायता कर सकते हैं (मैं मज़ाक नहीं कर रहा!), क्लाउड वातावरण जहां से आप वाई-फाई की मदद से कहीं से भी पूरे ऐप्लिकेशन बना सकते हैं, और डिबगिंग उपकरण जो इतने परिष्कृत हैं कि वे आपकी प्रोग्रामिंग के लिए एक्स-रे विज़न की तरह हैं। +मैं सचमुच अपनी कुर्सी में कूद रहा हूं क्योंकि ये उपकरण हमारे सॉफ्टवेयर निर्माण के तरीके को पूरी तरह से बदल चुके हैं। हम एआई समर्थित कोडिंग सहायक की बात कर रहे हैं जो आपके कोड को लिखने में मदद कर सकते हैं (मैं मजाक नहीं कर रहा!), क्लाउड वातावरण जहां आप वाई-फाई से कहीं से भी पूरी एप्लिकेशन बना सकते हैं, और डिबगिंग टूल इतने परिष्कृत हैं कि वे आपके प्रोग्राम के लिए एक्स-रे विजन की तरह हैं। -और यह हिस्सा जो मुझे अभी भी रोमांचित करता है: ये "शुरुआती उपकरण" नहीं हैं जिनसे आप आगे बढ़ जाएंगे। ये वही पेशेवर ग्रेड उपकरण हैं जिन्हें गूगल, नेटफ्लिक्स, और जो इंडी ऐप स्टूडियो आप पसंद करते हैं, वे अभी इसी पल उपयोग कर रहे हैं। ये इस्तेमाल करके आपको प्रो जैसा महसूस होगा! +और यह बात जो अभी भी मेरे रोंगटे खड़े कर देती है: ये "शुरुआती उपकरण" नहीं हैं जिन्हें आप जल्द ही छोड़ देंगे। ये बिल्कुल वही पेशेवर स्तर के उपकरण हैं जिनका उपयोग Google, Netflix, और आपके पसंदीदा इंडी ऐप स्टूडियो के डेवलपर्स अभी इसी पल कर रहे हैं। इन्हें इस्तेमाल करते हुए आप खुद को एक प्रोफेशनल महसूस करेंगे! ```mermaid graph TD - A["💡 आपका विचार"] --> B["⌨️ कोड एडिटर
(VS कोड)"] - B --> C["🌐 ब्राउज़र डेवलपर टूल्स
(टेस्टिंग और डिबगिंग)"] + A["💡 आपका विचार"] --> B["⌨️ कोड संपादक
(VS कोड)"] + B --> C["🌐 ब्राउज़र डेवलपर टूल्स
(परीक्षण और डिबगिंग)"] C --> D["⚡ कमांड लाइन
(स्वचालन और उपकरण)"] - D --> E["📚 दस्तावेज़ीकरण
(सीखन और संदर्भ)"] - E --> F["🚀 शानदार वेब एप्लिकेशन!"] + D --> E["📚 दस्तावेज़ीकरण
(सीखना और संदर्भ)"] + E --> F["🚀 अद्भुत वेब ऐप!"] - B -.-> G["🤖 एआई सहायक
(GitHub Copilot)"] + B -.-> G["🤖 AI सहायक
(GitHub कॉपिलट)"] C -.-> H["📱 डिवाइस परीक्षण
(उत्तरदायी डिज़ाइन)"] - D -.-> I["📦 पैकेज प्रबंधक
(npm, yarn)"] - E -.-> J["👥 समुदाय
(Stack Overflow)"] + D -.-> I["📦 पैकेज प्रबंधक
(npm, यार्न)"] + E -.-> J["👥 समुदाय
(स्टैक ओवरफ़्लो)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -503,106 +504,107 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### कोड एडिटर्स और IDEs: आपके नए डिजिटल सबसे अच्छे दोस्त +``` +### कोड एडिटर और IDEs: आपके नए डिजिटल सबसे अच्छे दोस्त + +चलिए बात करते हैं कोड एडिटरों की – ये सचमुच आपके नए पसंदीदा जगह बनने वाले हैं! इन्हें अपने व्यक्तिगत कोडिंग आश्रम की तरह सोचें जहां आप अपना अधिकांश समय डिजिटल रचनाओं को तैयार करने और पूर्ण करने में बिताएंगे। -आइए कोड एडिटर्स की बात करते हैं – ये वास्तव में आपके पसंदीदा जगहें बनने वाले हैं! इन्हें ऐसे समझिए जैसे आपका व्यक्तिगत कोडिंग अभयारण्य जहाँ आप अपने डिजिटल निर्माण को बनाने और सुधारने में अधिकांश समय बिताएंगे। +लेकिन आधुनिक एडिटरों में एक जादू है: ये सिर्फ फैंसी टेक्स्ट एडिटर नहीं हैं। ये आपके साथ 24/7 बैठे सबसे प्रतिभाशाली, सहायक कोडिंग सलाहकार की तरह हैं। वे आपकी टाइपो को तब पकड़ लेते हैं जब आपने उन्हें नोटिस भी नहीं किया होता, सुधार सुझाते हैं जो आपको प्रतिभाशाली दिखाते हैं, हर कोड के हिस्से को समझने में मदद करते हैं, और कुछ आपके टाइप करने वाली बात को पूर्वानुमानित कर आपके विचार पूरा करने का ऑफर देते हैं! -लेकिन आधुनिक एडिटर्स में जो असाधारण बात है वह यह है कि वे केवल साधारण टेक्स्ट एडिटर नहीं हैं। वे ऐसे हैं जैसे आपके बगल में दिन-रात सबसे बुद्धिमान, सहायक कोडिंग मेंटर बैठे हों। ये आपकी टाइपिंग की गलतियाँ पहले पकड़ लेते हैं जब आपको पता भी नहीं चलता, सुधार के सुझाव देते हैं जो आपको जीनियस जैसा दिखाते हैं, यह समझाने में मदद करते हैं कि हर कोड का टुकड़ा क्या करता है, और उनमें से कुछ पूर्वानुमान भी लगा लेते हैं कि आप क्या टाइप करने वाले हैं और आपके विचार पूरे करने का प्रस्ताव देते हैं! +मुझे याद है जब मैंने पहली बार ऑटो-कंप्लीशन देखा था – मुझे लगा मानो मैं भविष्य में रह रहा हूं। आप कुछ लिखना शुरू करते हैं, और आपका एडिटर कहता है, "हे, क्या आप इसी फ़ंक्शन के बारे में सोच रहे थे जो बिल्कुल वही करता है जो आपको चाहिए?" यह ऐसा है जैसे आपके कोडिंग साथी के पास मन पढ़ने की क्षमता हो! -मुझे याद है जब मैंने पहली बार ऑटो-कंप्लीशन देखा था – मुझे सचमुच ऐसा लगा जैसे मैं भविष्य में जी रहा हूँ। आप कुछ टाइप करना शुरू करते हैं, और आपका एडिटर कहता है, "अरे, क्या आप यह फंक्शन इस्तेमाल करने जा रहे थे जो बिल्कुल आपकी जरूरत पूरा करता है?" यह ऐसा है जैसे आपके कोडिंग साथी में एक मानसिक रीडर हो! +**क्या इन्हें इतना अद्भुत बनाता है?** -**ये एडिटर्स इतने अद्भुत क्या बनाते हैं?** +आधुनिक कोड एडिटर में आपकी उत्पादकता बढ़ाने के लिए प्रभावशाली विशेषताएं होती हैं: -आधुनिक कोड एडिटर्स उत्पादकता बढ़ाने के लिए फीचर्स का प्रभावशाली सेट प्रदान करते हैं: +| विशेषता | क्या करता है | क्यों मदद करता है | +|---------|--------------|------------------| +| **सिंटैक्स हाईलाइटिंग** | आपके कोड के विभिन्न भागों को रंगीन करता है | कोड को पढ़ना आसान बनाता है और त्रुटियां पकड़ने में मदद करता है | +| **ऑटो-कंप्लीशन** | टाइप करते समय कोड सुझाता है | कोडिंग तेजी से करता है और टाइपो कम करता है | +| **डिबगिंग टूल्स** | त्रुटियां खोजने और ठीक करने में मदद करता है | समस्या सुलझाने में कई घंटे बचाता है | +| **एक्सटेंशन्स** | विशेषताएं जोड़ता है | किसी भी तकनीक के लिए अपने एडिटर को अनुकूलित करें | +| **एआई असिस्टेंट्स** | कोड और स्पष्टीकरण सुझाते हैं | सीखने और उत्पादकता को तेज़ करता है | -| फीचर | क्या करता है | क्यों मददगार है | -|---------|--------------|--------------| -| **सिंटैक्स हाइलाइटिंग** | कोड के विभिन्न हिस्सों को रंगीन बनाता है | कोड पढ़ना आसान बनाता है और त्रुटियाँ पहचानने में मदद करता है | -| **ऑटो-कंप्लीशन** | टाइप करते वक्त कोड का सुझाव देता है | कोडिंग तेज करता है और टाइपो कम करता है | -| **डिबगिंग टूल्स** | त्रुटियाँ खोजने और सुधारने में मदद करता है | समस्या सुलझाने में घंटों बचाता है | -| **एक्सटेंशंस** | विशेष फीचर्स जोड़ता है | किसी भी तकनीक के लिए एडिटर अनुकूलित करता है | -| **AI असिस्टेंट्स** | कोड और व्याख्यान सुझाव देते हैं | सीखने और उत्पादकता को तेज करता है | +> 🎥 **वीडियो संसाधन**: इन टूल्स को क्रियाशील रूप में देखना चाहते हैं? इस [Tools of the Trade वीडियो](https://youtube.com/watch?v=69WJeXGBdxg) को देखें जिसमें एक व्यापक अवलोकन है। -> 🎥 **वीडियो संसाधन**: इन उपकरणों को क्रियान्वित देखने के लिए यह [Tools of the Trade वीडियो](https://youtube.com/watch?v=69WJeXGBdxg) देखें। +#### वेब विकास के लिए अनुशंसित एडिटर -#### वेब विकास के लिए अनुशंसित एडिटर्स +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (मुफ्त) +- वेब डेवलपर्स के बीच सबसे लोकप्रिय +- उत्कृष्ट एक्सटेंशन इकोसिस्टम +- बिल्ट-इन टर्मिनल और Git इंटीग्रेशन +- **जरूरी एक्सटेंशन्स**: + - [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)** (मुफ़्त) -- वेब डेवलपर्स में सबसे लोकप्रिय -- एक्सटेंशन का बेहतरीन पारिस्थितिकी तंत्र -- इनबिल्ट टर्मिनल और Git इंटीग्रेशन -- **जरूरी एक्सटेंशंस:** - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-सक्षम कोड सुझाव - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - रियल-टाइम सहयोग - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - स्वचालित कोड फॉर्मैटिंग - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - कोड में टाइपो पकड़ना +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (पेड, छात्रों के लिए मुफ्त) +- उन्नत डीबगिंग और परीक्षण उपकरण +- बुद्धिमान कोड पूर्णता +- बिल्ट-इन संस्करण नियंत्रण -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (पेड, छात्रों के लिए मुफ्त) -- उन्नत डिबगिंग और परीक्षण उपकरण -- बुद्धिमान कोड पूर्णता -- इनबिल्ट संस्करण नियंत्रण +**क्लाउड-आधारित IDEs** (विभिन्न मूल्य निर्धारण) +- [GitHub Codespaces](https://github.com/features/codespaces) - आपके ब्राउज़र में पूर्ण VS Code +- [Replit](https://replit.com/) - सीखने और कोड साझा करने के लिए शानदार +- [StackBlitz](https://stackblitz.com/) - तात्कालिक, पूर्ण स्टैक वेब विकास -**क्लाउड-आधारित IDEs** (विभिन्न मूल्य निर्धारण) -- [GitHub Codespaces](https://github.com/features/codespaces) - आपके ब्राउज़र में पूरा VS Code -- [Replit](https://replit.com/) - सीखने और कोड साझा करने के लिए उत्कृष्ट -- [StackBlitz](https://stackblitz.com/) - त्वरित, पूर्ण स्टैक वेब विकास +> 💡 **शुरुआत करने का सुझाव**: Visual Studio Code से शुरू करें – यह मुफ्त है, उद्योग में व्यापक रूप से उपयोग किया जाता है, और इसका विशाल समुदाय है जो मददगार ट्यूटोरियल और एक्सटेंशन्स बनाता है। -> 💡 **शुरुआत करने का सुझाव:** Visual Studio Code से शुरू करें – यह मुफ़्त है, उद्योग में व्यापक रूप से उपयोग किया जाता है, और इसके लिए कई उपयोगी ट्यूटोरियल और एक्सटेंशंस की बड़ी समुदाय है। ### वेब ब्राउज़र: आपका गुप्त विकास प्रयोगशाला -ठीक है, तैयार हो जाइए अपने दिमाग को पूरी तरह से उड़ाने के लिए! आप जानते हैं कि आप ब्राउज़रों का उपयोग कैसे सोशल मीडिया स्क्रॉल करने और वीडियो देखने के लिए करते रहे हैं? तो पता चला कि वे इस पूरी अवधि में एक अद्भुत गुप्त डेवलपर प्रयोगशाला छुपाए हुए थे, बस आपके द्वारा खोजे जाने के लिए! +ठीक है, तैयार हो जाइए कि आपका दिमाग पूरी तरह से उड़ जाए! आप वेब ब्राउज़रों का उपयोग सोशल मीडिया स्क्रॉल करने और वीडियो देखने के लिए करते आ रहे हैं, लेकिन पता चला है वे पूरा समय एक अद्भुत गुप्त डेवलपर प्रयोगशाला छुपाए हुए थे, बस आपकी खोज के लिए इंतजार कर रहे थे! -हर बार जब आप किसी वेबपेज पर राइट-क्लिक करके "Inspect Element" चुनते हैं, तो आप डेवलपर टूल्स की एक छिपी हुई दुनिया खोलते हैं जो वास्तव में उन महंगे सॉफ़्टवेयर से भी अधिक शक्तिशाली हैं जिनके लिए मैं कभी सैंकड़ों डॉलर देता था। यह ऐसा है जैसे आपका पुराना साधारण रसोईघर एक गुप्त पैनल के पीछे एक पेशेवर शेफ की प्रयोगशाला छुपाए हुए हो! -पहली बार जब किसी ने मुझे ब्राउज़र DevTools दिखाया, तो मैंने लगभग तीन घंटे सिर्फ क्लिक करते हुए बिताए और कहा "रुको, ये भी कर सकता है?!" आप सचमुच किसी भी वेबसाइट को रियल-टाइम में एडिट कर सकते हैं, देख सकते हैं कि सब कुछ कितनी तेजी से लोड हो रहा है, अपने साइट को विभिन्न डिवाइसों पर कैसे दिखता है टेस्ट कर सकते हैं, और यहां तक कि जावास्क्रिप्ट को पूरी प्रोफेशनल तरह से डिबग कर सकते हैं। यह बिल्कुल दिमाग उड़ाने वाला है! +हर बार जब आप किसी वेबपेज पर राइट-क्लिक करके "Inspect Element" चुनते हैं, तो आप डेवलपर टूल्स की छुपी हुई दुनिया खोल रहे होते हैं जो सचमुच उन महंगे सॉफ्टवेयर से भी ज्यादा शक्तिशाली हैं जिनके लिए मैंने पहले सौ डॉलर से अधिक भुगतान किया था। यह ऐसा है जैसे यह पता चले कि आपका सामान्य पुराना किचन एक गुप्त पैनल के पीछे एक प्रोफेशनल शेफ की प्रयोगशाला छुपाए हुए था! +पहली बार जब किसी ने मुझे ब्राउज़र DevTools दिखाया, तो मैंने लगभग तीन घंटे बस क्लिक करते हुए बिताए और कहा, "रुको, यह भी कर सकता है?!" आप वास्तव में किसी भी वेबसाइट को रियल-टाइम में एडिट कर सकते हैं, ठीक देख सकते हैं कि सब कुछ कितनी जल्दी लोड होता है, यह परीक्षण कर सकते हैं कि आपकी साइट अलग-अलग डिवाइसों पर कैसी दिखती है, और यहां तक कि JavaScript को पूरी तरह से प्रो की तरह डिबग भी कर सकते हैं। यह पूरी तरह से दिमाग उड़ाने वाला है! -**ये हैं वो कारण जिनकी वजह से ब्राउज़र आपका गुप्त हथियार हैं:** +**यहां बताया गया है कि ब्राउज़र आपके गुप्त हथियार क्यों हैं:** -जब आप कोई वेबसाइट या वेब ऐप्लीकेशन बनाते हैं, तो आपको यह देखना होगा कि यह वास्तविक दुनिया में कैसा दिखता है और कैसा व्यवहार करता है। ब्राउज़र न केवल आपका काम दिखाते हैं बल्कि प्रदर्शन, पहुंच और संभावित समस्याओं के बारे में विस्तृत प्रतिक्रिया भी देते हैं। +जब आप वेबसाइट या वेब एप्लिकेशन बनाते हैं, तो आपको यह देखना होता है कि यह असली दुनिया में कैसा दिखता और व्यवहार करता है। ब्राउज़र न केवल आपके काम को दिखाते हैं बल्कि प्रदर्शन, पहुंच योग्यता और संभावित समस्याओं के बारे में विस्तृत प्रतिक्रिया भी प्रदान करते हैं। #### ब्राउज़र डेवलपर टूल्स (DevTools) -आधुनिक ब्राउज़र व्यापक डेवलपमेंट सूट शामिल करते हैं: +आधुनिक ब्राउज़रों में व्यापक विकास सूट शामिल होते हैं: -| टूल श्रेणी | यह क्या करता है | उदाहरण उपयोग केस | -|------------|-----------------|------------------| -| **एलिमेंट इंस्पेक्टर** | HTML/CSS को रियल-टाइम में देखें और संपादित करें | तुरंत परिणाम देखने के लिए स्टाइलिंग में बदलाव करें | -| **कंसोल** | त्रुटि संदेश देखें और जावास्क्रिप्ट टेस्ट करें | समस्याएं डिबग करें और कोड के साथ प्रयोग करें | -| **नेटवर्क मॉनिटर** | संसाधनों के लोड होने का ट्रैक रखें | प्रदर्शन और लोडिंग समय को अनुकूलित करें | -| **सुलभता चेकर** | समावेशी डिजाइन के लिए टेस्ट करें | सुनिश्चित करें कि आपकी साइट सभी उपयोगकर्ताओं के लिए काम करे | -| **डिवाइस सिम्युलेटर** | विभिन्न स्क्रीन साइज पर पूर्वावलोकन करें | बिना कई डिवाइसों के रेस्पॉन्सिव डिजाइन टेस्ट करें | +| टूल श्रेणी | यह क्या करता है | उपयोग का उदाहरण | +|---------------|--------------|------------------| +| **एलीमेंट इंस्पेक्टर** | रियल-टाइम में HTML/CSS देखें और संपादित करें | स्टाइलिंग को समायोजित करें और तुरंत परिणाम देखें | +| **कंसोल** | त्रुटि संदेश देखें और JavaScript का परीक्षण करें | समस्याओं को डिबग करें और कोड के साथ प्रयोग करें | +| **नेटवर्क मॉनिटर** | संसाधन लोडिंग को ट्रैक करें | प्रदर्शन और लोडिंग समय को अनुकूलित करें | +| **पहुंच योग्यता चेकर** | समावेशी डिज़ाइन के लिए परीक्षण करें | सुनिश्चित करें कि आपकी साइट सभी उपयोगकर्ताओं के लिए काम करती है | +| **डिवाइस सिम्युलेटर** | विभिन्न स्क्रीन आकारों पर पूर्वावलोकन करें | बिना कई डिवाइसों के प्रतिक्रियाशील डिज़ाइन का परीक्षण करें | #### विकास के लिए अनुशंसित ब्राउज़र -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - विस्तृत दस्तावेज़ीकरण के साथ उद्योग-मानक DevTools -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - उत्कृष्ट CSS Grid और accessibility टूल्स -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Microsoft के डेवलपर संसाधनों के साथ Chromium आधारित +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - व्यापक दस्तावेज़ीकरण के साथ उद्योग-मानक DevTools +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - उत्कृष्ट CSS Grid और पहुँच योग्यता उपकरण +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium पर आधारित माइक्रोसॉफ्ट के डेवलपर संसाधनों के साथ -> ⚠️ **महत्वपूर्ण परीक्षण टिप**: हमेशा अपनी वेबसाइट्स को कई ब्राउज़रों में टेस्ट करें! जो Chrome में बिल्कुल सही काम करता है, वह Safari या Firefox में अलग दिख सकता है। पेशेवर डेवलपर्स सभी मुख्य ब्राउज़रों में परीक्षण करते हैं ताकि लगातार उपयोगकर्ता अनुभव सुनिश्चित हो सके। +> ⚠️ **महत्वपूर्ण परीक्षण टिप**: हमेशा अपनी वेबसाइट को कई ब्राउज़रों में परखें! जो Chrome में बिल्कुल सही काम करता है, वह Safari या Firefox में अलग दिख सकता है। पेशेवर डेवलपर्स सभी प्रमुख ब्राउज़रों में परीक्षण करते हैं ताकि लगातार उपयोगकर्ता अनुभव सुनिश्चित हो सके। -### कमांड लाइन टूल्स: आपके डेवलपर सुपरपावर के द्वार +### कमांड लाइन टूल्स: आपके डेवलपर सुपरपॉवर्स का द्वार -ठीक है, आइए कमांड लाइन के बारे में पूरी ईमानदारी से बात करें, क्योंकि मैं चाहता हूं कि आप इसे किसी से सुनें जो वास्तव में इसे समझता है। जब मैंने इसे पहली बार देखा – यह सिर्फ एक डरावनी काली स्क्रीन थी जिसमें टेबलाइट टेक्स्ट चमक रहा था – मैं सच में सोच रहा था, "नहीं, बिल्कुल नहीं! यह कुछ 1980 के दशक की हैकर मूवी जैसा लग रहा है, और मैं इसके लिए बिल्कुल स्मार्ट नहीं हूं!" 😅 +ठीक है, यहां कमांड लाइन के बारे में पूरी ईमानदारी से बात करते हैं, क्योंकि मैं चाहता हूं कि आप इसे किसी ऐसे व्यक्ति से सुनें जो इसे सचमुच समझता है। जब मैंने इसे पहली बार देखा – बस यह डरावनी काली स्क्रीन जिसमें टाइपिंग होती है – तो मैंने सच में सोचा, "नहीं, बिल्कुल नहीं! यह किसी 1980 के दशक की हैकर मूवी जैसा लग रहा है, और मैं इसके लिए बिल्कुल भी स्मार्ट नहीं हूं!" 😅 -लेकिन यहां जो मैं चाहता हूं कि कोई तब मुझे बताता, और मैं आपको अभी बता रहा हूं: कमांड लाइन डरावनी नहीं है – यह वास्तव में आपके कंप्यूटर से सीधे बातचीत करने जैसा है। इसे ऐसे समझिए जैसे खाना ऑर्डर करना एक खूबसूरत ऐप सेPictures और मेनू के साथ (जो आसान और सुंदर है) के बजाय अपने पसंदीदा स्थानीय रेस्तरां में जाना, जहां शेफ को पता है कि आपको क्या पसंद है और वह "मुझे कुछ आश्चर्यजनक दें" कहने मात्र से कुछ परफेक्ट बनाने लगता है। +लेकिन यहां वह बात है जो काश उस वक्त मुझे कोई बताता, और जो मैं आपको अभी बता रहा हूं: कमांड लाइन डरावनी नहीं है – यह वास्तव में आपके कंप्यूटर के साथ एक डायरेक्ट बातचीत की तरह है। इसे ऐसे सोचें जैसे आप खाना ऑर्डर कर रहे हों कुछ शानदार ऐप के जरिए जिसमें तस्वीरें और मेनू होते हैं (जो अच्छा और आसान है) बनाम आप अपने पसंदीदा स्थानीय रेस्तरां में जा रहे हों, जहां शेफ़ जानता है कि आपको क्या पसंद है और वह सिर्फ "मुझे कुछ शानदार सरप्राइज कर दो" कहने पर बिल्कुल आवश्यक व्यंजन बना देता है। -कमांड लाइन वह जगह है जहां डेवलपर्स खुद को जादूगर महसूस करते हैं। आप कुछ जादुई शब्द टाइप करते हैं (ठीक है, ये सिर्फ कमांड हैं, लेकिन वे जादूई लगते हैं!), एंटर दबाते हैं और झट से – आपने पूरे प्रोजेक्ट स्ट्रक्चर बनाए, दुनिया भर से पावरफुल टूल्स इंस्टॉल किए, या अपनी ऐप को इंटरनेट पर करोड़ों लोगों के देखने के लिए डिप्लॉय कर दिया। एक बार जब आप इस शक्ति का पहला स्वाद चख लेते हैं, तो यह सचमुच बहुत लगने वाला होता है! +कमांड लाइन वह जगह है जहां डेवलपर्स बिल्कुल जादूगर महसूस करते हैं। आप कुछ जादुई शब्द (ठीक है, ये सिर्फ कमांड हैं, लेकिन ये जादुई लगते हैं!) टाइप करते हैं, एंटर दबाते हैं, और बूम – आपने पूरे प्रोजेक्ट ढांचे बनाए, दुनिया भर से शक्तिशाली टूल स्थापित किए, या अपनी ऐप को इंटरनेट पर लाखों लोगों के लिए लॉन्च कर दिया। जब आपको इस शक्ति का पहला स्वाद मिलता है, तो यह सचमुच काफी लत लगने वाला अनुभव होता है! **कमांड लाइन आपका पसंदीदा टूल क्यों बनेगा:** -जबकि ग्राफिकल इंटरफेस कई कार्यों के लिए बढ़िया हैं, कमांड लाइन ऑटोमेशन, सटीकता, और गति में उत्कृष्ट है। कई डेवलपमेंट टूल मुख्य रूप से कमांड लाइन इंटरफेस के माध्यम से काम करते हैं, और उन्हें कुशलतापूर्वक उपयोग करना सीखना आपकी उत्पादकता को नाटकीय रूप से बढ़ा सकता है। +जबकि ग्राफिकल इंटरफेस कई कार्यों के लिए शानदार हैं, कमांड लाइन स्वचालन, सटीकता, और गति में उत्कृष्ट है। कई विकास टूल मुख्य रूप से कमांड लाइन इंटरफेस के माध्यम से काम करते हैं, और उन्हें कुशलतापूर्वक उपयोग करना सीखना आपकी उत्पादकता में नाटकीय सुधार कर सकता है। ```bash -# चरण 1: प्रोजेक्ट निर्देशिका बनाएँ और उसमें जाएँ +# चरण 1: प्रोजेक्ट डायरेक्टरी बनाएं और उसमें जाएं mkdir my-awesome-website cd my-awesome-website ``` **यह कोड क्या करता है:** -- **"my-awesome-website" नाम का नया डायरेक्ट्री बनाएं** अपने प्रोजेक्ट के लिए -- **नए बनाए गए डायरेक्ट्री में प्रवेश करें** काम शुरू करने के लिए +- **एक नया डायरेक्टरी "my-awesome-website" बनाएं** अपने प्रोजेक्ट के लिए +- **नई बनाई गई डायरेक्टरी में जाएं** और काम शुरू करें ```bash # चरण 2: package.json के साथ प्रोजेक्ट प्रारंभ करें @@ -613,11 +615,11 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**कदम दर कदम, यह हो रहा है:** -- `npm init -y` के साथ डिफ़ॉल्ट सेटिंग्स से नया Node.js प्रोजेक्ट इनिशियलाइज़ करना -- तेज़ विकास और उत्पादन बिल्ड्स के लिए Vite को आधुनिक बिल्ड टूल के रूप में इंस्टॉल करना -- स्वचालित कोड प्रारूपण के लिए Prettier और कोड गुणवत्ता जांच के लिए ESLint जोड़ना -- इन्हें विकास-केवल निर्भरताओं के रूप में चिह्नित करने के लिए `--save-dev` फ़्लैग का इस्तेमाल +**कदम दर कदम, यहां क्या हो रहा है:** +- `npm init -y` का उपयोग करके डिफ़ॉल्ट सेटिंग्स के साथ नया Node.js प्रोजेक्ट **इनिशियलाइज़ करें** +- तेज विकास और प्रोडक्शन बिल्ड के लिए आधुनिक बिल्ड टूल Vite **इंस्टॉल करें** +- ऑटोमैटिक कोड फॉर्मैटिंग के लिए Prettier और कोड गुणवत्ता जांच के लिए ESLint **जोड़ें** +- इन टूल्स को केवल विकास के निर्भरता के रूप में चिह्नित करने के लिए `--save-dev` फ्लैग **का उपयोग करें** ```bash # चरण 3: परियोजना संरचना और फ़ाइलें बनाएं @@ -629,226 +631,226 @@ npx vite ``` **ऊपर, हमने किया है:** -- स्रोत कोड और एसेट्स के लिए अलग-अलग फोल्डर बनाकर अपने प्रोजेक्ट को व्यवस्थित किया -- उचित डॉक्युमेंट संरचना के साथ एक बुनियादी HTML फ़ाइल जनरेट की +- स्रोत कोड और एसेट्स के लिए अलग-अलग फोल्डर बनाकर अपने प्रोजेक्ट का संगठन किया +- सही डॉक्यूमेंट संरचना के साथ एक बेसिक HTML फाइल बनाई - लाइव रीलोडिंग और हॉट मॉड्यूल रिप्लेसमेंट के लिए Vite डेवलपमेंट सर्वर शुरू किया #### वेब विकास के लिए आवश्यक कमांड लाइन टूल्स | टूल | उद्देश्य | आपको इसकी जरूरत क्यों है | -|------|---------|-------------------------| -| **[Git](https://git-scm.com/)** | वर्शन कंट्रोल | परिवर्तन ट्रैक करें, दूसरों के साथ सहयोग करें, अपने काम का बैकअप लें | -| **[Node.js & npm](https://nodejs.org/)** | जावास्क्रिप्ट रनटाइम & पैकेज मैनेजमेंट | ब्राउज़र के बाहर जावास्क्रिप्ट चलाएं, आधुनिक विकास टूल्स इंस्टॉल करें | -| **[Vite](https://vitejs.dev/)** | बिल्ड टूल & देव सर्वर | हॉट मॉड्यूल रिप्लेसमेंट के साथ तेज़ विकास | -| **[ESLint](https://eslint.org/)** | कोड क्वालिटी | अपने जावास्क्रिप्ट में समस्याओं को स्वचालित रूप से खोजें और ठीक करें | -| **[Prettier](https://prettier.io/)** | कोड फ़ॉर्मेटिंग | अपने कोड को लगातार फार्मेटेड और पठनीय रखें | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | संस्करण नियंत्रण | बदलाव ट्रैक करें, दूसरों के साथ सहयोग करें, अपने काम का बैकअप लें | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript रंटाइम एवं पैकेज प्रबंधन | ब्राउज़रों के बाहर JavaScript चलाएं, आधुनिक विकास टूल इंस्टॉल करें | +| **[Vite](https://vitejs.dev/)** | बिल्ड टूल एवं डेवलपमेंट सर्वर | बहुत तेज विकास और हॉट मॉड्यूल रिप्लेसमेंट के साथ | +| **[ESLint](https://eslint.org/)** | कोड गुणवत्ता | अपने JavaScript में समस्याएं ऑटोमैटिक रूप से खोजें और फिक्स करें | +| **[Prettier](https://prettier.io/)** | कोड फॉर्मैटिंग | अपने कोड को संगठित, लगातार फॉर्मैटेड और पठनीय बनाएं | #### प्लेटफ़ॉर्म-विशिष्ट विकल्प **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - आधुनिक, फीचर-समृद्ध टर्मिनल - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - शक्तिशाली स्क्रिप्टिंग वातावरण -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - पारंपरिक विंडोज़ कमांड लाइन +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - पारंपरिक Windows कमांड लाइन **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - बिल्ट-इन टर्मिनल एप्लीकेशन -- **[iTerm2](https://iterm2.com/)** - उन्नत फीचर्स के साथ बेहतर टर्मिनल +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - बिल्ट-इन टर्मिनल एप्लिकेशन +- **[iTerm2](https://iterm2.com/)** - उन्नत सुविधाओं के साथ बेहतर टर्मिनल **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - स्टैण्डर्ड लिनक्स शेल -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - उन्नत टर्मिनल इम्यूलेटर +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - स्टैंडर्ड Linux शेल +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - उन्नत टर्मिनल एमुलेटर -> 💻 = ऑपरेटिंग सिस्टम पर पूर्व-इंस्टॉल्ड +> 💻 = ऑपरेटिंग सिस्टम पर प्री-इंस्टॉल्ड -> 🎯 **शिक्षा मार्ग**: पहले `cd` (डायरेक्ट्री बदलें), `ls` या `dir` (फाइल सूची), और `mkdir` (फोल्डर बनाएं) जैसे बुनियादी कमांड से शुरू करें। आधुनिक वर्कफ़्लो कमांड जैसे `npm install`, `git status`, और `code .` (VS Code में वर्तमान डायरेक्ट्री खोलें) का अभ्यास करें। जैसे-जैसे आप सहज होते जाएंगे, आप स्वाभाविक रूप से अधिक उन्नत कमांड और ऑटोमेशन तकनीकें सीख जाएंगे। +> 🎯 **सीखने का रास्ता**: `cd` (डायरेक्टरी बदलें), `ls` या `dir` (फाइल लिस्ट करें), और `mkdir` (फोल्डर बनाएं) जैसे बेसिक कमांड से शुरू करें। आधुनिक वर्कफ़्लो कमांड जैसे `npm install`, `git status`, और `code .` (VS Code में वर्तमान डायरेक्टरी खोलें) का अभ्यास करें। जैसे-जैसे आप सहज होते जाएं, आप स्वाभाविक रूप से जटिल कमांड और ऑटोमेशन तकनीकों को सीखेंगे। -### दस्तावेज़ीकरण: आपकी हमेशा उपलब्ध सीखने वाली मेंटोर +### दस्तावेज़ीकरण: आपका हमेशा उपलब्ध सीखने वाला मार्गदर्शक -ठीक है, मैं एक छोटा सा रहस्य साझा करता हूं जो आपको शुरुआत वाले होने का एहसास बहुत अच्छा कराएगा: यहां तक कि सबसे अनुभवी डेवलपर्स भी अपने समय का बड़ा हिस्सा दस्तावेज़ पढ़ने में बिताते हैं। और ऐसा इसलिए नहीं कि वे नहीं जानते कि वे क्या कर रहे हैं – यह वास्तव में समझदारी का संकेत है! +ठीक है, मैं एक छोटा सा रहस्य साझा करता हूं जो आपको शुरुआती होने के बारे में बहुत अच्छा महसूस कराएगा: सबसे अनुभवी डेवलपर्स भी अपना बहुत सारा समय दस्तावेज़ पढ़ने में बिताते हैं। और यह इसलिए नहीं कि वे नहीं जानते कि वे क्या कर रहे हैं – यह बुद्धिमत्ता का निशान है! -दस्तावेज़ीकरण को दुनिया के सबसे धैर्यशील, ज्ञानवान शिक्षकों की तरह सोचें जो 24/7 उपलब्ध हैं। अगर आप 2 बजे रात को किसी समस्या में फंस जाते हैं, तो दस्तावेज़ीकरण आपके लिए एक गर्म वर्चुअल गले के साथ है, और बिल्कुल वही उत्तर प्रदान करता है जिसकी आपको आवश्यकता है। अगर आप किसी नई कूल फीचर के बारे में जानना चाहते हैं जिसकी हर कोई बात कर रहा है, तो दस्तावेज़ीकरण कदम-दर-कदम उदाहरणों के साथ आपके साथ है। अगर आप समझना चाहते हैं कि कुछ क्यों वैसा काम करता है जैसा करता है, तो आपने सही पकड़ा – दस्तावेज़ीकरण इसे समझाने के लिए तैयार है ताकि वह अंततः समझ में आए! +दस्तावेज़ीकरण को सोचें जैसे आपके पास दुनिया के सबसे धैर्यवान, जानकार शिक्षक हों जो 24/7 उपलब्ध हों। क्या आप 2 बजे रात एक समस्या पर अटके हुए हैं? दस्तावेज़ आपको एक गर्म वर्चुअल गले के साथ और बिल्कुल सही जवाब के साथ साथ देगा। क्या आप किसी कूल नए फीचर के बारे में जानना चाहते हैं जिसके बारे में हर कोई बात कर रहा है? दस्तावेज़ आपके लिए चरण दर चरण उदाहरण लेकर आता है। किसी चीज़ के काम करने के तरीके को समझने की कोशिश कर रहे हैं? आपने सही सोचा – दस्तावेज़ इसे इस तरह समझाने के लिए तैयार है कि अंत में सब समझ में आ जाए! -यह कुछ ऐसा है जिसने मेरी सोच पूरी तरह बदल दी: वेब विकास की दुनिया बहुत तेज़ी से बदलती है, और कोई भी (बहुत बड़े अनुभव वाले भी!) हर चीज़ को याद नहीं रख पाते। मैंने 15+ वर्षों के अनुभवी सीनियर डेवलपर्स को बुनियादी सिंटैक्स खोजते हुए देखा है, और आप जानते हैं? यह शर्मनाक नहीं है – यह स्मार्ट है! यह एक आदर्श स्मृति रखने के बारे में नहीं है, बल्कि जानना है कि भरोसेमंद उत्तर तेजी से कहां मिलेंगे और उन्हें कैसे लागू किया जाए। +ऐसा कुछ जिसने मेरी सोच पूरी तरह से बदल दी: वेब विकास की दुनिया बहुत तेजी से बदलती है, और कोई भी (मैं सचमुच कोई भी नहीं!) सब कुछ याद नहीं रखता। मैंने 15+ वर्षों के अनुभव वाले वरिष्ठ डेवलपर्स को बुनियादी सिंटैक्स देखते और खोजते देखा है, और आपको पता है क्या? यह कोई शर्म की बात नहीं है – यह स्मार्ट है! यह एक परफेक्ट मेमोरी रखने के बारे में नहीं है; यह जल्दी भरोसेमंद जवाब खोजने और उन्हें लागू करने के बारे में है। **यहां असली जादू होता है:** -पेशेवर डेवलपर्स अपने समय का एक बड़ा हिस्सा दस्तावेज़ पढ़ने में बिताते हैं – यह इसलिए नहीं कि वे नहीं जानते कि वे क्या कर रहे हैं, बल्कि क्योंकि वेब विकास का क्षेत्र इतनी तेजी से विकसित होता है कि अद्यतित रहना निरंतर सीखने की मांग करता है। अच्छी दस्तावेज़ीकरण आपको यह समझने में मदद करता है कि न केवल *कैसे* कुछ उपयोग करें, बल्कि *क्यों* और *कब* इसका उपयोग करें। +पेशेवर डेवलपर्स अपना काफी समय दस्तावेज़ पढ़ने में बिताते हैं – क्योंकि वे नहीं जानते कि वे क्या कर रहे हैं, बल्कि इसलिए कि वेब विकास का परिदृश्य इतनी तेज़ी से विकसित होता है कि नवीनतम बने रहने के लिए सतत सीखना आवश्यक है। शानदार दस्तावेज़ आपको न केवल यह समझने में मदद करता है कि *कैसे* किसी चीज़ का इस्तेमाल करें, बल्कि *क्यों* और *कब* इसका उपयोग करना चाहिए। #### आवश्यक दस्तावेज़ीकरण संसाधन **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- वेब तकनीक के लिए स्वर्ण मानक डॉक्यूमेंटेशन -- HTML, CSS, और जावास्क्रिप्ट के लिए व्यापक मार्गदर्शिकाएँ +- वेब तकनीक दस्तावेज़ीकरण के लिए स्वर्ण मानक +- HTML, CSS, और JavaScript के लिए व्यापक मार्गदर्शिकाएँ - ब्राउज़र संगतता जानकारी शामिल है -- व्यावहारिक उदाहरण और इंटरएक्टिव डेमो फीचर करते हैं +- व्यावहारिक उदाहरण और इंटरैक्टिव डेमो प्रदान करता है -**[Web.dev](https://web.dev)** (गूगल द्वारा) -- आधुनिक वेब विकास सर्वोत्तम प्रथाएँ -- प्रदर्शन अनुकूलन मार्गदर्शिकाएँ -- सुलभता और समावेशी डिजाइन सिद्धांत -- वास्तविक परियोजनाओं से केस स्टडीज़ +**[Web.dev](https://web.dev)** (Google द्वारा) +- आधुनिक वेब विकास की सर्वोत्तम प्रथाएँ +- प्रदर्शन अनुकूलन गाइड +- पहुंच योग्यता और समावेशी डिज़ाइन सिद्धांत +- वास्तविक परियोजनाओं के केस स्टडी **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge ब्राउज़र विकास संसाधन -- प्रोग्रेसिव वेब ऐप मार्गदर्शिकाएँ -- क्रॉस-प्लेटफ़ॉर्म विकास अंतर्दृष्टि +- प्रोग्रेसिव वेब ऐप गाइड +- क्रॉस-प्लेटफॉर्म विकास अंतर्दृष्टि **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- संरचित सीखने के पाठ्यक्रम -- उद्योग विशेषज्ञों के वीडियो कोर्स +- संरचित सीखने का पाठ्यक्रम +- उद्योग विशेषज्ञों के वीडियो पाठ्यक्रम - व्यावहारिक कोडिंग अभ्यास -> 📚 **अध्ययन रणनीति**: दस्तावेज़ीकरण को याद करने की कोशिश न करें – इसके बजाय, इसे कुशलतापूर्वक नेविगेट करना सीखें। अक्सर उपयोग किए जाने वाले संदर्भों को बुकमार्क करें और विशिष्ट जानकारी तेजी से खोजने के लिए खोज फ़ंक्शन का अभ्यास करें। +> 📚 **अध्ययन रणनीति**: दस्तावेज़ को याद करने की कोशिश न करें – इसके बजाय सीखें कि इसे कैसे कुशलता से नेविगेट किया जाए। बार-बार इस्तेमाल होने वाले संदर्भों को बुकमार्क करें और विशिष्ट जानकारी जल्दी खोजने के लिए सर्च फ़ंक्शन का अभ्यास करें। -### 🔧 **टूल महारत जांच: आपके साथ क्या घुलमिलता है?** +### 🔧 **टूल मास्टरी चेक: क्या आपके साथ सबसे ज्यादा जुड़ता है?** -**एक पल सोचें:** -- आप सबसे पहले किस टूल को आजमाने के लिए सबसे अधिक उत्साहित हैं? (यहाँ कोई गलत जवाब नहीं है!) -- क्या कमांड लाइन अभी भी डरावना लगता है, या इसके प्रति आपकी जिज्ञासा बढ़ी है? -- क्या आप ब्राउज़र DevTools का उपयोग करके अपनी पसंदीदा वेबसाइट्स के पर्दे के पीछे झांकने की कल्पना कर सकते हैं? +**एक पल लें सोचने के लिए:** +- आप सबसे पहले कौन सा टूल आजमाने के लिए सबसे उत्साहित हैं? (कोई गलत जवाब नहीं है!) +- क्या कमांड लाइन अभी भी डरावनी लगती है, या आप इसके बारे में जिज्ञासु हैं? +- क्या आप ब्राउज़र DevTools का इस्तेमाल अपनी पसंदीदा वेबसाइटों के पर्दे के पीछे झांकने के लिए कर सकते हैं? ```mermaid pie title "उपकरणों के साथ डेवलपर द्वारा बिताया गया समय" "कोड संपादक" : 40 "ब्राउज़र परीक्षण" : 25 "कमांड लाइन" : 15 - "दस्तावेज पढ़ना" : 15 - "डिबगिंग" : 5 + "दस्तावेज़ पढ़ना" : 15 + "डीबगिंग" : 5 ``` -> **मज़ेदार तथ्य**: अधिकांश डेवलपर्स अपने कोड संपादक में लगभग 40% समय बिताते हैं, लेकिन ध्यान दें कि कितनी देर टेस्टिंग, सीखने, और समस्या-समाधान में जाता है। प्रोग्रामिंग केवल कोड लिखने के बारे में नहीं है – यह अनुभव बनाने के बारे में है! +> **मज़ेदार अंतर्दृष्टि**: अधिकांश डेवलपर्स अपना लगभग 40% समय कोड एडिटर में बिताते हैं, लेकिन ध्यान दें कि परीक्षण, सीखने, और समस्या सुलझाने में कितना समय जाता है। प्रोग्रामिंग केवल कोड लिखना नहीं है – यह अनुभवों को बनाना है! -✅ **सोचने के लिए भोजन**: ये एक दिलचस्प बात है – आप कैसे सोचते हैं कि वेबसाइट बनाने के लिए उपयोग किए जाने वाले टूल (विकास) और उनकी दिखावट डिजाइन करने के टूल (डिजाइन) में क्या अंतर है? यह बिलकुल ऐसा है जैसे एक आर्किटेक्ट जो सुंदर घर डिजाइन करता है और बिल्डर जो उसे वास्तव में बनाता है। दोनों महत्वपूर्ण हैं, लेकिन उनके लिए अलग टूलबॉक्स की जरूरत होती है! इस सोच से आपको यह देखने में मदद मिलेगी कि वेबसाइटें कैसे जीवित होती हैं। +✅ **सोचने के लिए भोजन**: यह सोचने वाली बात है – आपको लगता है कि वेबसाइट बनाने के उपकरण (डेवलपमेंट) और उन्हें कैसे दिखना चाहिए (डिजाइन) के उपकरण कैसे अलग हो सकते हैं? यह एक खूबसूरत घर डिजाइन करने वाले आर्किटेक्ट और उस घर का निर्माण करने वाले ठेकेदार के बीच का अंतर जैसा है। दोनों जरूरी हैं, लेकिन उन्हें अलग-अलग टूलबॉक्स की आवश्यकता होती है! इस तरह की सोच आपको यह देखने में मदद करेगी कि वेबसाइटें कैसे जीवन में आती हैं। -## GitHub Copilot एजेंट चुनौती 🚀 +## GitHub Copilot एजेंट चैलेंज 🚀 एजेंट मोड का उपयोग करके निम्न चुनौती पूरी करें: -**विवरण:** एक आधुनिक कोड संपादक या IDE की विशेषताओं का अन्वेषण करें और दिखाएं कि यह वेब डेवलपर के रूप में आपके वर्कफ़्लो में कैसे सुधार कर सकता है। +**विवरण:** एक आधुनिक कोड एडिटर या IDE की विशेषताओं का अन्वेषण करें और दिखाएं कि यह वेब डेवलपर के रूप में आपके वर्कफ़्लो को कैसे बेहतर बना सकता है। -**प्रॉम्प्ट:** एक कोड संपादक या IDE चुनें (जैसे Visual Studio Code, WebStorm, या क्लाउड-आधारित IDE)। तीन ऐसी विशेषताएँ या एक्सटेंशंस सूचीबद्ध करें जो आपको कोड लिखने, डिबग करने, या बनाए रखने में अधिक कुशल बनाती हैं। प्रत्येक के लिए संक्षिप्त व्याख्या दें कि यह आपके वर्कफ़्लो को कैसे लाभ पहुंचाती है। +**प्रॉम्प्ट:** एक कोड एडिटर या IDE चुनें (जैसे Visual Studio Code, WebStorm, या क्लाउड-आधारित IDE)। तीन ऐसी विशेषताएं या एक्सटेंशन सूचीबद्ध करें जो आपको कोड लिखने, डिबग करने, या बनाए रखने में मदद करती हैं। प्रत्येक के लिए संक्षिप्त व्याख्या दें कि यह आपके वर्कफ़्लो में कैसे लाभकारी है। --- ## 🚀 चुनौती -**ठीक है, जासूस, अपने पहले मामले के लिए तैयार हो?** +**ठीक है, जासूस, क्या आप अपने पहले केस के लिए तैयार हैं?** -अब जब आपके पास यह शानदार नींव है, तो मेरे पास एक रोमांचक यात्रा है जो आपको दिखाएगी कि प्रोग्रामिंग की दुनिया कितनी विविध और दिलचस्प है। और सुनिए – यह अभी कोड लिखने के बारे में नहीं है, इसलिए कोई दबाव नहीं! अपने आप को एक प्रोग्रामिंग भाषा जासूस के रूप में सोचिए जो अपने पहले रोमांचक मामले पर है! +अब जब आपके पास यह शानदार आधार है, तो मेरे पास एक रोमांच है जो आपको यह दिखाने में मदद करेगा कि प्रोग्रामिंग की दुनिया कितनी विविध और आकर्षक है। और सुनो – अभी कोड लिखने की बात नहीं है, इसलिए कोई दबाव नहीं! खुद को एक प्रोग्रामिंग भाषा जासूस समझो जो अपने पहले रोमांचक केस पर है! -**आपका मिशन, यदि आप स्वीकार करें:** -1. **भाषा के अन्वेषक बनें**: पूरी तरह से अलग-अलग यूनिवर्स से तीन प्रोग्रामिंग भाषाएँ चुनें – शायद एक जो वेबसाइट बनाए, एक जो मोबाइल ऐप्स बनाता हो, और एक जो वैज्ञानिकों के लिए डेटा प्रोसेस करता हो। प्रत्येक भाषा में एक ही सरल कार्य के उदाहरण खोजें। मैं वादा करता हूं कि आप चकित रह जाएंगे कि ये भाषाएँ एक ही काम करते हुए कितनी अलग दिख सकती हैं! +**आपका मिशन, यदि आप इसे स्वीकार करते हैं:** +1. **भाषा अन्वेषक बनें**: पूरी तरह अलग दुनिया से तीन प्रोग्रामिंग भाषाएँ चुनें – शायद एक वेबसाइट बनाती हो, एक मोबाइल ऐप बनाती हो, और एक वैज्ञानिकों के लिए डेटा crunch करती हो। एक ही सरल कार्य के उदाहरण खोजें जो प्रत्येक भाषा में लिखा गया हो। मैं वादा करता हूं कि आप पूरी तरह से आश्चर्यचकित होंगे कि ये एक ही काम करते हुए कितनी अलग दिख सकती हैं! -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 डाउनलोड नहीं किया है तो इसे डाउनलोड करें – यह मुफ्त है और आपको यह बहुत पसंद आएगा! +- Extensions मार्केटप्लेस में कुछ मिनट बिताएं। यह आपके कोड संपादक के लिए एक ऐप स्टोर जैसा है! +- अपने ब्राउज़र के Developer Tools खोलें और बस चारों ओर क्लिक करें। सब कुछ समझने की चिंता मत करें – बस वहां क्या है उससे परिचित हो जाएं। **समुदाय से जुड़ें:** -- [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/). प्रोग्रामिंग समुदाय नवागंतुकों के लिए बेहद स्वागत योग्य है! +- YouTube पर कुछ शुरुआती-स्तर के कोडिंग वीडियो देखें। वहाँ इतने अच्छे क्रिएटर्स हैं जो जानते हैं कि शुरूआत करने जैसा कैसा होता है। +- स्थानीय मीटअप या ऑनलाइन समुदायों में शामिल होने पर विचार करें। मुझ पर विश्वास करें, डेवलपर्स नए सदस्यों की मदद करना बहुत पसंद करते हैं! -> 🎯 **सुनिए, मैं चाहता हूँ आप याद रखें**: आपसे उम्मीद नहीं है कि आप एक रात में कोडिंग के जादूगर बन जाएं! अभी आप बस इस अद्भुत नई दुनिया को जान रहे हैं जिसका आप हिस्सा बनने वाले हैं। अपना समय लें, यात्रा का आनंद लें, और याद रखें – हर एक डेवलपर जिसे आप पसंद करते हैं, कभी वैसे ही था जैसे आप अभी हैं, उत्साहित और शायद थोड़ा अभिभूत। यह बिलकुल सामान्य है, और इसका मतलब है कि आप सही दिशा में हैं! +> 🎯 **सुनिए, मैं आपसे यही चाहूंगा कि आप याद रखें**: आप से उम्मीद नहीं की जाती कि आप तुरंत कोडिंग में माहिर बन जाएं! अभी, आप बस इस अद्भुत नए संसार को जान रहे हैं जिसका हिस्सा बनने जा रहे हैं। अपने समय लें, इस यात्रा का आनंद लें, और याद रखें – हर एक डेवलपर जिसे आप पसंद करते हैं, कभी आपके जैसी स्थिति में था, उत्साहित और शायद थोड़ा अभिभूत भी। यह पूरी तरह से सामान्य है, और इसका मतलब है कि आप सही कर रहे हैं! -## असाइनमेंट +## Assignment [Reading the Docs](assignment.md) -> 💡 **आपके असाइनमेंट के लिए एक छोटा सा सुझाव**: मैं सच में चाहता हूँ कि आप उन उपकरणों का अन्वेषण करें जिनके बारे में हमने अभी तक बात नहीं की! उन संपादकों, ब्राउज़रों और कमांड लाइन टूल्स को छोड़ दें जिनके बारे में हमने पहले ही चर्चा की है – वहाँ एक पूरी अद्भुत दुनिया है अद्भुत विकास उपकरणों की जो बस खोजे जाने की प्रतीक्षा कर रहे हैं। उन उपकरणों को खोजें जो सक्रिय रूप से बनाए रखे जाते हैं और जिनके जीवंत, सहायक समुदाय हैं (ऐसे समुदायों में सबसे अच्छे ट्यूटोरियल और सबसे मददगार लोग होते हैं, जब आप रास्ते में फंसे हों और किसी दोस्ताना मदद की ज़रूरत हो)। +> 💡 **आपके असाइनमेंट के लिए एक छोटा सा सुझाव**: मुझे बेहद खुशी होगी अगर आप कुछ ऐसे टूल्स का अन्वेषण करें जिनका हमने अभी तक जिक्र नहीं किया है! उन संपादकों, ब्राउज़रों और कमांड लाइन टूल्स को छोड़ दें जिनके बारे में हमने बात की है – वहां एक अद्भुत और विशाल विकास टूल्स का ब्रह्मांड है जो खोजे जाने का इंतजार कर रहा है। ऐसे टूल्स देखें जो सक्रिय रूप से मेंटेन किए जाते हैं और जिनकी जीवंत, सहायक समुदायें हैं (इनमें सबसे अच्छे ट्यूटोरियल और सबसे सहायक लोग होते हैं, जब आप फंस जाते हैं और मदद चाहते हैं)। --- -## 🚀 आपकी प्रोग्रामिंग यात्रा का समयरेखा +## 🚀 आपकी प्रोग्रामिंग यात्रा टाइमलाइन ### ⚡ **अगले 5 मिनट में आप क्या कर सकते हैं** -- [ ] 2-3 प्रोग्रामिंग भाषा की वेबसाइटें बुकमार्क करें जिन्होंने आपकी रुचि आकर्षित की -- [ ] Visual Studio Code डाउनलोड करें अगर आपने अभी तक नहीं किया है -- [ ] अपने ब्राउज़र के डेवटूल्स (F12) खोलें और किसी भी वेबसाइट पर क्लिक करें +- [ ] 2-3 प्रोग्रामिंग भाषा की वेबसाइट्स को बुकमार्क करें जिन्होंने आपका ध्यान खींचा +- [ ] यदि आपने अभी तक नहीं किया है तो Visual Studio Code डाउनलोड करें +- [ ] अपने ब्राउज़र के DevTools (F12) खोलें और किसी भी वेबसाइट पर क्लिक करें - [ ] एक प्रोग्रामिंग समुदाय में शामिल हों (Dev.to, Reddit r/webdev, या Stack Overflow) ### ⏰ **इस घंटे में आप क्या पूरा कर सकते हैं** -- [ ] पोस्ट-लैसन क्विज़ पूरा करें और अपने उत्तरों पर विचार करें -- [ ] GitHub Copilot एक्सटेंशन के साथ VS Code सेट अप करें -- [ ] 2 अलग-अलग प्रोग्रामिंग भाषाओं में ऑनलाइन "Hello World" उदाहरण आज़माएँ -- [ ] यूट्यूब पर "डे इन द लाइफ ऑफ़ अ डेवलपर" वीडियो देखें -- [ ] अपनी प्रोग्रामिंग भाषा की जासूसी शुरू करें (चुनौती से) +- [ ] पोस्ट-लीसन क्विज़ पूरा करें और अपने उत्तरों पर विचार करें +- [ ] VS Code में GitHub Copilot एक्सटेंशन सेट करें +- [ ] 2 अलग-अलग प्रोग्रामिंग भाषाओं में ऑनलाइन "Hello World" उदाहरण आज़माएं +- [ ] YouTube पर "डे इन द लाइफ ऑफ़ अ डेवलपर" वीडियो देखें +- [ ] अपनी प्रोग्रामिंग भाषा की जासूसी शुरू करें (चैलेंज से) ### 📅 **आपका सप्ताह भर का साहसिक कार्य** -- [ ] असाइनमेंट पूरा करें और 3 नए विकास उपकरणों का अन्वेषण करें -- [ ] सोशल मीडिया पर 5 डेवलपर्स या प्रोग्रामिंग अकाउंट्स का अनुसरण करें -- [ ] CodePen या Replit में कुछ छोटा बनाना आज़माएँ (यहाँ तक कि सिर्फ "Hello, [आपका नाम]!" भी हो सकता है) -- [ ] किसी डेवलपर की कोडिंग यात्रा से जुड़ी एक ब्लॉग पोस्ट पढ़ें +- [ ] असाइनमेंट पूरा करें और 3 नए विकास टूल्स का अन्वेषण करें +- [ ] सोशल मीडिया पर 5 डेवलपर्स या प्रोग्रामिंग अकाउंट्स को फ़ॉलो करें +- [ ] CodePen या Replit में कुछ छोटा बनाकर देखें (यहाँ तक कि सिर्फ "Hello, [Your Name]!" भी चलेगा) +- [ ] किसी डेवलपर की कोडिंग यात्रा पर एक ब्लॉग पोस्ट पढ़ें - [ ] एक वर्चुअल मीटअप में शामिल हों या प्रोग्रामिंग टॉक देखें -- [ ] ऑनलाइन ट्यूटोरियल के साथ अपनी चुनी हुई भाषा सीखना शुरू करें +- [ ] ऑनलाइन ट्यूटोरियल्स के साथ अपनी चुनी हुई भाषा सीखना शुरू करें -### 🗓️ **आपका महीने भर का परिवर्तन** -- [ ] अपनी पहली छोटी परियोजना बनाएं (यहाँ तक कि एक साधारण वेबपेज भी चलेगा!) -- [ ] एक ओपन-सोर्स प्रोजेक्ट में योगदान करें (डॉक्यूमेंटेशन सुधार से शुरुआत करें) +### 🗓️ **आपका महीने भर का रूपांतरण** +- [ ] अपनी पहली छोटी परियोजना बनाएं (एक साधारण वेबपेज भी चलता है!) +- [ ] किसी ओपन-सोर्स प्रोजेक्ट में योगदान करें (शुरुआत दस्तावेज़ सुधार से करें) - [ ] किसी नए प्रोग्रामर का मार्गदर्शन करें जो अभी शुरुआत कर रहा हो -- [ ] अपनी डेवलपर पोर्टफोलियो वेबसाइट बनाएं -- [ ] स्थानीय डेवलपर समुदाय या अध्ययन समूहों से जुड़ें -- [ ] अपनी अगली सीखने की मील का पत्थर योजना बनाना शुरू करें +- [ ] अपना डेवलपर पोर्टफोलियो वेबसाइट बनाएं +- [ ] स्थानीय डेवलपर समुदायों या अध्ययन समूहों से जुड़ें +- [ ] अपने अगले सीखने के लक्ष्य की योजना बनाना शुरू करें -### 🎯 **अंतिम चिंतन चेक-इन** +### 🎯 **अंतिम आत्ममंथन जांच** -**आगे बढ़ने से पहले, एक क्षण पहले जश्न मनाएं:** -- आज प्रोग्रामिंग के बारे में क्या चीज़ आपको सबसे ज़्यादा उत्साहित किया? -- किस उपकरण या अवधारणा को आप सबसे पहले खोजना चाहते हैं? -- इस प्रोग्रामिंग यात्रा की शुरुआत के बारे में आप कैसा महसूस कर रहे हैं? -- अभी आप डेवलपर से कौन सा सवाल पूछना चाहेंगे? +**आगे बढ़ने से पहले एक पल रुककर जश्न मनाएं:** +- आज प्रोग्रामिंग के बारे में एक ऐसी चीज़ क्या थी जिसने आपको उत्साहित किया? +- कौन सा टूल या अवधारणा आप सबसे पहले अन्वेषण करना चाहते हैं? +- इस प्रोग्रामिंग यात्रा की शुरुआत को लेकर आपका महसूस क्या है? +- अभी आप एक डेवलपर से कौन सा सवाल पूछना चाहेंगे? ```mermaid journey - title आपकी आत्मविश्वास निर्माण यात्रा + title आपका आत्मविश्वास बढ़ाने की यात्रा section आज जिज्ञासु: 3: You अभिभूत: 4: You उत्साहित: 5: You section इस सप्ताह - खोज करना: 4: You - सीखना: 5: You - जुड़ना: 4: You + खोज कर रहे हैं: 4: You + सीख रहे हैं: 5: You + जुड़ रहे हैं: 4: You section अगला महीना - निर्माण करना: 5: You + बना रहे हैं: 5: You आत्मविश्वासी: 5: You - दूसरों की मदद करना: 5: You + दूसरों की मदद कर रहे हैं: 5: You ``` -> 🌟 **याद रखें**: हर विशेषज्ञ कभी शुरुआती था। हर वरिष्ठ डेवलपर ने कभी ऐसा ही महसूस किया था जैसे आप अभी कर रहे हैं – उत्साहित, शायद थोड़ा अभिभूत, और ज़रूर जिज्ञासु कि क्या संभव है। आप अद्भुत संगति में हैं, और यह यात्रा अविश्वसनीय होने वाली है। प्रोग्रामिंग की इस अद्भुत दुनिया में आपका स्वागत है! 🎉 +> 🌟 **याद रखें**: हर विशेषज्ञ कभी नवशिक्षु था। हर वरिष्ठ डेवलपर ने बिल्कुल आपकी तरह महसूस किया था – उत्साहित, शायद थोड़ा अभिभूत, और निश्चित रूप से जिज्ञासु कि संभावनाएं क्या हैं। आप बेहतरीन संगति में हैं, और यह यात्रा अविश्वसनीय होगी। प्रोग्रामिंग की अद्भुत दुनिया में आपका स्वागत है! 🎉 --- -**अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से होने वाली किसी भी गलतफहमी या व्याख्या के लिए हम उत्तरदायी नहीं हैं। +**अस्वीकरण**: +इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। यद्यपि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या गलतियां हो सकती हैं। मूल भाषा में दस्तावेज़ को ही अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। \ No newline at end of file diff --git a/translations/hi/AGENTS.md b/translations/hi/AGENTS.md index 2f7e8c65f..fc3cd8479 100644 --- a/translations/hi/AGENTS.md +++ b/translations/hi/AGENTS.md @@ -1,30 +1,30 @@ # AGENTS.md -## परियोजना अवलोकन +## प्रोजेक्ट अवलोकन -यह शुरुआती लोगों के लिए वेब विकास के मूल सिद्धांतों को सिखाने हेतु एक शैक्षिक पाठ्यक्रम रिपॉज़िटरी है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन पाठ शामिल हैं। +यह शुरुआती लोगों को वेब विकास के मूल सिद्धांत सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित 12 सप्ताह का एक व्यापक कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन लेसन शामिल हैं। ### मुख्य घटक -- **शैक्षिक सामग्री**: 24 संरचित पाठ जो परियोजना-आधारित मॉड्यूल में व्यवस्थित हैं -- **व्यावहारिक परियोजनाएं**: टेरियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड एडिटर, और AI चैट असिस्टेंट -- **इंटरैक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (पाठ से पहले/बाद में आकलन) -- **बहुभाषी समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं में स्वचालित अनुवाद -- **प्रौद्योगिकियां**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI परियोजनाओं के लिए) +- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित लेसन +- **व्यावहारिक परियोजनाएं**: टेरारियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और AI चैट सहायक +- **इंटरैक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (प्री/पोस्ट-लेसन मूल्यांकन) +- **बहुभाषी समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद +- **तकनीकें**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI परियोजनाओं के लिए) ### वास्तुकला -- पाठ आधारित संरचना के साथ शैक्षिक रिपॉज़िटरी -- प्रत्येक पाठ फ़ोल्डर में README, कोड उदाहरण और समाधान होते हैं -- अलग-अलग निर्देशिकाओं में स्वतंत्र परियोजनाएं (quiz-app, विभिन्न पाठ परियोजनाएं) -- GitHub Actions (co-op-translator) का उपयोग करके अनुवाद प्रणाली -- डॉक्यूमेंटेशन Docsify के माध्यम से परोसा जाता है और PDF के रूप में उपलब्ध है +- लेसन-आधारित संरचना के साथ शैक्षिक रिपॉजिटरी +- प्रत्येक लेसन फ़ोल्डर में README, कोड उदाहरण, और समाधान होते हैं +- अलग-अलग निर्देशिकाओं में स्वतंत्र परियोजनाएं (quiz-app, विभिन्न लेसन परियोजनाएं) +- GitHub Actions (co-op-translator) का उपयोग करने वाला अनुवाद प्रणाली +- Docsify द्वारा परोसी गई और PDF के रूप में उपलब्ध दस्तावेज़ीकरण -## सेटअप कमांड +## सेटअप कमांड्स -यह रिपॉज़िटरी मुख्यतः शैक्षिक सामग्री के उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए: +यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री की खपत के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए: -### मुख्य रिपॉज़िटरी सेटअप +### मुख्य रिपॉजिटरी सेटअप ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -36,8 +36,8 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # विकास सर्वर शुरू करें -npm run build # उत्पादन के लिए बिल्ड करें +npm run dev # विकास सर्वर प्रारंभ करें +npm run build # उत्पादन के लिए बनाएं npm run lint # ESLint चलाएं ``` @@ -47,8 +47,8 @@ npm run lint # ESLint चलाएं cd 7-bank-project/api npm install npm start # एपीआई सर्वर शुरू करें -npm run lint # ESLint चलाएं -npm run format # Prettier के साथ स्वरूपित करें +npm run lint # ESLint चलाएँ +npm run format # Prettier के साथ फ़ॉर्मेट करें ``` ### ब्राउज़र एक्सटेंशन परियोजनाएं @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# ब्राउज़र में index.html खोलें या लाइव सर्वर का उपयोग करें +# ब्राउज़र में index.html खोलें या Live Server का उपयोग करें ``` ### चैट प्रोजेक्ट (Python Backend) @@ -72,7 +72,7 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN पर्यावरण चरों को सेट करें +# GITHUB_TOKEN पर्यावरण चर सेट करें python api.py ``` @@ -80,27 +80,27 @@ python api.py ### सामग्री योगदानकर्ताओं के लिए -1. अपनी GitHub खाता में **रिपॉज़िटरी को फोर्क करें** +1. **रिपॉजिटरी को अपने GitHub अकाउंट में फोर्क करें** 2. **अपने फोर्क को लोकली क्लोन करें** -3. **अपने परिवर्तनों के लिए नई ब्रांच बनाएं** -4. पाठ सामग्री या कोड उदाहरणों में परिवर्तन करें -5. संबंधित परियोजना निर्देशिकाओं में किसी भी कोड परिवर्तन का परीक्षण करें -6. योगदान दिशानिर्देशों के अनुसार पुल अनुरोध सबमिट करें +3. **अपने परिवर्तनों के लिए नई शाखा बनाएं** +4. लेसन सामग्री या कोड उदाहरणों में परिवर्तन करें +5. संबंधित परियोजना निर्देशिकाओं में कोई भी कोड परिवर्तन परीक्षण करें +6. योगदान दिशानिर्देशों का पालन करते हुए पुल अनुरोध सबमिट करें ### शिक्षार्थियों के लिए -1. रिपॉज़िटरी को फोर्क या क्लोन करें -2. पाठ निर्देशिकाओं में क्रमबद्ध रूप से जाएं -3. प्रत्येक पाठ के README फ़ाइल पढ़ें -4. https://ff-quizzes.netlify.app/web/ पर पूर्व-पाठ क्विज़ पूरा करें -5. पाठ फ़ोल्डरों में कोड उदाहरणों पर काम करें +1. रिपॉजिटरी को फोर्क या क्लोन करें +2. लेसन निर्देशिकाओं में क्रमबद्ध रूप से नेविगेट करें +3. प्रत्येक लेसन के README फ़ाइल पढ़ें +4. प्री-लेसन क्विज़ https://ff-quizzes.netlify.app/web/ पर पूरा करें +5. लेसन फोल्डर्स में कोड उदाहरणों के माध्यम से काम करें 6. असाइनमेंट और चुनौतियां पूरी करें -7. पश्च-पाठ क्विज़ लें +7. पोस्ट-लेसन क्विज़ दें ### लाइव विकास -- **डॉक्यूमेंटेशन**: रूट में `docsify serve` चलाएं (पोर्ट 3000) -- **क्विज़ ऐप**: `quiz-app` निर्देशिका में `npm run dev` चलाएं +- **दस्तावेज़ीकरण**: रूट में `docsify serve` चलाएं (पोर्ट 3000) +- **क्विज़ ऐप**: quiz-app निर्देशिका में `npm run dev` चलाएं - **परियोजनाएं**: HTML परियोजनाओं के लिए VS Code Live Server एक्सटेंशन का उपयोग करें - **API परियोजनाएं**: संबंधित API निर्देशिकाओं में `npm start` चलाएं @@ -110,7 +110,7 @@ python api.py ```bash cd quiz-app -npm run lint # कोड शैली की समस्याओं की जांच करें +npm run lint # कोड शैली की समस्याओं के लिए जांचें npm run build # सत्यापित करें कि बिल्ड सफल होता है ``` @@ -118,82 +118,82 @@ npm run build # सत्यापित करें कि बिल् ```bash cd 7-bank-project/api -npm run lint # कोड शैली की समस्याओं की जाँच करें +npm run lint # कोड स्टाइल समस्याओं के लिए जांच करें node server.js # जांचें कि सर्वर बिना त्रुटियों के शुरू होता है ``` ### सामान्य परीक्षण दृष्टिकोण -- यह एक शैक्षिक रिपॉज़िटरी है जिसमें व्यापक स्वचालित परीक्षण नहीं हैं -- मैनुअल परीक्षण पर ध्यान दिया जाता है: - - कोड उदाहरण त्रुटि रहित चलें - - दस्तावेज़ में लिंक सही काम करें - - परियोजना बिल्ड सफलतापूर्वक पूरी हो - - उदाहरणों का पालन सर्वोत्तम प्रथाओं के अनुसार हो +- यह एक शैक्षिक रिपॉजिटरी है जिसमें व्यापक स्वचालित परीक्षण नहीं हैं +- मैनुअल परीक्षण पर ध्यान केंद्रित करता है: + - कोड उदाहरण बिना त्रुटि के चलना चाहिए + - दस्तावेज़ीकरण में लिंक सही तरीके से काम करें + - परियोजना निर्माण सफलतापूर्वक पूर्ण होना चाहिए + - उदाहरण सर्वोत्तम प्रथाओं का पालन करें ### प्री-सबमिशन जांच -- `package.json` वाले निर्देशकों में `npm run lint` चलाएं -- मार्कडाउन लिंक मान्य हैं, यह पुष्टि करें -- ब्राउज़र या Node.js में कोड उदाहरण का परीक्षण करें -- जांचें कि अनुवाद संरचना को सही ढंग से बनाए रखते हैं +- package.json वाले निर्देशिकाओं में `npm run lint` चलाएं +- मार्कडाउन लिंक वैध हैं या नहीं जांचें +- कोड उदाहरण ब्राउज़र या Node.js में टेस्ट करें +- जांचें कि अनुवाद संरचना बनाए रखें ## कोड शैली दिशानिर्देश ### JavaScript - आधुनिक ES6+ सिंटैक्स का उपयोग करें -- परियोजनाओं में दिए गए मानक ESLint कॉन्फ़िगरेशन का पालन करें -- शैक्षिक स्पष्टता के लिए सार्थक वैरिएबल और फ़ंक्शन नामों का उपयोग करें -- पाठकों के लिए अवधारणाओं को स्पष्ट करने वाली टिप्पणियाँ जोड़ें -- जहाँ कॉन्फ़िगर किया गया हो, वहां Prettier से प्रारूपित करें +- परियोजनाओं में उपलब्ध मानक ESLint कॉन्फ़िगरेशन का पालन करें +- शैक्षिक स्पष्टता के लिए सार्थक वेरिएबल और फ़ंक्शन नामों का उपयोग करें +- शिक्षार्थियों के लिए अवधारणाओं की व्याख्या करने वाले टिप्पणियाँ जोड़ें +- जहां कॉन्फ़िगर हो वहां Prettier का उपयोग करें ### HTML/CSS - सेमांटिक HTML5 तत्व -- प्रतिक्रियाशील डिज़ाइन सिद्धांत -- स्पष्ट क्लास नामकरण कन्वेंशंस -- CSS तकनीकों की व्याख्या करने वाली टिप्पणियाँ +- उत्तरदायी डिज़ाइन सिद्धांत +- स्पष्ट क्लास नामकरण कन्वेंशन +- शिक्षार्थियों के लिए CSS तकनीकों की व्याख्या करने वाली टिप्पणियाँ ### Python - PEP 8 शैली दिशानिर्देश - स्पष्ट, शैक्षिक कोड उदाहरण -- जहां सहायक हो, टाइप हिंट्स +- सीखने में सहायक टाइप संकेत -### मार्कडाउन दस्तावेज़ीकरण +### Markdown दस्तावेज़ीकरण -- स्पष्ट शीर्षक पदानुक्रम -- भाषा निर्दिष्ट कोड ब्लॉक +- स्पष्ट हेडिंग पदानुक्रम +- भाषा निर्दिष्ट कोड ब्लॉक्स - अतिरिक्त संसाधनों के लिंक -- `images/` निर्देशिकाओं में स्क्रीनशॉट और छवियाँ -- पहुँच के लिए छवियों का Alt टेक्स्ट +- `images/` निर्देशिकाओं में स्क्रीनशॉट और चित्र +- पहुँच के लिए चित्रों के लिए Alt पाठ ### फ़ाइल संगठन -- पाठ क्रमांकित (1-getting-started-lessons, 2-js-basics, आदि) +- लेसन क्रमशः नंबरित (1-getting-started-lessons, 2-js-basics, आदि) - प्रत्येक परियोजना में `solution/` और अक्सर `start/` या `your-work/` निर्देशिकाएं -- पाठ-विशिष्ट `images/` फ़ोल्डरों में छवियाँ संग्रहीत +- चित्र लेसन-विशिष्ट `images/` फोल्डर में संग्रहित - अनुवाद `translations/{language-code}/` संरचना में -## बिल्ड और परिनियोजन +## निर्माण और परिनियोजन ### क्विज़ ऐप परिनियोजन (Azure Static Web Apps) -क्विज़-ऐप Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर किया गया है: +quizz-app Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर किया गया है: ```bash cd quiz-app npm run build # dist/ फ़ोल्डर बनाता है -# मुख्य शाखा पर पुश करने पर GitHub Actions वर्कफ़्लो के माध्यम से तैनात करता है +# मुख्य में पुश पर GitHub Actions वर्कफ़्लो के माध्यम से तैनात करता है ``` Azure Static Web Apps कॉन्फ़िगरेशन: -- **ऐप स्थान**: `/quiz-app` +- **एप स्थान**: `/quiz-app` - **आउटपुट स्थान**: `dist` -- **वर्कफ़्लो**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **कार्यप्रवाह**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### डॉक्यूमेंटेशन PDF जेनरेशन +### दस्तावेज़ीकरण PDF जनरेशन ```bash npm install # docsify-to-pdf इंस्टॉल करें @@ -207,72 +207,72 @@ npm install -g docsify-cli # Docsify को वैश्विक रूप docsify serve # localhost:3000 पर सेवा दें ``` -### परियोजना-विशिष्ट बिल्ड्स +### परियोजना-विशिष्ट निर्माण -प्रत्येक परियोजना निर्देशिका की अपनी बिल्ड प्रक्रिया हो सकती है: -- Vue परियोजनाओं के लिए: `npm run build` उत्पादन बंडल बनाता है -- स्टैटिक परियोजनाओं के लिए: कोई बिल्ड चरण नहीं, सीधे फाइलें परोसी जाती हैं +प्रत्येक परियोजना निर्देशिका में अपना निर्माण प्रक्रिया हो सकती है: +- Vue परियोजनाएं: उत्पादन बंडल बनाने के लिए `npm run build` +- स्थिर परियोजनाएं: कोई निर्माण कदम नहीं, सीधे फ़ाइलें परोसें ## पुल अनुरोध दिशानिर्देश ### शीर्षक प्रारूप -परिवर्तन के क्षेत्र को दर्शाने वाले स्पष्ट, वर्णनात्मक शीर्षक का उपयोग करें: -- `[Quiz-app] Add new quiz for lesson X` -- `[Lesson-3] Fix typo in terrarium project` -- `[Translation] Add Spanish translation for lesson 5` -- `[Docs] Update setup instructions` +परिवर्तन क्षेत्र निर्दिष्ट करते हुए स्पष्ट, वर्णनात्मक शीर्षक का उपयोग करें: +- `[Quiz-app] लेसन X के लिए नया क्विज़ जोड़ें` +- `[Lesson-3] टेरारियम परियोजना में टाइपो ठीक करें` +- `[Translation] लेसन 5 के लिए स्पेनिश अनुवाद जोड़ें` +- `[Docs] सेटअप निर्देश अपडेट करें` -### आवश्यक जांचें +### आवश्यक जांच -पुल अनुरोध सबमिट करने से पहले: +PR सबमिट करने से पहले: 1. **कोड गुणवत्ता**: - प्रभावित परियोजना निर्देशिकाओं में `npm run lint` चलाएं - - सभी लिंटिंग त्रुटियाँ और चेतावनियाँ ठीक करें + - सभी लिंटिंग त्रुटियां और चेतावनियां ठीक करें -2. **बिल्ड सत्यापन**: - - यदि लागू हो, `npm run build` चलाएं - - कोई बिल्ड त्रुटि नहीं होनी चाहिए +2. **निर्माण सत्यापन**: + - लागू होने पर `npm run build` चलाएं + - कोई निर्माण त्रुटियां न हों 3. **लिंक सत्यापन**: - - सभी मार्कडाउन लिंक का परीक्षण करें - - छवि संदर्भ सही हैं, सुनिश्चित करें + - सभी मार्कडाउन लिंक टेस्ट करें + - छवि संदर्भ सही हों 4. **सामग्री समीक्षा**: - - वर्तनी और व्याकरण ठीक से जांचें + - वर्तनी और व्याकरण के लिए प्रूफरीड करें - कोड उदाहरण सही और शैक्षिक हों - अनुवाद मूल अर्थ बनाए रखें -### योगदान आवश्यकताएँ +### योगदान आवश्यकताएं -- Microsoft CLA से सहमति दें (पहले PR पर स्वचालित जांच) +- Microsoft CLA से सहमति (पहले PR पर स्वचालित जांच) - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) का पालन करें - विस्तृत दिशानिर्देशों के लिए [CONTRIBUTING.md](./CONTRIBUTING.md) देखें -- यदि लागू हो तो PR विवरण में मुद्दा नंबर संदर्भित करें +- यदि लागू हो तो PR विवरण में मुद्दा संख्या संदर्भित करें ### समीक्षा प्रक्रिया -- PRs मेंटेनरों और समुदाय द्वारा समीक्षा किए जाते हैं +- PR को रखरखावकर्ताओं और समुदाय द्वारा समीक्षा किया जाता है - शैक्षिक स्पष्टता को प्राथमिकता दी जाती है - कोड उदाहरण वर्तमान सर्वोत्तम प्रथाओं का पालन करें -- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किये जाते हैं +- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा की जाती है ## अनुवाद प्रणाली ### स्वचालित अनुवाद -- GitHub Actions के साथ co-op-translator वर्कफ़्लो का उपयोग +- co-op-translator वर्कफ़्लो के साथ GitHub Actions का उपयोग करता है - 50+ भाषाओं में स्वचालित अनुवाद करता है -- मुख्य निर्देशिकाओं में स्रोत फ़ाइलें -- अनुवादित फ़ाइलें `translations/{language-code}/` निर्देशिकाओं में +- स्रोत फाइलें मुख्य निर्देशिकाओं में +- अनुवादित फाइलें `translations/{language-code}/` निर्देशिकाओं में ### मैनुअल अनुवाद सुधार जोड़ना -1. `translations/{language-code}/` में फ़ाइल खोजें -2. संरचना को बनाए रखते हुए सुधार करें -3. सुनिश्चित करें कोड उदाहरण कार्यात्मक रहें -4. स्थानीयकृत क्विज़ सामग्री का परीक्षण करें +1. `translations/{language-code}/` में फ़ाइल ढूंढ़ें +2. संरचना बनाए रखते हुए सुधार करें +3. सुनिश्चित करें कि कोड उदाहरण कार्यशील हों +4. कोई स्थानीयकृत क्विज़ सामग्री हो तो उसका परीक्षण करें ### अनुवाद मेटाडेटा @@ -291,118 +291,118 @@ CO_OP_TRANSLATOR_METADATA: ## डिबगिंग और समस्या निवारण -### सामान्य समस्याएं +### सामान्य समस्याएँ **क्विज़ ऐप शुरू नहीं होता**: - Node.js संस्करण जांचें (v14+ अनुशंसित) - `node_modules` और `package-lock.json` हटाएं, फिर `npm install` चलाएं -- पोर्ट कॉन्फ्लिक्ट जांचें (डिफ़ॉल्ट: Vite पोर्ट 5173) +- पोर्ट संघर्ष की जाँच करें (डिफ़ॉल्ट: Vite पोर्ट 5173 का उपयोग करता है) **API सर्वर शुरू नहीं होता**: -- Node.js संस्करण की न्यूनतम आवश्यकता जांचें (node >=10) -- पोर्ट पहले से उपयोग में है क्या जांचें -- सभी निर्भरताएँ `npm install` से स्थापित करें +- Node.js संस्करण न्यूनतम ज़रूरतें पूरी करता है या नहीं जांचें (node >=10) +- जांचें कि पोर्ट पहले से उपयोग में तो नहीं +- सभी निर्भरताओं को `npm install` के साथ स्थापित करें -**ब्राउज़र एक्सटेंशन लोड नहीं होता**: -- manifest.json सही स्वरूपित है क्या जांचें -- त्रुटियों के लिए ब्राउज़र कंसोल देखें +**ब्राउज़र एक्सटेंशन लोड नहीं होती**: +- manifest.json ठीक से फॉर्मेट किया गया है या नहीं जांचें +- ब्राउज़र कंसोल में त्रुटियाँ देखें - ब्राउज़र-विशिष्ट एक्सटेंशन इंस्टॉलेशन निर्देशों का पालन करें -**Python चैट परियोजना समस्याएं**: -- OpenAI पैकेज स्थापित करें: `pip install openai` -- GITHUB_TOKEN पर्यावरण चर सेट है या नहीं जांचें -- GitHub मॉडलों की पहुँच अनुमतियाँ जांचें +**Python चैट प्रोजेक्ट समस्याएं**: +- सुनिश्चित करें OpenAI पैकेज इंस्टॉल है: `pip install openai` +- GITHUB_TOKEN पर्यावरण चर सेट है +- GitHub Models एक्सेस अनुमतियाँ जांचें -**Docsify डॉक्यूमेंट्स सर्व नहीं कर रहा**: +**Docsify दस्तावेज़ सेवा नहीं दे रहा**: - docsify-cli ग्लोबली इंस्टॉल करें: `npm install -g docsify-cli` -- रिपॉज़िटरी रूट निर्देशिका से चलाएं -- जांचें कि `docs/_sidebar.md` मौजूद है +- रिपॉजिटरी रूट निर्देशिका से चलाएं +- जांचें कि `docs/_sidebar.md` फ़ाइल मौजूद है -### विकास वातावरण सुझाव +### विकास पर्यावरण सुझाव - HTML परियोजनाओं के लिए VS Code में Live Server एक्सटेंशन का उपयोग करें -- स्थिर प्रारूपण के लिए ESLint और Prettier एक्सटेंशन इंस्टॉल करें -- JavaScript डिबगिंग हेतु ब्राउज़र DevTools का प्रयोग करें +- संगत स्वरूपण के लिए ESLint और Prettier एक्सटेंशन इंस्टॉल करें +- जावास्क्रिप्ट डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें - Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन इंस्टॉल करें ### प्रदर्शन विचार -- बहुत सारी अनुवादित फाइलें (50+ भाषाएं) होने से पूर्ण क्लोन बड़े होते हैं -- केवल सामग्री पर काम करने के लिए shallow clone का प्रयोग करें: `git clone --depth 1` +- बड़ी संख्या में अनुवादित फाइलें (50+ भाषाएँ) होने से पूर्ण क्लोन बड़े होते हैं +- केवल सामग्री पर काम करने पर shallow clone का उपयोग करें: `git clone --depth 1` - अंग्रेज़ी सामग्री पर काम करते समय अनुवादों को खोज से बाहर रखें -- पहली बार चलाते समय बिल्ड प्रक्रियाएं धीमी हो सकती हैं (`npm install`, Vite बिल्ड) +- पहला रन (npm install, Vite निर्माण) धीमा हो सकता है ## सुरक्षा विचार ### पर्यावरण चर -- API कुंजियाँ कभी भी रिपॉज़िटरी में कमिट न करें -- `.env` फ़ाइलों का उपयोग करें (पहले से `.gitignore` में शामिल) -- परियोजना README में आवश्यक पर्यावरण चर डॉक्यूमेंट करें +- API कुंजी कभी भी रिपॉजिटरी में कमिट न करें +- `.env` फाइलों का उपयोग करें (पहले से `.gitignore` में शामिल) +- आवश्यक पर्यावरण चर परियोजना README में दस्तावेजित करें ### Python परियोजनाएं -- वर्चुअल एन्वायरनमेंट का उपयोग करें: `python -m venv venv` -- निर्भरताएँ अपडेट रखें -- GitHub टोकन को न्यूनतम आवश्यक अनुमति दें +- वर्चुअल एनवायरनमेंट का उपयोग करें: `python -m venv venv` +- निर्भरताओं को अपडेट रखें +- GitHub टोकन न्यूनतम आवश्यक अनुमतियाँ रखें -### GitHub मॉडल पहुँच +### GitHub Models एक्सेस -- GitHub मॉडल के लिए Personal Access Tokens (PAT) आवश्यक हैं -- टोकन पर्यावरण चर के रूप में संग्रहीत करें -- टोकन या साख कभी कमिट न करें +- GitHub Models के लिए Personal Access Tokens (PAT) आवश्यक +- टोकन पर्यावरण चरों के रूप में संग्रहीत करें +- टोकन या क्रेडेंशियल कभी कमिट न करें ## अतिरिक्त नोट्स ### लक्षित दर्शक -- वेब विकास के पूर्ण शुरुआती -- छात्र और आत्म-अध्ययन करने वाले -- कक्षा में पाठ्यक्रम का उपयोग करने वाले शिक्षक -- सामग्री पहुंच और क्रमिक कौशल निर्माण के लिए डिज़ाइन की गई है +- वेब विकास के पूर्ण शुरुआत करने वाले +- छात्र और स्व-अध्ययनकर्ता +- कक्षाओं में पाठ्यक्रम का उपयोग करने वाले शिक्षक +- सामग्री पहुँचनीयता और धीरे-धीरे कौशल निर्माण के लिए डिज़ाइन की गई है ### शैक्षिक दर्शन -- परियोजना-आधारित सीखने का दृष्टिकोण -- बार-बार ज्ञान जाँच (क्विज़) -- हैंड्स-ऑन कोडिंग अभ्यास +- परियोजना-आधारित शिक्षण दृष्टिकोण +- बार-बार ज्ञान जांच (क्विज़) +- हाथों-हाथ कोडिंग अभ्यास - वास्तविक दुनिया के अनुप्रयोग उदाहरण -- फ्रेमवर्क से पहले मूल बातें सीखने पर ध्यान +- फ्रेमवर्क से पहले मूल बातें पर ध्यान केंद्रित -### रिपॉज़िटरी रखरखाव +### रिपॉजिटरी रखरखाव - सक्रिय शिक्षार्थी और योगदानकर्ता समुदाय -- निर्भरताओं और सामग्री का नियमित अद्यतन -- मेंटेनरों द्वारा मुद्दों और चर्चाओं की निगरानी -- GitHub Actions के माध्यम से अनुवाद अपडेट्स स्वचालित +- निर्भरताओं और सामग्री का नियमित अपडेट +- मुद्दों और चर्चाओं पर रखरखावकर्ताओं द्वारा निगरानी +- अनुवाद अपडेट GitHub Actions द्वारा स्वचालित ### संबंधित संसाधन - [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) -- सीखने वालों के लिए अनुशंसित [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) -- अतिरिक्त पाठ्यक्रम: जनरेटिव AI, डेटा साइंस, एमएल, IoT पाठ्यक्रम उपलब्ध +- शिक्षार्थियों के लिए सिफारिश की गई [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- अतिरिक्त कोर्स: जनरेटिव AI, डेटा साइंस, ML, IoT पाठ्यक्रम उपलब्ध ### विशिष्ट परियोजनाओं के साथ काम करना -व्यक्तिगत परियोजनाओं के विस्तृत निर्देश के लिए, निम्न README फ़ाइल देखें: +व्यक्तिगत परियोजनाओं के विस्तृत निर्देशों के लिए, निम्न README फ़ाइल देखें: - `quiz-app/README.md` - Vue 3 क्विज़ एप्लिकेशन - `7-bank-project/README.md` - प्रमाणीकरण के साथ बैंकिंग एप्लिकेशन - `5-browser-extension/README.md` - ब्राउज़र एक्सटेंशन विकास -- `6-space-game/README.md` - कन्वास आधारित गेम विकास -- `9-chat-project/README.md` - AI चैट असिस्टेंट प्रोजेक्ट +- `6-space-game/README.md` - कैनवास-आधारित गेम विकास +- `9-chat-project/README.md` - AI चैट सहायक परियोजना -### मोनोरिपॉ संरचना +### मोनोरिपो संरचना -हालांकि यह पारंपरिक मोनोरिपॉ नहीं है, इस रिपॉज़िटरी में कई स्वतंत्र परियोजनाएं हैं: -- प्रत्येक पाठ स्वायत्त है -- परियोजनाएं निर्भरताएँ साझा नहीं करतीं -- व्यक्तिगत परियोजनाओं पर बिना दूसरों को प्रभावित किए काम करें -- पूर्ण पाठ्यक्रम अनुभव के लिए पूरे रिपॉज़िटरी को क्लोन करें +यह पारंपरिक मोनोरिपो नहीं है, यह रिपॉजिटरी कई स्वतंत्र परियोजनाओं को शामिल करता है: +- प्रत्येक लेसन स्वतंत्र है +- परियोजनाएं निर्भरताएं साझा नहीं करतीं +- व्यक्तिगत परियोजनाओं पर बिना दूसरे प्रभावित हुए काम करें +- पूरा पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें --- -**अस्वीकरण**: -इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। हम सटीकता के लिए प्रयासरत हैं, लेकिन कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। +**अस्वीकरण**: +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानवीय अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या मिसइंटरप्रिटेशन के लिए हम जिम्मेदार नहीं हैं। \ No newline at end of file diff --git a/translations/hi/README.md b/translations/hi/README.md index 814bdce8d..c69a61167 100644 --- a/translations/hi/README.md +++ b/translations/hi/README.md @@ -1,211 +1,198 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +# शुरुआती लोगों के लिए वेब विकास - एक पाठ्यक्रम -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +Microsoft क्लाउड एडवोकेट्स द्वारा हमारे 12-सप्ताह के व्यापक पाठ्यक्रम के साथ वेब विकास के मूल बातें सीखें। 24 पाठों में से प्रत्येक JavaScript, CSS, और HTML को हाथों-हाथ प्रोजेक्ट्स जैसे टेरारियम, ब्राउज़र एक्सटेंशनों, और स्पेस गेम्स के माध्यम से गहराई से समझाता है। क्वीज़, चर्चाओं, और व्यावहारिक असाइनमेंट्स में भाग लें। हमारी प्रभावी परियोजना-आधारित शिक्षा पद्धति के साथ अपनी कौशलों को बढ़ाएं और आपकी ज्ञान की स्मृति को बेहतर बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें! -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) - -# शुरुआती लोगों के लिए वेब डेवलपमेंट - एक पाठ्यक्रम - -माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा हमारे 12 सप्ताह के व्यापक कोर्स के साथ वेब डेवलपमेंट के मूल सिद्धांत सीखें। 24 पाठों में से प्रत्येक में टेरारियम, ब्राउज़र एक्सटेंशन और स्पेस गेम जैसे हैंड्स-ऑन प्रोजेक्ट्स के जरिए JavaScript, CSS, और HTML पर गहराई से चर्चा की गई है। क्विज़, चर्चाओं, और व्यावहारिक असाइनमेंट्स के साथ जुड़ें। अपनी कौशल को बढ़ाएं और हमारे प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धति के साथ अपने ज्ञान को यादगार बनाएं। आज ही अपनी कोडिंग यात्रा शुरू करें! - -Azure AI Foundry Discord समुदाय में शामिल हों - -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +Azure AI Foundry डिसकॉड समुदाय में शामिल हों इन संसाधनों का उपयोग शुरू करने के लिए इन चरणों का पालन करें: -1. **रिपॉजिटरी को फोर्क करें**: क्लिक करें [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **रिपॉजिटरी क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Azure AI Foundry Discord में शामिल हों और विशेषज्ञों व साथी डेवलपर्स से मिलें**](https://discord.com/invite/ByRwuEEgH4) +1. **रिपॉजिटरी को फ़ोर्क करें**: क्लिक करें [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **रिपॉजिटरी को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Azure AI Foundry Discord में शामिल हों और विशेषज्ञों तथा अन्य डेवलपर्स से मिलें**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 बहुभाषी समर्थन -#### GitHub एक्शन के माध्यम से समर्थित (स्वचालित एवं हमेशा अपडेट रहता है) - - -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](./README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +#### GitHub Action के माध्यम से समर्थित (स्वचालित और हमेशा अद्यतित) -> **स्थानीय रूप से क्लोन करना पसंद करते हैं?** - -> यह रिपॉजिटरी 50+ भाषा अनुवाद शामिल करता है जो डाउनलोड आकार को काफी बढ़ा देता है। बिना अनुवाद के क्लोन करने के लिए sparse checkout का उपयोग करें: +> **क्या आप स्थानीय रूप से क्लोन करना पसंद करते हैं?** +> +> इस रिपॉजिटरी में 50+ भाषा अनुवाद शामिल हैं, जिससे डाउनलोड आकार काफी बढ़ जाता है। बिना अनुवाद के क्लोन करने के लिए, sparse checkout का प्रयोग करें: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> यह आपको कोर्स पूरा करने के लिए आवश्यक सभी चीज़ें तेज डाउनलोड के साथ देता है। - - -**यदि आप अतिरिक्त भाषाओं के अनुवाद चाहते हैं तो वे [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) सूचीबद्ध हैं** +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> यह आपको कोर्स पूरा करने के लिए आवश्यक सब कुछ देता है और डाउनलोड भी तेज होता है। -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +**यदि आप अतिरिक्त अनुवाद भाषा चाहते हैं, तो वे [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) सूचीबद्ध हैं** -#### 🧑‍🎓 _क्या आप छात्र हैं?_ +#### 🧑‍🎓 _क्या आप एक छात्र हैं?_ -[**स्टूडेंट हब पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) पर जाएं जहाँ आपको शुरुआती संसाधन, छात्र पैक और यहां तक कि मुफ्त प्रमाणपत्र वाउचर पाने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करें और समय-समय पर देखें क्योंकि हम सामग्री माहवारी बदलते रहते हैं। +[**छात्र हब पेज**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) देखें जहाँ आपको शुरुआती संसाधन, छात्र पैक और मुक्त सर्टिफिकेट वाउचर प्राप्त करने के तरीके मिलेंगे। यह वह पेज है जिसे आप बुकमार्क करें और समय-समय पर देखें क्योंकि हम मासिक रूप से सामग्री बदलते रहते हैं। -### 📣 घोषणा - नई GitHub Copilot एजेंट मोड चुनौतियाँ पूरी करें! +### 📣 घोषणा - नए GitHub Copilot Agent मोड चुनौतियाँ पूरी करें! -नई चुनौती जोड़ी गई है, ज्यादातर अध्यायों में "GitHub Copilot Agent Challenge 🚀" देखें। यह आपके लिए GitHub Copilot और एजेंट मोड का उपयोग करके पूरी करने के लिए नई चुनौती है। यदि आपने पहले एजेंट मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट जनरेट ही नहीं करता बल्कि फाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ। +नई चुनौती जोड़ी गई है, अधिकांश अध्यायों में "GitHub Copilot Agent Challenge 🚀" ढूंढें। यह GitHub Copilot और Agent मोड का उपयोग करके पूरी करने के लिए आपकी एक नई चुनौती है। यदि आपने पहले Agent मोड का उपयोग नहीं किया है, तो यह केवल टेक्स्ट उत्पन्न करने में सक्षम नहीं है, बल्कि यह फ़ाइलें बना सकता है, संपादित कर सकता है, कमांड चला सकता है और भी बहुत कुछ कर सकता है। -### 📣 घोषणा - _जनरेटिव AI का उपयोग करते हुए नया प्रोजेक्ट बनाएं_ +### 📣 घोषणा - _Generative AI का उपयोग करके निर्माण करने के लिए नया प्रोजेक्ट_ -नया AI असिस्टेंट प्रोजेक्ट हाल ही में जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md) +नया AI सहायक प्रोजेक्ट अभी जोड़ा गया है, इसे देखें [project](./9-chat-project/README.md) -### 📣 घोषणा - _JavaScript के लिए जनरेटिव AI पर नया पाठ्यक्रम_ अभी जारी हुआ है +### 📣 घोषणा - _Javascript के लिए Generative AI_ पर नया पाठ्यक्रम अभी जारी किया गया है -हमारा नया जनरेटिव AI पाठ्यक्रम मिस न करें! +हमारा नया Generative AI पाठ्यक्रम न चूकें! -शुरू करने के लिए जाएं [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! +शुरू करने के लिए जाएँ [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ![Background](../../translated_images/hi/background.148a8d43afde5730.webp) -- मूल बातें से लेकर RAG तक सब विषय को कवर करने वाले पाठ। -- GenAI और हमारे सहायक ऐप के माध्यम से ऐतिहासिक पात्रों के साथ बातचीत करें। -- मज़ेदार और आकर्षक कथा, आप समय यात्रा करेंगे! +- बुनियादी से RAG तक सब कुछ कवर करता पाठ। +- GenAI और हमारे सहायक ऐप का उपयोग कर ऐतिहासिक पात्रों के साथ बातचीत करें। +- मज़ेदार और आकर्षक कथा, आप समय यात्रा कर रहे होंगे! ![character](../../translated_images/hi/character.5c0dd8e067ffd693.webp) -प्रत्येक पाठ में एक असाइनमेंट, एक ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्न विषयों पर मार्गदर्शन करती है: +प्रत्येक पाठ में एक असाइनमेंट, ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्न विषयों पर सीखने में मार्गदर्शन करती है: - प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग -- टेक्स्ट और इमेज ऐप निर्माण -- खोज ऐप्स - -शुरू करने के लिए जाएं [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! +- टेक्स्ट और इमेज एप जनरेशन +- सर्च एप्लिकेशन +शुरू करने के लिए जाएँ [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) +## 🌱 शुरुआत करना -## 🌱 शुरूआत +> **शिक्षकों**, हमने इस पाठ्यक्रम का उपयोग करने के लिए [कुछ सुझाव](for-teachers.md) शामिल किए हैं। हमें आपकी प्रतिक्रिया [हमारे डिस्कशन फोरम](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) में पसंद आएगी! -> **शिक्षकगण**, हमने [कुछ सुझाव](for-teachers.md) शामिल किए हैं कि इस पाठ्यक्रम का उपयोग कैसे करें। हम आपकी प्रतिक्रिया के लिए उत्सुक हैं [हमारे चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) में! +**[शिक्षार्थी](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठ के लिए, एक पूर्व व्याख्यान क्विज़ के साथ शुरू करें और व्याख्यान सामग्री पढ़ने, विभिन्न गतिविधियों को पूरा करने, और पोस्ट-व्याख्यान क्विज़ के साथ अपनी समझ जाँचें। -**[शिक्षार्थी](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, हर पाठ के लिए, एक प्री-लेक्चर क्विज़ के साथ शुरू करें और फिर व्याख्यान सामग्री पढ़ें, विभिन्न गतिविधियाँ पूरी करें और पोस्ट-लेक्चर क्विज़ के साथ अपनी समझ जांचें। +अपनी सीखने के अनुभव को बेहतर बनाने के लिए, अपने सहपाठियों के साथ जुड़ें और परियोजनाओं पर एक साथ काम करें! चर्चाओं का स्वागत है हमारे [डिस्कशन फोरम](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) में, जहाँ हमारे मॉडरेटर प्रश्नों का जवाब देने के लिए उपलब्ध होंगे। -अपना अधिगम अनुभव बेहतर बनाने के लिए, अपने साथियों के साथ जुड़ें और प्रोजेक्ट्स पर मिलकर काम करें! चर्चाएँ हमारे [चर्चा मंच](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) में प्रोत्साहित की जाती हैं जहाँ हमारे मॉडरेटर आपकी मदद के लिए उपलब्ध रहेंगे। +अपनी शिक्षा को और बढ़ाने के लिए, हम अत्यधिक अनुशंसा करते हैं कि आप अतिरिक्त अध्ययन सामग्री के लिए [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) देखें। -अपनी शिक्षा को आगे बढ़ाने के लिए, हम अतिरिक्त अध्ययन सामग्री के लिए [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) का पता लगाने की सिफारिश करते हैं। +### 📋 अपना पर्यावरण सेट करें -### 📋 अपना परिवेश सेटअप करना +इस पाठ्यक्रम के पास तैयार विकास पर्यावरण है! शुरुआत करते समय आप पाठ्यक्रम को [Codespace](https://github.com/features/codespaces/) (ब्राउज़र-आधारित, बिना इंस्टॉल के वातावरण) में चलाना चुन सकते हैं, या अपने कंप्यूटर पर स्थानीय रूप से [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जैसे टेक्स्ट संपादक का उपयोग कर सकते हैं। -इस पाठ्यक्रम के लिए एक विकास पर्यावरण तैयार है! जैसे ही आप शुरू करें, आप इस पाठ्यक्रम को [Codespace](https://github.com/features/codespaces/) (_एक ब्राउज़र-आधारित, बिना इंस्टॉल वाले पर्यावरण_) में चला सकते हैं, या अपने कंप्यूटर पर ही [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जैसे टेक्स्ट एडिटर का उपयोग कर सकते हैं। - -#### अपनी रिपॉजिटरी बनाएं -अपना कार्य आसानी से सहेजने के लिए, यह अनुशंसा की जाती है कि आप इस रिपॉजिटरी की अपनी प्रति बनाएं। ऐसा करने के लिए पेज के शीर्ष पर **Use this template** बटन पर क्लिक करें। यह आपके GitHub खाते में पाठ्यक्रम की एक प्रति के साथ नई रिपॉजिटरी बनाएगा। +#### अपनी रिपॉजिटरी बनाएँ +अपने कार्य को आसानी से सहेजने के लिए, ये अनुशंसित है कि आप इस रिपॉजिटरी की अपनी कॉपी बनाएं। आप इसे पेज के ऊपर के **Use this template** बटन पर क्लिक करके कर सकते हैं। यह आपके GitHub खाते में पाठ्यक्रम की एक कॉपी के साथ एक नई रिपॉजिटरी बनाएगा। इन चरणों का पालन करें: -1. **रिपॉजिटरी को फोर्क करें**: इस पेज के टॉप-राइट कोने में "Fork" बटन पर क्लिक करें। -2. **रिपॉजिटरी क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **रिपॉजिटरी को फ़ोर्क करें**: इस पेज के ऊपर-दाएं कोने में "Fork" बटन पर क्लिक करें। +2. **रिपॉजिटरी को क्लोन करें**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Codespace में पाठ्यक्रम चलाना +#### एक Codespace में पाठ्यक्रम चलाएँ -आपने जो रिपॉजिटरी की प्रति बनाई है, उसमें **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। इससे आपके लिए एक नया Codespace बनेगा जिसमें आप काम कर सकते हैं। +आपकी बनाई गई इस रिपॉजिटरी की कॉपी में, **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके लिए काम करने के लिए एक नया Codespace बनाएगा। ![Codespace](../../translated_images/hi/createcodespace.0238bbf4d7a8d955.webp) -#### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाना - -इस पाठ्यक्रम को अपने कंप्यूटर पर चलाने के लिए, आपको एक टेक्स्ट एडिटर, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), आपको इन टूल्स के विभिन्न विकल्पों के बारे में मार्गदर्शन करेगा ताकि आप अपने लिए सबसे अच्छा चुन सकें। +#### अपने कंप्यूटर पर स्थानीय रूप से पाठ्यक्रम चलाएँ -हमारा सुझाव है कि आप [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग करें, जो एक अंतर्निर्मित [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) भी प्रदान करता है। आप Visual Studio Code यहां से डाउनलोड कर सकते हैं: [यहाँ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)। +अपने कंप्यूटर पर स्थानीय रूप से इस पाठ्यक्रम को चलाने के लिए, आपको एक टेक्स्ट संपादक, एक ब्राउज़र और एक कमांड लाइन टूल की आवश्यकता होगी। हमारा पहला पाठ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), आपको इन टूल्स के विभिन्न विकल्पों के बारे में गाइड करेगा ताकि आप अपने लिए सबसे अच्छा विकल्प चुन सकें। -1. अपनी रिपॉजिटरी अपने कंप्यूटर पर क्लोन करें। ऐसा करने के लिए **Code** बटन पर क्लिक करें और URL कॉपी करें: +हमारा सुझाव है कि आप [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) का उपयोग संपादक के रूप में करें, जिसमें एक अंतर्निहित [टर्मिनल](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) भी है। आप Visual Studio Code को [यहाँ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) से डाउनलोड कर सकते हैं। +1. अपने रिपोजिटरी को अपने कंप्यूटर पर क्लोन करें। आप यह **Code** बटन पर क्लिक करके और URL कॉपी करके कर सकते हैं: [CodeSpace](./images/createcodespace.png) -फिर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) के भीतर [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोलें और निम्नलिखित कमांड चलाएँ, `` को उस URL से बदलते हुए जो आपने अभी कॉपी किया है: + + फिर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) के भीतर [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोलें और निम्नलिखित कमांड चलाएं, `` के स्थान पर वह URL डालें जो आपने अभी कॉपी किया है: ```bash git clone ``` -2. Visual Studio Code में फोल्डर खोलें। आप यह **File** > **Open Folder** पर क्लिक करके कर सकते हैं और उस फोल्डर का चयन कर सकते हैं जिसे आपने अभी क्लोन किया है। +2. Visual Studio Code में फ़ोल्डर खोलें। आप यह करके कर सकते हैं **File** > **Open Folder** पर क्लिक करके और उस फ़ोल्डर का चयन करके जिसे आपने अभी क्लोन किया है। -> अनुशंसित Visual Studio Code एक्सटेंशन: +> अनुशंसित Visual Studio Code एक्सटेंशन्स: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code के भीतर HTML पृष्ठों का पूर्वावलोकन करने के लिए -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड तेज़ी से लिखने में मदद करने के लिए +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code के भीतर HTML पेजों का पूर्वावलोकन करने के लिए +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड तेजी से लिखने में मदद के लिए -## 📂 प्रत्येक पाठ में शामिल हैं: +## 📂 हर पाठ में शामिल हैं: - वैकल्पिक स्केचनोट - वैकल्पिक पूरक वीडियो - प्री-लेसन वार्मअप क्विज़ - लिखित पाठ -- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट बनाने के चरण-दर-चरण गाइड +- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट बनाने के चरण-दर-चरण मार्गदर्शिकाएँ - ज्ञान जांच - एक चुनौती -- पूरक पठन सामग्री +- पूरक पठन - असाइनमेंट - [पोस्ट-लेसन क्विज़](https://ff-quizzes.netlify.app/web/) -> **क्विज़ के बारे में एक नोट**: सभी क्विज़ Quiz-app फोल्डर में रखे गए हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं, क्विज़ ऐप को लोकली चला सकते हैं या Azure पर तैनात कर सकते हैं; `quiz-app` फ़ोल्डर में निर्देशों का पालन करें। +> **क्विज़ के बारे में एक नोट**: सभी क्विज़ क्विज़-ऐप फ़ोल्डर में हैं, कुल 48 क्विज़ जिनमें तीन-तीन प्रश्न हैं। ये [यहां](https://ff-quizzes.netlify.app/web/) उपलब्ध हैं, क्विज़ ऐप को स्थानीय रूप से चलाया जा सकता है या Azure पर परिनियोजित किया जा सकता है; `quiz-app` फ़ोल्डर में दिए निर्देशों का पालन करें। ## 🗃️ पाठ -| | प्रोजेक्ट का नाम | सिखाए गए विषय | सीखने के उद्देश्य | लिंक किया गया पाठ | लेखक | -| :-: | :------------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | शुरुआत करना | प्रोग्रामिंग और उपयोगी उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के मूल तत्व सीखें और उन सॉफ्टवेयर के बारे में जानें जो पेशेवर डेवलपर्स को उनके काम में मदद करते हैं | [प्रोग्रामिंग भाषाओं और उपकरणों का परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | शुरुआत करना | GitHub का मूल स्वरूप, टीम के साथ काम करना | अपने प्रोजेक्ट में GitHub का उपयोग करना सीखें, एक कोड बेस पर दूसरों के साथ सहयोग कैसे करें | [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | शुरुआत करना | पहुँच योग्यता | वेब पहुँच के मूल बातें सीखें | [पहुँच योग्यता के मूल सिद्धांत](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS बुनियादी बातें | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारों का मूल ज्ञान | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS बुनियादी बातें | फ़ंक्शन और मेथड्स | एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फ़ंक्शन और मेथड्स के बारे में सीखें | [फ़ंक्शन और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और Christopher | -| 06 | JS बुनियादी बातें | JS के साथ निर्णय लेना | निर्णय-लेने के तरीके उपयोग करके अपने कोड में शर्तें बनाना सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS बुनियादी बातें | एरे और लूप | JavaScript में डेटा के साथ काम करने के लिए एरे और लूप का उपयोग करें | [एरे और लूप](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML का अभ्यास | एक ऑनलाइन टेरारीयम बनाने के लिए HTML बनाएं, लेआउट बनाने पर ध्यान केंद्रित करें | [HTML का परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS का अभ्यास | ऑनलाइन टेरारीयम को स्टाइल करने के लिए CSS बनाएं, CSS के मूल सिद्धांतों के साथ पेज को प्रतिक्रियाशील बनाएं | [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोज़र, DOM मैनिपुलेशन | टेरारीयम को ड्रैग/ड्रॉप इंटरफेस के रूप में कार्य करने के लिए JavaScript बनाएं, क्लोज़र और DOM मैनिपुलेशन पर ध्यान केंद्रित करें | [JavaScript क्लोज़र, DOM मैनिपुलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [टाइपिंग गेम](./4-typing-game/solution/README.md) | टाइपिंग गेम बनाना | अपने JavaScript ऐप की लॉजिक चलाने के लिए कीबोर्ड ईवेंट का उपयोग करना सीखें | [ईवेंट-ड्रिवन प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | ब्राउज़र के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनका इतिहास और एक ब्राउज़र एक्सटेंशन के पहले तत्वों का आधार बनाना सीखें | [ब्राउज़र के बारे में](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | फॉर्म बनाना, API कॉल करना और स्थानीय स्टोरेज में वेरिएबल्स स्टोर करना | API कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के JavaScript तत्व बनाएं, स्थानीय स्टोरेज में रखें गए वेरिएबल्स का उपयोग करें | [API, फॉर्म, और स्थानीय स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन सीखें | [पृष्ठभूमि कार्य और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [स्पेस गेम](./6-space-game/solution/README.md) | JavaScript के साथ अधिक उन्नत गेम विकास | क्लासेज और कम्पोजीशन दोनों का उपयोग करके इनहेरिटेंस और Pub/Sub पैटर्न सीखें, गेम बनाने की तैयारी में | [उन्नत गेम विकास का परिचय](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [स्पेस गेम](./6-space-game/solution/README.md) | कैनवास पर ड्राइंग | स्क्रीन पर तत्वों को ड्रॉ करने के लिए उपयोग की जाने वाली Canvas API के बारे में जानें | [कैनवास पर ड्राइंग](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [स्पेस गेम](./6-space-game/solution/README.md) | स्क्रीन पर तत्वों को स्थानांतरित करना | समझें कि कैसे तत्व कार्टेशियन निर्देशांकों और Canvas API का उपयोग कर गतिशील हो सकते हैं | [तत्वों को स्थानांतरित करना](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [स्पेस गेम](./6-space-game/solution/README.md) | टकराव का पता लगाना | तत्वों को आपस में टकराने दें और कीप्रेस का उपयोग करके प्रतिक्रिया करें तथा गेम के प्रदर्शन सुनिश्चित करने के लिए कूलडाउन फ़ंक्शन प्रदान करें | [टकराव पता लगाना](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [स्पेस गेम](./6-space-game/solution/README.md) | स्कोर बनाए रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणना करें | [स्कोर बनाए रखना](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [स्पेस गेम](./6-space-game/solution/README.md) | गेम को समाप्त करना और पुनः शुरू करना | गेम समाप्त करने और पुनः शुरू करने के बारे में जानें, जिसमें संसाधनों की सफाई और वैरिएबल मानों को रीसेट करना शामिल है | [समाप्ति की शर्त](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | वेब ऐप में HTML टेम्पलेट और रूट्स | रूटिंग और HTML टेम्पलेट का उपयोग करके एक मल्टीपेज वेबसाइट की संरचना बनाना सीखें | [HTML टेम्पलेट और रूट्स](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | लॉगिन और पंजीकरण फॉर्म बनाना | फॉर्म बनाना और सत्यापन प्रक्रियाओं को संभालना सीखें | [फॉर्म](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | डेटा प्राप्त करने और उपयोग करने की विधियाँ | आपके ऐप में डेटा कैसे आता है और जाता है, इसे कैसे प्राप्त करें, संग्रहीत करें और नष्ट करें | [डेटा](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | स्टेट प्रबंधन की अवधारणाएँ | सीखें कि आपका ऐप स्टेट को कैसे बनाए रखता है और इसे प्रोग्रामिंग के माध्यम से कैसे प्रबंधित किया जाता है | [स्टेट प्रबंधन](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | VScode के साथ काम करना | कोड संपादक का उपयोग करना सीखें | [VScode कोड संपादक का उपयोग](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI सहायक](./9-chat-project/README.md) | AI के साथ काम करना | अपना AI सहायक बनाना सीखें | [AI सहायक प्रोजेक्ट](./9-chat-project/README.md) | Chris | - -## 🏫 शिक्षाशास्त्र - -हमारा पाठ्यक्रम दो महत्वपूर्ण शिक्षाशास्त्रीय सिद्धांतों के साथ डिज़ाइन किया गया है: +| | प्रोजेक्ट का नाम | सिखाए गए अवधारणाएं | सीखने के उद्देश्य | लिंक्ड पाठ | लेखक | +| :-: | :----------------------------------------------------------: | :-----------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------: | :-------------------: | +| 01 | शुरुआत करना | प्रोग्रामिंग और टूल्स का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के पीछे के बुनियादी सिद्धांत सीखें और सॉफ़्टवेयर के बारे में जानें जो पेशेवर विकासकर्ताओं को मदद करता है | [प्रोग्रामिंग भाषाओं और टूल्स का परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | शुरुआत करना | GitHub के मूल बातें, टीम के साथ काम करना | अपने प्रोजेक्ट में GitHub का उपयोग कैसे करें, और किसी कोड बेस पर दूसरों के साथ सहयोग कैसे करें | [GitHub का परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | शुरुआत करना | एक्सेबिलिटी | वेब एक्सेसिबिलिटी के मूल बातें सीखें | [एक्सेसिबिलिटी के मूल सिद्धांत](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS बेसिक्स | जावास्क्रिप्ट डेटा टाइप | जावास्क्रिप्ट डेटा टाइप के मूल बातें | [डेटा टाइप](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS बेसिक्स | फंक्शन और मेथड्स | किसी एप्लिकेशन के लॉजिक फ्लो को प्रबंधित करने के लिए फंक्शन और मेथड्स के बारे में जानें | [फंक्शन और मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine और Christopher | +| 06 | JS बेसिक्स | JS के साथ निर्णय लेना | निर्णय लेने के तरीकों का उपयोग करके अपने कोड में कंडीशन्स कैसे बनाएं सीखें | [निर्णय लेना](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS बेसिक्स | एरे और लूप्स | जावास्क्रिप्ट में एरे और लूप्स का उपयोग करके डेटा के साथ काम करें | [एरे और लूप्स](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [टेरियम](./3-terrarium/solution/README.md) | HTML का अभ्यास | ऑनलाइन टेरियम बनाने के लिए HTML बनाएं, विशेष रूप से लेआउट बनाने पर ध्यान केंद्रित करें | [HTML का परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [टेरियम](./3-terrarium/solution/README.md) | CSS का अभ्यास | ऑनलाइन टेरियम को स्टाइल करने के लिए CSS बनाएं, जिसमें CSS की बुनियादें शामिल हैं और पेज को उत्तरदायी बनाना | [CSS का परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [टेरियम](./3-terrarium/solution/README.md) | जावास्क्रिप्ट क्लोज़र्स, DOM हेरफेर | टेरियम को ड्रैग/ड्रॉप इंटरफ़ेस के रूप में बनाने के लिए जावास्क्रिप्ट बनाएं, क्लोज़र्स और DOM हेरफेर पर ध्यान केंद्रित करें | [जावास्क्रिप्ट क्लोज़र्स, DOM हेरफेर](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [टाइपिंग गेम](./4-typing-game/solution/README.md) | टाइपिंग गेम बनाएं | अपने जावास्क्रिप्ट ऐप का लॉजिक चलाने के लिए कीबोर्ड इवेंट्स का उपयोग करना सीखें | [इवेंट-संचालित प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | ब्राउज़र के साथ काम करना | ब्राउज़र कैसे काम करते हैं, उनका इतिहास और ब्राउज़र एक्सटेंशन के पहले तत्वों को स्कैफोल्ड करना सीखें | [ब्राउज़र के बारे में](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | फॉर्म बनाना, API कॉल करना और लोकल स्टोरेज में वेरिएबल स्टोर करना | अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट तत्व बनाएँ जो API कॉल करें और लोकल स्टोरेज में रखे गए वेरिएबल्स का उपयोग करें | [API, फॉर्म, और लोकल स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [ग्रीन ब्राउज़र एक्सटेंशन](./5-browser-extension/solution/README.md) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और कुछ अनुकूलन सीखें | [पृष्ठभूमि कार्य और प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [स्पेस गेम](./6-space-game/solution/README.md) | जावास्क्रिप्ट के साथ अधिक उन्नत गेम विकास | इनहेरिटेंस के बारे में जानें, क्लासेस और कंपोजीशन और Pub/Sub पैटर्न का उपयोग करके, गेम बनाने की तैयारी में | [उन्नत गेम विकास का परिचय](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [स्पेस गेम](./6-space-game/solution/README.md) | कैनवास पर ड्राइंग | Canvas API के बारे में जानें, जिसका उपयोग स्क्रीन पर तत्वों को ड्रॉ करने के लिए किया जाता है | [कैनवास पर ड्राइंग](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [स्पेस गेम](./6-space-game/solution/README.md) | स्क्रीन पर तत्वों को घुमाना | खोजें कि तत्व कैसा गति प्राप्त कर सकते हैं कार्टेशियन कोऑर्डिनेट्स और Canvas API का उपयोग करके | [तत्वों को घुमाना](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [स्पेस गेम](./6-space-game/solution/README.md) | टक्कर पता लगाना | तत्वों को टकराने दें और एक-दूसरे के प्रति प्रतिक्रिया दें कीप्रेस का उपयोग करके, और गेम के प्रदर्शन सुनिश्चित करने के लिए कूलडाउन फंक्शन प्रदान करें | [टक्कर पता लगाना](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [स्पेस गेम](./6-space-game/solution/README.md) | स्कोर बनाए रखना | गेम की स्थिति और प्रदर्शन के आधार पर गणितीय गणनाएँ करें | [स्कोर बनाए रखना](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [स्पेस गेम](./6-space-game/solution/README.md) | गेम को खत्म करना और पुनः शुरू करना | गेम खत्म करने और पुनः शुरू करने के बारे में जानें, जिसमें संसाधनों की सफाई और वेरिएबल मानों को रीसेट करना शामिल है | [समाप्ति शर्त](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | वेब ऐप में HTML टेम्प्लेट और रूट्स | रूटिंग और HTML टेम्प्लेट का उपयोग करते हुए एक मल्टिपेज वेबसाइट की संरचना बनाने का तरीका सीखें | [HTML टेम्प्लेट और रूट्स](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | लॉगिन और रजिस्ट्रेशन फॉर्म बनाएं | फॉर्म बनाना और वैधता प्रक्रियाओं को संभालने के बारे में जानें | [फॉर्म](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | डेटा प्राप्त करने और उपयोग करने के तरीके | आपका ऐप डेटा को कैसे प्रवाहित करता है, इसे कैसे प्राप्त करे, संग्रहित करे, और निपटाएं | [डेटा](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [बैंकिंग ऐप](./7-bank-project/solution/README.md) | स्टेट मैनेजमेंट की अवधारणाएं | सीखें कि आपका ऐप स्टेट को कैसे रखता है और प्रोग्रामेटिक रूप से इसे कैसे प्रबंधित करता है | [स्टेट मैनेजमेंट](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [ब्राउज़र/VScode कोड](../../8-code-editor) | VScode के साथ काम करना | सीखें कि कोड एडिटर का उपयोग कैसे करें | [VScode कोड एडिटर का उपयोग](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [एआई सहायक](./9-chat-project/README.md) | AI के साथ काम करना | अपना खुद का AI सहायक बनाना सीखें | [AI सहायक प्रोजेक्ट](./9-chat-project/README.md) | Chris | + +## 🏫 शिक्षा पद्धति + +हमारा पाठ्यक्रम दो मुख्य शैक्षिक सिद्धांतों के साथ डिज़ाइन किया गया है: * प्रोजेक्ट-आधारित सीखना -* नियमित क्विज़ +* बारम्बार क्विज़ -कार्यक्रम JavaScript, HTML, और CSS के मूलभूत सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम उपकरणों और तकनीकों को सिखाता है। छात्र व्यापक अनुभव प्राप्त करने के लिए टाइपिंग गेम, वर्चुअल टेरारीयम, पर्यावरण-अनुकूल ब्राउज़र एक्सटेंशन, स्पेस-इन्‍वे़डर-शैली का गेम, और व्यवसायों के लिए बैंकिंग ऐप बना पाएंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त होगी। +यह प्रोग्राम जावास्क्रिप्ट, HTML, और CSS के मूल सिद्धांतों के साथ-साथ आज के वेब डेवलपर्स द्वारा उपयोग किए जाने वाले नवीनतम टूल्स और तकनीकों को सिखाता है। छात्र टाइपिंग गेम, वर्चुअल टेरियम, इको-फ्रेंडली ब्राउज़र एक्सटेंशन, स्पेस-इनवेडर शैली के गेम, और व्यवसायों के लिए बैंकिंग ऐप बनाकर व्यावहारिक अनुभव प्राप्त करेंगे। श्रृंखला के अंत तक, छात्रों को वेब विकास की ठोस समझ प्राप्त हो जाएगी। -> 🎓 आप माइक्रोसॉफ्ट लर्न पर इस पाठ्यक्रम की पहली कुछ कक्षाएँ [Lear Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में ले सकते हैं! +> 🎓 आप इस पाठ्यक्रम के पहले कुछ पाठ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) के रूप में Microsoft Learn पर ले सकते हैं! -यह सुनिश्चित करके कि सामग्री प्रोजेक्ट्स के अनुरूप हो, प्रक्रिया छात्रों के लिए अधिक आकर्षक हो जाती है और अवधारणाओं को बनाए रखने में सहायता मिलती है। हमने कई शुरुआती पाठ JavaScript के मूल सिद्धांतों पर भी लिखे हैं ताकि अवधारणाओं का परिचय हो सके, ये "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह का एक वीडियो के साथ जोड़ा गया है, जिनके कुछ लेखक इस पाठ्यक्रम के योगदानकर्ता हैं। +सुनिश्चित करके कि सामग्री प्रोजेक्ट के अनुरूप हो, प्रक्रिया को छात्रों के लिए अधिक आकर्षक बनाया जाता है और अवधारणाओं की पकड़ बढ़ती है। हमने जावास्क्रिप्ट बेसिक्स में कई प्रारंभिक पाठ भी तैयार किए हैं, जो अवधारणाओं का परिचय देते हैं, साथ ही "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" वीडियो ट्यूटोरियल संग्रह से एक वीडियो है, जिनके कुछ लेखक ने इस पाठ्यक्रम में योगदान दिया है। -अतिरिक्त रूप से, कक्षा से पहले एक कम दबाव वाला क्विज़ छात्र की सीखने की मंशा को सेट करता है, जबकि कक्षा के बाद दूसरा क्विज़ आगे की अवधारण सुनिश्चित करता है। यह पाठ्यक्रम लचीला और मजेदार बनाने के लिए डिज़ाइन किया गया है और इसे पूरी तरह या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट्स छोटे से शुरू होकर 12-सप्ताह की अवधि के अंत तक धीरे-धीरे जटिल हो जाते हैं। +इसके अतिरिक्त, कक्षा से पहले एक कम जोखिम वाला क्विज़ छात्र की सीखने की इच्छा सेट करता है, जबकि कक्षा के बाद दूसरा क्विज़ और अधिक पकड़ सुनिश्चित करता है। यह पाठ्यक्रम लचीला और मज़ेदार बनाने के लिए डिज़ाइन किया गया है और संपूर्ण या आंशिक रूप से लिया जा सकता है। प्रोजेक्ट छोटे से शुरू होते हैं और 12 सप्ताह के चक्र के अंत तक काफी जटिल हो जाते हैं। -जबकि हमने जानबूझकर JavaScript फ्रेमवर्क्स का परिचय नहीं दिया है ताकि एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशलों पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के लिए अगला अच्छा कदम Node.js के बारे में सीखना होगा, जो एक और वीडियो संग्रह के माध्यम से उपलब्ध है: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"। +जबकि हमने जावास्क्रिप्ट फ्रेमवर्क पेश करने से जानबूझकर बचा है ताकि एक वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के बाद अगला अच्छा कदम Node.js के बारे में सीखना होगा, जो एक और वीडियो संग्रह "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" के माध्यम से किया जा सकता है। -> हमारे [कोड ऑफ कंडक्ट](CODE_OF_CONDUCT.md) और [योगदान देने के नियम](CONTRIBUTING.md) देखें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं! +> हमारे [व्यवहार संहिता](CODE_OF_CONDUCT.md) और [योगदान](CONTRIBUTING.md) दिशानिर्देश देखें। हम आपके रचनात्मक सुझावों का स्वागत करते हैं! -## 🧭 ऑफ़लाइन पहुँच +## 🧭 ऑफ़लाइन एक्सेस -आप यह दस्तावेज़ [Docsify](https://docsify.js.org/#/) का उपयोग करके ऑफ़लाइन चला सकते हैं। इस रिपॉजिटरी को फॉर्क करें, अपनी स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), फिर इस रिपॉजिटरी के रूट फोल्डर में `docsify serve` टाइप करें। वेबसाइट आपके लोकलहोस्ट के पोर्ट 3000 पर सर्व होगी: `localhost:3000`। - -## 📘 पीडीएफ - -सभी पाठों का PDF [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है। +आप [Docsify](https://docsify.js.org/#/) का उपयोग करके इस दस्तावेज़ को ऑफ़लाइन चला सकते हैं। इस रिपोजिटरी को फोर्क करें, अपने स्थानीय मशीन पर [Docsify इंस्टॉल करें](https://docsify.js.org/#/quickstart), और फिर इस रिपोजिटरी के रूट फ़ोल्डर में टाइप करें `docsify serve`। वेबसाइट आपके लोकलहोस्ट पर पोर्ट 3000 पर सर्व होगी: `localhost:3000`। +## 📘 PDF +सभी पाठों का एक पीडीएफ [यहाँ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) पाया जा सकता है। ## 🎒 अन्य पाठ्यक्रम -हमारी टीम अन्य कोर्स भी बनाती है! देखें: + +हमारी टीम अन्य पाठ्यक्रम भी बनाती है! देखें: ### LangChain @@ -221,16 +208,16 @@ Azure AI Foundry Discord समुदाय में शामिल हों [![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Generative AI Series + +### जनरेटिव AI श्रृंखला [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - -### Core Learning + +### मुख्य शिक्षण [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -240,30 +227,30 @@ Azure AI Foundry Discord समुदाय में शामिल हों [![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Copilot Series + +### कॉपिलट श्रृंखला [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## मदद प्राप्त करना +## सहायता प्राप्त करना -यदि आप फंस जाते हैं या AI ऐप्स बनाने के बारे में कोई प्रश्न है। MCP के बारे में चर्चा में अन्य शिक्षार्थियों और अनुभवी डेवलपर्स से जुड़ें। यह एक सहायक समुदाय है जहां प्रश्न स्वागत है और ज्ञान मुफ्त में साझा किया जाता है। +यदि आप फंसे हुए हैं या AI ऐप बनाने के बारे में कोई प्रश्न हैं, तो MCP के बारे में चर्चा में अन्य सीखने वालों और अनुभवी डेवलपर्स से जुड़ें। यह एक सहायक समुदाय है जहाँ प्रश्नों का स्वागत है और ज्ञान स्वतंत्र रूप से साझा किया जाता है। [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -यदि आपके पास उत्पाद प्रतिक्रिया या निर्माण के दौरान त्रुटियां हैं तो जाएँ: +यदि आपके पास उत्पाद प्रतिक्रिया या निर्माण के दौरान त्रुटियाँ हैं तो यहाँ जाएँ: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## लाइसेंस -यह रिपॉजिटरी MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें। +यह रिपॉजिटरी MIT लाइसेंस के अंतर्गत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](../../LICENSE) फ़ाइल देखें। --- -**अस्वीकरण**: -यह दस्तावेज़ एआई अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। +**अस्वीकरण**: +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या असत्यताएँ हो सकती हैं। मूल दस्तावेज़ अपनी मातृभाषा में ही आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। \ No newline at end of file diff --git a/translations/ja/.co-op-translator.json b/translations/ja/.co-op-translator.json index 092ed5830..25780a893 100644 --- a/translations/ja/.co-op-translator.json +++ b/translations/ja/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-06T12:32:35+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T14:34:54+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ja" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:25:20+00:00", + "translation_date": "2026-03-06T14:50:22+00:00", "source_file": "AGENTS.md", "language_code": "ja" }, @@ -516,8 +516,8 @@ "language_code": "ja" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:21:13+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T14:29:38+00:00", "source_file": "README.md", "language_code": "ja" }, diff --git a/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 5d0315262..8259bef2e 100644 --- a/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ -# プログラミング言語と現代の開発ツールの紹介 +# プログラミング言語とモダン開発ツール入門 + +こんにちは、未来の開発者さん！👋 毎日これを考えると今でも鳥肌が立つんだけど言っていい？プログラミングは単なるコンピューターの話じゃないんだよ。あなたの最も奇想天外なアイデアを実現するための、まさに超能力を手に入れることなんだ！ -こんにちは、未来の開発者さん！👋 毎日ワクワクすることをお伝えしてもいいですか？プログラミングは単なるコンピューターの操作ではなく、自分のアイデアを形にするための実際のスーパーパワーを手に入れることなんです！ +お気に入りのアプリを使っていて、全てが完璧に噛み合う瞬間ってあるよね？ボタンをタップすると、まるで魔法みたいなことが起きて「うわー、どうやってあれやったんだろう？」って思わず感動しちゃうあの瞬間。実は、あなたみたいな誰かが—多分午前2時にお気に入りのカフェで三杯目のエスプレッソを飲みながら—その魔法を生み出すコードを書いたんだよ。そして驚くことに、このレッスンの最後には、彼らがどうやってそれを成し遂げたのか理解できるだけじゃなく、あなた自身もすぐに試してみたくなるはず！ -お気に入りのアプリを使っていて、すべてが完璧に動いている瞬間を感じたことはありませんか？ボタンをタップすると、魔法のようなことが起こり、「どうやってこんなことを実現したの？」と思う瞬間です。それを作ったのは、あなたと同じような人かもしれません。お気に入りのカフェで深夜2時にエスプレッソを飲みながらコードを書いていたかもしれません。そして驚くべきことに、このレッスンが終わる頃には、彼らがどうやってそれを実現したのか理解できるだけでなく、自分でも試してみたくなるでしょう！ +たしかに、今プログラミングが難しく感じる気持ちすごくわかるよ。僕も最初は、数学の天才じゃないとなれないとか、5歳からずっとコードを書いてる人じゃないと無理だと思ってたから。でも僕の考えを180度変えたのは、プログラミングはまるで新しい言語で会話を学ぶようなものだって気づいたこと。「こんにちは」「ありがとう」から始めて、コーヒーを注文するくらいになって、気づけば深い哲学的な議論もできるようになる！って感じなんだ。ただし今回は相手がコンピューターで、しかも彼らは最高に辛抱強い会話の相手なんだよ。間違えても決して責めないし、何度だって喜んで挑戦し直してくれるんだ！ -正直に言うと、プログラミングが今はちょっと怖いと感じるかもしれません。私が初めて始めたとき、数学の天才である必要があるとか、5歳の頃からコードを書いている必要があると思っていました。でも、私の考えを完全に変えたのはこれです：プログラミングは新しい言語で会話を学ぶのとまったく同じなんです。「こんにちは」や「ありがとう」から始めて、コーヒーを注文できるようになり、気づけば深い哲学的な議論をしているような感じです。ただし、この場合、コンピューターと会話しているわけで、正直言って、コンピューターは最も忍耐強い会話相手です。間違いを判断せず、何度でも試すことにワクワクしてくれます！ - -今日は、現代のウェブ開発を可能にするだけでなく、夢中にさせる素晴らしいツールを探求します。NetflixやSpotify、そしてお気に入りのインディーアプリスタジオの開発者が毎日使っているエディター、ブラウザ、ワークフローについて話します。そして、これがあなたを踊りたくさせる部分です：これらのプロ仕様の業界標準ツールのほとんどが完全に無料なんです！ +今日は、モダンなウェブ開発を可能にし、しかも中毒になるほどハマってしまう素晴らしいツールを一緒に探検しよう。話しているのはNetflixやSpotify、そしてあなたの好きなインディーズアプリスタジオの開発者たちが毎日使っている、まさに同じ編集ツールやブラウザ、ワークフローのこと。そしてこれが超嬉しい話だけど、こうしたプロ仕様の業界標準ツールのほとんどは完全に無料なんだよ！ ![Intro Programming](../../../../translated_images/ja/webdev101-programming.d6e3f98e61ac4bff.webp) -> スケッチノート提供：[Tomomi Imura](https://twitter.com/girlie_mac) +> スケッチノート： [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title あなたの今日のプログラミングの旅 + section 発見 + プログラミングとは何か: 5: You + プログラミング言語: 4: You + ツール概要: 5: You + section 探索 + コードエディター: 4: You + ブラウザと開発ツール: 5: You + コマンドライン: 3: You + section 練習 + 言語探偵: 4: You + ツール探検: 5: You + コミュニティ接続: 5: You ``` +## あなたがすでに知っていることを見てみよう！ -## まずはあなたの知識をチェック！ +楽しいことに飛び込む前に気になるんだけど、あなたはこのプログラミングの世界について何を知っているかな？もしこれらの質問を見て「全くわからない！」と思ったなら、それは全然問題じゃなくて、むしろ最高のスタート場所なんだ！このクイズは運動前のストレッチみたいなもの。脳の筋肉をほぐして温めているところなんだよ！ -楽しい部分に入る前に、あなたがこのプログラミングの世界について何を知っているか知りたいです。そして、もしこれらの質問を見て「全然わからない」と思ったとしても、それは完璧です！それは、まさにここがあなたにぴったりの場所だということです。このクイズは、運動前のストレッチのようなものです。脳の筋肉をウォームアップしているだけです！ +[レッスン前のクイズに挑戦する](https://ff-quizzes.netlify.app/web/) -[事前レッスンのクイズを受ける](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## これから始まる冒険 +## これから一緒に冒険すること -さて、今日探求することについて本当にワクワクしています！正直言って、いくつかの概念が理解できたときのあなたの顔を見たいくらいです。これが私たちが一緒に進む素晴らしい旅です： +さて、今日探求する内容に本当にワクワクしていて仕方がないんだ！このコンセプトが理解できた時のあなたの表情が見たい！こちらが私たちの素晴らしい旅の概要： -- **プログラミングとは何か（そしてなぜそれが最高にクールなのか！）** – コードが目に見えない魔法のように、周りのすべてを動かしていることを発見します。月曜日の朝を知らせるアラームからNetflixのおすすめを完璧に選ぶアルゴリズムまで。 -- **プログラミング言語とその驚くべき個性** – 問題解決の方法が全く異なるスーパーパワーを持つ人々が集まるパーティーに入るようなものです。プログラミング言語の世界を知るのが楽しくなるはずです！ -- **デジタルマジックを実現する基本的な構成要素** – これらは究極のクリエイティブLEGOセットのようなものです。これらのピースがどのように組み合わさるかを理解すると、想像力が描くものを何でも作れることに気づくでしょう。 -- **プロ仕様のツールで魔法の杖を手に入れた気分に** – これは大げさではありません。このツールは本当にスーパーパワーを持っているように感じさせてくれます。そして最高なのは？プロが使っているものと同じツールです！ +- **プログラミングとは実際何か（そしてなぜ最高にクールなのか！）** – コードがどうやって目に見えない魔法となって、月曜日の朝だと分かる目覚まし時計からNetflixのおすすめを完璧にキュレーションするアルゴリズムまで、あなたの周りの全てを動かしているのかを発見しよう +- **プログラミング言語とその個性豊かな特徴たち** – パーティーに入ったらみんながそれぞれ違うスーパーパワーと問題解決方法を持っている、そんな世界と似ていると思って。プログラミング言語の世界はそんな場所で、きっと彼らに会うのが楽しみになるはず！ +- **デジタルの魔法を実現する基本の部品たち** – これらは最高のクリエイティブなLEGOセットみたいなもの。これらのパーツの組み合わせ方が分かると、想像できるものなら何でも作れると気づくよ +- **まるで魔法使いの杖を手に入れたように感じさせるプロフェッショナルツール** – これは大げさじゃないよ。本当になんだか超能力を持った気分になれるツールたちで、しかもプロが使うものと全く同じなんだ！ -> 💡 **重要なこと**: 今日すべてを暗記しようとしないでください！今は、可能性にワクワクする気持ちを感じてほしいだけです。詳細は一緒に練習するうちに自然と身につきます。それが本当の学びの方法です！ +> 💡 **覚えておくこと**：今日全部を暗記しようとしちゃだめだよ！今は、何ができるかという「ワクワク感」を感じてもらうのが目的。練習を重ねるうちに詳細は自然に身についていくからね。これが本当の学び方なんだ！ -> このレッスンは [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) で受けることができます！ +> このレッスンは[Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)でも受講できるよ！ -## では、プログラミングって何？ +## そもそもプログラミングって何？ -さて、百万ドルの質問に取り組みましょう：プログラミングって何でしょう？ +さて、100万ドルの疑問に挑戦しよう：プログラミングとは本当は何か？ -私がこの考え方を完全に変えた話をお伝えします。先週、母に新しいスマートテレビのリモコンの使い方を説明しようとしていました。「赤いボタンを押して、でも大きい赤いボタンじゃなくて、小さい赤いボタンを左側に…いや、あなたの左側じゃなくて…OK、2秒間押して、1秒でも3秒でもなく…」こんな感じです。😅 +僕の考え方を変えた話を聞いてほしい。先週、母に新しいスマートテレビのリモコンの使い方を説明しようとしてたんだ。気づいたら「赤いボタンを押して、でも大きい赤いボタンじゃなくて左側の小さい赤いボタン……いや、その左じゃなくて……はーい、今度は2秒間押して、1秒じゃなくて3秒でもない……」なんて言ってた。わかる？😅 -これがプログラミングです！非常に強力でありながら、すべてを完璧に説明する必要があるものに、詳細なステップバイステップの指示を与える技術です。ただし、母に説明する代わりに（「どの赤いボタン？」と聞かれるかもしれません）、コンピューターに説明します（コンピューターは言った通りに実行しますが、それが意図したことではない場合でも）。 +それがプログラミングなんだよ！非常にパワフルだけど、すべてを完全に説明しないといけない何かに、とても細かく段階的な指示を与える技術のこと。違いは、ママは「どの赤いボタン？！」って問い返せるけど、コンピューターはそのまま言われた通りに動くだけということ。 -これを初めて知ったときに驚いたのは、コンピューターは実際には非常にシンプルだということです。彼らが理解できるのは、1と0だけです。つまり、「はい」と「いいえ」または「オン」と「オフ」だけです。それだけです！でもここで魔法が起こります – 私たちは1と0で話す必要はありません。**プログラミング言語**が助けてくれるからです。それは、あなたの普通の人間の考えをコンピューター言語に変換してくれる世界最高の翻訳者のようなものです。 +僕が最初にこれを知った時にびっくりしたのは、実はコンピューターは本質的にはとてもシンプルだってこと。コンピューターが理解するのは文字通り1と0の2つだけで、これはつまり「はい」と「いいえ」、あるいは「オン」と「オフ」だけ。これだけなんだ！でもここからが魔法みたいなところで、マトリックスみたいに1と0の言葉だけで話す必要はないんだ。ここで登場するのが**プログラミング言語**。これは普通の人間の考えをコンピューターの言葉に変換してくれる、世界最高の通訳みたいなもの。 -そして、毎朝目が覚めるたびにまだ鳥肌が立つのはこれです：あなたの生活の中のすべてのデジタルなものは、パジャマを着てコーヒーを飲みながらラップトップでコードを打っていた誰かから始まったのです。あなたを完璧に見せるInstagramフィルター？誰かがそれをコード化しました。あなたの新しいお気に入りの曲に導いたおすすめ？開発者がそのアルゴリズムを作りました。友達と夕食代を分割するのを助けるアプリ？そうです、誰かが「これ面倒だな、解決できるかも」と思って…そして実現しました！ +そしてまだ毎朝鳥肌が立つのは、あなたの生活の中のすべてのデジタルなものは、あなたと同じような誰かがパジャマ姿でコーヒーを飲みながらノートパソコンに向かいコードを書き始めたことから生まれたんだってこと。完璧に見えるInstagramのフィルター？誰かがそのコードを書いた。あなたのお気に入りの新曲に導いてくれたおすすめアルゴリズム？開発者が作ったもの。友達と食事代を割るのを助けるアプリ？「面倒だな、直せるはず！」と思った誰かが本当に作ったんだ。 -プログラミングを学ぶとき、単に新しいスキルを身につけるだけではありません。この素晴らしい問題解決者のコミュニティの一員になるのです。彼らは毎日「何かを作って誰かの一日を少しでも良くすることができるかも」と考えています。正直言って、それ以上にクールなことってありますか？ +プログラムを学ぶことで、ただ新しいスキルを身につけるだけじゃなくて、「誰かの一日をちょっと良くできるものを作れたらどうだろう？」と考える問題解決者の素敵なコミュニティの一員になれるんだ。正直言って、それ以上にクールなことなんてある？ -✅ **楽しい事実を探してみよう**: 時間があるときに調べてみてください – 世界初のコンピュータープログラマーは誰だと思いますか？ヒントをあげます：意外な人物かもしれません！この人の物語は非常に興味深く、プログラミングが常に創造的な問題解決と型破りな考え方に関するものであったことを示しています。 +✅ **楽しい豆知識探し**：暇な時に調べてみてほしいことがあるよ—世界初のコンピューター・プログラマーは誰だと思う？ヒントをあげると、意外な人かもしれない！その人の話は本当に面白くて、プログラミングはいつでも創造的な問題解決と枠にとらわれない発想でできていることがわかるよ。 -### 🧠 **チェックインタイム：今の気持ちはどうですか？** +### 🧠 **チェックイン：今の気持ちは？** -**少し考えてみましょう：** -- 「コンピューターに指示を与える」というアイデアは今理解できますか？ -- プログラミングで自動化したい日常のタスクを思いつきますか？ -- このプログラミングの世界についてどんな質問が湧いてきていますか？ +**少し考えてみよう：** +- 「コンピューターに指示を出す」ことの意味はわかってきた？ +- 毎日の作業でプログラミングで自動化したいことはある？ +- 今、プログラミングのことで気になっていることや疑問は？ -> **覚えておいてください**: 今はまだいくつかの概念がぼんやりしているのは普通です。プログラミングを学ぶのは新しい言語を学ぶのと同じで、脳がその神経経路を作るのに時間がかかります。あなたは素晴らしいです！ +> **覚えててね**：今はまだモヤモヤしているのは普通だよ。プログラミングは新しい言語を覚えるのと同じで、脳の神経回路ができるまで時間がかかるんだ。あなたは十分すごくやっているよ！ -## プログラミング言語は魔法の異なるフレーバーのようなもの +## プログラミング言語は異なる魔法の味みたいなもの -ちょっと変な話に聞こえるかもしれませんが、ついてきてください – プログラミング言語は音楽のジャンルのようなものです。考えてみてください：ジャズはスムーズで即興的、ロックは力強くてストレート、クラシックは優雅で構造的、ヒップホップは創造的で表現力豊か。それぞれのスタイルには独自の雰囲気、情熱的なファンのコミュニティがあり、それぞれ異なる気分や場面にぴったりです。 +ちょっと変に聞こえるかもしれないけど、よくついてきてね—プログラミング言語は色んな種類の音楽みたいなものなんだ。例えばジャズは滑らかで即興的、ロックは力強くストレート、クラシックは優雅で構造的、ヒップホップは創造的で表現が豊か。各スタイルはそれぞれの雰囲気とファンのコミュニティがあって、気分や場面に合わせて完璧なんだよね。 -プログラミング言語もまったく同じです！楽しいモバイルゲームを作るのに使う言語と、大量の気候データを処理するのに使う言語は同じではありません。ちょうどヨガクラスでデスメタルを流すことがないのと同じです（まあ、ほとんどのヨガクラスでは！😄）。 +プログラミング言語も全く同じ働き方をするんだ！楽しいモバイルゲームを作るのに気候変動の大規模データを処理する言語は使わないだろうし、ヨガ教室でデスメタルを流すこともしないよね（まあ、大半のヨガクラスはそうだけど😄）。 -でもこれが毎回私を驚かせることです：これらの言語は、最も忍耐強くて賢い通訳が隣に座っているようなものです。人間の脳にとって自然に感じる方法でアイデアを表現でき、彼らはそのアイデアをコンピューターが実際に話す1と0に変換するという非常に複雑な作業をすべて処理してくれます。それは「人間の創造性」と「コンピューターロジック」の両方に完全に精通している友人がいるようなものです – そして彼らは疲れないし、コーヒーブレイクも必要なく、同じ質問を2回聞いても決して判断しません！ +でもいつも感動するのは、この言語たちはまるで世界で最も辛抱強い、素晴らしい通訳がそばにいるみたいだってこと。あなたは自然な人間の感覚で考えを表現できて、彼らが複雑な裏側の1と0に変換してくれる。まるで「人間の創造性」と「コンピューターの論理」を両方完璧に話す友達がいて、決して疲れず、休憩もいらず、同じ質問を何度聞いても怒らないみたいなもの！ ### 人気のプログラミング言語とその用途 ```mermaid mindmap - root((Programming Languages)) - Web Development + root((プログラミング言語)) + Web開発 JavaScript - Frontend Magic - Interactive Websites + フロントエンドの魔法 + インタラクティブなウェブサイト TypeScript - JavaScript + Types - Enterprise Apps - Data & AI + JavaScript + 型 + エンタープライズアプリ + データ＆AI Python - Data Science - Machine Learning - Automation + データサイエンス + 機械学習 + 自動化 R - Statistics - Research - Mobile Apps + 統計学 + 研究 + モバイルアプリ Java Android - Enterprise + エンタープライズ Swift iOS - Apple Ecosystem + Appleエコシステム Kotlin - Modern Android - Cross-platform - Systems & Performance + モダンAndroid + クロスプラットフォーム + システム＆パフォーマンス C++ - Games - Performance Critical + ゲーム + パフォーマンスクリティカル Rust - Memory Safety - System Programming + メモリ安全性 + システムプログラミング Go - Cloud Services - Scalable Backend + クラウドサービス + スケーラブルなバックエンド ``` - -| 言語 | 最適な用途 | 人気の理由 | +| 言語 | 得意分野 | 人気の理由 | |----------|----------|------------------| -| **JavaScript** | ウェブ開発、ユーザーインターフェース | ブラウザで動作し、インタラクティブなウェブサイトを実現 | -| **Python** | データサイエンス、自動化、AI | 読みやすく学びやすい、強力なライブラリ | -| **Java** | エンタープライズアプリケーション、Androidアプリ | プラットフォームに依存せず、大規模システムに適している | -| **C#** | Windowsアプリケーション、ゲーム開発 | Microsoftエコシステムの強力なサポート | -| **Go** | クラウドサービス、バックエンドシステム | 高速でシンプル、現代のコンピューティング向けに設計 | +| **JavaScript** | ウェブ開発、ユーザーインターフェース | ブラウザ上で動作しインタラクティブなウェブサイトを支える | +| **Python** | データサイエンス、自動化、AI | 読みやすく学びやすい、強力なライブラリが豊富 | +| **Java** | エンタープライズアプリ、Androidアプリ | プラットフォーム非依存、大規模システムに強力 | +| **C#** | Windowsアプリ、ゲーム開発 | Microsoftの強力なエコシステムが支援 | +| **Go** | クラウドサービス、バックエンドシステム | 高速でシンプル、現代のコンピューティング向け設計 | -### 高レベル言語と低レベル言語 +### 高水準言語と低水準言語 -正直に言うと、これが私が最初に学んだときに頭が混乱した概念でした。だから、私が最終的に理解できたアナロジーを共有します – これがあなたにも役立つことを願っています！ +正直に言うと、僕が最初に学んだ時に頭が混乱したコンセプトがこれだから、僕がそれを理解できた例え話を紹介するよ。きっと君の助けにもなると思う！ -あなたが言語を話せない国を訪れていて、必死に最寄りのトイレを探す必要があると想像してください（誰でも経験したことありますよね？😅）： +言語がわからない国に旅行して、どうしても近くのトイレを探さなきゃいけない場面を想像してみて（みんな経験あるでしょ？😅）： -- **低レベルプログラミング**は、その国の方言を完璧に学び、文化的な参照や地元のスラング、地元の人だけが理解するジョークを使って果物を売るおばあさんと会話できるようなものです。非常に印象的で効率的ですが、流暢でない場合は圧倒されるかもしれません。 +- **低水準プログラミング**は、その国の方言を完璧に覚えて、角の果物屋のおばあちゃんと文化的参照や現地スラング、地元の冗談を交えて会話できるようになるようなもの。超すごいし効率的……もしその言葉が流暢ならね！でもただトイレを見つけたいだけなら大変すぎて困るよね。 -- **高レベルプログラミング**は、あなたを完全に理解してくれる素晴らしい地元の友人がいるようなものです。「トイレを探したい」と普通の英語で言うと、彼らが文化的な翻訳をすべて処理して、あなたの非地元の脳に完璧に理解できる方法で道案内をしてくれます。 +- **高水準プログラミング**は、その素晴らしい現地の友達がいて、「トイレが必要です」と普通に英語で言うだけで、文化的な解釈を全部やってくれて、非ネイティブのあなたに分かりやすい指示をくれる感じ。 -プログラミング用語では： -- **低レベル言語**（例えばAssemblyやC）は、コンピューターの実際のハードウェアと非常に詳細な会話をすることができますが、機械のように考える必要があります。それは…まあ、かなり大きな精神的なシフトです！ -- **高レベル言語**（例えばJavaScript、Python、C#）は、人間のように考えることができるようにしながら、機械の言葉をすべて裏で処理してくれます。さらに、初心者だった頃を覚えている人々が集まる非常に歓迎的なコミュニティがあり、本当に助けたいと思っています！ +プログラミングで言うと： +- **低水準言語**（AssemblyやCみたいなもの）はコンピューターの実際のハードウェアと非常に詳しい会話ができるけど、機械のように考える必要がある…心理的ハードルがかなり高い！ +- **高水準言語**（JavaScript、Python、C#など）は、あなたが人間らしく考えている間に、機械語の裏側のややこしい部分を処理してくれる。それに新参者への親切なコミュニティもあって、初心者時代を思い出して本当に助けてくれる人ばかり！ -どちらを最初に学ぶことをお勧めすると思いますか？😉 高レベル言語は、経験をはるかに楽しいものにしてくれる補助輪のようなものです！ +さて、どれから始めるのがおすすめか分かる？😉 高水準言語は補助輪みたいなもので、補助輪を外したくなくなるくらい快適で楽しい体験をもたらすよ！ ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 人間の思考:
'フィボナッチ数を計算したい'"] --> B{言語レベルを選択} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|高レベル| C["🌟 JavaScript/Python
読み書きが簡単"] + B -->|低レベル| D["⚙️ アセンブリ/C
直接ハードウェア制御"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 書く: fibonacci(10)"] + D --> F["📝 書く: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 コンピュータの理解:
翻訳者が複雑さを処理"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 同じ結果:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### 高水準言語がなぜこんなに使いやすいのか見てみよう -### 高レベル言語がなぜ親しみやすいかをお見せします - -さて、高レベル言語がなぜ私を魅了したのかを完璧に示すものをお見せしますが、まず – 約束してください。最初のコード例を見たときにパニックにならないでください！それは威圧的に見えるように意図されています。それが私が伝えたいポイントです！ +これから僕が高水準言語に惚れ込んだ理由を完璧に示す例をお見せするよ。でもまず約束してほしいことがある。最初のコード例を見て恐れないこと！あれは怖く見えるようにできているんだ。そこが僕が伝えたいポイント！ -同じタスクを完全に異なるスタイルで書いたものを見てみましょう。どちらもフィボナッチ数列を作成します – これは美しい数学的パターンで、各数値がその前の2つの数値の合計になるものです：0, 1, 1, 2, 3, 5, 8, 13...（面白い事実：このパターンは自然界の至る所で見られます – ヒマワリの種の渦巻き、松ぼっくりの模様、銀河の形成方法まで！） +同じタスクを２つのまったく違うスタイルで書いたものを見るよ。両方ともフィボナッチ数列と呼ばれるすばらしい数学的パターンを作るもの。これは各数が前の二つの合計になる並びで、0、1、1、2、3、5、8、13…（ちなみにこのパターンは自然界のあらゆるところにあって、ヒマワリの種の渦巻きや松ぼっくりの模様、銀河の形成にも見られるんだ！） -違いを見てみる準備はできましたか？行きましょう！ +さあ、違いを見てみよう！ -**高レベル言語（JavaScript） – 人間に優しい：** +**高水準言語（JavaScript）– 人間に優しい：** ```javascript -// Step 1: Basic Fibonacci setup +// ステップ1: 基本的なフィボナッチの設定 const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**このコードがすること：** -- フィボナッチ数列を生成する数を指定する定数を**宣言** -- 数列の現在の数値と次の数値を追跡するための変数を**初期化** -- フィボナッチパターンを定義する開始値（0と1）を**設定** -- 出力を識別するヘッダーメッセージを**表示** +**このコードの動きは次の通り：** +- **定数を宣言**して生成したいフィボナッチ数の数を指定する +- **２つの変数を初期化**して現在と次の数を追跡する +- フィボナッチ数列の出発点となる値（0と1）を**セットアップ** +- 出力を示すヘッダーメッセージを**表示** ```javascript -// Step 2: Generate the sequence with a loop +// ステップ2: ループでシーケンスを生成する for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // シーケンスの次の数を計算する const sum = current + next; current = next; next = sum; } ``` -**ここで何が起こるかを分解：** -- `for`ループを使用して数列の各位置を**ループ** -- テンプレートリテラルフォーマットを使用して各数値をその位置とともに**表示** -- 現在の値と次の値を加算して次のフィボナッチ数を**計算** -- 次のイテレーションに進むために追跡変数を**更新** +**処理の詳しい説明：** +- `for`ループを使い、数列のそれぞれの位置を**繰り返し処理** +- 算出した各数を位置とともにテンプレートリテラルで**表示** +- 現在の数と次の数を足して次のフィボナッチ数を**計算** +- カウンタ変数を更新して次の繰り返しに備える ```javascript -// Step 3: Modern functional approach +// ステップ3：現代的な関数型アプローチ const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,135 +219,166 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// 使用例 const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**上記では：** -- モダンなアロー関数構文を使用して再利用可能な関数を**作成** -- 数列全体を一つずつ表示するのではなく格納する配列を**構築** -- 配列インデックスを使用して前の値から各新しい数値を**計算** -- プログラムの他の部分で柔軟に使用できるように完全な数列を**返却** +**ここでは：** +- モダンなアロー関数で**再利用可能な関数を作成** +- 数を1つずつ表示する代わりに、完成した数列を格納する配列を**構築** +- 配列のインデックスを使い、前の値から新しい数を**計算** +- 完成した数列を**返して**他の部分で柔軟に使えるようにする + +**低水準言語（ARMアセンブリ）– コンピューターに優しい：** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +JavaScript版はほぼ英語の指示文みたいに読めるのに対して、アセンブリ版はコンピューターのプロセッサを直接操作する難解な命令で書かれているのが分かると思う。どちらも同じタスクを達成しているけれど、高水準言語のほうが人間にずっと理解しやすく、書きやすく、メンテナンスしやすいんだ。 -**低 -- **コメント**: 高水準言語は、コードを自己文書化する説明的なコメントを奨励します。 -- **構造**: JavaScriptの論理的な流れは、人間が問題をステップバイステップで考える方法に一致しています。 -- **保守性**: JavaScriptのバージョンを異なる要件に合わせて更新するのは簡単で明確です。 +**主な違いはこんな感じ：** +- **読みやすさ**: JavaScriptは`fibonacciCount`のように説明的な名前を使うのに対し、Assemblyは`r0`、`r1`のような暗号的なラベルを使います +- **コメント**: 高水準言語はコードを自己文書化する説明的なコメントを奨励します +- **構造**: JavaScriptの論理の流れは、人間が問題を段階的に考えるやり方と一致します +- **保守性**: JavaScriptのバージョンを異なる要件に合わせて更新するのは簡単かつ明確です -✅ **フィボナッチ数列について**: この美しい数列（各数がその前の2つの数の合計になる：0, 1, 1, 2, 3, 5, 8...）は、自然界の至る所で見られます！ひまわりの螺旋、松ぼっくりの模様、オウムガイの殻の曲線、さらには木の枝の成長の仕方にまで現れます。数学とコードが自然が美を創造するパターンを理解し再現するのに役立つなんて、本当に驚きですよね！ +✅ **フィボナッチ数列について**: これは本当に美しい数のパターンです（各数字がその前の2つの数字の合計になっている: 0, 1, 1, 2, 3, 5, 8...）。自然界のほぼ*どこにでも*現れます！ヒマワリの渦巻き、松ぼっくりのパターン、オウムガイの殻の曲線、さらには木の枝の成長の仕方にも見られます。数学とコードが、自然が美しさを作り出すために使うパターンを理解し再現する助けになるのはかなり驚きです！ -## 魔法を生み出す基本要素 -さて、プログラミング言語がどのように動作するかを見たところで、これまでに書かれたすべてのプログラムを構成する基本的な要素を分解してみましょう。これらをお気に入りのレシピの必須の材料と考えてください。各要素が何をするのか理解すれば、ほぼどんな言語でもコードを読み書きできるようになります！ +## 魔法を起こす基本要素 -これはプログラミングの文法を学ぶようなものです。学校で名詞や動詞、文の構成方法を学んだことを覚えていますか？プログラミングにも独自の文法があり、正直なところ英語の文法よりもずっと論理的で寛容です！😄 +さて、プログラミング言語が実際にどのように動くかを見たところで、今度は基本的な要素を分解してみましょう。これらはどんなプログラムにも絶対必要な材料だと思ってください。各要素の役割を理解すれば、ほぼどんな言語でもコードを読み書きできるようになります！ -### ステートメント: 一連の指示 +これはプログラミングの文法を学ぶようなものです。学校で名詞や動詞、文の作り方を習ったことを思い出してください。プログラミングにも独自の文法があり、正直言って英語の文法よりずっと論理的で親切です！😄 -まずは**ステートメント**から始めましょう。これらはコンピュータとの会話における個々の文のようなものです。各ステートメントはコンピュータに特定のことをするよう指示します。例えば、「ここで左に曲がる」「赤信号で止まる」「その場所に駐車する」といった具合です。 +### 文（Statements）：一歩ずつの指示 -ステートメントの素晴らしいところは、通常とても読みやすいことです。見てみましょう: +まずは**文**から始めましょう。これはコンピュータとの会話における一つの文のようなものです。各文はコンピュータに対して一つの具体的なことをするよう指示します。たとえば、「ここを左に曲がって」「赤信号で止まって」「あの場所に駐車して」といった具合です。 + +文の大好きなところは、普通とても読みやすいことです。これを見てください: ```javascript -// Basic statements that perform single actions +// 単一のアクションを実行する基本的な文 const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**このコードがすること:** -- ユーザーの名前を保存する定数変数を**宣言** -- コンソール出力に挨拶メッセージを**表示** -- 数学的な操作の結果を計算して保存 + +**このコードのやっていること:** +- ユーザーの名前を格納する定数変数を**宣言**する +- コンソール出力に挨拶メッセージを**表示**する +- 数学的計算の結果を**計算**して保存する ```javascript -// Statements that interact with web pages +// ウェブページと対話するステートメント document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` + +**ひとつずつ、何が起こっているか:** +- ブラウザのタブに表示されるウェブページのタイトルを**変更**する +- ページ全体の背景色を**変更**する -**ステップバイステップで起こること:** -- ブラウザタブに表示されるウェブページのタイトルを**変更** -- ページ全体の背景色を**変更** - -### 変数: プログラムの記憶システム +### 変数：プログラムの記憶システム -さて、**変数**は教えるのが本当に楽しい概念の一つです。なぜなら、日常的に使っているものととても似ているからです！ +さて、**変数**は正直言って私が教えるのが大好きなコンセプトの一つです。なぜなら、皆さんが日常的に使っているものにとても似ているからです！ -例えば、スマートフォンの連絡先リストを考えてみてください。すべての電話番号を暗記するのではなく、「母」「親友」「深夜2時まで配達してくれるピザ屋」などの名前で保存し、実際の番号はスマホに覚えさせます。変数もまったく同じように機能します！ラベル付きのコンテナのようなもので、プログラムが情報を保存し、後で意味のある名前を使ってそれを取り出すことができます。 +少しだけスマホの連絡先リストのことを考えてみてください。みんなの電話番号を覚えているわけではありませんよね？代わりに「ママ」や「親友」や「深夜2時までやってるピザ屋」といったラベルをつけて保存して、実際の番号はスマホに覚えさせています。変数もまさにそれと同じです！プログラムが情報を保存して、あとで意味の通る名前で取り出せるようにする入れ物のようなものなんです。 -さらにすごいのは、プログラムが実行されるにつれて変数が変化することができる点です（だから「variable」と呼ばれるのです！）。例えば、より良いピザ屋を見つけたら連絡先を更新するように、プログラムが新しい情報を学んだり状況が変化したりするたびに変数を更新できます！ +面白いのは、変数はプログラムの実行中に変わることができるという点です（だから「variable」という名前になっているのがわかりますよね？）。たとえばもっと良いピザ屋を見つけたら、その連絡先を更新しますよね。それと同じで、変数はプログラムが新しい情報を学んだり状況が変わったりするときに更新されることがあります！ -これがどれほどシンプルで美しいかをお見せします: +これがどれほど簡単か、見てみましょう: ```javascript -// Step 1: Creating basic variables +// ステップ1: 基本変数の作成 const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**これらの概念を理解する:** -- `const`変数に変更されない値を**保存**（例: サイト名） -- プログラム中で値が変化する可能性がある場合は`let`を**使用** -- さまざまなデータ型を**割り当て**: 文字列（テキスト）、数値、ブール値（true/false） -- 各変数が含む内容を説明する**わかりやすい名前を選択** + +**このコンセプトで分かること:** +- 変わらない値は`const`変数に**保存**する（サイト名のように） +- プログラム中に変わる値は`let`を**使う** +- 文字列、数値、ブール値（true/false）などの異なるデータ型を**代入**する +- 何を含むか説明するわかりやすい名前を**選ぶ** ```javascript -// Step 2: Working with objects to group related data +// ステップ2: 関連するデータをグループ化するためにオブジェクトを扱う const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**上記では以下を行っています:** -- 関連する天気情報をまとめるためのオブジェクトを**作成** -- 複数のデータを1つの変数名の下に**整理** -- 各情報を明確にラベル付けするためにキーと値のペアを**使用** + +**上の例でやったこと:** +- 関連する天気情報をまとめたオブジェクトを**作成**した +- 複数のデータをひとつの変数名で**整理**した +- キーと値のペアでそれぞれの情報をわかりやすく**ラベル付け**した ```javascript -// Step 3: Using and updating variables +// ステップ3: 変数の使用と更新 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// 変更可能な変数の更新 currentWeather = "cloudy"; temperature = 68; ``` - -**各部分を理解する:** -- `${}`構文を使用してテンプレートリテラルで情報を**表示** -- ドット記法（`weatherData.windSpeed`）を使用してオブジェクトのプロパティに**アクセス** -- `let`で宣言された変数を更新して変化する条件を反映 -- 複数の変数を組み合わせて意味のあるメッセージを**作成** + +**ここで理解すること:** +- `${}`構文を使ったテンプレートリテラルで情報を**表示**する +- ドット表記（`weatherData.windSpeed`）でオブジェクトのプロパティに**アクセス**する +- `let`で宣言した変数を条件変化に合わせて**更新**する +- 複数の変数を組み合わせて意味のあるメッセージを**作成**する ```javascript -// Step 4: Modern destructuring for cleaner code +// ステップ4: クリーンなコードのための最新の分割代入 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**知っておきたいこと:** +- 分割代入でオブジェクトから特定のプロパティを**抽出**する +- オブジェクトのキー名と同じ名前の新しい変数を自動的に**作成**する +- 繰り返されるドット表記を避けてコードを**簡潔化**する -**知っておくべきこと:** -- オブジェクトから特定のプロパティを**抽出**するために分割代入を使用 -- オブジェクトキーと同じ名前の新しい変数を自動的に**作成** -- 繰り返しのドット記法を避けてコードを**簡素化** - -### 制御フロー: プログラムに考える力を教える +### 制御フロー：プログラムに考えさせる -さて、ここからプログラミングが本当に驚くべきものになります！**制御フロー**は、プログラムに賢い決定を下す方法を教えることです。これは、あなたが毎日無意識に行っていることとまったく同じです。 +さて、ここからプログラミングが本当にすごく楽しくなる部分です！**制御フロー**とは、プログラムに賢い判断の仕方を教えることです。人間が毎日何気なくやっているようなことそのものです。 -例えば、今朝「雨が降っていたら傘を持っていく」「寒かったらジャケットを着る」「遅刻しそうなら朝食を抜いて途中でコーヒーを買う」といったことを考えたかもしれません。あなたの脳は自然にこのようなif-thenロジックを毎日何十回も実行しています！ +たとえば今朝のことを思い出してみてください。「雨が降っているなら傘を持っていこう。寒ければジャケットを着よう。もし遅れているなら朝食は抜いて途中でコーヒーを買おう。」脳は自然とこうしたif-thenの論理を何十回も毎日繰り返しているのです！ -これがプログラムを単なる退屈で予測可能なスクリプトではなく、知的で生き生きとしたものにするのです。プログラムは実際に状況を見て、何が起こっているかを評価し、適切に反応することができます。これは、プログラムに適応し、選択を行う能力を与えるようなものです！ +これこそがプログラムが単なる退屈で予測可能なスクリプトではなく、知的で生きているように感じられる理由です。プログラムは状況を見て、何が起こっているか評価し、適切に応答できます。これをプログラムに「脳」を授けて選択肢を作れるようにするようなものです！ -これがどれほど美しく機能するか見てみましょう: +どうやってうまく動くか見たいですか？見てみましょう: ```javascript -// Step 1: Basic conditional logic +// ステップ1：基本的な条件ロジック const userAge = 17; if (userAge >= 18) { @@ -359,15 +388,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**このコードがすること:** -- ユーザーの年齢が投票要件を満たしているか**確認** -- 条件の結果に基づいて異なるコードブロックを**実行** -- 18歳未満の場合、投票資格までの期間を**計算**して表示 -- 各シナリオに対して具体的で役立つフィードバックを**提供** + +**このコードのやっていること:** +- ユーザーの年齢が投票資格を満たしているか**チェック**する +- 条件の結果に応じて異なるコードブロックを**実行**する +- 18歳未満なら投票資格までの期間を**計算**して表示する +- ケースごとに具体的で役立つフィードバックを**提供**する ```javascript -// Step 2: Multiple conditions with logical operators +// ステップ2: 論理演算子を使った複数条件 const userAge = 17; const hasPermission = true; @@ -379,26 +408,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**ここで起こることを分解すると:** -- `&&`（and）演算子を使用して複数の条件を**組み合わせ** -- 複数のシナリオに対して`else if`を使用して条件の階層を**作成** -- 最後の`else`ステートメントですべての可能なケースを**処理** -- 各異なる状況に対して明確で実用的なフィードバックを**提供** + +**ここで何が起きているかの内訳:** +- `&&`（かつ）演算子で複数の条件を**結合**する +- 複数シナリオに対して`else if`で条件の階層を**作成**する +- 最終的な`else`ステートメントで全ての可能なケースを**処理**する +- 各ケースに対して明確で具体的なフィードバックを**提供**する ```javascript -// Step 3: Concise conditional with ternary operator +// ステップ3：三項演算子を使った簡潔な条件式 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**覚えておくべきこと:** -- 簡単な2つの選択肢の条件には三項演算子（`? :`）を**使用** -- 条件を最初に記述し、次に`?`、その後にtrueの結果、次に`:`、最後にfalseの結果を記述 -- 条件に基づいて値を割り当てる必要がある場合にこのパターンを**適用** + +**覚えておきたいこと:** +- 単純な2択条件には三項演算子（`? :`）を**使う** +- 最初に条件、その次に`?`、真の場合の結果、そのあと`:`、偽の場合の結果を書く +- 条件に基づいて値を割り当てる必要があるときにこのパターンを**適用**する ```javascript -// Step 4: Handling multiple specific cases +// ステップ4: 複数の特定のケースを処理する const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -417,58 +446,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**このコードで達成していること:** +- 変数の値を複数の具体的なケースに**照合**する +- 似たケースをグループ分けする（平日と週末） +- マッチしたときに適切なコードブロックを**実行**する +- 予期しない値に対応する`default`ケースを**含める** +- `break`ステートメントで次のケースに進むのを防ぐ -**このコードが達成すること:** -- 変数の値を複数の特定のケースと**一致** -- 似たようなケースを（平日と週末など）**グループ化** -- 一致が見つかった場合に適切なコードブロックを**実行** -- 予期しない値を処理するために`default`ケースを**含める** -- 次のケースに進むのを防ぐために`break`ステートメントを**使用** - -> 💡 **現実世界の例え**: 制御フローは、世界で最も忍耐強いGPSが道案内をしてくれるようなものだと考えてください。「もしメインストリートが渋滞していたら、高速道路を使う。もし高速道路が工事中なら、景色の良いルートを試してみる。」プログラムはまさにこのような条件付きロジックを使用して、異なる状況に賢く対応し、常にユーザーに最適な体験を提供します。 +> 💡 **現実の例え**: 制御フローは世界で最も辛抱強いGPSのようなものです。たとえば「メインストリートで渋滞があったら高速道路に乗れ。高速が工事で塞がれていたら景色の良い道を試せ」と指示するイメージです。プログラムは同じ種類の条件付き論理を使って、異なる状況に賢く対応し、ユーザーに最高の体験を提供します。 -### 🎯 **概念チェック: 基本要素の習得** +### 🎯 **コンセプトチェック：基本要素の理解度** -**基本を理解しているか確認してみましょう:** -- 変数とステートメントの違いを自分の言葉で説明できますか？ -- if-thenの決定を使用する現実世界のシナリオを考えてみてください（例: 投票の例） -- プログラミングロジックについて驚いたことは何ですか？ +**基本がどれくらい理解できているか見てみましょう:** +- 変数と文の違いを自分の言葉で説明できますか？ +- if-thenの決定を使う実生活のシナリオを考えてみてください（投票例のような） +- プログラミングの論理で驚いたことは何ですか？ -**自信を高めるための一言:** +**自信をちょっとアップ:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 文(命令)"] --> B["📦 変数
(記憶)"] --> C["🔀 制御フロー
(決定)"] --> D["🎉 動作中のプログラム!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` +``` +✅ **次に来るもの**: これからこの素晴らしい旅をさらに深く掘り下げていきます！今は、これから体験する素晴らしい可能性にワクワクすることだけに集中してください。具体的なスキルやテクニックは、一緒に練習するうちに自然に身につきます。これが予想以上に楽しいことになると約束します！ -✅ **次に進む内容**: これからこれらの概念をさらに深く掘り下げていくのが本当に楽しみです！今は、これからの素晴らしい可能性にワクワクする気持ちを大切にしてください。具体的なスキルやテクニックは一緒に練習するうちに自然と身につきます – これが予想以上に楽しいものになることを約束します！ +## 仕事道具 -## 開発のためのツール +さて、ここからが私が興奮して我慢できなくなるところです！🚀 これから、まるでデジタル宇宙船の鍵を手にしたかのように感じられる、とんでもなく素晴らしい道具について話します。 -さて、ここからが本当に興奮するところです！🚀 これから、デジタル宇宙船の鍵を手渡されたような気分になる素晴らしいツールについて話します。 +シェフが手の延長のように感じる完璧なバランスのナイフを持っているのを知っていますか？ミュージシャンが触れただけで歌い出すようなギターを持っているのと同じように、開発者にはこうした魔法の道具のバージョンがあります。そしてこれがあなたの度肝を抜くこと間違いなしですが、ほとんどが完全無料なのです！ -シェフが手に馴染む完璧なナイフを持っているように、またはミュージシャンが触れるだけで歌うようなギターを持っているように、開発者にも魔法のようなツールがあります。そして驚くべきことに、そのほとんどが完全に無料です！ +私はこれらを皆さんと共有できるのが本当に楽しみで仕方ありません。なぜならソフトウェア開発のやり方を完全に変革してしまったからです。AI搭載のコーディングアシスタントがコードを書くのを手伝ってくれたり（冗談ではなく！）、Wi-Fiがあればどこからでもアプリを作れるクラウド環境、プログラムのX線のように詳細に解析できる高度なデバッグツールなどが存在します。 -これらのツールを共有することに興奮している理由は、これらがソフトウェアの構築方法を完全に変革したからです。AIがコードを書くのを手伝ってくれる（冗談ではありません！）、Wi-Fiがあればどこからでもアプリケーションを構築できるクラウド環境、そしてプログラムをX線のように分析する高度なデバッグツールなどです。 - -そしてこれがまだ鳥肌が立つ部分ですが、これらは「初心者向けツール」ではありません。これらはGoogleやNetflix、あなたが好きなインディーアプリスタジオの開発者が今まさに使用しているプロフェッショナルグレードのツールです。これらを使うことで、プロのような気分になること間違いなしです！ +そしてここが鳥肌ものなのですが、これらは「初心者ツール」ではないのです。Google、Netflix、そして皆さんが好きなインディーズアプリスタジオがまさに今使っているのと同じプロフェッショナルなツール群なのです。使いこなせば一気にプロの気分になれますよ！ ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 あなたのアイデア"] --> B["⌨️ コードエディター
(VS Code)"] + B --> C["🌐 ブラウザ開発者ツール
(テスト＆デバッグ)"] + C --> D["⚡ コマンドライン
(自動化＆ツール)"] + D --> E["📚 ドキュメント
(学習＆リファレンス)"] + E --> F["🚀 素晴らしいウェブアプリ！"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 AIアシスタント
(GitHub Copilot)"] + C -.-> H["📱 デバイステスト
(レスポンシブデザイン)"] + D -.-> I["📦 パッケージマネージャー
(npm, yarn)"] + E -.-> J["👥 コミュニティ
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -476,343 +504,354 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` +``` +### コードエディターとIDE：あなたの新しいデジタル親友 -### コードエディタとIDE: あなたの新しいデジタル親友 +コードエディターについて話しましょう。これはあなたの新しいお気に入りの場所になるでしょう！自分だけのコーディングサンクチュアリで、そこにいる時間が一番長くなるはずです。 -コードエディタについて話しましょう – これらは間違いなくあなたの新しいお気に入りの場所になるでしょう！これらは、デジタル作品を作り上げ、完成させるためにほとんどの時間を過ごす個人的なコーディングの聖域のようなものです。 +でも現代のエディターには魔法のような特徴があります。ただの高機能テキストエディターではありません。まるできらりと輝く最高のメンターが24時間あなたの隣に座っているような感じです。打ち間違いをあなたが気づく前に見抜き、すごい改善案を示し、コードの意味を理解する手助けをしてくれて、さらにはあなたがこれからタイプしそうなことを予測して続きを提案してくれます！ -しかし、現代のエディタが本当に魔法のようなのは、単なる高機能なテキストエディタではないという点です。まるで最も賢く、支援的なコーディングメンターが24時間365日あなたの隣に座っているようなものです。タイポを見つける前に修正し、あなたを天才のように見せる改善を提案し、コードの各部分が何をするのかを理解する手助けをし、さらにはあなたが入力しようとしていることを予測して考えを完成させる提案をしてくれることもあります！ +オートコンプリートを初めて使ったときのことは今でも忘れません。本当に未来に生きている感覚でした。何かタイプし始めるとエディターが「これが欲しい関数ですか？」って感じで提案してくれるのです。まるで心を読んでくれるコーディング仲間のようです！ -オートコンプリートを初めて発見したときのことを覚えていますが、まるで未来に生きているような気分でした。何かを入力し始めると、エディタが「ねえ、これがあなたが必要としている機能じゃない？」と言ってくれるんです。まるで心を読んでくれるコーディング仲間のようです！ +**これらエディターがすごい理由は？** -**これらのエディタが素晴らしい理由は？** +現代のコードエディターは、生産性を爆上げする機能が満載です： -現代のコードエディタは、生産性を向上させるための驚くべき機能を提供します: +| 機能 | 役割 | 助けになる理由 | +|---------|--------------|--------------| +| **構文ハイライト** | コードの各部分を色分け | 読みやすくエラーを見つけやすくする | +| **オートコンプリート** | タイプ中にコードを提案 | コーディング速度アップ＆タイプミス削減 | +| **デバッグツール** | エラー発見と修正を支援 | 問題解決の時間を大幅短縮 | +| **拡張機能** | 専用機能を追加可能 | あらゆる技術にカスタマイズできる | +| **AIアシスタント** | コードや説明の提案 | 学習効率と生産性を加速する | -| 機能 | 何をするか | なぜ役立つか | -|------|------------|--------------| -| **構文ハイライト** | コードの異なる部分を色分け | コードを読みやすくし、エラーを見つけやすくする | -| **オートコンプリート** | タイプ中にコードを提案 | コーディングを高速化し、タイポを減らす | -| **デバッグツール** | エラーを見つけて修正 | トラブルシューティングの時間を節約 | -| **拡張機能** | 専門的な機能を追加 | 任意の技術に合わせてエディタをカスタマイズ | -| **AIアシスタント** | コードと説明を提案 | 学習と生産性を加速 | +> 🎥 **動画リソース**: これらのツールの動作を見るには、この[Tools of the Tradeビデオ](https://youtube.com/watch?v=69WJeXGBdxg)をご覧ください。 -> 🎥 **ビデオリソース**: これらのツールがどのように動作するかを見たいですか？[Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg)で包括的な概要をチェックしてください。 +#### Web開発におすすめのエディター -#### Web開発におすすめのエディタ +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)**（無料） +- ウェブ開発者に最も人気 +- 優れた拡張機能エコシステム +- 組み込みターミナルとGit連携 +- **必須拡張機能**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AIによるコード提案 + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - リアルタイム共同編集 + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 自動コード整形 + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - コードの綴りミス検出 -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)**（無料） -- Web開発者の間で最も人気 -- 優れた拡張機能エコシステム -- 組み込みターミナルとGit統合 -- **必須拡張機能**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AIによるコード提案 - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - リアルタイムコラボレーション - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 自動コード整形 - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - コード内のタイポを検出 +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（有料、学生無料） +- 高度なデバッグとテストツール +- インテリジェントなコード補完 +- 組み込みバージョン管理 -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（有料、学生は無料） -- 高度なデバッグとテストツール -- インテリジェントなコード補完 -- 組み込みバージョン管理 +**クラウドベースIDE**（価格はさまざま） +- [GitHub Codespaces](https://github.com/features/codespaces) - ブラウザで使える完全なVS Code +- [Replit](https://replit.com/) - 学習やコード共有に最適 +- [StackBlitz](https://stackblitz.com/) - 即時フルスタックウェブ開発 -**クラウドベースのIDE**（価格は様々） -- [GitHub Codespaces](https://github.com/features/codespaces) - ブラウザ内で完全なVS Code -- [Replit](https://replit.com/) - 学習とコード共有に最適 -- [StackBlitz](https://stackblitz.com/) - 即時のフルスタックWeb開発 +> 💡 **はじめの一歩のヒント**: 最初はVisual Studio Codeから始めましょう。無料で業界でも広く使われており、コミュニティによるチュートリアルや拡張機能が豊富です。 -> 💡 **始めるためのヒント**: Visual Studio Codeから始めましょう – 無料で、業界で広く使用されており、役立つチュートリアルや拡張機能を作成する巨大なコミュニティがあります。 -### Webブラウザ: あなたの秘密の開発実験室 +### ウェブブラウザ：秘密の開発実験室 -さて、完全に驚く準備をしてください！ブラウザを使ってソーシャルメディアをスクロールしたり動画を見たりしていたことがありますよね？実は、それらはこの驚くべき秘密の開発実験室をずっと隠していたのです。 -初めて誰かにブラウザのDevToolsを見せてもらったとき、3時間くらいずっとクリックして「えっ、これもできるの?!」って驚きっぱなしでした。リアルタイムでどんなウェブサイトでも編集できるし、読み込み速度を正確に確認できるし、異なるデバイスでサイトがどう見えるかテストできるし、JavaScriptのデバッグまでプロ級にできちゃうんです。本当に衝撃的でした！ +さあ、心の準備をしてください！あなたが普段ソーシャルメディアをスクロールしたり動画を見たりするのに使っているブラウザが、実はすごい秘密の開発実験室を隠していることを知っていましたか？ -**ブラウザが秘密兵器である理由:** +ウェブページで右クリックして「要素を検証」を選ぶたびに、ある秘密の世界が開きます。これは、私が昔何百ドルも出していた高価なソフトよりも強力な開発者ツールです。まるで、普段使っている普通のキッチンの奥にプロのシェフの実験室が隠されていたのを発見したみたいなものです！ +誰かが初めてブラウザのDevToolsを見せてくれたとき、私はただクリックしまくって「えっ、それもできるの？！」と3時間ぐらい騒いでいました。リアルタイムでどんなウェブサイトでも編集でき、読み込み速度も正確にわかり、異なるデバイスでの見え方をテストし、さらにはJavaScriptをプロ並みにデバッグできるのです。これは本当に衝撃的です！ -ウェブサイトやウェブアプリを作るとき、実際の環境でどう見えるか、どう動作するかを確認する必要があります。ブラウザは単にあなたの作品を表示するだけでなく、パフォーマンス、アクセシビリティ、潜在的な問題について詳細なフィードバックを提供してくれます。 +**ブラウザがあなたの秘密兵器である理由：** -#### ブラウザ開発者ツール (DevTools) +ウェブサイトやウェブアプリケーションを作るとき、現実世界での見た目や挙動を知る必要があります。ブラウザは単に作品を表示するだけでなく、パフォーマンス、アクセシビリティ、潜在的な問題について詳しいフィードバックを提供します。 -現代のブラウザには包括的な開発スイートが含まれています: +#### ブラウザの開発者ツール（DevTools） -| ツールカテゴリ | 機能 | 使用例 | -|---------------|--------------|------------------| -| **Element Inspector** | HTML/CSSをリアルタイムで表示・編集 | スタイリングを調整して即座に結果を確認 | -| **Console** | エラーメッセージの表示とJavaScriptのテスト | 問題をデバッグし、コードを試す | -| **Network Monitor** | リソースの読み込み状況を追跡 | パフォーマンスと読み込み時間を最適化 | -| **Accessibility Checker** | インクルーシブデザインのテスト | すべてのユーザーに対応するサイトを確保 | -| **Device Simulator** | 異なる画面サイズでプレビュー | 複数のデバイスなしでレスポンシブデザインをテスト | +モダンブラウザには包括的な開発ツールが搭載されています： + +| ツールカテゴリ | できること | 具体的な使い方例 | +|---------------|-------------|------------------| +| **Element Inspector** | HTML/CSSをリアルタイムで閲覧・編集 | スタイリングを調整して即座に結果を確認 | +| **Console** | エラーメッセージの確認やJavaScriptのテスト | 問題をデバッグし、コードを試す | +| **Network Monitor** | リソースの読み込み状況を追跡 | パフォーマンスや読み込み時間を最適化 | +| **Accessibility Checker** | インクルーシブデザインのテスト | すべてのユーザーに対応しているか確認 | +| **Device Simulator** | 様々な画面サイズでプレビュー | 複数デバイスなしでレスポンシブをテスト | #### 開発におすすめのブラウザ -- **[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では異なる見え方をすることがあります。プロの開発者は主要なブラウザすべてでテストを行い、一貫したユーザー体験を確保します。 -### コマンドラインツール: 開発者のスーパーパワーへの入り口 +### コマンドラインツール：開発者のスーパーパワーへの入り口 -正直に言いますね。コマンドラインを初めて見たとき、ただの黒い画面に点滅するテキストを見て、「無理、絶対無理！これって1980年代のハッカー映画みたいだし、私には絶対無理！」って思いました。😅 +では、コマンドラインについて正直に話しましょう。実は私も最初に見たとき、あの黒くて点滅する文字が怖くて、「絶対無理！1980年代のハッカームービーに出てくるみたいで、自分には到底無理だ！」と思いました 😅 -でも、あの時誰かが教えてくれたらよかったなと思うことを今あなたに伝えます。コマンドラインは怖いものじゃないんです。実際にはコンピュータと直接会話しているようなものなんです。例えるなら、写真やメニューがあるおしゃれなアプリで食べ物を注文するのと、地元のレストランに行ってシェフに「何か美味しいものをお願い」と言うのとの違いみたいなものです。 +でもここで言いたいのは、コマンドラインは怖いものではなく、コンピューターと直接会話しているようなものだということ。高級なアプリで写真とメニューを見ながら注文するのと、地元のレストランに行ってシェフに「何か驚くものをお願い」とだけ言う違いみたいなものです。 -コマンドラインは開発者が魔法使いのように感じる場所です。いくつかの魔法のような言葉（実際にはただのコマンドですが！）を入力してEnterキーを押すと、プロジェクト構造を作成したり、世界中の強力なツールをインストールしたり、アプリをインターネットに公開して何百万人もの人々に見てもらうことができます。一度その力を味わうと、正直言ってかなりクセになります！ +コマンドラインは開発者がまるで魔法使いのように感じられる場所。数語（正確にはコマンド）を打ってEnterを押すと、プロジェクト構造を作成したり、世界中から強力なツールをインストールしたり、アプリを公開したりできます。一度その力を味わうと、結構クセになります！ -**コマンドラインが好きになる理由:** +**コマンドラインがあなたのお気に入りツールになる理由：** -グラフィカルインターフェースは多くのタスクに便利ですが、コマンドラインは自動化、精度、速度に優れています。多くの開発ツールは主にコマンドラインインターフェースを通じて動作し、それを効率的に使いこなすことで生産性が劇的に向上します。 +グラフィカルインターフェースは多くの作業に便利ですが、コマンドラインは自動化、正確さ、速度に優れています。多くの開発ツールは主にコマンドラインで動作し、効率的に使いこなせば生産性が大幅に上がります。 ```bash -# Step 1: Create and navigate to project directory +# ステップ1：プロジェクトディレクトリを作成し、移動する mkdir my-awesome-website cd my-awesome-website ``` -**このコードがすること:** -- プロジェクト用の新しいディレクトリ「my-awesome-website」を作成 -- 作成したばかりのディレクトリに移動して作業を開始 +**このコードがやっていること：** +- プロジェクト用の「my-awesome-website」という新しいディレクトリを作成 +- 作成したディレクトリに移動して作業開始 ```bash -# Step 2: Initialize project with package.json +# ステップ2: package.jsonでプロジェクトを初期化する npm init -y -# Install modern development tools +# 最新の開発ツールをインストールする npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**ステップごとの説明:** -- `npm init -y`を使用してデフォルト設定で新しいNode.jsプロジェクトを初期化 -- Viteをインストールして高速な開発と本番ビルドを実現 -- Prettierを追加して自動コードフォーマットを行い、ESLintでコード品質をチェック -- `--save-dev`フラグを使用してこれらを開発専用の依存関係としてマーク +**手順ごとに説明：** +- `npm init -y`でデフォルト設定のNode.jsプロジェクトを初期化 +- 開発と本番ビルド用に高速なビルドツールViteをインストール +- 自動フォーマット用のPrettierとコード品質チェック用のESLintを追加 +- `--save-dev`フラグで開発専用依存関係としてマーク ```bash -# Step 3: Create project structure and files +# ステップ3：プロジェクトの構造とファイルを作成する mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# 開発サーバーを起動する npx vite ``` -**上記で行ったこと:** -- ソースコードとアセット用のフォルダを作成してプロジェクトを整理 -- 適切なドキュメント構造を持つ基本的なHTMLファイルを生成 -- Vite開発サーバーを起動してライブリロードとホットモジュール置換を実現 +**上記で行ったこと：** +- ソースコードとアセット用にフォルダを分けて整理 +- 基本的なドキュメント構造を持つHTMLファイルを生成 +- ライブリロードとホットモジュール交換対応のVite開発サーバーを起動 #### ウェブ開発に必須のコマンドラインツール | ツール | 目的 | 必要な理由 | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | バージョン管理 | 変更を追跡し、他者と共同作業し、作業をバックアップ | -| **[Node.js & npm](https://nodejs.org/)** | JavaScriptランタイム & パッケージ管理 | ブラウザ外でJavaScriptを実行し、最新の開発ツールをインストール | -| **[Vite](https://vitejs.dev/)** | ビルドツール & 開発サーバー | ホットモジュール置換を備えた超高速開発 | -| **[ESLint](https://eslint.org/)** | コード品質 | JavaScriptの問題を自動的に検出して修正 | -| **[Prettier](https://prettier.io/)** | コードフォーマット | コードを一貫してフォーマットし、読みやすくする | +| **[Git](https://git-scm.com/)** | バージョン管理 | 変更履歴の管理、共同作業、バックアップ | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript実行環境＆パッケージ管理 | ブラウザ外でJavaScript実行、最新開発ツールの導入 | +| **[Vite](https://vitejs.dev/)** | ビルドツール＆開発サーバー | 高速な開発環境とホットモジュール交換 | +| **[ESLint](https://eslint.org/)** | コード品質 | JavaScriptの問題を自動検出・修正 | +| **[Prettier](https://prettier.io/)** | コード整形 | コードを一貫して読みやすく保つ | -#### プラットフォーム別オプション +#### プラットフォーム別のオプション **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - モダンで機能豊富なターミナル +- **[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コマンドライン +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - 伝統的なWindowsコマンドライン **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 標準搭載のターミナルアプリ -- **[iTerm2](https://iterm2.com/)** - 高度な機能を備えたターミナル +- **[iTerm2](https://iterm2.com/)** - 高機能ターミナルエミュレーター **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 標準的なLinuxシェル -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 高度なターミナルエミュレーター +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Linux標準シェル +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 高機能ターミナル > 💻 = OSにプリインストール済み -> 🎯 **学習パス**: `cd`（ディレクトリ変更）、`ls`または`dir`（ファイル一覧表示）、`mkdir`（フォルダ作成）などの基本コマンドから始めましょう。`npm install`、`git status`、`code .`（現在のディレクトリをVS Codeで開く）などのモダンなワークフローコマンドを練習してください。慣れてくると、より高度なコマンドや自動化技術を自然に習得できます。 +> 🎯 **学習の進め方**：`cd`（ディレクトリ移動）、`ls`や`dir`（ファイルリスト表示）、`mkdir`（フォルダ作成）など基本コマンドから始めましょう。`npm install`、`git status`、`code .`など現代的なワークフローコマンドも練習すると良いです。慣れてくると自然に高度なコマンドや自動化技術が身につきます。 + -### ドキュメント: いつでも利用可能な学習メンター +### ドキュメント：いつでも頼れる学びのメンター -初心者であることに対して安心感を持てる秘密を教えますね。実は、最も経験豊富な開発者でも、作業時間のかなりの部分をドキュメントを読むことに費やしています。それは彼らが何をしているのか分からないからではなく、むしろ賢いからなんです！ +初心者であることを気楽に感じられる秘密を教えましょう。経験豊富な開発者でも時間の大部分をドキュメント読みに費やしています。これは「わからないから」ではなく、むしろ賢明な行動なのです！ -ドキュメントは、世界で最も忍耐強く知識豊富な教師に24時間365日アクセスできるようなものです。深夜2時に問題に行き詰まったら？ドキュメントが温かい仮想の抱擁と必要な答えを提供してくれます。みんなが話題にしている新しい機能について学びたい？ドキュメントがステップバイステップの例でサポートしてくれます。なぜ何かがそのように機能するのか理解したい？そうです、ドキュメントがそれを説明してくれます！ +ドキュメントは24時間いつでも利用可能な、世界で最も根気強くて知識豊富な教師がいるようなもの。夜中の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提供) -- モダンなウェブ開発のベストプラクティス +**[Web.dev](https://web.dev)** （Google提供） +- モダンなウェブ開発ベストプラクティス - パフォーマンス最適化ガイド -- アクセシビリティとインクルーシブデザインの原則 -- 実際のプロジェクトからのケーススタディ +- アクセシビリティとインクルーシブデザイン原則 +- 実際のプロジェクトの事例研究 **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edgeブラウザ開発リソース -- プログレッシブウェブアプリガイド +- プログレッシブウェブアプリのガイド - クロスプラットフォーム開発の洞察 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - 構造化された学習カリキュラム -- 業界の専門家によるビデオコース -- 実践的なコーディング演習 +- 業界エキスパートによるビデオコース +- 実践的なコーディング演習付き -> 📚 **学習戦略**: ドキュメントを暗記しようとせず、効率的にナビゲートする方法を学びましょう。頻繁に使用するリファレンスをブックマークし、検索機能を使って特定の情報を迅速に見つける練習をしてください。 +> 📚 **学習戦略**：ドキュメントを暗記しようとせず、効率的に検索・閲覧する方法を習得しましょう。よく使う参考資料はブックマークし、検索機能で必要な情報を素早く見つける練習を。 -### 🔧 **ツール習熟度チェック: あなたに響くものは？** +### 🔧 **ツールマスタリーチェック：どれが響く？** -**少し考えてみてください:** -- 最初に試してみたいツールはどれですか？（どれを選んでも正解です！） -- コマンドラインはまだ怖いと感じますか、それとも興味が湧いてきましたか？ -- お気に入りのウェブサイトの裏側をブラウザDevToolsで覗いてみるのを想像できますか？ +**ちょっと考えてみてください：** +- まず試してみたいツールはどれですか？（間違いはありません！） +- コマンドラインはまだ怖いですか？それとも興味が出てきましたか？ +- ブラウザのDevToolsを使って、お気に入りのウェブサイトの裏側を覗くイメージはできますか？ ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "ツールに費やした開発者の時間" + "コードエディタ" : 40 + "ブラウザテスト" : 25 + "コマンドライン" : 15 + "ドキュメントを読む" : 15 + "デバッグ" : 5 ``` +> **面白いインサイト**：多くの開発者はコードエディターで過ごす時間が約40%ですが、テストや学習、問題解決に使う時間にも注目しましょう。プログラミングは単にコードを書くことではなく、体験を作ることなのです！ -> **面白い洞察**: 開発者はコードエディタで約40%の時間を過ごしますが、テスト、学習、問題解決に費やす時間も注目してください。プログラミングは単にコードを書くことではなく、体験を作り上げることなのです！ +✅ **考える材料**：ウェブサイトの作成（開発）に使うツールは、見た目をデザインするツールとどう違うと思いますか？建築家が美しい家を設計し、施工業者がそれを実際に建てるのと似ています。どちらも重要ですが、必要な道具は違います。こんな考え方が、ウェブサイトがどうやって生まれるかを大きな視点で理解する助けになります。 -✅ **考えるべきこと**: ウェブサイトを構築するためのツール（開発）と、見た目をデザインするためのツール（デザイン）はどう違うと思いますか？美しい家を設計する建築家と実際にそれを建てる施工者の違いのようなものです。どちらも重要ですが、必要なツールボックスは異なります！このような考え方をすることで、ウェブサイトがどのように生まれるかの全体像を理解するのに役立ちます。 +## GitHub Copilot エージェントチャレンジ 🚀 -## GitHub Copilot Agent Challenge 🚀 +エージェントモードを使って次のチャレンジを完成させましょう： -Agentモードを使用して以下のチャレンジを完了してください: +**説明:** モダンなコードエディターまたはIDEの機能を探り、ウェブ開発者としての作業効率をどう向上できるかを示してください。 -**説明:** モダンなコードエディタまたはIDEの機能を探求し、それがウェブ開発者としてのワークフローをどのように改善できるかを示してください。 - -**プロンプト:** Visual Studio Code、WebStorm、またはクラウドベースのIDEなどのコードエディタまたはIDEを選択してください。コードの記述、デバッグ、または保守を効率化する3つの機能または拡張機能を挙げ、それぞれがワークフローにどのように役立つかを簡単に説明してください。 +**プロンプト:** Visual Studio Code、WebStorm、クラウドIDEなどのコードエディターやIDEを選びましょう。コードを書く、デバッグする、コードを維持管理するのに役立つ3つの機能や拡張機能をリストアップしてください。それぞれについて、作業効率向上の理由を簡単に説明してください。 --- ## 🚀 チャレンジ -**さて、探偵さん、最初の事件に挑む準備はできましたか？** +**さあ探偵さん、最初の事件に挑戦する準備はいいですか？** + +この素晴らしい基礎ができた今、プログラミングの世界がどれだけ多様で魅力的か知る冒険に出ましょう。なおこれはまだコードを書く話ではないので、プレッシャーは不要です！初めての案件を追うプログラミング言語探偵になったつもりで！ -この素晴らしい基礎を手に入れた今、プログラミングの世界がどれほど多様で魅力的かを実感できる冒険を用意しました。そして、これはまだコードを書くことではないので、プレッシャーはありません！自分をプログラミング言語探偵として、初めてのエキサイティングな事件に挑むと考えてください！ +**ミッション（受け入れる場合のみ）：** +1. **言語探検者になる**：ウェブ構築用、モバイルアプリ用、科学者のデータ処理用など、全く違う宇宙から3つのプログラミング言語を選びましょう。同じ単純なタスクの例を各言語で見つけてください。同じことをしていても見た目が全然違うことにきっと驚きますよ！ -**あなたのミッション、受け入れるならば:** -1. **言語探検家になる**: 完全に異なる世界のプログラミング言語を3つ選びましょう。例えば、ウェブサイトを作る言語、モバイルアプリを作る言語、科学者がデータを処理する言語など。同じ簡単なタスクをそれぞれの言語で書いた例を探してみてください。全く同じことをするのに、見た目がこんなに違うなんて驚くはずです！ +2. **起源を探る**：それぞれの言語の特徴は何でしょう？面白いのは、すべてのプログラミング言語は「これを解決するにはもっと良い方法があるはず」と考えた誰かが生み出したことです。その背景にある問題は何か考えてみましょう。その話は本当に魅力的ですよ！ -2. **起源を探る**: 各言語の特別な点は何でしょうか？面白い事実ですが、すべてのプログラミング言語は「もっと効率的にこの問題を解決する方法があるはずだ」と誰かが考えた結果生まれました。それらの問題が何だったのかを調べてみてください。これらの話は本当に興味深いものです！ +3. **コミュニティに触れる**：それぞれの言語のコミュニティがどれくらい歓迎的で情熱的か調査しましょう。何百万もの開発者が知識を共有し助け合うものもあれば、小さいけれど非常に結束の強いコミュニティもあります。多様な個性が見られて楽しいですよ！ -3. **コミュニティに出会う**: 各言語のコミュニティがどれほど歓迎的で情熱的かをチェックしてみてください。何百万人もの開発者が知識を共有し助け合うコミュニティもあれば、小規模だけど非常に結束力がありサポートが充実しているコミュニティもあります。それぞれのコミュニティの個性を見るのが楽しいはずです！ +4. **直感で選ぶ**：今あなたにとって一番親しみやすい言語はどれですか？「完璧な」選択を心配せず、感じるままに！誤答はありませんし、後で他も探求できます。 -4. **直感に従う**: 今のところどの言語が最も親しみやすく感じますか？「完璧な」選択をすることに悩む必要はありません。直感に従ってください！ここで間違った選択はありませんし、後で他の言語を探求することもできます。 +**追加探偵活動**：主なウェブサイトやアプリがどの言語で作られているか調べてみましょう。Instagram、Netflix、または止められないあのモバイルゲームの技術スタックを知れば驚くはずです！ -**ボーナス探偵作業**: 各言語で構築された主要なウェブサイトやアプリを発見してみてください。Instagram、Netflix、または止められないあのモバイルゲームが何で動いているかを知ったら驚くこと間違いなしです！ +> 💡 **覚えておいて**：今日はどの言語もマスターする必要はありません。まずは周辺を知って、どこに拠点を作りたいか考える準備期間です。じっくり楽しみ、好奇心の赴くままに！ -> 💡 **覚えておいてください**: 今日これらの言語の専門家になる必要はありません。ただ、どの言語がどんな「街並み」なのかを知ることが目的 -## レビューと自己学習 -**じっくり楽しみながら進めてください！** +## 発見を祝おう！ -今日はたくさんのことを学びましたね。それは誇るべきことです！これからが楽しい部分です。興味を引かれたトピックを探求してみましょう。これは宿題ではありません。冒険です！ +すごいですね、今日たくさんの素晴らしい情報を吸収しました！この旅でどれだけ多くが心に残ったか楽しみです。覚えておいてください—これは完璧を求めるテストではなく、あなたがこの魅惑的な世界について学んだことすべてを祝う機会です！ -**興味を持ったことを深掘りしてみましょう:** +[レッスン後クイズを受ける](https://ff-quizzes.netlify.app/web/) -**プログラミング言語を実際に触ってみる:** -- 気になった2～3つの言語の公式サイトを訪れてみましょう。それぞれ独自の個性やストーリーがあります！ -- [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Replit](https://replit.com/)のようなオンラインのコーディングプレイグラウンドを試してみてください。実験することを恐れないでください。何かを壊すことはありません！ -- お気に入りの言語がどのように誕生したかについて読んでみましょう。本当に面白い起源の話があり、言語がどのように機能するのかを理解する助けになります。 +## 復習＆自主学習 -**新しいツールに慣れる:** -- まだダウンロードしていない場合は、Visual Studio Codeをダウンロードしましょう。無料で使えて、きっと気に入るはずです！ -- 拡張機能マーケットプレイスを数分間ブラウズしてみてください。コードエディタのためのアプリストアのようなものです！ -- ブラウザの開発者ツールを開いて、いろいろクリックしてみましょう。すべてを理解する必要はありません。まずは何があるのかを知ることが大切です。 +**時間をかけて楽しみながら探求してください！** +今日はたくさんのことを学びましたね、それは誇るべきことです！さて、ここからが楽しい部分です—あなたの好奇心を刺激したトピックを探求しましょう。これが宿題ではなく、冒険だということを忘れないでください！ -**コミュニティに参加する:** -- [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/)、[GitHub](https://github.com/)などの開発者コミュニティをフォローしてみましょう。プログラミングコミュニティは初心者を歓迎してくれます！ -- YouTubeで初心者向けのコーディング動画を見てみましょう。初心者の気持ちを覚えている素晴らしいクリエイターがたくさんいます。 -- 地元のミートアップやオンラインコミュニティに参加することを検討してみてください。開発者は初心者を助けるのが大好きです！ +**あなたが興味を持ったことをもっと深く掘り下げましょう：** -> 🎯 **覚えておいてほしいこと**: 一晩でコーディングの達人になる必要はありません！今は、この素晴らしい新しい世界を知る段階です。時間をかけて旅を楽しんでください。そして、尊敬するすべての開発者もかつてはあなたと同じように、興奮しつつ少し圧倒されていたことを忘れないでください。それは完全に普通のことで、正しい道を進んでいる証拠です。 +**プログラミング言語に触れてみる：** +- 気になった2～3つの言語の公式ウェブサイトを訪れてみましょう。それぞれに個性と物語があります！ +- [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Replit](https://replit.com/)のようなオンラインのコーディングプレイグラウンドを試してみてください。実験を恐れないでください—何も壊れません！ +- お気に入りの言語がどのように誕生したかを読んでみましょう。実際、いくつかの起源の物語はとても興味深く、その言語がなぜそのように動くのか理解を助けてくれます。 + +**新しいツールに慣れましょう：** +- まだならVisual Studio Codeをダウンロードしてください—無料で、きっと気に入るはずです！ +- 数分だけエクステンションマーケットプレイスを見て回りましょう。コードエディタのためのアプリストアのようなものです！ +- ブラウザの開発者ツールを開いて、いろいろクリックしてみてください。すべてを理解する必要はありません—ただ何があるか慣れておきましょう。 + +**コミュニティに参加しましょう：** +- [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/)、[GitHub](https://github.com/)のような開発者コミュニティをフォローしましょう。プログラミングコミュニティは新参者にとても親切です！ +- YouTubeで初心者向けのコーディング動画を見ましょう。始めたばかりの頃の気持ちを覚えている素晴らしいクリエイターがたくさんいます。 +- 地元のミートアップやオンラインコミュニティに参加することを検討してください。開発者は新参者を助けるのが大好きです！ + +> 🎯 **覚えておいてほしいこと**：一晩でコーディングの達人になることは期待されていません！今は、これから参加する素晴らしい新しい世界を知りはじめているところです。時間をかけて旅を楽しみましょう。そして、あなたが尊敬するすべての開発者は、かつて今まさにあなたがいる場所で、ワクワクして少し圧倒されていたことを忘れないでください。それは全く普通のことで、あなたが正しい道を歩んでいる証拠です。 ## 課題 -[ドキュメントを読む](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **課題へのちょっとしたヒント**: まだ触れていないツールを探求してみてほしいです！すでに話したエディタやブラウザ、コマンドラインツールはスキップして、まだ見ぬ素晴らしい開発ツールの世界を発見してください。活発にメンテナンスされていて、親切なコミュニティがあるツールを探してみましょう（こうしたツールは最高のチュートリアルがあり、困ったときに助けてくれる人がたくさんいます）。 +> 💡 **課題へのちょっとした後押し**：まだ触れていないツールをぜひ探求してみてください！これまで話したエディタ、ブラウザ、コマンドラインツールはスキップして—まだ発見されていない素晴らしい開発ツールの世界が広がっています。積極的にメンテナンスされ、活気があり助け合うコミュニティが存在するもの（こうしたツールには最高のチュートリアルがあり、つまずいても手助けしてくれる人が多いです）を探してください。 --- ## 🚀 あなたのプログラミング旅のタイムライン -### ⚡ **次の5分間でできること** -- [ ] 気になったプログラミング言語の公式サイトを2～3つブックマークする -- [ ] Visual Studio Codeをまだダウンロードしていない場合はダウンロードする -- [ ] ブラウザの開発者ツール（F12）を開いて、どのウェブサイトでもクリックしてみる -- [ ] プログラミングコミュニティに1つ参加する（Dev.to、Reddit r/webdev、またはStack Overflow） +### ⚡ **次の5分でできること** +- [ ] 気になったプログラミング言語のウェブサイトを2〜3件ブックマークする +- [ ] まだならVisual Studio Codeをダウンロードする +- [ ] ブラウザのDevTools（F12）を開いてどこかのウェブサイトをクリックしてみる +- [ ] どれか1つプログラミングコミュニティに参加する（Dev.to、Reddit r/webdev、またはStack Overflow） -### ⏰ **次の1時間で達成できること** -- [ ] レッスン後のクイズを完了し、回答を振り返る -- [ ] VS CodeにGitHub Copilot拡張機能をセットアップする -- [ ] オンラインで2つの異なるプログラミング言語で「Hello World」を試してみる -- [ ] YouTubeで「開発者の1日」の動画を見る -- [ ] プログラミング言語の探求を始める（チャレンジから） +### ⏰ **この1時間で達成できること** +- [ ] レッスン後のクイズを終えて答えを振り返る +- [ ] GitHub Copilot拡張機能を使ってVS Codeをセットアップする +- [ ] 2種類のプログラミング言語で「Hello World」例をオンラインで試す +- [ ] YouTubeで「開発者の一日」動画を視聴する +- [ ] 課題の中のプログラミング言語探偵活動を始める ### 📅 **1週間の冒険** -- [ ] 課題を完了し、新しい開発ツールを3つ探求する -- [ ] ソーシャルメディアで開発者やプログラミング関連のアカウントを5つフォローする -- [ ] CodePenやReplitで小さなものを作ってみる（「Hello, [あなたの名前]！」でもOK） -- [ ] 開発者のブログ記事を1つ読んで、誰かのコーディングの旅について知る -- [ ] バーチャルミートアップに参加するか、プログラミングの講演を視聴する +- [ ] 課題を終え、3つの新しい開発ツールを探求する +- [ ] 5人の開発者またはプログラミングアカウントをSNSでフォローする +- [ ] CodePenやReplitで何か小さなものを作ってみる（たとえ「Hello, [あなたの名前]！」だけでも！） +- [ ] ある開発者のコーディングの旅についてのブログ記事を読む +- [ ] バーチャルミートアップに参加するかプログラミングトークを見る - [ ] 選んだ言語をオンラインチュートリアルで学び始める -### 🗓️ **1か月間の変化** -- [ ] 初めての小さなプロジェクトを作る（シンプルなウェブページでもOK！） -- [ ] オープンソースプロジェクトに貢献する（まずはドキュメントの修正から始める） -- [ ] プログラミングを始めたばかりの人をメンターする -- [ ] 開発者ポートフォリオウェブサイトを作成する -- [ ] 地元の開発者コミュニティや勉強会に参加する -- [ ] 次の学習目標を計画し始める +### 🗓️ **1ヶ月の変身** +- [ ] 最初の小さなプロジェクトを作る（シンプルなウェブページでもOK！） +- [ ] オープンソースプロジェクトに貢献する（ドキュメントの修正から始める） +- [ ] これからプログラミングを始める誰かをメンターとして助ける +- [ ] 自分の開発者ポートフォリオウェブサイトを作る +- [ ] 地元の開発者コミュニティや勉強会とつながる +- [ ] 次の学習マイルストーンの計画を始める -### 🎯 **最終的な振り返りチェックイン** +### 🎯 **最後の振り返りチェックイン** -**次に進む前に、少し立ち止まって祝福しましょう:** -- 今日、プログラミングについて何が一番ワクワクしましたか？ -- 最初に探求したいツールや概念は何ですか？ -- このプログラミングの旅を始めることについてどう感じていますか？ -- 今、開発者に聞いてみたい質問は何ですか？ +**次に進む前に、少し自分を褒めてあげてください：** +- 今日、プログラミングでワクワクしたことは何でしたか？ +- どのツールやコンセプトを最初に探求したいですか？ +- このプログラミングの旅を始めることについてどう感じますか？ +- 今すぐ開発者に質問したいことは何ですか？ ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title あなたの自信構築の旅 + section 今日 + 好奇心旺盛: 3: You + 圧倒されている: 4: You + ワクワクしている: 5: You + section 今週 + 探索中: 4: You + 学習中: 5: You + つながりを持つ: 4: You + section 来月 + 構築中: 5: You + 自信がある: 5: You + 他者を助ける: 5: You ``` - -> 🌟 **覚えておいてください**: すべての専門家もかつては初心者でした。すべてのシニア開発者も、あなたと同じように、興奮しつつ少し圧倒されていた時期がありました。あなたは素晴らしい仲間に囲まれています。この旅は素晴らしいものになるでしょう。プログラミングの素晴らしい世界へようこそ！ 🎉 +> 🌟 **覚えておいてほしいこと**：すべてのエキスパートはかつて初心者でした。すべてのシニア開発者は、かつて今あなたが感じているようなワクワクし、少し圧倒され、そして何が可能かについて好奇心でいっぱいの気持ちを経験しています。あなたは素晴らしい仲間に囲まれており、この旅は信じられないほど素敵なものになるでしょう。プログラミングの素晴らしい世界へようこそ！ 🎉 --- -**免責事項**: -この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file + +**免責事項**： +本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる場合があります。原文書はあくまで正確な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨いたします。本翻訳の利用により生じた誤解や誤訳に対して、一切の責任を負いかねます。 + \ No newline at end of file diff --git a/translations/ja/AGENTS.md b/translations/ja/AGENTS.md index 5c7bae787..7e3616c10 100644 --- a/translations/ja/AGENTS.md +++ b/translations/ja/AGENTS.md @@ -1,37 +1,37 @@ # AGENTS.md -## Project Overview +## プロジェクト概要 -これは初心者にウェブ開発の基礎を教えるための教育用カリキュラムリポジトリです。Microsoft Cloud Advocatesによって開発された12週間の包括的なコースで、JavaScript、CSS、およびHTMLをカバーする24の実践的なレッスンが含まれています。 +これは初心者向けのWeb開発の基礎を教えるための教育カリキュラムリポジトリです。このカリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間コースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンを含みます。 -### Key Components +### 主な構成要素 -- **Educational Content**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン -- **Practical Projects**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、バンキングアプリ、コードエディター、AIチャットアシスタント -- **Interactive Quizzes**: 各3問のクイズ48回（レッスン前後の評価） -- **Multi-language Support**: GitHub Actionsによる50以上の言語の自動翻訳 -- **Technologies**: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用） +- **教育コンテンツ**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン +- **実践プロジェクト**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、バンキングアプリ、コードエディター、AIチャットアシスタント +- **インタラクティブクイズ**: 各3問の48のクイズ（レッスン前後の評価用） +- **多言語サポート**: GitHub Actionsを使用した50以上の言語への自動翻訳 +- **技術スタック**: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト向け） -### Architecture +### アーキテクチャ -- レッスンベースの構造を持つ教育用リポジトリ -- 各レッスンフォルダーにはREADME、コード例、解決策を含む -- 独立したプロジェクトは別ディレクトリに配置（quiz-app、各種レッスンプロジェクト） -- GitHub Actionsを使った翻訳システム（co-op-translator） -- Docsifyを通じたドキュメント提供およびPDF形式での利用可能 +- レッスンベースの構造をもつ教育リポジトリ +- 各レッスンフォルダーにはREADME、コード例、解答が含まれる +- 独立したプロジェクトは別ディレクトリに配置（quiz-app、各レッスンプロジェクト等） +- GitHub Actions（co-op-translator）による翻訳システム +- Docsifyを通じて文書配信、PDF版も提供 -## Setup Commands +## セットアップコマンド -このリポジトリは主に教育コンテンツの利用を目的としています。特定プロジェクトに取り組む場合は以下を参照してください： +このリポジトリは主に教育コンテンツの利用を目的としています。特定のプロジェクトで作業する場合は次の通りです： -### Main Repository Setup +### メインリポジトリのセットアップ ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz App Setup (Vue 3 + Vite) +### クイズアプリのセットアップ（Vue 3 + Vite） ```bash cd quiz-app @@ -41,17 +41,17 @@ npm run build # 本番用にビルドする npm run lint # ESLintを実行する ``` -### Bank Project API (Node.js + Express) +### バンクプロジェクトAPI（Node.js + Express） ```bash cd 7-bank-project/api npm install -npm start # APIサーバーを起動する -npm run lint # ESLintを実行する -npm run format # Prettierでフォーマットする +npm start # APIサーバーを起動 +npm run lint # ESLintを実行 +npm run format # Prettierでフォーマット ``` -### Browser Extension Projects +### ブラウザ拡張機能プロジェクト ```bash cd 5-browser-extension/solution @@ -59,15 +59,15 @@ npm install # ブラウザ固有の拡張機能読み込み手順に従ってください ``` -### Space Game Projects +### スペースゲームプロジェクト ```bash cd 6-space-game/solution npm install -# ブラウザでindex.htmlを開くか、Live Serverを使用してください +# index.htmlをブラウザで開くか、Live Serverを使用してください ``` -### Chat Project (Python Backend) +### チャットプロジェクト（Pythonバックエンド） ```bash cd 9-chat-project/solution/backend/python @@ -76,37 +76,37 @@ pip install openai python api.py ``` -## Development Workflow +## 開発ワークフロー -### For Content Contributors +### コンテンツ寄稿者向け -1. **リポジトリをフォーク**してGitHubアカウントにコピー -2. **フォークをローカルにクローン** -3. **変更用の新しいブランチを作成** -4. レッスンの内容またはコード例を編集 -5. 関連プロジェクトディレクトリでコードをテスト -6. 貢献ガイドラインに従ってプルリクエストを提出 +1. リポジトリをGitHubアカウントに**フォーク**する +2. フォークをローカルに**クローン**する +3. 変更用に**新しいブランチ**を作成する +4. レッスンコンテンツやコード例を編集する +5. 関連プロジェクトディレクトリ内でコード変更をテストする +6. コントリビューションガイドラインに従ってプルリクエストを送る -### For Learners +### 学習者向け -1. リポジトリをフォークまたはクローン +1. リポジトリをフォークまたはクローンする 2. レッスンディレクトリを順に進む -3. 各レッスンのREADMEを読む -4. https://ff-quizzes.netlify.app/web/ で事前クイズを完了 -5. レッスンフォルダ内のコード例を実行 -6. 課題やチャレンジを終える -7. 事後クイズを受ける +3. 各レッスンのREADMEファイルを読む +4. https://ff-quizzes.netlify.app/web/ でレッスン前のクイズを完了する +5. レッスンフォルダ内のコード例を進める +6. 課題やチャレンジを完了する +7. レッスン後のクイズを受ける -### Live Development +### ライブ開発 -- **Documentation**: ルートで `docsify serve` を実行（ポート3000） -- **Quiz App**: quiz-appディレクトリ内で `npm run dev` を実行 -- **Projects**: HTMLプロジェクトはVS Code Live Server拡張機能を利用 -- **API Projects**: 各APIディレクトリで `npm start` を実行 +- **ドキュメント**: ルートディレクトリで `docsify serve` を実行（ポート3000） +- **クイズアプリ**: quiz-appディレクトリで `npm run dev` を実行 +- **プロジェクト**: HTMLプロジェクトにはVS Code Live Server拡張を使用 +- **APIプロジェクト**: 各APIディレクトリで `npm start` を実行 -## Testing Instructions +## テスト手順 -### Quiz App Testing +### クイズアプリのテスト ```bash cd quiz-app @@ -114,78 +114,78 @@ npm run lint # コードスタイルの問題をチェックする npm run build # ビルドが成功することを確認する ``` -### Bank API Testing +### バンクAPIのテスト ```bash cd 7-bank-project/api npm run lint # コードスタイルの問題をチェックする -node server.js # サーバーがエラーなく起動するか確認する +node server.js # サーバーがエラーなく起動することを確認する ``` -### General Testing Approach +### 一般的なテスト方針 -- 教育用リポジトリのため包括的な自動テストは無し -- 手動テストの主なポイント： - - エラーなくコード例が実行されること - - ドキュメントのリンクが正しく機能すること - - プロジェクトのビルドが成功すること - - コード例がベストプラクティスに準拠していること +- 包括的な自動テストはなく教育用リポジトリです +- 手動テストでは次を重点的に行います： + - コード例がエラーなく動作すること + - ドキュメント内リンクが正しく機能すること + - プロジェクトのビルドが正常に完了すること + - コード例がベストプラクティスに従っていること -### Pre-submission Checks +### 提出前チェック -- package.jsonがあるディレクトリで `npm run lint` を実行 -- Markdownリンクの有効性を検証 -- ブラウザやNode.jsでコード例をテスト -- 翻訳が正しい構造を維持していることを確認 +- package.jsonのあるディレクトリで`npm run lint`を実行 +- マークダウンリンクの有効性を確認 +- ブラウザまたはNode.jsでコード例をテスト +- 翻訳が構造を維持しているか確認 -## Code Style Guidelines +## コードスタイルガイドライン ### JavaScript -- モダンES6以降の構文を使用 -- プロジェクトに提供された標準のESLint設定に従う -- 教育用に意味のある変数名、関数名を使用 +- 最新のES6+構文を使用 +- プロジェクトに提供された標準ESLint設定に従う +- 教育のために意味のある変数・関数名を使う - 学習者向けにコンセプトを説明するコメントを追加 -- 設定された場合はPrettierでフォーマット +- 設定されている場合はPrettierで整形 ### HTML/CSS - セマンティックなHTML5要素を使用 -- レスポンシブデザインの原則 +- レスポンシブデザインの原則を適用 - 明確なクラス命名規則 -- 学習者向けにCSS技術の説明コメントを付加 +- CSS技術について学習者向けにコメントを付与 ### Python -- PEP 8スタイルガイドラインを遵守 +- PEP 8スタイルガイドラインに従う - 分かりやすく教育的なコード例 -- 学習に役立つ場合は型ヒントを使用 +- 学習支援として型ヒントを使用 -### Markdown Documentation +### Markdownドキュメント - 明確な見出し階層 -- 言語指定をしたコードブロック +- 言語指定ありのコードブロック - 追加リソースへのリンク - `images/`ディレクトリ内のスクリーンショットや画像 -- アクセシビリティのための画像の代替テキスト +- アクセシビリティのための画像のaltテキスト -### File Organization +### ファイル構成 -- レッスンは連番で管理（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}/`構造で管理 -## Build and Deployment +## ビルドとデプロイ -### Quiz App Deployment (Azure Static Web Apps) +### クイズアプリのデプロイ（Azure Static Web Apps） -quiz-appはAzure Static Web Apps向けに設定されています： +quiz-appはAzure Static Web Appsデプロイ向けに構成されています： ```bash cd quiz-app -npm run build # dist/ フォルダを作成します -# main ブランチへのプッシュ時に GitHub Actions ワークフローを通じてデプロイします +npm run build # dist/ フォルダを作成する +# main へのプッシュ時に GitHub Actions ワークフローを通じてデプロイする ``` Azure Static Web Appsの設定： @@ -193,90 +193,90 @@ Azure Static Web Appsの設定： - **Output location**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Documentation PDF Generation +### ドキュメントPDF生成 ```bash -npm install # docsify-to-pdfをインストールする -npm run convert # docsからPDFを生成する +npm install # docsify-to-pdf をインストールする +npm run convert # docs から PDF を生成する ``` -### Docsify Documentation +### Docsifyドキュメント ```bash npm install -g docsify-cli # Docsifyをグローバルにインストールする -docsify serve # localhost:3000で提供する +docsify serve # localhost:3000でサーブする ``` -### Project-specific Builds +### プロジェクト別ビルド -各プロジェクトディレクトリには独自のビルドプロセスがある場合があります： -- Vueプロジェクト： `npm run build` で本番用バンドル作成 -- 静的プロジェクト： ビルドなしで直接ファイルを提供 +各プロジェクトディレクトリに独自のビルドプロセスがある場合あり： +- Vueプロジェクト：`npm run build`で本番用バンドルを作成 +- 静的プロジェクト：ビルド不要でファイル直接配信 -## Pull Request Guidelines +## プルリクエストガイドライン -### Title Format +### タイトル形式 -変更内容が分かりやすいタイトルを使用： -- `[Quiz-app] レッスンX用新規クイズ追加` -- `[Lesson-3] テラリウムプロジェクトの誤字修正` +変更箇所が分かりやすい明確なタイトルを使う： +- `[Quiz-app] レッスンXの新クイズ追加` +- `[Lesson-3] Terrariumプロジェクトのタイプミス修正` - `[Translation] レッスン5のスペイン語翻訳追加` - `[Docs] セットアップ手順更新` -### Required Checks +### 必須チェック PR提出前に： 1. **コード品質**： - - 影響のあるプロジェクトディレクトリで `npm run lint` 実行 + - 該当プロジェクトディレクトリで`npm run lint`実行 - すべての警告・エラーを修正 -2. **ビルド確認**： - - 該当する場合は `npm run build` 実行 +2. **ビルド検証**： + - 適用可能なら`npm run build`を実行 - ビルドエラーなしを確認 3. **リンク検証**： - - すべてのMarkdownリンクをテスト - - 画像参照が機能するか確認 + - 全マークダウンリンクをテスト + - 画像参照が正しいか確認 -4. **内容チェック**： +4. **内容レビュー**： - スペルや文法の校正 - - コード例が正しく教育的であること - - 翻訳が原文の意味を維持していること + - コード例が正しく教育的であることの確認 + - 翻訳が原文の意味を維持しているかチェック -### Contribution Requirements +### コントリビューション要件 -- Microsoft CLAに同意（最初のPR時に自動チェック） -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)に従う -- 詳細は [CONTRIBUTING.md](./CONTRIBUTING.md) を参照 -- PR説明に関連Issue番号を記載（該当時） +- Microsoft CLAに同意（初回PRで自動チェック） +- [Microsoft OSS行動規範](https://opensource.microsoft.com/codeofconduct/)を遵守 +- 詳細は[CONTRIBUTING.md](./CONTRIBUTING.md)参照 +- 必要に応じてPR説明にイシュー番号を記載 -### Review Process +### レビュー手順 -- PRはメンテナーおよびコミュニティがレビュー -- 教育上の分かりやすさを優先 -- コード例は最新のベストプラクティスに準拠していること -- 翻訳は正確さと文化的適合性を確認 +- PRはメンテナとコミュニティによるレビュー +- 教育的明確さを重視 +- コード例は現行のベストプラクティスに準拠 +- 翻訳は正確かつ文化的に適切であることを確認 -## Translation System +## 翻訳システム -### Automated Translation +### 自動翻訳 -- GitHub Actionsのco-op-translatorワークフローを利用 -- 50以上の言語に自動翻訳 -- ソースファイルは主要ディレクトリに配置 -- 翻訳ファイルは `translations/{language-code}/` に配置 +- GitHub Actionsでco-op-translatorワークフローを使用 +- 50以上の言語へ自動翻訳 +- ソースファイルはメインディレクトリに配置 +- 翻訳ファイルは`translations/{language-code}/`に配置 -### Adding Manual Translation Improvements +### 手動翻訳の改善追加 -1. `translations/{language-code}/`内のファイルを見つける -2. 構造を維持しつつ改善を行う -3. コード例が動作し続けることを保証 -4. ローカライズしたクイズ内容をテスト +1. `translations/{language-code}/`内のファイルを特定 +2. 構造を維持しつつ改善を加える +3. コード例が機能する状態を保つ +4. ローカライズされたクイズ内容をテスト -### Translation Metadata +### 翻訳メタデータ -翻訳ファイルにはメタデータヘッダーが含まれます： +翻訳ファイルにはメタデータヘッダーを含む： ```markdown ``` -## Debugging and Troubleshooting +## デバッグとトラブルシューティング -### Common Issues +### よくある問題 -**Quiz appが起動しない場合**： -- Node.jsバージョンを確認（v14+推奨） -- `node_modules` と `package-lock.json` を削除して再度 `npm install` +**クイズアプリが起動しない場合**： +- Node.jsのバージョンを確認（v14以上推奨） +- `node_modules`と`package-lock.json`を削除し再度 `npm install` - ポート競合を確認（デフォルトはViteのポート5173） **APIサーバーが起動しない場合**： -- Node.jsバージョンが要件(node >=10)を満たしているか確認 +- Node.jsのバージョンが必要条件 (node >=10) を満たすか確認 - ポートが既に使用中でないかチェック -- 依存パッケージを `npm install` でインストール済みか確認 +- 依存関係が全て`npm install`でインストール済みか確認 **ブラウザ拡張機能が読み込まれない場合**： -- manifest.jsonの形式が正しいか検証 -- ブラウザのコンソールでエラーを確認 -- ブラウザごとの拡張機能インストール手順に従う +- manifest.json の形式が正しいか確認 +- ブラウザコンソールのエラーをチェック +- ブラウザ固有の拡張インストール手順に従う **Pythonチャットプロジェクトの問題**： -- OpenAIパッケージがインストール済みか確認：`pip install openai` +- OpenAIパッケージがインストールされているか確認：`pip install openai` - GITHUB_TOKEN環境変数が設定されているか確認 -- GitHub Modelsのアクセス権をチェック +- GitHub Modelsへのアクセス許可を確認 -**Docsifyがドキュメントを配信しない場合**： -- docsify-cliをグローバルにインストール：`npm install -g docsify-cli` -- リポジトリルートから実行 -- `docs/_sidebar.md` が存在するか確認 +**Docsifyがドキュメントを提供しない**： +- docsify-cliをグローバルインストール：`npm install -g docsify-cli` +- リポジトリのルートディレクトリで実行 +- `docs/_sidebar.md`が存在するかチェック -### Development Environment Tips +### 開発環境のヒント -- HTMLプロジェクトはVS CodeのLive Server拡張機能を使用 -- 一貫したフォーマットのためESLintとPrettier拡張をインストール +- HTMLプロジェクトにはVS CodeのLive Server拡張を利用 +- ESLintとPrettier拡張をインストールして一貫したフォーマットを維持 - JavaScriptのデバッグにブラウザのDevToolsを活用 - VueプロジェクトにはVue DevToolsブラウザ拡張をインストール -### Performance Considerations +### パフォーマンスに関する注意 -- 50以上の言語の大量翻訳ファイルによりフルクローンは大きい -- コンテンツのみ作業する場合は浅いクローンを使用：`git clone --depth 1` -- 英語コンテンツ作業時は翻訳を検索対象から除外 -- 初回実行時はnpm installやViteビルドで遅延が発生することもある +- 50以上の言語の翻訳ファイルが多いためフルクローンは大容量 +- コンテンツのみ作業するなら浅いクローンを使用：`git clone --depth 1` +- 英語コンテンツ作業時は翻訳ファイルを検索から除外推奨 +- 初回実行時のビルド処理は遅い場合あり（npm install、Viteビルド） -## Security Considerations +## セキュリティに関する注意点 -### Environment Variables +### 環境変数 -- APIキーをリポジトリにコミットしてはいけません -- `.env` ファイルを使用（`.gitignore` に含まれています） -- 必要な環境変数はプロジェクトのREADMEに記述 +- APIキーはリポジトリに絶対コミットしないこと +- `.env`ファイルを利用（既に`.gitignore`に設定済み） +- 必須の環境変数はプロジェクトREADMEに記載 -### Python Projects +### Pythonプロジェクト -- 仮想環境を使用する：`python -m venv venv` -- 依存関係を最新に保つ -- GitHubトークンは最小権限で管理 +- 仮想環境を使用推奨：`python -m venv venv` +- 依存関係は常に最新に保つ +- GitHubトークンは必要最小限の権限で管理 -### GitHub Models Access +### GitHub Modelsアクセス -- GitHub ModelsにはPersonal Access Tokens（PAT）が必要 +- GitHub Models利用には個人アクセストークン（PAT）が必要 - トークンは環境変数として管理 -- トークンや認証情報を絶対にコミットしない +- トークンや資格情報を絶対にコミットしない -## Additional Notes +## 追加ノート -### Target Audience +### 対象ユーザー -- ウェブ開発の完全初心者 -- 学習者および自主学習者 -- 教室でカリキュラムを使用する教師 -- アクセシビリティと段階的なスキルアップを重視した内容 +- Web開発の完全な初心者 +- 学生や独学者 +- 教室でカリキュラムを使う教師 +- アクセシビリティと段階的スキル構築を重視したコンテンツ -### Educational Philosophy +### 教育哲学 - プロジェクトベースの学習アプローチ - 頻繁な知識チェック（クイズ） -- 実践的なコーディング演習 +- ハンズオンコーディング演習 - 実世界の応用例 -- フレームワーク前の基礎重視 +- フレームワーク以前の基礎重視 -### Repository Maintenance +### リポジトリ運用 -- 活発な学習者と貢献者コミュニティ -- 依存関係やコンテンツの定期更新 -- メンテナーによる課題と議論の監視 -- GitHub Actionsを利用した翻訳更新の自動化 +- 活発な学習者とコントリビューターコミュニティ +- 依存関係とコンテンツの定期的な更新 +- イシュー・ディスカッションはメンテナが監視 +- 翻訳更新はGitHub Actionsで自動化 -### Related Resources +### 関連リソース -- [Microsoft Learn modules](https://docs.microsoft.com/learn/) -- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) -- 学習者に推奨される [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) -- その他のコース：生成AI、データサイエンス、機械学習、IoTカリキュラムなど +- [Microsoft Learnモジュール](https://docs.microsoft.com/learn/) +- [Student Hubリソース](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)（学習者に推奨） +- 追加コース：生成AI、データサイエンス、機械学習、IoTカリキュラムなど -### Working with Specific Projects +### 各プロジェクトの作業 -個別プロジェクトの詳細な手順は以下のREADMEを参照： -- `quiz-app/README.md` - Vue 3のクイズアプリ +個別プロジェクトの詳細手順はそれぞれのREADMEを参照： +- `quiz-app/README.md` - Vue 3クイズアプリ - `7-bank-project/README.md` - 認証付きバンキングアプリ - `5-browser-extension/README.md` - ブラウザ拡張機能開発 -- `6-space-game/README.md` - Canvasベースのゲーム開発 +- `6-space-game/README.md` - Canvasベースゲーム開発 - `9-chat-project/README.md` - AIチャットアシスタントプロジェクト -### Monorepo Structure +### モノレポ構成 -伝統的なモノレポではないものの、このリポジトリは複数の独立プロジェクトを含みます： +伝統的なモノレポではありませんが複数独立プロジェクトを含む： - 各レッスンは自己完結型 - プロジェクト間で依存関係を共有しない -- 個別プロジェクトを他に影響なく作業可能 -- カリキュラム全体を体験するにはリポジトリ全体をクローンしてください +- それぞれ別個に作業可能 +- フルカリキュラム体験のためにはリポジトリ全体をクローン --- **免責事項**： -この文書は、AI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されています。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。原文が正式な情報源となります。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の利用により生じたいかなる誤解や誤訳についても、当方は責任を負いかねます。 +本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性に努めておりますが、自動翻訳には誤りや不正確な部分が含まれる場合があります。原文の言語による文書を権威ある情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨いたします。本翻訳の利用により生じた誤解や誤訳について、一切の責任を負いかねますのでご了承ください。 \ No newline at end of file diff --git a/translations/ja/README.md b/translations/ja/README.md index cf279b137..21058ad5d 100644 --- a/translations/ja/README.md +++ b/translations/ja/README.md @@ -10,205 +10,211 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# 初心者向けウェブ開発 - カリキュラム +# はじめてのウェブ開発 - カリキュラム -Microsoft Cloud Advocatesによる12週間の総合コースでウェブ開発の基本を学びましょう。24のレッスンそれぞれで、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じてJavaScript、CSS、HTMLを掘り下げます。クイズ、ディスカッション、実践的な課題も用意。効果的なプロジェクトベースの教授法でスキルを向上し、知識の定着を最適化しましょう。今日からコーディングの旅を始めましょう！ +Microsoft Cloud Advocatesによる全12週間の包括的なコースでウェブ開発の基礎を学びましょう。24の各レッスンは、テラリウムやブラウザ拡張機能、宇宙ゲームといった実践的なプロジェクトを通じてJavaScript、CSS、HTMLを深く掘り下げます。クイズ、ディスカッション、実習課題に取り組みましょう。効果的なプロジェクトベースの教育法でスキルを向上させ、知識の定着を最大化します。今日からコーディングの旅を始めましょう！ -Azure AI Foundry Discordコミュニティに参加 +Azure AI Foundry Discordコミュニティに参加しよう [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -これらのリソースを使い始める手順： -1. **リポジトリをフォーク**：クリック [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **リポジトリをクローン**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Azure AI Foundry Discordに参加して専門家や他の開発者と交流**](https://discord.com/invite/ByRwuEEgH4) +以下の手順でこれらのリソースの利用を始めましょう： +1. **リポジトリをフォークする**：[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)をクリック +2. **リポジトリをクローンする**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Azure AI Foundry Discordに参加し、専門家や開発者仲間と出会う**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 多言語サポート +### 🌐 多言語対応 -#### GitHub Actionで対応（自動かつ常に最新） +#### GitHub Actionsでサポート（自動化＆常に最新） [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](./README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **ローカルでクローンしますか？** - -> このリポジトリには50以上の言語翻訳が含まれているため、ダウンロードサイズが大きくなっています。翻訳なしでクローンするにはスパースチェックアウトを使ってください： +> **ローカルでクローンしたいですか？** +> +> このリポジトリには50以上の言語翻訳が含まれており、ダウンロードサイズが大幅に増加します。翻訳を含めずにクローンするには、スパースチェックアウトを使用してください： +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> これにより、コース完了に必要なすべてがより高速にダウンロードできます。 +> +> **CMD（Windows）:** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> これにより、コースを完了するために必要なすべてがより高速なダウンロードで得られます。 -**追加翻訳言語の希望は[こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)で確認可能です** +**追加の翻訳言語を希望される場合は、[こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)をご覧ください** -[![Visual Studio Codeで開く](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _学生の方へ_ +#### 🧑‍🎓 _学生の方ですか？_ -[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)をご覧ください。初心者向けリソース、学生パック、無料の証明書バウチャー取得方法などがあります。月ごとにコンテンツが入れ替わるので、ブックマークして定期的にチェックすることをお勧めします。 +[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)へアクセスすると、初心者向けの教材、学生パック、無料の証明書バウチャー取得方法などが見つかります。このページをブックマークし、毎月コンテンツが更新されるので定期的にチェックしてください。 -### 📣 お知らせ - 新しいGitHub Copilot Agentモードのチャレンジが追加されました！ +### 📣 お知らせ - 新しいGitHub Copilot Agentモードチャレンジが追加されました！ -多くの章に「GitHub Copilot Agent Challenge 🚀」という新しいチャレンジがあります。GitHub CopilotとAgentモードを使って完了するチャレンジです。Agentモードはテキスト生成だけでなく、ファイル作成・編集、コマンド実行なども可能です。 +多くの章で「GitHub Copilot Agent Challenge 🚀」という新しいチャレンジが追加されています。これはGitHub CopilotとAgentモードを使って完了するチャレンジです。Agentモードを使ったことがない方は、テキスト生成だけでなく、ファイルの作成・編集やコマンドの実行なども可能な機能です。 -### 📣 お知らせ - _新しいGenerative AIを使ったプロジェクト_ +### 📣 お知らせ - 生成AIを使った新プロジェクト -新しいAIアシスタントプロジェクトが追加されました。詳細は[プロジェクト](./9-chat-project/README.md)をご覧ください。 +新しいAIアシスタントプロジェクトが追加されました。こちらの[プロジェクト](./9-chat-project/README.md)をチェックしてください。 -### 📣 お知らせ - _生成AIを使ったJavaScript向けの新カリキュラムをリリース_ +### 📣 お知らせ - JavaScriptの生成AIに関する新カリキュラムがリリースされました -新しい生成AIカリキュラムをぜひお見逃しなく！ +生成AIの新カリキュラムをお見逃しなく！ -開始はこちら：[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) +開始はこちら [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ![Background](../../translated_images/ja/background.148a8d43afde5730.webp) -- 基礎からRAGまでをカバーしたレッスン -- GenAIとコンパニオンアプリで歴史上のキャラクターと対話 -- 楽しく魅力的なストーリーでタイムトラベル！ +- 基礎からRAGまでカバーするレッスン +- GenAIとコンパニオンアプリで歴史上の人物と対話可能 +- 楽しく引き込まれるストーリー、タイムトラベル体験！ ![character](../../translated_images/ja/character.5c0dd8e067ffd693.webp) -各レッスンには課題、理解度チェック、チャレンジが含まれ、以下のようなテーマの学習をサポートします： +各レッスンには課題、理解度チェック、チャレンジが用意されています。学習トピック例： - プロンプトとプロンプトエンジニアリング -- テキストと画像のアプリ生成 +- テキストおよび画像アプリの生成 - 検索アプリ -開始はこちら：[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) +開始はこちら [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ## 🌱 はじめに -> **教師の方へ**、このカリキュラムの使い方について[いくつかの提案](for-teachers.md)を含めています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でご意見をお聞かせください！ +> **先生方へ**、このカリキュラムの使い方に関する[提案](for-teachers.md)を用意しています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でフィードバックをお寄せください！ -**[学習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**は、各レッスンで事前クイズから始め、講義資料を読み、様々なアクティビティを完遂した後、事後クイズで理解度をチェックしましょう。 +**[学習者の皆さん](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**、各レッスンは事前クイズから始め、講義資料の読解、様々なアクティビティの実施、終了後の確認用クイズへと進んでください。 -学習効果を高めるために、仲間とつながってプロジェクトを一緒に進めてください！質問は[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で受け付けており、モデレーターが対応します。 +学習経験を向上させるため、仲間とつながって一緒にプロジェクトに取り組みましょう！ディスカッションは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で推奨しており、モデレーターが質問に対応します。 -さらに学びを深めるために、[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)の追加教材の利用を強く推奨します。 +さらなる学習のために、追加教材がある[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)をぜひご利用ください。 -### 📋 環境設定 +### 📋 開発環境のセットアップ -このカリキュラムはすぐに使える開発環境が整っています！開始時には、[Codespace](https://github.com/features/codespaces/)（ブラウザベース、インストール不要）で実行するか、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディターを使ってローカル実行も可能です。 +このカリキュラムはすぐに使える開発環境を用意しています！開始時には[Codespace](https://github.com/features/codespaces/)（ブラウザベースでインストール不要の環境）で実行するか、お使いのコンピューター上で[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディターを使って実行するか選べます。 -#### リポジトリの作成 +#### リポジトリを作成する +作業を簡単に保存するため、自分のコピーのリポジトリを作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、自分のGitHubアカウントにカリキュラムのコピーが作成されます。 -作業を簡単に保存できるよう、このリポジトリのコピーを作成することをおすすめします。ページ上部の**Use this template**ボタンをクリックすると、あなたのGitHubアカウントにカリキュラムのコピーが新規リポジトリとして作成されます。 +手順はこちら： +1. **リポジトリをフォークする**：ページ右上の「Fork」ボタンをクリックします。 +2. **リポジトリをクローンする**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -手順は以下の通り： -1. **リポジトリをフォーク**：ページ右上の「Fork」ボタンをクリック -2. **リポジトリをクローン**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +#### Codespaceでカリキュラムを実行する -#### Codespaceでカリキュラムを実行 - -作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択。新しいCodespaceが作成され、作業可能になります。 +作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択します。すると作業用の新しいCodespaceが作成されます。 ![Codespace](../../translated_images/ja/createcodespace.0238bbf4d7a8d955.webp) -#### ローカルでカリキュラムを実行 - -ローカル実行にはテキストエディター、ブラウザ、コマンドラインツールが必要です。最初のレッスンである[プログラミング言語と開発ツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)は、複数のツールオプションを紹介し、最適なものを選べるよう案内します。 +#### お使いのコンピューターでカリキュラムを実行する -推奨は、エディターに[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)を使うことです。VS Codeには[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)が内蔵されています。ダウンロードはこちら： +カリキュラムをローカルで実行するには、テキストエディター、ブラウザー、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)で、それぞれのツールの選択肢を説明しています。自分に合ったものを選びましょう。 -[https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) - -1. リポジトリをパソコンにクローンします。**Code**ボタンをクリックし、URLをコピーしてください： +お勧めは、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)のエディター使用で、内蔵の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)が便利です。Visual Studio Codeは[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロードできます。 +1. リポジトリをコンピューターにクローンします。これは **Code** ボタンをクリックしてURLをコピーすることで行えます： [CodeSpace](./images/createcodespace.png) - 次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 内の [ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) を開き、先ほどコピーした URL に `` を置き換えて次のコマンドを実行します: + + 次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 内の [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) を開き、コピーした `` を置き換えて次のコマンドを実行します： ```bash git clone ``` -2. Visual Studio Code でフォルダーを開きます。**ファイル** > **フォルダーを開く** をクリックして、先ほどクローンしたフォルダーを選択します。 +2. Visual Studio Codeでフォルダーを開きます。これには **File** > **Open Folder** をクリックし、先ほどクローンしたフォルダーを選択します。 -> 推奨される Visual Studio Code の拡張機能： +> 推奨されるVisual Studio Code拡張機能： > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 内で HTML ページのプレビューをするため -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書くのをより速く助けるため +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書くのを速く手助けするため -## 📂 各レッスンには以下が含まれます: +## 📂 各レッスンには次が含まれます： - 任意のスケッチノート - 任意の補足ビデオ -- レッスン前のウォームアップクイズ -- 文章によるレッスン -- プロジェクトベースのレッスンの場合は、プロジェクト構築のステップバイステップガイド -- 知識チェック +- 事前レッスンのウォームアップクイズ +- 書かれたレッスン +- プロジェクトベースのレッスンの場合、プロジェクトの作り方の手順付きガイド +- 理解度チェック - チャレンジ - 補足読書 - 課題 -- [レッスン後のクイズ](https://ff-quizzes.netlify.app/web/) +- [ポストレッスンクイズ](https://ff-quizzes.netlify.app/web/) -> **クイズについての注意**: すべてのクイズは Quiz-app フォルダーにあり、合計48のクイズで各クイズは3問あります。[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、クイズアプリはローカルで実行することも Azure にデプロイすることもできます。`quiz-app` フォルダーの指示に従ってください。 +> **クイズについての注意**：すべてのクイズはQuiz-appフォルダーに収められており、合計48の3問クイズがあります。これらは[こちら](https://ff-quizzes.netlify.app/web/)から利用可能で、クイズアプリはローカルで実行するかAzureにデプロイできます。`quiz-app`フォルダー内の指示に従ってください。 ## 🗃️ レッスン一覧 -| | プロジェクト名 | 教える概念 | 学習目標 | リンクされたレッスン | 著者 | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Getting Started | プログラミング入門と業務ツールの概要 | ほとんどのプログラミング言語の基本とプロの開発者が仕事をするのに助けとなるソフトウェアについて学ぶ | [プログラミング言語と業務ツール入門](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Getting Started | GitHubの基本、チームでの作業方法 | プロジェクトでGitHubを使う方法、コードベースでの他者とのコラボレーション方法を学ぶ | [GitHub入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Getting Started | アクセシビリティ | Webアクセシビリティの基本を学ぶ | [アクセシビリティ基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | JavaScriptのデータ型 | JavaScriptのデータ型の基礎を学ぶ | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | JavaScriptによる条件分岐 | 条件分岐メソッドを使ってコードに条件を作成する方法を学ぶ | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | 配列とループ | JavaScriptで配列とループを使ってデータを扱う | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTMLの実践 | オンラインテラリウムを作るHTML構築、レイアウト構築に注力 | [HTML入門](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSSの実践 | オンラインテラリウムをスタイル付けするCSS構築、レスポンシブ対応を含むCSSの基本に注力 | [CSS入門](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptのクロージャ、DOM操作 | ドラッグ＆ドロップ機能を持つテラリウムを作るJavaScript構築、クロージャとDOM操作に注力 | [JavaScriptのクロージャ、DOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | タイピングゲームを作る | キーボードイベントを使ってJavaScriptアプリのロジックを動かす方法 | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ブラウザの動作 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素を作る方法を学ぶ | [ブラウザについて](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | フォーム構築、API呼び出し、ローカルストレージ変数保存 | APIを呼び出すためのブラウザ拡張機能のJavaScript要素構築、ローカルストレージに保存した変数を使用 | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、ウェブパフォーマンス | 拡張機能のアイコン管理のためブラウザのバックグラウンドプロセスを利用、ウェブパフォーマンスと最適化について学ぶ | [バックグラウンドタスクとパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScriptによる高度なゲーム開発 | クラスとコンポジション両方を使った継承とパブ/サブパターンの理解、ゲーム作成の準備として学ぶ | [高度なゲーム開発入門](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するための Canvas API を学ぶ | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | 画面上の要素を動かす | 要素に動きをつけるための直交座標とCanvas APIの使い方を発見 | [要素を動かす](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | 衝突判定 | キープレスを使った要素同士の衝突と反応、ゲーム性能向上のためのクールダウン機能を作る | [衝突判定](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | スコア管理 | ゲームの状態と動作に基づく数学計算を行う | [スコア管理](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | ゲーム終了と再スタート | ゲームの終了と再スタートについて、アセットのクリーンアップや変数のリセットを含む方法を学ぶ | [終了条件](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | WebアプリにおけるHTMLテンプレートとルーティング | ルーティングとHTMLテンプレートを使ってマルチページのウェブサイト構造を作る方法を学ぶ | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | ログインおよび登録フォームの作成 | フォーム作成とバリデーション処理について学ぶ | [フォーム](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | データの取得と利用の方法 | アプリへのデータの流入と流出、フェッチ、保存、破棄方法を学ぶ | [データ](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持し、それをプログラム的に管理する方法を学ぶ | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | VSCodeの使い方 | コードエディターの使い方を学ぶ| [VSCodeコードエディターの使い方](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | AIの活用 | 独自のAIアシスタントの作り方を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris | +| | プロジェクト名 | 学習内容 | 学習目標 | 関連レッスン | 著者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Getting Started | プログラミングの紹介と開発ツールの基礎 | 主要なプログラミング言語の基本的な基礎知識と、プロの開発者が仕事に使うソフトウェアについて学ぶ | [プログラミング言語と開発ツールの紹介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | GitHubの基本、チームでの作業を含む | プロジェクトでGitHubを利用する方法とコードベースで他者と協力する方法 | [GitHubの紹介](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | JavaScriptのデータ型 | JavaScriptのデータ型の基本を学ぶ | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | 関数とメソッド | アプリケーションのロジックの流れを管理する関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS Basics | JSでの条件分岐 | コード内で条件を作る決定手法について学ぶ | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | 配列とループ | JavaScriptで配列やループを使ってデータを操作する方法 | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | 実践的HTML | オンラインテラリウムを作成するためのHTMLを構築し、レイアウトを重視 | [HTMLの紹介](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | 実践的CSS | オンラインテラリウムのスタイリング用CSSを構築し、ページのレスポンシブ化などCSSの基本を学ぶ | [CSSの紹介](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptのクロージャーとDOM操作 | ドラッグ＆ドロップインターフェースとして機能するテラリウムのJavaScriptを構築し、クロージャーとDOM操作に注力 | [クロージャーとDOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | タイピングゲームを作る | キーボードイベントを利用してJavaScriptアプリのロジックを操作する方法 | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ブラウザの仕組み | ブラウザの動作や歴史を学び、ブラウザー拡張機能の最初の要素をスキャフォールドする方法 | [ブラウザについて](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | フォーム構築、API呼び出し、ローカルストレージ変数の利用 | 変数をローカルストレージに保存しAPIを呼び出すブラウザー拡張機能のJavaScript要素を作成 | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、ウェブパフォーマンス | 拡張機能のアイコン管理にブラウザのバックグラウンドプロセスを使い、ウェブパフォーマンスと最適化手法を学ぶ | [バックグラウンドタスクとパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScriptによる高度なゲーム開発 | クラスとコンポジションの継承およびPub/Subパターンについて学び、ゲーム開発の準備をする | [高度なゲーム開発の紹介](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するためのCanvas APIについて学ぶ | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | 画面上での要素の動かし方 | 要素に動きを与えるためのデカルト座標系とCanvas APIの使い方を学ぶ | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | 衝突検知 | 要素を衝突させ、互いに反応させ、パフォーマンスを維持するためのクールダウン機能を提供する方法 | [衝突検知](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | 得点管理 | ゲームの状態とパフォーマンスに基づいた数学的計算を行う | [得点管理](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | ゲームの終了と再開 | アセットのクリーンアップと変数値のリセットを含む、ゲームの終了と再開方法について学ぶ | [終了条件](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | ウェブアプリのHTMLテンプレートとルーティング | 複数ページのウェブサイト構造のスキャフォールディングをルーティングとHTMLテンプレートを使って学ぶ | [HTMLテンプレートとルーティング](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | ログインと登録フォームの構築 | フォーム作成およびバリデーション処理について学ぶ | [フォーム](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | データ取得と使用の方法 | アプリ内でのデータの流れ、取得、保存、破棄の方法を学ぶ | [データ](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | ステート管理の概念 | アプリがステートを保持し、プログラムで管理する方法を学ぶ | [ステート管理](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | VScodeの使い方 | コードエディタの使い方を学ぶ| [VScodeコードエディタの使い方](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | AIを使う | オリジナルのAIアシスタントの作り方を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris | ## 🏫 教育方針 -当カリキュラムは以下の2つの教育原則を軸に設計されています: -* プロジェクトベース学習 -* 頻繁なクイズ +当カリキュラムは次の2つの主要な教育原則を基に設計されています： +* プロジェクトベースの学習 +* 頻繁なクイズ実施 -本プログラムはJavaScript、HTML、CSSの基本に加え、現代のウェブ開発者が使う最新のツールや技術を教えます。学生はタイピングゲーム、仮想テラリウム、環境にやさしいブラウザ拡張機能、スペースインベーダースタイルのゲーム、企業向けバンキングアプリ作成を通じて実践的な経験を積む機会を持てます。シリーズ終了時にはウェブ開発の確かな理解を得られます。 +プログラムはJavaScript、HTML、CSSの基本と、今日のウェブ開発者が使う最新のツールや技術を教えます。学習者はタイピングゲーム、バーチャルテラリウム、環境配慮型ブラウザー拡張機能、スペースインベーダースタイルのゲーム、ビジネス向け銀行アプリ構築を通じて実践経験を積むことができます。シリーズの終了時にはウェブ開発の確固たる理解が得られます。 -> 🎓 このカリキュラムの最初の数レッスンは Microsoft Learn の[ラーニングパス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)としても学べます！ +> 🎓 このカリキュラムの最初の数レッスンはMicrosoft Learnの[Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講可能です！ -コンテンツをプロジェクトに連動させることで、学習者の関与を高め、概念の定着を助けるように設計しています。また、JavaScript基礎のスターターレッスンをいくつか作成し、[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)動画チュートリアルコレクションの一部と組み合わせています。このシリーズの一部の著者も本カリキュラムに寄稿しています。 +内容をプロジェクトに沿わせることで学習者の興味を引きつけ、概念の定着効果を高めます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンと、“[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)”の動画シリーズ（本カリキュラムの著者の一部も関わっている）も組み合わせています。 -さらに、低難度のクラス前クイズで学習への意識を促し、クラス後の第2回クイズで深い定着を促進。フレキシブルで楽しく取り組めるように設計されており、12週間の期間中にプロジェクトが徐々に複雑化していきます。 +さらに、クラス前の低負荷クイズで学習者の学習意欲を高め、クラス後の2回目のクイズで理解の定着を促します。このカリキュラムは柔軟かつ楽しく受講でき、全体または一部を選んで学ぶことができます。プロジェクトは小さなものから始まり、12週間コースの終わりにかけて徐々に複雑になります。 -JavaScriptフレームワークの導入を意図的に避け、ウェブ開発者としての基本スキルを身につけることに集中していますが、カリキュラム修了後の次のステップとしてNode.jsを学ぶための別コレクション動画「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」もお勧めします。 - -> 当プロジェクトの[行動規範](CODE_OF_CONDUCT.md)および[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なご意見を歓迎します！ +フレームワーク導入をあえて避けているため、まずはウェブ開発者としての基本スキルを身につけることに集中できます。次のステップとしては別の動画シリーズ「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」を通じてNode.jsを学ぶことが推奨されます。 +> 当プロジェクトの[行動規範](CODE_OF_CONDUCT.md)と[貢献ガイド](CONTRIBUTING.md)をご覧ください。建設的なフィードバックを歓迎します！ ## 🧭 オフラインアクセス -このドキュメントは [Docsify](https://docsify.js.org/#/) を使ってオフラインで閲覧できます。このリポジトリをフォークし、ローカル環境に [Docsifyをインストール](https://docsify.js.org/#/quickstart)してから、このリポジトリのルートフォルダーで `docsify serve` を実行すると、ウェブサイトがローカルホストの3000番ポートで提供されます: `localhost:3000`。 +[Docsify](https://docsify.js.org/#/)を使うことで、このドキュメントをオフラインで利用できます。このリポジトリをフォークし、ローカルマシンに[Docsifyをインストール](https://docsify.js.org/#/quickstart)した後、リポジトリのルートフォルダーで `docsify serve` コマンドを実行します。ウェブサイトはローカルホストのポート3000で提供されます: `localhost:3000`。 ## 📘 PDF - -すべてのレッスンをまとめたPDFは[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)で入手できます。 +すべてのレッスンのPDFは、[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)で入手できます。 ## 🎒 その他のコース -私たちのチームは他にもコースを制作しています！ぜひご覧ください： + +私たちのチームはその他のコースも制作しています！ぜひご覧ください： ### LangChain @@ -225,7 +231,7 @@ JavaScriptフレームワークの導入を意図的に避け、ウェブ開発 --- -### Generative AI Series +### ジェネレーティブAIシリーズ [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -233,7 +239,7 @@ JavaScriptフレームワークの導入を意図的に避け、ウェブ開発 --- -### Core Learning +### コア学習 [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -244,19 +250,19 @@ JavaScriptフレームワークの導入を意図的に避け、ウェブ開発 --- -### Copilot Series +### Copilotシリーズ [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## ヘルプを得る +## ヘルプを得るには -AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する学習者や経験豊富な開発者と一緒にディスカッションに参加してください。質問が歓迎され、知識が自由に共有されるサポートのあるコミュニティです。 +AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する議論に参加して、仲間の学習者や経験豊富な開発者と交流しましょう。質問歓迎で知識を自由に共有するサポートコミュニティです。 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -製品のフィードバックや構築中のエラーについては、以下へお越しください： +製品のフィードバックや構築中のエラーについては、こちらをご覧ください： [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -268,5 +274,5 @@ AIアプリの構築で行き詰まったり質問がある場合は、MCPに関 **免責事項**： -本書類はAI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性には努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。正確な情報は原文の原言語の書類を正式な情報源としてご参照ください。重要な情報については、専門の人間翻訳をご利用いただくことを推奨します。本翻訳の利用によって生じたいかなる誤解や誤訳に対しても、当方は一切の責任を負いかねます。 +本書類はAI翻訳サービス「Co-op Translator」(https://github.com/Azure/co-op-translator) を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。正式な情報源は原文の原語版となります。重要な情報については、専門の翻訳者による人力翻訳を推奨します。本翻訳の利用により発生した誤解や誤訳について、一切の責任を負いかねます。 \ No newline at end of file diff --git a/translations/ko/.co-op-translator.json b/translations/ko/.co-op-translator.json index 002663178..5b18665d8 100644 --- a/translations/ko/.co-op-translator.json +++ b/translations/ko/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T15:45:22+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T14:41:27+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ko" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:34:37+00:00", + "translation_date": "2026-03-06T14:51:32+00:00", "source_file": "AGENTS.md", "language_code": "ko" }, @@ -516,8 +516,8 @@ "language_code": "ko" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:28:27+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T14:37:22+00:00", "source_file": "README.md", "language_code": "ko" }, diff --git a/translations/ko/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ko/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 0ab432dd6..e2fda8ebf 100644 --- a/translations/ko/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ko/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,117 +1,116 @@ -# 프로그래밍 언어와 최신 개발 도구 소개 +# 프로그래밍 언어 및 최신 개발자 도구 소개 + +안녕, 미래의 개발자! 👋 매일매일 지금도 소름이 돋는 이야기를 하나 해줘도 될까? 프로그래밍은 단순히 컴퓨터에 관한 게 아니야 – 네가 가장 대담한 아이디어를 현실로 만드는 진짜 슈퍼파워를 가지게 되는 거란다! -안녕하세요, 미래의 개발자님! 👋 매일매일 저를 소름 돋게 하는 이야기를 해도 될까요? 프로그래밍은 단지 컴퓨터에 관한 것이 아니라, 여러분의 가장 대담한 아이디어를 현실로 만드는 진짜 초능력을 갖게 되는 거랍니다! +네가 좋아하는 앱을 사용하다가 모든 게 완벽하게 착착 맞아떨어지는 순간을 알지? 버튼을 누르자마자 완전 마법 같은 일이 일어나면서 “와, 그걸 어떻게 한 거야?” 싶은 순간 말이야. 그 마법을 만든 코드를 쓴 사람은 다름 아닌 너와 똑같은 사람일 거야 – 아마도 좋아하는 카페에서 새벽 2시에 세 번째 에스프레소와 함께 앉아 있었겠지. 그리고 이게 네 마음을 완전히 뒤흔들 거야: 이 수업이 끝날 때쯤이면 그들이 어떻게 했는지 이해할 뿐만 아니라, 직접 꼭 해보고 싶어질 거야! -여러분이 좋아하는 앱을 사용할 때 모든 게 딱 맞아떨어지는 순간을 아시나요? 버튼을 누르자마자 “와, 어떻게 이렇게 한 거지?” 싶은 마법 같은 일이 벌어지는 순간을요. 그 마법은 바로 여러분과 같은 사람이, 아마 가장 좋아하는 카페에서 새벽 2시에 세 번째 에스프레소를 마시며 코드를 쓴 결과입니다. 그리고 여러분의 마음을 완전히 흔들어 놓을 사실이 있어요: 이 수업이 끝날 때쯤이면 그들이 어떻게 그걸 만들었는지 이해할 뿐만 아니라 여러분도 직접 시도하고 싶어 할 거예요! +솔직히 말할게, 프로그래밍이 지금은 어렵게 느껴질 수 있다는 거 잘 알아. 내가 처음 시작할 때는 누군가는 수학 천재여야 하거나 다섯 살 때부터 코딩을 해왔어야 한다고 생각했거든. 하지만 내 관점을 완전히 바꿔준 건 이거야: 프로그래밍은 새로운 언어로 대화하는 걸 배우는 것과 똑같아. “안녕” “고마워”부터 시작해서 커피 주문하는 단계까지 가고, 어느새 깊은 철학적 토론까지 하게 되는 거야! 물론 여기서는 컴퓨터와 대화하는 셈인데, 솔직히 말해서 컴퓨터는 네가 만난 대화 상대 중 가장 인내심 많은 친구야 – 절대 실수를 비난하지 않고 언제나 다시 시도할 준비가 되어 있거든! -지금 프로그래밍이 어렵게 느껴진다고 해도 완전히 이해해요. 저도 처음 시작할 때는 수학 천재거나 다섯 살 때부터 코딩하고 있어야 하는 줄 알았거든요. 그런데 제 생각을 완전히 바꾼 건 이것이었어요: 프로그래밍은 새로운 언어로 대화하는 법을 배우는 것과 똑같다는 거죠. “안녕하세요”, “감사합니다”부터 시작해 커피 주문까지 익히고, 어느새 깊은 철학적 대화를 나누는 단계로 가게 되는 거예요! 단, 이번엔 컴퓨터와 대화하는 거고 솔직히? 컴퓨터는 여러분 실수도 안 판단하고 계속 다시 시도할 수 있게 늘 참고 기다려 주는 가장 인내심 많은 대화 상대예요! - -오늘은 최신 웹 개발을 가능하게 할 뿐 아니라 정말 중독성 강한 놀라운 도구들을 탐험할 거예요. 넷플릭스, 스포티파이, 좋아하는 인디 앱 스튜디오의 개발자들이 매일 같이 쓰는 똑같은 편집기, 브라우저, 작업 흐름들을 말이죠. 그리고 여러분이 춤추게 만들 부분: 이 전문적인 수준의 산업 표준 도구들 대부분이 완전 무료라는 사실이에요! +오늘은 현대 웹 개발을 가능하게 하면서도 진짜 중독성 있는 도구들을 탐험할 거야. 내가 말하는 건 Netflix, Spotify, 그리고 네가 좋아하는 인디 앱 스튜디오의 개발자들이 매일매일 사용하는 바로 그 편집기, 브라우저, 작업 흐름들이야. 그리고 네가 신나서 춤추게 할 부분은: 이 전문가용, 업계 표준 도구 대부분이 완전히 무료라는 거야! ![Intro Programming](../../../../translated_images/ko/webdev101-programming.d6e3f98e61ac4bff.webp) -> 스케치노트 by [Tomomi Imura](https://twitter.com/girlie_mac) +> 스케치노트 작성자: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title 오늘 당신의 프로그래밍 여정 section 발견하기 프로그래밍이란 무엇인가: 5: You - 프로그래밍 언어: 4: You + 프로그래밍 언어들: 4: You 도구 개요: 5: You section 탐험하기 코드 편집기: 4: You - 브라우저 및 개발자 도구: 5: You - 명령어 라인: 3: You + 브라우저 & 개발자 도구: 5: You + 명령어 줄: 3: You section 연습하기 언어 탐정: 4: You 도구 탐험: 5: You 커뮤니티 연결: 5: You ``` +## 이미 알고 있는 것을 살펴볼게요! -## 여러분이 이미 알고 있는 걸 볼까요! - -재미있는 걸 시작하기 전에 궁금해요 – 여러분은 프로그래밍 세계에 대해 이미 무엇을 알고 있나요? 그리고 만약 이 질문들을 보면서 “전혀 모르겠는데요”라고 생각해도 괜찮아요, 완벽해요! 지금 이 순간 딱 맞는 자리에 있다는 뜻이에요. 이 퀴즈는 운동 전 스트레칭처럼, 뇌 근육을 준비시키는 워밍업이라 생각하세요! +재미있는 부분으로 뛰어들기 전에, 궁금해요 – 프로그래밍 세계에 대해 이미 무엇을 알고 있나요? 그리고 만약 이 질문들을 보고 “사실 하나도 모르겠어”라고 생각한다면, 그건 완전 괜찮고 오히려 완벽한 상태예요! 그 말은 당신이 바로 적합한 자리에 있다는 뜻이에요. 이 퀴즈는 운동 전에 스트레칭하는 것과 같아요 – 그냥 뇌 근육을 풀어주고 있는 거랍니다! -[수업 전 퀴즈 풀기](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[사전 퀴즈 풀기](https://ff-quizzes.netlify.app/web/) ## 우리가 함께 떠날 모험 -정말로 오늘 탐험할 것들이 너무 흥분돼요! 이 개념들을 이해하는 순간 여러분 표정을 직접 보고 싶을 정도예요. 우리 함께할 엄청난 여정은 다음과 같아요: +자, 지금부터 우리가 탐험할 내용을 정말로 기대하고 있어요! 솔직히 말해서, 어떤 개념이 딱 이해되는 순간 당신 얼굴을 볼 수 있으면 좋겠어요. 우리가 함께할 멋진 여정을 소개할게요: -- **프로그래밍이 실제로 무엇인지(그리고 왜 가장 멋진 일인지!)** – 알람이 어떻게 월요일 아침임을 알아챌 수 있는지, 넷플릭스 추천 알고리즘이 어떻게 완벽하게 맞춰지는지 등, 주변 모든 것을 움직이는 보이지 않는 마법 같은 코드의 힘을 발견할 거예요. -- **프로그래밍 언어와 그 멋진 개성들** – 각기 다른 초능력과 문제 해결 방식이 있는 파티에 들어가는 걸 상상해 보세요. 프로그래밍 언어의 세계가 딱 그렇고, 여러분은 그들과 만나는 걸 좋아하게 될 거예요! -- **디지털 마법을 만드는 기본 조각들** – 궁극의 창의적인 레고 세트라고 생각하세요. 이 조각들이 어떻게 맞물리는지 이해하면 상상하는 건 무엇이든 현실로 만들 수 있다는 걸 알게 될 거예요. -- **마법사의 지팡이를 막 쥔 것 같은 전문 도구들** – 과장 아님! 이 도구들은 진짜 초능력을 가진 느낌을 줄 거예요. 게다가 그 도구들은 프로들이 매일 사용하는 바로 그 도구랍니다! +- **프로그래밍이 실제로 뭔지(그리고 왜 가장 멋진 건지!)** – 왜 코드는 당신 주위 모든 것들을 움직이는 보이지 않는 마법인지를 알아볼 거예요. 그 월요일 아침임을 어떻게 아는지 모를 알람부터 넷플릭스 추천을 완벽하게 맞추는 알고리즘까지 말이에요 +- **프로그래밍 언어와 그 놀라운 개성들** – 각 사람마다 완전히 다른 슈퍼파워와 문제 해결 방식이 있는 파티에 가는 걸 상상해 보세요. 프로그래밍 언어 세계가 바로 그렇고, 당신도 그 친구들을 만나게 될 거예요! +- **디지털 마법을 만드는 기본 빌딩 블록** – 이걸 최고의 창의적인 LEGO 세트라고 생각해 보세요. 이 조각들이 어떻게 맞춰지는지 이해하니 상상하는 거의 모든 것을 만들 수 있다는 걸 알게 될 거예요 +- **마법사의 지팡이를 받은 기분이 들게 할 전문가용 도구** – 과장하는 게 아니라, 이 도구들은 진심으로 슈퍼파워를 얻은 기분이 들게 할 거예요. 그리고 가장 좋은 점? 프로들이 실제로 쓰는 똑같은 도구들이랍니다! -> 💡 **이것만 기억하세요**: 오늘 모든 걸 외우려 하지 마세요! 지금은 무엇이 가능한지에 대한 흥분의 불꽃만 느끼면 충분해요. 세부 사항은 함께 연습하며 자연스럽게 익혀질 거예요 – 그게 진짜 학습 방법이니까요! +> 💡 **한 가지 알려줄게요**: 오늘 모든 걸 외우려고 하지 마세요! 지금은 가능성에 대한 흥분과 기대감을 느끼면 충분해요. 세부 사항은 함께 연습하면서 자연스럽게 익혀질 거예요 – 이게 진짜 학습 방법이니까요! -> 이 수업은 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)에서 들을 수 있어요! +> 이 수업은 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)에서도 수강할 수 있어요! -## 프로그래밍이 도대체 *뭘까?* +## 그럼 프로그래밍이란 *정확히* 무엇일까요? -자, 백만 달러짜리 질문을 해결해 봅시다: 프로그래밍이란 진짜 무엇일까요? +좋아요, 이제 백만 달러짜리 질문에 대해 이야기해 볼게요: 프로그래밍이란 진짜 뭘까요? -제가 프로그래밍을 생각하는 방식을 완전히 바꾼 이야기를 해 줄게요. 지난주에 엄마에게 새 스마트 TV 리모컨 쓰는 법을 설명하려 했는데, “빨간 버튼을 누르는데 큰 빨간 버튼 말고 왼쪽에 있는 작은 빨간 버튼... 아니, 그 쪽 왼쪽... 네, 2초간 누르고 1초 아니고 3초도 아니고...”라고 말하는 걸 발견했어요. 익숙하죠? 😅 +내 생각을 완전히 바꿔준 이야기를 들려줄게요. 지난주에 엄마에게 새로 산 스마트 TV 리모컨 사용법을 설명하려 했어요. “빨간 버튼 눌러, 그런데 큰 빨간 버튼 말고 왼쪽에 작은 빨간 버튼... 아니야, 그 다른 왼쪽... 알았어, 이제 2초간 누르고 있어, 1초도 아니고 3초도 아니고...” 이런 말을 계속 하게 되더라고요. 익숙한가요? 😅 -그게 바로 프로그래밍이에요! 엄청나게 상세하고 단계별로 강력하지만 완벽하게 설명해야 하는 예술이죠. 단지 엄마에게 설명하는 게 아니라(엄마는 “어떤 빨간 버튼?”이라고 물을 수 있지만), 컴퓨터에게 설명하는 거예요(컴퓨터는 여러분이 말한 대로 딱 그걸 하죠, 비록 여러분이 의도한 것과 다를지라도). +바로 그게 프로그래밍이에요! 이것은 엄청나게 상세하고 단계적인 지시를 강력한 무언가에게 주는 기술입니다. 그런데 대신 엄마가 물어볼 수 있는 “어느 빨간 버튼?” 같은 질문이 아니라, 컴퓨터에게 설명하는 거예요. 컴퓨터는 말 그대로 당신이 말한 대로 정확히 실행하는데, 심지어 당신이 의도한 것과 조금 달라도 말이죠. -처음 이걸 배우고 충격 받았던 건 이거예요: 컴퓨터는 본질적으로 매우 단순하다는 사실입니다. 그들은 오직 1과 0, 즉 “예” 아니면 “아니오”, “켜짐”과 “꺼짐”만 이해해요. 그것뿐이죠! 그런데 여기서 마법 같은 점은 우리에게 매트릭스처럼 1과 0으로 말할 필요가 없다는 거예요. 바로 **프로그래밍 언어**가 등장하는 이유죠. 이 언어들은 인간의 생각을 컴퓨터 언어로 변환해 주는 최고의 번역가 같은 존재랍니다. +처음 배울 때 내 마음을 완전히 뒤흔든 게 있었어요: 컴퓨터는 본질적으로 꽤 단순하다는 거예요. 단지 두 가지, 1과 0만 이해해요 – 기본적으로 “예”와 “아니오” 또는 “켜짐”과 “꺼짐” 의미죠. 그게 전부예요! 하지만 여기서 마법 같은 점이 있는데 – 우리가 매트릭스처럼 1과 0만으로 말할 필요가 없다는 거예요. 바로 거기서 **프로그래밍 언어**가 역할을 해 줍니다. 프로그래밍 언어는 당신의 정상적인 인간적 사고를 컴퓨터 언어로 변환해 주는 세계 최고의 통역사와 같아요. -그리고 아침에 일어나면 아직도 온몸에 소름 돋는 이 사실: 여러분 삶의 모든 디지털은 누군가 여러분과 똑같은 사람이 아마 파자마 차림에 커피 한 잔 들고 노트북에 코딩하며 시작했어요. 여러분을 완벽하게 만들어 주는 인스타그램 필터? 누군가 그걸 코딩했죠. 여러분을 새로운 좋아하는 노래로 안내한 추천 알고리즘? 개발자가 만들었어요. 친구들과 식사비를 나누는 앱? 누군가는 “이거 너무 불편해, 내가 고칠 수 있겠다”고 생각했고... 고친 거예요! +그리고 매일 아침 내가 실제로 소름 돋는 것은 이거예요: 당신 생활 속의 모든 디지털은 누군가처럼, 아마 잠옷 차림에 커피 한 잔 들고 노트북 자판을 두드리던 사람이 시작했어요. 당신을 완벽하게 만들어 주는 인스타그램 필터? 누군가 만든 거예요. 당신이 좋아하는 새 노래를 추천한 알고리즘? 개발자가 만든 거죠. 친구들과 식사 비용을 나누는 앱? 네, 누군가 “이거 불편하네, 고칠 수 있겠다”고 생각하고 실제로 만들었답니다! -프로그래밍을 배우면 단순한 기술을 익히는 게 아니라, “세상을 조금 더 나아지게 만드는 무언가를 만들 수 있다면?”이라고 생각하며 문제 해결에 몰두하는 놀라운 커뮤니티의 일원이 되는 거예요. 솔직히, 이보다 멋진 게 있을까요? +프로그래밍을 배울 때, 단순히 새로운 기술을 얻는 게 아니라, 매일 “누군가의 하루를 조금이라도 더 좋게 바꿀 무언가를 만들 수 있을까?”를 고민하는 멋진 문제 해결자 공동체의 일원이 되는 거예요. 솔직히, 그보다 멋진 게 있을까요? -✅ **재미있는 사실 찾기**: 잠시 짬 날 때 시도해 볼 흥미로운 퀴즈 – 세계 최초의 컴퓨터 프로그래머는 누구일까요? 힌트: 여러분이 기대하는 사람이 아닐 수도 있어요! 이 사람의 이야기는 정말 매혹적이고, 프로그래밍이 언제나 창의적 문제 해결과 자유로운 사고에 관한 것이었음을 보여줘요. +✅ **흥미로운 사실 찾기**: 여유가 있을 때 꼭 찾아보세요 – 세계 최초의 컴퓨터 프로그래머가 누군지 아나요? 힌트를 드리자면, 당신이 기대하는 사람이 아닐 수도 있어요! 이분의 이야기는 정말 흥미진진하고 프로그래밍이 언제나 창의적 문제 해결과 발상의 전환에 관한 것임을 보여줘요. -### 🧠 **중간 점검: 기분은 어떤가요?** +### 🧠 **상태 점검: 기분이 어떤가요?** -**잠시 생각해 보세요:** -- “컴퓨터에 명령을 내리는 것”이라는 개념이 이제 이해되나요? -- 일상에서 프로그래밍으로 자동화하고 싶은 작업이 생각나나요? -- 프로그래밍에 대해 궁금한 점이 떠오르나요? +**잠깐만 생각해 봐요:** +- “컴퓨터에게 지시를 주는 것”이라는 개념이 이제 이해가 되나요? +- 일상적인 작업 중 프로그래밍으로 자동화하고 싶은 게 있나요? +- 프로그래밍 전체에 대해 궁금한 점이 떠오르나요? -> **기억하세요**: 지금 조금 헷갈려도 괜찮아요. 프로그래밍은 새 언어 배우기와 같아서 뇌가 그 연결고리를 만들려면 시간이 걸려요. 잘하고 있어요! +> **기억하세요**: 지금 어떤 개념이 헷갈려도 당연해요. 프로그래밍은 새로운 언어를 배우는 것과 같아서 뇌가 그 신경경로를 만들려면 시간이 걸리니까요. 당신은 잘하고 있어요! -## 프로그래밍 언어는 다양한 마법의 맛과 같아요 +## 프로그래밍 언어는 마치 다양한 마법의 맛과 같아요 -이거 좀 이상하게 들릴 수 있지만 끝까지 들어 주세요 – 프로그래밍 언어는 음악 장르와 아주 비슷해요. 재즈는 부드럽고 즉흥적이며, 록은 강력하고 직설적이고, 클래식은 우아하고 구조적이며, 힙합은 창의적이고 표현력이 풍부하죠. 각 스타일은 자신만의 분위기와 열정적인 팬 커뮤니티가 있고, 각기 다른 기분과 상황에 맞춰져 있어요. +이거 이상하게 들릴 수 있지만, 끝까지 들어 봐요 – 프로그래밍 언어는 다양한 음악 장르와 비슷해요. 재즈는 부드럽고 즉흥적이고, 록은 강력하고 직설적이며, 클래식은 우아하고 구조적이고, 힙합은 창의적이고 표현력이 넘치죠. 각 스타일은 고유한 분위기와 열정적인 팬층이 있으며, 다른 기분과 상황에 딱 맞는 장르겠죠. -프로그래밍 언어도 똑같아요! 재미있는 모바일 게임을 만들 때와 방대한 기후 데이터 처리를 할 때 같은 언어를 쓰지 않는 것처럼, 요가 수업에 데스 메탈을 틀지 않는 것과 같아요(어쨌든 대부분의 요가 수업은요! 😄). +프로그래밍 언어도 똑같아요! 엄청난 양의 기후 데이터를 분석하는 데 쓸 언어와 재미있는 모바일 게임을 만드는 데 쓸 언어가 다르듯, 요가 수업에 데스 메탈 음악을 틀지 않는 것과 같답니다(대부분의 요가 수업 말이에요! 😄). -하지만 매번 놀라운 건, 이 언어들은 가장 인내심 많고 똑똑한 통역사가 바로 옆에 앉아 있는 것과 같다는 점이에요. 사람의 창의적인 사고를 자연스럽게 표현하면 그들이 컴퓨터가 이해하는 1과 0으로 복잡한 작업을 모두 처리해 주죠. “인간의 창의력”과 “컴퓨터 논리”에 완벽히 능통한 친구가 바로 그들이에요 – 피곤하지 않고 커피 휴식도 필요 없고, 같은 질문을 다시 해도 절대 판단하지 않는 정말 착한 친구! +하지만 내가 매번 생각할 때마다 진짜 소름 끼치는 점은 이거예요: 이 언어들은 세상에서 가장 인내심 많고 똑똑한 통역사가 바로 옆에 있는 것과 같아요. 사람 뇌에 자연스러운 방식으로 아이디어를 표현하면, 그들이 컴퓨터가 이해하는 1과 0으로 엄청 복잡하게 번역해 줍니다. 마치 “인간의 창의성”과 “컴퓨터 논리” 둘 다 완벽하게 구사하는 친구가 있어서 지치지도 않고, 커피도 안 마시고, 똑같은 질문을 두 번 해도 절대 평가하지 않는 거예요! ### 인기 프로그래밍 언어와 용도 ```mermaid mindmap root((프로그래밍 언어)) - Web Development + 웹 개발 JavaScript 프론트엔드 마법 상호작용 웹사이트 TypeScript - JavaScript + 타입 + 자바스크립트 + 타입 엔터프라이즈 앱 - Data & AI + 데이터 및 AI Python 데이터 과학 - 머신 러닝 + 머신러닝 자동화 R - 통계학 + 통계 연구 - Mobile Apps + 모바일 앱 Java 안드로이드 엔터프라이즈 Swift iOS - 애플 에코시스템 + 애플 생태계 Kotlin 최신 안드로이드 - 크로스플랫폼 - Systems & Performance + 크로스 플랫폼 + 시스템 및 성능 C++ 게임 성능 중요 @@ -122,41 +121,41 @@ mindmap 클라우드 서비스 확장 가능한 백엔드 ``` -| 언어 | 최적 용도 | 인기 이유 | -|----------|----------|--------------| -| **JavaScript** | 웹 개발, 사용자 인터페이스 | 브라우저에서 실행되고 인터랙티브한 웹 사이트 구현 가능 | -| **Python** | 데이터 과학, 자동화, AI | 읽기 쉽고 배우기 쉬우며 강력한 라이브러리 존재 | -| **Java** | 엔터프라이즈 애플리케이션, 안드로이드 앱 | 플랫폼 독립적이고 대규모 시스템에 견고함 | -| **C#** | 윈도우 애플리케이션, 게임 개발 | 강력한 마이크로소프트 에코시스템 지원 | -| **Go** | 클라우드 서비스, 백엔드 시스템 | 빠르고 간단하며 현대 컴퓨팅에 적합 | +| 언어 | 최적 용도 | 인기 있는 이유 | +|----------|----------|------------------| +| **JavaScript** | 웹 개발, 사용자 인터페이스 | 브라우저에서 실행되고 인터랙티브 웹사이트 구동 | +| **Python** | 데이터 과학, 자동화, AI | 배우기 쉽고 읽기 쉬우며 강력한 라이브러리 보유 | +| **Java** | 엔터프라이즈 애플리케이션, 안드로이드 앱 | 플랫폼 독립적, 대규모 시스템에 강력함 | +| **C#** | 윈도우 애플리케이션, 게임 개발 | 마이크로소프트 생태계 강력 지원 | +| **Go** | 클라우드 서비스, 백엔드 시스템 | 빠르고 단순하며 현대 컴퓨팅에 최적화 | -### 고급 언어 vs 저수준 언어 +### 고급 언어 vs 저급 언어 -솔직히 제가 처음 배울 때 가장 혼란스러웠던 개념이라, 이걸 완전히 이해할 수 있게 해 준 비유를 여러분과 나누고 싶어요 – 여러분에게도 도움이 되길 바랍니다! +솔직히 처음 배울 때 이 개념이 내 뇌를 폭발시켰기 때문에, 이걸 나중에야 이해하게 해준 비유를 공유할게요 – 그리고 이게 여러분에게도 도움이 되길 진심으로 바랍니다! -언어를 모르는 나라에 가서 화장실이 급히 필요할 때 상황을 상상해 봅시다(다들 경험 있죠? 😅): +당신이 말을 전혀 못하는 나라에 여행 갔다고 상상해 보세요. 화장실 찾는 게 급한 상황입니다 (우리 모두 겪었죠? 😅): -- **저수준 프로그래밍**은 그 나라 할머니와 문화적 참조, 지역 은어, 그곳에서 자란 사람만 아는 농담까지 섞어 가며 대화할 줄 아는 수준이라고 할 수 있어요. 매우 인상적이고 효율적이지만… 그냥 화장실 찾기엔 너무 부담스러워요. +- **저급 프로그래밍**은 언어를 완벽히 배우고 그 지역 할머니와 문화적 참조, 현지 속어, 지역 농담까지 주고받으며 대화하는 것과 같아요. 엄청 인상적이고 효율적이지만… 화장실 찾는 데는 좀 과한 수준이죠. -- **고급 프로그래밍**은 그 나라 사람처럼 여러분을 이해해 주는 멋진 현지 친구가 옆에 있는 것과 같아요. 여러분이 영어로 “화장실 좀 찾고 싶어요”라고 말하면, 친구가 문화적 번역을 하고 여러분이 이해하기 가장 쉬운 길을 안내해 주는 거죠. +- **고급 프로그래밍**은 마치 그 지역의 멋진 친구가 대신 이해해 주는 것과 같아요. “화장실 어디야?”라고 영어로 말해도, 그 친구가 문화적 차이를 풀어주고 비현지인인 당신에게 딱 맞는 길을 알려줍니다. -프로그래밍 언어 측면에서 보면: -- **저수준 언어** (예: 어셈블리어, C)는 컴퓨터 하드웨어와 정말 상세히 대화할 수 있지만, 기계처럼 생각해야 해서 꽤 큰 사고 전환이 필요해요! -- **고급 언어** (예: JavaScript, Python, C#)는 인간처럼 생각하면서 복잡한 기계어를 백그라운드에서 처리해 줘요. 또한 처음 배웠을 때를 기억하는 따뜻한 커뮤니티가 환영해 줘서 정말 도움돼요! +프로그래밍 용어로 보자면: +- **저급 언어**(예: 어셈블리, C)는 컴퓨터 하드웨어와 매우 상세하게 대화하지만, 기계처럼 생각해야 하는… 엄청 큰 사고 전환이 필요해요! +- **고급 언어**(예: 자바스크립트, 파이썬, C#)는 당신이 인간답게 생각하면서, 그 뒤에서 기계어로 바꾸는 작업을 처리해 줍니다. 뿐만 아니라 새내기 시절을 기억하는 친절한 커뮤니티도 가득해요! -어떤 언어부터 시작하길 권할까요? 😉 고급 언어는 마치 몸에 익힌 보조 바퀴 같아서, 아예 떼고 싶지 않을 만큼 훨씬 즐거운 경험을 선사하는 언어랍니다! +어느 쪽부터 시작하라고 할지 알겠죠? 😉 고급 언어는 트레이닝 휠(보조 바퀴) 같은 거예요. 빼고 싶지도 않을 만큼 훨씬 즐거운 경험을 만듭니다! ```mermaid flowchart TB A["👤 인간의 생각:
'피보나치 수를 계산하고 싶다'"] --> B{언어 수준 선택} - B -->|고수준| C["🌟 JavaScript/Python
읽고 쓰기 쉬움"] - B -->|저수준| D["⚙️ 어셈블리/C
직접 하드웨어 제어"] + B -->|고급 언어| C["🌟 자바스크립트/파이썬
읽고 쓰기 쉬움"] + B -->|저급 언어| D["⚙️ 어셈블리/C
직접 하드웨어 제어"] C --> E["📝 작성: fibonacci(10)"] D --> F["📝 작성: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 컴퓨터 이해:
번역기가 복잡성 처리"] + E --> G["🤖 컴퓨터 이해:
번역기가 복잡성을 처리함"] F --> G G --> H["💻 동일한 결과:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -165,14 +164,13 @@ 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) – 인간 친화적:** @@ -185,32 +183,32 @@ 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}`); - // 수열의 다음 숫자 계산 + // 시퀀스의 다음 숫자 계산 const sum = current + next; current = next; next = sum; } ``` -**여기서 일어나는 일을 분석해 보면:** -- `for` 루프를 사용해 수열의 각 위치를 반복 -- 템플릿 리터럴 형식으로 각 숫자와 위치 표시 -- 현재 값과 다음 값을 더해 다음 피보나치 숫자 계산 -- 다음 반복을 위해 추적 변수 업데이트 +**여기서 무슨 일이 일어나는지 분해해 볼게요:** +- `for` 루프를 사용해 수열의 각 위치를 **반복** +- 템플릿 리터럴 형식으로 각 숫자와 위치를 **출력** +- 현재 값과 다음 값을 더해 새로운 피보나치 수를 **계산** +- 다음 반복을 위해 추적 변수를 **업데이트** ```javascript -// 3단계: 현대 함수형 접근 +// 3단계: 현대적인 함수형 접근법 const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -226,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**위 예시에서 우리는:** -- 최신 화살표 함수 문법으로 재사용 가능한 함수 생성 -- 하나씩 출력하는 대신 전체 수열을 저장하는 배열 생성 -- 배열 인덱싱을 사용해 이전 값들로 새 숫자 계산 -- 프로그램 다른 부분에서 유연하게 쓸 수 있게 전체 수열 반환 +**위 코드에는 다음이 포함돼요:** +- 최신 화살표 함수 문법으로 재사용 가능한 함수 **생성** +- 하나하나 출력하는 대신 전체 수열을 저장하는 배열 **구축** +- 이전 값을 기준으로 새 숫자를 계산하는 배열 인덱싱 **사용** +- 프로그램 다른 부분에서 유연하게 사용하도록 전체 수열 **반환** -**저수준 언어 (ARM 어셈블리) – 컴퓨터 친화적:** +**저급 언어 (ARM 어셈블리) – 컴퓨터 친화적:** ```assembly area ascen,code,readonly @@ -259,62 +257,62 @@ back add r0,r1 end ``` -JavaScript 버전은 영어 명령어처럼 읽히는 반면, 어셈블리 버전은 컴퓨터 프로세서를 직접 제어하는 암호 같은 명령어로 구성되어 있음을 눈치채셨나요? 두 버전 모두 같은 작업을 수행하지만, 고급 언어가 인간이 이해하고 작성하고 유지하는 데 훨씬 쉽다는 점이 핵심 차이입니다. +자바스크립트 버전이 거의 영어 지침처럼 읽히는 반면, 어셈블리 버전은 컴퓨터 프로세서를 직접 제어하는 암호 같은 명령을 사용하는 것을 눈치챘나요? 둘 다 같은 작업을 수행하지만, 고급 언어가 인간이 이해하고 쓰고 유지하기 훨씬 쉽답니다. -**주요 차이점:** -- **가독성**: JavaScript는 `fibonacciCount` 같은 설명적 이름을 사용하는 반면 어셈블리는 `r0`, `r1` 같은 암호 같은 라벨을 사용합니다. -- **주석**: 고급 언어들은 코드를 스스로 문서화하는 설명적인 주석을 권장합니다 -- **구조**: 자바스크립트의 논리적 흐름은 사람들이 문제를 단계별로 생각하는 방식을 닮았습니다 -- **유지보수**: 다양한 요구 사항에 맞춰 자바스크립트 버전을 업데이트하는 것이 직관적이고 명확합니다 +**눈에 띄는 주요 차이점:** +- **가독성**: 자바스크립트는 `fibonacciCount`와 같은 설명적인 이름을 사용하는 반면 어셈블리는 `r0`, `r1`과 같은 암호 같은 레이블을 사용합니다. +- **댓글**: 고급 언어는 코드를 자체 문서화할 수 있도록 설명적인 주석 작성을 장려합니다. +- **구조**: 자바스크립트의 논리적 흐름은 문제를 단계별로 생각하는 인간의 사고 방식과 일치합니다. +- **유지보수**: 다양한 요구사항에 맞게 자바스크립트 버전을 업데이트하는 것은 쉽고 명확합니다. -✅ **피보나치 수열에 관하여**: 이 정말 아름다운 숫자 패턴(각 숫자가 이전 두 수의 합인: 0, 1, 1, 2, 3, 5, 8…)은 자연에서 문자 그대로 *모든 곳*에서 나타납니다! 해바라기 소용돌이, 솔방울 패턴, 노틸러스 껍질이 구부러지는 방식, 심지어 나뭇가지가 자라는 방식에서도 발견할 수 있습니다. 수학과 코드를 통해 자연이 아름다움을 창조하는 패턴을 이해하고 재현할 수 있다는 점은 정말 놀랍습니다! +✅ **피보나치 수열에 대하여**: 이 절대적으로 아름다운 숫자 패턴(각 숫자가 앞의 두 숫자의 합과 같은: 0, 1, 1, 2, 3, 5, 8...)은 자연계에서 문자 그대로 *어디에나* 나타납니다! 해바라기 나선, 솔방울 패턴, 노틸러스 조개의 곡선, 심지어 나뭇가지가 자라는 방식에서도 찾을 수 있습니다. 수학과 코드를 통해 자연이 아름다움을 창조하는 패턴을 이해하고 재현할 수 있다는 사실은 정말 놀랍습니다! -## 마법을 만들어내는 기본 구성 요소들 +## 마법을 만들어내는 기본 구성 요소 -좋아요, 이제 프로그래밍 언어들이 실제로 어떻게 보이는지 봤으니, 지금까지 작성된 거의 모든 프로그램을 구성하는 근본적인 조각들을 분해해봅시다. 이를 좋아하는 요리법의 필수 재료라고 생각하세요 – 각 재료가 하는 일을 이해하면 거의 모든 언어로 코드를 읽고 쓸 수 있을 겁니다! +자, 이제 프로그래밍 언어가 실제로 어떻게 작동하는지 확인했으니, 지금까지 작성된 모든 프로그램을 구성하는 기본 조각들을 분해해 봅시다. 이것들을 여러분이 좋아하는 요리법의 필수 재료라고 생각하세요 – 각각이 무슨 역할을 하는지 이해하면 거의 모든 언어로 코드를 읽고 쓸 수 있게 될 것입니다! -이건 프로그래밍의 문법을 배우는 것과 비슷합니다. 학교에서 명사, 동사, 문장을 어떻게 만드는지 배웠던 기억 나죠? 프로그래밍에도 나름의 문법이 있는데, 솔직히 영어 문법보다 훨씬 논리적이고 너그럽답니다! 😄 +이것은 일종의 프로그래밍 문법을 배우는 것과 같습니다. 학교에서 명사, 동사, 문장 구성 방법을 배웠던 기억이 나나요? 프로그래밍도 나름의 문법이 있는데 솔직히 영어 문법보다 훨씬 논리적이고 관용적입니다! 😄 -### 문장: 단계별 명령 +### 문장(Statements): 단계별 명령어 -먼저 **문장(statements)** 에 대해 이야기해봅시다 – 컴퓨터와 대화하는 개별 문장과 같죠. 각 문장은 컴퓨터에 특정 작업을 수행하라고 알려주는 것으로, "여기서 좌회전해라", "빨간불에서 멈춰라", "저기 주차해라" 같은 지시입니다. +먼저 **문장**부터 시작해 봅시다 – 이들은 컴퓨터와 대화할 때의 개별 문장과 같습니다. 각 문장은 컴퓨터에게 특정 작업 하나를 하도록 지시하는 것이며, "여기서 왼쪽으로 돌기", "빨간불에서 멈추기", "저 공간에 주차하기"와 같은 지시를 주는 것과 비슷합니다. -문장들이 가장 멋진 점은 대개 읽기 쉽다는 거예요. 한번 보세요: +제가 문장에 대해 사랑하는 점은 일반적으로 읽기 쉽다는 것입니다. 한번 보세요: ```javascript -// 단일 동작을 수행하는 기본 명령문 +// 단일 작업을 수행하는 기본 문장들 const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**이 코드가 하는 일은 다음과 같습니다:** -- **상수 변수 선언**하여 사용자의 이름 저장 -- **인사 메시지를** 콘솔 출력에 표시 -- **수학 연산 결과를** 계산하고 저장 +**이 코드는 다음을 수행합니다:** +- 사용자 이름을 저장할 상수 변수 선언 +- 콘솔 출력에 인사 메시지 표시 +- 수학적 연산 결과 계산 및 저장 ```javascript -// 웹 페이지와 상호작용하는 명령문 +// 웹 페이지와 상호작용하는 구문 document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` **단계별로 무슨 일이 일어나는지:** -- **브라우저 탭에 표시되는** 웹페이지 제목을 수정 -- **전체 페이지 본문의** 배경색을 변경 +- 브라우저 탭에 표시되는 웹페이지 제목 수정 +- 페이지 전체 바디의 배경색 변경 -### 변수: 프로그램의 메모리 시스템 +### 변수(Variables): 프로그램의 기억 장치 -좋아요, **변수(variables)** 는 내가 가르치는 것 중 가장 좋아하는 개념 중 하나인데, 일상생활에서 매일 사용하는 것과 아주 비슷하기 때문입니다! +자, **변수**는 정말 제가 가장 좋아하는 개념 중 하나입니다. 왜냐하면 일상에서 여러분이 이미 매일 사용하는 것과 너무 비슷하기 때문입니다! -핸드폰 연락처 목록을 생각해봐요. 모든 전화번호를 외우지 않잖아요 – 대신 "엄마", "베스트 프렌드", "새벽 2시까지 배달하는 피자집" 같은 이름을 저장하고, 핸드폰이 실제 번호를 기억하도록 하죠. 변수가 바로 그런 역할을 합니다! 프로그램이 정보를 저장하고 나중에 의미 있는 이름으로 다시 가져올 수 있는 라벨이 붙은 용기 같은 거예요. +휴대폰 연락처 목록을 잠시 생각해 보세요. 여러분은 모두 전화번호를 외우지 않죠 – 대신에 “엄마”, “친한 친구”, “새벽 2시까지 배달하는 피자집” 같은 이름을 저장하고 휴대폰이 실제 번호를 기억합니다. 변수도 마찬가지입니다! 변수는 프로그램이 정보를 저장하고 의미 있는 이름으로 나중에 다시 불러올 수 있는 라벨이 붙은 컨테이너와 같습니다. -진짜 멋진 점은 변수는 프로그램 실행 중에 바뀔 수 있다는 거예요 (그래서 이름이 '변수'인 거죠 – 이해하셨죠?). 마치 더 좋은 피자집을 발견하면 연락처를 업데이트하는 것처럼, 프로그램이 새로운 정보를 배우거나 상황이 변함에 따라 변수 값도 바뀔 수 있습니다! +정말 멋진 점은 변수는 프로그램이 실행되는 동안 변할 수 있다는 것입니다(그래서 'variable'이라는 이름이 붙었죠). 더 나은 피자집을 발견하면 연락처를 업데이트하는 것처럼, 프로그램이 새로운 정보를 배우거나 상황이 바뀌면 변수도 업데이트할 수 있습니다! -이렇게 얼마나 간단한지 보여줄게요: +이것이 얼마나 간단할 수 있는지 보여 드릴게요: ```javascript -// 1단계: 기본 변수 생성 +// 1단계: 기본 변수 생성하기 const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -322,10 +320,10 @@ let isRaining = false; ``` **이 개념들을 이해하기:** -- **변하지 않는 값들은** `const` 변수에 저장 (예: 사이트 이름) -- **변할 수 있는 값들은** `let`으로 사용 -- **다양한 데이터 타입을 지정하기:** 문자열(텍스트), 숫자, 불리언(true/false) -- **각 변수명이 어떤 내용을 담고 있는지 설명하는** 명확한 이름 선택 +- 변하지 않는 값은 `const` 변수에 저장 (예: 사이트 이름) +- 변할 수 있는 값은 `let` 사용 +- 문자열(텍스트), 숫자, 불리언(true/false) 같은 다양한 데이터 유형 할당 +- 각 변수가 포함하는 내용을 설명하는 이름 선택 ```javascript // 2단계: 관련 데이터를 그룹화하기 위해 객체 작업하기 @@ -336,26 +334,26 @@ const weatherData = { }; ``` -**위 예제에서는:** -- 관련된 날씨 정보를 묶기 위해 객체 생성 -- 하나의 변수 이름 아래 여러 데이터를 구성 -- 각 정보를 명확히 라벨링하는 키-값 쌍 사용 +**위에선:** +- 관련 있는 날씨 정보를 한 곳에 묶기 위해 객체 생성 +- 여러 데이터를 하나의 변수 이름 아래 정리 +- 각 정보 조각을 명확히 라벨링하는 키-값 쌍 사용 ```javascript -// 3단계: 변수 사용 및 업데이트하기 +// 3단계: 변수 사용 및 업데이트 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// 변경 가능한 변수 업데이트하기 +// 변경 가능한 변수 업데이트 currentWeather = "cloudy"; temperature = 68; ``` **각 부분 이해하기:** -- `${}` 문법을 사용한 템플릿 리터럴로 정보 표시 -- 점 표기법 (`weatherData.windSpeed`) 으로 객체 속성 접근 -- `let`으로 선언된 변수 값을 업데이트하여 조건 변화 반영 -- 여러 변수를 조합해 의미 있는 메시지 생성 +- `${}` 문법을 사용하는 템플릿 리터럴로 정보 표시 +- 점(.) 표기법으로 객체 프로퍼티 접근 (`weatherData.windSpeed`) +- 변경 가능한 `let` 변수 업데이트로 상황 반영 +- 여러 변수를 결합해 의미 있는 메시지 생성 ```javascript // 4단계: 더 깔끔한 코드를 위한 최신 구조 분해 @@ -363,20 +361,20 @@ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**꼭 알아두세요:** -- 구조 분해 할당을 사용하여 객체의 특정 속성 추출 -- 객체 키 이름과 같은 이름으로 새 변수 생성 -- 반복적인 점 표기법 사용 줄여 코드 간결화 +**알아두어야 할 점:** +- 구조 분해 할당으로 객체에서 특정 프로퍼티 추출 +- 객체 키와 동일한 이름으로 새 변수 자동 생성 +- 반복적인 점 표기법을 피해 코드 간소화 -### 제어 흐름: 프로그램에 사고하도록 가르치기 +### 제어 흐름(Control Flow): 프로그램에게 사고하는 법 가르치기 -좋아요, 이제 프로그래밍이 정말 신기해지는 순간입니다! **제어 흐름(Control Flow)** 은 기본적으로 프로그램에 스마트한 결정을 내리도록 가르치는 것이며, 여러분이 매일 무의식적으로 하는 것과 같습니다. +여기서 프로그래밍이 진짜 놀라워집니다! **제어 흐름**이란 프로그램에게 똑똑한 판단을 내리도록 가르치는 것으로, 여러분이 매일 생각 없이 하는 바로 그 방식과 같습니다. -예를 들어 오늘 아침에 "비 오면 우산 들고, 추우면 재킷 입고, 늦었으면 아침 건너뛰고 커피 사서 가자" 같은 루틴을 머릿속으로 따라갔겠죠? 우리의 뇌는 이런 if-then(만약 - 그러면) 논리를 하루에도 수십 번 자연스럽게 합니다! +아침에 "비가 오면 우산을 챙기고, 춥다면 재킷을 입고, 늦으면 아침을 거르고 길에서 커피를 산다" 같은 판단을 했을 거예요. 여러분의 두뇌는 매일 이런 if-then 논리를 수십 번 자연스럽게 따릅니다! -이게 바로 프로그램이 지루하고 예측 가능한 스크립트를 단순히 실행하는 대신, 상황을 살피고 평가해서 적절히 반응하도록 만드는 이유입니다. 프로그램에 적응하고 선택할 수 있는 두뇌를 심어주는 거죠! +이런 덕분에 프로그램은 단순히 지루하고 예측 가능한 명령만 수행하는 대신 상황을 보고 무슨 일이 일어나는지 평가하고 적절하게 반응할 수 있어 ‘지능적이고 살아있는’ 것처럼 느껴집니다. 프로그램에게 적응하고 선택할 수 있는 두뇌를 준 셈이죠! -이게 어떻게 멋지게 작동하는지 보고 싶나요? 보여드릴게요: +이게 어떻게 정말 멋지게 작동하는지 보여 드릴게요: ```javascript // 1단계: 기본 조건 논리 @@ -390,14 +388,14 @@ if (userAge >= 18) { } ``` -**이 코드가 하는 일:** -- 사용자의 나이가 투표 자격이 되는지 확인 -- 조건 결과에 따라 서로 다른 코드 블록 실행 -- 18세 미만이면 투표 가능 시점까지 남은 시간 계산 및 표시 -- 각 상황에 맞는 구체적이고 유용한 피드백 제공 +**이 코드는 다음을 수행합니다:** +- 사용자 나이가 투표 요건을 충족하는지 확인 +- 조건 결과에 따라 다른 코드 블록 실행 +- 만 18세 미만일 경우 투표 가능할 때까지 남은 기간 계산 및 표시 +- 각 시나리오에 대해 구체적이고 유용한 피드백 제공 ```javascript -// 단계 2: 논리 연산자를 사용한 여러 조건 +// 2단계: 논리 연산자를 사용한 여러 조건 const userAge = 17; const hasPermission = true; @@ -410,11 +408,11 @@ if (userAge >= 18 && hasPermission) { } ``` -**무슨 일이 일어나는지 분해해보면:** -- `&&` (그리고 연산자)를 사용해 여러 조건 결합 -- 여러 시나리오에 대해 `else if`로 조건 계층화 -- 모든 경우를 처리하는 마지막 `else` 문 작성 -- 서로 다른 상황별로 명확하고 실행 가능한 피드백 제공 +**여기서 일어나는 일 분해:** +- `&&` (그리고) 연산자를 사용해 여러 조건 결합 +- 여러 시나리오를 다루기 위해 `else if`로 조건 계층 구성 +- 마지막 `else` 문으로 모든 경우 처리 +- 각각의 다른 상황에 대해 명확하고 실용적인 피드백 제공 ```javascript // 3단계: 삼항 연산자를 사용한 간결한 조건문 @@ -422,13 +420,13 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**꼭 기억해야 할 점:** -- 간단한 두 옵션 조건에는 삼항 연산자(`? :`) 사용 -- 조건 먼저 쓰고 `?`, 참 반환 값, `:`, 거짓 반환 값 순서 -- 조건에 따른 값 할당이 필요할 때 이 패턴 적용 +**기억해야 할 점:** +- 간단한 두 가지 선택 조건에 삼항 연산자(`? :`) 사용 +- 먼저 조건 작성, 다음에 `?`, 참 결과, `:`, 거짓 결과 순서 +- 조건에 따라 값을 할당할 때 이 패턴 적용 ```javascript -// 4단계: 여러 특정 경우 처리하기 +// 4단계: 여러 특정 사례 처리 const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -448,53 +446,53 @@ switch (dayOfWeek) { } ``` -**이 코드는 다음을 수행:** -- 변수 값을 여러 특정 케이스와 비교 -- 유사한 케이스들을 그룹화 (평일과 주말) -- 일치하는 케이스가 있으면 해당 코드 블록 실행 -- 예기치 않은 값 처리를 위한 `default` 케이스 포함 -- `break` 문으로 다음 케이스로 코드 실행되는 걸 방지 +**이 코드는 다음을 수행합니다:** +- 변수 값을 여러 특정 경우와 비교 +- 유사한 경우를 그룹화(평일 대 주말) +- 일치하는 경우에 적절한 코드 블록 실행 +- 예기치 않은 값을 처리하는 `default` 케이스 포함 +- 다음 경우로 넘어가는 것을 방지하는 `break` 문 사용 -> 💡 **실생활 비유**: 제어 흐름은 세상에서 가장 인내심 많은 GPS가 길을 알려주는 것과 같습니다. "만약 메인 스트리트에 교통 체증이 있으면 고속도로를 이용하세요. 공사가 있어 고속도로가 막히면 경치 좋은 길을 이용하세요." 프로그램도 똑같은 조건부 논리를 사용해 다양한 상황에 지능적으로 반응하고 사용자에게 항상 최고의 경험을 제공합니다. +> 💡 **현실 세계 비유**: 제어 흐름은 가장 인내심 많은 GPS가 길 안내를 하는 것과 같아요. “Main Street에 교통 체증이 있으면 고속도로로 가세요. 고속도로에 공사가 있으면 경치 좋은 길을 시도해 보세요.” 프로그램도 똑같은 조건부 논리를 사용해 상황에 지능적으로 대응하며 항상 사용자에게 최적의 경험을 제공합니다. -### 🎯 **개념 확인: 기본 구성 요소 숙달** +### 🎯 **개념 확인: 기본 구성 요소 숙달하기** -**기본 개념 이해도를 확인해봅시다:** +**기본 개념들을 얼마나 이해했는지 보자:** - 변수와 문장의 차이를 자신만의 말로 설명할 수 있나요? -- if-then 결정문을 쓸 수 있는 현실 세계 시나리오를 생각해보세요 (예: 투표 조건) -- 프로그래밍 논리에서 놀랐던 점이 무엇인지요? +- if-then 결정을 사용할 수 있는 현실 상황을 생각해 봅시다(예: 투표 예시) +- 프로그래밍 논리에서 놀랐던 한 가지는 무엇인가요? -**빠른 자신감 충전:** +**빠른 자신감 부스터:** ```mermaid flowchart LR - A["📝 문장
(명령문)"] --> B["📦 변수
(저장소)"] --> C["🔀 제어 흐름
(결정)"] --> D["🎉 동작하는 프로그램!"] + A["📝 문장
(명령어)"] --> B["📦 변수
(저장소)"] --> C["🔀 제어 흐름
(결정)"] --> D["🎉 작동 프로그램!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **다음에 할 일**: 놀라운 여정을 계속하면서 이 개념들을 더 깊이 파고들 거예요! 지금은 앞으로 펼쳐질 모든 놀라운 가능성에 대해 설렘을 느끼는 데 집중하세요. 구체적인 기술과 기법들은 함께 연습하면서 자연스럽게 습득될 겁니다 – 기대 이상으로 재미있을 거라는 걸 약속합니다! +✅ **다음에 다룰 내용**: 이 엄청난 여정을 함께 계속하면서 이 개념들을 더 깊이 파고들며 정말 즐거운 시간을 보낼 거예요! 지금은 앞에 펼쳐질 놀라운 가능성들에 대한 흥분을 느끼는 데 집중하세요. 구체적인 기술과 기법들은 함께 연습하면서 자연스럽게 익힐 수 있을 거예요 – 이건 분명 기대 이상으로 재미있을 겁니다! -## 업무 도구 +## 도구들 -이번 부분은 정말 너무 신나서 감정을 주체하기 힘들 정도입니다! 🚀 이제 곧 소개할 이 놀라운 도구들은 마치 디지털 우주선의 열쇠를 손에 쥔 기분을 맛보게 해줄 거예요. +자, 이제 제가 감정을 주체할 수 없을 정도로 흥분하는 순간입니다! 🚀 이제 여러분에게 마치 디지털 우주선 열쇠를 막 받은 것처럼 느끼게 해줄 믿을 수 없이 멋진 도구들에 대해 이야기할 거예요. -셰프가 손의 연장처럼 완벽하게 균형 잡힌 칼들을 가지고 있듯이, 혹은 뮤지션이 만지는 순간 노래하는 기타를 가진 것처럼, 개발자들도 우리만의 마법 같은 도구들을 가지고 있는데, 그 중 대부분이 완전히 무료라는 사실! +요리사가 손의 연장처럼 느껴지는 완벽하게 균형 잡힌 칼을 가지고 있거나 음악가가 한 번 만지면 노래하는 기타를 가진 것처럼, 개발자도 이런 마법 같은 도구들을 가지고 있습니다. 그리고 이 도구들의 대부분이 완전히 무료라는 사실이 여러분의 마음을 완전히 뒤흔들 거예요! -이 도구들은 소프트웨어 개발 방식을 완전히 혁신했기에 여러분과 공유할 생각에 의자에서 벌떡 일어날 지경입니다. AI 기반 코딩 도우미가 코드를 작성하도록 도와주고(진짜예요!), 와이파이만 있으면 어디서든 전체 애플리케이션을 개발할 수 있는 클라우드 환경, 그리고 프로그램을 엑스레이처럼 들여다보는 디버깅 도구까지요. +이 도구들을 여러분과 공유하는 생각에 저는 실제로 의자에서 들썩이고 있습니다. 왜냐하면 이 도구들이 우리가 소프트웨어를 만드는 방식을 완전히 혁신했기 때문입니다. AI 기반 코딩 어시스턴트가 코드를 직접 작성해 주고(진심입니다!), 어디서든 Wi-Fi만 있으면 앱을 개발할 수 있는 클라우드 환경, 그리고 프로그램의 X-레이 비전을 제공하는 것처럼 정교한 디버깅 도구들에 대해서 이야기하고 있습니다. -그리고 아직도 소름 돋는 건 이게 초보자용 도구가 아니라는 점입니다. 지금 이 순간 구글, 넷플릭스, 그리고 여러분이 좋아하는 인디 앱 스튜디오에서 사용하는 바로 그 전문 도구들입니다. 사용하면 진짜 프로가 된 기분일 거예요! +그리고 아직도 소름이 돋는 부분은 이것들이 여러분이 곧 써볼 “초급 도구”가 아니라는 점입니다. 구글, 넷플릭스, 여러분이 좋아하는 인디 앱 스튜디오 같은 곳의 개발자들이 바로 지금 이 순간에도 사용하는 그 전문급 도구들이란 점입니다. 여러분도 사용하면 엄청난 프로가 된 기분을 느낄 거예요! ```mermaid graph TD - A["💡 당신의 아이디어"] --> B["⌨️ 코드 편집기
(VS Code)"] + A["💡 당신의 아이디어"] --> B["⌨️ 코드 편집기
(VS 코드)"] B --> C["🌐 브라우저 개발자 도구
(테스트 및 디버깅)"] - C --> D["⚡ 명령줄
(자동화 및 도구)"] + C --> D["⚡ 명령 줄
(자동화 및 도구)"] D --> E["📚 문서
(학습 및 참조)"] - E --> F["🚀 놀라운 웹 앱!"] + E --> F["🚀 멋진 웹 앱!"] - B -.-> G["🤖 AI 어시스턴트
(GitHub Copilot)"] + B -.-> G["🤖 AI 도우미
(GitHub 코파일럿)"] C -.-> H["📱 기기 테스트
(반응형 디자인)"] D -.-> I["📦 패키지 관리자
(npm, yarn)"] E -.-> J["👥 커뮤니티
(Stack Overflow)"] @@ -506,105 +504,106 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 코드 편집기와 IDE: 당신의 새로운 디지털 절친 +### 코드 편집기 및 IDE: 새로운 디지털 베스트 프렌드 -이제 코드 편집기에 대해 이야기해봅시다 – 이게 곧 여러분의 가장 좋아하는 장소가 될 거예요! 개인 코딩 성역처럼, 대부분의 시간을 이곳에서 디지털 창작물을 만들고 다듬게 됩니다. +코드 편집기에 대해 이야기해 봅시다 – 여러분의 새로워질 가장 좋아하는 장소가 될 거예요! 여기서 대부분의 시간을 보내며 디지털 창작물을 만들고 완성하니까요. -현대 편집기의 마법은 단순한 텍스트 편집기를 넘어선다는 것입니다. 24시간 내내 당신 곁에서 가장 똑똑하고 든든한 코딩 멘토가 되어줍니다. 오타를 바로 잡아주고, 천재처럼 보이게 개선안을 제안하며, 코드가 하는 일을 이해하도록 돕고, 때론 당신이 치려는 내용을 예측해 완성까지 해줍니다! +하지만 현대 편집기가 가진 마법 같은 점은 이것들이 단순한 텍스트 편집기가 아니라는 것입니다. 언제나 옆에 앉아 있는 가장 똑똑하고 든든한 코딩 멘토가 있는 것 같습니다. 오타가 생기기도 전에 잡아주고, 천재처럼 보이게 해 주는 개선방안을 제안하며, 코드의 각 부분이 무슨 역할을 하는지 이해할 수 있도록 돕고, 어떤 편집기는 여러분이 타자를 치기 전에 무슨 말을 하려는지 예측해 완성해 주기까지 합니다! -자동 완성 기능을 처음 발견했을 때 미래에 살고 있는 느낌을 받았어요. 뭔가를 치기 시작하면 편집기가 "이 함수 쓰려고 생각 중 아니었니? 네가 필요로 하는 걸 딱 해주는 함수야"라고 말해주는 것 같거든요. 마치 마음을 읽는 코딩 친구가 생긴 느낌이죠! +제가 자동 완성 기능을 처음 발견했을 때는 진짜 미래에 살고 있는 것 같았어요. 뭔가 입력하면 편집기가 "이 함수가 필요한 거 아니야?"라고 말하는 것 같은 느낌이었죠. 마치 마음을 읽는 코딩 친구 같아요! -**이 편집기들이 놀라운 이유는 뭘까요?** +**이 편집기들이 이렇게 대단한 이유:** -최신 코드 편집기는 생산성을 극대화할 다양한 기능을 제공합니다: +현대 코드 편집기는 생산성을 높이도록 설계된 다양한 기능을 제공합니다: -| 기능 | 역할 | 왜 도움이 되는가 | +| 기능 | 역할 | 도움 되는 이유 | |---------|--------------|--------------| -| **구문 강조** | 코드의 다양한 부분을 색으로 구분 | 코드를 더 쉽게 읽고 오류 탐지 가능 | -| **자동 완성** | 타이핑 중 코드 제안 | 코딩 속도 향상 및 오타 감소 | -| **디버깅 도구** | 오류 찾기 및 수정 지원 | 디버깅 시간 크게 절약 | -| **확장 기능** | 전문 기능 추가 가능 | 기술별로 편집기 맞춤화 | -| **AI 도우미** | 코드와 설명 제안 | 학습 및 생산성 가속 | +| **문법 강조** | 코드의 다른 부분에 색상을 입힙니다 | 코드를 읽기 쉽고 오류를 발견하기 쉽게 함 | +| **자동 완성** | 입력하는 코드를 제안함 | 코딩 속도를 높이고 오타를 줄임 | +| **디버깅 도구** | 오류를 찾고 고치는 데 도움 | 문제 해결 시간을 수 시간 단축 | +| **확장 기능** | 특화된 기능 추가 가능 | 어떤 기술에도 맞게 편집기 사용자화 | +| **AI 어시스턴트** | 코드 및 설명 제안 | 학습과 생산성 가속화 | -> 🎥 **동영상 자료**: 이 도구들이 실제로 어떻게 작동하는지 보고 싶다면, [Tools of the Trade 영상](https://youtube.com/watch?v=69WJeXGBdxg) 을 참고하세요. +> 🎥 **비디오 자료**: 이 도구들이 실제로 어떻게 작동하는지 보고 싶다면, [Tools of the Trade 동영상](https://youtube.com/watch?v=69WJeXGBdxg)을 참고하세요. -#### 웹 개발에 추천하는 편집기 +#### 웹 개발 추천 편집기 **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (무료) -- 웹 개발자 사이에서 가장 인기 많음 +- 웹 개발자들 사이에서 가장 인기 있음 - 훌륭한 확장 기능 생태계 -- 내장된 터미널과 Git 통합 -- **필수 확장:** +- 내장 터미널 및 Git 통합 +- **꼭 필요한 확장:** - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI 기반 코드 제안 - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - 실시간 협업 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 자동 코드 포맷팅 - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 코드 오타 잡기 + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 코드 내 오타 잡기 -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (유료, 학생 무료) +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (유료, 학생은 무료) - 고급 디버깅 및 테스트 도구 -- 지능형 코드 완성 기능 -- 내장 버전 관리 지원 +- 지능형 코드 완성 +- 내장 버전 관리 -**클라우드 기반 IDE들** (가격 다양) -- [GitHub Codespaces](https://github.com/features/codespaces) - 브라우저에서 완전한 VS Code +**클라우드 기반 IDE** (다양한 가격) +- [GitHub Codespaces](https://github.com/features/codespaces) - 브라우저 내 완전한 VS Code - [Replit](https://replit.com/) - 학습과 코드 공유에 좋음 -- [StackBlitz](https://stackblitz.com/) - 즉시 사용 가능한 풀스택 웹 개발환경 +- [StackBlitz](https://stackblitz.com/) - 즉시 사용 가능한 풀스택 웹 개발 -> 💡 **시작 팁**: Visual Studio Code부터 시작하세요 – 무료이고 업계에서 널리 쓰이며, 방대한 커뮤니티가 튜토리얼과 확장을 만듭니다. +> 💡 **시작 팁**: Visual Studio Code부터 시작하세요 – 무료고 업계에서 널리 쓰이며 도움 되는 튜토리얼과 확장이 매우 많습니다. -### 웹 브라우저: 비밀스러운 개발 연구소 -자, 이번엔 완전히 놀랄 준비 하세요! 평소 소셜 미디어를 보고 영상 보는 데만 쓰던 브라우저가 사실은 숨겨진 강력한 개발자 연구소 역할을 해왔다는 걸 이제 알게 될 겁니다! +### 웹 브라우저: 비밀 개발 실험실 -웹페이지에서 우클릭하고 “요소 검사”를 선택할 때마다, 사실 여러분은 숨겨진 개발 도구 세트가 열리는 셈입니다. 제가 예전에 수백 달러 주고 샀던 비싼 소프트웨어보다도 더 강력한 도구들이죠. 마치 평범한 부엌 뒤에 전문가 셰프의 실험실이 숨겨져 있었던 걸 발견하는 기분입니다! -처음 누군가가 브라우저 개발자 도구(DevTools)를 보여줬을 때, 저는 무려 세 시간이나 이것저것 눌러보며 "잠깐만요, 이거도 할 수 있다고?!"라고 감탄했어요. 실제로 웹사이트를 실시간으로 편집할 수 있고, 모든 것이 얼마나 빠르게 로드되는지 정확히 볼 수 있으며, 사이트가 다른 기기에서 어떻게 보이는지 테스트할 수 있고, 심지어 JavaScript를 전문가처럼 디버깅할 수 있답니다. 정말 충격적이에요! +자, 이제 정말 놀랄 준비하세요! 여러분은 소셜 미디어를 스크롤하고 동영상을 보려고 브라우저를 사용하고 있었지만, 사실은 이 전체 시간 동안 숨겨진 놀라운 개발자 실험실이 숨어 있었다는 걸 아시나요? 그리고 여러분이 발견하기만을 기다렸죠! -**브라우저가 당신의 비밀 무기인 이유는 다음과 같습니다:** +웹페이지에서 오른쪽 클릭 후 “요소 검사”를 선택할 때마다, 사실 저는 수백 달러를 내고 샀던 몇몇 고가 소프트웨어보다 더 강력한 개발자 도구의 숨겨진 세계를 여는 것입니다. 마치 평범한 주방 뒤에 프로 셰프의 실험실이 비밀 패널 뒤에 숨겨져 있었다는 것을 발견한 것과 같습니다! +누군가 처음으로 브라우저 개발자 도구(DevTools)를 보여줬을 때, 나는 세 시간이나 클릭하며 "잠깐, 이걸도 할 수 있다고?!"라고 놀랐어. 실제로 실시간으로 웹사이트를 편집할 수 있고, 모든 요소가 얼마나 빠르게 로드되는지 정확히 볼 수 있으며, 다양한 장치에서 내 사이트가 어떻게 보이는지 테스트하고, 심지어 자바스크립트를 완전 전문가처럼 디버깅할 수도 있어. 정말 놀라워! -웹사이트나 웹 애플리케이션을 만들 때, 실제 환경에서 어떻게 보이고 작동하는지 확인해야 합니다. 브라우저는 당신의 작업물을 보여줄 뿐만 아니라 성능, 접근성, 잠재적인 문제에 대한 자세한 피드백도 제공합니다. +**브라우저가 당신의 비밀 무기인 이유는 다음과 같아:** -#### 브라우저 개발자 도구(DevTools) +웹사이트나 웹 애플리케이션을 만들 때, 실제 환경에서 어떻게 보이고 작동하는지 확인해야 해. 브라우저는 당신의 작업물을 보여주는 것뿐만 아니라 성능, 접근성, 잠재적인 문제에 대해 자세한 피드백도 제공하지. -현대 브라우저는 포괄적인 개발 툴을 포함합니다: +#### 브라우저 개발자 도구 (DevTools) -| 도구 분류 | 역할 | 사용 사례 | -|---------------|--------------|------------------| -| **요소 검사기(Element Inspector)** | HTML/CSS를 실시간으로 보고 편집 | 스타일을 조정하여 즉시 결과 확인 | -| **콘솔(Console)** | 오류 메시지 확인 및 JavaScript 테스트 | 문제 디버그 및 코드 실험 | -| **네트워크 모니터(Network Monitor)** | 리소스 로드 상태 추적 | 성능 및 로딩 시간 최적화 | -| **접근성 검사기(Accessibility Checker)** | 포용적 디자인 테스트 | 모든 사용자가 사이트를 이용할 수 있도록 보장 | -| **기기 시뮬레이터(Device Simulator)** | 다양한 화면 크기 미리보기 | 여러 기기 없이 반응형 디자인 테스트 | +현대 브라우저는 포괄적인 개발 도구 세트를 포함하고 있어: -#### 개발용으로 추천하는 브라우저 +| 도구 카테고리 | 역할 | 사용 사례 예시 | +|---------------|--------|----------------| +| **요소 검사기** | 실시간으로 HTML/CSS를 보고 편집 | 즉각적인 스타일 조정 결과 확인 | +| **콘솔** | 오류 메시지 확인 및 자바스크립트 테스트 | 문제 디버깅과 코드 실험 | +| **네트워크 모니터** | 리소스 로딩 추적 | 성능과 로딩 시간 최적화 | +| **접근성 검사기** | 포괄적 디자인 테스트 | 모든 사용자를 위한 사이트 보장 | +| **장치 시뮬레이터** | 다양한 화면 크기 미리보기 | 여러 장치 없이 반응형 디자인 테스트 | + +#### 개발용 추천 브라우저 - **[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 개발자 리소스 제공 +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - 훌륭한 CSS Grid 및 접근성 도구 +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - 크로미움 기반, 마이크로소프트의 개발자 리소스 제공 -> ⚠️ **중요 테스트 팁**: 항상 여러 브라우저에서 웹사이트를 테스트하세요! Chrome에서는 완벽하게 작동해도 Safari나 Firefox에서는 다르게 보일 수 있습니다. 전문가 개발자들은 모든 주요 브라우저에서 테스트하여 일관된 사용자 경험을 보장합니다. +> ⚠️ **중요한 테스트 팁**: 항상 여러 브라우저에서 웹사이트를 테스트하세요! Chrome에서 완벽하게 작동해도 Safari나 Firefox에서는 다를 수 있어요. 전문가 개발자들은 모든 주요 브라우저에서 일관된 사용자 경험을 위해 테스트합니다. -### 커맨드 라인 도구: 개발자의 초능력 게이트웨이 +### 커맨드 라인 도구: 개발자 슈퍼파워로 가는 관문 -자, 커맨드 라인에 대해 솔직하게 이야기해볼게요. 저처럼 진심으로 이해하는 사람에게 듣길 바라고요. 처음 봤을 때—그냥 깜빡이는 텍스트가 있는 무서운 검은 화면이었어요—저는 "아니, 절대 안 돼! 이거 1980년대 해커 영화에서나 나올 법한 거고, 나는 절대 똑똑하지 않아!"라고 생각했죠 😅 +자, 커맨드 라인에 대해 솔직한 얘기를 해보자. 내가 진짜로 느낀 걸 말하고 싶어. 처음 봤을 때 — 깜빡이는 텍스트가 있는 무서운 검은 화면 — 나는 사실 이렇게 생각했어, "절대 안 돼! 이건 1980년대 해커 영화에 나오는 거 같고, 나는 절대 이걸 다룰 만큼 똑똑하지 않아!" 😅 -하지만 그때 누군가가 제게 알려줬으면 좋았을 것, 지금 제가 여러분에게 말해주는 건 이겁니다: 커맨드 라인은 무서운 게 아니라, 컴퓨터와 직접 대화하는 것과 같아요. 마치 사진과 메뉴가 있는 고급 앱으로 음식을 주문하는 것(쉽고 편한)과, 당신이 좋아하는 현지 식당에 들어가서 셰프가 당신이 좋아할 완벽한 음식을 “놀라움으로 한 가지 만들어 주세요”라는 말 한 마디로 만들어주는 것의 차이 같아요. +하지만 누군가 그때 내게 알려줬으면 좋았을 걸, 그리고 지금 내가 너에게 말하는 건: 커맨드 라인은 무섭지 않아 — 사실은 컴퓨터와 직접 대화하는 것과 같아. 마치 사진과 메뉴가 있는 세련된 앱으로 음식을 주문하는 것과, 당신이 좋아하는 걸 알고 딱 맞는 요리를 직접 만들어 주는 현지 식당에 가서 "놀라운 걸로 부탁해"라고 말하는 것의 차이라고 생각해 봐. -커맨드 라인은 개발자들이 마법사가 된 것 같은 느낌을 받는 곳입니다. 몇 가지 마법 같은 단어(사실은 그냥 명령어지만 마법적인!)를 입력하고 엔터를 누르면, 프로젝트 구조를 통째로 만들거나 전 세계의 강력한 도구를 설치하거나 수백만 명이 볼 수 있도록 인터넷에 앱을 배포할 수 있죠. 그 힘을 처음 맛본다면 솔직히 중독될 거예요! +커맨드 라인은 개발자들이 마법사처럼 느끼는 곳이야. 마법 같은 단어 몇 개를 타이핑하고 (사실 명령어지만, 마치 마법처럼 느껴져!), 엔터를 누르면, BOOM — 전체 프로젝트 구조를 만들고, 전 세계에서 강력한 도구들을 설치하며, 수백만 명에게 앱을 배포할 수도 있어. 그 힘을 한 번 맛보면, 솔직히 중독될 거야! **커맨드 라인이 당신의 가장 좋아하는 도구가 될 이유:** -그래픽 인터페이스가 많은 작업에 좋지만, 커맨드 라인은 자동화, 정밀함, 속도에서 뛰어납니다. 많은 개발 도구가 주로 커맨드 라인 인터페이스로 작동하며, 이를 효율적으로 사용하는 법을 배우면 생산성이 극적으로 향상됩니다. +그래픽 인터페이스도 훌륭하지만, 커맨드 라인은 자동화, 정밀함, 그리고 속도에서 뛰어나. 많은 개발 도구가 주로 커맨드 라인 인터페이스를 통해 작동하며, 이를 능숙하게 다루면 생산성이 크게 향상돼. ```bash -# 1단계: 프로젝트 디렉토리를 생성하고 이동합니다 +# 1단계: 프로젝트 디렉토리를 생성하고 이동하세요 mkdir my-awesome-website cd my-awesome-website ``` - -**이 코드는 무엇을 할까요:** -- **my-awesome-website**라는 새 디렉토리를 만들어 프로젝트용 공간 마련 -- 새로 만든 디렉토리로 이동하여 작업 시작 + +**이 코드는 다음을 수행해:** +- 프로젝트용으로 "my-awesome-website"라는 새 디렉토리를 생성 +- 새로 생성한 디렉토리로 이동하여 작업 시작 ```bash # 2단계: package.json으로 프로젝트 초기화 @@ -614,243 +613,243 @@ npm init -y npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` - -**단계별 진행 상황:** -- 기본 설정으로 새로운 Node.js 프로젝트 초기화 (`npm init -y`) -- 빠른 개발 및 프로덕션 빌드를 위한 최신 빌드 도구 Vite 설치 -- 자동 코드 포맷터 Prettier와 코드 품질 검사 도구 ESLint 추가 -- 이들을 개발용 의존성으로 표시하기 위해 `--save-dev` 플래그 사용 + +**순서대로 무슨 일이 일어나는지:** +- `npm init -y`로 기본 설정으로 새로운 Node.js 프로젝트 초기화 +- 빠른 개발 및 배포 빌드를 위한 최신 빌드 도구 Vite 설치 +- 자동 코드 형식을 위한 Prettier 추가 및 코드 품질 검사를 위한 ESLint 설치 +- `--save-dev` 플래그를 사용하여 개발 전용 의존성으로 표시 ```bash -# 3단계: 프로젝트 구조 및 파일 생성 +# 3단계: 프로젝트 구조와 파일 생성 mkdir src assets echo 'My Site

Hello World

' > index.html # 개발 서버 시작 npx vite ``` - -**위에서 한 일:** -- 소스 코드와 자산을 위한 별도의 폴더 생성으로 프로젝트 구조화 -- 올바른 문서 구조를 갖춘 기본 HTML 파일 생성 -- 라이브 리로딩과 핫 모듈 교체를 위한 Vite 개발 서버 시작 -#### 웹 개발에 필수적인 커맨드 라인 도구 +**위에서 한 작업:** +- 소스 코드 및 자산용 별도의 폴더를 만들어 프로젝트를 체계화 +- 올바른 문서 구조를 갖춘 기본 HTML 파일 생성 +- 실시간 리로드 및 핫 모듈 교체를 위한 Vite 개발 서버 시작 + +#### 웹 개발 필수 커맨드 라인 도구 -| 도구 | 목적 | 필요성 | +| 도구 | 목적 | 필요한 이유 | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | 버전 관리 | 변경사항 추적, 협업, 백업 | -| **[Node.js & npm](https://nodejs.org/)** | 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 커맨드 라인 +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - 현대적이고 기능이 풍부한 터미널 +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - 강력한 스크립팅 환경 +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - 전통적인 윈도우 커맨드 라인 -**macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 기본 내장 터미널 앱 -- **[iTerm2](https://iterm2.com/)** - 고급 기능을 갖춘 터미널 +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 내장 터미널 앱 +- **[iTerm2](https://iterm2.com/)** - 고급 기능을 갖춘 향상된 터미널 -**Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 표준 Linux 쉘 -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 고급 터미널 에뮬레이터 +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 표준 리눅스 셸 +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 고급 터미널 에뮬레이터 -> 💻 = 운영체제에 기본 설치됨 +> 💻 = 운영체제에 기본 탑재됨 -> 🎯 **학습 경로**: `cd`(디렉토리 이동), `ls` 혹은 `dir`(파일 목록), `mkdir`(폴더 생성) 같은 기본 명령어부터 시작하세요. `npm install`, `git status`, `code .`(현재 폴더를 VS Code로 열기) 같은 최신 워크플로 명령어로 연습하세요. 익숙해지면 자연스럽게 고급 명령어와 자동화 기법을 익히게 될 거예요. +> 🎯 **학습 경로**: `cd` (디렉토리 변경), `ls` 또는 `dir` (파일 목록), `mkdir` (폴더 생성) 같은 기본 명령어부터 시작하세요. `npm install`, `git status`, `code .`(현재 디렉토리를 VS Code로 열기)와 같은 현대 워크플로 명령어로 연습하세요. 익숙해지면 자연스럽게 고급 명령어나 자동화 기법도 익히게 될 겁니다. -### 문서화: 언제나 함께하는 학습 멘토 +### 문서: 언제든지 이용 가능한 학습 멘토 -초보인 당신에게 용기를 줄 작은 비밀을 알려줄게요: 가장 경험 많은 개발자도 엄청난 시간을 문서 읽기에 투자합니다. 그들이 모르는 게 아니라, 오히려 현명하다는 뜻이에요! +자, 초보자라는 사실 때문에 좀 더 마음 편해질 수 있는 비밀을 알려줄게: 가장 경험 많은 개발자들조차도 시간이 나면 문서를 읽는 데 많은 시간을 써. 그들이 모르는 게 있어서가 아니라 사실은 현명하다는 증거야! -문서는 24시간 대기하는 세계 최고의 인내심 있고 해박한 선생님과 같습니다. 새벽 2시에 문제에 막혔나요? 문서는 따뜻하게 가상의 포옹과 딱 맞는 답변을 준비해줘요. 모두가 이야기하는 멋진 새 기능을 배우고 싶나요? 단계별 예제와 함께 도와줘요. 왜 이렇게 동작하는지 이해하고 싶나요? 문서가 드디어 이해시키는 법을 알려줍니다! +문서를 세계에서 가장 인내심 많고 지식이 풍부한 선생님에게 24시간 언제든 접근할 수 있다고 생각해 봐. 새벽 2시에 문제가 생겨도 문서가 따뜻한 가상 포옹과 필요한 정확한 답을 제공해 줘. 모두가 이야기하는 멋진 새 기능을 배우고 싶다면 문서가 단계별 예제와 함께 당신을 도와줘. "왜 이렇게 작동하지?" 궁금할 때도, 문서가 아주 쉽게 이해되도록 설명해 줘. -저의 시각을 완전히 바꾼 점: 웹 개발 세계가 엄청나게 빠르게 움직이며, 누구도(절대 누구도!) 모든 내용을 외우지 않는다는 사실입니다. 15년 이상 경력의 선임 개발자도 기본 구문을 찾아봅니다. 부끄러운 일은 아니고 오히려 똑똑한 것입니다! 완벽한 기억력이 중요한 게 아니라, 신뢰할 수 있는 답을 빠르게 찾고 이를 어떻게 적용할지 아는 게 중요해요. +내 관점을 완전히 바꿔준 한 가지: 웹 개발 세계는 엄청나게 빠르게 변하고, 아무도(정말 아무도) 모든 걸 외우고 있지 않아. 15년 경력의 시니어 개발자도 기본 문법을 찾아보는 걸 봤는데, 그게 부끄러운 게 아니라 똑똑한 거야! 완벽한 기억보다는, 신뢰할 수 있는 답을 빠르게 찾고 응용하는 법을 아는 게 중요하지. -**진짜 마법은 여기서 시작됩니다:** +**진짜 마법은 여기서 시작돼:** -전문 개발자들은 문서를 많이 읽습니다—그들이 모르는 게 아니라, 웹 개발 환경이 너무 빨리 변해 계속 배워야 하니까요. 좋은 문서는 ‘어떻게’뿐 아니라 ‘왜’와 ‘언제’ 사용하는지도 이해시켜 줍니다. +전문가 개발자는 자신이 모르는 게 아니라 웹 개발 환경이 너무 빨리 변화하기 때문에 지속적인 학습을 위해 문서를 많이 읽어. 훌륭한 문서는 *어떻게* 사용하는지 뿐만 아니라 *왜* 그리고 *언제* 사용해야 하는지를 이해하도록 도와줘. #### 필수 문서 리소스 -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- 웹 기술 문서의 금본위 -- HTML, CSS, JavaScript에 대한 종합 가이드 -- 브라우저 호환 정보 포함 -- 실용적인 예제와 인터랙티브 데모 제공 +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- 웹 기술 문서의 황금 표준 +- HTML, CSS, 자바스크립트를 위한 종합 가이드 +- 브라우저 호환 정보 포함 +- 실용적인 예제와 인터랙티브 데모 제공 -**[Web.dev](https://web.dev)** (Google 제공) -- 최신 웹 개발 모범 사례 -- 성능 최적화 가이드 -- 접근성 및 포용적 디자인 원칙 -- 실제 프로젝트 케이스 스터디 +**[Web.dev](https://web.dev)** (Google 제공) +- 현대 웹 개발 모범 사례 +- 성능 최적화 가이드 +- 접근성 및 포괄적 디자인 원칙 +- 실제 프로젝트 사례 연구 -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge 브라우저 개발 리소스 -- 프로그레시브 웹 앱 가이드 -- 크로스플랫폼 개발 인사이트 +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge 브라우저 개발 리소스 +- 프로그레시브 웹 앱 안내서 +- 크로스 플랫폼 개발 인사이트 -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- 체계적인 학습 과정 -- 업계 전문가의 비디오 강의 -- 실습 코딩 연습 +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- 체계적인 학습 커리큘럼 +- 업계 전문가의 영상 강의 +- 실습 코딩 연습 -> 📚 **학습 전략**: 문서를 외우려 하지 말고, 효율적으로 탐색하는 법을 배우세요. 자주 참조하는 자료는 북마크하고, 검색 기능을 활용해 필요한 정보를 빠르게 찾는 연습을 하세요. +> 📚 **학습 전략**: 문서를 외우려 하기보다는 효율적으로 탐색하는 방법을 배우세요. 자주 사용하는 참고 자료는 북마크하고, 검색 기능을 활용해 특정 정보를 빠르게 찾는 연습을 하세요. -### 🔧 **도구 숙련도 점검: 무엇이 와 닿나요?** +### 🔧 **도구 숙련도 점검: 무엇이 당신과 가장 잘 맞나요?** -**잠시 생각해보세요:** -- 가장 먼저 사용해보고 싶은 도구는 무엇인가요? (정답은 없습니다!) -- 커맨드 라인은 아직도 부담스럽나요, 아니면 궁금하신가요? -- 브라우저 DevTools를 써서 좋아하는 웹사이트의 내부를 들여다볼 수 있을 것 같나요? +**잠시 생각해 보세요:** +- 가장 먼저 써보고 싶은 도구는 무엇인가요? (틀린 답은 없어요!) +- 커맨드 라인이 아직도 어렵게 느껴지나요, 아니면 궁금한가요? +- 브라우저 DevTools를 활용해 좋아하는 웹사이트 뒤를 들여다볼 수 있다고 상상해보나요? ```mermaid -pie title "개발자가 도구에 소비한 시간" +pie title "개발자가 도구와 함께 보낸 시간" "코드 편집기" : 40 "브라우저 테스트" : 25 "명령줄" : 15 "문서 읽기" : 15 "디버깅" : 5 -``` -> **재미있는 통찰:** 대부분 개발자는 코드 에디터에서 약 40% 시간을 보내지만, 테스트, 학습, 문제 해결에 쏟는 시간도 엄청납니다. 프로그래밍은 단순히 코드를 쓰는 게 아니라 경험을 만드는 일이에요! +``` +> **재미있는 통찰**: 대부분 개발자는 코드 편집기에서 약 40%의 시간을 보내지만, 테스트하고 배우고 문제를 해결하는 데 얼마나 많은 시간이 쓰이는지 눈여겨보세요. 프로그래밍은 단순히 코드를 쓰는 게 아니라 경험을 만들어 가는 일이에요! -✅ **생각거리:** 웹사이트를 “개발”하는 도구와 “디자인”하는 도구는 어떻게 다를까요? 아름다운 집을 설계하는 건축가와 실제로 짓는 시공사의 차이와 같아요. 둘 다 중요하지만 도구함은 다르죠! 이런 생각이 웹사이트가 어떻게 생겨나는지 더 크게 이해하는 데 도움이 될 겁니다. +✅ **생각거리**: 흥미로운 질문입니다 – 웹사이트를 구축하는 도구(개발)와 디자인하는 도구(디자인)는 어떻게 다를까요? 마치 아름다운 집을 설계하는 건축가와 실제 집을 짓는 시공업자의 차이 같아요. 둘 다 중요하지만 도구 상자가 달라야 하죠! 이런 시각은 웹사이트가 어떻게 탄생하는지 더 잘 이해하는 데 큰 도움이 될 거예요. ## GitHub Copilot 에이전트 챌린지 🚀 -에이전트 모드를 사용해 다음 챌린지를 완료하세요: +Agent 모드를 사용해 다음 챌린지를 완료하세요: -**설명:** 최신 코드 에디터나 IDE의 기능을 탐색하고, 웹 개발자로서 작업 흐름을 어떻게 개선하는지 보여주세요. +**설명:** 현대 코드 편집기나 IDE의 기능을 탐색하고, 그것이 웹 개발자로서의 작업 흐름을 어떻게 개선하는지 시연하세요. -**프롬프트:** Visual Studio Code, WebStorm, 혹은 클라우드 기반 IDE 중 하나를 선택하세요. 코드를 더 효율적으로 작성, 디버깅, 유지하는 데 도움이 되는 세 가지 기능이나 확장 기능을 나열하고, 각각이 작업 흐름에 어떻게 이득을 주는지 간략히 설명하세요. +**프롬프트:** Visual Studio Code, WebStorm, 클라우드 기반 IDE 중 하나를 선택하세요. 코드를 더 효율적으로 작성, 디버그 또는 유지할 수 있게 해주는 세 가지 기능 또는 확장 기능을 나열하고, 각 기능이 작업 흐름에 어떤 도움을 주는지 간단히 설명하세요. --- ## 🚀 챌린지 -**자, 탐정님, 첫 사건 준비되셨나요?** +**자, 탐정님, 첫 사건 준비 되셨나요?** -멋진 기초를 쌓으셨으니, 프로그래밍 세계가 얼마나 다양하고 매력적인지 보여줄 모험이 기다리고 있어요. 그리고 걱정 마세요—아직 코드를 직접 쓰는 게 아니라 흥미진진한 프로그래밍 언어 탐정 역할을 하는 거예요! +지금 훌륭한 기초를 갖췄으니, 프로그래밍 세계가 얼마나 다양하고 매력적인지를 보여줄 모험에 나설 거예요. 그리고 들어보세요 – 아직 코드를 쓰는 것이 아니라 프로그래밍 언어 탐정으로서 첫 흥미진진한 사건을 맡는 셈이니 부담 갖지 마세요! -**당신의 임무, 수락한다면:** -1. **언어 탐험가 되기**: 완전히 다른 세 세계에서 온 세 가지 프로그래밍 언어를 골라보세요 — 웹사이트를 만드는 언어, 모바일 앱을 만드는 언어, 과학자들의 데이터 처리를 위한 언어 등등. 각 언어로 같은 간단한 작업 예제를 찾아보세요. 똑같은 일을 하는데 얼마나 달라 보이는지 정말 놀라실 거예요! +**당신의 임무, 받아들일 준비가 되었다면 :** +1. **언어 탐험가가 되기**: 완전히 다른 세계에서 온 세 가지 프로그래밍 언어를 선택하세요 — 웹사이트 구축용, 모바일 앱 생성용, 과학 데이터 처리를 위한 언어 등. 각 언어로 같은 간단한 작업 예제를 찾아보세요. 같은 일을 하면서도 얼마나 다르게 생겼는지 정말 놀라울 거예요! -2. **기원 이야기 밝히기**: 각 언어가 특별한 이유가 뭘까요? 모든 언어는 “이 특정 문제를 더 잘 해결할 방법이 있어야 한다”는 생각에서 만들어졌어요. 그 문제들이 무엇인지 찾아보세요. 어떤 이야기들은 정말 매력적입니다! +2. **기원 이야기 파헤치기**: 각각의 언어는 무엇이 특별할까요? 재미있는 사실은 모든 프로그래밍 언어는 "음, 이 특정 문제를 해결할 더 나은 방법이 있어야 해"라는 생각에서 만들어졌다는 거예요. 그 문제들이 무엇인지 찾을 수 있을까요? 어떤 이야기는 정말 흥미진진해요! -3. **커뮤니티 만나기**: 각 언어 커뮤니티가 얼마나 환영하는지, 열정적인지도 살펴보세요. 수백만 명의 개발자가 지식과 도움을 나누는 곳도 있고, 작지만 끈끈하고 지원이 강한 곳도 있어요. 각 커뮤니티의 독특한 개성을 발견하는 재미가 쏠쏠할 겁니다! +3. **커뮤니티 만나기**: 각 언어 커뮤니티가 얼마나 환영하고 열정적인지 확인해 보세요. 몇몇은 수백만 명의 개발자가 지식을 공유하고 서로 돕지만, 다른 것은 작지만 매우 끈끈하고 지원적이에요. 다양한 커뮤니티 성격을 보는 것도 재미있을 거예요! -4. **직감 따르기**: 지금 당신에게 가장 친근하게 느껴지는 언어는 무엇인가요? “완벽한” 선택을 하려 하지 말고 직감을 믿으세요! 정답도 틀림도 없고, 나중에 다른 언어도 얼마든지 탐구할 수 있답니다. +4. **직감 따르기**: 지금 가장 친근하게 느껴지는 언어는 무엇인가요? “완벽한” 선택에 대해 스트레스 받지 마세요 — 그냥 당신의 본능을 따라가세요! 여긴 정답이 없고 나중에 언제든 다른 언어를 탐험할 수 있어요. -**보너스 탐정 과제**: 각각의 언어로 만들어진 주요 웹사이트나 앱이 무엇인지 알아보세요. 인스타그램, 넷플릭스, 혹은 계속 손에서 놓을 수 없는 모바일 게임이 어떤 언어로 만들어졌는지 알면 정말 놀랄 거예요! +**보너스 탐정 작업**: 각 언어로 만들어진 주요 웹사이트나 앱이 무엇인지 발견해 보세요. 인스타그램, 넷플릭스, 또는 당신이 못 끊는 모바일 게임이 무엇으로 만들어졌는지 알게 되면 정말 놀랄 거예요! -> 💡 **기억하세요**: 오늘 당장 이 언어들을 전문가 수준으로 배우려는 게 아닙니다. 어디에 자리를 잡을지 결정하기 전, 동네를 미리 둘러보는 거예요. 천천히, 재미있게, 호기심을 따라가세요! +> 💡 **기억하세요**: 오늘 당장 어느 언어의 전문가가 되려는 게 아니에요. 그냥 어디에 자리 잡을지 결정하기 전에 그 동네를 둘러보는 거예요. 천천히 즐기고 호기심을 따라가세요! -## 여러분이 발견한 것을 축하합시다! +## 발견한 것을 축하합시다! -와우, 오늘 엄청난 정보를 흡수하셨네요! 이 놀라운 여정에서 얼마나 많은 내용을 잘 받아들였는지 정말 기대가 돼요. 그리고 기억하세요—이건 완벽해야 하는 시험이 아니에요. 여러분이 탐구하는 이 매혹적인 세계에 대해 배운 모든 멋진 사실을 축하하는 시간입니다! +와우, 오늘 정말 엄청난 정보를 많이 흡수했네요! 이 놀라운 여정의 많은 부분이 여러분과 함께 했기를 진심으로 기대해요. 그리고 기억하세요 – 이건 완벽하게 해야 하는 시험이 아니에요. 여러분이 이 흥미로운 세계에 뛰어들기 전에 배운 모든 멋진 것을 축하하는 시간입니다! [수업 후 퀴즈 풀기](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를 다운받으세요 – 무료고 금방 좋아하게 될 거예요! +- 익스텐션 마켓플레이스를 몇 분 정도 둘러보세요. 코드 편집기용 앱 스토어 같은 곳이에요! +- 브라우저의 개발자 도구(Developer Tools)를 열고 이것저것 클릭해보세요. 모두 이해하려고 애쓰지 말고, 일단 한번 익숙해지는 게 중요해요. **커뮤니티에 참여하기:** -- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), 또는 [GitHub](https://github.com/)의 개발자 커뮤니티를 팔로우하세요. 프로그래밍 커뮤니티는 새내기에게 정말 따뜻하게 맞아줍니다! -- 유튜브에서 초보자 친화적인 코딩 영상을 찾아보세요. 시작할 때의 기분을 잘 아는 멋진 크리에이터들이 많아요. -- 지역 모임이나 온라인 커뮤니티 가입을 고려해 보세요. 개발자들은 새내기 돕는 걸 정말 좋아해요! +- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), [GitHub](https://github.com/) 같은 개발자 커뮤니티를 팔로우하세요. 프로그래밍 커뮤니티는 새내기를 정말 환영해줘요! +- 유튜브에서 초보자 친화적인 코딩 영상을 시청하세요. 시작할 때의 마음을 이해하는 훌륭한 크리에이터가 정말 많답니다. +- 지역 모임이나 온라인 커뮤니티에도 참여해보세요. 개발자들은 새내기를 돕는 일을 정말 좋아해요! -> 🎯 **기억하세요, 제가 드리고 싶은 말은 이겁니다**: 하루아침에 코딩 천재가 될 필요는 없어요! 지금은 이 멋진 새 세계를 알아가는 중이에요. 천천히 하면서 여정을 즐기고, 여러분이 존경하는 모든 개발자들도 처음에는 바로 여러분 자리에서 설레고 약간 부담스러웠다는 걸 기억하세요. 그건 완전히 정상이고, 여러분이 제대로 하고 있다는 의미랍니다! +> 🎯 **중요한 점은 이겁니다**: 단번에 코딩 마법사가 될 필요는 없어요! 지금은 그저 여러분이 곧 속하게 될 멋진 새로운 세상을 천천히 알아가는 중일 뿐이에요. 시간을 갖고, 이 여정을 즐기세요. 그리고 기억하세요 – 여러분이 존경하는 모든 개발자는 한때 바로 여러분과 똑같은 자리에서 신나면서도 약간 벅찬 기분을 느꼈다는 점을요. 그건 아주 정상이고, 여러분이 제대로 하고 있다는 의미입니다! -## 과제 +## Assignment [Reading the Docs](assignment.md) -> 💡 **과제 수행에 드리는 작은 팁**: 지금까지 다루지 않은 도구를 탐색해 보세요! 이미 알던 편집기, 브라우저, 명령줄 도구는 건너뛰고, 활발하게 유지∙관리되고 활기찬 커뮤니티가 있는 놀라운 개발 도구 세상을 탐험해 보세요(멈출 때 친절하게 도움을 받을 수 있는 좋은 튜토리얼과 사람들이 있는 곳이죠). +> 💡 **과제에 대한 작은 격려**: 아직 다뤄보지 않은 도구를 탐험하는 걸 정말 보고 싶어요! 지금까지 얘기했던 에디터, 브라우저, 커맨드라인 도구는 건너뛰고 – 그 밖에 멋진 개발 도구들이 세상에는 엄청나게 많답니다. 꾸준히 관리되고 활발한 커뮤니티가 있는 도구를 찾아보세요(이런 곳이 가장 좋은 튜토리얼이 많고, 막힐 때 친절하게 도움을 받을 수 있어요). --- -## 🚀 여러분의 프로그래밍 여정 타임라인 - -### ⚡ **다음 5분 안에 할 수 있는 것** -- [ ] 관심이 간 2-3개 프로그래밍 언어 사이트를 북마크하기 -- [ ] Visual Studio Code를 아직 다운로드하지 않았다면 설치하기 -- [ ] 브라우저 개발자 도구(F12)를 열고 아무 웹사이트에서 여기저기 클릭해보기 -- [ ] 프로그래밍 커뮤니티 하나 가입하기(Dev.to, Reddit r/webdev, 또는 Stack Overflow) - -### ⏰ **이번 시간 내에 달성할 수 있는 것** -- [ ] 수업 후 퀴즈 완료하고 답변 깊이 생각해보기 -- [ ] GitHub Copilot 확장 프로그램으로 VS Code 설정하기 -- [ ] 온라인에서 두 가지 다른 프로그래밍 언어로 “Hello World” 예제 해보기 -- [ ] 유튜브에서 “개발자의 하루” 영상 시청하기 -- [ ] 탐험 도전 과제에서 프로그래밍 언어 탐정 활동 시작하기 - -### 📅 **일주일간의 모험** -- [ ] 과제를 완료하고 3가지 새로운 개발 도구 탐색하기 -- [ ] 5명의 개발자 또는 프로그래밍 관련 소셜 미디어 계정 팔로우하기 -- [ ] CodePen이나 Replit에서 작은 무언가 만들어보기(“Hello, [당신의 이름]!”라도 좋아요!) -- [ ] 개발자의 코딩 여정에 대한 블로그 포스트 한 개 읽기 -- [ ] 가상 모임 참여하거나 프로그래밍 강연 보기 -- [ ] 온라인 튜토리얼로 선택한 언어 공부 시작하기 - -### 🗓️ **한 달간의 변화** -- [ ] 첫 번째 작은 프로젝트 만들기(간단한 웹페이지도 포함!) -- [ ] 오픈소스 프로젝트에 기여하기(문서 수정부터 시작) -- [ ] 프로그래밍을 막 시작한 누군가를 멘토링하기 +## 🚀 당신의 프로그래밍 여정 타임라인 + +### ⚡ **다음 5분 안에 할 수 있는 일** +- [ ] 관심이 간 프로그래밍 언어 웹사이트 2~3개 즐겨찾기 하기 +- [ ] 아직 설치하지 않았다면 Visual Studio Code 다운로드하기 +- [ ] 브라우저 개발자 도구(F12) 열고 아무 웹사이트 클릭해보기 +- [ ] 프로그래밍 커뮤니티 하나 가입하기 (Dev.to, Reddit r/webdev, Stack Overflow 중 택 1) + +### ⏰ **이번 한 시간 동안 해낼 수 있는 일** +- [ ] 수업 후 퀴즈 풀고 답변에 대해 생각해보기 +- [ ] VS Code에 GitHub Copilot 익스텐션 설치하기 +- [ ] 온라인에서 서로 다른 프로그래밍 언어 2개로 "Hello World" 예제 해보기 +- [ ] 유튜브에서 "개발자의 하루" 영상 보기 +- [ ] 언어 탐정 작업 시작하기 (챌린지 참고) + +### 📅 **한 주 동안의 모험** +- [ ] 과제 완성하고 새로운 개발 도구 3개 탐험하기 +- [ ] 소셜 미디어에서 개발자 또는 프로그래밍 계정 5개 팔로우하기 +- [ ] CodePen 또는 Replit에서 작은 프로젝트 만들어 보기 ("Hello, [Your Name]!"도 좋아요!) +- [ ] 개발자 블로그 하나 읽기 (누군가의 코딩 여정 이야기) +- [ ] 온라인 모임 참여하거나 프로그래밍 강연 시청하기 +- [ ] 선택한 언어로 온라인 튜토리얼 시작하기 + +### 🗓️ **한 달 동안의 변화** +- [ ] 첫 작은 프로젝트 만들기 (간단한 웹페이지도 충분해요!) +- [ ] 오픈소스 프로젝트에 기여하기 (문서 수정부터 시작해도 좋아요) +- [ ] 프로그래밍을 이제 막 시작하는 사람 멘토링하기 - [ ] 개발자 포트폴리오 웹사이트 만들기 -- [ ] 지역 개발자 커뮤니티나 스터디 그룹과 연결되기 +- [ ] 지역 개발자 커뮤니티 또는 스터디 그룹과 연결하기 - [ ] 다음 학습 목표 계획하기 -### 🎯 **최종 반성 및 점검** +### 🎯 **마지막 자기 성찰 점검하기** -**다음 단계로 넘어가기 전에, 잠시 스스로 축하해보세요:** -- 오늘 프로그래밍에서 가장 설레었던 점은 무엇인가요? -- 가장 먼저 탐색하고 싶은 도구나 개념은 무엇인가요? -- 이 프로그래밍 여정을 시작하는 기분은 어때요? -- 지금 당장 개발자에게 묻고 싶은 질문은 무엇인가요? +**다음 단계로 가기 전에 잠시 축하할 시간이에요:** +- 오늘 프로그래밍에서 가장 설레었던 한 가지는 무엇인가요? +- 가장 먼저 탐험하고 싶은 도구나 개념은 무엇인가요? +- 이 프로그래밍 여정을 시작하는 기분은 어떤가요? +- 지금 당장 개발자에게 묻고 싶은 질문 하나는 무엇인가요? ```mermaid journey title 당신의 자신감 구축 여정 section 오늘 - 호기심: 3: You - 압도됨: 4: You - 흥분됨: 5: You + 궁금한: 3: You + 압도된: 4: You + 신나는: 5: You section 이번 주 - 탐색 중: 4: You - 배우는 중: 5: You - 연결 중: 4: You + 탐색하는: 4: You + 배우는: 5: You + 연결하는: 4: You section 다음 달 - 구축 중: 5: You - 자신감 있음: 5: You + 구축하는: 5: You + 자신있는: 5: You 다른 사람 돕기: 5: You ``` -> 🌟 **기억하세요**: 모든 전문가도 처음에는 초보자였습니다. 모든 시니어 개발자도 지금 여러분과 똑같이 설레고 약간은 벅차고, 분명 가능한 일들에 대해 궁금해했었죠. 여러분은 멋진 동료들과 함께 있고, 이 여정은 놀라울 것입니다. 프로그래밍의 멋진 세계에 오신 것을 환영합니다! 🎉 +> 🌟 **기억하세요**: 모든 전문가도 한때는 초보자였어요. 모든 시니어 개발자도 지금 여러분처럼 설레었고, 조금 벅차면서도 가능성을 궁금해하는 마음이 있었답니다. 여러분은 놀라운 사람들과 함께하고 있고, 이 여정은 분명 멋진 경험이 될 거예요. 프로그래밍의 멋진 세계에 오신 걸 환영합니다! 🎉 --- **면책 조항**: -이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 양해해 주시기 바랍니다. 원문 문서가 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. +이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확한 내용이 포함될 수 있음을 유의해 주십시오. 원문은 해당 언어로 작성된 원본 문서를 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우 전문적인 인적 번역을 권장합니다. 본 번역 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. \ No newline at end of file diff --git a/translations/ko/AGENTS.md b/translations/ko/AGENTS.md index 843912762..cf5f3b6a6 100644 --- a/translations/ko/AGENTS.md +++ b/translations/ko/AGENTS.md @@ -2,36 +2,36 @@ ## 프로젝트 개요 -이 저장소는 초보자를 위한 웹 개발 기초 교육을 위한 교육 커리큘럼 저장소입니다. 커리큘럼은 Microsoft Cloud Advocates가 개발한 종합 12주 과정으로, JavaScript, CSS, HTML을 다루는 24개의 실습 수업으로 구성되어 있습니다. +이 저장소는 초보자에게 웹 개발 기본을 가르치기 위한 교육 커리큘럼 저장소입니다. 커리큘럼은 Microsoft Cloud Advocates가 개발한 12주 과정으로, JavaScript, CSS, HTML을 다루는 24개의 실습 중심 수업으로 구성되어 있습니다. ### 주요 구성 요소 -- **교육 콘텐츠**: 프로젝트 기반 모듈로 구성된 24개의 체계적인 수업 -- **실습 프로젝트**: 테라리움, 타이핑 게임, 브라우저 확장, 우주 게임, 뱅킹 앱, 코드 에디터, AI 채팅 도우미 -- **인터랙티브 퀴즈**: 각 3문항씩 48개의 퀴즈 (수업 전/후 평가) -- **다국어 지원**: GitHub Actions를 통한 50개 이상의 언어 자동 번역 +- **교육 콘텐츠**: 프로젝트 기반 모듈로 조직된 24개의 체계적인 수업 +- **실습 프로젝트**: 테라리움, 타자 게임, 브라우저 확장, 우주 게임, 뱅킹 앱, 코드 편집기, AI 채팅 어시스턴트 +- **대화형 퀴즈**: 각 3문항씩 48개의 퀴즈 (수업 전/후 평가) +- **다국어 지원**: GitHub Actions를 통한 50개 이상 언어 자동 번역 - **기술 스택**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI 프로젝트용) ### 아키텍처 - 수업 기반 구조의 교육 저장소 -- 각 수업 폴더에는 README, 코드 예제, 솔루션 포함 -- 별도 디렉터리에 독립 프로젝트 존재 (quiz-app, 다양한 수업 프로젝트) -- GitHub Actions(co-op-translator) 기반 번역 시스템 -- Docsify를 통한 문서 제공 및 PDF 형식도 제공 +- 각 수업 폴더는 README, 코드 예제 및 솔루션 포함 +- 별도의 디렉터리에 독립 프로젝트 존재 (quiz-app, 다양한 수업 프로젝트) +- GitHub Actions(co-op-translator)를 이용한 번역 시스템 +- Docsify를 통한 문서 제공 및 PDF로도 이용 가능 ## 설치 명령어 -이 저장소는 주로 교육 콘텐츠 소비용입니다. 특정 프로젝트 작업을 위해: +이 저장소는 주로 교육 콘텐츠 소비를 위한 것입니다. 특정 프로젝트 작업을 원할 경우: -### 메인 저장소 설치 +### 메인 저장소 설정 ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### 퀴즈 앱 설치 (Vue 3 + Vite) +### 퀴즈 앱 설정 (Vue 3 + Vite) ```bash cd quiz-app @@ -56,7 +56,7 @@ npm run format # Prettier로 포맷팅 ```bash cd 5-browser-extension/solution npm install -# 브라우저별 확장 프로그램 로딩 지침을 따르십시오 +# 브라우저별 확장 프로그램 로딩 지침을 따르세요 ``` ### 우주 게임 프로젝트 @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# index.html을 브라우저에서 열거나 라이브 서버를 사용하세요 +# 브라우저에서 index.html을 열거나 Live Server를 사용하세요 ``` ### 채팅 프로젝트 (Python 백엔드) @@ -72,7 +72,7 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN 환경 변수를 설정하십시오 +# GITHUB_TOKEN 환경 변수를 설정하세요 python api.py ``` @@ -80,29 +80,29 @@ 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) - **퀴즈 앱**: quiz-app 디렉터리에서 `npm run dev` 실행 - **프로젝트**: HTML 프로젝트는 VS Code Live Server 확장 사용 -- **API 프로젝트**: 각 API 디렉터리에서 `npm start` 실행 +- **API 프로젝트**: 해당 API 디렉터리에서 `npm start` 실행 ## 테스트 지침 @@ -110,82 +110,82 @@ python api.py ```bash cd quiz-app -npm run lint # 코드 스타일 문제 확인 -npm run build # 빌드 성공 여부 확인 +npm run lint # 코드 스타일 문제를 확인하세요 +npm run build # 빌드 성공 여부를 검증하세요 ``` ### 뱅크 API 테스트 ```bash cd 7-bank-project/api -npm run lint # 코드 스타일 문제를 확인하세요 -node server.js # 서버가 오류 없이 시작되는지 확인하세요 +npm run lint # 코드 스타일 문제 확인 +node server.js # 오류 없이 서버가 시작되는지 확인 ``` -### 일반 테스트 접근법 +### 일반 테스트 방식 -- 이 저장소는 포괄적인 자동 테스트가 없는 교육용 저장소입니다. -- 수동 테스트는 다음에 집중합니다: - - 코드 예제가 오류 없이 실행되는지 - - 문서 내 링크가 정상 작동하는지 - - 프로젝트 빌드가 성공적으로 완료되는지 - - 예제가 모범 사례를 따르는지 +- 이 저장소는 포괄적인 자동화 테스트가 없는 교육 저장소입니다 +- 수동 테스트는 다음에 중점: + - 코드 예제 오류 없이 실행 + - 문서 내 링크 정상 작동 + - 프로젝트 빌드 성공 완료 + - 예제는 베스트 프랙티스 준수 -### 제출 전 점검 사항 +### 사전 제출 점검 - package.json 있는 디렉터리에서 `npm run lint` 실행 -- 마크다운 링크가 유효한지 확인 -- 브라우저 또는 Node.js에서 코드 예제 테스트 -- 번역본이 구조를 유지하는지 확인 +- 마크다운 링크 유효성 확인 +- 브라우저나 Node.js에서 코드 예제 테스트 +- 번역 내용이 올바른 구조 유지하는지 점검 -## 코드 스타일 가이드 +## 코드 스타일 지침 -### 자바스크립트 +### JavaScript - 최신 ES6+ 문법 사용 -- 프로젝트에 제공된 표준 ESLint 설정 따름 -- 교육용 명확성을 위한 의미 있는 변수 및 함수명 사용 -- 개념 설명을 위한 주석 추가 -- 설정된 경우 Prettier로 포맷팅 +- 프로젝트에 제공된 표준 ESLint 설정 준수 +- 교육적 명확성을 위한 의미 있는 변수 및 함수명 사용 +- 학습자를 위한 개념 설명 주석 추가 +- 구성된 경우 Prettier로 포맷팅 ### HTML/CSS -- 의미 있는 HTML5 요소 사용 +- 시맨틱 HTML5 요소 사용 - 반응형 디자인 원칙 적용 - 명확한 클래스 명명 규칙 -- CSS 기술 설명 주석 +- 학습자용 CSS 기술 설명 주석 -### 파이썬 +### Python - PEP 8 스타일 가이드 준수 - 명확하고 교육적인 코드 예제 -- 학습에 도움이 되는 경우 타입 힌트 사용 +- 학습에 도움이 되는 타입 힌트 추가 -### 마크다운 문서 +### 마크다운 문서화 - 명확한 제목 계층 구조 - 언어 지정 코드 블록 -- 추가 자료로의 링크 포함 +- 추가 자료 링크 제공 - `images/` 디렉터리 내 스크린샷 및 이미지 -- 접근성을 위한 이미지 대체 텍스트 +- 접근성 위한 이미지 대체 텍스트 포함 ### 파일 구성 -- 수업은 순차적으로 번호 매김 (1-getting-started-lessons, 2-js-basics 등) +- 수업은 순차 번호 매김 (1-getting-started-lessons, 2-js-basics 등) - 각 프로젝트는 `solution/`과 종종 `start/` 또는 `your-work/` 디렉터리 포함 -- 이미지는 수업별 `images/` 폴더에 저장 -- 번역은 `translations/{language-code}/` 구조 +- 수업별 `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/ 폴더를 생성합니다 -# main 브랜치에 푸시할 때 GitHub Actions 워크플로우를 통해 배포합니다 +# main 브랜치에 푸시할 때 GitHub Actions 워크플로를 통해 배포합니다 ``` Azure Static Web Apps 구성: @@ -203,37 +203,37 @@ npm run convert # docs에서 PDF 생성 ### Docsify 문서 ```bash -npm install -g docsify-cli # Docsify를 전역으로 설치 -docsify serve # localhost:3000에서 서비스 +npm install -g docsify-cli # Docsify를 전역으로 설치합니다 +docsify serve # localhost:3000에서 서비스합니다 ``` ### 프로젝트별 빌드 -각 프로젝트 디렉터리에는 별도의 빌드 프로세스가 있을 수 있음: +각 프로젝트 디렉터리는 자체 빌드 프로세스 가질 수 있음: - Vue 프로젝트: `npm run build`로 프로덕션 번들 생성 -- 정적 프로젝트: 빌드 단계 없이 직접 파일 제공 +- 정적 프로젝트: 빌드 단계 없이 파일 직접 서빙 -## 풀 리퀘스트 가이드라인 +## 풀 리퀘스트 지침 ### 제목 형식 -변경 영역을 명확하고 서술적으로 표시: -- `[Quiz-app] 새로운 퀴즈 추가 - 수업 X` +변경 영역을 명확히 나타내는 제목 사용: +- `[Quiz-app] 레슨 X용 새 퀴즈 추가` - `[Lesson-3] 테라리움 프로젝트 오타 수정` -- `[Translation] 수업 5 스페인어 번역 추가` +- `[Translation] 레슨 5 스페인어 번역 추가` - `[Docs] 설치 지침 업데이트` -### 필요한 점검 사항 +### 필수 점검 사항 PR 제출 전: 1. **코드 품질**: - 관련 프로젝트 디렉터리에서 `npm run lint` 실행 - - 모든 린트 오류 및 경고 수정 + - 모든 린트 오류와 경고 수정 -2. **빌드 검증**: - - 적용 가능한 경우 `npm run build` 실행 - - 빌드 오류 없는지 확인 +2. **빌드 확인**: + - 해당 시 `npm run build` 실행 + - 빌드 오류 없음 확인 3. **링크 검증**: - 마크다운 내 모든 링크 테스트 @@ -241,22 +241,22 @@ PR 제출 전: 4. **콘텐츠 검토**: - 맞춤법 및 문법 교정 - - 코드 예제가 정확하고 교육적임 확인 - - 번역이 원문 의미 유지하는지 검증 + - 코드 예제 정확하고 교육적임 확인 + - 번역이 원문의 의미 유지하는지 검증 -### 기여 조건 +### 기여 요건 -- Microsoft CLA 동의 (첫 PR 시 자동 검사) +- Microsoft CLA 동의(첫 PR 자동 검사) - [Microsoft 오픈 소스 행동 강령](https://opensource.microsoft.com/codeofconduct/) 준수 -- 자세한 가이드는 [CONTRIBUTING.md](./CONTRIBUTING.md) 참조 -- PR 설명에 이슈 번호 포함 시 명기 +- 상세 지침은 [CONTRIBUTING.md](./CONTRIBUTING.md) 참고 +- 가능 시 PR 설명에 이슈 번호 참조 -### 검토 프로세스 +### 리뷰 프로세스 - PR은 유지 관리자 및 커뮤니티가 검토 - 교육적 명확성 우선시 -- 코드 예제는 최신 모범 사례 따라야 함 -- 번역은 정확성 및 문화 적합성 검토 +- 코드 예제는 최신 베스트 프랙티스 준수 필요 +- 번역은 정확성과 문화적 적합성 검토 ## 번역 시스템 @@ -264,19 +264,19 @@ PR 제출 전: - co-op-translator 워크플로우가 포함된 GitHub Actions 사용 - 50개 이상의 언어로 자동 번역 -- 소스 파일은 메인 디렉터리 내 -- 번역 파일은 `translations/{language-code}/` 위치 +- 원본 파일은 메인 디렉터리에 위치 +- 번역 파일은 `translations/{language-code}/`에 위치 -### 수동 번역 개선 추가 방법 +### 수동 번역 개선 추가 -1. `translations/{language-code}/`에서 파일 위치 확인 -2. 구조를 유지하며 개선 작업 수행 -3. 코드 예제 기능 유지 확인 -4. 현지화된 퀴즈 콘텐츠 테스트 +1. `translations/{language-code}/`에서 파일 찾기 +2. 구조를 유지하며 개선 작업 +3. 코드 예제가 정상 작동 유지 확인 +4. 지역화된 퀴즈 내용 테스트 ### 번역 메타데이터 -번역 파일은 다음과 같은 메타데이터 헤더 포함: +번역 파일에는 메타데이터 헤더 포함: ```markdown **면책 조항**: -이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확성이 포함될 수 있음을 양지하시기 바랍니다. 원본 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. +이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확성이 포함될 수 있음을 유의해 주시기 바랍니다. 원문은 해당 언어의 원본 문서가 권위 있는 자료로 간주되어야 합니다. 중요한 정보의 경우, 전문 인간 번역가의 번역을 권장합니다. 본 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임지지 않습니다. \ No newline at end of file diff --git a/translations/ko/README.md b/translations/ko/README.md index d636e3b7d..d2a1ea620 100644 --- a/translations/ko/README.md +++ b/translations/ko/README.md @@ -10,70 +10,79 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# 웹 개발 초보자를 위한 커리큘럼 +# 초보자를 위한 웹 개발 - 교육과정 -Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정을 통해 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장 기능, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 심도 있게 다룹니다. 퀴즈, 토론, 실습 과제에 참여하세요. 효과적인 프로젝트 기반 교수법으로 실력을 향상시키고 지식 습득을 최적화할 수 있습니다. 지금 바로 코딩 여정을 시작하세요! +Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배우세요. 총 24개의 수업에서 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 탐구합니다. 퀴즈, 토론, 실습 과제에도 참여하세요. 효과적인 프로젝트 기반 교육법으로 실력을 향상시키고 지식 유지력을 최적화하세요. 오늘부터 코딩 여정을 시작하세요! Azure AI Foundry Discord 커뮤니티에 참여하세요 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -다음 단계를 따라 이 리소스를 사용하여 시작하세요: -1. **레포지토리 포크하기**: 클릭 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **레포지토리 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Azure AI Foundry Discord에 가입하여 전문가와 동료 개발자 만나기**](https://discord.com/invite/ByRwuEEgH4) +이 리소스를 사용하기 시작하려면 다음 단계를 따르세요: +1. **저장소 포크하기**: 클릭 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Azure AI Foundry Discord에 참여하여 전문가 및 동료 개발자를 만나세요**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 다국어 지원 #### GitHub Action을 통한 지원 (자동화 및 항상 최신 상태 유지) -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](./README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +[아랍어](../ar/README.md) | [벵골어](../bn/README.md) | [불가리아어](../bg/README.md) | [버마어 (미얀마)](../my/README.md) | [중국어 (간체)](../zh-CN/README.md) | [중국어 (번체, 홍콩)](../zh-HK/README.md) | [중국어 (번체, 마카오)](../zh-MO/README.md) | [중국어 (번체, 대만)](../zh-TW/README.md) | [크로아티아어](../hr/README.md) | [체코어](../cs/README.md) | [덴마크어](../da/README.md) | [네덜란드어](../nl/README.md) | [에스토니아어](../et/README.md) | [핀란드어](../fi/README.md) | [프랑스어](../fr/README.md) | [독일어](../de/README.md) | [그리스어](../el/README.md) | [히브리어](../he/README.md) | [힌디어](../hi/README.md) | [헝가리어](../hu/README.md) | [인도네시아어](../id/README.md) | [이탈리아어](../it/README.md) | [일본어](../ja/README.md) | [칸나다어](../kn/README.md) | [한국어](./README.md) | [리투아니아어](../lt/README.md) | [말레이어](../ms/README.md) | [말라얄람어](../ml/README.md) | [마라티어](../mr/README.md) | [네팔어](../ne/README.md) | [나이지리아 피진어](../pcm/README.md) | [노르웨이어](../no/README.md) | [페르시아어 (파르시)](../fa/README.md) | [폴란드어](../pl/README.md) | [포르투갈어 (브라질)](../pt-BR/README.md) | [포르투갈어 (포르투갈)](../pt-PT/README.md) | [펀자브어 (구르무키)](../pa/README.md) | [루마니아어](../ro/README.md) | [러시아어](../ru/README.md) | [세르비아어 (키릴 문자)](../sr/README.md) | [슬로바키아어](../sk/README.md) | [슬로베니아어](../sl/README.md) | [스페인어](../es/README.md) | [스와힐리어](../sw/README.md) | [스웨덴어](../sv/README.md) | [타갈로그어 (필리피노)](../tl/README.md) | [타밀어](../ta/README.md) | [텔루구어](../te/README.md) | [태국어](../th/README.md) | [터키어](../tr/README.md) | [우크라이나어](../uk/README.md) | [우르두어](../ur/README.md) | [베트남어](../vi/README.md) -> **로컬 클론을 선호하나요?** - -> 이 레포지토리는 50개 이상의 언어 번역본을 포함하여 다운로드 크기가 상당히 증가합니다. 번역 없이 클론하려면 스파스 체크아웃을 사용하세요: +> **로컬 클론을 선호하시나요?** +> +> 본 저장소에는 50개 이상의 언어 번역이 포함되어 있어 다운로드 크기가 상당히 증가합니다. 번역 없이 클론하려면 스파스 체크아웃(sparse checkout)을 사용하세요: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> 이렇게 하면 훨씬 빠른 다운로드로 코스 완료에 필요한 모든 것을 얻을 수 있습니다. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> 이 방법으로 코스를 완료하는 데 필요한 모든 것을 훨씬 빠르게 다운로드할 수 있습니다. -**추가 지원 언어를 원하시면 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에서 확인하세요** +**추가 번역 언어 지원을 원하시면 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)를 참조하세요** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Visual Studio Code에서 열기](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _학생이신가요?_ -초보자 리소스, 학생 팩 및 무료 수료증 바우처 획득 방법도 제공하는 [**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하세요. 이 페이지는 매달 콘텐츠가 교체되므로 즐겨찾기에 추가하고 가끔 방문하는 것이 좋습니다. +[**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하세요. 여기에서 초보자용 리소스, 학생용 팩, 그리고 무료 자격증 바우처를 얻는 방법 등을 찾을 수 있습니다. 월별로 콘텐츠가 교체되므로 이 페이지를 즐겨찾기에 추가해 주기적으로 확인하세요. -### 📣 안내 - 완료해야 할 새로운 GitHub Copilot 에이전트 모드 챌린지! +### 📣 공지 - 완료할 수 있는 새로운 GitHub Copilot Agent 모드 챌린지! -새로운 챌린지가 업데이트 되어 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 확인하세요. 이 챌린지는 GitHub Copilot과 에이전트 모드를 사용해 완료할 수 있습니다. 에이전트 모드를 처음 사용하신다면, 텍스트 생성뿐 아니라 파일 생성, 편집, 명령 실행 등도 할 수 있습니다. +새로운 챌린지가 추가되었습니다. 대부분의 장에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. 이는 GitHub Copilot과 Agent 모드를 사용하여 완료하는 새로운 도전입니다. Agent 모드를 처음 사용한다면, 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등도 할 수 있습니다. -### 📣 안내 - _생성 AI를 활용한 새로운 프로젝트_ +### 📣 공지 - _생성 AI를 사용하여 만들 수 있는 새 프로젝트_ -새로운 AI 어시스턴트 프로젝트가 추가되었습니다, [프로젝트 확인](./9-chat-project/README.md) +새로운 AI Assistant 프로젝트가 추가되었습니다. 프로젝트를 확인하세요 [project](./9-chat-project/README.md) -### 📣 안내 - _JavaScript용 생성 AI_ 새로운 커리큘럼 출시 +### 📣 공지 - _JavaScript를 위한 생성 AI 새 교육과정_ 출시 -새로운 생성 AI 커리큘럼을 놓치지 마세요! +새로운 생성 AI 교육과정을 놓치지 마세요! 시작하려면 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 방문하세요! ![Background](../../translated_images/ko/background.148a8d43afde5730.webp) -- 기본부터 RAG까지 모든 내용을 다루는 레슨 -- 생성 AI와 동반자 앱을 사용해 역사적 인물과 상호작용 -- 재미있고 몰입감 있는 이야기, 시간 여행도 해봐요! +- 기본부터 RAG까지 모두 다루는 수업. +- GenAI 및 동반 앱을 이용해 역사적 인물들과 상호작용 가능. +- 재미있고 몰입감 있는 내러티브로 시간 여행 중! ![character](../../translated_images/ko/character.5c0dd8e067ffd693.webp) - -각 레슨에는 과제, 지식 점검, 도전 과제가 포함되어 있어 다음과 같은 주제 학습을 안내합니다: -- 프롬프트 및 프롬프트 엔지니어링 +각 수업에는 완료해야 할 과제, 지식 확인, 그리고 다음 주제를 학습하는 데 도움이 되는 챌린지가 포함되어 있습니다: +- 프롬프트 작성 및 프롬프트 엔지니어링 - 텍스트 및 이미지 앱 생성 - 검색 앱 @@ -83,131 +92,130 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요 ## 🌱 시작하기 -> **교사 여러분**, 이 커리큘럼 사용법에 대한 [제안](for-teachers.md)을 포함했습니다. 여러분의 피드백을 [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 기다립니다! +> **교사분들**, 이 교육과정을 활용하는 방법에 대해 [제안사항](for-teachers.md)을 포함했습니다. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 여러분의 의견을 들려주세요! -**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**는 각 레슨마다 사전 퀴즈로 시작하고 강의 자료를 읽고, 여러 활동을 완료한 후 사후 퀴즈로 이해도를 확인하세요. +**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**는 각 수업마다 강의 전 퀴즈를 시작으로, 강의 자료를 읽고 다양한 활동을 완료하며, 강의 후 퀴즈로 이해도를 점검하세요. -학습 경험을 향상시키려면 동료들과 프로젝트를 함께 작업하며 교류하세요! 토론은 [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 장려되며, 모더레이터 팀이 질문에 답변해 드립니다. +학습 경험을 향상시키기 위해 동료들과 협력하여 프로젝트를 진행하세요! 토론은 [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 권장되며, 중재자 팀이 여러분의 질문에 답변할 준비가 되어 있습니다. -교육을 더욱 심화하려면 추가 학습 자료를 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)도 강력히 추천합니다. +교육을 더 확장하고 싶다면, 추가 학습 자료를 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 탐색을 강력히 추천합니다. -### 📋 개발 환경 설정하기 +### 📋 환경 설정 -이 커리큘럼에는 바로 사용할 수 있는 개발 환경이 준비되어 있습니다! 시작할 때 [Codespace](https://github.com/features/codespaces/) (브라우저 기반, 설치 불필요 환경)에서 실행하거나 로컬 컴퓨터에서 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 같은 텍스트 편집기를 사용해 진행할 수 있습니다. +이 교육과정은 바로 사용할 수 있는 개발 환경을 제공합니다! 시작할 때 [Codespace](https://github.com/features/codespaces/) (브라우저 기반, 설치 불필요 환경)에서 교육과정을 실행하거나, 컴퓨터에서 텍스트 편집기인 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)를 사용하여 로컬에서 실행할 수 있습니다. -#### 레포지토리 생성하기 -작업 내용을 쉽게 저장하려면 이 레포지토리의 복사본을 만드는 것이 좋습니다. 페이지 상단의 **Use this template** 버튼을 클릭하여 GitHub 계정에 커리큘럼 복사본이 포함된 새 레포지토리를 생성하세요. +#### 저장소 생성하기 +작업을 쉽게 저장하기 위해 본 저장소를 복사하는 것이 좋습니다. 페이지 상단에 있는 **Use this template** 버튼을 클릭하면 본 교육과정의 복사본이 내 GitHub 계정에 생성됩니다. -단계별 안내: -1. **레포지토리 포크하기**: 이 페이지 오른쪽 상단의 "Fork" 버튼을 클릭하세요. -2. **레포지토리 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +단계별로 진행하세요: +1. **저장소 포크하기**: 페이지 우측 상단의 "Fork" 버튼을 클릭하세요. +2. **저장소 클론하기**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Codespace에서 커리큘럼 실행하기 +#### Codespace에서 교육과정 실행하기 -생성한 레포지토리 복사본에서 **Code** 버튼을 클릭하고 **Open with Codespaces**를 선택하세요. 새로운 Codespace가 생성됩니다. +생성한 저장소 복사본에서 **Code** 버튼을 클릭하고 **Open with Codespaces**를 선택하세요. 새 Codespace가 생성됩니다. ![Codespace](../../translated_images/ko/createcodespace.0238bbf4d7a8d955.webp) -#### 로컬 컴퓨터에서 커리큘럼 실행하기 +#### 컴퓨터에서 로컬로 교육과정 실행하기 -커리큘럼을 로컬에서 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 레슨 [프로그래밍 언어와 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서는 각각의 도구 옵션을 안내해 드립니다. +컴퓨터에서 이 교육과정을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 수업인 [프로그래밍 언어 및 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서는 각 도구의 다양한 옵션을 안내하여 자신에게 맞는 것을 선택할 수 있도록 도와줍니다. -추천하는 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)로, 내장 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 포함되어 있습니다. Visual Studio Code는 [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 다운로드할 수 있습니다. - - -1. 레포지토리를 컴퓨터에 클론하세요. **Code** 버튼을 클릭해 URL을 복사하면 됩니다: +추천 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)로, 내장된 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 제공합니다. Visual Studio Code는 [여기서](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 다운로드할 수 있습니다. +1. 저장소를 컴퓨터에 복제하세요. 이는 **Code** 버튼을 클릭하고 URL을 복사하여 할 수 있습니다: [CodeSpace](./images/createcodespace.png) -그런 다음, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내에서 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고, ``을 방금 복사한 URL로 대체하여 다음 명령을 실행하세요: + + 그런 다음, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내에서 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고, 방금 복사한 URL을 `` 대신 사용하여 다음 명령어를 실행하세요: ```bash git clone ``` -2. Visual Studio Code에서 폴더를 엽니다. **파일** > **폴더 열기**를 클릭하고 방금 복제한 폴더를 선택하면 됩니다. +2. Visual Studio Code에서 폴더를 엽니다. **File** > **Open Folder**를 클릭한 후 방금 복제한 폴더를 선택하면 됩니다. -> 추천 Visual Studio Code 확장 기능: +> 권장 Visual Studio Code 확장 프로그램: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지 미리보기 -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드를 더 빠르게 작성할 수 있도록 도움 +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지 미리보기용 +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드를 더 빠르게 작성하는 데 도움 ## 📂 각 수업에는 다음이 포함됩니다: - 선택적 스케치노트 -- 선택적 보조 동영상 -- 수업 전 워밍업 퀴즈 -- 서면 수업 내용 -- 프로젝트 기반 수업의 경우, 프로젝트를 단계별로 만드는 안내서 +- 선택적 보충 동영상 +- 수업 전 준비 퀴즈 +- 작성된 수업 내용 +- 프로젝트 기반 수업의 경우, 프로젝트를 구축하는 단계별 가이드 - 지식 점검 - 도전 과제 -- 보조 읽기 자료 +- 보충 독서 자료 - 과제 - [수업 후 퀴즈](https://ff-quizzes.netlify.app/web/) -> **퀴즈 관련 참고:** 모든 퀴즈는 Quiz-app 폴더에 들어 있으며, 각각 세 문제로 이루어진 총 48개의 퀴즈가 있습니다. [여기](https://ff-quizzes.netlify.app/web/)에서 이용 가능하며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다; `quiz-app` 폴더의 지침을 따르세요. +> **퀴즈에 대한 안내**: 모든 퀴즈는 Quiz-app 폴더에 있으며, 총 48개의 퀴즈, 각 퀴즈는 3문제로 구성되어 있습니다. 퀴즈는 [여기](https://ff-quizzes.netlify.app/web/)에서 볼 수 있으며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더의 지침을 따르세요. ## 🗃️ 수업 목록 -| | 프로젝트 이름 | 학습 개념 | 학습 목표 | 연결된 수업 | 저자 | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | 시작하기 | 프로그래밍 입문 및 개발 도구 소개 | 대부분의 프로그래밍 언어의 기본 토대와 전문 개발자들의 작업을 돕는 소프트웨어에 대해 학습 | [프로그래밍 언어 및 개발 도구 소개](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | 시작하기 | GitHub 기초, 팀 작업 포함 | 프로젝트에서 GitHub 사용 방법 및 코드베이스 협업 방법 | [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | 시작하기 | 접근성 | 웹 접근성의 기본 개념 학습 | [접근성 기초](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS 기본 | JavaScript 데이터 타입 | JavaScript 데이터 타입의 기초 | [데이터 타입](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS 기본 | 함수 및 메서드 | 애플리케이션의 로직 흐름 관리를 위한 함수와 메서드 학습 | [함수 및 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS 기본 | JavaScript로 의사결정 하기 | 의사결정 방법을 사용하여 코드에 조건 만들기 학습 | [의사결정 만들기](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS 기본 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용하여 데이터 작업 | [배열과 반복문](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [테라리움](./3-terrarium/solution/README.md) | 실습용 HTML | 온라인 테라리움을 만들기 위한 HTML 구축, 레이아웃 구성에 중점 | [HTML 소개](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [테라리움](./3-terrarium/solution/README.md) | 실습용 CSS | 온라인 테라리움 스타일링을 위한 CSS 구축, 기본 CSS 및 반응형 페이지 만들기 포함 | [CSS 소개](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [테라리움](./3-terrarium/solution/README.md) | JavaScript 클로저, DOM 조작 | 테라리움을 드래그/드롭 인터페이스로 작동하게 만드는 JavaScript 작성, 클로저와 DOM 조작에 중점 | [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [타이핑 게임](./4-typing-game/solution/README.md) | 타이핑 게임 만들기 | 키보드 이벤트를 활용하여 JavaScript 앱의 로직 구동 방법 학습 | [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 브라우저 작업 이해 | 브라우저 작동 원리, 역사 및 브라우저 확장 기능의 초기 구성 요소 설계 법 학습 | [브라우저에 대해](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | API 호출, 폼 구축 및 로컬 스토리지 변수 저장 | API를 호출하는 브라우저 확장 기능의 JavaScript 요소 빌드, 로컬 스토리지에 저장된 변수 사용 | [API, 폼, 로컬 스토리지](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스, 웹 성능 | 브라우저 백그라운드 프로세스로 확장 아이콘 관리; 웹 성능 및 최적화 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [스페이스 게임](./6-space-game/solution/README.md) | 고급 게임 개발: 클래스, 구성, Pub/Sub 패턴 | 클래스와 구성, 퍼블리시/서브스크라이브 패턴을 통한 상속 개념 학습, 게임 만들기 준비 | [고급 게임 개발 소개](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [스페이스 게임](./6-space-game/solution/README.md) | 캔버스에 그리기 | 화면에 요소를 그리기 위한 Canvas API 학습 | [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [스페이스 게임](./6-space-game/solution/README.md) | 화면 요소 이동시키기 | Cartesian 좌표와 Canvas API를 사용해 요소에 동작 부여 | [요소 이동시키기](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [스페이스 게임](./6-space-game/solution/README.md) | 충돌 감지 | 키 입력으로 서로 충돌하고 반응하는 요소 만들기, 게임 성능 확보를 위한 쿨다운 함수 제공 | [충돌 감지](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [스페이스 게임](./6-space-game/solution/README.md) | 점수 기록 | 게임 상태와 성과에 따른 수학 계산 수행 | [점수 기록](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [스페이스 게임](./6-space-game/solution/README.md) | 게임 종료 및 재시작 | 게임 종료 및 재시작 방법 학습, 자원 정리 및 변수 초기화 방법 | [종료 조건](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [뱅킹 앱](./7-bank-project/solution/README.md) | 웹 앱의 HTML 템플릿 및 라우팅 | 멀티페이지 웹사이트 아키텍처 스캐폴딩, 라우팅 및 HTML 템플릿 생성 방법 학습 | [HTML 템플릿 및 라우팅](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [뱅킹 앱](./7-bank-project/solution/README.md) | 로그인 및 회원가입 폼 만들기 | 폼 작성과 검증 처리 방법 학습 | [폼](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [뱅킹 앱](./7-bank-project/solution/README.md) | 데이터 가져오기 및 사용 방법 | 앱 내 데이터 흐름, 데이터 가져오기, 저장, 폐기 방법 학습 | [데이터](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [뱅킹 앱](./7-bank-project/solution/README.md) | 상태 관리 개념 | 앱 상태 유지 및 프로그래밍 방식 상태 관리 방법 학습 | [상태 관리](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode 코드](../../8-code-editor) | VSCode 사용법 | 코드를 작성하는 방법 학습| [VSCode 코드 에디터 사용법](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI 어시스턴트](./9-chat-project/README.md) | AI 활용 | 나만의 AI 어시스턴트 만들기 학습 | [AI 어시스턴트 프로젝트](./9-chat-project/README.md) | Chris | - -## 🏫 교육 철학 - -우리 교육과정은 두 가지 핵심 교육 원칙을 기반으로 설계되었습니다: +| | 프로젝트 이름 | 학습 개념 | 학습 목표 | 연결된 수업 | 저자 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | 시작하기 | 프로그래밍과 도구 소개 | 대부분 프로그래밍 언어의 기본 원리와 전문가 개발자가 사용하는 소프트웨어에 대해 학습 | [프로그래밍 언어 및 도구 소개](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | 시작하기 | GitHub 기본, 팀 작업 포함 | 프로젝트에서 GitHub 사용하는 방법 및 코드베이스 협업 방법 | [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | 시작하기 | 접근성 | 웹 접근성 기본 학습 | [접근성 기초](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS 기본 | JavaScript 데이터 유형 | JavaScript 데이터 유형의 기본 | [데이터 유형](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS 기본 | 함수와 메소드 | 애플리케이션의 로직 흐름 관리를 위한 함수와 메소드 학습 | [함수와 메소드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS 기본 | JS로 의사 결정 만들기 | 의사 결정 방법을 사용하여 코드 내 조건 만들기 학습 | [의사 결정](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS 기본 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용하여 데이터 다루기 | [배열과 반복문](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 실습 | 온라인 테라리움을 만들기 위한 HTML 빌드, 레이아웃 구성에 집중 | [HTML 소개](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 실습 | 온라인 테라리움 스타일링용 CSS 빌드, 페이지 반응형 등 CSS 기본에 집중 | [CSS 소개](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 클로저, DOM 조작 | 드래그/드롭 인터페이스 기능 구현용 JavaScript 빌드, 클로저 및 DOM 조작에 집중 | [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [타이핑 게임](./4-typing-game/solution/README.md) | 타이핑 게임 만들기 | 키보드 이벤트를 사용해 JavaScript 앱 로직 제어하는 법 학습 | [이벤트 주도 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 작동 원리 | 브라우저 작동원리, 역사, 그리고 브라우저 확장 첫 요소 구성 학습 | [브라우저에 대하여](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green 브라우저 확장](./5-browser-extension/solution/README.md) | 폼 만들기, API 호출 및 로컬 저장소 변수 저장 | 브라우저 확장을 위한 JavaScript 구축, API 호출과 로컬 저장소 변수 사용 | [API, 폼, 로컬 저장소](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스 및 웹 성능 | 브라우저 백그라운드 프로세스를 이용해 확장 아이콘 관리하기; 웹 성능 및 최적화 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [우주 게임](./6-space-game/solution/README.md) | JavaScript를 통한 고급 게임 개발 | 클래스와 컴포지션을 이용한 상속과 Pub/Sub 패턴 학습, 게임 개발 준비 | [고급 게임 개발 소개](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [우주 게임](./6-space-game/solution/README.md) | 캔버스에 그리기 | 화면에 요소를 그리는 데 사용하는 Canvas API 학습 | [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [우주 게임](./6-space-game/solution/README.md) | 요소를 화면에서 움직이기 | 데카르트 좌표와 Canvas API를 이용해 요소에 움직임 부여 방법 학습 | [요소 움직이기](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [우주 게임](./6-space-game/solution/README.md) | 충돌 감지 | 키 입력을 이용해 요소가 충돌하고 반응하게 만들고, 게임 성능을 위한 쿨다운 함수 제공 | [충돌 감지](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [우주 게임](./6-space-game/solution/README.md) | 점수 유지 | 게임 상태와 성능에 따라 수학적 계산 수행 | [점수 유지](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [우주 게임](./6-space-game/solution/README.md) | 게임 종료 및 재시작 | 게임 종료 및 재시작 방법, 자산 정리 및 변수 초기화 학습 | [종료 조건](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [뱅킹 앱](./7-bank-project/solution/README.md) | 웹 앱의 HTML 템플릿 및 라우팅 | 라우팅 및 HTML 템플릿을 사용한 다중 페이지 웹사이트 스캐폴드 생성 방법 학습 | [HTML 템플릿 및 라우트](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [뱅킹 앱](./7-bank-project/solution/README.md) | 로그인 및 회원가입 폼 만들기 | 폼 빌드와 유효성 검사 처리 방법 학습 | [폼](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [뱅킹 앱](./7-bank-project/solution/README.md) | 데이터 가져오기 및 사용 방법 | 앱 내외부의 데이터 흐름 및 가져오기, 저장, 삭제 방법 학습 | [데이터](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [뱅킹 앱](./7-bank-project/solution/README.md) | 상태 관리 개념 | 앱이 상태를 유지하는 방법과 프로그래밍 방식으로 이를 관리하는 법 학습 | [상태 관리](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | VScode 사용법 | 코드 에디터 사용법 학습 | [VScode 코드 에디터 사용](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI 어시스턴트](./9-chat-project/README.md) | AI 활용법 | 나만의 AI 어시스턴트 구축 방법 | [AI 어시스턴트 프로젝트](./9-chat-project/README.md) | Chris | + +## 🏫 교수법 + +우리 커리큘럼은 두 가지 주요 교육 원칙을 기반으로 설계되었습니다: * 프로젝트 기반 학습 -* 자주 퀴즈 진행 +* 빈번한 퀴즈 -이 프로그램은 JavaScript, HTML, CSS의 기본 원리와 현대 웹 개발자가 사용하는 최신 도구 및 기법을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 기능, 스페이스 인베이더 스타일 게임, 그리고 비즈니스용 뱅킹 앱을 직접 만들어 보며 실무 경험을 쌓을 기회를 가집니다. 시리즈가 끝날 때쯤 학생들은 웹 개발에 대한 탄탄한 이해를 가지게 됩니다. +이 프로그램은 JavaScript, HTML, CSS의 기초뿐만 아니라 오늘날 웹 개발자들이 사용하는 최신 도구와 기법을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장, 스페이스 인베이더 스타일 게임, 비즈니스용 뱅킹 앱을 만들며 실습 경험을 쌓습니다. 시리즈 마지막에는 웹 개발에 대한 탄탄한 이해를 갖추게 됩니다. -> 🎓 이 교육과정의 처음 몇 개 수업은 Microsoft Learn의 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다! +> 🎓 Microsoft Learn에서 이 커리큘럼의 첫 수업들을 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다! -콘텐츠가 프로젝트와 일치하여 학생들이 과정에 더 몰입할 수 있으며 개념 유지력이 향상됩니다. JavaScript 기초 개념을 소개하는 여러 기초 수업과, 이 과정에 기여한 저자들이 참여한 "[JavaScript 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"의 비디오도 함께 제공합니다. +내용을 프로젝트와 연계함으로써 학생 참여를 높이고 개념 이해도를 향상시킵니다. 또한 JavaScript 기초 수업 몇 개는 개념 소개용으로 "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 영상과 연계되어 있으며, 일부 저자가 본 커리큘럼에 기여했습니다. -또한, 수업 전에 간단한 퀴즈를 통해 학생이 주제 학습의 의지를 다지도록 하고, 수업 후 두 번째 퀴즈로 추가 학습 효과를 보장합니다. 이 교육과정은 융통성 있고 재미있도록 설계되었으며 전체 또는 일부만 수강할 수 있습니다. 프로젝트들은 작게 시작하여 12주 과정 마지막에는 점점 복잡해집니다. +수업 전 저위험 퀴즈로 학습 의도를 설정하고, 수업 후 두 번째 퀴즈로 이해도를 강화하도록 설계되었습니다. 본 커리큘럼은 유연하고 재미있게 진행할 수 있으며, 전체 또는 부분적으로 수강 가능하며, 프로젝트는 작게 시작해 12주 주기 말에는 점점 더 복잡해집니다. -기본 웹 개발 기술에 집중하기 위해 JavaScript 프레임워크 도입은 의도적으로 피했지만, 이 교육과정을 완료한 뒤 다음 단계로 "[Node.js 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"의 동영상을 통해 Node.js를 학습하는 것을 권장합니다. +프레임워크 채택 전에 웹 개발 기본기를 집중하고자 JavaScript 프레임워크 도입을 피했으나, 커리큘럼 완료 후 단계로 "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 영상을 통해 Node.js를 학습하는 것이 좋은 다음 단계가 될 것입니다. -> 우리의 [행동 강령](CODE_OF_CONDUCT.md) 및 [기여 가이드라인](CONTRIBUTING.md)을 참고하세요. 건설적인 피드백을 환영합니다! +> 우리의 [행동 강령](CODE_OF_CONDUCT.md)과 [기여 가이드](CONTRIBUTING.md)를 방문하세요. 건설적인 피드백을 환영합니다! ## 🧭 오프라인 접근 -[Docsify](https://docsify.js.org/#/)를 이용해 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 머신에 [Docsify 설치](https://docsify.js.org/#/quickstart) 후, 이 저장소 루트 폴더에서 `docsify serve` 명령을 실행하세요. 웹사이트는 로컬호스트 3000번 포트에서 제공됩니다: `localhost:3000`. +[Docsify](https://docsify.js.org/#/)를 사용하면 이 문서를 오프라인으로도 실행할 수 있습니다. 이 저장소를 포크한 후, 로컬 머신에 [Docsify를 설치](https://docsify.js.org/#/quickstart)하고, 이 저장소 루트 폴더에서 `docsify serve` 명령을 입력하면 됩니다. 웹사이트는 localhost의 3000 포트(`localhost:3000`)에서 서비스됩니다. ## 📘 PDF +모든 강의의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 확인할 수 있습니다. -전체 수업 자료 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 확인할 수 있습니다. +## 🎒 다른 강의 -## 🎒 기타 강의 -우리 팀은 다른 강좌도 제작합니다! 확인해 보세요: +우리 팀은 다른 강의도 제공합니다! 확인해 보세요: ### LangChain @@ -224,7 +232,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요 --- -### Generative AI Series +### 생성 AI 시리즈 [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -232,7 +240,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요 --- -### Core Learning +### 핵심 학습 [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -243,29 +251,29 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요 --- -### Copilot Series +### Copilot 시리즈 [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## 도움 받기 +## 도움받기 -AI 앱 개발에 막히거나 질문이 있을 경우 MCP에 대해 학습하는 동료 및 경험 많은 개발자들과 토론에 참여하세요. 질문이 환영받고 지식이 자유롭게 공유되는 지원 커뮤니티입니다. +AI 앱 개발 중에 막히거나 질문이 있으면 MCP 관련 토론에 참여하세요. 질문을 환영하고 지식을 자유롭게 공유하는 지원 커뮤니티입니다. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -제품 피드백이나 빌드 중 오류가 있는 경우 다음을 방문하세요: +제품 피드백이나 오류가 있으면 다음을 방문하세요: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## 라이선스 -이 저장소는 MIT 라이선스 하에 있습니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요. +이 저장소는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요. --- **면책 조항**: -이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확한 부분이 포함될 수 있음을 유의하시기 바랍니다. 원문 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문 인간 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해서는 당사가 책임지지 않습니다. +이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역된 내용에는 오류나 부정확한 부분이 있을 수 있음을 유의해 주시기 바랍니다. 원본 문서의 원어 버전이 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 본 번역물의 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. \ No newline at end of file