33 KiB

Raw Blame History Unescape Escape

Interneto svetainių kūrimas pradedantiesiems – Mokymo programa

Išmokite interneto svetainių kūrimo pagrindus su mūsų 12 savaičių išsamiu kursu, kurį rengia Microsoft Cloud Advocates komanda. Kiekvienoje iš 24 pamokų gilinsitės į JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosmoso žaidimai. Dalyvaukite viktorinose, diskusijose ir praktiniuose užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą efektyvios projektinės pedagogikos dėka. Pradėkite savo programavimo kelią jau šiandien!

Prisijunkite prie Azure AI Foundry Discord bendruomenės

Vadovaukitės žemiau nurodytais žingsniais, kad pradėtumėte naudotis šiomis priemonėmis:

Padarykite šaką (“Fork”): Spustelėkite
Klonuokite saugyklą: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Prisijunkite prie Azure AI Foundry Discord, susipažinkite su ekspertais ir kitais programuotojais

🌐 Daugialypė kalbų palaikymas

Palaikoma per GitHub Action (automatizuota ir visada naujausia)

Norite klonuoti vietoje?

Ši saugykla apima daugiau nei 50 kalbų vertimų, todėl reikšmingai padidėja atsisiuntimo dydis. Norėdami klonuoti be vertimų, naudokite partial checkout:

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"
Tai suteikia viską, ko reikia kursui atlikti, žymiai greičiau atsisiunčiant.

Jei norite, kad būtų palaikomos papildomos vertimų kalbos, jos išvardytos čia

🧑‍🎓 Ar esate studentas?

Apsilankykite Studentų centro puslapyje, kur rasite pradedančiųjų išteklius, studentų paketus ir net būdus gauti nemokamą sertifikato kuponą. Šis puslapis verta įtraukti į žymes ir kartas nuo karto patikrinti, nes kas mėnesį atnaujinsime turinį.

📣 Pranešimas – Nauji GitHub Copilot Agent režimo iššūkiai!

Pridėtas naujas iššūkis – ieškokite "GitHub Copilot Agent Challenge 🚀" daugelyje skyrių. Tai naujas iššūkis, kurį galite atlikti naudodami GitHub Copilot ir Agent režimą. Jei dar nenaudojote Agent režimo, jis ne tik generuoja tekstą, bet ir gali kurti bei redaguoti failus, vykdyti komandas ir dar daugiau.

📣 Pranešimas – Naujas projektas, sukurtas naudojant Generatyvinį AI

Naujas AI asistentas projektas ką tik pridėtas, pažiūrėkite projektą

📣 Pranešimas – Nauja programa apie Generatyvinį AI JavaScript kalbai ką tik išleista

Nepraleiskite mūsų naujo Generatyvinio AI kurso!

Apsilankykite https://aka.ms/genai-js-course ir pradėkite!

Pamokos apimančios viską nuo pagrindų iki RAG.
Sąveika su istorinių personažų naudojant GenAI ir mūsų kompanioninę programėlę.
Smagi ir įtraukianti pasakojimo forma, tarsi keliautumėte laiku!

Kiekvienoje pamokoje pateikiama užduotis, žinių patikrinimas ir iššūkis, kurie nukreips jus mokytis tokių temų kaip:

Komandų rašymas ir jų kūrimo inžinerija
Teksto ir vaizdų programėlių kūrimas
Paieškos programėlės

Apsilankykite https://aka.ms/genai-js-course ir pradėkite!

🌱 Pradžia

Mokytojai, mes įtraukėme kelis pasiūlymus, kaip naudoti šią mokymo programą. Labai laukiame jūsų atsiliepimų mūsų diskusijų forume!

Mokiniai, kiekvienai pamokai pradėkite nuo priešpaskaitinės viktorinos, po to skaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite savo supratimą po paskaitos viktorina.

Norėdami geriau mokytis, susisiekite su savo bendraklasiais ir dirbkite kartu prie projektų! Diskusijos skatinamos mūsų diskusijų forume, kuriame mūsų moderatoriai pasiruošę atsakyti į jūsų klausimus.

