Web-Dev-For-Beginners/translations/et

Veebiarendus algajatele – õppematerjal

Õpi veebiarenduse põhitõdesid meie 12-nädalase põhjaliku kursusega, mille on koostanud Microsoft Cloud Advocates. Iga 24-st õppetunnist süüvib JavaScripti, CSS-i ja HTML-i käsipõhiste projektide kaudu, näiteks terrariumid, brauserilaiendid ja kosmosemängud. Osale viktoriinides, aruteludes ja praktilistes ülesannetes. Paranda oma oskusi ja loo teadmiste paremat kinnistamist tõhusa projektipõhise õpetamismeetodi abil. Alusta oma kodeerimisteekonda juba täna!

Liitu Azure AI Foundry Discordiga ja kohtle eksperte ning kaasprogrammeerejaid.

Järgige neid samme, et alustada nende ressursside kasutamist:

1. Tee hoidlast oma versioon (fork): Vajuta
2. Klooni hoidla: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Liitu Azure AI Foundry Discordiga ja kohtle eksperte ning kaasprogrammeerejaid

🌐 Mitmekeelne tugi

Toetatud GitHub Actioni kaudu (automaatne ja alati ajakohane)

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

Eelistad kloonimist kohapeal?

See hoidla sisaldab üle 50 keele tõlkeid, mis suurendab oluliselt allalaadimismahtu. Kui soovid kloonida ilma tõlgeteta, kasuta 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 sulle kõik vajaliku, et kursuse lõpetada palju kiirema allalaadimisega.

Kui soovid lisatõlkeid, siis toetatud keeled on loetletud siin. siin

🧑‍🎓 Oled tudeng?

Külasta Student Hub lehekülge, kus leiad algajale mõeldud ressursse, tudengipakette ja isegi võimalusi saada tasuta tunnistuse vautšer. See on lehekülg, mida tasub järjehoidjates hoida ja aeg-ajalt kontrollida, sest sisu uuendatakse igakuiselt.

📣 Teade – Uued väljakutsed GitHub Copilot Agent režiimis!

Lisandunud on uus väljakutse, otsi enamikust peatükkidest "GitHub Copilot Agent Challenge 🚀". See on uus väljakutse, mille saad lahendada GitHub Copiloti ja Agendi režiimis. Kui sa pole Agendi režiimi varem kasutanud, siis see suudab mitte ainult teksti genereerida, vaid ka luua ja muuta faile, käivitada käske ja palju muud.

📣 Teade – uus projekt generatiivse tehisintellekti abil arendamiseks

Täiesti uus AI assistendi projekt lisatud, vaata projekti

📣 Teade – uus õppekava generatiivsele tehisintellektile JavaScripti jaoks avaldatud

Ära jäta tähelepanuta meie uut generatiivse tehisintellekti õppekava!

Alusta siin: https://aka.ms/genai-js-course

• Õppetunnid katavad kõike alates algtõdedest kuni RAG-ini.
• Suhtle ajalooliste tegelastega GenAI ja meie kaasrakenduse abil.
• Lõbus ja kaasahaarav jutustus, mis viib sind ajas rändama!

Iga õppetund sisaldab lõpetamiseks ülesannet, teadmiste kontrolli ja väljakutset, mis juhendab teemasid nagu:

• Päringud ja päringu inseneriteadus
• Teksti- ja pildirakenduste genereerimine
• Otsingurakendused

Alusta siin: https://aka.ms/genai-js-course

🌱 Alustamine

Õpetajad, me oleme lisanud mõned soovitused selle õppekava kasutamiseks. Ootame teie tagasisidet meie aruteluvõrgustikus!

Õppijad, iga õppetunni puhul alusta eelloenguviktoriinist ja jätka loengumaterjalide lugemisega, erinevate tegevuste lõpetamisega ning testi oma arusaamist järelloengu viktoriiniga.

