39 KiB
या संसाधनांचा वापर सुरू करण्यासाठी खालील चरणांचे अनुसरण करा:
- रेपॉझिटरी फॉर्क करा: क्लिक करा
- रेपॉझिटरी क्लोन करा:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
- Azure AI Foundry Discord मध्ये सामील व्हा आणि तज्ञ व इतर डेव्हलपर्सशी संवाद साधा
नवशिक्यांसाठी वेब डेव्हलपमेंट - अभ्यासक्रम
Microsoft Cloud Advocates कडून 12 आठवड्यांचा व्यापक कोर्स घेऊन वेब डेव्हलपमेंटचे मूलभूत तत्त्वे शिका. प्रत्येक 24 धड्यांमध्ये JavaScript, CSS, आणि HTML शिकवले जाते, ज्यामध्ये टेरॅरियम्स, ब्राउझर एक्सटेंशन्स, आणि स्पेस गेम्ससारखे प्रोजेक्ट्स असतात. क्विझ, चर्चा, आणि प्रॅक्टिकल असाइनमेंट्ससह सहभाग घ्या. प्रोजेक्ट-आधारित शिक्षण पद्धतीने तुमचे कौशल्य वाढवा आणि ज्ञान टिकवून ठेवा. आजच तुमचा कोडिंग प्रवास सुरू करा!
🧑🎓 तुम्ही विद्यार्थी आहात का?
Student Hub पृष्ठाला भेट द्या जिथे तुम्हाला नवशिक्यांसाठी संसाधने, विद्यार्थी पॅक्स, आणि मोफत प्रमाणपत्र वाउचर मिळवण्याचे मार्ग सापडतील. हे पृष्ठ बुकमार्क करा आणि वेळोवेळी तपासा कारण आम्ही दर महिन्याला सामग्री बदलतो.
📣 घोषणा - नवीन अभ्यासक्रम 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 एडिटर म्हणून वापरा, ज्यामध्ये एक अंगभूत टर्मिनल देखील आहे. तुम्ही इथे Visual Studio Code डाउनलोड करू शकता.
-
तुमची रेपॉझिटरी तुमच्या संगणकावर क्लोन करा. तुम्ही Code बटणावर क्लिक करून URL कॉपी करू शकता:
नंतर, Visual Studio Code मधील टर्मिनल उघडा आणि खालील कमांड चालवा,
<your-repository-url>
URL ने बदला:git clone <your-repository-url>
-
Visual Studio Code मध्ये फोल्डर उघडा. तुम्ही File > Open Folder वर क्लिक करून क्लोन केलेला फोल्डर निवडू शकता.
Visual Studio Code साठी शिफारसीय एक्सटेंशन्स:
- Live Server - HTML पृष्ठे Visual Studio Code मध्ये प्रीव्ह्यू करण्यासाठी
- 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 Closures, DOM manipulation | JavaScript वापरून टेरॅरियमला ड्रॅग/ड्रॉप इंटरफेससारखे कार्य करण्यासाठी तयार करा, ज्यामध्ये क्लोजर्स आणि DOM मॅनिप्युलेशनवर लक्ष केंद्रित केले आहे | JavaScript Closures, DOM manipulation | Jen |
11 | Typing Game | टायपिंग गेम तयार करा | कीबोर्ड इव्हेंट्सचा वापर करून तुमच्या JavaScript अॅपचे लॉजिक कसे चालवायचे ते शिका | Event-Driven Programming | Christopher |
12 | Green Browser Extension | ब्राउझरसोबत काम करणे | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास, आणि ब्राउझर एक्स्टेंशनच्या पहिल्या घटकांचे स्कॅफोल्डिंग कसे करायचे ते शिका | About Browsers | Jen |
13 | Green Browser Extension | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स साठवणे | स्थानिक स्टोरेजमध्ये साठवलेल्या व्हेरिएबल्सचा वापर करून API कॉल करण्यासाठी तुमच्या ब्राउझर एक्स्टेंशनचे JavaScript घटक तयार करा | APIs, Forms, and Local Storage | Jen |
14 | Green Browser Extension | ब्राउझरमधील बॅकग्राउंड प्रक्रिया, वेब कार्यक्षमता | एक्स्टेंशनच्या आयकॉनचे व्यवस्थापन करण्यासाठी ब्राउझरच्या बॅकग्राउंड प्रक्रियेचा वापर करा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशनबद्दल शिका | Background Tasks and Performance | Jen |
15 | Space Game | JavaScript सह अधिक प्रगत गेम डेव्हलपमेंट | वर्ग आणि कंपोझिशन वापरून इनहेरिटन्सबद्दल शिका आणि गेम तयार करण्याच्या तयारीसाठी Pub/Sub पॅटर्न समजून घ्या | Introduction to Advanced Game Development | Chris |
16 | Space Game | कॅनव्हासवर रेखाटन | स्क्रीनवर घटक रेखाटण्यासाठी वापरल्या जाणाऱ्या कॅनव्हास API बद्दल शिका | Drawing to Canvas | Chris |
17 | Space Game | स्क्रीनवर घटक हलवणे | घटकांना कार्टेशियन कोऑर्डिनेट्स आणि कॅनव्हास API चा वापर करून गती कशी मिळवता येते ते शोधा | Moving Elements Around | Chris |
18 | Space Game | टक्कर शोधणे | घटकांना एकमेकांशी टक्कर देणे आणि कीप्रेसचा वापर करून प्रतिक्रिया देणे, तसेच गेमची कार्यक्षमता सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करा | Collision Detection | Chris |
19 | Space Game | स्कोअर ठेवणे | गेमच्या स्थिती आणि कार्यक्षमतेच्या आधारे गणितीय गणना करा | Keeping Score | Chris |
20 | Space Game | गेम संपवणे आणि पुन्हा सुरू करणे | गेम संपवणे आणि पुन्हा सुरू करणे, त्यात अॅसेट्स साफ करणे आणि व्हेरिएबल व्हॅल्यूज रीसेट करणे याबद्दल शिका | The Ending Condition | Chris |
21 | Banking App | वेब अॅपमध्ये HTML टेम्पलेट्स आणि रूट्स | रूटिंग आणि HTML टेम्पलेट्स वापरून मल्टीपेज वेबसाइटच्या आर्किटेक्चरचे स्कॅफोल्ड कसे तयार करायचे ते शिका | HTML Templates and Routes | Yohan |
22 | Banking App | लॉगिन आणि रजिस्ट्रेशन फॉर्म तयार करा | फॉर्म तयार करणे आणि व्हॅलिडेशन रूटीन हाताळणे याबद्दल शिका | Forms | Yohan |
23 | Banking App | डेटा मिळवण्याचे आणि वापरण्याचे पद्धती | तुमच्या अॅपमध्ये डेटा कसा प्रवाहित होतो, तो कसा मिळवायचा, साठवायचा आणि त्याचा नाश कसा करायचा ते शिका | Data | Yohan |
24 | Banking App | स्टेट मॅनेजमेंटची संकल्पना | तुमचे अॅप स्टेट कसे राखते आणि ते प्रोग्रामॅटिकली कसे व्यवस्थापित करायचे ते शिका | State Management | Yohan |
🏫 शिक्षण पद्धती
आमचे अभ्यासक्रम दोन महत्त्वाच्या शैक्षणिक तत्त्वांवर आधारित आहेत:
- प्रकल्प-आधारित शिक्षण
- वारंवार क्विझ
हा कार्यक्रम JavaScript, HTML, आणि CSS चे मूलतत्त्व तसेच आजच्या वेब डेव्हलपर्सद्वारे वापरल्या जाणाऱ्या नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, वर्च्युअल टेरॅरियम, पर्यावरणपूरक ब्राउझर एक्स्टेंशन, स्पेस-इनव्हेडर-शैलीतील गेम, आणि व्यवसायांसाठी बँकिंग अॅप तयार करून प्रत्यक्ष अनुभव मिळवण्याची संधी मिळेल. या मालिकेच्या शेवटी, विद्यार्थ्यांना वेब डेव्हलपमेंटचे सखोल ज्ञान मिळालेले असेल.
🎓 तुम्ही या अभ्यासक्रमातील काही पहिल्या धडे Learn Path वर Microsoft Learn वर घेऊ शकता!
प्रकल्पांशी सामग्री जुळवून, विद्यार्थ्यांसाठी प्रक्रिया अधिक आकर्षक बनवली जाते आणि संकल्पनांची आठवण अधिक चांगली होते. आम्ही JavaScript मूलभूत गोष्टींची ओळख करून देण्यासाठी काही स्टार्टर धडे लिहिले आहेत, ज्यामध्ये "Beginners Series to: JavaScript" या व्हिडिओ ट्यूटोरियल मालिकेतील व्हिडिओ जोडले आहेत, ज्यांचे काही लेखक या अभ्यासक्रमात योगदान देणारे आहेत.
याशिवाय, वर्गापूर्वी कमी दबावाचा क्विझ विद्यार्थ्याला विषय शिकण्याच्या उद्देशाकडे वळवतो, तर वर्गानंतरचा दुसरा क्विझ संकल्पनांची अधिक चांगली आठवण करून देतो. हा अभ्यासक्रम लवचिक आणि मजेदार बनवण्यासाठी डिझाइन केला गेला आहे आणि तो पूर्ण किंवा अंशतः घेतला जाऊ शकतो. प्रकल्प लहान स्वरूपात सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी अधिकाधिक जटिल होतात.
आम्ही जाणीवपूर्वक JavaScript फ्रेमवर्क्सची ओळख टाळली आहे, जेणेकरून फ्रेमवर्क स्वीकारण्यापूर्वी वेब डेव्हलपर म्हणून आवश्यक मूलभूत कौशल्यांवर लक्ष केंद्रित करता येईल. हा अभ्यासक्रम पूर्ण केल्यानंतर पुढील चांगले पाऊल म्हणजे "Beginner Series to: Node.js" या व्हिडिओ मालिकेद्वारे 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
- 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
- Mastering GitHub Copilot for C#/.NET Developers
- Choose Your Own Copilot Adventure
परवाना
हे रेपॉजिटरी MIT परवान्याअंतर्गत परवानाकृत आहे. अधिक माहितीसाठी LICENSE फाइल पहा.
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.