Õpi veebiarenduse põhialuseid meie 12-nädalase põhjaliku kursusega, mida viivad läbi Microsoft Cloud Advocates. Kõik 24 õppetundi süvenevad JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmose mängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Paranda oma oskusi ja optimeeri teadmiste meeldejätmist meie tõhusa projektipõhise pedagoogikaga. Alusta oma programmeerimisteekonda juba täna!
Liitu Azure AI Foundry Discordi kogukonnaga
Järgige neid samme, et alustada nende ressursside kasutamist:
- Jaga hoidlaga: Klõpsake
- Kloonige hoidla:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Liitu Azure AI Foundry Discordiga ning kohtuge ekspertide ja teiste arendajatega
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Eelistad kohalikku kloonimist?
See hoidla sisaldab üle 50 keele tõlget, mis suurendab oluliselt allalaadimismahtu. Tõlgeteta kloonimiseks kasuta harva allalaaditava sisuga kloonimist (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'See annab sulle kõik vajaliku kursuse läbimiseks palju kiiremalt.
Kui soovid toetada täiendavaid tõlkekeeli, on nende loetelu siin
Külasta Tudengikeskuse lehte, kus leiad algajale suunatud ressursid, tudengipakid ja isegi võimalused saada tasuta sertifikaadikupong. See on leht, mille soovid järjehoidjaks panna ja aeg-ajalt külastada, sest sisu uuendatakse igakuiselt.
Lisandus uus väljakutse, otsi enamikest peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mida saad täita GitHub Copilot ja Agent režiimi abil. Kui sa pole varem Agent režiimi kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka faile luua ja muuta, käivitada käske ja palju muud.
Lisandus uus AI assistendi projekt, vaata lähemalt projektist
Ära jäta vahele meie uut Generatiivse AI õppekava!
Alusta aadressil https://aka.ms/genai-js-course!
- Õppetunnid käsitlevad kõike alates põhitõdedest kuni RAG-ni.
- Suhtle ajalooliste tegelastega GenAI ja meie kaasrakenduse abil.
- Lõbus ja kaasahaarav jutustus, kus rändad ajas!
Iga õppetund sisaldab sooritamiseks ülesannet, teadmiste kontrolli ja väljakutset, mis aitavad õpitavates valdkondades nagu:
- Päringute koostamine ja päringute inseneritehnika
- Teksti ja pildirakenduste genereerimine
- Otsingurakendused
Alusta aadressil https://aka.ms/genai-js-course!
Õpetajad, me oleme lisanud mõned soovitused siin, kuidas seda õppekava kasutada. Hindame väga teie tagasisidet meie arutelufoorumis!
Õppijad, alustage iga õppetundi eeloengu viktoriiniga, järgige loengumaterjali lugemist, sooritage erinevad tegevused ja kontrollige arusaamist järelõppe viktoriiniga.
Õppimise kogemuse parandamiseks looge ühendus oma eakaaslastega, et koos projektidega töötada! Arutelud on teretulnud meie arutelufoorumis, kus meie moderaatorite meeskond on valmis teie küsimustele vastama.
Veelgi rohkem õppimiseks soovitame tungivalt uurida Microsoft Learni lisastudiumimaterjale.
Sellel õppekaval on valmis arenduskeskkond! Kursuse alustamisel võid valida selle käivitamise Codespace’is (brauseripõhine, pole vaja midagi paigaldada), või kohalikult oma arvutis tekstitöötlusprogrammi nagu Visual Studio Code abil.
Selleks, et oleks lihtsam oma tööd salvestada, soovitatakse luua selle hoidla koopia. Seda saad teha, klõpsates lehe ülaosas nuppu Use this template. See loob uue hoidla sinu GitHubi kontole koos õppekava koopiaga.
Järgi neid samme:
- Jaga hoidlaga: Klõpsa selle lehe paremas ülanurgas nuppu "Fork".
- Kloonige hoidla:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Selles hoidla koopias, mille lõid, klõpsa nuppu Code ja vali Open with Codespaces. See loob sulle uue Codespace’i töötamiseks.
Selle õppekava kohalikuks käivitamiseks vajad tekstitöötlusprogrammi, brauserit ja käsurea tööriista. Meie esimene õppetund, Sissejuhatus programmeerimiskeeltesse ja tööriistadesse, juhatab sind läbi erinevate võimaluste ning aitab valida sobivad tööriistad.
Soovitame kasutada Visual Studio Code’i tekstiredaktorina, millel on ka sisseehitatud Terminal. Visual Studio Code’i saad alla laadida siit.
-
Kloonige oma hoidla oma arvutisse. Seda saad teha, klõpsates nuppu Code ja kopeerides URL:
CodeSpace Seejärel ava Terminal Visual Studio Code'i sees ja käivita järgmine käsk, asendades
<your-repository-url>äsja kopeeritud URL-iga:git clone <your-repository-url>
-
Ava kaust Visual Studio Code'is. Seda saad teha, klõpsates File > Open Folder ja valides äsja kloonitud kausta.
Soovitatud Visual Studio Code laiendused:
- Live Server – HTML-lehtede eelvaate kuvamiseks Visual Studio Code'is
- Copilot – aitab sul koodi kiiremini kirjutada
- valikuline visand
- valikuline lisavidin
- eelõppe soojendus-quiz
- kirjalik õppetund
- projektipõhiste õppetundide korral samm-sammult juhised projekti ehitamiseks
- teadmiste kontroll
- väljakutse
- lisalugemine
- ülesanne
- järgnev quiz
Märkused quizide kohta: Kõik quizid asuvad Quiz-app kaustas, kokku 48 quiz'i, igas kolm küsimust. Need on kättesaadavad siin. Quiz-rakendust saab käivitada lokaalselt või paigaldada Azure'i; järgi juhiseid
quiz-appkaustas.
| Projekti nimi | Õppekäsitlused | Õpieesmärgid | Seotud õppetund | Autor | |
|---|---|---|---|---|---|
| 01 | Alustamine | Programmeerimise ja tööriistade tutvustus | Õpi programmeerimiskeelte alustalasid ja tarkvara, mis aitab arendajatel tööd teha | Sihtprogrammide ja tööriistade sissejuhatus | Jasmine |
| 02 | Alustamine | GitHub'i alused, meeskonnatöö | Õpi kasutama GitHubi projektis ja koostööd koodibaasil | GitHub'i alused | Floor |
| 03 | Alustamine | Ligipääsetavus | Õpi veebipõhise ligipääsetavuse aluseid | Ligipääsetavuse alused | Christopher |
| 04 | JS algtõed | JavaScripti andmetüübid | JavaScripti andmetüüpide alused | Andmetüübid | Jasmine |
| 05 | JS algtõed | Funktsioonid ja meetodid | Õpi rakenduse loogika juhtimise funktsioonide ja meetodite kohta | Funktsioonid ja meetodid | Jasmine ja Christopher |
| 06 | JS algtõed | Otsuste tegemine JS abil | Õpi, kuidas koodis luua tingimusi otsustusmeetodite abil | Otsuste tegemine | Jasmine |
| 07 | JS algtõed | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklite abil JavaScriptis | Massiivid ja tsüklid | Jasmine |
| 08 | Terrarium | HTML praktikas | Ehitada HTML, et luua veebiterrarium, keskendudes paigutuse loomisele | Sissejuhatus HTML-i | Jen |
| 09 | Terrarium | CSS praktikas | Ehita CSS veebiterrariumi stiiliks, keskendudes CSS põhialustele sh lehe reageerivusele | Sissejuhatus CSS-i | Jen |
| 10 | Terrarium | JavaScripti sulgemised, DOM manipulatsioon | Ehita JavaScript, mis teeb terrariumi lohistamiskogemuseks, keskendudes sulgemistele ja DOM manipulatsioonile | JavaScript sulgemised, DOM manipulatsioon | Jen |
| 11 | Typing Game | Tippimismängu ehitamine | Õpi kasutama klaviatuurisündmusi oma JavaScripti rakenduse loogika juhtimiseks | Sündmustepõhine programmeerimine | Christopher |
| 12 | Green Browser Extension | Brauseritega töötamine | Õpi, kuidas brauserid toimivad, nende ajalugu ja kuidas esimesed elemendid brauserilaienduse jaoks üles seada | BROWSERID | Jen |
| 13 | Green Browser Extension | Vormide loomine, API kasutamine ja muutujate salvestamine kohalikku salve | Ehita oma brauserilaienduse JavaScripti osad API kutsumiseks ja kohalikku salvesse muutujate salvestamiseks | API-d, vormid ja kohalik salvestus | Jen |
| 14 | Green Browser Extension | Brauseril taustaprotsessid, veebitöötluse optimeerimine | Kasuta brauseri taustaprotsesse laiendi ikooni haldamiseks; õpi veebitöötluse ja optimeerimisvõtteid | Taustatöö ja jõudlus | Jen |
| 15 | Space Game | Täiustatud mänguarendus JavaScriptiga | Õpi pärandamist nii klasside kui kompositsiooni kaudu ning Pub/Sub mudelit, et valmistuda mängu ehitamiseks | Täpsem mänguarendus | Chris |
| 16 | Space Game | Joonistamine Canvasel | Õpi Canvas API kasutamist elementide joonistamiseks ekraanile | Joonistamine Canvasel | Chris |
| 17 | Space Game | Elementide liigutamine ekraanil | Avastage, kuidas objektid saavad liikuma kardiniaalsete koordinaatide ja Canvas API abil | Elementide liigutamine | Chris |
| 18 | Space Game | Kokkupõrgete tuvastamine | Pane objektid põrkama ja teineteisega reageerima klahvivajutuste abil, lisa jahutuse funktsioon mängu jõudluse tagamiseks | Kokkupõrgete tuvastamine | Chris |
| 19 | Space Game | Tulemustabeli hoidmine | Tee matemaatilisi arvutusi mängu oleku ja jõudluse põhjal | Tulemustabeli hoidmine | Chris |
| 20 | Space Game | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise protsessidest, sh ressursside vabastamine ja muutujate lähtestamine | Lõpetingimus | Chris |
| 21 | Banking App | Veebirakenduse HTML mallid ja marsruutimine | Õpi, kuidas luua mitme leheküljega veebilehe arhitektuur, kasutades marsruutimist ja HTML malle | HTML mallid ja marsruudid | Yohan |
| 22 | Banking App | Sisselogimis- ja registreerimisvorm | Õpi vormide loomist ja valideerimise haldamist | Vormid | Yohan |
| 23 | Banking App | Andmete pärimine ja kasutamine | Kuidas andmed sinu rakendusse sisenevad ja sealt väljuvad, kuidas neid pärida, salvestada ja lõpetada | Andmed | Yohan |
| 24 | Banking App | Staatuse halduse kontseptsioonid | Õpi, kuidas rakenduses hallata ja programmiliselt kontrollida olekut | Oleku haldus | Yohan |
| 25 | Browser/VScode Code | VScode kasutamine | Õpi kasutama koodi redaktorit | VScode koodi redaktori kasutamine | Chris |
| 26 | AI Assistants | Tehisintellekti kasutamine | Õpi looma oma AI assistenti | AI assistendi projekt | Chris |
Meie õppekava on loodud kahe peamise pedagoogilise printsiibi alusel:
- projektipõhine õpe
- sagedased testid
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja meetodeid. Õpilased saavad praktilise kogemuse, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosesissetungiva stiilis mängu ja pangarakenduse ettevõtetele. Sarja lõpus on õpilastel kindel arusaam veebiarendusest.
🎓 Võid võtta selle õppekava esimesed õppetunnid Microsoft Learn’i Õppeteekina!
Sisuga, mis on kooskõlas projektidega, muutub õppeprotsess õpilastele kaasahaaravamaks ja kontseptsioonide meeldejätmine paremini toimivaks. Samuti kirjutasime mitu JavaScripti baasõppetundi, et tutvustada kontseptsioone, kombineerituna videoga "Algajate sari: JavaScript" videotundide kogumikust, mille autorid sellest õppekavast osa võtsid.
Lisaks seab madala panusega quiz enne tundi õpilase fookuse teema õppimisele, ja teine quiz tunni järel aitab veelgi teadmisi kinnistada. See õppekava on mõeldud paindlikuks ja lõbusaks ning seda saab võtta tervikuna või osade kaupa. Projektid algavad väikselt ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks.
Kuigi oleme teadlikult vältinud JavaScripti raamistikute tutvustamist, et keskenduda esmalt veebiarendajana vajalikele põhioskustele enne raamistikku omaksvõttu, oleks järgmine samm selle õppekava lõpetamisel õppida Node.js kohta teise videotundide sarja kaudu: "Algajate sari: Node.js".
Visiit meie käitumisjuhisele ja panustamise suunistele. Ootame sinu konstruktiivset tagasisidet!
Seda dokumentatsiooni saab kasutada võrguühenduseta, kasutades Docsify. Pane see repo fork ja paigalda oma arvutisse Docsify. Selles repo juurkaustas käivita docsify serve. Veebileht on kättesaadav pordi 3000 kaudu sinu kohaliku arvutis: localhost:3000.
Kõik õppetunnid koos PDF-ina on saadaval siin.
Meie meeskond toodab ka teisi kursusi! Vaadake lähemalt:
-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}
Kui takerdud või sul on küsimusi tehisintellekti rakenduste loomise kohta, liitu teiste õppijate ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.
Kui sul on toote tagasisidet või tekib ehitamise käigus vigu, külastage:
See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata LICENSE faili.
Loaandmene:
See dokument on tõlgitud tehisintellekti tõlketeenuse Co-op Translator abil. Kuigi püüame tagada tõlke täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada usaldusväärseks allikaks. Olulise info puhul soovitatakse kasutada professionaalse inimese tõlget. Me ei vastuta võimalike arusaamatuste ega valesti mõistmiste eest, mis võivad tekkida selle tõlke kasutamisest.