Microsoft क्लाउड अॅडव्होकेट्सद्वारे दिलेला 12 आठवड्यांचा व्यापक अभ्यासक्रम घेऊन वेब विकासाच्या मूलतत्त्वांचा अभ्यास करा. 24 धड्यांपैकी प्रत्येक धडा JavaScript, CSS आणि HTML मध्ये तंत्रज्ञानी प्रकल्पांद्वारे उदाहरणार्थ टेरारियम्स, ब्राउझर एक्सटेंशन्स, आणि स्पेस गेम्स यामधून समजावून घेतो. क्विझ, चर्चा, आणि व्यावहारिक असाइनमेंट्समध्ये सहभाग घ्या. आमच्या प्रभावी प्रकल्पाधारित शिकवणीच्या माध्यमातून आपले कौशल्य वाढवा आणि ज्ञान टिकवून ठेवा. आजच आपली कोडिंग यात्रा सुरू करा!
Azure AI Foundry Discord समुदायात सहभागी व्हा
या स्रोतांचा वापर सुरू करण्यासाठी या टप्प्यांचे अनुसरण करा:
- रेकॉजिटरी फोर्क करा: क्लिक करा
- रेकॉजिटरी क्लोन करा:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Azure AI Foundry Discord मध्ये सहभागी व्हा आणि तज्ञ व इतर विकसकांशी भेटा
अरेबिक | बांग्ला | बल्गेरियन | म्यानमार (बर्मीज) | चिनी (सोप्या) | चिनी (परंपरागत, हाँगकाँग) | चिनी (परंपरागत, मकाऊ) | चिनी (परंपरागत, तैवान) | क्रोएशियन | चेक | डॅनिश | डच | एस्टोनियन | फिनिश | फ्रेंच | जर्मन | ग्रीक | हीब्रू | हिंदी | हंगेरीयन | इंडोनेशियन | इटालियन | जपानी | कन्नड | कोरियन | लिथुनियन | मलय | मलयाळम | मराठी | नेपाली | नायजेरियन पिडगिन | नॉर्वेजियन | फारशी (पर्शियन) | पोलिश | ब्राझिलियन पोर्तुगीज | पोर्तुगीज (पुर्तगाल) | पंजाबी (गुरमुखी) | रोमानियन | रशियन | सर्बियन (सिरिलिक) | स्लोव्हाक | स्लोव्हेनियन | स्पॅनिश | स्वाहिली | स्वीडिश | टागालॉग (फिलिपिनो) | तमिळ | तेलुगू | थाई | तुर्किश | युक्रेनीयन | उर्दू | व्हिएतनामीज
स्थानिकरीत्या क्लोन करायचं का?
या रेकॉजिटरीमध्ये ५०+ भाषा अनुवाद आहेत जे डाउनलोड आकार मोठा करतात. अनुवादांशिवाय क्लोन करायच्यासाठी sparse checkout वापरा:
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'हे तुम्हाला या अभ्यासक्रमासाठी आवश्यक सर्व काही लवकर डाउनलोड करण्यास मदत करते.
जर तुम्हाला अतिरिक्त भाषांच्या अनुवादांची गरज असल्यास, त्या इथे यादीबद्ध केलेल्या आहेत
सुटंट हब पेजला भेट द्या जिथे तुम्हाला नवशिक्यांसाठी साधने, विद्यार्थी पॅक आणि अगदी मोफत प्रमाणपत्र कूपन मिळण्याचे मार्गही सापडतील. हा पृष्ठ तुम्हाला आवडल्यास त्याला बुकमार्क करा आणि वेळोवेळी तपासा कारण आम्ही दरमहा संसाधने बदलतो.
नवीन आव्हान जोडले आहे, बहुतेक अध्यायांमध्ये "GitHub Copilot Agent Challenge 🚀" पहा. हे तुम्हाला GitHub Copilot आणि Agent मोड वापरून पूर्ण करण्यासाठी नविन आव्हान आहे. जर तुम्ही Agent मोड कधी वापरला नसेल, तर हा फक्त मजकूर निर्माण करत नाही तर फायली तयार करणं, संपादित करणं, कमांड चालवणं आणि बरेच काही करू शकतो.
नवीन AI सहाय्यक प्रकल्प नुकताच जोडले आहे, येथे पहा प्रकल्प
आमचा नवीन Generative 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
तुमच्या तयार केलेल्या रेकॉजिटरी मध्ये, Code बटणावर क्लिक करा आणि Open with Codespaces निवडा. हे तुमच्यासाठी नवीन Codespace तयार करेल.
हा अभ्यासक्रम आपल्या संगणकावर स्थानिकरीत्या चालवण्यासाठी, तुम्हाला टेक्स्ट एडिटर, ब्राउझर आणि कमांड लाइन टूल लागेल. आमचा पहिला धडा Introduction to Programming Languages and Tools of the Trade तुम्हाला या टूल्ससाठी विविध पर्यायांची माहिती देईल जे तुम्हाला सर्वोत्कृष्ट कामासाठी निवडता येतील.
आमचा सल्ला आहे की तुम्ही Visual Studio Code वापरा, ज्यामध्ये एक अंतर्निर्मित Terminal देखील आहे. तुम्ही Visual Studio Code येथे डाउनलोड करू शकता येथे.
-
तुमची रेकॉजिटरी तुमच्या संगणकावर क्लोन करा. हे करण्यासाठी, Code बटणावर क्लिक करा आणि URL कॉपी करा:
CodeSpace मग, 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 | सुरुवात करणे | प्रोग्रामिंग परिचय आणि व्यापारातील साधने | बहुतेक प्रोग्रामिंग भाषांमागील मूलभूत तत्त्वे आणि व्यावसायिक विकसक त्यांच्या कामासाठी वापरतात अशा सॉफ्टवेअरबद्दल जाणून घ्या | प्रोग्रामिंग भाषांचे आणि व्यापारातील साधनांचे परिचय | Jasmine |
| 02 | सुरुवात करणे | GitHub चे मूलभूत तत्त्वे, संघासह काम करणे | तुमच्या प्रकल्पात GitHub कसा वापरायचा, कोड बेसवर इतरांसोबत कसा सहकार्य करायचा | GitHub परिचय | Floor |
| 03 | सुरुवात करणे | प्रवेशयोग्यता | वेब प्रवेशयोग्यतेच्या मूलभूत गोष्टी शिका | प्रवेशयोग्यता मूलतत्त्वे | Christopher |
| 04 | JS मूलभूत | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारांची मूलभूत माहिती | डेटा प्रकार | Jasmine |
| 05 | JS मूलभूत | फंक्शन्स आणि मेथड्स | अॅप्लिकेशनच्या लॉजिक फ्लोचे व्यवस्थापन करण्यासाठी फंक्शन्स आणि मेथड्स शिका | फंक्शन्स आणि मेथड्स | Jasmine आणि Christopher |
| 06 | JS मूलभूत | JS सह निर्णय कसे घ्यायचे | निर्णय घेण्याच्या पद्धती वापरून तुमच्या कोडमध्ये अटी कसे तयार करायच्या हे शिका | निर्णय घेणे | Jasmine |
| 07 | JS मूलभूत | अॅरे आणि लूप्स | JavaScript मध्ये अॅरे आणि लूप्स वापरून डेटा कसा हाताळायचा | अॅरे आणि लूप्स | Jasmine |
| 08 | Terrarium | HTML प्रत्यक्षात | ऑनलाइन टेरारियम तयार करण्यासाठी HTML तयार करा, लेआउट तयार करण्यावर लक्ष केंद्रित करा | HTML परिचय | Jen |
| 09 | Terrarium | CSS प्रत्यक्षात | ऑनलाइन टेरारियमसाठी CSS तयार करा, CSS च्या मूलभूत गोष्टी आणि पृष्ठ प्रतिसादक्षम पद्धतीवर लक्ष केंद्रित करा | CSS परिचय | Jen |
| 10 | Terrarium | JavaScript क्लोजर्स, DOM व्यवस्थापन | ड्रॅग/ड्रॉप इंटरफेस कार्य करण्यासाठी JavaScript तयार करा, क्लोजर्स आणि DOM व्यवस्थापनावर लक्ष केंद्रित करा | JavaScript क्लोजर्स, DOM व्यवस्थापन | Jen |
| 11 | टायपिंग गेम | टायपिंग गेम तयार करा | कीबोर्ड इव्हेंट्सचा वापर करून तुमच्या JavaScript अॅपचा लॉजिक कसा नियंत्रित करायचा हे शिका | इव्हेंट-चालित प्रोग्रामिंग | Christopher |
| 12 | ग्रीन ब्राउझर विस्तार | ब्राउझर सह काम करणे | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास, आणि ब्राउझर विस्ताराचे पहिले घटक तयार करण्याविषयी शिका | ब्राउझर बद्दल | Jen |
| 13 | ग्रीन ब्राउझर विस्तार | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक संग्रहात चलन जतन करणे | JavaScript चा वापर करून ब्राउझर विस्ताराचा API कॉल करा आणि स्थानिक संग्रहातील चलनांचा वापर करा | API, फॉर्म्स आणि स्थानिक संग्रह | Jen |
| 14 | ग्रीन ब्राउझर विस्तार | ब्राउझरमधील पार्श्वभूमी प्रक्रिया, वेब कार्यक्षमता | विस्ताराच्या चिन्हाचे व्यवस्थापन करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रिया वापरा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशन्स बद्दल शिका | पार्श्वभूमी कार्य आणि कार्यक्षमता | Jen |
| 15 | स्पेस गेम | JavaScript सह अधिक प्रगत गेम विकास | क्लासेस आणि कंपोझिशन वापरून वारसा घेणे आणि Pub/Sub पॅटर्नबद्दल शिका, गेम तयार करण्यासाठी तयारी करा | प्रगत गेम विकास परिचय | Chris |
| 16 | स्पेस गेम | कॅनव्हासवर रेखांकन | स्क्रीनवर घटक रेखाटण्यासाठी वापरल्या जाणार्या Canvas API बद्दल शिका | कॅनव्हासवर रेखाटन | Chris |
| 17 | स्पेस गेम | स्क्रीनवर घटक हलविणे | कर्टिझियन समन्वय आणि Canvas API वापरून घटकांना हालचाल कशी मिळते हे शोधा | घटक हलविणे | Chris |
| 18 | स्पेस गेम | टक्कर शोधणे | की प्रेस वापरून घटकांमध्ये टक्कर येणे आणि प्रतिसाद देणे तसेच गेमच्या कार्यक्षमतेसाठी कूलडाउन फंक्शन प्रदान करणे | टक्कर शोधणे | Chris |
| 19 | स्पेस गेम | गुणांक ठेवणे | गेमच्या स्थिती आणि कार्यक्षमतेवर आधारित गणिती गणना करा | गुणांक ठेवणे | Chris |
| 20 | स्पेस गेम | गेम संपविणे आणि पुन्हा सुरू करणे | गेम संपविणे आणि पुन्हा सुरू करण्याबाबत शिका, ज्यामध्ये संसाधने स्वच्छ करणे आणि चलन रीसेट करणे समाविष्ट आहे | समाप्ती अट | Chris |
| 21 | बँकिंग अॅप | वेब अॅपमधील HTML टेम्पलेट्स आणि मार्गदर्शन | राऊटिंग आणि HTML टेम्पलेट्सचा वापर करून बहुपृष्ठ वेबसाइटचे वास्तुकला कसे तयार करायची हे शिका | HTML टेम्पलेट्स आणि मार्ग | Yohan |
| 22 | बँकिंग अॅप | लॉगिन आणि नोंदणी फॉर्म तयार करणे | फॉर्म तयार करणे आणि व्हॅलिडेशन रूटिन हाताळण्याबद्दल शिका | फॉर्म्स | Yohan |
| 23 | बँकिंग अॅप | डेटा आणण्याचे आणि वापरण्याचे पद्धती | तुमच्या अॅपमध्ये डेटा कसा येतो आणि जातो, कसा आणायचा, संग्रहित करायचा, आणि कसा दूर करायचा याबद्दल शिका | डेटा | Yohan |
| 24 | बँकिंग अॅप | राज्य व्यवस्थापन संकल्पना | तुमचा अॅप कसा राज्य धारण करतो आणि प्रोग्रामरद्वारे कसा व्यवस्थापित करायचा हे शिका | राज्य व्यवस्थापन | Yohan |
| 25 | ब्राउझर/VScode कोड | VScode सोबत काम करणे | कोड एडिटर कसा वापरायचा शिका | VScode कोड एडिटर वापरा | Chris |
| 26 | AI सहाय्यक | AI सह काम करणे | तुमचा स्वतःचा AI सहाय्यक कसा तयार करायचा शिका | AI सहाय्यक प्रकल्प | Chris |
आमचा अभ्यासक्रम दोन मुख्य अध्यापनशास्त्रीय तत्त्वे लक्षात घेऊन तयार केला आहे:
- प्रकल्पाधारित शिक्षण
- वारंवार क्विझ
हा कार्यक्रम JavaScript, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकसकांनी वापरल्या जाणार्या नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, आभासी टेररियम, पर्यावरणपूरक ब्राउझर विस्तार, स्पेस-इनवेडर-शैलीचा गेम, आणि व्यवसायिकांसाठी बँकिंग अॅप तयार करून प्रत्यक्ष अनुभव मिळविण्याची संधी मिळेल. या मालिकेच्या शेवटी, विद्यार्थ्यांना वेब विकासाचे मजबूत समज प्राप्त होईल.
🎓 तुम्ही या अभ्यासक्रमातील पहिले काही धडे Microsoft Learn वर Learn Path म्हणून घेऊ शकता!
प्रकल्पांसह सामग्री संरेखित करून, विद्यार्थ्यांसाठी मजेशीर आणि आकर्षक प्रक्रिया तयार केली जाते आणि संकल्पनांची जपणूक वाढवली जाते. आम्ही JavaScript मूलभूत गोष्टी समजावण्यासाठी काही प्रारंभिक धडे लिहिले आहेत, ज्यात "Beginners Series to: JavaScript" व्हिडिओ ट्युटोरियल मधील काही लेखकांनी योगदान दिले आहे.
शिवाय, वर्गापूर्वी कमी-दबावाचा क्विझ नोंदणीची तयारी तयार करतो, तर वर्गानंतरचा क्विझ अधिक टिकाऊपणा सुनिश्चित करतो. हा अभ्यासक्रम लवचिक आणि मजेदार असेल आणि संपूर्ण किंवा भागांमध्ये घेतला जाऊ शकतो. प्रकल्प सुरुवातीला लहान असतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी हळूहळू जास्त गुंतागुंतीचे होतात.
आम्ही जाणूनबुजून JavaScript फ्रेमवर्क परिचय टाळल्याने वेब विकसक म्हणून मूलभूत कौशल्यांवर लक्ष केंद्रित केले आहे, फ्रेमवर्क स्वीकारण्यापूर्वी; या अभ्यासक्रमाला पूर्ण करण्याचा चांगला पुढील टप्पा म्हणजे Node.js बद्दल दुसऱ्या व्हिडिओ संचाद्वारे शिकणे: "Beginner Series to: Node.js".
आमच्या आचारसंहिता आणि योगदान मार्गदर्शक तत्वे पाहा. तुमचे रचनात्मक अभिप्राय स्वागतार्ह आहे!
तुम्ही या दस्तऐवजाला ऑफलाइन Docsify वापरून चालवू शकता. हा रेपो फोर्क करा, तुमच्या स्थानिक मशीनवर Docsify स्थापित करा, नंतर या रेपोच्या मूळ फोल्डरमध्ये docsify serve टाकून चालवा. वेबसाईट तुमच्या लोकलहोस्टवर पोर्ट 3000 वर सेवा देईल: localhost:3000.
सर्व धड्यांचा PDF येथे उपलब्ध आहे.
आमचे टीम इतर अभ्यासक्रम देखील तयार करते! येथे पाहा:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
जर तुम्हाला अडचण आल्यास किंवा AI अॅप्स विकसित करताना काही प्रश्न असतील. तर MCP बद्दलचे चर्चांमध्ये शिका आणि अनुभवी विकासकांसोबत सहभागी व्हा. ही एक सहायक समुदाय आहे जिथे प्रश्न विचारले जातात आणि ज्ञान मोकळेपणाने वाटले जाते.
जर तुम्हाला उत्पादनाबाबत अभिप्राय किंवा अडचणी असतील तर येथे भेट द्या:
हा रेपॉझिटरी MIT परवान्याअंतर्गत परवाना आहे. अधिक माहितीसाठी LICENSE फाइल पाहा.
अस्वीकरण: हा दस्तऐवज AI अनुवाद सेवा Co-op Translator वापरून अनुवादित केलेला आहे. आम्ही नेहमीच अचूकतेसाठी प्रयत्न करतो, तरी कृपया लक्षात घ्या की स्वयंचलित अनुवादांमध्ये चुका किंवा असत्यता असू शकते. मूळ दस्तऐवज त्याच्या स्थानिक भाषेत अधिकृत स्रोत मानावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी अनुवादाची शिफारस केली जाते. या अनुवादाच्या वापरातून उद्भवणाऱ्या कोणत्याही गैरसमजुतीसाठी किंवा चुकीच्या अर्थनिर्देशासाठी आम्ही जबाबदार नाही.