Õppimise rikastamiseks seo end eakaaslastega, et töötada projektide kallal koos! Arutelud on soovitatavad meie arutelufoorumis, kus meie moderaatorid aitavad sul küsimustele vastuseid leida.

Edasise hariduse jaoks soovitame tungivalt uurida Microsoft Learn’i lisamaterjale.

📋 Keskkonna seadistamine

See õppekava on varustatud arenduskeskkonnaga, mis on kohe kasutusvalmis! Alguses saad otsustada, kas jooksutad õppekava Codespaces’is (brauseripõhine, ilma paigaldusteta keskkond) või kohapeal oma arvutis tekstiredaktori nagu Visual Studio Code abil.

Loo oma hoidla

Selleks, et saaksid oma tööd mugavalt salvestada, soovitame teha sellest hoidlast oma koopia. Seda saad teha, klikkides lehe ülaosas Use this template nupule. See loob sinu GitHubi kontole uue hoidla koos selle õppekava koopiaga.

Järgi järgmisi samme:

1. Tee hoidlast oma versioon (fork): Vajuta nupule "Fork" selle lehe paremas ülanurgas.
2. Klooni hoidla: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Õppekava jooksutamine Codespaces’is

Loetud hoidlas, mille lõid, kliki nupul Code ja vali Open with Codespaces. See loob uue Codespace’i, kus saad töötada.

Õppekava jooksutamine kohalikus arvutis

Selle õppekava kohalikuks jooksutamiseks vajad tekstiredaktorit, veebibrauserit ja käsurea tööriista. Meie esimene õppetund, Sissejuhatus programmeerimiskeeltesse ja tööriistadesse, juhatab sind nende tööriistade erinevate valikuvõimalusteni, et saaksid valida enda jaoks sobivaima.

Soovitame kasutada Visual Studio Code’i tekstiredaktorina, mis sisaldab ka integreeritud terminali. Visual Studio Code’i saad alla laadida siit.

1. Kopeeri oma hoidla oma arvutisse. Seda saad teha, klõpsates nuppu Code ja kopeerides URL-i:

   CodeSpace

   Seejärel ava Terminal Visual Studio Code sees ja käivita järgmine käsk, asendades <your-repository-url> äsja kopeeritud URL-iga:

   git clone <your-repository-url>
   

2. Ava kaust Visual Studio Code'is. Seda saad teha, valides File > Open Folder ja valides äsja kloonitud kausta.

Soovitatud Visual Studio Code laiendused:

• Live Server - HTML-lehtede eelvaate jaoks Visual Studio Code'is
• Copilot - aitab sul koodi kiiremini kirjutada

📂 Igas õppetükis sisaldub:

• valikuline sketšimärkme
• valikuline täiendav video
• soojenduskvizz enne tundi
• kirjalik õppetükk
• projektipõhiste õppetükkide korral samm-sammulised juhised projekti loomiseks
• teadmiste kontrollid
• väljakutse
• täiendav lugemine
• ülesanne
• järgnev kvizz

Märkuse kvizzide kohta: Kõik kvizzid on Quiz-app kaustas, kokku 48 kvizzi, igaühes kolm küsimust. Need on saadaval siin, kvizzi rakendust saab käivitada lokaalselt või paigutada Azure'i; jälgi juhiseid quiz-app kaustas.

🗃️ Õppetükid

	Projekti nimi	Õpitud kontseptsioonid	Õpieesmärgid	Lingitud õppetükk	Autor