Tolesniam mokymuisi labai rekomenduojame tyrinėti Microsoft Learn dėl papildomų mokymosi medžiagų.

📋 Aplinkos paruošimas

Ši mokymo programa turi paruoštą vystymo aplinką! Pradėdami galite pasirinkti vykdyti programą Codespace aplinkoje (naršyklėje, nereikia nieko įdiegti) arba vietoje savo kompiuteryje naudodami teksto redaktorių, pvz., Visual Studio Code.

Sukurkite savo saugyklą

Kad galėtumėte lengvai išsaugoti savo darbus, rekomenduojama sukurti savo šios saugyklos kopiją. Tai galite padaryti spustelėję Naudoti šabloną (Use this template) mygtuką puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje su šios mokymo programos kopija.

Vadovaukitės šiais žingsniais:

Padarykite šaką (“Fork”): Spustelėkite mygtuką „Fork“ viršutiniame dešiniajame kampe.
Klonuokite saugyklą: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Vykdymas Codespace aplinkoje

Jūsų sukurtos kopijos saugykloje spustelėkite mygtuką Code ir pasirinkite Open with Codespaces. Tai sukurs naują Codespace aplinką darbui.

Vykdymas vietoje kompiuteryje

Norėdami vykdyti šią mokymo programą vietoje savo kompiuteryje, jums reikės teksto redaktoriaus, naršyklės ir komandų eilutės įrankio. Mūsų pirmoji pamoka, Įvadas į programavimo kalbas ir darbo įrankius, supažindins su įvairiomis šių įrankių galimybėmis, kad galėtumėte pasirinkti, kas jums tinka geriausiai.

Rekomenduojame naudoti Visual Studio Code kaip redaktorių, kuris taip pat turi integruotą Terminalą. Visual Studio Code galite atsisiųsti čia.

Nuklonuokite savo saugyklą į savo kompiuterį. Tai galite padaryti paspaudę mygtuką Code ir nukopijavę URL:

CodeSpace

Tada atidarykite Terminalą Visual Studio Code aplinkoje ir paleiskite šią komandą, pakeisdami <your-repository-url> nukopijuotu URL:
```
git clone <your-repository-url>
```
Atidarykite aplanką Visual Studio Code. Tai galite padaryti paspaudę File > Open Folder ir pasirinkę ką tik nuklonuotą aplanką.

Rekomenduojami Visual Studio Code papildiniai:

Live Server – HTML puslapių peržiūrai Visual Studio Code aplinkoje

Copilot – skirti greičiau rašyti kodą

📂 Kiekviena pamoka apima:

papildomą eskizą
papildomą vaizdo įrašą
įžanginį klausimų testą prieš pamoką
rašytinę pamoką
projekto pagrindu sukurtas pamokas su žingsnis po žingsnio gidu, kaip sukurti projektą
žinių patikrinimus
iššūkį
papildomą literatūrą
namų darbą
pabaigos testą

Pastaba apie testus: Visi testai yra Quiz-app aplanke, iš viso 48 testai po tris klausimus kiekviename. Jie pasiekiami čia, testų programėlę galima paleisti vietoje arba išdėstyti Azure; vykdykite nurodymus quiz-app aplanke.

🗃️ Pamokos

	Projekto pavadinimas	Mokomi konceptai	Mokymosi tikslai	Susieta pamoka	Autorius
