44 KiB
वेब डेव्हलपमेंटसाठी नवशिक्यांसाठी - अभ्यासक्रम
मायक्रोसॉफ्ट क्लाउड अॅडव्होकेट्सद्वारे तयार केलेल्या 12 आठवड्यांच्या व्यापक कोर्ससह वेब डेव्हलपमेंटचे मूलभूत तत्त्वे शिका. प्रत्येक 24 धड्यांमध्ये जावास्क्रिप्ट, CSS आणि HTML यावर प्रकल्प आधारित शिकवण आहे, जसे की टेरॅरियम्स, ब्राउझर एक्सटेंशन्स आणि स्पेस गेम्स. क्विझ, चर्चा आणि प्रॅक्टिकल असाइनमेंट्ससह सहभाग घ्या. प्रकल्प आधारित शिक्षण पद्धतीद्वारे तुमचे कौशल्य वाढवा आणि ज्ञान टिकवून ठेवा. आजच तुमचा कोडिंग प्रवास सुरू करा!
Azure AI Foundry Discord समुदायामध्ये सामील व्हा
या संसाधनांचा वापर सुरू करण्यासाठी खालील चरणांचे अनुसरण करा:
- रेपॉझिटरी फॉर्क करा: क्लिक करा
- रेपॉझिटरी क्लोन करा:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Azure AI Foundry Discord मध्ये सामील व्हा आणि तज्ञ व इतर डेव्हलपर्सशी भेटा
🌐 बहुभाषिक समर्थन
GitHub Action द्वारे समर्थित (स्वयंचलित आणि नेहमी अद्ययावत)
French | Spanish | German | Russian | Arabic | Persian (Farsi) | Urdu | Chinese (Simplified) | Chinese (Traditional, Macau) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Taiwan) | Japanese | Korean | Hindi | Bengali | Marathi | Nepali | Punjabi (Gurmukhi) | Portuguese (Portugal) | Portuguese (Brazil) | Italian | Polish | Turkish | Greek | Thai | Swedish | Danish | Norwegian | Finnish | Dutch | Hebrew | Vietnamese | Indonesian | Malay | Tagalog (Filipino) | Swahili | Hungarian | Czech | Slovak | Romanian | Bulgarian | Serbian (Cyrillic) | Croatian | Slovenian | Ukrainian | Burmese (Myanmar)
जर तुम्हाला अतिरिक्त भाषांमध्ये भाषांतर हवे असेल तर समर्थित भाषांची यादी येथे आहे
🧑🎓 तुम्ही विद्यार्थी आहात का?
Student Hub पृष्ठाला भेट द्या जिथे तुम्हाला नवशिक्यांसाठी संसाधने, विद्यार्थी पॅक्स आणि अगदी मोफत प्रमाणपत्र व्हाउचर मिळवण्याचे मार्ग सापडतील. हे पृष्ठ बुकमार्क करा आणि वेळोवेळी तपासा कारण आम्ही दर महिन्याला सामग्री बदलतो.
📣 घोषणा - जनरेटिव्ह AI वापरून नवीन प्रकल्प तयार करा
नवीन AI सहाय्यक प्रकल्प नुकताच जोडला आहे, तपासा प्रकल्प
📣 घोषणा - नवीन अभ्यासक्रम जनरेटिव्ह AI साठी जावास्क्रिप्टवर नुकताच प्रसिद्ध झाला
आमचा नवीन जनरेटिव्ह AI अभ्यासक्रम चुकवू नका!
https://aka.ms/genai-js-course ला भेट द्या आणि सुरुवात करा!
- मूलभूत गोष्टींपासून RAG पर्यंत सर्वकाही कव्हर करणारे धडे.
- GenAI आणि आमच्या साथीदार अॅपसह ऐतिहासिक पात्रांशी संवाद साधा.
- मजेदार आणि आकर्षक कथा, तुम्ही वेळ प्रवास कराल!
प्रत्येक धड्यात समाविष्ट आहे:
- प्रॉम्प्टिंग आणि प्रॉम्प्ट इंजिनिअरिंग
- टेक्स्ट आणि इमेज अॅप जनरेशन
- सर्च अॅप्स
https://aka.ms/genai-js-course ला भेट द्या आणि सुरुवात करा!
🌱 सुरुवात कशी करावी
शिक्षक, आम्ही काही सूचना समाविष्ट केल्या आहेत की हा अभ्यासक्रम कसा वापरायचा. आमच्या चर्चा मंचावर तुमचे अभिप्राय आम्हाला आवडतील!
शिकणारे, प्रत्येक धड्यासाठी, प्री-लेक्चर क्विझसह सुरुवात करा आणि लेक्चर सामग्री वाचून, विविध क्रियाकलाप पूर्ण करून आणि पोस्ट-लेक्चर क्विझसह तुमची समज तपासून पुढे जा.
तुमचा शिक्षण अनुभव वाढवण्यासाठी, प्रकल्पांवर एकत्र काम करण्यासाठी तुमच्या सहकाऱ्यांशी कनेक्ट व्हा! चर्चेला आमच्या चर्चा मंचावर प्रोत्साहन दिले जाते जिथे आमचे मॉडरेटर तुमच्या प्रश्नांची उत्तरे देण्यासाठी उपलब्ध असतील.
तुमचे शिक्षण पुढे नेण्यासाठी, आम्ही Microsoft Learn एक्सप्लोर करण्याची जोरदार शिफारस करतो जिथे अतिरिक्त अभ्यास सामग्री उपलब्ध आहे.
📋 तुमचे वातावरण सेट करणे
हा अभ्यासक्रम तयार केलेल्या विकास वातावरणासह येतो! सुरुवात करताना तुम्ही Codespace (ब्राउझर-आधारित, कोणत्याही इंस्टॉलची गरज नाही) किंवा तुमच्या संगणकावर स्थानिकपणे Visual Studio Code सारख्या टेक्स्ट एडिटरचा वापर करून चालवू शकता.
तुमची रेपॉझिटरी तयार करा
तुमचे काम सहजपणे सेव्ह करण्यासाठी, तुमच्या रेपॉझिटरीची स्वतःची प्रत तयार करणे शिफारसीय आहे. तुम्ही पृष्ठाच्या शीर्षस्थानी Use this template बटणावर क्लिक करून हे करू शकता. यामुळे तुमच्या GitHub खात्यात अभ्यासक्रमाची प्रत असलेली नवीन रेपॉझिटरी तयार होईल.
या चरणांचे अनुसरण करा:
- रेपॉझिटरी फॉर्क करा: या पृष्ठाच्या वरच्या उजव्या कोपऱ्यातील "Fork" बटणावर क्लिक करा.
- रेपॉझिटरी क्लोन करा:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Codespace मध्ये अभ्यासक्रम चालवणे
तुमच्या रेपॉझिटरीच्या प्रतामध्ये, Code बटणावर क्लिक करा आणि Open with Codespaces निवडा. यामुळे तुमच्यासाठी काम करण्यासाठी नवीन Codespace तयार होईल.
तुमच्या संगणकावर स्थानिकपणे अभ्यासक्रम चालवणे
तुमच्या संगणकावर हा अभ्यासक्रम चालवण्यासाठी, तुम्हाला टेक्स्ट एडिटर, ब्राउझर आणि कमांड लाइन टूलची आवश्यकता असेल. आमचा पहिला धडा, प्रोग्रामिंग भाषांची ओळख आणि व्यापाराचे साधने, तुम्हाला या साधनांसाठी विविध पर्यायांमधून निवडण्यास मदत करेल.
आमची शिफारस आहे की तुम्ही Visual Studio Code एडिटर म्हणून वापरा, ज्यामध्ये Terminal देखील समाविष्ट आहे. तुम्ही Visual Studio Code येथे डाउनलोड करू शकता.
-
तुमची रेपॉझिटरी तुमच्या संगणकावर क्लोन करा. तुम्ही Code बटणावर क्लिक करून आणि URL कॉपी करून हे करू शकता:
नंतर, Visual Studio Code मध्ये Terminal उघडा आणि खालील कमांड चालवा,
<your-repository-url>तुमच्या कॉपी केलेल्या URL ने बदला:git clone <your-repository-url> -
Visual Studio Code मध्ये फोल्डर उघडा. तुम्ही File > Open Folder वर क्लिक करून आणि तुम्ही नुकतेच क्लोन केलेले फोल्डर निवडून हे करू शकता.
शिफारस केलेले Visual Studio Code एक्सटेंशन्स:
- Live Server - Visual Studio Code मध्ये HTML पृष्ठे प्रीव्ह्यू करण्यासाठी
- Copilot - कोड जलद लिहिण्यासाठी मदत करण्यासाठी
📂 प्रत्येक धड्यात समाविष्ट आहे:
- पर्यायी स्केच नोट
- पर्यायी पूरक व्हिडिओ
- प्री-लेसन वॉर्मअप क्विझ
- लेखी धडा
- प्रकल्प आधारित धड्यांसाठी, प्रकल्प कसा तयार करायचा याचे चरण-दर-चरण मार्गदर्शक
- ज्ञान तपासणी
- एक आव्हान
- पूरक वाचन
- असाइनमेंट
- पोस्ट-लेसन क्विझ
क्विझेसबद्दल एक टीप: सर्व क्विझेस
Quiz-appफोल्डरमध्ये आहेत, ज्यामध्ये प्रत्येकामध्ये तीन प्रश्न असलेले एकूण 48 क्विझेस आहेत. ते येथे उपलब्ध आहेत. क्विझ अॅप स्थानिक पातळीवर चालवता येते किंवा Azure वर तैनात करता येते;quiz-appफोल्डरमधील सूचनांचे अनुसरण करा.
🗃️ धडे
| प्रकल्पाचे नाव | शिकवले जाणारे संकल्पना | शिकण्याचे उद्दिष्ट | संबंधित धडा | लेखक | |
|---|---|---|---|---|---|
| 01 | सुरुवात करा | प्रोग्रामिंगची ओळख आणि वापरातील साधने | बहुतेक प्रोग्रामिंग भाषांच्या मूलभूत गोष्टी आणि व्यावसायिक विकसकांना त्यांचे काम करण्यास मदत करणाऱ्या सॉफ्टवेअरबद्दल जाणून घ्या | प्रोग्रामिंग भाषांची ओळख आणि वापरातील साधने | जॅस्मिन |
| 02 | सुरुवात करा | GitHub च्या मूलभूत गोष्टी, टीमसोबत काम करणे | आपल्या प्रकल्पात GitHub कसे वापरायचे, कोड बेसवर इतरांसोबत कसे सहकार्य करायचे | GitHub ची ओळख | फ्लोर |
| 03 | सुरुवात करा | ऍक्सेसिबिलिटी | वेब ऍक्सेसिबिलिटीच्या मूलभूत गोष्टी जाणून घ्या | ऍक्सेसिबिलिटी फंडामेंटल्स | क्रिस्टोफर |
| 04 | JS मूलभूत गोष्टी | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारांची मूलभूत माहिती | डेटा प्रकार | जॅस्मिन |
| 05 | JS मूलभूत गोष्टी | फंक्शन्स आणि मेथड्स | अॅप्लिकेशनच्या लॉजिक फ्लोचे व्यवस्थापन करण्यासाठी फंक्शन्स आणि मेथड्सबद्दल जाणून घ्या | फंक्शन्स आणि मेथड्स | जॅस्मिन आणि क्रिस्टोफर |
| 06 | JS मूलभूत गोष्टी | JS सह निर्णय घेणे | निर्णय घेण्याच्या पद्धती वापरून आपल्या कोडमध्ये अटी कशा तयार करायच्या ते जाणून घ्या | निर्णय घेणे | जॅस्मिन |
| 07 | JS मूलभूत गोष्टी | ऍरे आणि लूप्स | JavaScript मध्ये ऍरे आणि लूप्स वापरून डेटा व्यवस्थापित करा | ऍरे आणि लूप्स | जॅस्मिन |
| 08 | Terrarium | HTML चा सराव | ऑनलाइन टेरॅरियम तयार करण्यासाठी HTML तयार करा, लेआउट तयार करण्यावर लक्ष केंद्रित करा | HTML ची ओळख | जेन |
| 09 | Terrarium | CSS चा सराव | ऑनलाइन टेरॅरियमला स्टाइल करण्यासाठी CSS तयार करा, CSS च्या मूलभूत गोष्टींवर लक्ष केंद्रित करा ज्यामध्ये पृष्ठ प्रतिसादक्षम बनवणे समाविष्ट आहे | CSS ची ओळख | जेन |
| 10 | Terrarium | JavaScript क्लोजर्स, DOM मॅनिप्युलेशन | टेरॅरियमला ड्रॅग/ड्रॉप इंटरफेस म्हणून कार्य करण्यासाठी JavaScript तयार करा, क्लोजर्स आणि DOM मॅनिप्युलेशनवर लक्ष केंद्रित करा | JavaScript क्लोजर्स, DOM मॅनिप्युलेशन | जेन |
| 11 | Typing Game | टायपिंग गेम तयार करा | आपल्या JavaScript अॅपच्या लॉजिकला चालवण्यासाठी कीबोर्ड इव्हेंट्स कसे वापरायचे ते जाणून घ्या | इव्हेंट-ड्रिव्हन प्रोग्रामिंग | क्रिस्टोफर |
| 12 | Green Browser Extension | ब्राउझरसह काम करणे | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास आणि ब्राउझर एक्सटेंशनच्या पहिल्या घटकांचे स्कॅफोल्ड कसे तयार करायचे ते जाणून घ्या | ब्राउझरबद्दल | जेन |
| 13 | Green Browser Extension | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स साठवणे | स्थानिक स्टोरेजमध्ये साठवलेल्या व्हेरिएबल्स वापरून API कॉल करण्यासाठी आपल्या ब्राउझर एक्सटेंशनचे JavaScript घटक तयार करा | APIs, फॉर्म्स, आणि स्थानिक स्टोरेज | जेन |
| 14 | Green Browser Extension | ब्राउझरमधील पार्श्वभूमी प्रक्रिया, वेब कार्यक्षमता | एक्सटेंशनच्या आयकॉनचे व्यवस्थापन करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रियेचा वापर करा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशनबद्दल जाणून घ्या | पार्श्वभूमी कार्ये आणि कार्यक्षमता | जेन |
| 15 | Space Game | JavaScript सह अधिक प्रगत गेम विकास | गेम तयार करण्याच्या तयारीसाठी क्लासेस आणि कंपोझिशन आणि Pub/Sub पॅटर्न वापरून इनहेरिटन्सबद्दल जाणून घ्या | प्रगत गेम विकासाची ओळख | क्रिस |
| 16 | Space Game | कॅनव्हासवर रेखाटन | स्क्रीनवर घटक रेखाटण्यासाठी वापरल्या जाणाऱ्या कॅनव्हास API बद्दल जाणून घ्या | कॅनव्हासवर रेखाटन | क्रिस |
| 17 | Space Game | स्क्रीनवर घटक हलवणे | घटकांना कॅनव्हास API आणि कार्टेशियन कोऑर्डिनेट्स वापरून गती कशी मिळवता येते ते शोधा | घटक हलवणे | क्रिस |
| 18 | Space Game | टक्कर शोधणे | घटकांना एकमेकांशी टक्कर करणे आणि प्रतिक्रिया देणे, कीप्रेस वापरून आणि गेमची कार्यक्षमता सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करा | टक्कर शोधणे | क्रिस |
| 19 | Space Game | स्कोअर ठेवणे | गेमच्या स्थिती आणि कार्यक्षमतेच्या आधारे गणितीय गणना करा | स्कोअर ठेवणे | क्रिस |
| 20 | Space Game | गेम संपवणे आणि पुन्हा सुरू करणे | गेम संपवणे आणि पुन्हा सुरू करणे, ज्यामध्ये अॅसेट्स साफ करणे आणि व्हेरिएबल्सच्या मूल्ये रीसेट करणे समाविष्ट आहे | समाप्ती अट | क्रिस |
| 21 | Banking App | HTML टेम्पलेट्स आणि वेब अॅपमधील रूट्स | रूटिंग आणि HTML टेम्पलेट्स वापरून मल्टीपेज वेबसाइटची आर्किटेक्चर तयार कशी करायची ते जाणून घ्या | HTML टेम्पलेट्स आणि रूट्स | योहान |
| 22 | Banking App | लॉगिन आणि नोंदणी फॉर्म तयार करा | फॉर्म तयार करणे आणि व्हॅलिडेशन रूटीन हाताळण्याबद्दल जाणून घ्या | फॉर्म्स | योहान |
| 23 | Banking App | डेटा मिळवण्याचे आणि वापरण्याचे पद्धती | आपल्या अॅपमध्ये डेटा कसा प्रवाहित होतो, तो कसा मिळवायचा, साठवायचा आणि नष्ट करायचा | डेटा | योहान |
| 24 | Banking App | स्टेट मॅनेजमेंटची संकल्पना | आपले अॅप स्टेट कसे टिकवते आणि ते प्रोग्रामॅटिकली कसे व्यवस्थापित करायचे ते जाणून घ्या | स्टेट मॅनेजमेंट | योहान |
| 25 | Browser/VScode Code | VScode सह काम करणे | कोड एडिटर वापरण्याबद्दल जाणून घ्या | VScode कोड एडिटर वापरा | क्रिस |
| 26 | AI Assistants | AI सह काम करणे | आपला स्वतःचा AI सहाय्यक कसा तयार करायचा ते जाणून घ्या | AI सहाय्यक प्रकल्प | क्रिस |
🏫 शिक्षण पद्धती
आमचे अभ्यासक्रम दोन महत्त्वाच्या शिक्षण पद्धतींच्या तत्त्वांवर आधारित आहे:
- प्रकल्प-आधारित शिक्षण
- वारंवार क्विझेस
या कार्यक्रमामध्ये JavaScript, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकसकांद्वारे वापरल्या जाणाऱ्या नवीनतम साधने आणि तंत्र शिकवले जातात. विद्यार्थ्यांना टायपिंग गेम, व्हर्च्युअल टेरॅरियम, पर्यावरणास अनुकूल ब्राउझर एक्सटेंशन, स्पेस-इनव्हेडर-शैलीतील गेम आणि व्यवसायांसाठी बँकिंग अॅप तयार करून प्रत्यक्ष अनुभव मिळवण्याची संधी मिळेल. या मालिकेच्या शेवटी, विद्यार्थ्यांना वेब विकासाची ठोस समज प्राप्त होईल.
🎓 आपण Microsoft Learn वर Learn Path म्हणून या अभ्यासक्रमातील पहिल्या काही धडे घेऊ शकता!
सामग्री प्रकल्पांशी संरेखित असल्याचे सुनिश्चित करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनवली जाते आणि संकल्पनांची आठवण वाढवली जाते. आम्ही JavaScript मूलभूत गोष्टींमध्ये अनेक प्रारंभिक धडे लिहिले आहेत जे संकल्पना सादर करतात, "Beginners Series to: JavaScript" व्हिडिओ ट्यूटोरियलच्या संग्रहातील व्हिडिओसह जोडलेले आहेत, ज्यांचे काही लेखक या अभ्यासक्रमात योगदान देतात.
याशिवाय, वर्गाच्या आधी कमी-जोखीम क्विझ विद्यार्थ्याला विषय शिकण्याच्या उद्देशाकडे वळवते, तर वर्गानंतर दुसरा क्विझ संकल्पनांची आठवण सुनिश्चित करतो. हा अभ्यासक्रम लवचिक आणि मजेदार बनवण्यासाठी डिझाइन केला गेला आहे आणि संपूर्ण किंवा अंशतः घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी अधिकाधिक जटिल बनतात.
आम्ही जाणीवपूर्वक JavaScript फ्रेमवर्क सादर करण्याचे टाळले आहे जेणेकरून फ्रेमवर्क स्वीकारण्यापूर्वी वेब विकसक म्हणून आवश्यक मूलभूत कौशल्यांवर लक्ष केंद्रित करता येईल, या अभ्यासक्रम पूर्ण केल्यानंतर पुढील चांगले पाऊल म्हणजे "Beginner Series to: Node.js" व्हिडिओंच्या आणखी एका संग्रहाबद्दल शिकणे.
आमच्या Code of Conduct आणि Contributing मार्गदर्शक तत्त्वांना भेट द्या. आम्ही आपले रचनात्मक अभिप्राय स्वागत करतो!
🧭 ऑफलाइन प्रवेश
आपण Docsify वापरून हे दस्तऐवजीकरण ऑफलाइन चालवू शकता. या रेपोला फोर्क करा, आपल्या स्थानिक मशीनवर Docsify इंस्टॉल करा, आणि नंतर या रेपोच्या रूट फोल्डरमध्ये docsify serve टाइप करा. वेबसाइट आपल्या लोकलहोस्टवर पोर्ट 3000 वर सर्व्ह केली जाईल: localhost:3000.
सर्व धड्यांचा PDF येथे सापडू शकतो.
🎒 इतर अभ्यासक्रम
आमची टीम इतर अभ्यासक्रम तयार करते! तपासा:
- MCP for Beginners
- Edge AI for Beginners
- AI Agents for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- Data Science for Beginners
- ML for Beginners
- Cybersecurity for Beginners
- Web Dev for Beginners
- IoT for Beginners
- XR Development for Beginners
- Mastering GitHub Copilot for Agentic use
- C#/.NET विकसकांसाठी GitHub Copilot मध्ये प्रावीण्य मिळवा
- तुमचा स्वतःचा Copilot प्रवास निवडा
मदत मिळवा
जर तुम्ही अडकलात किंवा AI अॅप्स तयार करण्याबद्दल काही प्रश्न असतील, तर सामील व्हा:
जर तुम्हाला उत्पादनाबद्दल अभिप्राय द्यायचा असेल किंवा तयार करताना काही त्रुटी आढळल्या तर भेट द्या:
परवाना
या रिपॉझिटरीला MIT परवान्याखाली परवानगी दिली आहे. अधिक माहितीसाठी LICENSE फाइल पहा.
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.