01	Esimesed sammud	Programmeerimise ja tööriistade tutvustus	Õpi programmeerimiskeelte põhitõdesid ja tarkvara, mis aitab professionaalseid arendajaid	Programmeerimiskeelte ja tööriistade tutvustus	Jasmine
02	Esimesed sammud	GitHub'i alused, meeskonnatöö	Kuidas kasutada GitHubi oma projektis ja teha koostööd koodibaasil	GitHubi sissejuhatus	Floor
03	Esimesed sammud	Juurdepääsetavus	Õpi veebipõhise juurdepääsetavuse põhialuseid	Juurdepääsetavuse alused	Christopher
04	JS alused	JavaScript andmetüübid	JavaScripti andmetüüpide põhitõed	Andmetüübid	Jasmine
05	JS alused	Funktsioonid ja meetodid	Õpi funktsioone ja meetodeid rakenduse loogika juhtimiseks	Funktsioonid ja meetodid	Jasmine ja Christopher
06	JS alused	Otsuste tegemine JavaScriptiga	Õpi, kuidas luua tingimusi oma koodis otsustamise abil	Otsuste tegemine	Jasmine
07	JS alused	Massiivid ja tsüklid	Töötle andmeid massiivide ja tsüklite abil 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, et kujundada veebiterrarium, keskendudes CSS põhialustele ja lehe kohandamisele	CSS sissejuhatus	Jen
10	Terrarium	JavaScripti sulgud, DOM-i manipuleerimine	Tee terrarium funktsionaalseks lohistamisliidese abil, keskendudes sulgude ja DOM-i manipuleerimise õppimisele	JavaScripti sulgud, DOM-i manipuleerimine	Jen
11	Trükkimismäng	Trükkimismängu loomine	Õpi kasutama klaviatuuri sündmusi oma JavaScripti rakenduse loogika juhtimiseks	Sündmuspõhine programmeerimine	Christopher
12	Roheline brauserilaiend	Brauseritega töötamine	Õpi, kuidas brauserid töötavad, nende ajalugu ja kuidas üles ehitada brauserilaiendi esimesed elemendid	Brauseritest	Jen
13	Roheline brauserilaiend	Vormide loomine, API kutsumine ja andmete salvestamine kohalikku mällu	Ehita oma brauserilaiendi JavaScripti osad, mis kutsuvad API-t ja kasutavad kohalikus mälus hoitavaid muutujaid	API-d, vormid ja kohalik mälu	Jen
14	Roheline brauserilaiend	Brauseri taustaprotsessid ja veebipõhine jõudlus	Kasuta brauseri taustaprotsesse laiendi 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ärimist nii klasside kui kompositsiooni kaudu ning Pub/Sub mustrit, valmistudes mängu loomiseks	Täiustatud mänguarenduse sissejuhatus	Chris
16	Kosmosemäng	Joonistamine lõuendile	Õpi Canvas API kasutamist ekraanile elementide joonistamiseks	Joonistamine lõuendile	Chris
17	Kosmosemäng	Elementide liigutamine ekraanil	Avasta, kuidas elementidele anda liikumist koordinaatide ja Canvas API abil	Elementide liigutamine	Chris
18	Kosmosemäng	Kokkupõrgete tuvastamine	Pane elemendid põrkuma ning reageerima üksteisele võtmete vajutuste abil; lisa cooldown funktsioon mängu jõudluse tagamiseks	Kokkupõrgete tuvastamine	Chris
19	Kosmosemäng	Punktide lugemine	Tee arvutusi mängu oleku ja soorituse põhjal	Punktide lugemine	Chris
20	Kosmosemäng	Mängu lõpetamine ja taaskäivitamine	Õpi mängu lõpetamist ja taaskäivitamist, sealhulgas varade puhastamist ja muutujate lähtestamist	Lõpetingimus	Chris
21	Pangarakendus	HTML mallid ja marsruudid veebirakenduses	Õpi looma mitmeleheküljelise veebilehe arhitektuuri marsruutimise ja HTML mallide abil	HTML mallid ja marsruudid	Yohan
22	Pangarakendus	Sisselogimise ja registreerimisvormi loomine	Õpi vormide loomist ja valideerimise teostamist	Vormid	Yohan
23	Pangarakendus	Andmete pärimise ja kasutamise meetodid	Kuidas andmed rakenduses voolavad, neid pärida, salvestada ja eemaldada	Andmed	Yohan
24	Pangarakendus	Oleku halduse kontseptsioonid	Õpi, kuidas rakendus säilitab olekut ja kuidas seda programmeeritult hallata	Oleku haldus	Yohan
25	Brauser/VScode kood	VScode kasutamine	Õpi kasutama koodi redaktorit	VScode koodi redaktori kasutamine	Chris
26	AI assistendid	Töötamine tehisintellektiga	Õpi looma oma AI assistenti	AI assistendi projekt	Chris