01	Pradžioje	Programavimo įvadas ir naudojamos priemonės	Sužinokite pagrindinius daugumos programavimo kalbų principus ir apie programas, kurios padeda profesionaliems kūrėjams atlikti darbą	Programavimo kalbų ir įrankių įvadas	Jasmine
02	Pradžioje	GitHub pagrindai, įskaitant darbą komandoje	Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais prie kodo bazės	GitHub įvadas	Floor
03	Pradžioje	Prieinamumas	Sužinokite apie interneto prieinamumo pagrindus	Prieinamumo pagrindai	Christopher
04	JS pagrindai	JavaScript duomenų tipai	JavaScript duomenų tipų pagrindai	Duomenų tipai	Jasmine
05	JS pagrindai	Funkcijos ir metodai	Sužinokite apie funkcijas ir metodus valdyti programos logiką	Funkcijos ir metodai	Jasmine and Christopher
06	JS pagrindai	Sprendimų priėmimas su JS	Išmokite kurti sąlygas savo kode naudodami sprendimų priėmimo metodus	Sprendimų priėmimas	Jasmine
07	JS pagrindai	Masyvai ir ciklai	Dirbkite su duomenimis naudodami masyvus ir ciklus JavaScript	Masyvai ir ciklai	Jasmine
08	Terrarium	HTML praktikoje	Sukurkite HTML kodo dalį internetiniam terariumui, daugiausia dėmesio skiriant išdėstymui	Įvadas į HTML	Jen
09	Terrarium	CSS praktikoje	Sukurkite CSS stilių internetiniam terariumui, pažindami CSS pagrindus ir kaip padaryti puslapį responsyvų	Įvadas į CSS	Jen
10	Terrarium	JavaScript uždarymai, DOM manipuliacija	Sukurkite JavaScript, kad terariumas veiktų kaip drag/drop sąsaja, daugiausia dėmesio skiriant uždaromosioms funkcijoms ir DOM manipuliacijai	JavaScript uždarymai, DOM manipuliacija	Jen
11	Typing Game	Parašyk žaidimą	Sužinokite, kaip naudoti klaviatūros įvykius valdyti JavaScript programos logiką	Įvykių valdomas programavimas	Christopher
12	Green Browser Extension	Darbas su naršyklėmis	Sužinokite, kaip veikia naršyklės, jų istoriją ir kaip sukurti naršyklės plėtinio pagrindinius elementus	Apie naršykles	Jen
13	Green Browser Extension	Formos kūrimas, API iškvietimas ir kintamųjų saugojimas vietinėje atmintyje	Sukurkite naršyklės plėtinio JavaScript dalį, kuri iškviečia API, naudodama vietinėje atmintyje saugomus kintamuosius	API, formos ir vietinė atmintis	Jen
14	Green Browser Extension	Naršyklės fono procesai, svetainės našumas	Naudokite naršyklės fono procesus plėtinio piktogramos valdymui; sužinokite apie svetainės našumą ir optimizacijas	Fono užduotys ir našumas	Jen
15	Space Game	Pažengęs žaidimų kūrimas su JavaScript	Sužinokite apie paveldėjimą naudojant klases ir kompoziciją bei Pub/Sub modelį, rengiantis kurti žaidimą	Įvadas į pažangų žaidimų kūrimą	Chris
16	Space Game	Piešimas ant drobės	Sužinokite apie Canvas API, naudojamą elementams piešti ekrane	Piešimas ant drobės	Chris
17	Space Game	Elementų judinimas ekrane	Sužinokite, kaip elementai gali judėti naudodami Dekarto koordinates ir Canvas API	Judančių elementų valdymas	Chris
18	Space Game	Susidūrimo aptikimas	Padarykite, kad elementai susidurtų ir reaguotų vienas į kitą naudojant klaviatūros mygtukus bei įveskite pertraukos funkciją, kad žaidimas veiktų sklandžiai	Susidūrimo aptikimas	Chris
19	Space Game	Rezultatų skaičiavimas	Atlikite matematinius skaičiavimus pagal žaidimo būseną ir rezultatus	Rezultatų skaičiavimas	Chris
20	Space Game	Žaidimo užbaigimas ir paleidimas iš naujo	Sužinokite apie žaidimo užbaigimą ir paleidimą iš naujo, įskaitant resursų išvalymą ir kintamųjų reikšmių atstatymą	Žaidimo pabaigos sąlyga	Chris
21	Banking App	HTML šablonai ir maršrutinimas internetinėje programoje	Sužinokite, kaip sukurti daugiapusės svetainės struktūrą naudojant maršrutinimą ir HTML šablonus	HTML šablonai ir maršrutinimas	Yohan
22	Banking App	Prisijungimo ir registracijos formos kūrimas	Sužinokite apie formų kūrimą ir validacijos tvarkymą	Formos	Yohan
23	Banking App	Duomenų gavimo ir naudojimo metodai	Kaip duomenys patenka į programėlę, kaip juos gauti, saugoti ir išmesti	Duomenys	Yohan
24	Banking App	Būsenos valdymo konceptai	Sužinokite, kaip programa išlaiko būseną ir kaip ją valdyti programuojant	Būsenos valdymas	Yohan
25	Naršyklės/VScode kodas	Darbas su VScode	Sužinokite, kaip naudotis kodo redaktoriumi	Naudojant VScode redaktorių	Chris
26	Dirbtinio intelekto asistentai	Darbas su DI	Sužinokite, kaip sukurti savo DI asistentą	DI asistento projektas	Chris

