28 KiB
Veebiarendus algajatele - õppekava
Õpi veebiarenduse põhitõdesid Microsoft Cloud Advocates'i 12-nädalase põhjaliku kursuse abil. Iga 24 õppetundi keskendub JavaScriptile, CSS-ile ja HTML-ile praktiliste projektide kaudu, nagu terraariumid, brauserilaiendused ja kosmosemängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Arenda oma oskusi ja optimeeri teadmiste omandamist meie tõhusa projektipõhise metoodikaga. Alusta oma kodeerimise teekonda juba täna!
Liitu Azure AI Foundry Discordi kogukonnaga
Järgi neid samme, et alustada nende ressursside kasutamist:
- Forki repositoorium: Klõpsa
- Klooni repositoorium:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Liitu Azure AI Foundry Discordiga ja kohtume ekspertide ning teiste arendajatega
🌐 Mitmekeelne tugi
Toetatud GitHub Actioni kaudu (automaatne ja alati ajakohane)
Araabia | Bengali | Bulgaaria | Birma (Myanmar) | Hiina (lihtsustatud) | Hiina (traditsiooniline, Hongkong) | Hiina (traditsiooniline, Macau) | Hiina (traditsiooniline, Taiwan) | Horvaatia | Tšehhi | Taani | Hollandi | Eesti | Soome | Prantsuse | Saksa | Kreeka | Heebrea | Hindi | Ungari | Indoneesia | Itaalia | Jaapani | Korea | Leedu | Malai | Marathi | Nepali | Norra | Pärsia (Farsi) | Poola | Portugali (Brasiilia) | Portugali (Portugal) | Pandžabi (Gurmukhi) | Rumeenia | Vene | Serbia (kirillitsa) | Slovaki | Sloveeni | Hispaania | Suahiili | Rootsi | Tagalogi (Filipino) | Tamili | Tai | Türgi | Ukraina | Urdu | Vietnami
Kui soovid lisada täiendavaid tõlkeid, on toetatud keeled loetletud siin
🧑🎓 Kas oled tudeng?
Külasta Student Hub lehte, kus leiad algajatele mõeldud ressursse, tudengipakette ja isegi võimalusi tasuta sertifikaadi saamiseks. See on leht, mida tasub järjehoidjatesse lisada ja aeg-ajalt külastada, kuna sisu vahetub igakuiselt.
📣 Teade - Uus projekt generatiivse tehisintellekti kasutamiseks
Just lisatud uus AI assistendi projekt, vaata projekti
📣 Teade - Uus õppekava generatiivse tehisintellekti kohta JavaScriptis on just avaldatud
Ära jäta vahele meie uut generatiivse tehisintellekti õppekava!
Külasta https://aka.ms/genai-js-course, et alustada!
- Õppetunnid, mis hõlmavad kõike alates põhitõdedest kuni RAG-ni.
- Suhtle ajalooliste tegelastega GenAI ja meie kaaslase rakenduse abil.
- Lõbus ja kaasahaarav narratiiv, mis viib sind ajarännakule!
Iga õppetund sisaldab ülesannet, mida täita, teadmiste kontrolli ja väljakutset, mis juhendab sind õppima järgmisi teemasid:
- Küsitluste loomine ja nende optimeerimine
- Teksti- ja pildirakenduste loomine
- Otsingurakendused
Külasta https://aka.ms/genai-js-course, et alustada!
🌱 Alustamine
Õpetajad, oleme lisanud mõned soovitused, kuidas seda õppekava kasutada. Ootame teie tagasisidet meie arutelufoorumis!
Õppijad, iga õppetunni puhul alustage eelloengu viktoriiniga, lugege loengumaterjali, täitke erinevaid tegevusi ja kontrollige oma arusaamist järelloengu viktoriiniga.
Et oma õpikogemust täiustada, tehke koostööd kaasõppijatega projektide kallal! Arutelud on teretulnud meie arutelufoorumis, kus meie moderaatorite meeskond on valmis vastama teie küsimustele.
Hariduse edendamiseks soovitame tungivalt uurida Microsoft Learn täiendavate õppematerjalide jaoks.
📋 Keskkonna seadistamine
Sellel õppekaval on valmis arenduskeskkond! Alustades saate valida, kas käivitada õppekava Codespace'is (brauseripõhine keskkond, kus pole vaja midagi installida) või kohapeal oma arvutis, kasutades tekstiredaktorit, näiteks Visual Studio Code.
Loo oma repositoorium
Et saaksid oma tööd hõlpsasti salvestada, soovitame luua selle repositooriumi koopia. Seda saab teha, klõpsates lehe ülaosas nuppu Use this template. See loob sinu GitHubi kontole uue repositooriumi koos õppekava koopiaga.
Järgi neid samme:
- Forki repositoorium: Klõpsa lehe paremas ülanurgas nuppu "Fork".
- Klooni repositoorium:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Õppekava käivitamine Codespace'is
Selles repositooriumis, mille sa lõid, klõpsa nuppu Code ja vali Open with Codespaces. See loob sulle uue Codespace'i, kus saad töötada.
Õppekava käivitamine kohapeal oma arvutis
Et käivitada õppekava kohapeal oma arvutis, vajad tekstiredaktorit, brauserit ja käsurea tööriista. Meie esimene õppetund, Sissejuhatus programmeerimiskeeltesse ja tööriistadesse, juhendab sind erinevate tööriistade valimisel, et leida endale sobivaim.
Meie soovitus on kasutada Visual Studio Code'i redaktorina, millel on ka sisseehitatud Terminal. Saad Visual Studio Code'i alla laadida siit.
-
Klooni oma repositoorium arvutisse. Seda saab teha, klõpsates nuppu Code ja kopeerides URL-i:
Seejärel ava Terminal Visual Studio Code'is ja 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 saab teha, klõpsates File > Open Folder ja valides just kloonitud kausta.
Soovitatavad Visual Studio Code'i laiendused:
- Live Server - HTML-lehtede eelvaateks Visual Studio Code'is
- Copilot - aitab kiiremini koodi kirjutada
📂 Iga õppetund sisaldab:
- valikulist visuaalset märkmete komplekti
- valikulist täiendavat videot
- eelloengu soojendusviktoriini
- kirjalik õppetund
- projektipõhiste õppetundide jaoks samm-sammult juhendid projekti loomiseks
- teadmiste kontrollid
- väljakutse
- täiendav lugemine
- ülesanne
- järgnev viktoriin
Märkus viktoriinide kohta: Kõik viktoriinid asuvad Quiz-app kaustas, kokku 48 viktoriini, igaühes kolm küsimust. Need on saadaval siin. Viktoriinirakendust saab käivitada lokaalselt või Azure'is; järgige juhiseid
quiz-appkaustas.
🗃️ Õppetunnid
| Projekti nimi | Õpetatavad kontseptsioonid | Õpieesmärgid | Lingitud õppetund | Autor | |
|---|---|---|---|---|---|
| 01 | Alustamine | Programmeerimise sissejuhatus ja tööriistad | Õpi programmeerimiskeelte põhialuseid ja tarkvara, mis aitab professionaalsetel arendajatel oma tööd teha | Sissejuhatus programmeerimiskeeltesse ja tööriistadesse | Jasmine |
| 02 | Alustamine | GitHubi põhialused, sealhulgas meeskonnatöö | Kuidas kasutada GitHubi oma projektis ja teha koostööd teistega koodibaasis | Sissejuhatus GitHubi | Floor |
| 03 | Alustamine | Juurdepääsetavus | Õpi veebijuurdepääsetavuse põhialuseid | Juurdepääsetavuse alused | Christopher |
| 04 | JS põhialused | JavaScripti andmetüübid | JavaScripti andmetüüpide põhialused | Andmetüübid | Jasmine |
| 05 | JS põhialused | Funktsioonid ja meetodid | Õpi funktsioonide ja meetodite kohta, et hallata rakenduse loogikavoogu | Funktsioonid ja meetodid | Jasmine ja Christopher |
| 06 | JS põhialused | Otsuste tegemine JavaScriptiga | Õpi looma tingimusi oma koodis, kasutades otsuste tegemise meetodeid | Otsuste tegemine | Jasmine |
| 07 | JS põhialused | Massiivid ja tsüklid | Töötamine andmetega, kasutades JavaScripti massiive ja tsükleid | Massiivid ja tsüklid | Jasmine |
| 08 | Terrarium | HTML praktikas | Loo HTML, et luua veebipõhine terrarium, keskendudes paigutuse loomisele | Sissejuhatus HTML-i | Jen |
| 09 | Terrarium | CSS praktikas | Loo CSS, et kujundada veebipõhine terrarium, keskendudes CSS-i põhialustele, sealhulgas lehe reageerimisvõimekusele | Sissejuhatus CSS-i | Jen |
| 10 | Terrarium | JavaScripti sulgemised, DOM-i manipuleerimine | Loo JavaScript, et muuta terrarium lohistamisfunktsiooniga liideseks, keskendudes sulgemistele ja DOM-i manipuleerimisele | JavaScripti sulgemised, DOM-i manipuleerimine | Jen |
| 11 | Trükimäng | Loo trükimäng | Õpi kasutama klaviatuuri sündmusi, et juhtida oma JavaScripti rakenduse loogikat | Sündmustepõhine programmeerimine | Christopher |
| 12 | Roheline brauserilaiendus | Töö brauseritega | Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas luua brauserilaienduse esimesed elemendid | Brauseritest | Jen |
| 13 | Roheline brauserilaiendus | Vormide loomine, API-de kutsumine ja muutujate salvestamine lokaalsesse mällu | Loo oma brauserilaienduse JavaScripti elemendid, et kutsuda API-d, kasutades lokaalsesse mällu salvestatud muutujaid | API-d, vormid ja lokaalne mälu | Jen |
| 14 | Roheline brauserilaiendus | Taustaprotsessid brauseris, veebijõudlus | Kasuta brauseri taustaprotsesse laienduse ikooni haldamiseks; õpi veebijõudluse kohta ja mõningaid optimeerimisi | Taustaprotsessid ja jõudlus | Jen |
| 15 | Kosmosemäng | Täiustatud mänguarendus JavaScriptiga | Õpi päriluse kohta, kasutades nii klasse kui kompositsiooni, ja Pub/Sub mustrit, valmistudes mängu loomiseks | Sissejuhatus täiustatud mänguarendusse | Chris |
| 16 | Kosmosemäng | Joonistamine lõuendile | Õpi lõuendi API kohta, mida kasutatakse elementide ekraanile joonistamiseks | Joonistamine lõuendile | Chris |
| 17 | Kosmosemäng | Elementide liigutamine ekraanil | Avastage, kuidas elemendid saavad liikuda, kasutades koordinaatsüsteemi ja lõuendi API-d | Elementide liigutamine | Chris |
| 18 | Kosmosemäng | Kokkupõrke tuvastamine | Muutke elemendid üksteisega kokku põrkama ja reageerima, kasutades klahvivajutusi, ning lisage jahtumisfunktsioon, et tagada mängu jõudlus | Kokkupõrke tuvastamine | Chris |
| 19 | Kosmosemäng | Punktide arvestamine | Tehke matemaatilisi arvutusi mängu oleku ja jõudluse põhjal | Punktide arvestamine | Chris |
| 20 | Kosmosemäng | Mängu lõpetamine ja taaskäivitamine | Õpi mängu lõpetamise ja taaskäivitamise kohta, sealhulgas ressursside puhastamine ja muutujate väärtuste lähtestamine | Lõppetingimus | Chris |
| 21 | Pangarakendus | HTML-i mallid ja marsruudid veebirakenduses | Õpi looma mitmeleheküljelise veebisaidi arhitektuuri karkassi, kasutades marsruutimist ja HTML-i malle | HTML-i mallid ja marsruudid | Yohan |
| 22 | Pangarakendus | Sisselogimis- ja registreerimisvormi loomine | Õpi vormide loomise ja valideerimisrutiinide käsitlemise kohta | Vormid | Yohan |
| 23 | Pangarakendus | Andmete hankimise ja kasutamise meetodid | Kuidas andmed voolavad rakendusse ja sealt välja, kuidas neid hankida, salvestada ja kustutada | Andmed | Yohan |
| 24 | Pangarakendus | Oleku haldamise kontseptsioonid | Õpi, kuidas rakendus säilitab olekut ja kuidas seda programmiliselt hallata | Oleku haldamine | Yohan |
| 25 | Brauser/VScode kood | Töö VScode'iga | Õpi, kuidas kasutada koodiredaktorit | VScode koodiredaktori kasutamine | Chris |
| 26 | AI assistendid | Töö AI-ga | Õpi, kuidas luua oma AI assistent | AI assistendi projekt | Chris |
🏫 Pedagoogika
Meie õppekava on loodud kahe peamise pedagoogilise põhimõtte järgi:
- projektipõhine õpe
- sagedased viktoriinid
Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning tänapäeva veebiarendajate kasutatavaid uusimaid tööriistu ja tehnikaid. Õpilastel on võimalus omandada praktilisi kogemusi, luues trükimängu, virtuaalse terrariumi, keskkonnasõbraliku brauserilaienduse, kosmosemängu ja äripangarakenduse. Kursuse lõpuks on õpilased omandanud põhjalikud teadmised veebiarendusest.
🎓 Selle õppekava esimesi tunde saate läbida õppeprogrammi osana Microsoft Learnis!
Tagades, et sisu vastab projektidele, muutub õppeprotsess õpilaste jaoks kaasahaaravamaks ja kontseptsioonide meeldejätmine paraneb. Oleme kirjutanud ka mitmeid JavaScripti põhialuste algtunde, et tutvustada kontseptsioone, koos videoga "Algajate sari: JavaScript" videokogust, mille autorid on osaliselt panustanud ka sellesse õppekavasse.
Lisaks aitab madala panusega viktoriin enne tundi suunata õpilase tähelepanu teema õppimisele, samas kui teine viktoriin pärast tundi tagab parema meeldejätmise. See õppekava on loodud paindlikuks ja lõbusaks ning seda saab läbida tervikuna või osaliselt. Projektid algavad väikestest ja muutuvad 12-nädalase tsükli lõpuks järjest keerukamaks.
Kuigi oleme teadlikult vältinud JavaScripti raamistikke, et keskenduda veebiarendaja põhioskustele enne raamistikuga tutvumist, oleks selle õppekava lõpetamise järel hea järgmine samm õppida Node.js-i teise videokogu kaudu: "Algajate sari: Node.js".
Külastage meie käitumisjuhendit ja panustamise juhiseid. Ootame teie konstruktiivset tagasisidet!
🧭 Võimalus kasutada võrguühenduseta
Seda dokumentatsiooni saab kasutada võrguühenduseta, kasutades Docsify. Forkige see repo, installige Docsify oma kohalikku arvutisse ja seejärel sisestage selle repo juurkaustas docsify serve. Veebisait avatakse pordil 3000 teie localhostis: localhost:3000.
Kõigi õppetundide PDF-i leiate siit.
🎒 Muud kursused
Meie meeskond koostab ka teisi kursusi! Vaadake:
- MCP algajatele
- Edge AI algajatele
- AI agendid algajatele
- Generatiivne AI algajatele .NET
- Generatiivne AI JavaScriptiga
- Generatiivne AI Javaga
- AI algajatele
- Andmeteadus algajatele
- ML algajatele
- Küberturvalisus algajatele
- Veebiarendus algajatele
- IoT algajatele
- XR Arendamine Algajatele
- GitHub Copiloti Valdamine Agentlikuks Kasutamiseks
- GitHub Copiloti Valdamine C#/.NET Arendajatele
- Vali Oma Copiloti Seiklus
Abi Saamine
Kui jääd hätta või sul on küsimusi AI rakenduste loomise kohta, liitu:
Kui sul on tagasisidet toodete kohta või esineb vigu arendamisel, külasta:
Litsents
See repositoorium on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata LICENSE faili.
Lahtiütlus:
See dokument on tõlgitud AI tõlketeenuse Co-op Translator abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.


