|
3 weeks ago | |
---|---|---|
.. | ||
1-getting-started-lessons | 3 weeks ago | |
2-js-basics | 3 weeks ago | |
3-terrarium | 3 weeks ago | |
4-typing-game | 3 weeks ago | |
5-browser-extension | 3 weeks ago | |
6-space-game | 3 weeks ago | |
7-bank-project | 3 weeks ago | |
8-code-editor/1-using-a-code-editor | 3 weeks ago | |
docs | 3 weeks ago | |
lesson-template | 3 weeks ago | |
quiz-app | 3 weeks ago | |
CODE_OF_CONDUCT.md | 3 weeks ago | |
CONTRIBUTING.md | 3 weeks ago | |
README.md | 3 weeks ago | |
SECURITY.md | 3 weeks ago | |
SUPPORT.md | 3 weeks ago | |
_404.md | 3 weeks ago | |
for-teachers.md | 3 weeks ago |
README.md
Sekite šiuos žingsnius, kad pradėtumėte naudotis šiais ištekliais:
- Fork'inkite saugyklą: Spustelėkite
- Klonuokite saugyklą:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
- Prisijunkite prie Azure AI Foundry Discord ir susipažinkite su ekspertais bei kitais kūrėjais
Interneto svetainių kūrimas pradedantiesiems – mokymo programa
Išmokite interneto svetainių kūrimo pagrindus per 12 savaičių išsamią kursų programą, kurią parengė Microsoft Cloud Advocates. Kiekviena iš 24 pamokų apima JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosminiai žaidimai. Dalyvaukite viktorinose, diskusijose ir praktinėse užduotyse. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą naudodami efektyvią projektų pagrindu paremtą mokymo metodiką. Pradėkite savo programavimo kelionę jau šiandien!
🧑🎓 Ar esate studentas?
Apsilankykite Studentų centro puslapyje, kur rasite pradedančiųjų išteklius, studentų paketus ir net būdus, kaip gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta įsiminti ir reguliariai tikrinti, nes turinys keičiamas kas mėnesį.
📣 Pranešimas - Nauja mokymo programa apie generatyvinį AI JavaScript kalbai
Nepraleiskite mūsų naujos generatyvinio AI mokymo programos!
Apsilankykite https://aka.ms/genai-js-course, kad pradėtumėte!
- Pamokos nuo pagrindų iki RAG.
- Sąveika su istoriniais veikėjais naudojant GenAI ir mūsų pagalbinę programėlę.
- Smagi ir įtraukianti pasakojimo forma – keliausite laiku!
Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, kurie padės mokytis tokių temų kaip:
- Užklausų kūrimas ir jų inžinerija
- Teksto ir vaizdų programėlių kūrimas
- Paieškos programėlės
Apsilankykite https://aka.ms/genai-js-course, kad pradėtumėte!
🌱 Pradžia
Mokytojai, mes įtraukėme keletą pasiūlymų, kaip naudoti šią mokymo programą. Laukiame jūsų atsiliepimų mūsų diskusijų forume!
Mokiniams, kiekvienai pamokai pradėkite nuo viktorinos prieš paskaitą, perskaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite savo supratimą su viktorina po paskaitos.
Norėdami pagerinti mokymosi patirtį, susisiekite su savo bendraamžiais ir dirbkite kartu prie projektų! Diskusijos skatinamos mūsų diskusijų forume, kur mūsų moderatorių komanda bus pasirengusi atsakyti į jūsų klausimus.
Norėdami tęsti mokymąsi, labai rekomenduojame tyrinėti Microsoft Learn papildomai studijų medžiagai.
📋 Aplinkos paruošimas
Ši mokymo programa turi paruoštą kūrimo aplinką! Pradėdami galite pasirinkti vykdyti mokymo programą Codespace (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 darbą, rekomenduojama sukurti savo šios saugyklos kopiją. Tai galite padaryti spustelėję mygtuką Use this template puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje su mokymo programos kopija.
Sekite šiuos žingsnius:
- Fork'inkite saugyklą: Spustelėkite mygtuką "Fork" puslapio viršuje dešinėje.
- Klonuokite saugyklą:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Mokymo programos vykdymas Codespace aplinkoje
Savo sukurtoje šios saugyklos kopijoje spustelėkite mygtuką Code ir pasirinkite Open with Codespaces. Tai sukurs naują Codespace aplinką, kurioje galėsite dirbti.
!Codespace./images/createcodespace.png)
Mokymo programos vykdymas vietoje savo kompiuteryje
Norėdami vykdyti mokymo programą vietoje savo kompiuteryje, jums reikės teksto redaktoriaus, naršyklės ir komandinės eilutės įrankio. Pirmoji pamoka, Įvadas į programavimo kalbas ir įrankius, padės jums pasirinkti geriausius įrankius.
Mūsų rekomendacija yra naudoti Visual Studio Code kaip redaktorių, kuris taip pat turi integruotą Terminalą. Visual Studio Code galite atsisiųsti čia.
-
Klonuokite savo saugyklą į kompiuterį. Tai galite padaryti spustelėję mygtuką Code ir nukopijuodami URL:
Tada atidarykite Terminalą Visual Studio Code ir vykdykite šią komandą, pakeisdami
<your-repository-url>
į ką tik nukopijuotą URL:git clone <your-repository-url>
-
Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėję File > Open Folder ir pasirinkę ką tik klonuotą aplanką.
Rekomenduojami Visual Studio Code plėtiniai:
- Live Server - peržiūrėti HTML puslapius Visual Studio Code
- Copilot - padeda greičiau rašyti kodą
📂 Kiekviena pamoka apima:
- pasirenkamą eskizą
- pasirenkamą papildomą vaizdo įrašą
- viktoriną prieš pamoką
- rašytinę pamoką
- projektų pagrindu paremtoms pamokoms – žingsnis po žingsnio vadovus, kaip sukurti projektą
- žinių patikrinimus
- iššūkį
- papildomą skaitymą
- užduotį
- viktoriną po pamokos
Pastaba apie viktorinas: Visos viktorinos yra Quiz-app aplanke, iš viso 48 viktorinos po tris klausimus. Jas galite rasti čia, viktorinų programėlę galima vykdyti vietoje arba įdiegti Azure; sekite instrukcijas
quiz-app
aplanke.
🗃️ Pamokos
Projekto pavadinimas | Mokomos sąvokos | Mokymosi tikslai | Susieta pamoka | Autorius | |
---|---|---|---|---|---|
01 | Pradžia | Įvadas į programavimą ir įrankius | Sužinokite pagrindinius programavimo kalbų principus ir apie programinę įrangą, kuri padeda profesionaliems kūrėjams atlikti savo darbą | Įvadas į programavimo kalbas ir įrankius | Jasmine |
02 | Pradžia | GitHub pagrindai, įskaitant darbą komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais kodų bazėje | Įvadas į GitHub | Floor |
03 | Pradžia | Prieinamumas | Sužinokite pagrindinius interneto prieinamumo principus | 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, kurie padeda valdyti programos logikos eigą | Funkcijos ir metodai | Jasmine ir Christopher |
06 | JS pagrindai | Sprendimų priėmimas su JS | Sužinokite, kaip kurti sąlygas savo kode naudojant sprendimų priėmimo metodus | Sprendimų priėmimas | Jasmine |
07 | JS pagrindai | Masyvai ir ciklai | Darbas su duomenimis naudojant masyvus ir ciklus JavaScript | Masyvai ir ciklai | Jasmine |
08 | Terariumas | HTML praktikoje | Sukurkite HTML, kad sukurtumėte internetinį terariumą, sutelkiant dėmesį į išdėstymo kūrimą | Įvadas į HTML | Jen |
09 | Terariumas | CSS praktikoje | Sukurkite CSS, kad stilizuotumėte internetinį terariumą, sutelkiant dėmesį į CSS pagrindus, įskaitant puslapio pritaikymą | Įvadas į CSS | Jen |
10 | Terrarium | JavaScript uždarymai, DOM manipuliacija | Sukurkite JavaScript, kad terariumas veiktų kaip vilkimo/nuleidimo sąsaja, sutelkiant dėmesį į uždarymus ir DOM manipuliaciją | JavaScript uždarymai, DOM manipuliacija | Jen |
11 | Typing Game | Sukurkite rašymo žaidimą | Sužinokite, kaip naudoti klaviatūros įvykius, kad valdytumėte savo JavaScript programos logiką | Įvykių valdymas | Christopher |
12 | Green Browser Extension | Darbas su naršyklėmis | Sužinokite, kaip veikia naršyklės, jų istoriją ir kaip sukurti pirmuosius naršyklės plėtinio elementus | Apie naršykles | Jen |
13 | Green Browser Extension | Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje saugykloje | Sukurkite JavaScript elementus savo naršyklės plėtiniui, kad galėtumėte kviesti API, naudojant vietinėje saugykloje saugomus kintamuosius | API, formos ir vietinė saugykla | Jen |
14 | Green Browser Extension | Fono procesai naršyklėje, interneto našumas | Naudokite naršyklės fono procesus, kad valdytumėte plėtinio piktogramą; sužinokite apie interneto našumą ir optimizacijas | Fono užduotys ir našumas | Jen |
15 | Space Game | Pažangesnis žaidimų kūrimas su JavaScript | Sužinokite apie paveldėjimą, naudojant klases ir kompoziciją, bei Pub/Sub modelį, ruošiantis žaidimo kūrimui | Įvadas į pažangų žaidimų kūrimą | Chris |
16 | Space Game | Piešimas ant drobės | Sužinokite apie Canvas API, naudojamą elementų piešimui ekrane | Piešimas ant drobės | Chris |
17 | Space Game | Elementų judėjimas ekrane | Sužinokite, kaip elementai gali judėti naudojant Dekarto koordinates ir Canvas API | Elementų judėjimas | Chris |
18 | Space Game | Susidūrimų aptikimas | Padarykite, kad elementai susidurtų ir reaguotų vienas į kitą, naudojant klavišų paspaudimus, ir pridėkite atvėsimo funkciją, kad užtikrintumėte žaidimo našumą | Susidūrimų aptikimas | Chris |
19 | Space Game | Taškų skaičiavimas | Atlikite matematinius skaičiavimus, remdamiesi žaidimo būsena ir našumu | Taškų skaičiavimas | Chris |
20 | Space Game | Žaidimo pabaiga ir paleidimas iš naujo | Sužinokite apie žaidimo pabaigą ir paleidimą iš naujo, įskaitant išteklių valymą ir kintamųjų reikšmių atstatymą | Pabaigos sąlyga | Chris |
21 | Banking App | HTML šablonai ir maršrutai interneto programoje | Sužinokite, kaip sukurti daugiapusės svetainės architektūros karkasą, naudojant maršrutizavimą ir HTML šablonus | HTML šablonai ir maršrutai | Yohan |
22 | Banking App | Prisijungimo ir registracijos formos kūrimas | Sužinokite apie formų kūrimą ir validacijos rutinų valdymą | Formos | Yohan |
23 | Banking App | Duomenų gavimo ir naudojimo metodai | Sužinokite, kaip duomenys teka į jūsų programą ir iš jos, kaip juos gauti, saugoti ir ištrinti | Duomenys | Yohan |
24 | Banking App | Būsenos valdymo koncepcijos | Sužinokite, kaip jūsų programa išlaiko būseną ir kaip ją valdyti programiškai | Būsenos valdymas | Yohan |
🏫 Pedagogika
Mūsų mokymo programa sukurta remiantis dviem pagrindiniais pedagoginiais principais:
- projektinis mokymasis
- dažni testai
Programa moko JavaScript, HTML ir CSS pagrindų, taip pat naujausių įrankių ir technikų, kurias naudoja šiuolaikiniai interneto kūrėjai. Studentai turės galimybę įgyti praktinės patirties, kurdami rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, žaidimą „kosmoso įsibrovėliai“ ir verslo bankininkystės programą. Baigę kursą, studentai turės tvirtą interneto kūrimo supratimą.
🎓 Pirmąsias kelias pamokas iš šios mokymo programos galite išbandyti kaip mokymosi kelią „Microsoft Learn“ platformoje!
Užtikrinant, kad turinys atitiktų projektus, mokymosi procesas tampa įdomesnis studentams, o koncepcijų išlaikymas sustiprėja. Taip pat sukūrėme kelias pradedančiųjų pamokas apie JavaScript pagrindus, suporuotas su vaizdo įrašu iš kolekcijos „Pradedančiųjų serija: JavaScript“, kurios autoriai prisidėjo prie šios mokymo programos.
Be to, mažo streso testas prieš pamoką nukreipia studento dėmesį į mokymąsi, o antras testas po pamokos užtikrina geresnį išlaikymą. Ši mokymo programa buvo sukurta taip, kad būtų lanksti ir įdomi, ją galima mokytis visą arba dalimis. Projektai prasideda nuo mažų ir tampa vis sudėtingesni per 12 savaičių ciklą.
Nors sąmoningai vengėme įtraukti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius, reikalingus interneto kūrėjui prieš pradedant naudoti karkasą, geras kitas žingsnis baigus šią mokymo programą būtų Node.js mokymasis per kitą vaizdo įrašų kolekciją: „Pradedančiųjų serija: Node.js“.
Apsilankykite mūsų Elgesio kodekse ir Prisidėjimo gairėse. Laukiame jūsų konstruktyvaus atsiliepimo!
🧭 Prieiga neprisijungus
Šią dokumentaciją galite naudoti neprisijungus, naudodami Docsify. Fork'inkite šį repozitoriją, įdiekite Docsify savo vietiniame kompiuteryje, o tada pagrindiniame šio repozitorijos aplanke įveskite docsify serve
. Svetainė bus pasiekiama 3000 prievade jūsų vietiniame kompiuteryje: localhost:3000
.
Visų pamokų PDF galite rasti čia.
🎒 Kiti kursai
Mūsų komanda kuria ir kitus kursus! Peržiūrėkite:
- Generatyvinis AI pradedantiesiems
- Generatyvinis AI pradedantiesiems .NET
- Generatyvinis AI su JavaScript
- Generatyvinis AI su Java
- AI pradedantiesiems
- Duomenų mokslas pradedantiesiems
- ML pradedantiesiems
- Kibernetinis saugumas pradedantiesiems
- Interneto kūrimas pradedantiesiems
- IoT pradedantiesiems
- XR kūrimas pradedantiesiems
- GitHub Copilot valdymas agentiniam naudojimui
- GitHub Copilot valdymas C#/.NET kūrėjams
- Pasirinkite savo Copilot nuotykį
Licencija
Šis repozitorijus yra licencijuotas pagal MIT licenciją. Daugiau informacijos rasite LICENCIJOJE.
Atsakomybės apribojimas:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.