Õppige veebiarenduse põhialuseid meie Microsoft Cloud Advocates 12-nädalase põhjaliku kursusega. Iga 24 õppetundi sukeldub JavaScripti, CSS-i ja HTML-i praktiliste projektide kaudu, nagu terrariumid, brauserilaiendid ja kosmosemängud. Osalege viktoriinides, aruteludes ja praktilistes ülesannetes. Täiendage oma oskusi ja optimeerige teadmiste omandamist meie tõhusa projektipõhise pedagoogiaga. Alustage oma programmeerimisteekonda juba täna!
Liituge Azure AI Foundry Discordi kogukonnaga
Järgige neid samme, et alustada nende ressursside kasutamist:
- Tehke hoidlast Fork: Klõpsake
- Klooni hoidla:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Liituge Azure AI Foundry Discordiga ja kohtuge ekspertide ning 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 | Khmer | 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
Eelistate kloonida lokaalselt?
See hoidla sisaldab üle 50 keele tõlget, mis suurendab oluliselt allalaaditava faili suurust. Tõlgeteta kloonimiseks kasutage sparse checkouti:
Bash / macOS / Linux:
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'CMD (Windows):
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 teile kõik vajaliku kursuse läbimiseks palju kiirema allalaadimisega.
Kui soovite, et toetataks täiendavaid tõlkekeeli, on need loetletud siin
Külasta Õpilase keskuse lehte, kus leiad algajate ressursid, õpilaspakid ja isegi võimalusi saada tasuta sertifikaadikuponk. Seda lehte soovitatakse järjehoidjates hoida ja aeg-ajalt kontrollida, sest me vahetame sisu igakuiselt.
Lisatud uus väljakutse - otsi pealkirja "GitHub Copilot Agent Challenge 🚀" enamikus peatükkides. See on uus väljakutse GitHub Copiloti ja agendi režiimis kasutamiseks. Kui sa pole agendi režiimi varem kasutanud, siis see suudab lisaks teksti genereerimisele ka faile luua ja muuta, käsklusi jooksutada ja palju muud.
Lisatud on uus AI abiprojekt, vaata projekti
Ära jäta vahele meie uut generatiivse tehisintellekti õppekava!
Alusta aadressil https://aka.ms/genai-js-course!
- Õppetunnid hõlmavad kõike alates põhialustest kuni RAG-ini.
- Suhtle ajalooliste tegelastega GenAI ja meie kaasrakenduse abil.
- Lõbus ja kaasahaarav narratiiv, sa rändad ajas!
Iga õppetund sisaldab ülesannet, teadmiste kontrolli ja väljakutset, mis juhib sind järgmiste teemade õppimisel:
- Päringute koostamine ja päringute inseneritöö
- Teksti ja pildi rakenduste genereerimine
- Otsingurakendused
Alusta aadressil https://aka.ms/genai-js-course!
Õpetajad, oleme lisanud mõned soovitused selle õppekava kasutamiseks. Ootame teie tagasisidet meie arutelufoorumis!
Õppijad, iga õppetunni juures alustage eelloenguviktoriiniga ja jätkake loengumaterjali lugemise, erinevate tegevuste lõpetamise ja järelviktoriini tegemisega oma arusaamise kontrollimiseks.
Et parandada õpikogemust, ühenduge oma eakaaslastega, et projektides koos töötada! Arutelud on teretulnud meie arutelufoorumis, kus meie moderaatorite meeskond vastab teie küsimustele.
Hariduse süvendamiseks soovitame tungivalt uurida Microsoft Learn täiendavate õppematerjalide jaoks.
Sellel õppekaval on valmis arenduskeskkond! Alustades võite valida kursuse käivitamiseks Codespace'is (brauseripõhine, ilma installeerimiseta keskkond) või lokaalselt oma arvutis tekstiredaktori, nagu Visual Studio Code, abil.
Et saaksid oma tööd mugavalt salvestada, soovitatakse luua oma hoidla koopia. Seda saab teha, klõpsates lehe ülaosas nuppu Use this template. Sellega luuakse teie GitHubi kontole uus hoidla koopia õppekavast.
Järgige neid samme:
- Tehke Fork hoidlast: Klõpsake selle lehe paremas ülanurgas nuppu "Fork".
- Kloonige hoidla:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Oma loodud hoidla koopias klõpsake nupul Code ja valige Open with Codespaces. See loob teile uue Codespace'i töötamiseks.
Selle kursuse käivitamiseks lokaalselt arvutis vajate tekstiredaktorit, brauserit ja käsurea tööriista. Meie esimene õppetund, Sissejuhatus programmeerimiskeeltesse ja kauplemisvahenditesse, juhendab teid erinevate tööriistade valiku läbi, et leida just teile sobiv lahendus.
Soovitame kasutada toimetajana Visual Studio Code'i, millel on ka sisseehitatud Terminal. Visual Studio Code'i saate alla laadida siit.
-
Kopeeri oma hoidla oma arvutisse. Seda saad teha, klõpsates nuppu Code ja kopeerides URL-i:
Seejärel ava Terminal Visual Studio Code’is ning käivita järgmine käsk, asendades
<your-repository-url>just kopeeritud URL-iga:git clone <your-repository-url>
-
Ava kaust Visual Studio Code’is. Seda saad teha, klõpsates File > Open Folder ja valides hiljuti kloonitud kausta.
Soovitatud Visual Studio Code laiendused:
- Live Server - HTML-lehtede eelvaade Visual Studio Code’i sees
- Copilot - aitab koodi kiiremini kirjutada
- valikulist visandimärkmikku
- valikulist täiendavat videot
- tunni eelset soojenduse viktoriini
- kirjalikku õppetundi
- projektipõhiste tundide puhul samm-sammult juhendeid, kuidas projekti koostada
- teadmiste kontrolli
- väljakutset
- täiendavat lugemist
- ülesannet
- tunni järgset viktoriini
Märkuse viktoriinide kohta: Kõik viktoriinid on paigutatud Quiz-app kausta, kokku 48 viktoriini, igaühes kolm küsimust. Need on saadaval siin, viktoriiniäppi saab käivitada lokaalselt või juurutada Azure’isse; järgige juhiseid kaustas
quiz-app.
| Projekti nimi | Õpitud kontseptsioonid | Õpieesmärgid | Lingitud õppetund | Autor | |
|---|---|---|---|---|---|
| 01 | Alustamine | Programmeerimise sissejuhatus ja tööriistad | Õpi programmeerimiskeelte põhitõdesid ja professionaalsetele arendajatele abiks olevat tarkvara | Programmeerimiskeelte ja tööriistade sissejuhatus | Jasmine |
| 02 | Alustamine | GitHubi põhialused, meeskonnatöö | Kuidas kasutada GitHubi oma projektis, kuidas teistega koodibaasis koostööd teha | GitHubi sissejuhatus | Floor |
| 03 | Alustamine | Juurdepääsetavus | Õpi veebisaidi juurdepääsetavuse aluseid | Juurdepääsetavuse põhitõed | Christopher |
| 04 | JS põhitõed | JavaScripti andmetüübid | JavaScripti andmetüüpide põhitõed | Andmetüübid | Jasmine |
| 05 | JS põhitõed | Funktsioonid ja meetodid | Õpi rakenduse loogika haldamiseks funktsioonide ja meetodite kohta | Funktsioonid ja meetodid | Jasmine ja Christopher |
| 06 | JS põhitõed | Otsuste tegemine JavaScriptiga | Õpi, kuidas koodis tingimusi luua otsustamisstruktuuride abil | Otsuste tegemine | Jasmine |
| 07 | JS põhitõed | Massiivid ja tsüklid | Töötle andmeid massiivide ja tsüklitega JavaScriptis | Massiivid ja tsüklid | Jasmine |
| 08 | Terrarium | HTML praktikas | Ehita HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | HTML sissejuhatus | Jen |
| 09 | Terrarium | CSS praktikas | Ehita CSS veebiterrariumi kujundamiseks, keskendudes CSS alustele ja veebilehe reageerivusele | CSS sissejuhatus | Jen |
| 10 | Terrarium | JavaScripti sulgudes, DOM-i manipuleerimine | Kirjuta JavaScript, mis võimaldab terrariumil toimida lohista ja lase liidesena, keskendudes sulgudele ja DOM-i manipuleerimisele | JavaScripti sulgudes, DOM-i manipuleerimine | Jen |
| 11 | Tippimismäng | Tippimismängu loomine | Õpi kasutama klahvisündmusi JavaScripti rakenduse loogika juhtimiseks | Sündmustepõhine programmeerimine | Christopher |
| 12 | Roheline brauserilaiendus | Brauseritega töötamine | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaienduse esimesed elemendid | Brauserite kohta | Jen |
| 13 | Roheline brauserilaiendus | Vormide loomine, API kutsumine ja muutujate salvestamine lokaalses salvestusruumis | Ehita oma brauserilaienduse JavaScripti elemendid API kutsumiseks, kasutades lokaalses salvestusruumis talletatud muutujaid | API-d, vormid ja lokaalne salvestusruum | Jen |
| 14 | Roheline brauserilaiendus | Brauseri taustaprotsessid, veebiseo jõudlus | Kasuta brauseri taustaprotsesse laienduse ikooni haldamiseks; õpi veebiseose ja optimeerimiste kohta, et parandada performantsi | Taustatöötlus ja jõudlus | Jen |
| 15 | Tähesõjamäng | Täiustatud mänguarendus JavaScriptiga | Õpi pärimise kohta nii klasside kui ka koosseisude kaudu, samuti Pub/Sub mustrit, et valmistuda mängu loomiseks | Täiustatud mänguarenduse sissejuhatus | Chris |
| 16 | Tähesõjamäng | Joonistamine lõuendile | Õpi Canvas API kasutamist elementide joonistamiseks ekraanile | Joonistamine lõuendile | Chris |
| 17 | Tähesõjamäng | Elementide liigutamine ekraanil | Uuri, kuidas elementidel võib olla liikumine kasutades karteesia koordinaate ja Canvas API-t | Elementide liigutamine | Chris |
| 18 | Tähesõjamäng | Kokkupõrgete tuvastamine | Pane elemendid kokkupõrkama ja reageerima omavahel vajutuste abil ning lisa jahutuse funktsioon, et tagada mängu jõudlus | Kokkupõrgete tuvastamine | Chris |
| 19 | Tähesõjamäng | Skoori hoidmine | Tee matemaatilisi arvutusi mängu seisundi ja tulemuse põhjal | Skoori hoidmine | Chris |
| 20 | Tähesõjamäng | Mängu lõpetamine ja taasalustamine | Õpi mängu lõpetamise ja taasalustamise kohta, sealhulgas varade puhastamist ja muutujate väärtuste lähtestamist | Lõpetamise tingimus | Chris |
| 21 | Pangarakendus | HTML mallide ja marsruutide loomine veebiäpis | Õpi looma multipage veebilehe arhitektuuri skafoldi kasutades marsruutimist ja HTML malle | HTML mallid ja marsruudid | Yohan |
| 22 | Pangarakendus | Sisse- ja registreerimisvormi ehitamine | Õpi vormide loomist ja valideerimise käsitlemist | Vormid | Yohan |
| 23 | Pangarakendus | Andmete toomise ja kasutamise meetodid | Kuidas andmed sinu rakendusse tulevad, neid toodakse, salvestatakse ja hävitatakse | Andmed | Yohan |
| 24 | Pangarakendus | Olekuhalduse kontseptsioonid | Õpi, kuidas sinu rakendus säilitab olekut ja kuidas seda programmeerivalt hallata | Olekuhaldus | Yohan |
| 25 | Brauser/VScode kood | Töötamine VScode'iga | Õpi, kuidas koodi redaktorit kasutada | VScode redaktori kasutamine | Chris |
| 26 | AI assistendid | Töötamine tehisintellektiga | Õpi, kuidas luua oma AI assistent | AI assistendi projekt | Chris |
Meie õppekava on kujundatud kahe põhilise pedagoogilise põhimõtte alusel:
- projektipõhine õpe
- sagedased viktoriinid
Programm õpetab JavaScripti, HTML-i ja CSS-i põhitõdesid ning uusimaid tööriistu ja tehnikaid, mida tänased veebiarendajad kasutavad. Õpilastel on võimalus omandada praktilisi kogemusi, luues tippimismängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, ruumivõitlusstiilis mängu ja äripangarakenduse. Sarja lõpuks on õpilased omandanud kindla arusaama veebiarendusest.
🎓 Võid selle õppekava esimesed paar õppetundi võtta Microsoft Learn'i Õppetee kaudu!
Tagades, et sisu on projekte nõustav, on õppimisprotsess õpilaste jaoks kaasahaaravam ning kontseptsioonide kinnistumine parem. Kirjutasime ka mitu alustavat õppetundi JavaScripti põhialustega, et tutvustada kontseptsioone, lisaks on videosari "Beginners Series to: JavaScript", mille autorid mõningal määral selle õppekava loomisele kaasa aitasid.
Lisaks seab madala riskiga viktoriin enne tundi õpilasele eesmärgi teemaga tegeleda, samal ajal kui teine viktoriin pärast tundi tagab teadmiste parema kinnistumise. See õppekava on loodud olema paindlik ja lõbus ning seda võib võtta tervikuna või osadena. Projektid algavad väikesena ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks.
Kuigi oleme teadlikult vältinud JavaScripti raamistike sisseviimist, et keskenduda esmalt veebiarendaja põhilisoskustele enne raamistiku omaksvõttu, oleks hea järgneva sammuna tutvuda Node.js-ga, kasutades teist videosarja: "Beginner Series to: Node.js".
Tutvu meie Käitumisjuhendiga ja Panustamise juhistega. Ootame sinu konstruktiivset tagasisidet!
Seda dokumentatsiooni saab käivitada ka offline-režiimis, kasutades Docsify. Hargi see hoidla, paigalda Docsify oma lokaalmasinale ja seejärel kirjuta selles hoidla juurkaustas käsk docsify serve. Veebileht on kättesaadav pordi 3000 kaudu sinu kohalikus arvutis: localhost:3000.
Kõikide õppetundide PDF on leitav siit.
Meie meeskond toodab ka teisi kursuseid! Vaata:
-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 sa oled kinni jäänud või sul on küsimusi AI rakenduste loomise kohta, tule liitu teiste õppijate ja kogenud arendajatega, kes arutavad MCP-d. See on toetav kogukond, kus küsimusi oodatakse ja teadmisi jagatakse vabalt.
Kui sul on produkti tagasisidet või ehitamisel vigu, külasta:
See hoidla on litsentseeritud MIT litsentsi alusel. Täpsema info saamiseks vaata faili LICENSE.
Vastutusest loobumine:
See dokument on tõlgitud AI tõlketeenuse Co-op Translator abil. Kuigi me püüdleme täpsuse poole, olge teadlikud, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta võimalike arusaamatuste või väärinterpreteerimiste eest, mis võivad selle tõlke kasutamisest tuleneda.