Sekite šiuos žingsnius, kad pradėtumėte naudotis šiais ištekliais: 1. **Fork'uokite saugyklą**: Spustelėkite [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Klonuokite saugyklą**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Prisijunkite prie Azure AI Foundry Discord ir susipažinkite su ekspertais bei kitais kūrėjais**](https://discord.com/invite/ByRwuEEgH4) # Interneto svetainių kūrimas pradedantiesiems - mokymo programa Išmokite interneto svetainių kūrimo pagrindus per 12 savaičių išsamų kursą, kurį 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ą naudodamiesi efektyvia projektų pagrindu sukurta pedagogika. Pradėkite savo programavimo kelionę jau šiandien! ### 🌐 Daugiakalbė palaikymas #### Palaikoma per GitHub Action (Automatizuota ir visada atnaujinta) [Prancūzų](../fr/README.md) | [Ispanų](../es/README.md) | [Vokiečių](../de/README.md) | [Rusų](../ru/README.md) | [Arabų](../ar/README.md) | [Persų (Farsi)](../fa/README.md) | [Urdu](../ur/README.md) | [Kinų (supaprastinta)](../zh/README.md) | [Kinų (tradicinė, Makao)](../mo/README.md) | [Kinų (tradicinė, Honkongas)](../hk/README.md) | [Kinų (tradicinė, Taivanas)](../tw/README.md) | [Japonų](../ja/README.md) | [Korėjiečių](../ko/README.md) | [Hindi](../hi/README.md) | [Bengalų](../bn/README.md) | [Marathi](../mr/README.md) | [Nepalų](../ne/README.md) | [Pundžabi (Gurmukhi)](../pa/README.md) | [Portugalų (Portugalija)](../pt/README.md) | [Portugalų (Brazilija)](../br/README.md) | [Italų](../it/README.md) | [Lenkų](../pl/README.md) | [Turkų](../tr/README.md) | [Graikų](../el/README.md) | [Tajų](../th/README.md) | [Švedų](../sv/README.md) | [Danų](../da/README.md) | [Norvegų](../no/README.md) | [Suomių](../fi/README.md) | [Olandų](../nl/README.md) | [Hebrajų](../he/README.md) | [Vietnamiečių](../vi/README.md) | [Indoneziečių](../id/README.md) | [Malajų](../ms/README.md) | [Tagalog (Filipiniečių)](../tl/README.md) | [Svahilių](../sw/README.md) | [Vengrų](../hu/README.md) | [Čekų](../cs/README.md) | [Slovakų](../sk/README.md) | [Rumunų](../ro/README.md) | [Bulgarų](../bg/README.md) | [Serbų (kirilica)](../sr/README.md) | [Kroatų](../hr/README.md) | [Slovėnų](../sl/README.md) | [Ukrainiečių](../uk/README.md) | [Birmos (Mianmaras)](../my/README.md) **Jei norite, kad būtų palaikomos papildomos kalbos, sąrašą rasite [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** #### 🧑‍🎓 _Ar esate studentas?_ Apsilankykite [**Studentų centro puslapyje**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kur rasite pradedančiųjų išteklius, studentų paketus ir net būdus, kaip gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta pažymėti ir tikrinti reguliariai, nes turinys keičiamas kas mėnesį. ### 📣 Pranešimas - _Naujas projektas sukurti naudojant generatyvinį AI_ Pridėtas naujas AI asistentas projektas, patikrinkite [projektą](./09-chat-project/README.md) ### 📣 Pranešimas - _Nauja mokymo programa_ apie generatyvinį AI JavaScript kalboje ką tik išleista Nepraleiskite mūsų naujos generatyvinio AI mokymo programos! Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), kad pradėtumėte!  - Pamokos apima viską nuo pagrindų iki RAG. - Sąveikaukite su istoriniais veikėjais naudodami GenAI ir mūsų pagalbinę programą. - Smagi ir įtraukianti pasakojimo forma, keliausite laiku!  Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, kurie padės jums mokytis tokių temų kaip: - Komandų kūrimas ir jų inžinerija - Teksto ir vaizdų programų generavimas - Paieškos programos Apsilankykite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), kad pradėtumėte! ## 🌱 Pradžia > **Mokytojai**, mes [įtraukėme keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Laukiame jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! **[Mokiniams](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo prieš paskaitos viktorinos, perskaitykite paskaitos medžiagą, atlikite įvairias veiklas ir patikrinkite savo supratimą po paskaitos viktorinoje. Norėdami pagerinti mokymosi patirtį, susisiekite su savo bendraamžiais ir dirbkite kartu prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatorių komanda bus pasirengusi atsakyti į jūsų klausimus. Norėdami tęsti mokymąsi, labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) papildomai studijų medžiagai. ### 📋 Aplinkos nustatymas Ši mokymo programa turi paruoštą vystymo aplinką! Pradėdami galite pasirinkti vykdyti mokymo programą [Codespace](https://github.com/features/codespaces/) (_naršyklės pagrindu, nereikia diegti_), arba vietoje savo kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Sukurkite savo saugyklą Kad galėtumėte lengvai išsaugoti savo darbą, rekomenduojama sukurti savo šios saugyklos kopiją. Tai galite padaryti spustelėdami mygtuką **Use this template** puslapio viršuje. Tai sukurs naują saugyklą jūsų GitHub paskyroje su mokymo programos kopija. Sekite šiuos žingsnius: 1. **Fork'uokite saugyklą**: Spustelėkite mygtuką "Fork" puslapio viršutiniame dešiniajame kampe. 2. **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 jūsų kompiuteryje Norėdami vykdyti šią 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](../../1-getting-started-lessons/1-intro-to-programming-languages), padės jums pasirinkti geriausius įrankius. Mūsų rekomendacija yra naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kaip redaktorių, kuris taip pat turi integruotą [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code galite atsisiųsti [čia](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Klonuokite savo saugyklą į kompiuterį. Tai galite padaryti spustelėdami mygtuką **Code** ir nukopijuodami URL: [!CodeSpace](./images/createcodespace.png) Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code ir vykdykite šią komandą, pakeisdami `` į ką tik nukopijuotą URL: ```bash git clone ``` 2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti spustelėdami **File** > **Atidarykite aplanką** ir pasirinkite aplanką, kurį ką tik nukopijavote. > Rekomenduojami Visual Studio Code plėtiniai: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - peržiūrėti HTML puslapius Visual Studio Code aplinkoje > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - padeda greičiau rašyti kodą ## 📂 Kiekviena pamoka apima: - pasirenkamą eskizą - pasirenkamą papildomą vaizdo įrašą - apšilimo testą prieš pamoką - rašytinę pamoką - projektinėms pamokoms – žingsnis po žingsnio vadovus, kaip sukurti projektą - žinių patikrinimus - iššūkį - papildomą skaitymą - užduotį - [testą po pamokos](https://ff-quizzes.netlify.app/web/) > **Pastaba apie testus**: Visi testai yra „Quiz-app“ aplanke, iš viso 48 testai, kiekviename po tris klausimus. Jie pasiekiami [čia](https://ff-quizzes.netlify.app/web/), o testų programėlę galima paleisti lokaliai arba įdiegti Azure platformoje; sekite instrukcijas `quiz-app` aplanke. ## 🗃️ Pamokos | | Projekto pavadinimas | Mokomos sąvokos | Mokymosi tikslai | Susieta pamoka | Autorius | | :-: | :--------------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | 01 | Pradžia | Programavimo įvadas ir darbo įrankiai | Sužinokite pagrindinius programavimo kalbų principus ir apie programinę įrangą, kuri padeda profesionaliems programuotojams | [Programavimo kalbų ir darbo įrankių įvadas](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | Pradžia | GitHub pagrindai, darbas komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais programinės bazės kūrėjais | [GitHub įvadas](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | Pradžia | Prieinamumas | Sužinokite pagrindinius interneto prieinamumo principus | [Prieinamumo pagrindai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | JS pagrindai | JavaScript duomenų tipai | JavaScript duomenų tipų pagrindai | [Duomenų tipai](./2-js-basics/1-data-types/README.md) | Jasmine | | 05 | JS pagrindai | Funkcijos ir metodai | Sužinokite apie funkcijas ir metodus, kurie valdo programos logikos eigą | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | 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](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | JS pagrindai | Masyvai ir ciklai | Darbas su duomenimis naudojant masyvus ir ciklus JavaScript | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [Terariumas](./3-terrarium/solution/README.md) | HTML praktikoje | Sukurkite HTML, kad sukurtumėte internetinį terariumą, sutelkiant dėmesį į išdėstymo kūrimą | [HTML įvadas](./3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [Terariumas](./3-terrarium/solution/README.md) | CSS praktikoje | Sukurkite CSS, kad stilizuotumėte internetinį terariumą, sutelkiant dėmesį į CSS pagrindus, įskaitant puslapio pritaikymą | [CSS įvadas](./3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Terariumas](./3-terrarium/solution/README.md) | JavaScript uždarymai, DOM manipuliacija | Sukurkite JavaScript, kad terariumas veiktų kaip drag/drop sąsaja, sutelkiant dėmesį į uždarymus ir DOM manipuliaciją | [JavaScript uždarymai, DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Rašymo žaidimas](./4-typing-game/solution/README.md) | Sukurkite rašymo žaidimą | Sužinokite, kaip naudoti klaviatūros įvykius, kad valdytumėte savo JavaScript programos logiką | [Įvykių valdymas](./4-typing-game/typing-game/README.md) | Christopher | | 12 | [Žalias naršyklės plėtinys](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Žalias naršyklės plėtinys](./5-browser-extension/solution/README.md) | Formos kūrimas, API kvietimas ir kintamųjų saugojimas vietinėje atmintyje | Sukurkite JavaScript elementus savo naršyklės plėtiniui, kad galėtumėte kviesti API naudojant vietinėje atmintyje saugomus kintamuosius | [API, formos ir vietinė atmintis](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [Žalias naršyklės plėtinys](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | 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 | [Pažangus žaidimų kūrimas](./6-space-game/1-introduction/README.md) | Chris | | 16 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinokite apie Canvas API, naudojamą elementams piešti ekrane | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Elementų judėjimas ekrane | Sužinokite, kaip elementai gali judėti naudojant Dekarto koordinates ir Canvas API | [Elementų judėjimas](./6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Susidūrimų aptikimas | Sukurkite elementų susidūrimus ir reakcijas į juos naudojant klavišų paspaudimus bei įgyvendinkite funkciją, užtikrinančią našumą | [Susidūrimų aptikimas](./6-space-game/4-collision-detection/README.md) | Chris | | 19 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikite matematinius skaičiavimus pagal žaidimo būseną ir našumą | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris | | 20 | [Kosmoso žaidimas](./6-space-game/solution/README.md) | Ž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](./6-space-game/6-end-condition/README.md) | Chris | | 21 | [Banko programėlė](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutai interneto programėlėje | Sužinokite, kaip sukurti daugiapuslapio tinklalapio architektūros karkasą naudojant maršrutizavimą ir HTML šablonus | [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md) | Yohan | | 22 | [Banko programėlė](./7-bank-project/solution/README.md) | Prisijungimo ir registracijos formos kūrimas | Sužinokite apie formų kūrimą ir validacijos rutinų valdymą | [Formos](./7-bank-project/2-forms/README.md) | Yohan | | 23 | [Banko programėlė](./7-bank-project/solution/README.md) | Duomenų gavimo ir naudojimo metodai | Kaip duomenys teka į jūsų programėlę ir iš jos, kaip juos gauti, saugoti ir ištrinti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan | | 24 | [Banko programėlė](./7-bank-project/solution/README.md) | Būsenos valdymo sąvokos | Sužinokite, kaip jūsų programėlė išlaiko būseną ir kaip ją valdyti programiškai | [Būsenos valdymas](./7-bank-project/4-state-management/README.md) | Yohan | | 25 | [Naršyklė/VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinokite, kaip naudoti kodo redaktorių | [VScode kodo redaktoriaus naudojimas](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su AI | Sužinokite, kaip sukurti savo AI asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris | ## 🏫 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į, kosmoso invazijos stiliaus žaidimą ir banko programėlę verslui. Baigę kursą, studentai turės tvirtą interneto kūrimo supratimą. > 🎓 Pirmąsias kelias pamokas iš šios mokymo programos galite išbandyti kaip [mokymosi kelią](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn platformoje! Užtikrinant, kad turinys atitiktų projektus, mokymosi procesas tampa įdomesnis studentams, o sąvokų įsisavinimas sustiprėja. Taip pat sukūrėme kelias pradedančiųjų pamokas apie JavaScript pagrindus, suporuotas su vaizdo įrašu iš "[Pradedančiųjų serija: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" vaizdo pamokų kolekcijos, kurios autoriai prisidėjo prie šios mokymo programos. Be to, mažo spaudimo testas prieš pamoką nustato studento ketinimą mokytis temos, o antras testas po pamokos užtikrina geresnį įsisavinimą. Š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 iki 12 savaičių ciklo pabaigos. Nors sąmoningai vengėme JavaScript karkasų, 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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". > Apsilankykite mūsų [Elgesio kodekse](CODE_OF_CONDUCT.md) ir [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvaus grįžtamojo ryšio! ## 🧭 Prieiga neprisijungus Šią dokumentaciją galite paleisti neprisijungus naudodami [Docsify](https://docsify.js.org/#/). Fork'inkite šį repozitoriją, [įdiekite Docsify](https://docsify.js.org/#/quickstart) savo vietiniame kompiuteryje, o tada šio repozitorijos šakniniame aplanke įveskite `docsify serve`. Svetainė bus paleista 3000 prievade jūsų localhost'e: `localhost:3000`. ## 📘 PDF PDF su visomis pamokomis galite rasti [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Kiti kursai Mūsų komanda kuria ir kitus kursus! Peržiūrėkite: - [Generatyvinis AI pradedantiesiems](https://aka.ms/genai-beginners) - [Generatyvinis AI pradedantiesiems .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [Generatyvinis AI su JavaScript](https://github.com/microsoft/generative-ai-with-javascript) - [Generatyvinis AI su Java](https://github.com/microsoft/Generative-AI-for-beginners-java) - [AI pradedantiesiems](https://aka.ms/ai-beginners) - [Duomenų mokslas pradedantiesiems](https://aka.ms/datascience-beginners) - [Mašininis mokymasis pradedantiesiems](https://aka.ms/ml-beginners) - [Kibernetinis saugumas pradedantiesiems](https://github.com/microsoft/Security-101) - [Tinklalapių kūrimas pradedantiesiems](https://aka.ms/webdev-beginners) - [Daiktų internetas (IoT) pradedantiesiems](https://aka.ms/iot-beginners) - [XR kūrimas pradedantiesiems](https://github.com/microsoft/xr-development-for-beginners) - [GitHub Copilot įvaldymas agentiniam naudojimui](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [GitHub Copilot įvaldymas C#/.NET programuotojams](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) - [Pasirinkite savo Copilot nuotykį](https://github.com/microsoft/CopilotAdventures) ## Licencija Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite [LICENSE](../../LICENSE) faile. --- **Atsakomybės apribojimas**: Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/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. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.