🏫 Pedagogika

Mūsų mokymo programa sukurta atsižvelgiant į du pagrindinius pedagoginius principus:

projektų pagrindu mokymasis
dažni testai

Programa moko JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir technikų, kurias naudoja šiandienos interneto kūrėjai. Studentai galės įgyti praktinės patirties kurdami rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, erdvės užpuoliko stiliaus žaidimą ir verslo bankinę programėlę. Baigę šią programą studentai turės tvirtą supratimą apie interneto kūrimą.

🎓 Šias pirmas kelias pamokas šioje mokymo programoje galite atlikti kaip Mokymosi kelią Microsoft Learn platformoje!

Užtikrindami, kad turinys atitiktų projektus, procesas tampa įdomesnis studentams ir padeda geriau įsisavinti koncepcijas. Taip pat parengėme kelias pradines pamokas apie JavaScript pagrindus, suporuotas su vaizdo įrašu iš „Beginners Series to: JavaScript“ vaizdo įrašų kolekcijos, kurių kai kurie autoriai prisidėjo prie šios programos kūrimo.

Be to, žemas testas prieš pamoką nukreipia studentų dėmesį į mokymosi temą, o antras testas po pamokos užtikrina papildomą įsisavinimą. Ši mokymo programa sukurta būti lanksti ir įdomi, ją galima atlikti visą arba dalinai. Projektai prasideda nuo paprastų ir tampa vis sudėtingesni per 12 savaičių ciklą.

Nors sąmoningai vengėme pristatyti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius, reikalingus interneto kūrėjui, geras tolesnis žingsnis baigus šią programą būtų išmokti apie Node.js per kitą vaizdo įrašų kolekciją: „Beginner Series to: Node.js“.

Apsilankykite mūsų Elgesio kodekse ir Prisidėjimo gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos!

🧭 Offline prieiga

Šią dokumentaciją galite paleisti offline naudodami Docsify. Fork’inkite šį repo, įdiekite Docsify savo kompiuteryje, tada rakto aplanke paleiskite komandą docsify serve. Svetainė bus pateikta per 3000 porto adresu jūsų localhost: localhost:3000.

📘 PDF

PDF su visomis pamokomis rasite čia.

🎒 Kitos Pamokos

Mūsų komanda kuria ir kitas pamokas! Peržiūrėkite:

LangChain

Azure / Edge / MCP / Agentai

Generatyvioji Dirbtinis Intelektas serija

Pagrindinis Mokymasis

Copilot Serija

Pagalbos gavimas

Jei užstringate arba turite klausimų apie DI programų kūrimą. Prisijunkite prie kitų besimokančių ir patyrusių programuotojų diskusijose apie MCP. Tai palaikanti bendruomenė, kurioje klausimai laukiami, o žinios dalijamos laisvai.

Jei turite produktų atsiliepimų arba pastebite klaidų kurdami, apsilankykite:

Licencija

Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite faile LICENSE.

Atsakomybės ribojimas:
Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors stengiamės užtikrinti tikslumą, atkreipkite dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Esant svarbiai informacijai, rekomenduojama pasitelkti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar neteisingus aiškinimus, kylančius dėl šio vertimo naudojimo.

33 KiB Raw Blame History Unescape Escape