27 KiB
Fuata hatua hizi kuanza kutumia rasilimali hizi:
- Fork Hifadhi: Bonyeza
- Clone Hifadhi:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
- Jiunge na Azure AI Foundry Discord na ukutane na wataalamu na watengenezaji wenzako
Maendeleo ya Wavuti kwa Anayeanza - Mtaala
Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu ya wiki 12 iliyoandaliwa na Microsoft Cloud Advocates. Kila moja ya masomo 24 inachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama terrariums, viendelezi vya kivinjari, na michezo ya anga. Shiriki katika majaribio, mijadala, na kazi za vitendo. Boresha ujuzi wako na uimarisha maarifa yako kwa kutumia mbinu yetu ya kujifunza kupitia miradi. Anza safari yako ya usimbaji leo!
🌐 Msaada wa Lugha Nyingi
Inasaidiwa kupitia GitHub Action (Imeboreshwa na Inasasishwa Kila Wakati)
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)
Ikiwa ungependa lugha za ziada ziongezwe, orodha ya lugha zinazosaidiwa inapatikana hapa
🧑🎓 Je, wewe ni mwanafunzi?
Tembelea Ukurasa wa Hub ya Wanafunzi ambapo utapata rasilimali za wanaoanza, vifurushi vya wanafunzi na hata njia za kupata vocha ya cheti bila malipo. Huu ni ukurasa wa kuweka alama na kuangalia mara kwa mara kwani tunabadilisha maudhui kila mwezi.
📣 Tangazo - Mradi Mpya wa Kujenga kwa Kutumia AI Jenereta
Mradi mpya wa Msaidizi wa AI umeongezwa, angalia mradi
📣 Tangazo - Mtaala Mpya wa Generative AI kwa JavaScript umetolewa
Usikose mtaala wetu mpya wa Generative AI!
Tembelea https://aka.ms/genai-js-course kuanza!
- Masomo yanayofunika kila kitu kutoka misingi hadi RAG.
- Shirikiana na wahusika wa kihistoria kwa kutumia GenAI na programu yetu ya msaidizi.
- Hadithi ya kufurahisha na ya kuvutia, utasafiri kupitia wakati!
Kila somo linajumuisha kazi ya kukamilisha, ukaguzi wa maarifa, na changamoto ya kukuongoza kujifunza mada kama:
- Uundaji wa maelekezo na uhandisi wa maelekezo
- Uundaji wa programu za maandishi na picha
- Programu za utafutaji
Tembelea https://aka.ms/genai-js-course kuanza!
🌱 Kuanza
Walimu, tumetoa mapendekezo kadhaa ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako kwenye jukwaa letu la mijadala!
Wanafunzi, kwa kila somo, anza na jaribio la awali la somo na ufuatilie kwa kusoma nyenzo za somo, kukamilisha shughuli mbalimbali na angalia uelewa wako kwa jaribio la baada ya somo.
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya kazi kwenye miradi pamoja! Mijadala inahimizwa kwenye jukwaa letu la mijadala ambapo timu yetu ya wasimamizi itapatikana kujibu maswali yako.
Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza Microsoft Learn kwa nyenzo za ziada za kujifunza.
📋 Kuweka Mazingira Yako
Mtaala huu una mazingira ya maendeleo tayari! Unapoanza unaweza kuchagua kuendesha mtaala katika Codespace (mazingira yanayotumia kivinjari, hakuna usakinishaji unaohitajika), au ndani ya kompyuta yako kwa kutumia mhariri wa maandishi kama Visual Studio Code.
Unda Hifadhi Yako
Ili kuhifadhi kazi yako kwa urahisi, inashauriwa uunde nakala yako ya hifadhi hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha Use this template juu ya ukurasa. Hii itaunda hifadhi mpya kwenye akaunti yako ya GitHub ikiwa na nakala ya mtaala.
Fuata hatua hizi:
- Fork Hifadhi: Bonyeza kitufe cha "Fork" kwenye kona ya juu-kulia ya ukurasa huu.
- Clone Hifadhi:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Kuendesha Mtaala Katika Codespace
Katika nakala yako ya hifadhi hii uliyoitengeneza, bonyeza kitufe cha Code na uchague Open with Codespaces. Hii itaunda Codespace mpya kwa ajili yako kufanya kazi ndani yake.
!Codespace./images/createcodespace.png)
Kuendesha Mtaala Katika Kompyuta Yako
Ili kuendesha mtaala huu ndani ya kompyuta yako, utahitaji mhariri wa maandishi, kivinjari, na zana ya mstari wa amri. Somo letu la kwanza, Utangulizi wa Lugha za Programu na Zana za Kazi, litakuelekeza kupitia chaguo mbalimbali za kila moja ya zana hizi ili uchague kinachokufaa zaidi.
Tunapendekeza utumie Visual Studio Code kama mhariri wako, ambao pia una Terminal iliyojengwa ndani. Unaweza kupakua Visual Studio Code hapa.
-
Clone hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha Code na kunakili URL:
Kisha, fungua Terminal ndani ya Visual Studio Code na endesha amri ifuatayo, ukibadilisha
<your-repository-url>
na URL uliyokopi:git clone <your-repository-url>
-
Fungua folda katika Visual Studio Code. Unaweza kufanya hivyo kwa kubonyeza File
Visual Studio Code zinazopendekezwa:
- Live Server - kuonyesha kurasa za HTML moja kwa moja ndani ya Visual Studio Code
- Copilot - kusaidia kuandika msimbo haraka
📂 Kila somo linajumuisha:
- sketchnote ya hiari
- video ya ziada ya hiari
- jaribio la awali la somo
- somo lililoandikwa
- kwa masomo yanayohusiana na miradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi
- ukaguzi wa maarifa
- changamoto
- usomaji wa ziada
- kazi ya nyumbani
- jaribio la baada ya somo
Kuhusu majaribio: Majaribio yote yamehifadhiwa kwenye folda ya Quiz-app, jumla ya majaribio 48 yenye maswali matatu kila moja. Yanapatikana hapa. Programu ya jaribio inaweza kuendeshwa ndani ya kompyuta yako au kupakiwa kwenye Azure; fuata maelekezo kwenye folda ya
quiz-app
.
🗃️ Masomo
Jina la Mradi | Dhana Zinazofundishwa | Malengo ya Kujifunza | Somo Lililounganishwa | Mwandishi | |
---|---|---|---|---|---|
01 | Kuanza | Utangulizi wa Uprogramishaji na Zana za Kazi | Jifunze misingi ya lugha nyingi za programu na programu zinazosaidia watengenezaji wa kitaalamu kufanya kazi zao | Utangulizi wa Lugha za Uprogramishaji na Zana za Kazi | Jasmine |
02 | Kuanza | Misingi ya GitHub, ikijumuisha kufanya kazi na timu | Jinsi ya kutumia GitHub kwenye mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa programu | Utangulizi wa GitHub | Floor |
03 | Kuanza | Ufikiaji | Jifunze misingi ya ufikiaji wa wavuti | Misingi ya Ufikiaji | Christopher |
04 | Misingi ya JS | Aina za Data za JavaScript | Misingi ya aina za data za JavaScript | Aina za Data | Jasmine |
05 | Misingi ya JS | Kazi na Mbinu | Jifunze kuhusu kazi na mbinu za kudhibiti mtiririko wa mantiki wa programu | Kazi na Mbinu | Jasmine na Christopher |
06 | Misingi ya JS | Kufanya Maamuzi na JS | Jifunze jinsi ya kuunda hali katika msimbo wako kwa kutumia mbinu za kufanya maamuzi | Kufanya Maamuzi | Jasmine |
07 | Misingi ya JS | Arrays na Loops | Fanya kazi na data kwa kutumia arrays na loops katika JavaScript | Arrays na Loops | Jasmine |
08 | Terrarium | HTML kwa Vitendo | Jenga HTML kuunda terrarium mtandaoni, ukizingatia mpangilio wa ukurasa | Utangulizi wa HTML | Jen |
09 | Terrarium | CSS kwa Vitendo | Jenga CSS ili kupamba terrarium mtandaoni, ukizingatia misingi ya CSS ikijumuisha kufanya ukurasa uwe wa kujibika | Utangulizi wa CSS | Jen |
10 | Terrarium | JavaScript Closures, Udhibiti wa DOM | Jenga JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/dondosha, ukizingatia closures na udhibiti wa DOM | JavaScript Closures, Udhibiti wa DOM | Jen |
11 | Typing Game | Jenga Mchezo wa Kuandika | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript | Programu Inayoendeshwa na Matukio | Christopher |
12 | Green Browser Extension | Kufanya Kazi na Vivinjari | Jifunze jinsi vivinjari hufanya kazi, historia yao, na jinsi ya kuunda vipengele vya kwanza vya kiendelezi cha kivinjari | Kuhusu Vivinjari | Jen |
13 | Green Browser Extension | Kujenga fomu, kuita API na kuhifadhi vigezo kwenye hifadhi ya ndani | Jenga vipengele vya JavaScript vya kiendelezi chako cha kivinjari ili kuita API kwa kutumia vigezo vilivyohifadhiwa kwenye hifadhi ya ndani | APIs, Fomu, na Hifadhi ya Ndani | Jen |
14 | Green Browser Extension | Michakato ya Nyuma kwenye Kivinjari, Utendaji wa Wavuti | Tumia michakato ya nyuma ya kivinjari kudhibiti ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya mbinu za uboreshaji | Kazi za Nyuma na Utendaji | Jen |
15 | Space Game | Uundaji wa Mchezo wa Kiwango cha Juu na JavaScript | Jifunze kuhusu Urithi kwa kutumia Darasa na Muundo na muundo wa Pub/Sub, kama maandalizi ya kujenga mchezo | Utangulizi wa Uundaji wa Mchezo wa Kiwango cha Juu | Chris |
16 | Space Game | Kuchora kwenye canvas | Jifunze kuhusu Canvas API, inayotumika kuchora vipengele kwenye skrini | Kuchora kwenye Canvas | Chris |
17 | Space Game | Kusogeza vipengele kwenye skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia kuratibu za Cartesian na Canvas API | Kusogeza Vipengele | Chris |
18 | Space Game | Kugundua Migongano | Fanya vipengele vigongane na kuathiriana kwa kutumia mikato ya kibodi na toa kazi ya kupunguza kasi ili kuhakikisha utendaji wa mchezo | Kugundua Migongano | Chris |
19 | Space Game | Kuhesabu Alama | Fanya mahesabu ya hesabu kulingana na hali ya mchezo na utendaji | Kuhesabu Alama | Chris |
20 | Space Game | Kumaliza na Kuanza Tena Mchezo | Jifunze kuhusu kumaliza na kuanza tena mchezo, ikijumuisha kusafisha mali na kuweka upya thamani za vigezo | Hali ya Kumaliza | Chris |
21 | Banking App | Violezo vya HTML na Njia katika Programu ya Wavuti | Jifunze jinsi ya kuunda muundo wa usanifu wa tovuti yenye kurasa nyingi kwa kutumia njia na violezo vya HTML | Violezo vya HTML na Njia | Yohan |
22 | Banking App | Jenga Fomu ya Kuingia na Kusajili | Jifunze kuhusu kujenga fomu na kushughulikia taratibu za uthibitishaji | Fomu | Yohan |
23 | Banking App | Mbinu za Kupata na Kutumia Data | Jinsi data inavyotiririka ndani na nje ya programu yako, jinsi ya kuipata, kuihifadhi, na kuitupa | Data | Yohan |
24 | Banking App | Dhana za Usimamizi wa Hali | Jifunze jinsi programu yako inavyohifadhi hali na jinsi ya kuisimamia kwa njia ya programu | Usimamizi wa Hali | Yohan |
25 | Browser/VScode Code | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo | Tumia Mhariri wa Msimbo wa VScode | Chris |
26 | AI Assistants | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi wako wa AI | Mradi wa Msaidizi wa AI | Chris |
🏫 Mbinu za Kufundisha
Mtaala wetu umeundwa kwa kuzingatia kanuni mbili kuu za ufundishaji:
- kujifunza kwa msingi wa miradi
- majaribio ya mara kwa mara
Programu inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za kisasa zinazotumiwa na watengenezaji wa wavuti wa leo. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya mtandaoni, kiendelezi cha kivinjari kinachojali mazingira, mchezo wa mtindo wa space-invader, na programu ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa na uelewa mzuri wa maendeleo ya wavuti.
🎓 Unaweza kuchukua masomo machache ya kwanza katika mtaala huu kama Njia ya Kujifunza kwenye Microsoft Learn!
Kwa kuhakikisha kuwa maudhui yanalingana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaongezeka. Pia tuliandika masomo kadhaa ya kuanzia katika misingi ya JavaScript ili kuanzisha dhana, pamoja na video kutoka kwenye mkusanyiko wa "Mfululizo wa Wanaoanza: JavaScript", baadhi ya waandishi wake walichangia kwenye mtaala huu.
Aidha, jaribio la hatari ndogo kabla ya darasa linaweka nia ya mwanafunzi kuelekea kujifunza mada, wakati jaribio la pili baada ya darasa linahakikisha uhifadhi zaidi. Mtaala huu uliundwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa ukamilifu au kwa sehemu. Miradi huanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Wakati tumekusudia kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mtengenezaji wa wavuti kabla ya kupitisha mfumo, hatua nzuri inayofuata baada ya kukamilisha mtaala huu itakuwa kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "Mfululizo wa Wanaoanza: Node.js".
Tembelea Kanuni za Maadili na miongozo ya Kuchangia. Tunakaribisha maoni yako ya kujenga!
🧭 Ufikiaji wa Nje ya Mtandao
Unaweza kuendesha nyaraka hizi nje ya mtandao kwa kutumia Docsify. Fork repo hii, sakinisha Docsify kwenye mashine yako ya ndani, kisha kwenye folda kuu ya repo hii, andika docsify serve
. Tovuti itahudumiwa kwenye bandari 3000 kwenye localhost yako: localhost:3000
.
PDF ya masomo yote inaweza kupatikana hapa.
🎒 Kozi Nyingine
Timu yetu inazalisha kozi nyingine! Angalia:
- Generative AI kwa Wanaoanza
- Generative AI kwa Wanaoanza .NET
- Generative AI na JavaScript
- Generative AI na Java
- AI kwa Wanaoanza
- Sayansi ya Data kwa Kompyuta Mpya
- Ujifunzaji wa Mashine kwa Kompyuta Mpya
- Usalama wa Mtandao kwa Kompyuta Mpya
- Uundaji wa Tovuti kwa Kompyuta Mpya
- IoT kwa Kompyuta Mpya
- Maendeleo ya XR kwa Kompyuta Mpya
- Kumiliki GitHub Copilot kwa Matumizi ya Wakala
- Kumiliki GitHub Copilot kwa Waendelezaji wa C#/.NET
- Chagua Safari Yako ya Copilot
Leseni
Hifadhi hii imesajiliwa chini ya leseni ya MIT. Tazama faili ya LICENSE kwa maelezo zaidi.
Kanusho:
Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI Co-op Translator. Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.