43 KiB
या संसाधनांचा वापर सुरू करण्यासाठी खालील चरणांचे अनुसरण करा:
- रेपॉझिटरी फोर्क करा: क्लिक करा
- रेपॉझिटरी क्लोन करा:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
- Azure AI Foundry Discord मध्ये सामील व्हा आणि तज्ञ व इतर डेव्हलपर्सशी भेटा
नवशिक्यांसाठी वेब डेव्हलपमेंट - अभ्यासक्रम
Microsoft Cloud Advocates द्वारे तयार केलेल्या 12 आठवड्यांच्या व्यापक कोर्ससह वेब डेव्हलपमेंटचे मूलभूत तत्त्वे शिका. प्रत्येक 24 धड्यांमध्ये JavaScript, CSS, आणि HTML यांचा समावेश आहे, ज्यामध्ये टेरॅरियम्स, ब्राउझर एक्सटेंशन्स, आणि स्पेस गेम्ससारख्या प्रोजेक्ट्सद्वारे शिकवले जाते. क्विझ, चर्चा, आणि प्रॅक्टिकल असाइनमेंट्ससह सहभाग घ्या. आमच्या प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धतीसह तुमचे कौशल्य वाढवा आणि तुमचे ज्ञान टिकवून ठेवा. आजच तुमचा कोडिंग प्रवास सुरू करा!
🌐 बहुभाषिक समर्थन
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 सहाय्यक प्रोजेक्ट नुकताच जोडला आहे, तपासा प्रोजेक्ट
📣 घोषणा - नवीन अभ्यासक्रम JavaScript साठी जनरेटिव्ह 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 क्लिक करून हे करू शकता.
फोल्डर उघडा आणि तुम्ही नुकतेच क्लोन केलेला फोल्डर निवडा. Visual Studio Code साठी शिफारस केलेले विस्तार:
- Live Server - Visual Studio Code मध्ये HTML पृष्ठांचे पूर्वावलोकन करण्यासाठी
- Copilot - कोड जलद लिहिण्यास मदत करण्यासाठी
📂 प्रत्येक धड्यात समाविष्ट आहे:
- ऐच्छिक स्केच नोट
- ऐच्छिक पूरक व्हिडिओ
- धड्यापूर्वीचा वॉर्मअप क्विझ
- लेखी धडा
- प्रकल्प-आधारित धड्यांसाठी, प्रकल्प कसा तयार करायचा याचे टप्प्याटप्प्याचे मार्गदर्शन
- ज्ञान तपासणी
- एक आव्हान
- पूरक वाचन
- असाइनमेंट
- धड्यानंतरचा क्विझ
क्विझबद्दल एक टीप: सर्व क्विझ Quiz-app फोल्डरमध्ये आहेत, एकूण 48 क्विझ, प्रत्येकी तीन प्रश्नांसह. ते येथे उपलब्ध आहेत. Quiz app स्थानिकरित्या चालवता येते किंवा 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 | Typing Game | टायपिंग गेम तयार करा | JavaScript अॅपच्या लॉजिकला चालवण्यासाठी कीबोर्ड इव्हेंट्स कसे वापरायचे ते जाणून घ्या | इव्हेंट-ड्रिव्हन प्रोग्रामिंग | Christopher |
12 | Green Browser Extension | ब्राउझर्ससह काम करणे | ब्राउझर्स कसे कार्य करतात, त्यांचा इतिहास, आणि ब्राउझर विस्ताराच्या पहिल्या घटकांचे स्कॅफोल्ड कसे तयार करायचे ते जाणून घ्या | ब्राउझर्सबद्दल | Jen |
13 | Green Browser Extension | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स साठवणे | स्थानिक स्टोरेजमध्ये साठवलेल्या व्हेरिएबल्सचा वापर करून API कॉल करण्यासाठी ब्राउझर विस्ताराचे JavaScript घटक तयार करा | APIs, फॉर्म्स, आणि स्थानिक स्टोरेज | Jen |
14 | Green Browser Extension | ब्राउझरमधील पार्श्वभूमी प्रक्रिया, वेब कार्यक्षमता | विस्ताराच्या आयकॉनचे व्यवस्थापन करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रियेचा वापर करा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशनबद्दल जाणून घ्या | पार्श्वभूमी कार्ये आणि कार्यक्षमता | Jen |
15 | Space Game | JavaScript सह अधिक प्रगत गेम विकास | गेम तयार करण्याच्या तयारीसाठी वर्ग आणि रचना यांचा वापर करून इनहेरिटन्स आणि Pub/Sub पॅटर्नबद्दल जाणून घ्या | प्रगत गेम विकासाची ओळख | Chris |
16 | Space Game | कॅनव्हासवर रेखाटन | स्क्रीनवर घटक रेखाटण्यासाठी वापरल्या जाणाऱ्या कॅनव्हास API बद्दल जाणून घ्या | कॅनव्हासवर रेखाटन | Chris |
17 | Space Game | स्क्रीनवर घटक हलवणे | घटकांना कसे गती मिळू शकते ते कॅर्टेशियन कोऑर्डिनेट्स आणि कॅनव्हास API चा वापर करून शोधा | घटक हलवणे | Chris |
18 | Space Game | टक्कर शोधणे | घटकांना एकमेकांशी टक्कर करणे आणि प्रतिक्रिया देणे, कीप्रेसचा वापर करून, आणि गेमची कार्यक्षमता सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करणे | टक्कर शोधणे | Chris |
19 | Space Game | स्कोअर ठेवणे | गेमच्या स्थिती आणि कार्यक्षमतेच्या आधारे गणितीय गणना करा | स्कोअर ठेवणे | Chris |
20 | Space Game | गेम संपवणे आणि पुन्हा सुरू करणे | गेम संपवणे आणि पुन्हा सुरू करणे, अॅसेट्स साफ करणे आणि व्हेरिएबल मूल्ये रीसेट करणे याबद्दल जाणून घ्या | समाप्ती अट | Chris |
21 | Banking App | HTML टेम्पलेट्स आणि वेब अॅपमधील रूट्स | रूटिंग आणि HTML टेम्पलेट्स वापरून मल्टीपेज वेबसाइटची आर्किटेक्चर कशी तयार करायची ते जाणून घ्या | HTML टेम्पलेट्स आणि रूट्स | Yohan |
22 | Banking App | लॉगिन आणि नोंदणी फॉर्म तयार करणे | फॉर्म तयार करणे आणि व्हॅलिडेशन रुटीन हाताळणे याबद्दल जाणून घ्या | फॉर्म्स | Yohan |
23 | Banking App | डेटा मिळवण्याचे आणि वापरण्याचे पद्धती | तुमच्या अॅपमध्ये डेटा कसा प्रवाहित होतो, तो कसा मिळवायचा, साठवायचा आणि त्याचा नाश कसा करायचा | डेटा | Yohan |
24 | Banking App | स्टेट मॅनेजमेंटची संकल्पना | तुमचे अॅप स्टेट कसे टिकवून ठेवते आणि ते प्रोग्रामॅटिकली कसे व्यवस्थापित करायचे ते जाणून घ्या | स्टेट मॅनेजमेंट | Yohan |
25 | Browser/VScode Code | VScode सह काम करणे | कोड एडिटर कसा वापरायचा ते जाणून घ्या | VScode कोड एडिटर वापरा | Chris |
26 | AI Assistants | AI सह काम करणे | तुमचा स्वतःचा AI सहाय्यक कसा तयार करायचा ते जाणून घ्या | AI सहाय्यक प्रकल्प | Chris |
🏫 अध्यापनशास्त्र
आमचे अभ्यासक्रम दोन प्रमुख अध्यापनशास्त्रीय तत्त्वांवर आधारित आहे:
- प्रकल्प-आधारित शिक्षण
- वारंवार क्विझ
हा कार्यक्रम JavaScript, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकसकांनी वापरल्या जाणाऱ्या नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, वर्च्युअल टेरॅरियम, पर्यावरणपूरक ब्राउझर विस्तार, स्पेस-इनव्हेडर-शैलीतील गेम, आणि व्यवसायांसाठी बँकिंग अॅप तयार करून व्यावहारिक अनुभव मिळवण्याची संधी मिळेल. या मालिकेच्या शेवटी, विद्यार्थ्यांना वेब विकासाचे सखोल ज्ञान मिळालेले असेल.
🎓 तुम्ही या अभ्यासक्रमातील काही सुरुवातीचे धडे Learn Path वर Microsoft Learn वर घेऊ शकता!
प्रकल्पांशी सामग्री संरेखित करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनवली जाते आणि संकल्पनांची आठवण अधिक चांगली होते. आम्ही JavaScript मूलभूत गोष्टींच्या काही सुरुवातीच्या धड्यांसह व्हिडिओ जोडले आहेत, जे "Beginners Series to: JavaScript" या व्हिडिओ मालिकेतील आहेत, ज्यातील काही लेखकांनी या अभ्यासक्रमात योगदान दिले आहे.
याशिवाय, वर्गापूर्वीचा कमी-ताणाचा क्विझ विद्यार्थ्याला विषय शिकण्याच्या उद्देशाकडे वळवतो, तर वर्गानंतरचा दुसरा क्विझ संकल्पनांची अधिक चांगली आठवण ठेवतो. हा अभ्यासक्रम लवचिक आणि मजेदार बनवण्यासाठी डिझाइन केला गेला आहे आणि तो पूर्ण किंवा अंशतः घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी अधिकाधिक जटिल होतात.
आम्ही जाणीवपूर्वक JavaScript फ्रेमवर्क्सची ओळख टाळली आहे, जेणेकरून फ्रेमवर्क स्वीकारण्यापूर्वी वेब विकसक म्हणून आवश्यक असलेल्या मूलभूत कौशल्यांवर लक्ष केंद्रित करता येईल. हा अभ्यासक्रम पूर्ण केल्यानंतर पुढील चांगले पाऊल म्हणजे Node.js बद्दल शिकणे, ज्यासाठी आणखी एक व्हिडिओ संग्रह आहे: "Beginner Series to: Node.js".
आमच्या Code of Conduct आणि Contributing मार्गदर्शक तत्त्वांना भेट द्या. आम्ही तुमच्या रचनात्मक अभिप्रायाचे स्वागत करतो!
🧭 ऑफलाइन प्रवेश
तुम्ही Docsify चा वापर करून ही दस्तऐवज ऑफलाइन चालवू शकता. या रेपोला फोर्क करा, Docsify इंस्टॉल करा तुमच्या स्थानिक मशीनवर, आणि मग या रेपोच्या मूळ फोल्डरमध्ये docsify serve
टाइप करा. वेबसाइट तुमच्या लोकलहोस्टवर पोर्ट 3000 वर चालवली जाईल: localhost:3000
.
सर्व धड्यांचा PDF येथे सापडेल.
🎒 इतर अभ्यासक्रम
आमची टीम इतर अभ्यासक्रम तयार करते! पहा:
- Generative AI for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- डेटा सायन्ससाठी नवशिके
- एमएलसाठी नवशिके
- सायबरसुरक्षा नवशिक्यांसाठी
- वेब डेव्हलपमेंटसाठी नवशिके
- IoT साठी नवशिके
- XR डेव्हलपमेंटसाठी नवशिके
- एजेंटिक वापरासाठी GitHub Copilot मध्ये प्राविण्य मिळवा
- C#/.NET डेव्हलपर्ससाठी GitHub Copilot मध्ये प्राविण्य मिळवा
- तुमचा स्वतःचा Copilot साहस निवडा
परवाना
या रिपॉझिटरीला MIT परवान्याखाली परवानगी दिली आहे. अधिक माहितीसाठी LICENSE फाइल पहा.
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator चा वापर करून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात घ्या की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील मूळ दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर केल्यामुळे उद्भवणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.