🏫 Pedagoogika

Meie õppekava põhineb kahel peamisel pedagoogilisel põhimõttel:

• projektipõhine õppimine
• sagedased kvizzid

Programm õpetab JavaScripti, HTML-i ja CSS-i põhialuseid ning ka tänapäevaste veebiarendajate kasutatavaid uusimaid tööriistu ja tehnikaid. Õpilastel on võimalus praktiliste kogemuste saamiseks luua trükkimismängu, virtuaalne terrarium, keskkonnasõbralik brauserilaiend, kosmosesõdalase stiilis mäng ning äripangarakendus. Sarja lõpus on tudengitel hea arusaam veebiarendusest.

🎓 Saad esimeseid õppetükke selles õppekavas võtta ka õppeteekidena Microsoft Learn'is!

Sisuga projektide sobitamine muudab õppimise huvitavamaks ja tugevdab mõistete meeldejätmist. Kirjutasime ka mitu algajatele mõeldud JavaScripti põhialuste õppetükki, mis tutvustavad kontseptsioone koos videoga „Beginners Series to: JavaScript“ videotest, mille mõningaid autoreid kaasasime ka sellesse õppekavasse.

Lisaks seab madala panusega kvizz enne tundi õpilasele eesmärgi teemat õppida, ning teine kvizz tunni järel aitab teadmisi kinnistada. See õppekava on loodud olema paindlik ja lõbus ning seda võib läbida tervikuna või ositi. Projektid algavad lihtsamatena ja muutuvad 12 nädala jooksul järjest keerukamaks.

Kuigi me teadlikult vältisime JavaScripti raamistikku tutvustamist, et keskenduda esmalt põhioskustele veebiarendajana enne raamistikku kasutama hakkamist, oleks järgmiseks loogiliseks sammuks selles õppekavas õppida Node.js teistest videotest koosneva kogumiku abil: "Beginner Series to: Node.js".

Tutvu meie käitumisreeglite ja panustamise juhistega. Ootame konstruktiivset tagasisidet!

🧭 Offline ligipääs

Seda dokumentatsiooni saab vaadata ka võrguühenduseta, kasutades Docsify. Tee repo fork, paigalda Docsify oma lokaalsele masinale ja seejärel selle repo juurkaustas kirjuta käsureale docsify serve. Veebileht jookseb sinu lokaalarvutis pordi 3000 peal: localhost:3000.

📘 PDF

Kõikide õppetundide PDF-fail on leitav siit.

🎒 Teised kursused

Meie meeskond teeb ka teisi kursuseid! Vaata:

LangChain

Azure / Edge / MCP / Agendid

---

Generatiivse tehisintellekti sari

---

Põhiõpe

---

Copilot sari

Abi saamine

Kui takerduse või küsimusi tehisintellektirakenduste loomisel tekib, liitu teiste õppurite ja kogenud arendajatega MCP aruteludes. See on toetav kogukond, kus küsimused on teretulnud ja teadmisi jagatakse vabalt.

Kui sul on tagasisidet või ehitamisel vigu, külasta:

Litsents

See hoidla on litsentseeritud MIT litsentsi alusel. Lisateabe saamiseks vaata LICENSE faili.

---

Lahtiütlus:
See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust Co-op Translator. Kuigi püüame täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma emakeeles on autoriteetne allikas. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega valesti mõistmiste eest.