From 93dc90497613eef80e0f68a0ce83252b0f4fd62a Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 6 Mar 2026 17:20:51 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes) --- translations/lt/.co-op-translator.json | 10 +- .../README.md | 704 +++++++------- translations/lt/AGENTS.md | 320 +++---- translations/lt/README.md | 271 +++--- translations/my/.co-op-translator.json | 10 +- .../README.md | 893 ++++++++++-------- translations/my/AGENTS.md | 359 ++++--- translations/my/README.md | 285 +++--- translations/uk/.co-op-translator.json | 10 +- .../README.md | 879 +++++++++-------- translations/uk/AGENTS.md | 416 ++++---- translations/uk/README.md | 254 ++--- 12 files changed, 2345 insertions(+), 2066 deletions(-) diff --git a/translations/lt/.co-op-translator.json b/translations/lt/.co-op-translator.json index 569921b15..b04ee16cf 100644 --- a/translations/lt/.co-op-translator.json +++ b/translations/lt/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-07T12:19:52+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T17:16:43+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "lt" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:59:09+00:00", + "translation_date": "2026-03-06T17:20:47+00:00", "source_file": "AGENTS.md", "language_code": "lt" }, @@ -516,8 +516,8 @@ "language_code": "lt" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:53:56+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T17:12:06+00:00", "source_file": "README.md", "language_code": "lt" }, diff --git a/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 0d8cd6755..18be5657b 100644 --- a/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,12 +1,12 @@ # Įvadas į programavimo kalbas ir modernius kūrėjų įrankius + +Sveikas, būsimasis programuotojau! 👋 Ar galiu tau pasakyti kažką, kas man kiekvieną dieną sukelia šiurpuliukus? Tu ketini atrasti, kad programavimas nėra tik kompiuteriai – tai tikros supergalios, leidžiančios įgyvendinti tavo laukines idėjas! -Sveikas, būsimasis kūrėjau! 👋 Ar galiu tau pasakyti kažką, kas vis dar kasdien sukelia man šiurpuliukus? Tu netrukus suprasi, kad programavimas – tai ne tik apie kompiuterius – tai apie tikrąsias supergalias, kurios leidžia įgyvendinti tavo laukinius sumanymus! +Žinai tą akimirką, kai naudojiesi savo mėgstama programa ir viskas tiesiog veikia tobulai? Kai palieti mygtuką ir įvyksta kažkas stebuklingo, dėl ko sakai "oho, kaip jie TAI padarė?" Na, kažkas, panašus į tave – tikriausiai savo mėgstamoje kavinėje prie 2 val. nakties su trečiu espreso – parašė tą kodą, kuris sukūrė tą magiją. Ir štai kas tau privers sprogti protą: šios pamokos pabaigoje ne tik suprasi, kaip jie tai padarė, bet ir pats norėsi pabandyti! -Žinai tą akimirką, kai naudoji savo mėgstamą programėlę ir viskas tiesiog veikia tobuloje harmonijoje? Kai paspaudi mygtuką ir įvyksta kažkas visiškai stebuklingo, dėl ko sakančiausi: „oho, kaip jie TAI padarė?“ Na, kažkas panašaus į tave – tikriausiai sėdintis savo mėgstamoje kavinėje vidurnaktį su trečiąja espresso porcija – parašė tą kodą, kuris sukūrė tą magiją. Ir štai kas privers tave nustebti: pamoko pabaigoje tu ne tik suprasi, kaip jie tai padarė, bet ir pats norėsi išbandyti! +Žinok, suprantu, jei programavimas dabar atrodo bauginantis. Kai pradėjau, tikrai galvojau, kad reikia būti kažkokiu matematikos genijumi arba programuoti nuo penkerių metų. Tačiau štai kas visiškai pakeitė mano požiūrį: programavimas yra tarsi naujos kalbos mokymasis – pradedi nuo „labas“ ir „ačiū“, tuomet pereini prie kavos užsakymo ir netrukus jau vedi gilius filosofinius pokalbius! Tik šiuo atveju tu kalbiesi su kompiuteriais, o jie – kantriausi pašnekovai, kokius gali turėti – niekada nepeikia tavo klaidų ir visada noriai bando dar kartą! -Žinau, programuoti gali atrodyti baugu. Kai aš pradėjau, man atrodė, kad turi būti kažkokiu būdu matematikos genijus arba programuoti nuo penkerių metų. Bet štai kas visiškai pakeitė mano požiūrį: programavimas yra kaip išmokti kalbėti nauja kalba. Pradedi nuo „labas“ ir „ačiū“, paskui gali užsisakyti kavos, o netrukus jau kalbiesi apie gilias filosofines temas! Tik šiuo atveju – tu kalbiesi su kompiuteriais, ir žinai ką? Jie yra kantriausi pašnekovai – niekada nenuvertina tavo klaidų ir visada entuziastingai nori pabandyti dar kartą! - -Šiandien pažvelgsime į neįtikėtinas priemones, kurios daro šiuolaikinį žiniatinklio kūrimą ne tik įmanomu, bet ir labai priklausomybę sukeliančiu užsiėmimu. Kalbu apie tuos pačius redaktorius, naršykles ir darbo eigas, kuriomis kasdien naudojasi kūrėjai Netflix, Spotify bei tavo mėgstamoje nepriklausomoje programėlių studijoje. Ir štai kas privers tave šokti iš džiaugsmo: dauguma šių profesionalių, pramonės standartų įrankių yra visiškai nemokami! +Šiandien pažvelgsime į nuostabius įrankius, kurie modernią žiniatinklio kūrimą paverčia ne tik įmanoma, bet ir labai įtraukią. Kalbu apie tuos pačius redaktorius, naršykles ir darbo procesus, kuriuos kasdien naudoja „Netflix“, „Spotify“ ir tavo mėgstamos nepriklausomos programėlių studijos kūrėjai. Ir štai dalykas, kuris privers tave šokti iš laimės: dauguma šių profesionalių pramonės standartų įrankių yra visiškai nemokami! ![Intro Programming](../../../../translated_images/lt/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac) @@ -18,69 +18,69 @@ journey Kas yra programavimas: 5: You Programavimo kalbos: 4: You Įrankių apžvalga: 5: You - section Tyrinėkite + section Ištirkite Kodo redaktoriai: 4: You Naršyklės ir kūrėjų įrankiai: 5: You Komandinė eilutė: 3: You section Praktika - Kalbos detektyvas: 4: You + Kalbų detektyvas: 4: You Įrankių tyrinėjimas: 5: You Bendruomenės ryšys: 5: You ``` ## Pažiūrėkime, ką jau žinai! -Prieš pereidami prie linksmybių, įdomu – ką tu jau žinai apie šį programavimo pasaulį? Ir žinok, jei žvelgi į šiuos klausimus galvodamas „Aš nieko apie tai nežinau iš viso“, tai ne tik gerai, bet puiku! Tai reiškia, kad esi būtent ten, kur reikia. Galvok apie šį testą kaip apie apšilimą prieš treniruotę – tiesiog šildome smegenų raumenis! +Prieš tai, kai pradėsime smagų turinį, man įdomu – ką tu jau žinai apie šį programavimo pasaulį? Ir žinok, jei žiūri į šiuos klausimus ir galvoji „aš iš tiesų neturiu jokio supratimo apie tai“, tai ne tik gerai, tai puiku! Tai reiškia, kad esi tiksliai ten, kur turi būti. Įsivaizduok šį testą kaip tempimą prieš treniruotę – mes tiesiog ruošiamės raumenims! -[Atlik pradžios testą](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Atlik išankstinį testą](https://ff-quizzes.netlify.app/web/) -## Nuotykis, kurį keliausime kartu +## Nuotykis, į kurį kartu įžengsime -Gerai, aš tikrai negaliu nusėdėti iš džiaugsmo, ką šiandien tyrinėsime! Rimtai, norėčiau matyti tavo veidą, kai kai kurios iš šių sąvokų tikrai įsisavins. Štai neįtikėtina kelionė, kurią keliaujame kartu: +Gerai, aš tikrai smarkiai džiaugiuosi tuo, ką šiandien tyrinėsime! Rimtai, norėčiau pamatyti tavo veidą, kai kai kurie iš šių koncepcijų įsižiebs. Štai nuostabi kelionė, kurią keliausime kartu: -- **Kas yra programavimas iš tikrųjų (ir kodėl tai pats šauniausias dalykas!)** – Atraskime, kaip kodas yra nematoma magija, valdanti viską aplink tave, nuo to žadintuvo, kuris kaip nors žino, kad yra pirmadienio rytas, iki algoritmo, kuris idealiai atrenka tavo Netflix rekomendacijas -- **Programavimo kalbos ir jų nuostabios asmenybės** – Įsivaizduok, kad įeini į vakarėlį, kuriame kiekvienas žmogus turi visiškai skirtingas supergalias ir problemų sprendimo būdus. Taip ir su programavimo kalbomis, ir tau patiks jas pažinti! -- **Pagrindiniai blokai, kurie sukuria skaitmeninę magiją** – Įsivaizduok tai kaip neprilygstamą kūrybinį LEGO rinkinį. Kai suprasi, kaip šios dalys dera tarpusavyje, suprasi, kad gali statyti bet ką, ką tik įsivaizduoji -- **Profesionalūs įrankiai, kurie privers tave jaustis lyg ką tik gavai burtininko lazdelę** – Nėra jokio perdėjimo – šie įrankiai iš tiesų privers tave pasijusti turint supergalias, o geriausia? Tai tie patys įrankiai, kuriuos naudoja profesionalai! +- **Kas iš tikrųjų yra programavimas (ir kodėl tai be galo šaunu!)** – Atraskime, kaip kodas tiesiogiai yra nematoma magija, kuri valdo viską aplinkui, nuo to žadintuvo, kuris kaip mat žino, kad yra pirmadienio rytas, iki algoritmo, kuris tobulai parenka tavo „Netflix“ rekomendacijas +- **Programavimo kalbos ir jų nuostabios asmenybės** – Įsivaizduok vakarėlį, kuriame kiekvienas turi skirtingas supergalias ir sprendžia problemas savaip. Būtent toks yra programavimo kalbų pasaulis, ir tu jas pamilsi! +- **Pagrindiniai pastato blokai, kurie kuria skaitmeninę magiją** – Įsivaizduok juos kaip tobulą kūrybinį LEGO rinkinį. Kai suprasi, kaip šios dalys dera kartu, suprasi, kad gali sukurti bet ką, ką tik sugalvoji +- **Profesionalūs įrankiai, dėl kurių jausiesi tarsi tau būtų įteikta burtininko lazdelė** – Aš čia nešališkas dramatiškumas – šie įrankiai tikrai leis tau jaustis, kad turi supergalias, o geriausia? Tai patys įrankiai, kuriuos naudoja profesionalai! -> 💡 **Štai kas svarbu**: šiandien nė nebandyk įsiminti visko! Šiuo metu tiesiog noriu, kad pajustum tą susidomėjimą dėl galimų dalykų. Detalės natūraliai įsigers, kai mokysimės kartu – taip vyksta tikras mokymasis! +> 💡 **Svarbu**: Neskubėk šiandien visko įsiminti! dabar noriu, kad pajustum tą azartą, kas įmanoma. Detalės ateis natūraliai, kai kartu praktikavsimės – taip vyksta tikras mokymasis! -> Šią pamoką gali atlikti [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Šią pamoką gali rasti [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Tai kas gi iš tikrųjų yra *programavimas*? +## Tai kas gi *yra* programavimas? -Gerai, imkime milijono dolerių vertės klausimą: kas yra programavimas iš tikrųjų? +Gerai, imkimės milijono dolerių klausimo: kas iš tiesų yra programavimas? -Papasakosiu tau istoriją, kuri visiškai pakeitė mano požiūrį. Praėjusią savaitę bandžiau paaiškinti mamai, kaip naudotis mūsų naujuoju išmaniuoju televizoriaus pultu. Aš svarsčiau, sakydamas: „Paspausk raudoną mygtuką, bet ne didelį raudoną mygtuką, mažą raudoną kairėje... ne, tavo kita kairė... gerai, dabar palaikyk du sekundes, ne vieną, ne tris...“ Skamba pažįstamai? 😅 +Papasakosiu tau istoriją, kuri visiškai pakeitė mano požiūrį. Praėjusią savaitę bandžiau mamai paaiškinti, kaip naudotis mūsų nauju išmaniuoju televizoriaus nuotolinio valdymo pultu. Pagavau save sakant tokius žodžius: „Paspausk raudoną mygtuką, bet ne didįjį raudoną, o mažąjį raudoną kairėje... ne, tavo kitas kairėje... gerai, dabar laikyk du sekundes, ne vieną, ne tris...“ Skamba pažįstamai? 😅 -Tai yra programavimas! Tai menas duoti labai detalias, žingsnis po žingsnio instrukcijas kažkam labai galingam, bet kuriam reikia itin aiškiai viską išdėstyti. Tik vietoj to, kad aiškintum mamai (kuri gali paklausti „kuris raudonas mygtukas?!“), aiškini kompiuteriui (kuris tiksliai daro tai, ką sakai, net jei tai, ką sakei, nėra būtent tai, ką norėjai pasakyti). +Tai yra programavimas! Tai menas duoti labai išsamius, žingsnis po žingsnio nurodymus kažkam galingam, bet kam reikia viską tiksliai išdėstyti. Tik vietoje to, kad aiškintum mamytei (kuri gali paklausti „kuri raudona mygtukė?!“), tu aiškini kompiuteriui (kuris tiesiog atlieka tai, ką sakai, net jei tai ne visiškai tas, ką turėjai omenyje). -Štai kas mane nustebino, kai tik pradėjau mokytis: kompiuteriai iš esmės yra gana paprasti. Jie supranta tik du dalykus – 1 ir 0, kas iš esmės yra „taip“ ir „ne“ arba „įjungta“ ir „išjungta.“ Tai viskas! Bet štai kur prasideda magija – mes nemokame kalbėti tik 1 ir 0, tarsi būtume „Matricoje.“ Čia į pagalbą ateina **programavimo kalbos**. Jos kaip geriausias vertėjas pasaulyje, kuris tau padeda išreikšti tavo paprastus žmonių mintis kompiuterių kalba. +Štai kas man atvertė akis, kai tik pradėjau mokytis: kompiuteriai iš tiesų yra gana paprasti savo esmėje. Jie supranta tik du dalykus – 1 ir 0, kas yra tiesiog „taip“ ir „ne“ arba „įjungta“ ir „išjungta“. Viskas! Bet štai kur prasideda magija – mums nereikia kalbėti tik 1 ir 0, tarsi būtume „Matricoje“. Čia į pagalbą ateina **programavimo kalbos**. Jos tarsi geriausias pasaulio vertėjas, kuris išverčia tavo paprastus žmogiškus mintis į kompiuterio kalbą. -Ir štai kas vis dar kas rytą man kelia šiurpuliukus: pažink, kad *viskas* skaitmeniniame pasaulyje tavo gyvenime prasidėjo nuo kažkieno panašaus į tave, tikriausiai sėdinčio pižamoje su puoduku kavos, rašančio kodą į savo nešiojamąjį kompiuterį. Tas Instagram filtras, kuris padaro tave tobulą? Kas nors parašė tą kodą. Rekomendacija, kuri nuvedė tave prie naujos mėgstamos dainos? Kūrėjas sukūrė tą algoritmą. Programėlė, kuri padeda tau dalintis vakarienės sąskaitą su draugais? Taip, kažkas pagalvojo „čia erzina, aš galėčiau tai išspręsti“ ir tada… tai padarė! +Ir štai kas man kiekvieną rytą pažadina tikrus šiurpuliukus: tiesiog *viskas* skaitmeniniame pasaulyje prasidėjo nuo kažko panašaus į tave, tikriausiai pasislėpusio pižamoje su puodeliu kavos, kuris rašė kodą savo nešiojamame kompiuteryje. Tas Instagram filtras, kuris leidžia tau atrodyti nepriekaištingai? Kažkas jį sukūrė. Rekomendacija, kuri atvedė tave iki tavo naujos mėgstamos dainos? Programuotojas sukūrė tą algoritmą. Programėlė, kuri padeda suskaidyti vakarienės sąskaitas su draugais? Taip, kažkas pagalvojo „tai erzina, tikrai galėčiau tai išspręsti“ ir tada... jis tai padarė! -Kai išmoksti programuoti, tu ne tik įgyji naują įgūdį – tu tampi šios nuostabios bendruomenės dalimi, kurią sudaro problemoms spręsti skirtų žmonių grupė, kuri kasdien galvoja: „O ką, jei galėčiau sukurti kažką, kas šiek tiek pagerintų kieno nors dieną?“ Sąžiningai, ar yra kas nors šaunesnio? +Išmokęs programuoti, ne tik įgiši naują įgūdį – tu tampi šios nuostabios problemų sprendėjų bendruomenės dalimi, kuri dienas leidžia galvodama: „O kas, jei galėčiau sukurti kažką, kas padaro kieno nors dieną bent šiek tiek geresnę?“ Svarstyk, ar yra kas nors šauniau už tai? -✅ **Smagus faktas**: štai kažkas labai įdomaus, ką gali paieškoti, kai turėsi laisvą minutę – kas, tavo manymu, buvo pirmasis pasaulio kompiuterio programuotojas? Duosiu užuominą: tai gali būti ne tas, ko tikiesi! Šio žmogaus istorija yra tikrai fascinanti ir parodo, kad programavimas visada buvo kūrybiškas problemų sprendimas ir mąstymas už įprastų ribų. +✅ **Linksmas faktų medžioklė**: Štai kas smagu paieškoti, kai turėsi laisvą minutę – kas, tavo manymu, buvo pirmasis pasaulio kompiuterių programuotojas? Pasilenksiu į užuominą: tai gali būti ne tas, ko tikėjaisi! Šios asmenybės istorija yra be galo įkvepianti ir parodo, kad programavimas visada buvo susijęs su kūrybišku problemų sprendimu ir mąstymu už ribų. -### 🧠 **Patikrink save: kaip jautiesi?** +### 🧠 **Patikrink, kaip jautiesi?** -**Skirk minutėlę apmąstymams:** -- Ar dabar tau prasminga idėja „duoti instrukcijas kompiuteriams“? +**Skirk minutę apmąstymams:** +- Ar dabar tau prasminga idėja „duoti nurodymus kompiuteriams“? - Ar gali pagalvoti apie kasdienę užduotį, kurią norėtum automatizuoti programuodamas? -- Kokie klausimai kyla tavo galvoje apie visą tą programavimo pasaulį? +- Kokie klausimai kyla tavo galvoje apie visą šitą programavimo dalyką? -> **Prisimink**: visiškai normalu, jei kai kurios sąvokos atrodo miglotos. Programavimą mokytis yra kaip naują kalbą – smegenims reikia laiko sukurti naujus ryšius. Tu darai puikiai! +> **Prisimink**: visiškai normalu, jei kai kurios sąvokos dabar atrodo miglotos. Programavimo mokymasis yra kaip naujos kalbos mokymasis – reikia laiko neurų keliams susiformuoti. Tu eini puikiai! -## Programavimo kalbos – tai kaip skirtingi magijos skoniai +## Programavimo kalbos – kaip skirtingi magijos skoniai -Gerai, tai skambės keistai, bet lik su manimi – programavimo kalbos daug kuo panašios į skirtingų muzikos stilių rūšis. Pagalvok: turi džiazą, kuris yra švelnus ir improvizuojantis, roką, kuris yra galingas ir tiesmukas, klasiką, kuri elegantiška ir struktūruota, ir hiphopą, kuris kūrybingas ir išraiškingas. Kiekvienas stilius turi savo nuotaiką, savo aistringų gerbėjų bendruomenę, ir kiekvienas puikiai tinka skirtingiems jausmams bei progoms. +Gerai, tai skambės keistai, bet būk su manimi – programavimo kalbos daug kuo primena skirtingų muzikos stilių. Įsivaizduok: turi džiazą, kuris yra lygus ir improvizacinis, rokenrolą, kuris galingas ir tiesmukas, klasiką, kuri elegantiška ir struktūruota, ir hip-hopą, kuris kūrybingas ir ekspresyvus. Kiekvienas stilius turi savo nuotaiką, savo aistringų gerbėjų bendruomenę, ir kiekvienas yra tinkamas skirtingoms nuotaikoms ir progoms. -Programavimo kalbos veikia lygiai taip pat! Tu juk nenaudotum tos pačios kalbos kurdama linksmą mobilią žaidimą ir apdorojant milžiniškus klimato duomenis, taip pat kaip nesileisi žaisti death metalo jogų užsiėmime (na, daugelyje užsiėmimų tikrai ne! 😄). +Programavimo kalbos veikia būtent taip! Tu nenaudotum tos pačios kalbos smagiam mobiliam žaidimui kurti, kuriai apdoroti didžiulius klimato duomenų kiekius, kaip ir nesileistum groti death metalo jogos užsiėmime (na, daugumoje jogos užsiėmimų! 😄). -Bet štai kas mane visuomet stulbina: šios kalbos yra kaip kantriausias, genialiausias pasaulio vertėjas, sėdintis šalia tavęs. Tu gali išreikšti savo idėjas taip, kaip tau natūralu kaip žmogui, o jos atlieka visą sudėtingą darbą verčiant tai į kompiuterio kalbą, kurią sudaro 1 ir 0. Tai kaip turėti draugą, kuris puikiai moka tiek „žmogišką kūrybiškumą“, tiek „kompiuterinę logiką“ – jie niekada nepavargsta, niekada neprisiruošia kavos pertraukėlės, ir niekada tavęs nevertina, jei paklai aus tą patį klausimą du kartus! +Bet štai kas kiekvieną kartą man visiškai priverčia protą suktis: šios kalbos tarsi turi kantriausią, įspūdingiausią vertėją, kuris sėdi šalia tavęs. Tu gali išreikšti savo idėjas taip, kaip tavo žmogaus smegenims natūralu, o jis rūpinasi visa labai sudėtinga vertimo dalimi į 1 ir 0 kalbą, kuria iš tikrųjų kalba kompiuteriai. Tai tarsi draugas, kuris tobulai moka tiek „žmogišką kūrybiškumą“, tiek „kompiuterinę logiką“ – ir jis niekada nepavargsta, jam nereikia kavos pertraukų, ir jis niekada nepeikia, jei tu pakartotinai klausiu tą patį! -### Populiarios programavimo kalbos ir jų panaudojimas +### Populiarios programavimo kalbos ir jų paskirtys ```mermaid mindmap @@ -88,7 +88,7 @@ mindmap Web kūrimas JavaScript Frontendo magija - Interaktyvios svetainės + Interaktyvūs tinklalapiai TypeScript JavaScript + tipai Įmonių programos @@ -103,7 +103,7 @@ mindmap Mobiliosios programėlės Java Android - Įmonės + Įmonių programos Swift iOS Apple ekosistema @@ -113,49 +113,49 @@ mindmap Sistemos ir našumas C++ Žaidimai - Našumo kritiniai + Našumo kritinė vieta Rust - Atminties sauga - Sistemų programavimas + Atminties saugumas + Sisteminė programinė įranga Go Debesų paslaugos - Skalabilus backendas + Skalaujamas backendas ``` -| Kalba | Geriausia naudoti | Kodėl populiari | -|----------|----------|------------------| -| **JavaScript** | Žiniatinklio kūrimas, vartotojo sąsajos | Veikia naršyklėse ir valdo interaktyvias svetaines | -| **Python** | Duomenų mokslas, automatizavimas, dirbtinis intelektas | Lengva skaityti ir mokytis, galingos bibliotekos | -| **Java** | Verslo programos, Android programėlės | Platformų nepriklausoma, stabili didelėms sistemoms | -| **C#** | Windows programos, žaidimų kūrimas | Stipri Microsoft ekosistema | -| **Go** | Debesų paslaugos, serverio pusės sistemos | Greita, paprasta, sukurta šiuolaikiniam skaičiavimui | +| Kalba | Geriausiai tinka | Kodėl populiari | +|-------|------------------|-----------------| +| **JavaScript** | Interneto kūrimas, vartotojo sąsajos | Veikia naršyklėse, valdo interaktyvias svetaines | +| **Python** | Duomenų mokslas, automatizavimas, DI | Lengva skaityti ir mokytis, galingos bibliotekos | +| **Java** | Įmonių programos, Android programėlės | Platformai nepriklausoma, tvirta didelėms sistemoms | +| **C#** | „Windows“ programos, žaidimų kūrimas | Stipri Microsoft ekosistema | +| **Go** | Debesų paslaugos, backend sistemos | Greita, paprasta, sukurta šiuolaikinei skaičiavimams | ### Aukšto lygio ir žemo lygio kalbos -Gerai, tai buvo sąvoka, kuri visiškai sudaužė mano smegenis, kai pradėjau mokytis, todėl pasidalinsiu analogija, kuri man pagaliau padėjo suprasti – ir tikiuosi, padės ir tau! +Gerai, tai buvo tiesiog koncepcija, kuri išties sunaikino mano protą, kai pradėjau mokytis, todėl dalinsiuosi analogija, kuri pagaliau man leido tai suprasti – ir labai tikiuosi, kad ir tau padės! -Įsivaizduok, kad esi svečiuose šalyje, kurios kalbos nemoki, ir desperatiškai nori rasti artimiausią tualetą (visi per gyvenimą esame buvę tokioje situacijoje, tiesa? 😅): +Įsivaizduok, kad lankaisi šalyje, kurios kalbos nesupranti, ir desperatiškai reikia rasti artimiausią tualetą (mes visi per tą esame ėję, tiesa? 😅): -- **Žemo lygio programavimas** yra kaip taip gerai išmokti vietinę tarme, kad gali kalbėtis su močiute, kuri parduoda vaisius kampe, naudodamas kultūrinius potekstes, vietinius slengus ir užkulisines anekdotų nuorodas, kurias supranta tik tas, kas užaugo ten. Labai įspūdinga ir be galo efektyvu... jei esi gimtakalbis! Bet gana baugu, kai tiesiog bandai rasti tualetą. +- **Žemo lygio programavimas** yra tarsi mokėti vietinį dialektą taip gerai, kad gali kalbėtis su močiute, kuri prekiauja vaisiais kampe, naudodamas kultūrinius niuansus, vietinius žodžius ir vidinius juokelius, kuriuos supranta tik tie, kurie užaugo ten. Labai įspūdinga ir labai efektyvu... jei esi sklandus! Tačiau gana sudėtinga, kai tik nori rasti tualetą. -- **Aukšto lygio programavimas** yra kaip turėti nuostabų vietinį draugą, kuris tave puikiai supranta. Gali pasakyti „Man tikrai reikia rasti tualetą“ paprasta anglų kalba, o jis pasirūpina visa kultūrine interpretacija ir nurodo kelią taip, kad tavo nelokalams smegenims viskas būtų aišku. +- **Aukšto lygio programavimas** yra tarsi turėti nuostabų vietinį draugą, kuris tiesiog tave supranta. Gali pasakyti „man labai reikia surasti tualetą“ paprasta anglų kalba, o jis išverčia kultūrinius niuansus ir duoda tau nuorodas tokiu būdu, kuris tavo nenatūralioms smegenims visiškai aiškus. Programavimo terminais: -- **Žemo lygio kalbos** (pvz., Assembly ar C) leidžia labai detaliai bendrauti su kompiuterio aparatine įranga, bet reikia galvoti kaip mašina, o tai... sakykime, didelis protinis pokytis! -- **Aukšto lygio kalbos** (pvz., JavaScript, Python ar C#) leidžia mąstyti kaip žmogus, o jos rūpinasi visa mašinos kalba užkulisiuose. Be to, jose gyvena draugiškos bendruomenės, pilnos žmonių, kurie prisimena, kaip buvo naujokai ir tikrai nori padėti! +- **Žemo lygio kalbos** (tokios kaip Asamblėja ar C) leidžia labai detaliai kalbėtis su kompiuterio aparatine įranga, tačiau reikalingas mašinos mąstymas, o tai... na, sakykime, didelis psichologinis šuolis! +- **Aukšto lygio kalbos** (pavyzdžiui, JavaScript, Python ar C#) leidžia galvoti kaip žmogui, o jos pačios rūpinasi visa mašinine kalba užkulisiuose. Be to, jos turi draugiškas bendruomenes, pilnas žmonių, kurie prisimena, kas buvo mokiniai ir tikrai nori padėti! -Spėk, kurias aš pasiūlysiu pradėti tau? 😉 Aukšto lygio kalbos yra kaip treniruočių ratukai, kurių tu iš tiesų niekada nenorėsi nusimesti, nes jos daro visą patirtį daug malonesnę! +Spėk, nuo kurių aš siūlau pradėti? 😉 Aukšto lygio kalbos yra tarsi mokomieji ratai, kurių tu tikrai nenori nuimti, nes jos daro visą patirtį daug smagesnę! ```mermaid flowchart TB - A["👤 Žmogiška mintis:
'Noriu apskaičiuoti Fibonačio skaičius'"] --> B{Pasirinkti kalbos lygį} + A["👤 Žmogiška mintis:
'Noriu apskaičiuoti Fibonačio skaičius'"] --> B{Pasirinkite programavimo kalbos lygį} B -->|Aukšto lygio| C["🌟 JavaScript/Python
Lengva skaityti ir rašyti"] - B -->|Žemo lygio| D["⚙️ Asamblėja/C
Tiesioginė aparatūros kontrolė"] + B -->|Žemo lygio| D["⚙️ Assembly/C
Tiesioginė aparatinės įrangos kontrolė"] C --> E["📝 Rašyti: fibonacci(10)"] D --> F["📝 Rašyti: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Kompiuterio suvokimas:
Vertėjas tvarko sudėtingumą"] + E --> G["🤖 Kompiuterio supratimas:
Vertėjas valdo sudėtingumą"] F --> G G --> H["💻 Tas pats rezultatas:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,13 +164,13 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Parodysiu, kodėl aukšto lygio kalbos yra kur kas draugiškesnės +### Parodysiu, kodėl aukšto lygio kalbos tokios draugiškos -Gerai, ketinu tau parodyti ką nors, kas puikiai iliustruoja, kodėl aš įsimylėjau aukšto lygio kalbas, bet pirmiausia – pažadu man kažką. Kai pamatysi pirmą kodo pavyzdį, nesijaudink! Jis turi atrodyti šiek tiek bauginantis. Būtent tai aš ir noriu parodyti! +Gerai, rodysiu tau pavyzdį, kuris puikiai parodo, kodėl aš pamėgau aukšto lygio kalbas, bet pirmiausiai – noriu, kad pažadėtum man kažką. Kai pamatysi pirmąk kodą, nepanikuok! Jis turi atrodyti bauginančiai. Ir tai yra būtent mano taikymas! -Pažiūrėsime tą pačią užduotį parašytą dviem visiškai skirtingais stiliais. Abi kuria tai, kas vadinama Fibonacci seka – gražus matematinis modelis, kuriame kiekvienas skaičius yra dviejų prieš jį esančių suma: 0, 1, 1, 2, 3, 5, 8, 13... (Smagus faktas: šį modelį rasi tiesiog visur gamtoje – saulėgrąžų sėklų spiralėse, kankorėžių raštuose, netgi galaktikų formavime!) +Pažiūrėsime tą pačią užduotį, parašytą dviem visiškai skirtingais stiliais. Abu sukuria Fibonacci seką – tai gražus matematinis dėsnis, kai kiekvienas skaičius yra dviejų prieš jį esančių sumą: 0, 1, 1, 2, 3, 5, 8, 13... (Įdomybė: šį dėsningumą rasi tiesiog visur gamtoje – saulėgrąžų sėklų spiralėse, pušų kūgių raštuose, netgi galaktikų formavime!) -Pasiruošęs pamatyti skirtumą? Pradėkime! +Pasiruošęs pamatyti skirtumą? Eime! **Aukšto lygio kalba (JavaScript) – žmogui draugiška:** @@ -183,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Štai ką daro šis kodas:** -- **Nustato** konstantą, kiek Fibonacci skaičių norime sugeneruoti -- **Inicijuoja** du kintamuosius, kurie seka esamą ir kitą skaičių sekoje -- **Nustato** pradines reikšmes (0 ir 1), kurios apibrėžia Fibonacci modelį -- **Rodo** antraštę, kad pažymėtų mūsų išvestį +**Šis kodas daro šiuos veiksmus:** +- **Deklaruoja** konstantą, kuri nurodo, kiek Fibonacci skaičių norime sugeneruoti +- **Inicializuoja** du kintamuosius, sekančius dabartinį ir kitą skaičių sekoje +- **Nustato** pradinius reikšmes (0 ir 1), kurios apibrėžia Fibonacci modelį +- **Pateikia** antraštę, kad pažymėtų rezultatus ```javascript -// 2 veiksmas: Sukurkite seką su kilpa +// 2 žingsnis: Sugeneruokite seką naudodami kilpą for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Apskaičiuokite kitą sekos skaičių + // Apskaičiuokite kitą skaičių sekoje const sum = current + next; current = next; next = sum; } ``` -**Kas vyksta čia:** -- **Kartojame** per visą sekos ilgį naudodami `for` ciklą -- **Rodo** kiekvieną skaičių su jo padėtimi naudodami šabloninį formatavimą -- **Apskaičiuoja** kitą Fibonacci skaičių pridėdami dabartinį ir kitą skaičių -- **Atnaujina** kintamuosius sekti, kad pereitume prie kitos iteracijos +**Čia vyksta:** +- **Kartojamas ciklas** per kiekvieną sekos elementą naudojant `for` ciklą +- **Rodomas** kiekvienas skaičius su jo pozicija naudojant šablonines eilutes +- **Apskaičiuojamas** kitas Fibonacci skaičius, sudedant dabartinę ir kitą reikšmes +- **Atnaujinami** kintamieji, judant prie kitos iteracijos ```javascript -// 3 žingsnis: Modernus funkcinis požiūris +// 3 žingsnis: Šiuolaikinis funkcinis požiūris const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -225,12 +225,12 @@ console.log(fibSequence); ``` **Aukščiau mes:** -- **Sukūrėme** pakartotinai naudojamą funkciją naudodami modernią rodyklės funkcijos sintaksę -- **Sukonstravome** masyvą, kuriame saugoma visa seka, o ne rodoma po vieną skaičių -- **Naudojame** masyvo indeksavimą, kad apskaičiuotume kiekvieną naują skaičių iš ankstesnių -- **Gražiname** visą seką, kad galėtume lankščiai naudoti kitose programos vietose +- **Sukūrėme** pakartotinai naudojamą funkciją, naudojant modernią rodyklės funkciją +- **Sukūrėme** masyvą, kuris saugo visą seką, o ne rodo skaičius pavieniui +- **Naudojome** masyvo indeksavimą, kad apskaičiuoti kiekvieną naują skaičių iš ankstesnių reikšmių +- **Gražiname** visą seką, kad ją būtų galima lanksčiai naudoti programos kituose vietose -**Žemo lygio kalba (ARM Assembly) – kompiuteriui draugiška:** +**Žemo lygio kalba (ARM Asamblėja) – kompiuteriui draugiška:** ```assembly area ascen,code,readonly @@ -257,77 +257,77 @@ back add r0,r1 end ``` -Pastebėk, kaip JavaScript variantas beveik skaito kaip anglų kalbos instrukcijos, o Assembly versija naudoja paslaptimis apipintas komandas, kurios tiesiogiai valdo kompiuterio procesorių. Abi atlieka tą pačią užduotį, bet aukšto lygio kalba yra daug lengviau suprantama, parašoma ir palaikoma žmogui. +Atkreipk dėmesį, kaip JavaScript versija skaitosi beveik kaip angliški nurodymai, o Asamblėjos versija naudoja kriptinius komandas, kurios tiesiogiai valdo kompiuterio procesorių. Abi atlieka tą pačią užduotį, bet aukšto lygio kalba gerokai lengviau suprantama, rašoma ir prižiūrima žmogui. -**Svarbūs skirtumai:** -- **Skaitomumas**: JavaScript naudoja aprašomuosius pavadinimus, tokius kaip `fibonacciCount`, o Assembly – paslėptus ženklus, tokius kaip `r0`, `r1` -- **Komentarai**: Aukšto lygio kalbos skatina aiškius komentarus, kurie daro kodą savarankiškai aprašomu -- **Struktūra**: JavaScript loginis srautas atitinka, kaip žmonės žingsnis po žingsnio mąsto apie problemas +**Pagrindiniai skirtumai, kuriuos pastebėsi:** +- **Skaitymo paprastumas**: JavaScript naudoja aprašomuosius pavadinimus, tokius kaip `fibonacciCount`, o Assembly – paslėptus žymenis, tokius kaip `r0`, `r1` +- **Komentarai**: Aukšto lygio kalbos skatina aiškinamuosius komentarus, kurie daro kodą savidokumentuojančiu +- **Struktūra**: JavaScript loginė eiga atitinka žmonių mąstymą problemų sprendime žingsnis po žingsnio - **Priežiūra**: JavaScript versijos atnaujinimas skirtingiems reikalavimams yra paprastas ir aiškus -✅ **Apie Fibonačio seką**: Šis tiesiog nuostabus skaičių modelis (kai kiekvienas skaičius yra dviejų prieš jį esančių suma: 0, 1, 1, 2, 3, 5, 8...) pasitaiko tiesiog *visur* gamtoje! Jį rasite saulėgrąžų spiralėse, pušies kūgio raštuose, nukalnių kriauklių išlinkimuose, ir netgi medžių šakų augime. Tai tikrai nuostabu, kaip matematika ir kodas gali padėti mums suprasti ir atkurti modelius, kuriuos gamta naudoja kurdama grožį! +✅ **Apie Fibonacci seką**: Šis visiškai nuostabus skaičių raštas (kur kiekvienas skaičius yra dviejų prieš jį esančių sumą: 0, 1, 1, 2, 3, 5, 8...) pasirodo tiesiog *visur* gamtoje! Jį rasite saulėgrąžų spiralėse, pušies kankorėžių raštuose, kaip vingiuoja nautilius kriauklės, net kaip auga medžių šakos. Labai įdomu, kaip matematika ir kodas gali padėti mums suprasti ir atkurti raštus, kuriuos gamta naudoja kuriant grožį! -## Statybiniai blokai, kurie sukuria magiją +## Kūrimo blokai, kurie daro magiją -Gerai, dabar, kai matėte, kaip atrodytų programavimo kalbos veikiant, išskaidykime pagrindines dalis, kurios sudaro praktiškai kiekvieną kada nors parašytą programą. Įsivaizduokite jas kaip svarbiausias sudedamąsias jūsų mėgstamoje recepto dalyje – kai suprasite, ką kiekviena daro, galėsite skaityti ir rašyti kodą beveik bet kuria kalba! +Gerai, dabar kai pamatėte, kaip atrodo programavimo kalbos praktiškai, suskaidykime pagrindines dalis, kurios sudaro tiesiog kiekvieną parašytą programą. Galvokite apie jas kaip esminius ingredientus savo mėgstamiausiame recepte – supratę, ką daro kiekvienas, galėsite skaityti ir rašyti kodą beveik bet kuria kalba! -Tai yra tarsi mokytis programavimo gramatikos. Prisiminkite mokykloje, kai mokėtės apie daiktavardžius, veiksmus ir kaip daryti sakinius? Programavimas turi savąją gramatiką, ir tiesą sakant, ji daug logiškesnė ir atlaidesnė nei anglų kalbos gramatika! 😄 +Tai kažkas panašaus į programavimo gramatikos mokymąsi. Prisiminkite mokykloje, kai mokėtės apie daiktavardžius, veiksmažodžius ir kaip sudaryti sakinius? Programavimas turi savo gramatikos versiją, ir tiesiog įdomu, kad ji yra daug logiškesnė ir atlaidesnė nei anglų kalbos gramatika! 😄 -### Pareiškimai: žingsnis po žingsnio instrukcijos +### Sakinių blokai: žingsnis po žingsnio instrukcijos -Pradėkime nuo **pareiškimų** – tai tarsi atskiri sakiniai pokalbyje su jūsų kompiuteriu. Kiekvienas pareiškimas liepia kompiuteriui atlikti vieną konkretų veiksmą, panašiai kaip duodami nurodymus: „Pasukite čia į kairę“, „Sustokite prie raudono šviesoforo“, „Pastatykite automobilį šioje vietoje.“ +Pradėkime nuo **sakinių** – jie kaip atskiros pastraipos pokalbyje su jūsų kompiuteriu. Kiekvienas sakinys liepia kompiuteriui atlikti vieną konkrečią užduotį, tarsi duotų kryptis: „Čia pasuk į kairę“, „Sustok prie raudono šviesoforo“, „Pastatyk automobilį tame taške.“ -Man patinka pareiškimų skaitomumas. Pažiūrėkite: +Man patinka sakiniai dėl jų skaitomumo. Pažiūrėkite: ```javascript -// Pagrindinės komandos, kurios atlieka vienkartines veiksmus +// Pagrindinės instrukcijos, kurios atlieka vienkartinius veiksmus const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Štai ką daro šis kodas:** -- **Deklaruoja** konstantą kintamąjį, kuriame saugomas vartotojo vardas -- **Rodo** pasveikinimo žinutę konsolėje -- **Apskaičiuoja** ir saugo matematinių veiksmų rezultatą +**Štai ką šis kodas atlieka:** +- **Deklaruoja** konstantą kintamąjį vartotojo vardui saugoti +- **Rodo** pasveikinimo pranešimą konsolės išvestyje +- **Apskaičiuoja** ir išsaugo matematinės operacijos rezultatą ```javascript -// Teiginiai, sąveikaujantys su tinklalapiais +// Teiginiai, kurie sąveikauja su tinklalapiais document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` **Žingsnis po žingsnio, štai kas vyksta:** -- **Keičia** interneto svetainės puslapio pavadinimą, rodomą naršyklės skirtuke +- **Pakeičia** tinklalapio pavadinimą, rodoma naršyklės skirtelyje - **Pakeičia** viso puslapio fono spalvą -### Kintamieji: Jūsų programos atminties sistema +### Kintamieji: jūsų programos atminties sistema -Gerai, **kintamieji** man yra viena iš mėgstamiausių mokymo sąvokų, nes jie labai panašūs į dalykus, kuriuos kasdien naudojate! +Taip, **kintamieji** yra tikrai viena mano mėgstamiausių mokymo sąvokų, nes jie labai panašūs į dalykus, kuriuos jau naudojate kiekvieną dieną! -Pagalvokite apie savo telefono kontaktų sąrašą. Jūs neužsirašote visų numerių atmintinai – vietoj to išsaugote „Mama“, „Geriausias draugas“ ar „Picerija, kuri tiekia iki 2 val. nakties“ ir telefono telefono atmintis prisimena tikruosius numerius. Kintamieji veikia lygiai taip pat! Jie tarsi pavadintos talpyklos, kuriose programa gali saugoti informaciją ir vėliau ją rasti pagal prasmingą pavadinimą. +Pagalvokite apie savo telefono kontaktų sąrašą. Jūs neužsirašote visų numerių atmintinai – vietoje to išsaugote „Mama“, „Geriausias draugas“ arba „Pica, kuri pristato iki 2 valandos nakties“ ir telefone išsaugomi tik tikrieji numeriai. Kintamieji veikia visai taip pat! Tai kaip pažymėtos talpos, kuriose jūsų programa gali saugoti informaciją ir vėliau ją pasiimti naudodama pavadinimą, kuris iš tikrųjų prasmingas. -Štai kas išties nuostabu: kintamieji gali keistis, kai programa veikia (todėl jie ir vadinami „kintamaisiais“ – suprantate, ką jie padarė?). Kaip atnaujinate tą picerijos kontaktą, kai radote dar geresnę vietą, taip kintamieji atnaujinami, kai programa sužino naujos informacijos arba kai situacijos keičiasi! +Čia yra tai, kas tikrai nuostabu: kintamieji gali keistis programos veikimo metu (todėl ir pavadinimas „kintamasis“ – pamatykite, ką jie padarė?). Kaip jūs galėtumėte atnaujinti tą picos kontaktą radę dar geresnį restoraną, taip kintamieji gali būti atnaujinti, kai programa sužino naujos informacijos arba keičiasi sąlygos! -Leiskite parodyti, kaip tai gali būti paprasta ir gražu: +Leiskite parodyti, kaip gražiai paprasta tai gali būti: ```javascript -// 1 žingsnis: kuriami pagrindiniai kintamieji +// 1 žingsnis: Kuriame pagrindinius kintamuosius const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` -**Šių sąvokų supratimas:** -- **Laikykite** nekintančias reikšmes `const` kintamuosiuose (pavyzdžiui, svetainės pavadinimą) -- **Naudokite** `let` vertėms, kurios gali keistis programos eigoje -- **Priskirkite** skirtingų tipų duomenis: tekstus (eilutes), skaičius ir bool tipo reikšmes (true/false) -- **Rinkitės** aiškius pavadinimus, kurie paaiškina, ką kiekvienas kintamasis saugo +**Šios sąvokos supratimas:** +- **Saugo** nekintamus duomenis `const` kintamuosiuose (pvz., svetainės pavadinimą) +- **Naudoja** `let` reikšmėms, kurios gali keistis programos metu +- **Priedija** skirtingus duomenų tipus: tekstus (string), skaičius, ir loginės reikšmės (boolean) +- **Pasirenka** aprašomuosius pavadinimus, kurie aiškiai paaiškina, ką kiekvienas kintamasis saugo ```javascript -// 2 žingsnis: Darbas su objektais siekiant suskirstyti susijusius duomenis +// 2 žingsnis: Darbas su objektais susijusių duomenų grupavimui const weatherData = { location: "San Francisco", humidity: 65, @@ -336,46 +336,46 @@ const weatherData = { ``` **Aukščiau mes:** -- **Sukūrėme** objektą, kuris grupuoja susijusią oro sąlygų informaciją -- **Organizavome** kelias duomenų dalis po vienu kintamuoju pavadinimu -- **Panaudojome** raktas-reikšmė poras, kad aiškiai pažymėtume kiekvieną duomenų dalį +- **Sukūrėme** objektą, grupuojantį susijusią orų informaciją +- **Organizavome** kelis duomenis po vienu kintamojo pavadinimu +- **Naudojome** raktas–reikšmė poras, kad aiškiai pažymėtume kiekvieną duomenų elementą ```javascript -// 3 žingsnis: kintamųjų naudojimas ir atnaujinimas +// 3 žingsnis: Kintamųjų naudojimas ir atnaujinimas console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Keičiami kintamieji atnaujinami +// Kintamųjų, kuriuos galima keisti, atnaujinimas currentWeather = "cloudy"; temperature = 68; ``` -**Suvokime kiekvieną dalį:** +**Paaiškinkime kiekvieną dalį:** - **Rodyti** informaciją naudojant šablonines eilutes su `${}` sintakse -- **Pasiekti** objekto savybes naudojant taško žymėjimą (`weatherData.windSpeed`) -- **Atnaujinti** `let` deklaruotus kintamuosius, kad atspindėtų kintančias sąlygas -- **Derinti** kelis kintamuosius, kad sukurtumėte prasmingas žinutes +- **Pasiekti** objekto savybes naudojant taškinę notaciją (`weatherData.windSpeed`) +- **Atnaujinti** `let` deklaruotus kintamuosius, kad atspindėtų besikeičiančias sąlygas +- **Sujungti** kelis kintamuosius kuriant prasmingus pranešimus ```javascript -// 4 žingsnis: Modernus destruktūravimas švaresniam kodui +// 4 žingsnis: Modernus destruktūrizavimas švaresniam kodui const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Tai, ką reikia žinoti:** -- **Išskirti** specifines objekto savybes naudojant destruktuojantį priskyrimą -- **Automatiškai kurti** naujus kintamuosius su tokiais pačiais pavadinimais kaip objekto raktai -- **Supaprastinti** kodą vengiant pasikartojančio taško žymėjimo +**Ką reikia žinoti:** +- **Išskirti** tam tikras objekto savybes naudojant destruktūrizavimo priskyrimą +- **Sukurti** naujus kintamuosius automatiškai su tokiais pat pavadinimais kaip objekto raktai +- **Supaprastinti** kodą vengiant pasikartojančios taškinės notacijos -### Valdymo eiga: mokome programą mąstyti +### Kontrolės srautas: mokome programą galvoti -Gerai, čia prasideda tikras programavimo stebuklas! **Valdymo eiga** iš esmės reiškia mokyti programą priimti protingus sprendimus, kaip darote kiekvieną dieną, net apie tai negalvodami. +Gerai, čia programavimas tampa tikrai stulbinantis! **Kontrolės srautas** iš esmės reiškia mokyti programą priimti išmintingus sprendimus, tarsi kaip jūs darote kiekvieną dieną be jokių minčių. -Įsivaizduokite: šiandien rytą turbūt pagalvojote „Jei lyja, pasiimsiu skėtį. Jei šalta – užsidėsiu striukę. Jei vėluoju, praleisiu pusryčius ir nusipirksiu kavos kelyje.“ Jūsų smegenys natūraliai seka šią jeigu-tada logiką dešimtis kartų kasdien! +Įsivaizduokite: ryte galbūt manote „Jeigu lyja, pasiimsiu skėtį. Jei šalta, apsirengsiu striukę. Jei vėluoju, nepavalgysiu ir pasiimsiu kavos pakeliui.“ Jūsų smegenys natūraliai vykdo šią jeigu–tai logiką dešimtis kartų per dieną! -Tai leidžia programoms atrodyti protingoms ir gyvoms, o ne tiesiog vykdyti nuobodžius, nuspėjamus scenarijus. Jos gali pažvelgti į situaciją, įvertinti, kas vyksta, ir tinkamai atsakyti. Lyg suteiktumėte savo programai smegenis, kurios gali prisitaikyti ir priimti sprendimus! +Tai daro programas protingas ir gyvas, o ne tik seką nuobodžių, nuspėjamų komandų. Jos iš tiesų gali pažvelgti į situaciją, įvertinti, kas vyksta, ir tinkamai reaguoti. Tarsi suteiktumėte programai smegenis, kurios gali prisitaikyti ir priimti sprendimus! -Norite pamatyti, kaip gražiai visa tai veikia? Leiskite parodyti: +Norite pamatyti, kaip gražiai tai veikia? Leiskite parodyti: ```javascript // 1 žingsnis: Pagrindinė sąlyginė logika @@ -389,14 +389,14 @@ if (userAge >= 18) { } ``` -**Štai ką daro šis kodas:** -- **Patikrina**, ar vartotojo amžius atitinka balsavimo reikalavimus -- **Vykdo** skirtingus kodo blokus pagal sąlygos rezultatą -- **Apskaičiuoja** ir rodo, kiek liko laiko iki balsavimo teisės, jei mažiau nei 18 -- **Teikia** konkrečią ir naudingą grįžtamąją informaciją kiekvienam atvejui +**Štai ką šis kodas daro:** +- **Tikrina**, ar vartotojo amžius atitinka balsavimo reikalavimą +- **Vykdo** skirtingus kodo blokus priklausomai nuo sąlygų rezultato +- **Apskaičiuoja** ir parodo, kiek dar laiko iki balsavimo teisės, jei vartotojas jaunesnis nei 18 +- **Suteikia** konkrečią, naudingą grįžtamąją informaciją kiekvienam atvejui ```javascript -// 2 žingsnis: kelios sąlygos su loginiais operatoriais +// 2 žingsnis: Keli sąlygos su loginiais operatoriais const userAge = 17; const hasPermission = true; @@ -409,22 +409,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Išskaidykime, kas čia vyksta:** -- **Sujungia** kelias sąlygas naudodama `&&` (ir) operatorių -- **Sukuria** sąlygų hierarchiją naudodama `else if` keliems scenarijams -- **Tvarko** visas galimas bylas naudodama galutinį `else` pareiškimą -- **Teikia** aiškią, veiksmingą grįžtamąją informaciją kiekvienai skirtingai situacijai +**Išskaidyti tai, kas čia vyksta:** +- **Sujungia** kelias sąlygas naudodami `&&` (ir) operatorių +- **Kurti** daugiapakopį sąlygų hierarchiją naudodami `else if` keliems scenarijams +- **Apdoroti** visas galimas situacijas galutiniu `else` sakiniu +- **Pateikti** aiškią, veiksmingą grįžtamąją informaciją kiekvienai skirtingai situacijai ```javascript -// 3 žingsnis: Trumpa sąlyga su ternariniu operatoriumi +// 3 žingsnis: Trumpa sąlyga su ternarinis operatoriumi const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Tai, ką verta prisiminti:** -- **Naudokite** ternarinį operatorių (`? :`) paprastoms dvejetainėms sąlygoms -- **Rašykite** sąlygą pirmiausia, tada `?`, po jos tiesa, tada `:`, po to melas -- **Pritaikykite** šį modelį, kai reikia priskirti reikšmes pagal sąlygas +**Ką reikia prisiminti:** +- **Naudoti** ternarinį operatorių (`? :`) paprastoms dviejų galimų variantų sąlygoms +- **Rašyti** sąlygą pirma, po to `?`, tada tiesos rezultatą, po to `:`, tada klaidos rezultatą +- **Taikyti** šį modelį, kai reikia priskirti reikšmes pagal sąlygas ```javascript // 4 žingsnis: kelių specifinių atvejų tvarkymas @@ -447,55 +447,55 @@ switch (dayOfWeek) { } ``` -**Šis kodas atlieka šiuos veiksmus:** -- **Palygina** kintamojo reikšmę su keliais specifiniais atvejais -- **Grupuoja** panašias bylas (darbo dienos prieš savaitgalius) -- **Vykdo** tinkamą kodą, kai randamas sutapimas -- **Įtraukia** `default` atvejį neplanuotoms reikšmėms -- **Naudoja** `break` pareiškimus, kad nebūtų tęsiamas kodas kitam atvejui +**Šis kodas atlieka:** +- **Suderina** kintamojo reikšmę su keliomis konkrečiomis situacijomis +- **Grupuoja** panašias bylas kartu (darbo dienos prieš savaitgalius) +- **Vykdo** tinkamą kodo bloką suradus atitikimą +- **Įtraukia** `default` atvejį netikėtoms reikšmėms apdoroti +- **Naudoja** `break` sakinius, kad kodas nesitęstų į kitą bylą -> 💡 **Tikro gyvenimo analogija**: Valdymo eigą įsivaizduokite kaip kantriausią GPS pasaulyje, kuris jums duoda nurodymus. Jis gali pasakyti „Jei Main gatvėje yra kamštis, važiuok greitkeliu. Jei greitkelį užkemša statybos, bandyk aplinkkelį.“ Programos naudoja tokią pačią sąlyginę logiką, kad išmintingai reaguotų į įvairias situacijas ir visada suteiktų geriausią patirtį vartotojams. +> 💡 **Realus pavyzdys**: Pagalvokite apie kontrolės srautą kaip apie kantriausią pasaulyje GPS, kuris duoda jums nurodymus. Jis gali sakyti: „Jei pagrindinėje gatvėje spūstis, važiuokite automagistrale. Jei automagistralę uždaro statybos, bandykite vaizdingą maršrutą.“ Programos naudoja tokią pačią loginę sąlygų logiką, kad išmintingai reaguotų į skirtingas situacijas ir visuomet suteiktų vartotojams geriausią patirtį. -### 🎯 **Patikrinimas: pagrindų valdymas** +### 🎯 **Konceptų patikrinimas: pagrindų meistriškumas** **Pažiūrėkime, kaip sekasi su pagrindais:** -- Ar galite savo žodžiais paaiškinti, kuo skiriasi kintamasis nuo pareiškimo? -- Pagalvokite apie realų gyvenimo pavyzdį, kur naudotumėte jeigu-tada sprendimą (kaip balsavimo pavyzdyje) -- Kas programavimo logikoje jus labiausiai nustebino? +- Ar galite paaiškinti skirtumą tarp kintamojo ir sakinio savo žodžiais? +- Sugalvokite realų scenarijų, kur panaudotumėte jeigu–tai sprendimą (kaip mūsų balsavimo pavyzdyje) +- Kas programavimo logikoje jus nustebino? -**Greitas pasitikėjimo suteikėjas:** +**Greitas pasitikėjimo pakilimas:** ```mermaid flowchart LR - A["📝 Pareiškimai
(Instrukcijos)"] --> B["📦 Kintamieji
(Saugykla)"] --> C["🔀 Valdymo Srautas
(Sprendimai)"] --> D["🎉 Veikianti Programa!"] + A["📝 Teiginiai
(Instrukcijos)"] --> B["📦 Kintamieji
(Saugojimas)"] --> C["🔀 Valdymo srautas
(Sprendimai)"] --> D["🎉 Veikianti Programa!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Kas bus toliau**: Mes įdomiai gilinsimės į šias sąvokas tęsdamiesi šią nuostabią kelionę kartu! Dabar tiesiog mėgaukitės jauduliu dėl visų nuostabių galimybių priešais jus. Specifiniai įgūdžiai ir technikos natūraliai įsimins, kai mokysimės kartu – pažadu, bus daug smagiau nei tikitės! +✅ **Ką darysime toliau**: Pradėsime smagiai gilintis į šias sąvokas ir tęsti šią nuostabią kelionę kartu! Dabar tiesiog susikoncentruokite į jaudulį dėl visų nuostabių galimybių, kurios laukia jūsų. Konkrečios įgūdžių ir technikos įsisavins natūraliai, kai praktikuosimės kartu – pažadu, tai bus daug smagiau, nei tikėjotės! -## Įrankiai +## Įrankiai darbui -Gerai, čia aš išties taip jaudinuosi, kad vos susivaldau! 🚀 Kalbėsime apie neįtikėtinus įrankius, kurie leis jaustis, tarsi ką tik gautumėte skaitmeninės kosminės erdvėlaivio raktus. +Gerai, čia aš iš tiesų labai jaudinuosi ir vos neapsiverkiu iš džiaugsmo! 🚀 Kalbėsime apie neįtikėtinus įrankius, kurie leis jums jaustis, tarsi ką tik gavote rakto nuo skaitmeninės kosminės laivo taikymo. -Žinote, kaip šefas turi tobulai sureguliuotus peilius, kurie tarsi taptų jo rankų pratęsimu? Arba kaip muzikantas turi tą vienintelę gitarą, kuri atrodo kažkaip dainuoja vos tik ją palietus? Na, programuotojai turi savo magiškų įrankių versiją, ir štai kas visiškai nušluostys jums kojas – dauguma jų yra visiškai nemokami! +Žinote, kaip virėjas turi tobulai subalansuotus peilius, kurie jaučiasi tarsi jo rankos tęsinys? O muzikantas turi gitarą, kuri atrodo ima dainuoti vos ją palietus? Na, kūrėjai turi savo versiją tų magiškų įrankių, ir štai kas jus tiesiog pribloškia – dauguma jų visai nemokami! -Praktiškai šoku iš džiaugsmo galvodamas apie tai, kaip visa tai jums papasakoti, nes jie visiškai pakeitė, kaip mes kuriame programinę įrangą. Kalbame apie dirbtiniu intelektu paremtus programavimo padėjėjus, kurie gali padėti jums rašyti kodą (rimtai!), debesis, kur galite kurti visą programą tiesiog iš bet kur su Wi-Fi, bei tokius sudėtingus klaidų taisymo įrankius, kurie tarsi turi rentgeno matymą jūsų programoms. +Negaliu nustygti vietoje, galvodamas apie galimybę dalintis jais su jumis, nes jie visiškai pakeitė, kaip kuriame programinę įrangą. Kalbame apie AI varomus kodo pagalbininkus, kurie gali padėti rašyti kodą (ir aš čia tikrai nejuokauju!), debesų aplinkas, kur galite kurti visas programas bet kur, kur yra Wi-Fi, ir tokį derinimo įrankių kompleksą, kad jie tarsi X-spinduliai jūsų programoms. -Ir štai dalis, kuri vis dar man kelia šiurpuliukus: tai nėra „pradedančiųjų įrankiai“, kuriuos peraugsit. Tai yra būtent tie patys profesionalūs įrankiai, kuriuos šiuo pat metu naudoja Google, Netflix ir tas indie programų studija, kurią mylite. Jūs jausitės tikrais profesionalais juos naudodami! +Ir štai kas man vis dar kelia šiurpuliukus: tai tikrai nėra „pradedančiųjų įrankiai“, kuriuos greitai peraugsit. Tai tie patys profesionalaus lygio įrankiai, kuriuos šiuo metu naudoja Google, Netflix ir ta indie programėlių studija, kurią dievinate. Jūs jausitės tikru profesionalu, juos naudodami! ```mermaid graph TD A["💡 Jūsų idėja"] --> B["⌨️ Kodo redaktorius
(VS Code)"] - B --> C["🌐 Naršyklės kūrimo įrankiai
(Testavimas ir derinimas)"] - C --> D["⚡ Komandų eilutė
(Automatizavimas ir įrankiai)"] - D --> E["📚 Dokumentacija
(Mokymasis ir nuoroda)"] - E --> F["🚀 Nuostabi žiniatinklio programa!"] + B --> C["🌐 Naršyklės kūrėjų įrankiai
(Testavimas ir derinimas)"] + C --> D["⚡ Komandinė eilutė
(Automatizavimas ir įrankiai)"] + D --> E["📚 Dokumentacija
(Mokymasis ir nuorodos)"] + E --> F["🚀 Nuostabi žiniatinklio programėlė!"] B -.-> G["🤖 DI asistentas
(GitHub Copilot)"] C -.-> H["📱 Įrenginių testavimas
(Reaguojantis dizainas)"] - D -.-> I["📦 Paketų tvarkyklės
(npm, yarn)"] + D -.-> I["📦 Paketo valdytojai
(npm, yarn)"] E -.-> J["👥 Bendruomenė
(Stack Overflow)"] style A fill:#fff59d @@ -505,121 +505,121 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Kodo redaktoriai ir IDE: jūsų nauji skaitmeniniai draugai +### Kodo redaktoriai ir IDE: jūsų naujieji skaitmeniniai draugai -Kalbėkime apie kodo redaktorius – jie tikrai taps jūsų mėgstamiausiomis vietomis kurti! Įsivaizduokite juos kaip asmeninę programavimo erdvę, kur praleisite daugiausiai laiko kurdami ir tobulindami savo skaitmeninius kūrinius. +Pakalbėkime apie kodo redaktorius – jie rimtai gali tapti jūsų mėgstamiausiomis vietomis praleisti laiką! Galvokite apie juos kaip savo asmeninę programavimo šventovę, kur praleisite daugiausia laiko, kurdami ir tobulindami savo skaitmeninius kūrinius. -Bet štai kas nepaprasta apie šiuolaikinius redaktorius: tai ne tik puošnūs teksto redaktoriai. Jie tarsi genialiausi, palaikantys programavimo mentoriai, sėdintys šalia jūsų 24/7. Jie pagauna jūsų klaidas dar prieš jums jas pastebint, siūlo patobulinimus, kurie padaro jus genijumi, padeda suprasti, ką daro kiekviena kodo dalis, o kai kurie net gali nuspėti, ką ketinate rašyti ir pasiūlyti užbaigti jūsų mintis! +Bet štai kas yra tiesiog magiška apie modernius redaktorius: jie nėra vien tik išvaizdžūs teksto redaktoriai. Jie tarsi pats šviesiausias ir palaikantis programavimo mentorius, sėdintis šalia jūsų 24/7. Jie pagauna jūsų klaidas dar anksčiau, nei jas pastebite, pasiūlo patobulinimus, kurie jus padaro genijumi, padeda suprasti, ką daro kiekvienas kodo gabalas, ir kai kurie net gali nuspėti, ką ketinate rašyti, ir pasiūlyti baigti jūsų mintis! -Prisimenu, kai atradau automatinį užbaigimą – nejaučiau, kad gyvenu realybėje, tai buvo tarsi ateitis. Pradedate rašyti, o redaktorius sako: „Ei, galvojai apie šią funkciją, kuri daro būtent tai, ko tau reikia?“ Tarsi jūsų programavimo draugas, kuris skaito mintis! +Prisimenu, kai pirmą kartą atradau automatinį užbaigimą – jaučiausi tarsi gyvenčiau ateityje. Pradedate rašyti, ir redaktorius sako: „Ei, ar galvojote apie šią funkciją, kuri daro būtent tai, ko jums reikia?“ Tarsi turėtumėte mintis skaitantį draugą! -**Kas daro šiuos redaktorius tokiais nuostabiais?** +**Kas daro šiuos redaktorius tokius neįtikėtinus?** -Šiuolaikiniai kodo redaktoriai siūlo įspūdingą funkcijų sąrašą, skirtą didinti jūsų produktyvumą: +Modernūs kodo redaktoriai siūlo įspūdingą funkcijų rinkinį, skirtą padidinti jūsų produktyvumą: -| Funkcija | Ką ji daro | Kodėl ji naudinga | +| Funkcija | Ką ji daro | Kodėl tai naudinga | |---------|--------------|--------------| -| **Sintaksės paryškinimas** | Spalvina skirtingas kodo dalis | Palengvina skaitymą ir klaidų pastebėjimą | -| **Automatinis užbaigimas** | Siūlo kodą rašant | Spartina programavimą ir mažina klaidas | -| **Debug įrankiai** | Padeda rasti ir taisyti klaidas | Taupo valandas sprendžiant problemas | -| **Praplėtimai** | Prideda specializuotas funkcijas | Priderina redaktorių bet kokiai technologijai | -| **DI asistentai** | Siūlo kodo fragmentus ir paaiškinimus | Pagreitina mokymąsi ir darbą | +| **Sintaksės paryškinimas** | Spalvina skirtingas kodo dalis | Padeda lengviau skaityti kodą ir aptikti klaidas | +| **Automatinis užbaigimas** | Siūlo kodą rašant | Spartina kodavimą ir mažina klaidas | +| **Derinimo įrankiai** | Padeda rasti ir taisyti klaidas | Taupo daugybę problemų sprendimo laiko | +| **Pratęsimai** | Prideda specializuotas funkcijas | Leidžia pritaikyti redaktorių bet kokiai technologijai | +| **AI asistentai** | Siūlo kodą ir paaiškinimus | Pagreitina mokymąsi ir produktyvumą | -> 🎥 **Vaizdo įrašas**: Norite pamatyti šiuos įrankius veikiant? Peržiūrėkite [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) išsamų apžvalgą. +> 🎥 **Vaizdo įrašo šaltinis**: Norite pamatyti šiuos įrankius veikiant? Peržiūrėkite šį [Įrankių vaizdo įrašą](https://youtube.com/watch?v=69WJeXGBdxg) dėl išsamaus apžvalgos. -#### Rekomenduojami redaktoriai interneto kūrimui +#### Rekomenduojami redaktoriai interneto plėtrai **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Nemokamas) - Populiariausias tarp interneto kūrėjų -- Puikus praplėtimų ekosistema +- Puiki plėtinių ekosistema - Integruotas terminalas ir Git palaikymas -- **Būtini priedai**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - DI pagrįstos kodo rekomendacijos - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - bendradarbiavimas realiu laiku - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - automatinis kodo formatavimas - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - klaidų tikrinimas kode +- **Būtini plėtiniai**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – AI varomi kodo pasiūlymai + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – bendradarbiavimas realiuoju laiku + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – automatinis kodo formatavimas + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – klaidų rašyboje tikrinimas kode **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Mokamas, nemokamas studentams) -- Pažangūs klaidų taisymo ir testavimo įrankiai +- Pažangūs derinimo ir testavimo įrankiai - Išmanus kodo užbaigimas - Integruota versijų kontrolė -**Debesų pagrindu veikiantys IDE** (Įvairios kainos) -- [GitHub Codespaces](https://github.com/features/codespaces) - pilnas VS Code naršyklėje -- [Replit](https://replit.com/) - puikus mokymuisi ir kodo dalijimuisi -- [StackBlitz](https://stackblitz.com/) - momentinė, pilno svorio interneto kūrimas +**Debesyse veikiantys IDE** (Įvairios kainos) +- [GitHub Codespaces](https://github.com/features/codespaces) – pilnas VS Code naršyklėje +- [Replit](https://replit.com/) – puiku mokymuisi ir kodo dalinimuisi +- [StackBlitz](https://stackblitz.com/) – momentinė pilno spektro interneto plėtra -> 💡 **Pradžios patarimas**: Pradėkite nuo Visual Studio Code – jis nemokamas, plačiai naudojamas pramonėje ir turi milžinišką bendruomenę, kuri kuria naudingus mokymus ir priedus. +> 💡 **Pradžios patarimas**: Pradėkite su Visual Studio Code – jis nemokamas, plačiai naudojamas industrijoje ir turi milžinišką bendruomenę, kuri kuria naudingas pamokas ir pratęsimus. -### Interneto naršyklės: jūsų slaptos kūrimo laboratorijos +### Interneto naršyklės: jūsų slaptasis kūrimo laboratorija -Gerai, pasiruoškite, kad jūsų mintys bus visiškai sudaužytos! Žinote, kaip naudojate naršykles naršydami socialiniuose tinkluose ar žiūrėdami vaizdo įrašus? Paaiškėjo, kad jos visą laiką slėpė šią neįtikėtiną slaptą kūrėjų laboratoriją, tik laukdamos, kol ją atrasite! +Gerai, pasiruoškite būti visiškai sužavėti! Žinote, kaip naršyklės naudojamos naršyti socialiniuose tinkluose ir žiūrėti vaizdo įrašus? Paaiškėjo, kad jos visą laiką slėpė nuostabią slapta kūrėjų laboratoriją, tik laukdamos, kol ją atrasite! -Kiekvieną kartą, kai dešiniuoju pelės klavišu spustelite puslapį ir renkatės "Inspect Element" („Tikrinti elementą“), jūs atveriate paslėptą kūrėjų įrankių pasaulį, kuris yra tiesiog galingesnis už kai kurią brangią programinę įrangą, už kurią kažkada mokėjau šimtus dolerių. Tai tarsi atrasti, kad jūsų įprasta virtuvė slepia profesionalaus šefų laboratoriją už slaptos plokštės! -Pirmą kartą, kai kas nors man parodė naršyklės kūrėjo įrankius (DevTools), praleidau maždaug tris valandas tiesiog spustelėdamas ir sakydamas „PALAU, JIS GALI IR TAI?!“ Tu gali tiesiogiai redaguoti bet kurią svetainę realiu laiku, matyti, kaip greitai viskas įsikrauna, testuoti, kaip tavo svetainė atrodo skirtinguose įrenginiuose, ir netgi derinti JavaScript kaip tikras profesionalas. Tai tiesiog stulbinama! +Kiekvieną kartą, kai paspaudžiate dešinį pelės mygtuką ant tinklalapio ir pasirenkate „Peržiūrėti elementą“, jūs atidarote paslėptą kūrėjų įrankių pasaulį, kuris yra nuoširdžiai galingesnis už kai kurią brangią programinę įrangą, už kurią anksčiau mokėjau šimtus dolerių. Tai tarsi atrasti, kad jūsų paprasta virtuvė slepia profesionalaus virėjo laboratoriją už slaptos panelės! +Pirmą kartą, kai man parodė naršyklės DevTools, praleidau maždaug tris valandas tiesiog spausdamas visur ir sakydamas „PALAU, JI TAI GALI DARYTI?!" Tu tiesiog gali realiu laiku redaguoti bet kurią svetainę, tiksliai matyti, kaip greitai viskas įsikrauna, išbandyti, kaip tavo svetainė atrodo skirtinguose įrenginiuose, ir netgi derinti JavaScript tarsi tikras profesorius. Tai absoliučiai pribloškianti patirtis! **Štai kodėl naršyklės yra tavo slaptas ginklas:** -Kai kuri savo svetainę ar interneto programą, turi matyti, kaip ji atrodo ir veikia realiame pasaulyje. Naršyklės ne tik rodo tavo darbą, bet ir suteikia išsamų grįžtamąjį ryšį apie našumą, prieinamumą ir galimas problemas. +Kai kuri svetainę ar žiniatinklio programą, reikia matyti, kaip ji atrodo ir elgiasi realiame pasaulyje. Naršyklės ne tik rodo tavo darbą, bet ir suteikia detalią informaciją apie veikimą, prieinamumą ir galimas problemas. -#### Naršyklės kūrėjo įrankiai (DevTools) +#### Naršyklės kūrėjų įrankiai (DevTools) -Šiuolaikinės naršyklės apima visapusiškas kūrimo programas: +Šiuolaikinės naršyklės apima visapusiškas kūrimo priemonių rinkinius: -| Įrankio kategorija | Ką jis daro | Pavyzdinė panaudojimo sritis | -|--------------------|-------------|------------------------------| -| **Elementų inspektorius** | Peržiūri ir redaguoja HTML/CSS realiu laiku | Koreguoja stilių, kad iš karto matytum rezultatus | -| **Konsolė** | Rodo klaidų pranešimus ir leidžia testuoti JavaScript | Derina klaidas ir eksperimentuoja su kodu | -| **Tinklo monitorius** | Stebi, kaip kraunasi resursai | Optimizuoja našumą ir įkėlimo laikus | -| **Prieinamumo tikrintuvas** | Testuoja įtraukiantį dizainą | Užtikrina, kad svetainė veiktų visiems vartotojams | -| **Įrenginių simuliatorius** | Leidžia peržiūrėti skirtingo ekrano dydžių vaizdą | Testuoja reaguojantį dizainą be kelių įrenginių | +| Įrankio kategorija | Ką ji daro | Naudojimo pavyzdys | +|--------------------|------------|--------------------| +| **Elementų inspektorius** | Realiojo laiko HTML/CSS peržiūra ir redagavimas | Koreguoti stilių, kad pamatytumėte akimirksniu rezultatus | +| **Konsolė** | Peržiūrėti klaidų pranešimus ir testuoti JavaScript | Derinti problemas ir eksperimentuoti su kodu | +| **Tinklo stebėjimas** | Stebėti kaip kraunasi resursai | Optimizuoti našumą ir įkėlimo laikus | +| **Prieinamumo tikrintuvas** | Tikrinti įtraukiantį dizainą | Užtikrinti, kad svetainė veiktų visiems vartotojams | +| **Įrenginio simuliatorius** | Peržiūra skirtingų ekranų dydžių | Išbandyti reaguojančio dizaino be kelių įrenginių | #### Rekomenduojamos naršyklės kūrimui -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – standartinis DevTools su detalia dokumentacija -- **[Firefox](https://developer.mozilla.org/docs/Tools)** – puikūs įrankiai CSS Grid ir prieinamumui -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Chromium pagrindu su Microsoft kūrėjų ištekliais +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – pramonės standartas DevTools su išsamiomis dokumentacijomis +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – puikios CSS Grid ir prieinamumo priemonės +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – pastatytas ant Chromium, su Microsoft kūrėjų ištekliais -> ⚠️ **Svarbus testavimo patarimas**: Visada testuok savo svetaines keliose naršyklėse! Tai, kas puikiai veikia Chrome, gali atrodyti kitaip Safari ar Firefox. Profesionalūs kūrėjai testuoja visuose pagrindiniuose naršyklėse, kad užtikrintų nuoseklią naudotojo patirtį. +> ⚠️ **Svarbi testavimo patarimas**: Visada testuok savo svetaines keliuose naršyklėse! Kas puikiai veikia Chrome, gali atrodyti kitaip Safari ar Firefox. Profesionalūs kūrėjai testuoja visose pagrindinėse naršyklėse, kad užtikrintų nuoseklią vartotojo patirtį. -### Komandų eilutės įrankiai: tavo kelias į kūrėjo supergalias +### Komandų eilutės įrankiai: tavo kelias gauti kūrėjo supergalių -Gerai, būkime visiškai atviri apie komandų eilutę, nes noriu, kad tai girdėtum iš kažko, kas tikrai supranta. Kai ją pirmą kartą pamačiau – tiesiog tą baisią juodą ekraną su mirksinčiu tekstu – aš tiesiog pagalvojau: „Ne, jokiu būdu! Atrodo kaip iš 1980-ųjų hakerių filmo, ir aš tikrai nesu pakankamai protingas tam!“ 😅 +Gerai, turime visiškai sąžiningą akimirką apie komandų eilutę, nes noriu, kad išgirstum tai iš žmogaus, kuris tikrai tai supranta. Kai pirmą kartą ją pamačiau – tik tą bauginančią juodą ekraną su mirksinčiu tekstu – aš tiesiog pagalvojau: „Ne, tikrai ne! Tai atrodo kaip kažkas iš 1980-ųjų hakerių filmo, ir aš tikrai nesu pakankamai protingas tam!“ 😅 -Bet štai ką būčiau norėjęs, kad kas nors man pasakytų tada, ir ką tau sakau dabar: komandų eilutė nėra baisi – tai kaip tiesioginis pokalbis su tavo kompiuteriu. Pagalvok apie tai kaip skirtumą tarp užsakymo per gražią programėlę su paveikslėliais ir meniu (kas yra miela ir paprasta) ir atėjimo į tavo mėgstamą vietinę restoraną, kur virėjas tiksliai žino, ką tu mėgsti, ir gali sukurti kažką tobulai, tiesiog išgirdęs tavo žodžius „nustebink kažkuo nuostabiu“. +Bet štai ką norėčiau, kad kas nors man būtų pasakęs tada, ir ką sakau tau dabar: komandų eilutė nėra baisi – tai iš tikrųjų tarsi tiesioginis pokalbis su tavo kompiuteriu. Įsivaizduok tai kaip skirtumą tarp užsakymo per įmantrų programėlę su paveikslėliais ir meniu (kas yra lengva ir patogu) ir įėjimo į tavo mėgstamą vietinį restoraną, kur šefas tiksliai žino, ką tau patinka, ir gali pagaminti kažką tobulo vien sakydamas „nustebink mane kažkuo nuostabiu“. -Komandų eilutė yra ta vieta, kur kūrėjai jaučiasi kaip tikri burtininkai. Tu įvedi keletą atrodančių magiškais žodžių (gerai, tai tiesiog komandos, bet jos atrodo magiškai!), paspaudi Enter, ir BAM – sukuri visą projekto struktūrą, įdiegia galingus įrankius iš viso pasaulio arba išpublikuoji savo programą internete, kad milijonai žmonių ją pamatytų. Kai tik paragauji šios galios, tai tikrai užklumpa! +Komandų eilutė yra vieta, kur kūrėjai jaučiasi lyg tikri raganiai. Parašai keletą atrodytų magiškų žodžių (gerai, tai tik komandos, bet jos jaučiasi magiškai!), paspaudi Enter ir BUM – sukuri visą projektų struktūrą, įdiegia galingus įrankius iš viso pasaulio arba išleidžia savo programėlę į internetą, kad milijonai žmonių galėtų ją pamatyti. Kai pirmą kartą paragauji galios, tai tikrai užkrečiama! **Kodėl komandų eilutė taps tavo mėgstamiausiu įrankiu:** -Nors grafinės sąsajos yra puikios daugeliui užduočių, komandų eilutė puikiai tinka automatizavimui, preciziškumui ir greičiui. Daugelis kūrimo įrankių daugiausia veikia per komandų eilutę, o jų efektyvus naudojimas gerokai padidina produktyvumą. +Nors grafinės sąsajos yra puikios daugeliui užduočių, komandų eilutė išsiskiria automatizacija, preciziškumu ir greitumu. Daugelis kūrimo įrankių daugiausia veikia per komandų eilutės sąsajas, o išmokti jas efektyviai naudotis gali žymiai pagerinti tavo produktyvumą. ```bash -# 1 žingsnis: Sukurkite ir pereikite į projekto katalogą +# 1 žingsnis: Sukurkite ir eikite į projekto katalogą mkdir my-awesome-website cd my-awesome-website ``` -**Štai ką atlieka šis kodas:** -- **Sukuria** naują katalogą „my-awesome-website“ tavo projektui -- **Pereina** į ką tik sukurtą katalogą, kad pradėtum darbą +**Ką daro šis kodas:** +- **Sukuria** naują aplanką pavadinimu „my-awesome-website“ tavo projektui +- **Pereina** į ką tik sukurtą aplanką, kad pradėtum darbą ```bash -# 2 žingsnis: Inicializuokite projektą su package.json +# 2 žingsnis: inicializuoti projektą su package.json npm init -y -# Įdiekite šiuolaikinius kūrimo įrankius +# Įdiegti šiuolaikinius kūrimo įrankius npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Žingsnis po žingsnio vyksta štai kas:** -- **Inicijuoja** naują Node.js projektą su numatytais nustatymais naudojant `npm init -y` -- **Įdiegia** Vite kaip modernų statybos įrankį greitam plėtojimui ir gamybos statymams -- **Prideda** Prettier automatinio kodo formatavimo ir ESLint kodo kokybės tikrinimui -- **Naudoja** `--save-dev` žymeklį, kad pažymėtų juos kaip tik kūrimo priklausomybes +**Žingsnis po žingsnio, kas vyksta:** +- **Inicijuoja** naują Node.js projektą su numatytosiomis reikšmėmis naudojant `npm init -y` +- **Įdiegia** Vite kaip modernų įrankį greitam kūrimui ir gamybos kompiliavimui +- **Prideda** Prettier automatinio kodo formatavimo ir ESLint kodo kokybės tikrinimų įrankius +- **Naudoja** `--save-dev` žymeklį, kad žymėtume tai kaip tik kūrimo priklausomybes ```bash # 3 žingsnis: Sukurkite projekto struktūrą ir failus @@ -631,155 +631,155 @@ npx vite ``` **Aukščiau mes:** -- **Organizavome** savo projektą, sukurdami atskirus aplankus šaltinio kodui ir turiniui +- **Organizavome** projektą sukurdami atskirus aplankus šaltinio kodui ir ištekliams - **Sugeneravome** bazinį HTML failą su tinkama dokumento struktūra -- **Paleidome** Vite kūrimo serverį su gyvu perkrovimu ir karštosios modulio pakeitimo funkcija +- **Paleidome** Vite kūrimo serverį su tiesioginiu perkrovimu ir karštu modulių pakeitimu -#### Būtini komandų eilutės įrankiai interneto kūrimui +#### Būtini komandų eilutės įrankiai žiniatinklio kūrimui -| Įrankis | Paskirtis | Kodėl tau jų reikia | +| Įrankis | Paskirtis | Kodėl tau to reikia | |---------|-----------|--------------------| -| **[Git](https://git-scm.com/)** | Versijų valdymas | Sekti pakeitimus, bendradarbiauti ir kurti atsargines kopijas | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript vykdymo aplinka ir paketų valdymas | Vykdyti JavaScript už naršyklių ribų, įdiegti modernius kūrimo įrankius | -| **[Vite](https://vitejs.dev/)** | Statybos įrankis ir kūrimo serveris | Žaibiškai greitas vystymas su karšto pakeitimo palaikymu | -| **[ESLint](https://eslint.org/)** | Kodo kokybė | Automatiškai rasti ir ištaisyti JavaScript problemas | -| **[Prettier](https://prettier.io/)** | Kodo formatavimas | Išlaikyti nuoseklų ir skaitomą kodo formatą | +| **[Git](https://git-scm.com/)** | Versijų valdymas | Sekti pasikeitimus, bendradarbiauti su kitais, kurti atsargines kopijas | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript paleidimo aplinka ir paketų valdymas | Vykdyti JavaScript už naršyklių ribų, įdiegti modernius kūrimo įrankius | +| **[Vite](https://vitejs.dev/)** | Build įrankis ir kūrimo serveris | Žaibiškai greitas kūrimas su karštu modulių pakeitimu | +| **[ESLint](https://eslint.org/)** | Kodo kokybė | Automatiškai rasti ir taisyti problemas tavo JavaScript kode | +| **[Prettier](https://prettier.io/)** | Kodo formatavimas | Išlaikyti kodą nuosekliai suformatuotą ir skaitomą | -#### Platformai specifinės galimybės +#### Platformai specifinės parinktys **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – moderni ir funkcijų turinti terminalo programa -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – galinga scenarijų vykdymo aplinka +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – moderni, pilna funkcijų terminalo programa +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – galinga scenarijų rašymo aplinka - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – tradicinė Windows komandų eilutė **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – integruota terminalo programa +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – įdiegta terminalo programa - **[iTerm2](https://iterm2.com/)** – patobulinta terminalo programa su pažangiomis funkcijomis **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – standartinė Linux shell aplinka -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – pažangi terminalo emuliatoriaus programa +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – standartinė Linux apvalkalas +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – pažangi terminalo emuliavimo programa > 💻 = Iš anksto įdiegta operacinėje sistemoje -> 🎯 **Mokymosi kelias**: Pradėk nuo pagrindinių komandų, tokių kaip `cd` (keisti katalogą), `ls` arba `dir` (rodyti failus) ir `mkdir` (sukurti aplanką). Praktikuok su šiuolaikinėmis darbo eigos komandomis, tokiomis kaip `npm install`, `git status` ir `code .` (atidaryti dabartinį katalogą VS Code). Kai įgysi pasitikėjimo, natūraliai išmoksi pažangesnes komandas ir automatizavimo metodus. +> 🎯 **Mokymosi kelias**: Pradėk nuo pagrindinių komandų kaip `cd` (keisti katalogą), `ls` arba `dir` (rodyti failų sąrašą) ir `mkdir` (sukurti aplanką). Praktikuok modernias darbo proceso komandas kaip `npm install`, `git status` ir `code .` (atidaro dabartinį aplanką VS Code). Kai tapsi labiau pasitikintis, natūraliai išmoksi sudėtingesnes komandas ir automatizavimo technikas. -### Dokumentacija: tavo visada prieinamas mokymosi mentorius +### Dokumentacija: tavo visada pasiekiamas mokymosi mentorius -Gerai, leisk pasidalinti mažyte paslaptimi, kuri padės tau jaustis daug geriau, būnant pradedančiuoju: net patyrę kūrėjai praleidžia didžiąją dalį savo laiko skaitydami dokumentaciją. Ir tai ne todėl, kad jie nesupranta, ką daro – tai išminties ženklas! +Gerai, leisk man atskleisti mažą paslaptį, kuri tave privers jaustis daug geriau dėl to, kad esi pradedantysis: net ir patyrę kūrėjai didžiąją dalį savo laiko praleidžia skaitydami dokumentaciją. Ir ne todėl, kad jie nežino, ką daro – tai iš tikrųjų išminties ženklas! -Mąstyk apie dokumentaciją kaip apie prieigą prie kantriausių, žinojančių mokytojų pasaulyje, kurie yra prieinami 24/7. Įstringai naktį 2 val. ryto? Dokumentacija čia, tarsi šiltas virtualus apkabinimas, su būtent reikalingu atsakymu. Nori sužinoti apie kokią naują puikią funkciją, apie kurią visi kalba? Dokumentacija tau padės žingsnis po žingsnio. Nori suprasti, kodėl kažkas veikia taip, kaip veikia? Teisingai supratai – dokumentacija gali paaiškinti taip, kad pagaliau viskas susidėliotų į vietas! +Įsivaizduok dokumentaciją kaip prieigą prie kantriausių, žinomiausių mokytojų pasaulyje, kurie yra prieinami 24/7. Įstrigai prie problemos 2 val. nakties? Dokumentacija ten kaip jaukus virtualus apkabinimas ir tiksliai su atsakymu, kurio tau reikia. Nori sužinoti apie kokią nors naują šaunią funkciją, apie kurią visi šneka? Dokumentacija padės su žingsnis po žingsnio pavyzdžiais. Bandai suprasti, kodėl kažkas veikia būtent taip? Spėjai – dokumentacija paaiškins taip, kad tau pagaliau „užsidegs“! -Štai kas visiškai pakeitė mano požiūrį: interneto kūrimo pasaulis labai greitai keičiasi ir niekas (turiu omeny visiškai niekas!) nepamena visko mintinai. Mačiau vyresnius kūrėjus su 15+ metų patirtimi, kurie ieškojo pagrindinės sintaksės, ir žinai ką? Tai nėra gėda – tai yra protinga! Tai ne apie tobulą atmintį, o apie tai, kur rasti patikimus atsakymus greitai ir kaip juos pritaikyti. +Štai kas visiškai pakeitė mano požiūrį: žiniatinklio kūrimo pasaulis juda neįtikėtinai greitai, ir niekas (turiu omenyje visai niekas!) nepamena visko mintinai. Mačiau vyresnius techninius specialistus su daugiau nei 15 metų patirtimi žiūrėti į bazinę sintaksę, ir žinai ką? Tai nėra gėdinga – tai protinga! Svarbu ne turėti tobulą atmintį, o žinoti, kur greitai rasti patikimus atsakymus ir išmokti juos pritaikyti. -**Čia vyksta tikras stebuklas:** +**Štai kur iš tiesų vyksta stebuklai:** -Profesionalūs kūrėjai daug laiko skiria dokumentacijos skaitymui – ne todėl, kad jie nežino, ką daro, bet todėl, kad interneto kūrimo erdvė keičiasi taip greitai, jog norint būti ūkininku reikia nuolatinio mokymosi. Puiki dokumentacija padeda suprasti ne tik *kaip* naudoti kažką, bet ir *kodėl* bei *kada* tai naudoti. +Profesionalūs kūrėjai daug laiko praleidžia skaitydami dokumentaciją – ne todėl, kad nežino, ką daro, tačiau todėl, kad žiniatinklio kūrimo sritis vystosi taip sparčiai, jog norint išlikti šiuolaikišku reikia nuolatinio mokymosi. Gera dokumentacija padeda suprasti ne tik *kaip* kažką naudoti, bet ir *kodėl* bei *kada* tai daryti. -#### Būtini dokumentacijos ištekliai +#### Būtiniausi dokumentacijos ištekliai **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Aukso standartas interneto technologijų dokumentacijai -- Išsamios gairės HTML, CSS ir JavaScript -- Įtraukiama informacija apie naršyklių suderinamumą -- Praktiniai pavyzdžiai ir interaktyvios demonstracijos +- Aukso standartas žiniatinklio technologijų dokumentacijai +- Išsamūs vadovai HTML, CSS ir JavaScript temomis +- Apima naršyklių suderinamumo informaciją +- Praktiniai pavyzdžiai ir interaktyvūs demonstravimai **[Web.dev](https://web.dev)** (Google) -- Modernios interneto kūrimo geriausios praktikos -- Našumo optimizavimo gairės -- Prieinamumo ir įtraukaus dizaino principai -- Atvejų studijos iš realių projektų +- Šiuolaikinės žiniatinklio kūrimo gerosios praktikos +- Veikimo optimizavimo patarimai +- Prieinamumo ir integruoto dizaino principai +- Atvejų analizės iš realių projektų **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge naršyklės kūrimo ištekliai -- Pažangių interneto programų gairės -- Daugiaplatformio kūrimo įžvalgos +- Progresyvios žiniatinklio programėlių vadovai +- Kryžminės platformos kūrimo įžvalgos **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Struktūruoti mokymosi kursai -- Vaizdo pamokos iš pramonės ekspertų -- Praktinės programavimo užduotys +- Struktūruotos mokymosi programos +- Vaizdo kursai iš pramonės ekspertų +- Praktiniai programavimo pratimai -> 📚 **Mokymosi strategija**: Nesisek memorizuoti dokumentacijos – vietoj to išmok naudotis ja efektyviai. Įsidėk žymes dažnai naudojamoms nuorodoms ir praktikuok paieškos funkcijas, kad greitai surastum konkrečią informaciją. +> 📚 **Mokymosi strategija**: Nesistenk mintinai įsiminti dokumentacijos – vietoj to išmok, kaip ja naudotis efektyviai. Išsaugok mėgstamiausius šaltinius ir praktikuoksiie naudotis paieška, kad greitai rastum reikiamą informaciją. -### 🔧 **Įrankių valdos patikra: kas tau skamba?** +### 🔧 **Įrankių meistriškumo patikra: kas tau įdomiausia?** -**Pasižvalgyk ir pagalvok:** -- Kurį įrankį labiausiai norėtum išbandyti pirmiausia? (Teisingo ar neteisingo atsakymo nėra!) -- Ar komandų eilutė vis dar atrodo bauginanti, ar jau esi smalsus ją išmokti? -- Ar gali įsivaizduoti, kaip naudosi naršyklės DevTools, kad pažvelgtum už savo mėgstamiausių svetainių uždangalo? +**Skirk akimirką pagalvoti:** +- Kurį įrankį labiausiai norėtum išbandyti pirmiausiai? (Nėra klaidingo atsakymo!) +- Ar komandų eilutė dar atrodo bauginanti, ar jau esi smalsus ją išbandyti? +- Ar gali įsivaizduoti naudosi naršyklės DevTools, kad pažvelgtum už tavo mėgstamiausių svetainių uždangalo? ```mermaid -pie title "Programuotojo laikas praleistas su įrankiais" +pie title "Laikas, kurį programuotojas praleidžia su įrankiais" "Kodo redaktorius" : 40 "Naršyklės testavimas" : 25 "Komandinė eilutė" : 15 "Dokumentacijos skaitymas" : 15 "Derinimas" : 5 ``` -> **Smagus pastebėjimas**: Dauguma kūrėjų apie 40 % savo laiko praleidžia kodo redaktoriuje, bet pastebi, kiek laiko skiriama testavimui, mokymuisi ir problemų sprendimui. Programavimas nėra tik kodų rašymas – tai patirčių kūrimas! +> **Įdomus faktas**: Dauguma kūrėjų apie 40% savo laiko praleidžia kodų redaktoriuje, bet pastebėk, kiek daug laiko skiriama testavimui, mokymuisi ir problemų sprendimui. Programavimas nėra tik kodo rašymas – tai patirčių kūrimas! -✅ **Maitinantis apmąstymams**: Štai įdomus klausimas – kaip manai, kuo įrankiai tinkami svetainių kurimui (kūrimas) skiriasi nuo įrankių tinkamų jų dizainui? Tai kaip skirtumas tarp architekto, kuris kuria gražų namą, ir rangovo, kuris jį stato. Abu yra svarbūs, bet jiems reikia skirtingų įrankių rinkinų! Tokia mąstysena padės geriau suprasti, kaip gimsta svetainės. +✅ **Apmąstymui**: Štai įdomus klausimas – kaip manai, kuo skiriasi įrankiai svetainių kūrimui (programavimui) ir įrankiai dizainui (kaip jos atrodo)? Tai kaip skirtumas tarp architekto, kuris suprojektuoja gražų namą, ir rangovo, kuris jį realiai stato. Abu yra būtini, bet jiems reikia skirtingų įrankių! Šis mąstymas tikrai padės geriau suprasti, kaip svetainės įgauna gyvybę. -## GitHub Copilot Agent užduotis 🚀 +## GitHub Copilot agento iššūkis 🚀 -Naudok Agent režimą, kad įvykdytum šią užduotį: +Naudok agento režimą, kad įvykdytum šį iššūkį: -**Aprašymas:** Ištirk šiuolaikinio kodo redaktoriaus ar IDE funkcijas ir parodyk, kaip jos gali pagerinti tavo darbo eigą kaip interneto kūrėjo. +**Aprašymas:** Išnagrinėk šiuolaikinio kodo redaktoriaus arba IDE galimybes ir parodyk, kaip jos pagerina tavo darbo eigą kaip žiniatinklio kūrėjo. -**Užduotis:** Pasirink kodo redaktorių ar IDE (pavyzdžiui, Visual Studio Code, WebStorm ar debesimis pagrįstą IDE). Išvardink tris funkcijas ar plėtinius, kurie padeda efektyviau rašyti, derinti ar prižiūrėti kodą. Kiekvienam trumpai paaiškink, kaip tai pagerina tavo darbo eigą. +**Užduotis:** Pasirink kodo redaktorių arba IDE (pvz., Visual Studio Code, WebStorm ar debesyje veikiantį IDE). Išvardink tris funkcijas ar plėtinius, kurie tau padeda rašyti, derinti ar prižiūrėti kodą efektyviau. Kiekvienam pateik trumpą paaiškinimą, kaip tai pagerina tavo darbo eigą. --- ## 🚀 Iššūkis -**Na, detektyve, pasiruošęs pirmajam bylai?** +**Gerai, detektyve, pasiruošęs pirmai bylai?** -Dabar, kai turi šį puikų pagrindą, laukia nuotykis, padėsiantis pamatyti, kaip nuostabiai įvairus ir įdomus programavimo pasaulis išties yra. Ir klausyk – čia dar ne apie kodo rašymą, taigi jokio spaudimo! Pagalvok apie save kaip apie programavimo kalbų detektyvą tavo pirmajame įdomiame atvejyje! +Dabar, kai turi tvirtą pagrindą, turiu nuotykį, kuris padės tau pamatyti, kokia neįtikėtinai įvairove ir įdomybe pasižymi programavimo pasaulis. Ir klausyk – čia dar nesiruoši rašyti kodo, taigi jokių nervų! Galvok apie save kaip apie programavimo kalbų detektyvą savo pirmai įdomiausiai bylai! **Tavo misija, jei sutinki ją priimti:** -1. **Tapk kalbų tyrinėtoju**: Pasirink tris programavimo kalbas iš visiškai skirtingų pasaulių – gal vieną, kuri kuria svetaines, kitą, kuri kuria mobiliąsias programėles, ir dar vieną – kuri apdoroja mokslinius duomenis. Surask pavyzdžių, kaip kiekviena kalba atlieka tą patį paprastą uždavinį. Pažadu, tu būsi visiškai nustebęs, kiek skirtingai tai gali atrodyti vykdant visiškai tą patį veiksmą! +1. **Tapk kalbų tyrinėtoju**: Pasirink tris programavimo kalbas iš visiškai skirtingų pasaulių – gal vieną kuriantį svetaines, kitą mobiliosioms programėlėms kurti, o trečią – mokslininkų duomenų apdorojimui. Surask pavyzdžių, kaip atliekama ta pati paprasta užduotis kiekviena kalba. Pažadu, tu būsi absoliučiai nustebintas, kaip skiriasi jų atvaizdavimas, nors užduotis ta pati! -2. **Atskleisk jų kilmės istorijas**: Kas daro kiekvieną kalbą ypatingą? Štai smagus faktas – kiekviena programavimo kalba buvo sukurta todėl, kad kažkas pagalvojo: „Žinai ką? Privalo būti geresnis būdas spręsti šią konkrečią problemą.“ Ar gali atspėti, kokios tai problemos? Kai kurios istorijos yra išties intriguojančios! +2. **Atrask jų kilmės istorijas**: Kas daro kiekvieną kalbą ypatingą? Štai šaunus faktas – kiekviena programavimo kalba buvo sukurta, nes kažkas galvojo: „Žinai ką? Turi būti geresnis būdas išspręsti šią konkretų problemą.“ Ar gali atsekti, kokios tos problemos buvo? Kai kurios istorijos tikrai žavi! -3. **Susipažink su bendruomenėmis**: Pažiūrėk, kaip draugiškos ir aistringos yra kiekvienos kalbos bendruomenės. Kai kurios turi milijonus kūrėjų, dalijasi žiniomis ir padeda vieni kitiems, kitos yra mažesnės, bet labai glaudžiai susijusios ir palaikančios. Tau patiks pamatyti, kokios skirtingos yra šių bendruomenių asmenybės! +3. **Susipažink su bendruomenėmis**: Pažiūrėk, kaip svetingos ir aistringos yra kiekvienos kalbos bendruomenės. Kai kurios turi milijonus kūrėjų, kurie dalijasi žiniomis ir padeda vieni kitiems, kitos yra mažesnės, bet nepaprastai glaudžios ir palaikančios. Tau patiks matyti skirtingus šių bendruomenių charakterius! -4. **Sek savo intuicija**: Kuri kalba tau dabar atrodo lengviausiai prieinama? Nesijaudink dėl „tobulo“ pasirinkimo – klausyk savo jausmų! Tikrai nėra teisingo ar neteisingo atsakymo, o vėliau visada galėsi tyrinėti kitas. +4. **Sek savo nuojauta**: Kuri kalba tau dabar atrodo prieinamesnė? Nesirūpink „tobulu“ pasirinkimu – tiesiog klausyk savo instinktų! Čia tikrai nėra klaidingo atsakymo ir vėliau visada gali išbandyti kitas. -**Papildomas detektyvo darbas**: Pažiūrėk, ar gali sužinoti, kokios didžiausios svetainės ar programėlės sukurtos kiekviena kalba. Galiu garantuoti, kad būsi nustebęs sužinojęs, kas palaiko Instagram, Netflix ar tą mobiliąją žaidimo programėlę, kurios negali nustoti žaisti! +**Papildomas detektyvinis darbas**: Pažiūrėk, ar sugebėsi rasti, kokios pagrindinės svetainės ar programėlės yra sukurtos kiekviena kalba. Galiu garantuoti, kad nustebsi sužinojęs, kas varo Instagram, Netflix ar tą mobilų žaidimą, kurį negali nustoti žaisti! -> 💡 **Atmink**: Nekuri šiandien savęs eksperto bet kurioje iš šių kalbų. Tu tiesiog susipažįsti su apylinkėmis prieš nuspręsdamas, kur nori įsikurti. Skirk laiko, linksminkis ir leisk savo smalsumui vedžioti! +> 💡 **Atmink:** Šiandien nenori tapti ekspertu nė vienoje iš šių kalbų. Tu tiesiog susipažįsti su kaimynyste prieš nuspręsdamas, kur įsikursi. Skirk laiko, smagiai leisk laiką ir leisk smalsumui vadovauti! -## Švęskime tai, ką atradai! +## Švęskime, ką atradai! -Dieve mano, šiandien įsisavinai tiek nuostabios informacijos! Esu nuoširdžiai susidomėjęs, kiek šios įdomios kelionės su tavimi liko. Ir prisimink – čia nėra testo, kur reikia visko atlikti tobulai. Tai labiau šventė visų tų įdomybių, kurias sužinojai apie šį įdomų pasaulį, į kurį tu jau ruošiesi panerti! +Oho, šiandien įsisavinai tiek daug nuostabios informacijos! Aš nuoširdžiai džiaugiuosi matydamas, kiek šios nuostabios kelionės liko su tavimi. Ir prisimink – tai nėra testas, kur turi būti tobulas. Tai labiau šventė visoms šaunioms žinioms, kurias sužinojai apie šį nuostabų pasaulį, į kurį pasiruošęs panerti! -[Atlik baigiamąjį testą](https://ff-quizzes.netlify.app/web/) -## Apžvalga ir savarankiškas mokymasis +[Atlik pamokos testą](https://ff-quizzes.netlify.app/web/) -**Skirk savo laiką tyrinėjimui ir linksminkis!** +## Apžvalga ir savarankiškas mokymasis -Šiandien padarei daug pažangos, ir tai yra ką parodyti! Dabar ateina smagi dalis – tyrinėti temas, kurios sužadino tavo susidomėjimą. Prisimink, tai nėra namų darbai – tai nuotykis! +**Skirk laiko tyrinėti ir mėgautis!** +Jūs šiandien nuėjote nemažą kelią, ir tai yra ką verta didžiuotis! Dabar ateina smagiausia dalis – tyrinėti temas, kurios sužadino jūsų smalsumą. Atminkite, tai nėra namų darbai – tai nuotykis! -**Pasinerk giliau į tai, kas tave žavi:** +**Panirkite giliau į tai, kas jus stimuliuoja:** -**Įgyk praktikos su programavimo kalbomis:** -- Aplankyk oficialias 2-3 kalbų svetaines, kurios patraukė tavo dėmesį. Kiekviena turi savo charakterį ir istoriją! -- Išbandyk kai kurias internetines kodavimo aikšteles, kaip [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ar [Replit](https://replit.com/). Nebijok eksperimentuoti – nieko nesugadinsi! -- Paskaityk apie tai, kaip atsirado tavo mėgstama kalba. Rimtai, kai kurios šių atsiradimo istorijų yra labai įdomios ir padės suprasti, kodėl kalbos veikia būtent taip. +**Praktikuokitės su programavimo kalbomis:** +- Aplankykite oficialias 2–3 kalbų svetaines, kurios patraukė jūsų dėmesį. Kiekviena turi savo asmenybę ir istoriją! +- Išbandykite kai kuriuos internetinius kodo žaidimo aikšteles, tokius kaip [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), arba [Replit](https://replit.com/). Nebijokite eksperimentuoti – nieko nesugadinsite! +- Perskaitykite, kaip atsirado jūsų mėgstamiausia kalba. Rimtai, kai kurios iš šių kilmės istorijų yra įdomios ir padės suprasti, kodėl kalbos veikia būtent taip. -**Prisijaukink naujus įrankius:** -- Jei dar nesate, atsisiųsk Visual Studio Code – jis nemokamas ir tau labai patiks! -- Paskirk kelias minutes paieškai Extensions rinkoje. Tai tarsi programėlių parduotuvė tavo kodo redaktoriui! -- Atidaryk naršyklės kūrėjo įrankius (Developer Tools) ir tiesiog spustelėk čia ir ten. Nesijaudink, jei visko nesupranti – tiesiog susipažink su tuo, kas ten yra. +**Susipažinkite su savo naujais įrankiais:** +- Atsisiųskite Visual Studio Code, jei dar to nepadarėte – jis nemokamas ir jums tikrai patiks! +- Skirkite kelias minutes naršyti Extensions marketplace. Tai tarsi programėlių parduotuvė jūsų kodo redaktoriui! +- Atidarykite naršyklės Developer Tools ir tiesiog spustelėkite čia ir ten. Nesijaudinkite, jei ne viską suprasite – tiesiog susipažinkite su tuo, kas yra. -**Prisijunk prie bendruomenės:** -- Sek keletą programuotojų bendruomenių [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) arba [GitHub](https://github.com/). Programavimo bendruomenė labai draugiška naujokams! -- Žiūrėk pradedantiesiems skirtus kodavimo video „YouTube“. Yra daug puikių kūrėjų, kurie puikiai supranta, ką reiškia pradėti. -- Apsvarstyk galimybę prisijungti prie vietinių susitikimų ar internetinių bendruomenių. Tik pasitikėk manimi – programuotojai mėgsta padėti naujokams! +**Prisijunkite prie bendruomenės:** +- Sekite keletą programuotojų bendruomenių [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ar [GitHub](https://github.com/). Programavimo bendruomenė labai draugiška naujokams! +- Žiūrėkite lengvai pradedantiesiems skirtus kodavimo vaizdo įrašus YouTube. Yra daug puikių kūrėjų, kurie atsimena, ką reiškia pradėti. +- Apsvarstykite galimybę prisijungti prie vietinių susitikimų ar internetinių bendruomenių. Pasitikėkite manimi, programuotojai dievina padėti naujokams! -> 🎯 **Klausyk, štai ką noriu, kad atsimintum**: Nėra lūkestis tapti programavimo žinovu per naktį! Šiuo metu tu tiesiog susipažįsti su nuostabiu nauju pasauliu, kuriame tu būsi. Skirk laiko, mėgaukis kelione ir prisimink – kiekvienas programuotojas, kurį žavi, kartą sėdėjo tiksliai ten, kur ir tu dabar, susijaudinęs ir galbūt šiek tiek sutrikęs. Tai visiškai normalu ir reiškia, kad esi teisingame kelyje! +> 🎯 **Klausykite, ką noriu, kad prisimintumėte:** Nereikia per naktį tapti programavimo žinovu! Šiuo metu jūs tiesiog pažįstate šį nuostabų naują pasaulį, kuriame būsite. Skirkite laiko, mėgaukitės kelione ir prisiminkite – kiekvienas programuotojas, kuriuo žavitės, kažkada sėdėjo būtent ten, kur esate dabar, jausdamasis susijaudinęs ir galbūt šiek tiek apimtas streso. Tai visiškai normalu ir reiškia, kad darote viską teisingai! @@ -787,70 +787,70 @@ Dieve mano, šiandien įsisavinai tiek nuostabios informacijos! Esu nuoširdžia [Reading the Docs](assignment.md) -> 💡 **Mažas paskatinimas tavo užduočiai**: Norėčiau pamatyti, kaip tyrinėji kelis įrankius, kurių dar neapėmėme! Praleisk redaktorius, naršykles ir komandų eilutės įrankius, apie kuriuos jau kalbėjome – yra visas nuostabus vystymo įrankių visatas, kurios laukia būti atrastomis. Ieškok tų, kurie yra aktyviai palaikomi ir turi gyvybingas, draugiškas bendruomenes (tokie paprastai turi geriausius mokomuosius ir daugiausiai palaikančių žmonių, kai neišvengiamai užstrigi ir ieškai pagalbos). +> 💡 **Šiek tiek paskatinimo jūsų užduočiai:** Labai norėčiau pamatyti, kaip tyrinėjate kai kuriuos įrankius, apie kuriuos dar nekalbėjome! Praleiskite redaktorius, naršykles ir komandų eilutės įrankius, apie kuriuos jau kalbėjome – už šio horizonto yra visa nuostabi kūrimo įrankių visata, laukiančia būti atrasta. Ieškokite tų, kurie yra aktyviai palaikomi ir turi gyvybingas, pagalbą siūlančias bendruomenes (jie dažnai turi geriausius pamokymus ir draugiškiausius žmones, kai neišvengiamai įstringate ir reikia draugiškos pagalbos). --- -## 🚀 Tavo programavimo kelionės laiko juosta - -### ⚡ **Ką gali padaryti per artimiausias 5 minutes** -- [ ] Užsirašyk 2-3 programavimo kalbų svetaines, kurios patraukė tavo dėmesį -- [ ] Jei dar nesate, atsisiųsk Visual Studio Code -- [ ] Atidaryk naršyklės kūrėjo įrankius (F12) ir naršyk bet kurią svetainę paspaudinėdamas -- [ ] Prisijunk prie vienos programuotojų bendruomenės (Dev.to, Reddit r/webdev ar Stack Overflow) - -### ⏰ **Ką gali nuveikti šią valandą** -- [ ] Užbaik pamokos testo klausimus ir apmąstyk savo atsakymus -- [ ] Įsidiek VS Code su GitHub Copilot plėtiniu -- [ ] Išbandyk „Hello World“ pavyzdį 2 skirtingose programavimo kalbose internete -- [ ] Pažiūrėk „Vienos dienos programuotojo gyvenime“ video „YouTube“ -- [ ] Pradėk savo programavimo kalbos detektyvo darbą (pagal iššūkį) - -### 📅 **Savaitės trukmės nuotykis** -- [ ] Įvykdyk užduotį ir išbandyk 3 naujus vystymo įrankius -- [ ] Sek 5 programuotojus arba programavimo paskyras socialiniuose tinkluose -- [ ] Pamėgink sukurti ką nors mažytį CodePen ar Replit (net ir „Hello, [Tavo Vardas]!“) -- [ ] Perskaityk vieną programuotojo tinklaraščio įrašą apie kieno nors programavimo kelią -- [ ] Prisijunk prie virtualaus susitikimo arba pažiūrėk programuotojų paskaitą -- [ ] Pradėk mokytis pasirinktos kalbos su internetiniais mokymais - -### 🗓️ **Mėnesio trukmės pokyčiai** -- [ ] Sukurk pirmąją mažą programėlę (net paprastas tinklapis tinka!) -- [ ] Prisidėk prie atviro kodo projekto (pradėk nuo dokumentacijos pataisymų) -- [ ] Mentoruok ką nors, kas tik pradeda programavimo kelią -- [ ] Sukurk savo programuotojo portfelio svetainę -- [ ] Užmegzk ryšius su vietinėmis programuotojų bendruomenėmis ar studijų grupėmis -- [ ] Pradėk planuoti savo kitą mokymosi etapą - -### 🎯 **Galutinis apmąstymų tikrinimas** - -**Prieš judėdamas toliau, skirk laiko pasidžiaugti:** -- Kas šiandien programavime tave labiausiai sužavėjo? -- Kurį įrankį ar sąvoką nori tyrinėti pirmą? -- Kaip jautiesi pradėdamas šią programavimo kelionę? -- Kokį klausimą norėtum dabar užduoti programuotojui? +## 🚀 Jūsų programavimo kelionės laiko juosta + +### ⚡ **Ką galite padaryti per artimiausias 5 minutes** +- [ ] Užsirašyti 2-3 programavimo kalbų svetaines, kurios patraukė jūsų dėmesį +- [ ] Atsisiųsti Visual Studio Code, jei dar nepadarėte +- [ ] Atidaryti naršyklės DevTools (F12) ir naršyti bet kurią svetainę +- [ ] Prisijungti prie vienos programavimo bendruomenės (Dev.to, Reddit r/webdev arba Stack Overflow) + +### ⏰ **Ką galite pasiekti per šią valandą** +- [ ] Atlikti po pamokos testą ir peržvelgti atsakymus +- [ ] Įdiegti VS Code su GitHub Copilot plėtiniu +- [ ] Išbandyti „Hello World“ pavyzdį 2 skirtingose programavimo kalbose internete +- [ ] Pažiūrėti „Programuotojo diena“ vaizdo įrašą YouTube +- [ ] Pradėti programavimo kalbos detektyvo darbą (pagal užduotį) + +### 📅 **Jūsų savaitės trukmės nuotykis** +- [ ] Atlikti užduotį ir išbandyti 3 naujus kūrimo įrankius +- [ ] Sekti 5 kūrėjus arba programavimo paskyras socialinėje medijoje +- [ ] Pamėginti sukurti kažką mažo CodePen arba Replit (net jei tik „Hello, [Jūsų vardas]!“) +- [ ] Perskaityti vieną kūrėjo tinklaraščio įrašą apie kieno nors programavimo kelionę +- [ ] Prisijungti prie virtualaus susitikimo arba pažiūrėti programavimo kalbą +- [ ] Pradėti mokytis pasirinktos kalbos su internetiniais pamokymais + +### 🗓️ **Jūsų mėnesio trukmės transformacija** +- [ ] Sukurti pirmą mažą projektą (net paprastas tinklalapis laikomas!) +- [ ] Prisidėti prie atvirojo kodo projekto (pradėti nuo dokumentacijos taisymų) +- [ ] Mentoriauti ką nors, kas tik pradeda programavimo kelią +- [ ] Sukurti savo kūrėjo portfolio svetainę +- [ ] Užmegzti ryšius su vietinėmis kūrėjų bendruomenėmis ar mokymosi grupėmis +- [ ] Pradėti planuoti kitą mokymosi etapą + +### 🎯 **Galutinė refleksija** + +**Prieš judėdami toliau, skirkite vieną akimirką pasidžiaugti:** +- Kas šiandien jus labiausiai sužadino programavimo srityje? +- Kurį įrankį ar koncepciją norite ištirti pirmiausia? +- Kaip jaučiatės pradėję šią programavimo kelionę? +- Koks klausimas norėtumėte užduoti programuotojui būtent dabar? ```mermaid journey - title Jūsų pasitikėjimo savimi kūrimo kelionė + title Jūsų Pasitikėjimo Savimi Ugdymo Kelionė section Šiandien Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section Šią savaitę + section Šią Savaitę Exploring: 4: You Learning: 5: You Connecting: 4: You - section Kitą mėnesį + section Kitą Mėnesį Building: 5: You Confident: 5: You Helping Others: 5: You ``` -> 🌟 **Prisimink**: Kiekvienas ekspertas kažkada buvo pradedantysis. Kiekvienas vyresnysis programuotojas kažkada jautėsi lygiai taip pat kaip tu dabar – susijaudinęs, galbūt šiek tiek sutrikęs ir tikrai smalsus dėl galimybių. Tu esi nuostabioje kompanijoje, ir ši kelionė bus nepakartojama. Sveikas atvykęs į nuostabų programavimo pasaulį! 🎉 +> 🌟 **Prisiminkite:** Kiekvienas ekspertas kadaise buvo pradedantysis. Kiekvienas vyresnysis programuotojas kažkada jautėsi būtent kaip jūs dabar – susijaudinęs, galbūt šiek tiek apimtas streso ir tikrai smalsus, kas įmanoma. Jūs esate nuostabioje kompanijoje, o ši kelionė bus nepaprasta. Sveiki atvykę į nuostabų programavimo pasaulį! 🎉 --- -**Atsakomybės apribojimas**: -Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Pirminis dokumentas gimtąja kalba turi būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neatsakome už bet kokius nesusipratimus ar klaidingus aiškinimus, kilusius dėl šio vertimo naudojimo. +**Atsakomybės apribojimas**: +Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama kreiptis į profesionalų žmogišką vertimą. Mes neatsakome už jokius nesusipratimus ar klaidingus aiškinimus, kilusius naudojantis šiuo vertimu. \ No newline at end of file diff --git a/translations/lt/AGENTS.md b/translations/lt/AGENTS.md index 138f4bf92..b4c4244ac 100644 --- a/translations/lt/AGENTS.md +++ b/translations/lt/AGENTS.md @@ -2,27 +2,27 @@ ## Projekto apžvalga -Tai mokymo programos saugykla, skirta pradedantiesiems mokyti pagrindinius interneto plėtros pagrindus. Programa – tai išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates, apimantis 24 praktines pamokas apie JavaScript, CSS ir HTML. +Tai yra edukacinio kurso saugykla, skirta pradedantiesiems mokyti pagrindų apie žiniatinklio kūrimą. Kursas yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates komandos, turintis 24 praktines pamokas, apimančias JavaScript, CSS ir HTML. ### Pagrindiniai komponentai -- **Mokymo turinys**: 24 struktūruotos pamokos, organizuotos projektinėmis moduliais -- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių padėjėjas -- **Interaktyvūs klausimynai**: 48 testai po 3 klausimus (prieš ir po pamokų vertinimai) -- **Daugiakalbė palaikymas**: Automatiniai vertimai į daugiau nei 50 kalbų per GitHub Actions +- **Edukacinis turinys**: 24 struktūruotos pamokos, organizuotos į projektinius modulius +- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosminis žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių asistentas +- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekvienas (prieš- ir po pamokos vertinimai) +- **Daugiakalbė palaikymas**: Automatiniai vertimai į 50+ kalbų per GitHub Actions - **Technologijos**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (DI projektams) ### Architektūra -- Mokomoji saugykla su pamoka pagrįsta struktūra -- Kiekviename pamokos aplanke yra README, kodo pavyzdžiai ir sprendimai -- Atskirai stovintys projektai atskirose direktorijose (quiz-app, įvairūs pamokų projektai) -- Vertimų sistema naudojant GitHub Actions (co-op-translator) -- Dokumentacija patiekiama per Docsify ir prieinama PDF formatu +- Edukacinė saugykla su pamokų struktūra +- Kiekvienos pamokos aplanke yra README, kodo pavyzdžiai ir sprendimai +- Atskirti savarankiški projektai atskiruose kataloguose (quiz-app, įvairūs pamokų projektai) +- Vertimų sistema naudojanti GitHub Actions (co-op-translator) +- Dokumentacija teikiama per Docsify ir prieinama PDF formatu ## Nustatymo komandos -Ši saugykla skirta daugiausia mokomajam turiniui vartoti. Dirbant su konkrečiais projektais: +Ši saugykla skirta daugiausia edukaciniam turiniui vartoti. Norint dirbti su specifiniais projektais: ### Pagrindinės saugyklos nustatymas @@ -31,14 +31,14 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz App nustatymas (Vue 3 + Vite) +### Apklaustuko programėlės nustatymas (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Paleisti kūrimo serverį -npm run build # Kurti gamybai -npm run lint # Vykdyti ESLint +npm run build # Sukurti gamybai +npm run lint # Paleisti ESLint ``` ### Banko projekto API (Node.js + Express) @@ -56,10 +56,10 @@ npm run format # Formatuoti su Prettier ```bash cd 5-browser-extension/solution npm install -# Vykdykite naršyklės specifines plėtinių įkėlimo instrukcijas +# Vadovaukitės naršyklės specifinėmis plėtinių įkėlimo instrukcijomis ``` -### Kosmoso žaidimo projektai +### Kosminio žaidimo projektai ```bash cd 6-space-game/solution @@ -67,7 +67,7 @@ npm install # Atidarykite index.html naršyklėje arba naudokite Live Server ``` -### Pokalbių projekto (Python Backend) nustatymas +### Pokalbių projekto (Python backend) nustatymai ```bash cd 9-chat-project/solution/backend/python @@ -76,42 +76,42 @@ pip install openai python api.py ``` -## Kūrimo darbo eiga +## Vystymo darbo eiga -### Turinį kuriantiems +### Turinio bendradarbiams -1. **Padarykite saugyklos fork'ą** į savo GitHub paskyrą -2. **Klonuokite savo fork'ą** lokaliai -3. **Sukurkite naują šaką** pakeitimams +1. **Padarykite fork’ą** saugyklos į savo GitHub paskyrą +2. **Klonuokite savo fork’ą** vietoje +3. **Sukurkite naują šaką** savo pakeitimams 4. Keiskite pamokų turinį arba kodo pavyzdžius -5. Išbandykite kodo pakeitimus atitinkamų projektų direktorijose -6. Pateikite pull request pagal bendradarbiavimo taisykles +5. Išbandykite kodo pakeitimus atitinkamuose projekto kataloguose +6. Pateikite pull request’us pagal indėlio taisykles -### Mokinėms ir mokiniams +### Besimokantiems -1. Padarykite fork'ą arba klonuokite saugyklą -2. Sekite pamokų direktorijas iš eilės -3. Skaitykite kiekvienos pamokos README bylas +1. Padarykite fork arba klonuokite saugyklą +2. Nuosekliai pereikite per pamokų katalogus +3. Skaitykite kiekvienos pamokos README failus 4. Atlikite priešpamokinius testus adresu https://ff-quizzes.netlify.app/web/ 5. Dirbkite su kodo pavyzdžiais pamokų aplankuose -6. Atlikite pratimus ir iššūkius -7. Atlikite po pamokų testus +6. Atlikite užduotis ir iššūkius +7. Atlikite postpamokinius testus ### Gyvas vystymas -- **Dokumentacija**: Vykdykite `docsify serve` pagrindiniame aplanke (prievadas 3000) -- **Quiz App**: Vykdykite `npm run dev` quiz-app kataloge +- **Dokumentacija**: Paleiskite `docsify serve` šakniniame aplanke (3000 prievadas) +- **Apklaustuko programėlė**: Paleiskite `npm run dev` quiz-app kataloge - **Projektai**: Naudokite VS Code Live Server plėtinį HTML projektams -- **API projektai**: Vykdykite `npm start` atitinkamose API direktorijose +- **API projektai**: Paleiskite `npm start` atitinkuose API kataloguose ## Testavimo instrukcijos -### Quiz App testavimas +### Apklaustuko programėlės testavimas ```bash cd quiz-app -npm run lint # Patikrinkite kodo stiliaus problemas -npm run build # Patvirtinkite, kad kūrimas pavyksta +npm run lint # Patikrinkite kodo stiliaus klaidas +npm run build # Patikrinkite, ar statyba sėkminga ``` ### Banko API testavimas @@ -119,47 +119,47 @@ npm run build # Patvirtinkite, kad kūrimas pavyksta ```bash cd 7-bank-project/api npm run lint # Patikrinkite kodo stiliaus klaidas -node server.js # Patvirtinkite, kad serveris paleidžiamas be klaidų +node server.js # Patikrinkite, ar serveris paleidžiamas be klaidų ``` -### Bendras testavimo metodas +### Bendras testavimo požiūris -- Tai mokomoji saugykla be išsamų automatizuotų testų -- Rankinis testavimas sutelktas į: +- Tai edukacinė saugykla be išsamios automatizuotos testavimo sistemos +- Rankinis testavimas apima: - Kodo pavyzdžiai veikia be klaidų - Dokumentacijos nuorodos veikia tinkamai - - Projektų kūrimas vyksta sklandžiai - - Pavyzdžiai atitinka geriausią praktiką + - Projektų kompiliacijos vyksta sėkmingai + - Pavyzdžiai atitinka gerąsias praktikas -### Prieš pateikiant tikrinimai +### Patikrinimai prieš pateikiant -- Vykdykite `npm run lint` kataloguose su package.json -- Patikrinkite ar markdown nuorodos galioja +- Paleiskite `npm run lint` kataloguose su package.json +- Patikrinkite markdown nuorodų galiojimą - Išbandykite kodo pavyzdžius naršyklėje arba Node.js -- Užtikrinkite, kad vertimai išlaiko tinkamą struktūrą +- Įsitikinkite, kad vertimai išlaiko tinkamą struktūrą ## Kodo stiliaus gairės ### JavaScript - Naudokite modernią ES6+ sintaksę -- Laikykitės projektų pateiktų ESLint konfigūracijų -- Naudokite prasmingus kintamųjų ir funkcijų pavadinimus mokymo aiškumui -- Pridėkite komentarus, aiškinančius sąvokas mokiniams -- Formatuokite naudojant Prettier, jei yra konfigūracijos +- Laikykitės standartinių ESLint konfigūracijų projektuose +- Naudokite prasmingus kintamųjų ir funkcijų pavadinimus mokymosi tikslams +- Pridėkite komentarus, paaiškinančius koncepcijas mokiniams +- Formatuokite naudodami Prettier, kur nustatyta ### HTML/CSS -- Semantinės HTML5 žymos -- Reaguojantis dizainas -- Aiškios klasių vardų konvencijos +- Semantiški HTML5 elementai +- Responvyvaus dizaino principai +- Aiškios klasės pavadinimų konvencijos - Komentarai, paaiškinantys CSS technikas mokiniams ### Python - PEP 8 stiliaus gairės -- Aiškūs, mokomieji kodo pavyzdžiai -- Tipų anotacijos, naudingos mokantis +- Aiškūs, edukaciniai kodo pavyzdžiai +- Tipų anotacijos, jei naudingos mokymuisi ### Markdown dokumentacija @@ -167,116 +167,116 @@ node server.js # Patvirtinkite, kad serveris paleidžiamas be klaidų - Kodo blokai su kalbos nurodymu - Nuorodos į papildomus išteklius - Ekrano nuotraukos ir paveikslėliai `images/` kataloguose -- Paveikslėlių alt tekstai prieinamumui +- Alt tekstas paveikslėliams prieinamumui užtikrinti -### Failų organizavimas +### Failų organizacija -- Pamokos pažymėtos skaičiais (1-getting-started-lessons, 2-js-basics, ir tt) +- Pamokos numeruojamos nuosekliai (1-getting-started-lessons, 2-js-basics ir kt.) - Kiekviename projekte yra `solution/` ir dažnai `start/` arba `your-work/` katalogai -- Paveikslėliai saugomi pamoka specifiniuose `images/` aplankuose -- Vertimai kataloguose `translations/{language-code}/` +- Paveikslėliai saugomi pamokų specifiniuose `images/` aplankuose +- Vertimai saugomi `translations/{language-code}/` struktūroje ## Kūrimas ir diegimas -### Quiz App diegimas (Azure Static Web Apps) +### Apklaustuko programėlės diegimas (Azure Static Web Apps) -quiz-app sukonfigūruotas Azure Static Web Apps diegimui: +quiz-app yra sukonfigūruotas Azure Static Web Apps diegimui: ```bash cd quiz-app npm run build # Sukuria dist/ aplanką -# Diegia per GitHub Actions darbo eigą po nurodymo į main branch +# Diegia per GitHub Actions darbo eigą, kai pushinama į main šaką ``` Azure Static Web Apps konfigūracija: -- **Programos vieta**: `/quiz-app` +- **Programėlės vieta**: `/quiz-app` - **Išvesties vieta**: `dist` -- **Darbo eiga**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Vykdymo eiga**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Dokumentacijos PDF generavimas +### Dokumentacijos PDF kūrimas ```bash npm install # Įdiekite docsify-to-pdf -npm run convert # Generuoti PDF iš docs +npm run convert # Sugeneruokite PDF iš docs ``` ### Docsify dokumentacija ```bash -npm install -g docsify-cli # Įdiekite Docsify globally -docsify serve # Tiekite localhost:3000 +npm install -g docsify-cli # Įdiegti Docsify globaliai +docsify serve # Tarnauti localhost:3000 ``` -### Projektų specifiniai kūrimo procesai +### Projektui būdingi kūrimo procesai Kiekvienas projekto katalogas gali turėti savo kūrimo procesą: -- Vue projektai: `npm run build` sukuria gamybinius paketus -- Statiniai projektai: nėra kūrimo žingsnio, failai patiekiami tiesiogiai +- Vue projektai: `npm run build` sukuria produkcinius paketus +- Statiniai projektai: be kūrimo žingsnio, failai pateikiami tiesiogiai -## Pull Request gairės +## Pull request gairės -### Pavadinimų formatas +### Pavadinimo formatas -Naudokite aiškius, aprašomuosius pavadinimus, nurodančius keitimo sritį: +Naudokite aiškius, apibūdinančius pakeitimus pavadinimus: - `[Quiz-app] Pridėti naują testą pamokai X` -- `[Lesson-3] Ištaisyta rašybos klaida terariumo projekte` -- `[Translation] Pridėtas ispanų kalbos vertimas 5 pamokai` -- `[Docs] Atnaujintos diegimo instrukcijos` +- `[Lesson-3] Ištaisyta rašybos klaida terrarium projekte` +- `[Translation] Pridėtas ispanų kalbos vertimas pamokai 5` +- `[Docs] Atnaujintos nustatymo instrukcijos` ### Būtini patikrinimai Prieš pateikiant PR: 1. **Kodo kokybė**: - - Vykdykite `npm run lint` paveiktuose projekto kataloguose - - Ištaisykite visus lint klaidų ir įspėjimų pranešimus + - Paleiskite `npm run lint` atitinkamuose projekto kataloguose + - Ištaisyti visus lint klaidas ir įspėjimus -2. **Kūrimo patikra**: - - Vykdykite `npm run build` jei taikoma - - Įsitikinkite, kad nėra kūrimo klaidų +2. **Kūrimo patikrinimas**: + - Jei taikoma, paleiskite `npm run build` + - Užtikrinkite, kad nėra kūrimo klaidų -3. **Nuorodų tikrinimas**: - - Išbandykite visas markdown nuorodas - - Patikrinkite, ar paveikslėlių nuorodos veikia +3. **Nuorodų patikra**: + - Patikrinkite visas markdown nuorodas + - Patikrinkite paveikslėlių nuorodas 4. **Turinio peržiūra**: - - Patikrinkite rašybą ir gramatiką - - Užtikrinkite, kad kodo pavyzdžiai yra teisingi ir mokomieji - - Patvirtinkite, kad vertimai išlaikė pradinę prasmę + - Korektūra dėl rašybos ir gramatikos + - Užtikrinkite, kad kodo pavyzdžiai yra teisingi ir edukaciniai + - Patikrinkite, kad vertimai išlaiko originalią prasmę -### Bendradarbiavimo reikalavimai +### Indėlio reikalavimai -- Sutinkate su Microsoft CLA (automatinis tikrinimas pirmame PR) -- Laikykitės [Microsoft atvirojo kodo elgesio kodekso](https://opensource.microsoft.com/codeofconduct/) -- Žr. [CONTRIBUTING.md](./CONTRIBUTING.md) su išsamiomis gairėmis -- Nurodykite susijusių klausimų numerius PR aprašyme, jei taikoma +- Sutikite su Microsoft CLA (automatinis patikrinimas pirmojo PR metu) +- Laikykitės [Microsoft atvirojo kodo elgesio taisyklių](https://opensource.microsoft.com/codeofconduct/) +- Matykite [CONTRIBUTING.md](./CONTRIBUTING.md) išsamioms gairėms +- Jei taikoma, nurodykite problemų numerius PR apraše ### Peržiūros procesas - PR peržiūri prižiūrėtojai ir bendruomenė -- Skiriamas pirmenybė mokomajam aiškumui -- Kodo pavyzdžiai turi atitikti dabartinę geriausią praktiką -- Vertimai vertinami dėl tikslumo ir kultūrinės tinkamumo +- Prioritetas suteikiamas edukaciniam aiškumui +- Kodo pavyzdžiai turi atitikti šiuolaikines gerąsias praktikas +- Vertimai peržiūrimi dėl tikslumo ir kultūrinio tinkamumo -## Vertimo sistema +## Vertimų sistema ### Automatizuotas vertimas -- Naudoja GitHub Actions su co-op-translator darbo eiga +- Naudoja GitHub Actions su co-op-translator workflow - Automatiškai verčia į daugiau nei 50 kalbų -- Šaltiniai yra pagrindiniuose kataloguose -- Išversti failai saugomi `translations/{language-code}/` kataloguose +- Šaltinių failai pagrindiniuose kataloguose +- Išverstieji failai saugomi `translations/{language-code}/` kataloguose -### Rankinis vertimo patobulinimas +### Rankinių vertimo patobulinimų pridėjimas -1. Suraskite failą `translations/{language-code}/` +1. Raskite failą `translations/{language-code}/` kataloge 2. Atlikite patobulinimus išlaikydami struktūrą -3. Užtikrinkite, kad kodo pavyzdžiai išlieka veikiantys -4. Išbandykite vietinius testų klausimus +3. Užtikrinkite, kad kodo pavyzdžiai lieka veikiantys +4. Išbandykite lokalizuotą testų turinį -### Vertimo metaduomenys +### Vertimų meta duomenys -Išversti failai turi metaduomenų antraštę: +Išverstieji failai turi meta antraštę: ```markdown **Atsakomybės apribojimas**: -Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų arba netikslumų. Pirminis dokumentas originalia kalba turi būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus atliktas vertimas. Mes neatsakome už jokius nesusipratimus ar neteisingus aiškinimus, kylančius dėl šio vertimo naudojimo. +Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatizuotuose vertimuose gali pasitaikyti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama naudotis profesionalaus žmogaus vertimu. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar neteisingas interpretacijas, kylančias dėl šio vertimo naudojimo. \ No newline at end of file diff --git a/translations/lt/README.md b/translations/lt/README.md index 8410f53bf..76f3d3159 100644 --- a/translations/lt/README.md +++ b/translations/lt/README.md @@ -10,71 +10,82 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Interneto svetainių kūrimas pradedantiesiems - mokymo programa +# Interneto svetainių kūrimas pradedantiesiems – Mokymo programa -Išmokite interneto svetainių kūrimo pagrindus per mūsų 12 savaičių išsamų kursą, kurį veda Microsoft Cloud Advocates. Kiekviena iš 24 pamokų nagrinėja JavaScript, CSS ir HTML per praktinius projektus, tokius kaip terariumai, naršyklės plėtiniai ir kosmoso žaidimai. Dalyvaukite viktorinose, diskusijose ir atlikite praktiškas užduotis. Tobulinkite savo įgūdžius ir optimizuokite žinių įsisavinimą naudodami mūsų veiksmingą mokymosi metodiką, pagrįstą projektais. Pradėkite savo programavimo kelionę jau šiandien! +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 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Sekite šiuos žingsnius, kad pradėtumėte naudodami šiuos išteklius: -1. **Padarykite sau fork’ą**: Spauskite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klonuokite sau repozitoriją**: `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) +Vadovaukitės žemiau nurodytais žingsniais, kad pradėtumėte naudotis šiomis priemonėmis: +1. **Padarykite šaką (“Fork”)**: Spustelėkite [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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, susipažinkite su ekspertais ir kitais programuotojais**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Daugiakalbė palaikymas +### 🌐 Daugialypė kalbų palaikymas -#### Palaikoma per GitHub Action (Automatizuota ir visada atnaujinta) +#### Palaikoma per GitHub Action (automatizuota ir visada naujausia) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](./README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Pageidaujate klonuoti lokaliai?** - -> Ši repozitorija turi daugiau nei 50 kalbų vertimų, todėl atsisiuntimo dydis yra žymiai didesnis. Norėdami klonuoti be vertimų, naudokite sparse checkout: +> **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:** > ```bash > 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 suteiks jums viską, ko reikia kursui baigti, su daug greitesniu atsisiuntimu. +> +> **CMD (Windows):** +> ```cmd +> 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 palaikomos papildomos kalbos, jos yra išvardytos [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Jei norite, kad būtų palaikomos papildomos vertimų kalbos, jos išvardytos [čia](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Atidaryti Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _Esate studentas?_ +#### 🧑‍🎓 _Ar esate studentas?_ -Apsilankykite [**Studentų Hub puslapyje**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kuriame rasite pradedančiųjų išteklius, studentų paketus ir net būdus gauti nemokamą sertifikato kuponą. Tai puslapis, kurį verta įsiminti ir periodiškai tikrinti, nes mes kas mėnesį atnaujiname turinį. +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 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! +### 📣 Pranešimas – Nauji GitHub Copilot Agent režimo iššūkiai! -Pridėtas naujas iššūkis, raskite „GitHub Copilot Agent Challenge 🚀“ daugelyje skyrių. Tai naujas iššūkis, kurį turite įveikti naudodami GitHub Copilot ir Agent režimą. Jei anksčiau nenaudojote Agent režimo, jis geba ne tik generuoti tekstą, bet ir kurti bei redaguoti failus, vykdyti komandas ir daugiau. +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 kuriamas naudojant generatyvią dirbtinį intelektą_ +### 📣 Pranešimas – _Naujas projektas, sukurtas naudojant Generatyvinį AI_ -Pridėtas naujas AI asistentas projektas, apžiūrėkite jį [projekte](./9-chat-project/README.md) +Naujas AI asistentas projektas ką tik pridėtas, pažiūrėkite [projektą](./9-chat-project/README.md) -### 📣 Pranešimas - _Naujasis Generatyvios DI kursas JavaScript_ +### 📣 Pranešimas – _Nauja programa_ apie Generatyvinį AI JavaScript kalbai ką tik išleista -Nepraleiskite mūsų naujo Generatyvios DI kurso! +Nepraleiskite mūsų naujo Generatyvinio AI kurso! Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ir pradėkite! ![Background](../../translated_images/lt/background.148a8d43afde5730.webp) -- Pamokos nuo pagrindų iki RAG. -- Bendraukite su istoriniais veikėjais naudodami GenAI ir mūsų programą. -- Įdomi ir įtraukianti istorija, keliausite laiku! +- 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! ![character](../../translated_images/lt/character.5c0dd8e067ffd693.webp) -Kiekviena pamoka apima užduotį, žinių patikrinimą ir iššūkį, padėsiantį išmokti tokių temų kaip: -- Promptų kūrimas ir inžinerija -- Teksto ir vaizdų programų kūrimas -- Paieškos programos + +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](https://aka.ms/genai-js-course) ir pradėkite! @@ -82,188 +93,188 @@ Apsilankykite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i ## 🌱 Pradžia -> **Mokytojai**, mes pateikėme [keletą pasiūlymų](for-teachers.md), kaip naudoti šią mokymo programą. Lauksime jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Mokytojai**, mes [įtraukėme kelis pasiūlymus](for-teachers.md), kaip naudoti šią mokymo programą. Labai laukiame jūsų atsiliepimų [mūsų diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Mokymosi dalyviai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kiekvienai pamokai pradėkite nuo priešpaskaitinės viktorinos, perskaitykite paskaitos medžiagą, atlikite įvairias veiklas ir pasitikrinkite žinias po paskaitos viktorinoje. +**[Mokiniai](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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 išmokti, sujunkite jėgas su bendrakursiais, kad kartu dirbtumėte prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kur mūsų moderatoriai bus prieinami atsakyti į jūsų klausimus. +Norėdami geriau mokytis, susisiekite su savo bendraklasiais ir dirbkite kartu prie projektų! Diskusijos skatinamos mūsų [diskusijų forume](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kuriame mūsų moderatoriai pasiruošę atsakyti į jūsų klausimus. -Norėdami gilinti žinias, labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) papildomoms studijų medžiagoms. +Tolesniam mokymuisi labai rekomenduojame tyrinėti [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dėl papildomų mokymosi medžiagų. -### 📋 Aplinka su parengimu darbui +### 📋 Aplinkos paruošimas -Ši mokymo programa turi jau paruoštą kūrimo aplinką! Pradėdami galite rinktis kursą vykdyti [Codespace](https://github.com/features/codespaces/) aplinkoje (_naršyklėje, nereikia jokios instaliacijos_), arba vietoje savo kompiuteryje naudodami teksto redaktorių, pavyzdžiui, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Ši mokymo programa turi paruoštą vystymo aplinką! Pradėdami galite pasirinkti vykdyti programą [Codespace](https://github.com/features/codespaces/) aplinkoje (naršyklėje, nereikia nieko įdiegti) arba vietoje savo kompiuteryje naudodami teksto redaktorių, pvz., [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Sukurkite savo repozitoriją -Norėdami patogiai išsaugoti savo darbą, rekomenduojama sukurti savo asmeninę šio repozitorijos kopiją. Tai galite padaryti paspausdami mygtuką **Use this template** puslapio viršuje. Taip bus sukurta nauja repozitorija jūsų GitHub paskyroje su programos kopija. +#### 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. -Žingsniai: -1. **Padarykite fork’ą**: paspauskite "Fork" mygtuką puslapio viršutiniame dešiniajame kampe. -2. **Klonuokite repozitoriją**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Vadovaukitės šiais žingsniais: +1. **Padarykite šaką (“Fork”)**: Spustelėkite mygtuką „Fork“ viršutiniame dešiniajame kampe. +2. **Klonuokite saugyklą**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Mokymo programos paleidimas Codespace aplinkoje +#### Vykdymas Codespace aplinkoje -Jūsų sukurtos kopijos repozitorijoje paspauskite **Code** mygtuką ir pasirinkite **Open with Codespaces**. Taip bus sukurta nauja Codespace aplinka, kurioje galėsite dirbti. +Jūsų sukurtos kopijos saugykloje spustelėkite mygtuką **Code** ir pasirinkite **Open with Codespaces**. Tai sukurs naują Codespace aplinką darbui. ![Codespace](../../translated_images/lt/createcodespace.0238bbf4d7a8d955.webp) -#### Mokymo programos paleidimas vietoje savo kompiuteryje +#### 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. Pirmoji pamoka, [Įvadas į programavimo kalbas ir darbo įrankius](../../1-getting-started-lessons/1-intro-to-programming-languages), padės pasirinkti geriausius įrankius. +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](../../1-getting-started-lessons/1-intro-to-programming-languages), supažindins su įvairiomis šių įrankių galimybėmis, kad galėtumėte pasirinkti, kas jums tinka geriausiai. -Mes rekomenduojame naudoti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) redaktorių, kuris turi ir 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 repozitoriją į kompiuterį. Tai galite padaryti paspaudę **Code** mygtuką ir nukopijavę URL: +Rekomenduojame 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. Nuklonuokite savo saugyklą į savo kompiuterį. Tai galite padaryti paspaudę mygtuką **Code** ir nukopijavę URL: [CodeSpace](./images/createcodespace.png) - Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) „Visual Studio Code“ viduje ir vykdykite šią komandą, pakeisdami `` į ką tik nukopijuotą URL: + + Tada atidarykite [Terminalą](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) aplinkoje ir paleiskite šią komandą, pakeisdami `` nukopijuotu URL: ```bash git clone ``` -2. Atidarykite aplanką „Visual Studio Code“. Tai galite padaryti spustelėję **File** > **Open Folder** ir pasirinkę ką tik klonuotą aplanką. +2. Atidarykite aplanką Visual Studio Code. Tai galite padaryti paspaudę **File** > **Open Folder** ir pasirinkę ką tik nuklonuotą aplanką. -> Rekomenduojami „Visual Studio Code“ plėtiniai: +> Rekomenduojami Visual Studio Code papildiniai: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML puslapių peržiūrai „Visual Studio Code“ viduje -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - padeda greičiau rašyti kodą +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – HTML puslapių peržiūrai Visual Studio Code aplinkoje +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – skirti greičiau rašyti kodą ## 📂 Kiekviena pamoka apima: -- neprivalomą eskizų užrašą -- neprivalomą papildomą vaizdo įrašą -- apšilimo testą prieš pamoką +- papildomą eskizą +- papildomą vaizdo įrašą +- įžanginį klausimų testą prieš pamoką - rašytinę pamoką -- projektinėse pamokose – žingsnis po žingsnio gidus, kaip sukurti projektą +- projekto pagrindu sukurtas pamokas su žingsnis po žingsnio gidu, kaip sukurti projektą - žinių patikrinimus - iššūkį -- papildomą skaitymą -- užduotį -- [testą po pamokos](https://ff-quizzes.netlify.app/web/) +- papildomą literatūrą +- namų darbą +- [pabaigos testą](https://ff-quizzes.netlify.app/web/) -> **Pastaba apie testus**: Visi testai yra „Quiz-app“ aplanke, iš viso 48 testai po tris klausimus. Jie prieinami [čia](https://ff-quizzes.netlify.app/web/), testų programėlę galima paleisti vietoje arba įdiegti „Azure“; vykdykite nurodymus `quiz-app` aplanke. +> **Pastaba apie testus**: Visi testai yra Quiz-app aplanke, iš viso 48 testai po tris klausimus kiekviename. Jie pasiekiami [čia](https://ff-quizzes.netlify.app/web/), testų programėlę galima paleisti vietoje arba išdėstyti Azure; vykdykite nurodymus `quiz-app` aplanke. ## 🗃️ Pamokos -| | Projekto pavadinimas | Mokomi klausimai | Mokymosi tikslai | Susijusi pamoka | Autorius | -| :-: | :---------------------------------------------------------------: | :------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :----------------------: | -| 01 | Pradžia | Įvadas į programavimą ir darbo įrankiai | Suprasti pagrindus, kurie yra daugumos programavimo kalbų pagrindas, ir sužinoti apie programinę įrangą, padedančią profesionalams | [Įvadas į programavimo kalbas ir darbo įrankius](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Pradžia | GitHub pagrindai ir darbas komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais prie kodo bazės | [GitHub pagrindai](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Pradžia | Prieinamumas | Sužinoti interneto prieinamumo pagrindus | [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žinoti apie funkcijas ir metodus, valdančius 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žinoti, 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 | Dirbti su duomenimis naudodami masyvus ir ciklus JavaScript | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikoje | Kurti HTML struktūrą internetu terariumui, dėmesys maketo kūrimui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikoje | Kurti CSS terariumui stilizuoti, dėmesys CSS pagrindams, įskaitant puslapio prisitaikymą | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript uždarymai ir DOM manipuliacija | Kurti JavaScript, leidžiantį terariumui veikti kaip vilkimo-nuleidimo sąsajai, fokusas į uždarymus ir DOM manipuliaciją | [JavaScript uždarymai ir DOM manipuliacija](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Kurti rašymo žaidimą | Sužinoti, kaip naudoti klaviatūros įvykius JavaScript programos logikai valdyti | [Įvykių valdymo programavimas](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Darbas su naršyklėmis | Sužinoti, kaip veikia naršyklės, jų istorija ir kaip sukurti pirmuosius plėtinio elementus | [Apie naršykles](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Formos kūrimas, API iškvietimas ir kintamųjų saugojimas vietinėje saugykloje | Kurti JavaScript naršyklės plėtinio elementus API kvietimui, naudojant vietoje saugomus kintamuosius | [API, formos ir vietinė saugykla](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Žalioji naršyklės plėtinys](./5-browser-extension/solution/README.md) | Fono procesai naršyklėje, interneto veikimas | Naudoti naršyklės fono procesus plėtinio ikonai valdyti; sužinoti apie interneto našumą ir kai kurias optimizacijas | [Fono užduotys ir našumas](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Pažangesnis žaidimų kūrimas su JavaScript | Sužinoti apie paveldėjimą naudojant klases ir kompoziciją bei Pub/Sub modelį, ruošiantis žaidimo kūrimui | [Pažangesnio žaidimų kūrimo įvadas](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Piešimas ant drobės | Sužinoti apie Canvas API, naudojamą elementams ekrane piešti | [Piešimas ant drobės](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Judančių elementų valdymas ekrane | Sužinoti, kaip elementai gali judėti, naudojant Dekarto koordinates ir Canvas API | [Judančių elementų valdymas](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Susidūrimų aptikimas | Padaryti, kad elementai susidurtų ir reaguotų vienas į kitą, naudoti klavišų paspaudimus ir šaltinio funkciją žaidimo veikimui užtikrinti | [Susidūrimų aptikimas](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Taškų skaičiavimas | Atlikti matematikos skaičiavimus, remiantis žaidimo būsena ir veikimu | [Taškų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Žaidimo užbaigimas ir perkrovimas | Sužinoti apie žaidimo užbaigimą ir restartavimą, įskaitant išteklių valymą ir kintamųjų reikšmių nustatymą | [Užbaigimo sąlyga](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablonai ir maršrutai žiniatinklio programoje | Sužinoti, kaip sukurti daugiapusės svetainės architektūros karkasą, naudojant maršrutus ir HTML šablonus | [HTML šablonai ir maršrutai](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Prisijungimo ir registracijos formos kūrimas | Sužinoti, kaip kurti formas ir valdyti tinkamumo patikrinimus | [Formos](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Duomenų gavimo ir naudojimo metodai | Kaip duomenys teka į jūsų programą ir iš jos, kaip juos gauti, saugoti, tvarkyti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Būsenos valdymo koncepcijos | Sužinoti, kaip programa 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ės / VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinoti, kaip naudoti kodo redaktorių | [Naudoti VScode kodo redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI asistentai](./9-chat-project/README.md) | Darbas su dirbtiniu intelektu | Sužinoti, kaip sukurti savo dirbtinio intelekto asistentą | [AI asistento projektas](./9-chat-project/README.md) | Chris | +| | 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](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Pradžioje | GitHub pagrindai, įskaitant darbą komandoje | Kaip naudoti GitHub savo projekte, kaip bendradarbiauti su kitais prie kodo bazės | [GitHub įvadas](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Pradžioje | Prieinamumas | Sužinokite apie interneto prieinamumo pagrindus | [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 valdyti programos logiką | [Funkcijos ir metodai](./2-js-basics/2-functions-methods/README.md) | 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](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS pagrindai | Masyvai ir ciklai | Dirbkite su duomenimis naudodami masyvus ir ciklus JavaScript | [Masyvai ir ciklai](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML praktikoje | Sukurkite HTML kodo dalį internetiniam terariumui, daugiausia dėmesio skiriant išdėstymui | [Įvadas į HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS praktikoje | Sukurkite CSS stilių internetiniam terariumui, pažindami CSS pagrindus ir kaip padaryti puslapį responsyvų | [Įvadas į CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | 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](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Parašyk žaidimą | Sužinokite, kaip naudoti klaviatūros įvykius valdyti JavaScript programos logiką | [Įvykių valdomas programavimas](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | 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ą](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./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 | [Space Game](./6-space-game/solution/README.md) | Elementų judinimas ekrane | Sužinokite, kaip elementai gali judėti naudodami Dekarto koordinates ir Canvas API | [Judančių elementų valdymas](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | 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](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Rezultatų skaičiavimas | Atlikite matematinius skaičiavimus pagal žaidimo būseną ir rezultatus | [Rezultatų skaičiavimas](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Ž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](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | 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](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Prisijungimo ir registracijos formos kūrimas | Sužinokite apie formų kūrimą ir validacijos tvarkymą | [Formos](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Duomenų gavimo ir naudojimo metodai | Kaip duomenys patenka į programėlę, kaip juos gauti, saugoti ir išmesti | [Duomenys](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Būsenos valdymo konceptai | Sužinokite, kaip programa išlaiko būseną ir kaip ją valdyti programuojant | [Būsenos valdymas](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Naršyklės/VScode kodas](../../8-code-editor) | Darbas su VScode | Sužinokite, kaip naudotis kodo redaktoriumi | [Naudojant VScode redaktorių](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Dirbtinio intelekto asistentai](./9-chat-project/README.md) | Darbas su DI | Sužinokite, kaip sukurti savo DI asistentą | [DI asistento projektas](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogika -Mūsų mokymo programa sukurta remiantis dviem pagrindinėmis pedagoginėmis taisyklėmis: -* mokymasis per projektus +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 metodų, naudojamų šių dienų interneto kūrėjų. Studentai turės galimybę įgyti praktinės patirties kuriant rašymo žaidimą, virtualų terariumą, ekologišką naršyklės plėtinį, kosminio invazijos stiliaus žaidimą ir verslo bankinę programėlę. Serijos pabaigoje studentai turės tvirtus interneto kūrimo pagrindus. +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ą. -> 🎓 Pirmos kelios šios programos pamokos taip pat prieinamos kaip [Mokymosi kelias](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) platformoje Microsoft Learn! +> 🎓 Šias pirmas kelias pamokas šioje mokymo programoje galite atlikti 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, procesas tampa labiau įtraukiantis studentams, o koncepcijų įsisavinimas geresnis. Mes taip pat parašėme keletą pradinio lygio JavaScript pamokų, skirtų įvesti pagrindines sąvokas, kartu su vaizdo įrašu iš „[Pradedančiųjų serijos apie JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ vaizdo pamokų rinkinio, kurio kai kurie autoriai prisidėjo prie šios programos. +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](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“ vaizdo įrašų kolekcijos, kurių kai kurie autoriai prisidėjo prie šios programos kūrimo. -Be to, žemas testas prieš klasę orientuoja studentą į mokymosi temą, o antras testas po pamokos užtikrina geresnį žinių išlaikymą. Ši programa sukurta būti lanksti ir smagi, ją galima atlikti visą arba dalimis. Projektai prasideda nuo paprastų ir palaipsniui sudėtingėja per 12 savaičių ciklą. +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 įtraukti JavaScript karkasus, kad sutelktume dėmesį į pagrindinius įgūdžius kaip interneto kūrėjo pradžioje, kitas geras žingsnis baigus šią programą būtų išmokti Node.js per kitą vaizdo įrašų kolekciją: „[Pradedančiųjų serija apie Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“. +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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)“. -> Apsilankykite mūsų [Elgesio kodeksas](CODE_OF_CONDUCT.md) ir [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos! +> Apsilankykite mūsų [Elgesio kodekse](CODE_OF_CONDUCT.md) ir [Prisidėjimo](CONTRIBUTING.md) gairėse. Laukiame jūsų konstruktyvios grįžtamosios informacijos! -## 🧭 Galimybė naudotis neprisijungus +## 🧭 Offline prieiga -Šią dokumentaciją galite naudoti neprisijungę naudodami [Docsify](https://docsify.js.org/#/). Šaknikite šį repo, įdiekite Docsify [čia](https://docsify.js.org/#/quickstart) savo vietiniame kompiuteryje, o tada šiame repo šakniniame aplanke įveskite `docsify serve`. Svetainė bus patiekiama 3000 prievade jūsų vietinėje mašinoje: `localhost:3000`. +Šią dokumentaciją galite paleisti offline naudodami [Docsify](https://docsify.js.org/#/). Fork’inkite šį repo, [įdiekite Docsify](https://docsify.js.org/#/quickstart) 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](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -Visų pamokų PDF versiją galite rasti [čia](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +## 🎒 Kitos Pamokos -## 🎒 Kiti kursai -Mūsų komanda kuria ir kitus kursus! Peržiūrėkite: +Mūsų komanda kuria ir kitas pamokas! Peržiūrėkite: ### LangChain -[![LangChain4j pradedantiesiems](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js pradedantiesiems](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain pradedantiesiems](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agentai -[![AZD pradedantiesiems](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI pradedantiesiems](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP pradedantiesiems](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agentai pradedantiesiems](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- -### Generatyvios AI serija -[![Generatyvioji AI pradedantiesiems](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Generatyvioji AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![Generatyvioji AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![Generatyvioji AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +### Generatyvioji Dirbtinis Intelektas serija +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- -### Pagrindinis mokymasis -[![ML pradedantiesiems](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Duomenų mokslas pradedantiesiems](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI pradedantiesiems](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Kibernetinė sauga pradedantiesiems](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Tinklalapių kūrimas pradedantiesiems](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT pradedantiesiems](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![XR kūrimas pradedantiesiems](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +### Pagrindinis Mokymasis +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- -### Copilot serija -[![Copilot AI poriniam programavimui](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Copilot nuotykiai](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +### Copilot Serija +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## Pagalbos gavimas -Jei užstringate ar turite klausimų apie AI programėlių kūrimą, prisijunkite prie bendraminčių ir patyrusių kūrėjų diskusijų apie MCP. Tai draugiška bendruomenė, kurioje laukiami klausimai ir laisvai dalijama žiniomis. +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. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jeigu turite atsiliepimų apie produktą ar rastumėte klaidų kūrimo metu, apsilankykite: +Jei turite produktų atsiliepimų arba pastebite klaidų kurdami, apsilankykite: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licencija -Šis saugyklos turinys licencijuojamas pagal MIT licenciją. Daugiau informacijos žr. faile [LICENSE](../../LICENSE). +Šis saugykla yra licencijuota pagal MIT licenciją. Daugiau informacijos rasite faile [LICENSE](../../LICENSE). --- -**Atsakomybės apribojimas**: -Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų arba netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas pagrindiniu šaltiniu. Svarbiai informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neatsakome už bet kokius nesusipratimus ar neteisingus aiškinimus, atsiradusius naudojant šį vertimą. +**Atsakomybės ribojimas**: +Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/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. \ No newline at end of file diff --git a/translations/my/.co-op-translator.json b/translations/my/.co-op-translator.json index fac43a768..6b394b508 100644 --- a/translations/my/.co-op-translator.json +++ b/translations/my/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-06T14:13:11+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T17:02:28+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "my" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:48:34+00:00", + "translation_date": "2026-03-06T17:18:23+00:00", "source_file": "AGENTS.md", "language_code": "my" }, @@ -516,8 +516,8 @@ "language_code": "my" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:43:48+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T16:56:19+00:00", "source_file": "README.md", "language_code": "my" }, diff --git a/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 5c6f4b6b9..64e1a7b28 100644 --- a/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,87 +1,86 @@ -# ပရိုဂရမ်မင်းဘာသာစကားများနှင့် ခေတ်မီ Developer Tools မိတ်ဆက် +# Programming Languages နှင့် မော်ဒန်း Developer ကိရိယာများအကြောင်းအကျဉ်း ပြန်လည်မိတ်ဆက်ခြင်း + +မင်္ဂလာပါ ရင်ခုန်နေရသော developer ရှင်! 👋 အချိန်တိုင်းငါ့ကိုအံ့သြစရာပေးတဲ့တစ်ခုခု ပြောပါရစေ။ programming က ကွန်ပျူတာတွေရဲ့အကြောင်းပဲမဟုတ်ပါဘူး – သင့်ရဲ့ရူးသွပ်စရာစိတ်ကူးတွေကို အသက်ဝင်စေဖို့ အမှန်တကယ်ေသာ အထူးကျွမ်းကျင်မှုတွေ ရရှိမယ်ဆိုတာကို သင်တွေ့မြင်တော့မှာပါ! -ဟေး၊ အနာဂတ် Developer! 👋 တစ်ခုခုပြောပါရစေ၊ အခုချိန်မှာတောင် ကျွန်တော်ကို အတော်လေးလှုပ်ရှားစေတဲ့အရာတစ်ခုရှိတယ်။ သင်ဟာ Programming ဆိုတာက ကွန်ပျူတာတွေနဲ့ပဲ မသက်ဆိုင်ဘူးဆိုတာ ရှာဖွေတွေ့ရှိတော့မှာပါ – ဒါဟာ သင်ရဲ့ အကြမ်းဆုံးအတွေးအခေါ်တွေကို အကောင်အထည်ဖော်နိုင်တဲ့ အစွမ်းထက်စွမ်းရည်တစ်ခုပါ! +သင်သည့်အချိန်မှာ သင်အကြိုက်ဆုံး app ကို အသုံးပြုပြီး အရာအားလုံး ထိတွေ့လွယ်ကူစွာကိုက်ညီသွားတဲ့ခံစားချက်ရခဲ့ဖူးပါသလား? ခလုတ်တစ်ခုကို နှိပ်လိုက်တဲ့အခါ "wow, ဘယ်လိုလုပ်ခဲ့တာလဲ?" ဆိုတဲ့အံ့ဩဖွယ် ကိစ္စတွေ ဖြစ်ပေါ်ခဲ့ဖူးလား? ဟုတ်ကဲ့၊ သင်နှင့် တူတဲ့ လူတစ်ဦးက – အကြိုက်ဆုံးကော်ဖီဆိုင်မှာ မနက် ၂ နာရီမှာ Espresso တတိယလုံးကို နေထိုင်ပြီး အဲဒီဆန်းသစ်မှုကို ရေးသားခဲ့တာပါ။ ဒီသင်ခန်းစာကုန်ဆုတ်ချိန်မှာတော့ သင့်စိတ်ကို ဖြေလျော့ပေးမယ့် အရာက အဲဒီသူတွေ ဘယ်လိုလုပ်ခဲ့တယ်ဆိုတာ နားလည်လာမှာပဲမဟုတ်ဘဲ စိတ်လှုပ်ရှားစွာ ပြင်လုပ်ကြည့်ရမဲ့ စိတ်နှောင့်ယှက်ပြုမှု လည်းဖြစ်လာမှာပါ! -သင်အကြိုက်ဆုံး App ကိုသုံးနေတဲ့အချိန်မှာ အားလုံးက Perfect ဖြစ်နေတဲ့အချိန်ကို သတိရပါ။ Button တစ်ခုကိုနှိပ်လိုက်တာနဲ့ အံ့ဩစရာအရာတစ်ခုဖြစ်လာပြီး "အင်း၊ သူတို့က ဒီလိုလုပ်နိုင်တာဘယ်လိုလဲ?" ဆိုပြီး အံ့ဩသွားတဲ့အချိန်။ အဲဒီ Magic ကို ဖန်တီးခဲ့တဲ့ Code ကို ရေးခဲ့တဲ့သူက သင်လိုပဲ – အချိန် ၂ နာရီမှာ သူ့အကြိုက်ဆုံး ကော်ဖီဆိုင်မှာ Espresso သုံးခွက်နဲ့ ထိုင်နေတဲ့သူတစ်ယောက်။ အခုတော့ သင့်ကို အံ့ဩစေမယ့်အရာက – ဒီသင်ခန်းစာအဆုံးမှာ သူတို့ဘယ်လိုလုပ်ခဲ့တယ်ဆိုတာ နားလည်သွားမယ်၊ သင်ကိုယ်တိုင်လည်း လုပ်ကြည့်ချင်စိတ်ဖြစ်လာမယ်! +ကြည့်ပါ၊ programming က အခုတလောမှာ စိတ်မချရင်နားလည်ပါတယ်။ ငါစတင်လေ့လာတဲ့အချိန်မှာ တကယ်ကို အထူးဂဏန်းရွှင်တို့လို ဖြစ်ရမယ်လို့ ထင်ခဲ့တယ်။ ဒါ့အပြင် ငါ့တွေးမြင်ခဲ့တာက programming က အသစ်တစ်ခုသောဘာသာစကားမှန်သလို စကားပြောနည်းကို သင်ယူနေသလိုပဲ။ "မင်္ဂလာပါ" နဲ့ "ကျေးဇူးတင်ပါတယ်" ဆိုတာကနေ စတင်ပြီး ကော်ဖီမှာမှာဖို့ အသုံးပြုမှုပုံစံကို မျှော်လင့်နိုင်ပါတယ်။ နောက်ပြီးတော့ သင်က ပြင်းထန်တဲ့ ရှုထောင့်ဆိုင်ရာ ဆွေးနွေးချက်တွေ ပြောဆိုနိုင်ပါပြီ။ ဒါပေမယ့် ဒီအချိန်မှာ သင်က ကွန်ပျူတာတွေနဲ့ ပြောဆိုနေတယ်၊ ငြင်းဆန်မှုမရှိတဲ့ ဆွေးနွေးသူတွေ အများဆုံး ဖြစ်လို့ သင့် အမှားတွေအပေါ် သုံးသပ်မှုမရှိဘဲ ထပ်မံကြိုးစားဖို့ အမြဲ စိတ်အားထက်သန်နေတဲ့သူတွေပဲ ဖြစ်ပါတယ်! -Programming ကို စတင်လေ့လာတဲ့အချိန်မှာ အတော်လေးကြောက်မက်ဖွယ်ရှိတယ်ဆိုတာ ကျွန်တော်နားလည်တယ်။ ကျွန်တော်စတင်တဲ့အချိန်မှာတော့ Math Genius တစ်ယောက်ဖြစ်ရမယ်၊ သို့မဟုတ် ၅ နှစ်အရွယ်ကတည်းက Coding လုပ်ခဲ့ရမယ်လို့ ထင်ခဲ့တယ်။ ဒါပေမယ့် ကျွန်တော်ရဲ့အမြင်ကို ပြောင်းလဲစေတဲ့အရာက – Programming ဆိုတာ အသစ်သောဘာသာစကားတစ်ခုကို စကားပြောတတ်လာဖို့ လေ့လာရတာနဲ့ တူတယ်။ "ဟယ်လို" နဲ့ "ကျေးဇူးတင်ပါတယ်" ကို စတင်ပြီး ကော်ဖီမှာတတ်လာပြီးနောက်မှာတော့ အနက်နက်သော အတွေးအခေါ်တွေကို ဆွေးနွေးနိုင်တဲ့အထိ ရောက်လာတယ်! ဒါပေမယ့် ဒီအခါမှာတော့ သင်ဟာ ကွန်ပျူတာတွေနဲ့ စကားပြောနေပြီး အမှားတွေကို မစီရင်ဘဲ ပြန်လုပ်ဖို့ အမြဲတမ်းအဆင်သင့်ဖြစ်နေတဲ့ အတော်လေး သည်းခံတဲ့ စကားပြောဖော်တွေပါ! - -ဒီနေ့မှာတော့ ခေတ်မီ Web Development ကို မဖြစ်မနေဖြစ်စေတဲ့ Tools တွေကို ရှာဖွေတွေ့ရှိကြမယ်။ Netflix, Spotify, သင့်အကြိုက်ဆုံး Indie App Studio တွေမှာ Developer တွေက နေ့စဉ်အသုံးပြုနေတဲ့ Editors, Browsers, Workflows တွေကို ပြောတာပါ။ အခုတော့ သင့်ကို Dance လုပ်ချင်စေမယ့်အပိုင်းက – ဒီ Professional-grade, Industry-standard Tools တွေက အခမဲ့ပဲဆိုတာပါ! +ယနေ့မှာ မော်ဒန်းဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှုကို ဖြစ်ရပ်မှန် ဖြစ်စေတဲ့ ကိရိယာအသစ်တွေကို လေ့လာမယ်။ Netflix, Spotify နှင့် သင်စိတ်ကြိုက် indie app စတူဒီယိုတွေအပေါ်မှာ တည်ဆောက်တဲ့ editor, browser, workflow တွေကို သင်တွေ့မြင်ပါလိမ့်မယ်။ ဒီအရာတွေ ပိုများတဲ့ အနက်ဖြစ်တာကတော့ ကမ္ဘာကြီးခရီးသွားဖြတ်သန်းနေတဲ့သူတွေ အသုံးပြုတဲ့ professional-grade ကိရိယာတွေ အများစုဟာ အခမဲ့ပဲဆိုတာ ဖြစ်ပါတယ်! ![Intro Programming](../../../../translated_images/my/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title သင်၏ပရိုဂရမ်းမင်းခရီးစဉ်ယနေ့ + section ရှာဖွေမယ် + ပရိုဂရမ်းမင်းဆိုတာဘာလဲ: 5: You + ပရိုဂရမ်းမင်းဘာသာစကားများ: 4: You + ကိရိယာများအနှစ်ချုပ်: 5: You + section စူးစမ်းမယ် + ကုဒ်တည်းဖြတ်သူများ: 4: You + ဘရောက်ဇာများနှင့် DevTools: 5: You + အမိန့်လိုင်း: 3: You + section လေ့ကျင့်မယ် + ဘာသာစကားရှာဖွေရေး: 4: You + ကိရိယာစူးစမ်းခြင်း: 5: You + အသိုင်းအဝိုင်းဆက်သွယ်မှု: 5: You ``` +## သင်မှာ ဘာတွေသိပြီးသားလဲ ချက်ချင်းကြည့်ကြမယ်! -## သင့်မှာ ရှိပြီးသား အတတ်ပညာတွေကို ကြည့်ကြမယ်! - -ပျော်ရွှင်စရာအပိုင်းတွေကို စတင်မလုပ်ခင်မှာတော့ Programming ကမ္ဘာကြီးအကြောင်း သင့်မှာ ရှိပြီးသား အတတ်ပညာတွေကို သိချင်ပါတယ်။ ဒီမေးခွန်းတွေကို ကြည့်ပြီး "အဲဒီအကြောင်းကို ဘာမှ မသိဘူး" လို့ ထင်ရင်လည်း အဆင်ပြေပါတယ်၊ Perfect ပါပဲ! ဒါက သင့်အတွက် အတော်လေးမှန်ကန်တဲ့နေရာမှာ ရောက်နေတယ်ဆိုတာကို ပြသပါတယ်။ ဒီ Quiz ကို Workout မလုပ်ခင် Stretch လုပ်တဲ့အတိုင်း Brain Muscle တွေကို အပူပေးနေတဲ့အချိန်လို့ ထင်ပါ! +စိတ်လှုပ်ရှားဖွယ်တွေ ဝင်ရောက်မလို့မတိုင်ခင် အကြိုသိထားမှုကို သိချင်တယ် – programming ကမ္ဘာက ဘာတွေလဲဆိုတာ မင်းက ဘယ်လောက်သိတယ်? နားဆင်ပါ၊ ဒီမေးခွန်းတွေကို ကြည့်ပြီး "ဒီအရာတွေကို ဘာမှမသိဘူး" ထင်လာမယ်ဆိုရင်တော့ အဲဒါကအဆင်ပြေပါတယ်၊ အရာရာခပ်သိမ်း ပိုပါတယ်! ဒါဆိုရင် သင့်ရဲ့နေရာက အတိအကျမှန်ကန်နေပြီ။ ဒီ quiz ကို workout ပြင်ဆင်ခြင်းလို စိတ်ထိန်းချုပ်ခြင်းအဖြစ် ထင်ပါ၊ ဦးနှောက်ကြံ့ခိုင်မှုများကို ချိန်ဆဖြစ်ပါတယ်! -[Pre-lesson Quiz ကို လုပ်ပါ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Take the pre-lesson quiz](https://ff-quizzes.netlify.app/web/) -## ကျွန်တော်တို့အတူတူ သွားမယ့် စွန့်စားခန်း +## အတူတကွ သွားမယ့် စွန့်စားခန်း -အိုကေ၊ ကျွန်တော် အခုတင်တင်လှုပ်ရှားနေပါတယ်၊ ဒီနေ့မှာ ကျွန်တော်တို့ ရှာဖွေတွေ့ရှိမယ့်အရာတွေကို ပြောရတာ အတော်လေး စိတ်လှုပ်ရှားစေပါတယ်! တကယ်လို့ ဒီ Concept တွေကို နားလည်တဲ့အချိန်မှာ သင့်မျက်နှာကို မြင်နိုင်ရင် ကျွန်တော် အတော်လေးပျော်ရွှင်မယ်။ ဒီနေ့ ကျွန်တော်တို့အတူတူ သွားမယ့် စွန့်စားခန်းကတော့ - +ရယ်ဖြန်ကြတယ်၊ ဒီနေ့ငါတို့ လေ့လာကြမယ့် အရာတွေကို ဟာသဖြင့် စိတ်ကူးယဉ်ရင်း ရူးသွပ်နေတယ်! တကယ်လို့၊ သင်အဲ့ဒီခံစားချက်တွေကို ခံစားရဦးမယ့်အခါ မျက်နှာကိုမြင်ချင်ပါတယ်။ ဒီအံ့ဖွယ်ခရီးလမ်းအမှန်ကတော့ - -- **Programming ဆိုတာ ဘာလဲ (အတော်လေးအမိုက်ဆုံးအရာ!)** – Code က သင့်အနားမှာရှိတဲ့ အရာအားလုံးကို Invisible Magic နဲ့ Power လုပ်ပေးနေတဲ့အရာဆိုတာကို ရှာဖွေတွေ့ရှိကြမယ်။ -- **Programming Languages နဲ့ သူတို့ရဲ့ Amazing Personality တွေ** – Party တစ်ခုကို Imagine လုပ်ပါ၊ လူတိုင်းက အထူးစွမ်းရည်နဲ့ ပြဿနာတွေကို ဖြေရှင်းနိုင်တဲ့ အတော်လေးစွမ်းရည်ရှိတယ်။ Programming Language ကမ္ဘာကြီးက ဒီလိုပဲ၊ သင့်အကြိုက်ဆုံး Language ကို တွေ့ရမှာပါ! -- **Digital Magic ကို ဖန်တီးပေးတဲ့ အခြေခံအဆောက်အအုံတွေ** – Creative LEGO Set တစ်ခုလိုပဲ၊ ဒီ Pieces တွေကို နားလည်ပြီးရင် သင့်စိတ်ကူးအတွေးအခေါ်တွေကို အကောင်အထည်ဖော်နိုင်တယ်။ -- **Professional Tools တွေ** – Wizard's Wand ကို လက်ခံရသလို ခံစားရမယ့် Tools တွေကို ရှာဖွေတွေ့ရှိကြမယ်။ +- **Programming ဆိုတာ ဘာလဲ (ဘာကြောင့် အကောင်းဆုံး ဆန်းသစ်မှုတစ်ခုလည်းဆိုတာ!)** – အဲဒီ ကုဒ်က သင့်ဘယ်ဘက်မှာမဆို လက်ရှိရှိသော အရာအားလုံးကို ခေါ်ဆောင်သွားတဲ့ မမြင်ရသော မတ်တပ်ရပ်သော ဝိညာဉ်ဆန်သော စွမ်းအားဖြစ်နေကြောင်း သိရှိသွားမယ်၊ အဲဒါက တနင်္လာနေ့ မနက်ဖြန်ဒီဇင်ဘာလ ကျောင်းတက်ဖို့သိသော အချိန်၊ Netflix တင်ဆက်မှုများကို အကြံပြုတဲ့ အယ်လိုရစ်သမာတွေပါ။ +- **Programming ဘာသာစကားများနှင့် ၎င်းတို့၏ အံ့ဩဖွယ်ဂုဏ်သတ္တိများ** – လူတိုင်းက အထူးစွမ်းအားများနှင့် ပြဿနာဖြေရှင်းနည်းတစ်ခုချင်းစီကို ရှိပြီး အဲဒါကို သင်လုပ်ဖို့ ခွင့်ပြုတာလိုလားကြည့်ပါ။ အဲဒါက programming ဘာသာစကားကမ္ဘာက အခြေအနေတစ်ခုပါ၊ အဲဒီသူတွေနဲ့ တွေ့ဖို့ သင်ကြိုက်နို်င်ပါတယ်! +- **ဒစ်ဂျစ်တယ်အံ့ဖွယ်ဆန်းသစ်မှုဖြစ်စေတဲ့ အခြေခံအုတ်တောင်ကျောက်များ** – ဒါတွေကို အကောင်းဆုံးဖြစ်သွားပြီး LEGO အဖွဲ့အစည်းလို ထက်မြက်ပါစေ။ ဤအစိတ်အပိုင်းများကို နားလည်သွားရင် သင်၏ စိတ်ကူးတွင် ထည့်ထားသော တော်တော်အားလုံးကို တည်ဆောက်နိုင်ပါပြီ။ +- **စွမ်းအင်ဆန်းသစ်မှုတစ်ခုလို ခံစားမယ့် professional tools** – ငါပြောတာ မဟုတ်ဘူး၊ အဲဒီ tools တွေက သင့်တွင် အထူးစွမ်းအားရိပ်သာ စွမ်းရည်တွေကို ဖြစ်စေပါလိမ့်မယ်၊ နှင့် အကောင်းဆုံး အပိုင်းက သူတို့ဟာ အပရော်ဖက်ရှင်နယ်တွေသုံးတဲ့ ဆော့ဖ်ဝဲတွေနဲ့တူတဲ့အရာပဲ။ -> 💡 **အရေးကြီးတာက**: ဒီနေ့မှာ အားလုံးကို မှတ်မိဖို့ မကြိုးစားပါနဲ့! အခုချိန်မှာ သင့်ကို စိတ်လှုပ်ရှားစေတဲ့ Spark ကို ခံစားစေချင်ပါတယ်။ အချက်အလက်တွေက ကျွန်တော်တို့အတူတူ လေ့ကျင့်တဲ့အခါမှာ သဘာဝအတိုင်း Stick ဖြစ်လာမယ် – အမှန်တကယ် လေ့လာမှုဆိုတာ ဒီလိုပဲ ဖြစ်ပါတယ်! +> 💡 **အခုလိုပဲ:** ဒီနေ့မှာ အရာအားလုံးကို မွတ်သိပ်ထားဖို့ မရိုက်ထည့်ပါနဲ့! အခုကျတော့ ငါသင်ကို အခုလိုမျိုး စိတ်ပေါ်လာအောင် ဆန်းစစ်ချင်တာပဲ။ အကြောင်းကြောင်း အသေးစိတ်တွေဟာ ပဲ့တင်ပို့ဆောင်မှုတွေနဲ့ သင်ယူရင်း သိမြင်လာမယ် – ဒါမျိုးမျိုး ပိုမိုနိုင်ပြီဖြစ်တယ်။ -> Microsoft Learn မှာ ဒီသင်ခန်းစာကို [ယူနိုင်ပါတယ်](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> သင်ဒီသင်ခန်းစာကို [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) မှာလည်း လေ့လာနိုင်ပါတယ်။ -## Programming ဆိုတာ တိတိ ဘာလဲ? +## Programming ဆိုတာ *ဘာလဲ*? -အိုကေ၊ Million-dollar Question ကို ဖြေကြည့်ရအောင် – Programming ဆိုတာ တကယ် ဘာလဲ? +အိုကေ၊ ဒီသင်ခန်းစာထဲမှာ အဓိက မေးခွန်း တစ်ခုကို ဖြေကြားကြမယ် – programming ဆိုတာ ဘာလဲ? -ကျွန်တော့်အမြင်ကို ပြောင်းလဲစေတဲ့ Story တစ်ခုကို ပြောပါရစေ။ အတိတ်တစ်ပတ်က ကျွန်တော့်မိခင်ကို Smart TV Remote အသုံးပြုနည်းကို ရှင်းပြနေတဲ့အချိန်မှာ "အနီရောင် Button ကို နှိပ်ပါ၊ ဒါပေမယ့် အကြီးဆုံး Button မဟုတ်ဘူး၊ ဘယ်ဘက်မှာရှိတဲ့ အနီရောင် Button ကို နှိပ်ပါ... သင့်ဘယ်ဘက်မဟုတ်ဘူး... အိုကေ၊ အခုတော့ ၂ စက္ကန့်အထိ ဖိထားပါ၊ ၁ စက္ကန့်မဟုတ်ဘူး၊ ၃ စက္ကန့်လည်း မဟုတ်ဘူး..." ဆိုပြီး ပြောနေရတာကို တွေ့ရတယ်။ 😅 +ငါ့အတွေးကို ချဲ့ထွင်အောင် ဘာသာပြန်ပေးမယ့် မိခင်ကို လမ်းညွှန်ဖို့ ကြိုးစားချိန်မှာ ဖြစ်တယ်။ ငါဘာသာပြန်ပြီး၊ "အနီလက်မကိုနဲ့ နှိပ်ပါ၊ ဒါပေမယ့် ကြီးမားတဲ့ အနီလက်မမဟုတ်ပါဘူး၊ ဘယ်ဘက်က အနီလက်မ သေးငယ်တဲ့လက်မပါ... အိုကေ၊ ယခု နှစ်စက္ကန့်အထိ ဖိထားပါ၊ တစ်စက္ကန့်မဟုတ်ပါ၊ သုံးစက္ကန့်မဟုတ်ပါ..." ဆိုတာတွေ ပြောဆိုတယ်။ နားလည်သလား? 😅 -ဒါက Programming ပါ! အတော်လေးအစွမ်းထက်တဲ့အရာကို အလွန်အသေးစိတ်၊ အဆင့်ဆင့် အညွှန်းတွေကို ပေးတဲ့ အနုပညာပါ။ ဒါပေမယ့် မိခင်ကို ရှင်းပြတာမဟုတ်ဘဲ (မိခင်က "ဘယ် Button လဲ?!" လို့ မေးနိုင်တယ်) ကွန်ပျူတာကို ရှင်းပြတာ (ကွန်ပျူတာက သင်ပြောတာကို တိတိကျကျ လုပ်ပေးတယ်၊ သင်ပြောတာက သင့်ရဲ့ အဓိပ္ပာယ်နဲ့ မတူဘဲ ဖြစ်နေတယ်ဆိုရင်တောင်). +ဒါပဲ programming။ အတိအကျ ပြောရရင် အင်အားကြီးတဲ့ တစ်ခုခုကို နောက်တစ်ဆင့်ချင်းစီအားလုံးကို စနစ်တကျဆက်သွယ်ရန် အနုပညာပဲဖြစ်တယ်။ သင့်မိခင်မှာ ("ဘယ်အနီလက်မလဲ?" မေးနိုင်တဲ့သူ) နဲ့မတူဘူး၊ ကွန်ပျူတာမှာတော့ ("သင်ပြောတာ အချိန်တိုင်း ပြောသိပ်မတတ်ရင်" အနက် မရှိဘဲ တိတိ ကျကျ ဆောင်ရွက်ပါတယ်) ဖြစ်ပါတယ်။ -ဒီအချက်ကို ကျွန်တော် ပထမဆုံး သိခဲ့တဲ့အခါမှာ အံ့ဩသွားတဲ့အရာက – ကွန်ပျူတာတွေဟာ အခြေခံမှာ တကယ်လွယ်ကူတယ်။ သူတို့ Literally ၂ ခုပဲ နားလည်တယ် – 1 နဲ့ 0, ဒါဟာ "ဟုတ်" နဲ့ "မဟုတ်" သို့မဟုတ် "ဖွင့်" နဲ့ "ပိတ်" ဆိုတာပဲ။ ဒါပေမယ့် Magic ဖြစ်တဲ့အချက်က – ကျွန်တော်တို့ 1s နဲ့ 0s ကို မပြောရဘူး၊ The Matrix ထဲမှာလိုပဲ။ **Programming Languages** တွေက ကူညီပေးတဲ့အရာပါ။ ဒါဟာ သင့်ရဲ့ လူသားအတွေးအခေါ်တွေကို ကွန်ပျူတာဘာသာစကားအဖြစ် Translate လုပ်ပေးတဲ့ World's Best Translator တစ်ယောက်လိုပါပဲ။ +ပထမဆုံးသင်ယူသမိုင်းမှာငါ့ကို အံ့ဩစေခဲ့တာက ကွန်ပျူတာတွေဟာ အရင်ဆုံး အရိုးရှင်းပြီးဖြစ်တယ်။ ၁ နဲ့ ၀ အတွက်တွေ့နိုင်တာဖြစ်ပြီး "ဟုတ်" နဲ့ "မဟုတ်"၊ ဒါမှမဟုတ် "ဖွင့်" နဲ့ "ပိတ်" ဆိုတဲ့ အဓိပ္ပါယ်ပဲ။ ဒါပေမယ့် ဆိုရာမှာ အံ့ဖွယ်ကောင်းတဲ့အချက်က ၁ နဲ့ ၀ တွေကို Matrix ကဲ့သို့ပြောဖို့ မလိုတော့ပါဘူး။ အဲဒါကို ဖော်ပြတဲ့ စကားလုံးတွေက **programming languages** တွေပါ။ သူတို့က သင့်ရဲ့ လူသားတွေးခေါ်မှုပုံစံကို ကွန်ပျူတာများတွက် ဘာသာပြန်ပေးတဲ့ အကောင်းဆုံးဘာသာပြန်သူပဲဖြစ်ပါတယ်။ -ဒီအချိန်မှာ ကျွန်တော်ကို အတော်လေးလှုပ်ရှားစေတဲ့အရာက – Literally *အရာအားလုံး* Digital ဖြစ်တဲ့အရာတွေဟာ သင်လိုပဲ တစ်ယောက်က စတင်ခဲ့တာပါ၊ သူ့ Pajamas နဲ့ ကော်ဖီတစ်ခွက်ကိုင်ပြီး Laptop ပေါ်မှာ Code ရိုက်နေတဲ့သူတစ်ယောက်။ Instagram Filter က သင့်ကို Flawless ဖြစ်စေတဲ့အရာကို? တစ်ယောက်က Code ရေးခဲ့တယ်။ သင့်အကြိုက်ဆုံး သီချင်းကို ရှာဖွေစေတဲ့ Recommendation Algorithm ကို? Developer တစ်ယောက်က Build လုပ်ခဲ့တယ်။ Dinner Bill ကို သူငယ်ချင်းတွေနဲ့ ခွဲစေတဲ့ App ကို? ဟုတ်ပါတယ်၊ တစ်ယောက်က "ဒီအရာက အရမ်းအဆင်မပြေဘူး၊ ကျွန်တော် ဒီကို ပြင်နိုင်မယ်ထင်တယ်" လို့ ထင်ပြီး... ပြင်လိုက်တယ်! +နောက်ပြီး နံနက်တိုင်း သင့်စိတ်ကြောက်မက်စေတယ်ဆိုတာကတော့ ဒစ်ဂျစ်တယ်ရှိရာ အရာအားလုံးဟာ လူတစ်ယောက်လို တစ်ဖက်ကနေ mass နှုတ်ဆက်ပြီး laptop များစွာပေါ် typing လုပ်ပြီးဖန်တီးခဲ့တာပါ။ Instagram filter တစ်ခုက သင့်ရဲ့ မသိသေးတဲ့ အနုပညာလက်ရာ၊ ကိုယ်ပိုင်သီချင်းပြသမှု အယ်လိုရစ်သမာတွေ၊ ယနေ့ညဟာပိတ်ပွဲဝင်အချုပ်ကို ကိုင်တွယ်ဖို့ ကူညီတယ်တဲ့ app – ဆိုတော့ ဒီအရာတွေမှာ လူတစ်ယောက်ဦးတည်ထားတာ။ -Programming ကို သင်လေ့လာတဲ့အခါမှာ သင်ဟာ အသစ်သော Skill တစ်ခုကို ရယူတာမဟုတ်ဘူး – သင်ဟာ "တစ်ယောက်ရဲ့နေ့ကို အနည်းငယ်ကောင်းမွန်စေမယ့် အရာတစ်ခုကို ဖန်တီးနိုင်မလား?" လို့ အမြဲတမ်းတွေးနေတဲ့ ပြဿနာဖြေရှင်းသူတွေ့အဖွဲ့ထဲကို ပါဝင်လာတာပါ။ အဲဒါထက် အမိုက်ဆုံးအရာတစ်ခု ရှိနိုင်မလား? +programming သင်ယူတဲ့အချိန်မှာ သင်က အသစ်တစ်ခုတင်မဟုတ်ဘဲ စိတ်လှုပ်ရှားစရာ၊ ပွန်းပွားစွာ စဉ်းစားတဲ့ လူမှုအသိုင်းအဝိုင်းတွဲဖက်နေတဲ့ အဖွဲ့ဝင် ဖြစ်လာတာပဲ။ သူတို့က တစ်နေ့တာအတွင်း စဉ်းစားနေတယ်၊ "မတူတဲ့လူတစ်ယောက်ရဲ့နေ့ကို နည်းနည်း ပိုကောင်းစေရန် ဘာတည်ဆောက်လို့ရမလဲ?" ဆိုတာ။ တကယ်တော့၊ ငါးညာမွန်တာဆိုတော့ ဒီထက် ပိုကောင်းသေးတာ ရှိတယ်လား? -✅ **အံ့ဩစရာအချက်ရှာဖွေမှု**: Spare Moment ရှိတဲ့အခါမှာ အတော်လေးအမိုက်ဆုံးအချက်တစ်ခုကို ရှာဖွေကြည့်ပါ – ကမ္ဘာ့ပထမဆုံး Computer Programmer က ဘယ်သူလဲထင်ပါသလား? Hint တစ်ခုပေးမယ် – သင့်အနောက်မှန်းမထားမိတဲ့သူဖြစ်နိုင်ပါတယ်! ဒီသူ့အကြောင်း Story က အတော်လေးစိတ်ဝင်စားစရာကောင်းပြီး Programming ဟာ အမြဲတမ်း Creative Problem-solving နဲ့ Thinking Outside the Box ဖြစ်တယ်ဆိုတာကို ပြသပါတယ်။ +✅ **ကောင့်တွန့်မေးခွန်း**: အချိန်ပေး စူးစမ်းကြည့်ပါ – ကမ္ဘာ့ ပထမဆုံးကွန်ပျူတာ programmer ဖြစ်သူ ဘယ်သူလဲ? အကြံပေးတယ် – သူကို မမျှော်လင့်ထားသည့် ပုံစံတစ်ရပ်ဖြစ်နိုင်တယ်! သူ့နောက်ကွယ်ဇာတ်လမ်းဟာ လွန်စွာစိတ်ဝင်စားဖွယ်ကောင်းပြီး programming ဟာ ပြတ္တိဖြေရှင်းမှုနဲ့ ကန့်သတ်မှုအပြင်အဆင်များကို အမြဲတမ်းတွေးထားကြောင်း ပြောပြတယ်။ -### 🧠 **Check-in Time: သင့်ခံစားချက်က ဘယ်လိုလဲ?** +### 🧠 **စစ်ဆေးကြည့်ခန်း: သင့်ခံစားချက်** -**အချိန်ယူပြီး အတွေးအခေါ်တွေကို ပြန်လည်သုံးသပ်ပါ:** -- "ကွန်ပျူတာတွေကို အညွှန်းပေးတာ" ဆိုတဲ့အကြောင်းအရာကို အခုနားလည်သွားပြီလား? -- Programming နဲ့ Automation လုပ်ချင်တဲ့ နေ့စဉ်လုပ်ငန်းတစ်ခုကို စဉ်းစားနိုင်ပြီလား? -- Programming အကြောင်းအရာတွေနဲ့ ပတ်သက်ပြီး သင့်စိတ်ထဲမှာ ဘာတွေ မေးခွန်းထွက်လာနေလဲ? +**အချိန်နားလည်ပါ:** +- "ကွန်ပျူတာတွေကို လမ်းညွှန်ချက်ပြောခြင်း" အကြောင်းနားလည်သလား? +- နေ့စဉ်လုပ်ဆောင်ချက်တွေကို programming ဖြင့် автоматတပ်ပြီး ပိုအဆင်ပြေစေချင်တာ ရှိမလား? +- programming ပတ်သက်ပြီး စိတ်ထဲမှာ မေးခွန်းများ ရှိသေးပါသလား? -> **သတိထားပါ**: အချို့ Concept တွေက အခုချိန်မှာ မရှင်းလင်းသေးတာ သဘာဝအတိုင်းပါပဲ။ Programming ကို လေ့လာတာဟာ ဘာသာစကားအသစ်တစ်ခုကို လေ့လာတာနဲ့ တူတယ် – သင့် Brain က Neural Pathways တွေကို တည်ဆောက်ဖို့ အချိန်ယူရတယ်။ သင် အတော်လေးကောင်းပါတယ်! +> **မှတ်သားပါ**: အချို့စာပေများကို သက်ဆိုင်ရာညို့မှုပြုစေခြင်း ganzလေ့လာတဲ့အခါ နားလည်တော့မှာ မဖြစ်နိုင်ပါ။ Programming သင်ယူရတာ သမားရိုးကျ ဘာသာစကားသင်ယူခြင်းလိုပါ – ဦးနှောက်မှာ စနစ်ကျ ဦးတည်ချက်များ ဖန်တီးဖို့ အချိန်လိုပါတယ်။ သင်ကောင်းနေပါတယ်။ -## Programming Languages တွေက Magic အမျိုးမျိုးလိုပဲ +## Programming ဘာသာစကားတွေဟာ မတူညီတဲ့ ကြက်သွန်နီအဆီများလိုပဲ -အိုကေ၊ ဒီအကြောင်းကို ပြောရင် အနည်းငယ်ထူးဆန်းနေမယ်၊ ဒါပေမယ့် Stick လုပ်ပါ – Programming Languages တွေဟာ Music အမျိုးမျိုးလိုပဲ။ စဉ်းစားကြည့်ပါ – Jazz, Rock, Classical, Hip-hop တွေလိုပဲ၊ Language တစ်ခုစီမှာ သူ့ရဲ့ Vibe, Community, Mood နဲ့ Occasion တွေရှိတယ်။ +အိုကေ၊ ဒီဟာက ဗဟုသုတဖြစ်စေချင်ပါတယ်၊ programming ဘာသာစကားတွေဟာ ဂီတအမျိုးအစား မတူညီခြင်းနဲ့ တူတယ်။ သင်ကြားလိုက်ပါ – jazz က ကြမ်းတမ်းပြီး စတူးတစ်လို ရှုထောင့်ရှိတဲ့၊ rock က ပါဝါအပြည့်၊ classical က တိက်ပြီး စနစ်တကျ၊ hip-hop က ပြည့်စုံပြီး ရိုးရာစဉ်အဆက်အမြဲဖြစ်။ အသီးသီး ချစ်သူများ၊ သူတို့ရဲ့ထူးခြားသော သဘောတရားတစ်ခုစီရှိပြီး ကာလအမျိုးအစားအလိုက် သင့်တော်ပါတယ်။ -Programming Languages တွေက ဒီလိုပဲ! Climate Data အများကြီးကို Crunch လုပ်ဖို့ Language တစ်ခုကို သုံးမှာမဟုတ်ဘူး၊ Fun Mobile Game တစ်ခုကို Build လုပ်ဖို့ Language တစ်ခုကို သုံးမှာမဟုတ်ဘူး၊ Yoga Class မှာ Death Metal တီးတာလိုပဲ (အများစု Yoga Class မှာတော့ မဟုတ်ဘူး 😄). +Programming ဘာသာစကားတွေကလည်း တူတယ်! နာမ်ဘာနဲ့ သီချင်းတစ်ပုဒ်ထဲမှာ အသုံးပြုပြီး mobile game တစ်ခုက ဖန်တီးရင် သင့်အကြိုက်ဆုံး အသင်းအစစ်အမှန်တို့ ကို စုပေါင်းလိုက်ပါ။ -ဒါပေမယ့် ကျွန်တော့်ကို အတော်လေးအံ့ဩစေတဲ့အချက်က – Language တွေဟာ အတော်လေး သည်းခံပြီး Brilliant Interpreter တစ်ယောက်လိုပါပဲ။ သင့် Human Brain အတွက် သဘာဝအတိုင်း Feel ဖြစ်တဲ့အတိုင်း Idea တွေကို ပြောနိုင်ပြီး Computer Logic ကို Translate လုပ်ပေးတယ်။ "Human Creativity" နဲ့ "Computer Logic" နှစ်ခုလုံးကို Perfect Fluent ဖြစ်တဲ့ သူငယ်ချင်းတစ်ယောက်လိုပါပဲ – သူတို့က အပန်းမလွတ်ဘူး၊ Coffee Break မလိုဘူး၊ တစ်ခါတစ်ခါ မေးတဲ့မေးခွန်းကို ပြန်မေးတာကိုလည်း မစီရင်ဘူး! +ဒါပေမယ့် ငါအမြဲဘယ်တော့မှ မပျက်နေတာက ဒီဘာသာစကားတွေက ကမ္ဘာမှာ အကောင်းဆုံး အာရုံစိုက်ဆွေးနွေးသူတစ်ယောက်ကို သင့်ဘက်ကစားစေတယ်။ သင့်ရဲ့ လူသားစိတ်ကူးတွေကို နားလည်သလို ပြောကြားနိုင်ပြီး အဲဒီလို ပြောဆိုမှုတွေကို ၁ နဲ့ ၀ ထဲမှာ ပြန်လည်လိုက်စားပေးတယ်။ သင့်နှင့် အတူရှိတဲ့ သူငယ်ချင်းက "လူ့ဖန်တီးမှု" နဲ့ "ကွန်ပျူတာ သံသရာ" ကွဲပြားမှုကို အပြည့်အဝ နားလည်မြင်မြင်နေပြီး ကောင်းမွန်စွာ အားထုတ်ပေးတယ်။ သူတို့က မပင်ပန်း သောက်ရေ မလိုအပ်ဘဲ ထပ်ညွှန်ကြားမှု မှန်မှန် မရလည်လျှင်စာမေးခွန်းတစ်ခုအား မေးတာလည်း စီမံကြပါဘူး။ -### လူကြိုက်များတဲ့ Programming Languages နဲ့ သူတို့ရဲ့ အသုံးအများဆုံးနေရာ +### လူကြိုက်များတဲ့ Programming ဘာသာစကားများနှင့် အသုံးများမှု ```mermaid mindmap @@ -89,171 +88,296 @@ mindmap Web Development JavaScript Frontend Magic - Interactive Websites + အပြန်အလှန် ဝဘ်ဆိုက်များ TypeScript JavaScript + Types - Enterprise Apps + စီးပွားရေး လျှပ်စစ် Data & AI Python - Data Science - Machine Learning - Automation + အချက်အလက် သိပ္ပံ + စက်ရုပ် သင်ယူမှု + အလိုအလျောက်လုပ်ဆောင်မှု R - Statistics - Research + စံနှုန်းများ + သုတေသန Mobile Apps Java Android - Enterprise + စီးပွားရေး Swift iOS Apple Ecosystem Kotlin - Modern Android - Cross-platform + ခေတ်မီ Android + ပလက်ဖောင်းအလွှာများ Systems & Performance C++ - Games - Performance Critical + ဂိမ်းများ + အကျိုးသက်ရောက်မှု အရေးကြီး Rust - Memory Safety - System Programming + မှတ်ဥာဏ် လုံခြုံမှု + စနစ် ပရိုဂရမ်မင်း Go Cloud Services - Scalable Backend + လာမည့် ဘက်အင်ဒ် ``` - -| Language | Best For | Why It's Popular | +| ဘာသာစကား | သင့်တော်သော နယ်ပယ် | ဘာကြောင့် လူကြိုက်များတာလဲ | |----------|----------|------------------| -| **JavaScript** | Web development, user interfaces | Browsers မှာ Run လုပ်ပြီး Interactive Websites တွေကို Power လုပ်ပေးတယ် | -| **Python** | Data science, automation, AI | လွယ်ကူပြီး Powerful Libraries တွေရှိတယ် | -| **Java** | Enterprise applications, Android apps | Platform-independent ဖြစ်ပြီး Large Systems တွေအတွက် အတော်လေး Robust ဖြစ်တယ် | -| **C#** | Windows applications, game development | Microsoft Ecosystem အတွက် Support အတော်လေး Strong ဖြစ်တယ် | -| **Go** | Cloud services, backend systems | Fast, Simple ဖြစ်ပြီး Modern Computing အတွက် Design လုပ်ထားတယ် | +| **JavaScript** | ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု၊ အသုံးပြုသူအင်တာဖေ့ | Browser များတွင် စက်ခံအသွင့်ဖြစ်ပြီး အပြန်အလှန် ဆက်သွယ်မှုရှိသော ဝက်ဘ်ဆိုဒ်များ ဖန်တီးနိုင်သည် | +| **Python** | ဒေတာ သိပ္ပံ၊ အော်တိုမေရှင်၊ AI | လွယ်ကူပြတ်သားစွာ ဖတ်နိုင်ပြီး စွမ်းအားသာသနာတရားရှိသော စာကြည့်တိုက်များရှိသည် | +| **Java** | စက်မှုလုပ်ငန်းတို့၏ application များ၊ Android apps | အသုံးပြုနိုင်သည့် ပလက်ဖောင်းပေါ်မူတည်မှုမဟုတ်ပြီး ဂရုတစိုက်ကြီးမားသော စနစ်များအတွက် သင့်တော်သည် | +| **C#** | Windows application များ၊ ဂိမ်းဖွံ့ဖြိုးတိုးတက်မှု | Microsoft ပတ်ဝန်းကျင်အတွက် အားကောင်းသော ရရှိမှုရှိသည် | +| **Go** | Cloud ဝန်ဆောင်မှုများ၊ backend စနစ်များ | မြန်ဆန်ပြီး သောကများမရှိဘဲ မော်ဒန် ကွန်ပျူတာ အတွက် ဒီဇိုင်း ပြုလုပ်ထားသည် | + +### အဆင့်မြင့် နှင့် နိမ့်အဆင့် ဘာသာစကားများ + +ဒါက အမှန်တကယ် ငါစတင်သင်ယူတဲ့အချိန်မှာ ဦးနှောက်ပျက်စီးမှု ရှိခဲ့တဲ့ အကြောင်းအရာဖြစ်လို့၊ ငါ မှီဝဲပေးမယ့် အချက်မှာ ဒီလိုဖြစ်တယ် – နားလည်ဖို့ အနားမလွတ်ပါနဲ့! + +နိုင်ငံအသစ်တစ်ခုသို့ သင်သွားလာပြီးဘာသာစကား မတတ်တဲ့အချိန်မှာ အနီးဆုံး ရေချိုးခန်း ရှာဖွေဖို့လိုပါတယ် (ကျွန်တော်တို့အားလုံး ဒီအတွေ့အကြုံရှိဖူးကြတယ်မဟုတ်လား? 😅): + +- **နိမ့်အဆင့် programming** ဆိုတာ ဒေသခံစကားလုံးကို အလွန်အကျွံသိပြီး ကမ်းခြေဖျတ်ရာမှာ အရွယ်ရင့်ကြီးမားတဲ့အမျိုးသမီးနှင့် ဆက်ဆံနေသလို ဖြစ်ပါတယ်၊ ဒေသဆိုင်ရာ ရိုးရာစကားများ၊ ဝေါဟာရများနှင့် ယဥ်ကျေးမှု ရယ်သံများ အားလုံးကို သိကောင်းပြီး ထိရောက်စွာ ဆက်နွယ်နေနိုင်ပါတယ်... ကျွမ်းကျင်မှုရှိရင် တကယ်ပဲ နိုင်ပါတယ်! ဘာသာစကား မသိရင် အိမ်သာရှာဖို့ ပြဿနာတွေဖြစ်တတ်ပါတယ်။ + +- **အဆင့်မြင့် programming** ဆိုတာ ဒေသခံ သူငယ်ချင်းက နားလည်သလိုရှိရင်သေချာပါစေ။ "ကျွန်တော် အိမ်သာလိုအပ်နေတယ်" ဆိုပြီး အင်္ဂလိပ်နဲ့ ပြောပြလိုက်ရင် တစ်ဖက်က ကောင်းမွန်စွာ ဘာသာပြန်ပေးပြီး၊ နားမလည်တဲ့ ဦးနှောက်ကို ကြည်ဖြူစေပြီး လမ်းညွှန်ပေးပါမယ်။ + +Programming စကားဖြင့်။ +- **နိမ့်အဆင့် ဘာသာစကားများ** (Assembly သို့မဟုတ် C ကဲ့သို့) က ကွန်ပျူတာရဲ့ Hardware နဲ့ အလွန်အသေးစိတ် စကားပြောခွင့် ပေးပေမယ့် စက်လို ကျွမ်းကျင် ရှိရမယ်ဆိုတဲ့ စိတ်ဖြေဦး အလိုရှိပါတယ်။ +- **အဆင့်မြင့် ဘာသာစကားများ** (JavaScript, Python, C#) က သင့်ကို လူတစ်ယောက်လို သဘောထားနိုင်စေလို့၊ နောက်ကွယ်မှာ စက်စကားပြောဆိုမှုကို ကိုင်တွယ်နေပါတယ်။ ဤဘာသာစကားတွေမှာ လူအသစ်တွေအတွက် နုံလမ်းကောင်း ကူညီပေးသူတွေ့ရှိနိုင်ပါတယ်။ + +ငါ Suggest လုပ်မယ့် သင်စတင်သင်ယူဖို့ ဘာသာစကားက ဘယ်ဟာလဲ သိချင်လား? 😉 အဆင့်မြင့် ဘာသာစကားများက ကိုယ့်ကိုတတ်မြောက်မှုပိုအဆင်ပြေသလို ဟန်ချက်မှန်တဲ့ training wheels ဖြစ်ပါတယ်။ + +```mermaid +flowchart TB + A["👤 လူ၏အတွေး:
'ကျွန်တော် Fibonacci ကိန်းဂဏန်းတွေတွက်ချင်တယ်'"] --> B{ဘာသာစကားအဆင့် ရွေးချယ်ပါ} + + B -->|အဆင့်မြင့်| C["🌟 JavaScript/Python
ဖတ်ရလွယ်ကူပြီး ရေးရလွယ်"] + B -->|အဆင့်နိမ့်| D["⚙️ Assembly/C
တိုက်ရိုက်ဟာ့ဒ်ဝဲထိန်းချုပ်ခြင်း"] + + C --> E["📝 ရေးပါ: fibonacci(10)"] + D --> F["📝 ရေးပါ: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 ကွန်ပျူတာနားလည်မှု:
ဘာသာပြန်သည်ရှုပ်ထွေးမှုကိုကိုင်တွယ်သည်"] + F --> G + + G --> H["💻 ထိုက်တန်သော ရလဒ်:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +###အဆင့်မြင့် ဘာသာစကားများ ဘာကြောင့် လူကြိုက်များတယ်ဆိုတာ ငါပြမယ် + +ကောင်းပြီ၊ ငါ သင့်ကို အဆင့်မြင့် ဘာသာစကားကြောင့် စိတ်ပျော်ရွှင်ခဲ့တာကို ပုံမှန်ဖော်ပြထားတဲ့ နမူနာတစ်ခု ပြမယ့်အခါ စိတ်ညစ်မိသွားစေမှာ မဟုတ်ပါနဲ့။ ငါ့ကို တစ်ချက် ကတိပေးပါ။ ပထမဆုံးအချို့ code ကို မြင်ရင် စိုးရိမ်မထားပါနဲ့! ဒီအရာက စိတ်ဖိစီးမှု ဖြစ်စေလိုလို့ပါ။ + +ငါတို့ နှစ်မျိုး ကွဲပြားတာနဲ့ ရေးထားတဲ့ ပထမ Fibonacci စာရင်း ကို ကြည့်ပါမယ် – အကြိမ်ရေ သင်္ချာ ရုပ်သဖွယ်ပုံစံ ဖြစ်ပြီး နံပါတ်တစ်ခုက အရင်နံပါတ် နှစ်ခု ပေါင်းထုတ်ထားတာပါ – 0, 1, 1, 2, 3, 5, 8, 13... (ရှစ်ရှည်သတင်းတစ်ခု – ဒီပုံစံတွေဟာ သဘာဝမှာ အပြည့်အဝ တွေ့ရှိနိုင်တယ် – နေကြာစေ့များ၊ ရေပန်းပျိုး များ၊ ကြယ်စု သဘာဝဖွဲ့စည်းမှုများစသဖြစ်!) + +ကွဲပြားချက်ကို ကြည့်ဖို့ ပြင်ဆင်ပါ! + +**အဆင့်မြင့် ဘာသာစကား (JavaScript) – လူသားအတွက် ရိုးရှင်းချောမွေ့:** + +```javascript +// အဆင့် ၁: အခြေခံ Fibonacci ပြင်ဆင်မှု +const fibonacciCount = 10; +let current = 0; +let next = 1; + +console.log('Fibonacci sequence:'); +``` + +**ဒီကုဒ်က ဘာလုပ်တယ်ဆိုတာ:** +- **fixed constant** တစ်ခု သတ်မှတ်သည်။ ထို constant က ကျွန်တော်တို့ လိုအပ်သည့် Fibonacci နံပါတ်အရေအတွက်ဖြစ်သည်။ +- **variables နှစ်ခု စတင်ပြီး** လက်ရှိနံပါတ်နှင့် နောက်နံပါတ်ကို ချိန်ညှိထားသည်။ +- **စတင်တန်ဖိုးများ** (0 နှင့် 1) ကို Fibonacci ပုံစံအတိုင်း သတ်မှတ်ထားသည်။ +- **output အထွက်စာသားကို** Header အဖြစ် ပြသသည်။ + +```javascript +// အဆင့် ၂: Loop ဖြင့် အလိုက်လိုက်စဉ်ကို ဖန်တီးပါ +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // စဉ်ထဲရှိ နောက်ထပ် နံပါတ်ကို တွက်ချက်ပါ + const sum = current + next; + current = next; + next = sum; +} +``` -### High-Level vs. Low-Level Languages +**ဒီမှာ ဖြစ်ပျက်တာကို ခွဲခြမ်းတော့:** +- **for loop** ဖြင့် လုပ်ဆောင်ချက်ထိတိုင် စဥ်စားသည်။ +- **number နှင့် position** တို့ကို Template literal ဖြင့် ပြသသည်။ +- **နောက်ထပ် Fibonacci နံပါတ်ကို** လက်ရှိနံပါတ်နှင့် နောက်နံပါတ် ပေါင်းပြီးတွက်ချက်သည်။ +- **variables ကို update** ပြုလုပ်၍ အောက်တန်းဟန်ပြုနေသည်။ + +```javascript +// အဆင့် ၃: ခေတ်မီသော လုပ်ဆောင်မှုနည်းလမ်း +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; -အိုကေ၊ ကျွန်တော် Programming ကို စတင်လေ့လာတဲ့အချိန်မှာ Brain Break ဖြစ်စေတဲ့ Concept တစ်ခုက ဒီပါ၊ ဒါကြောင့် ကျွန်တော့်ကို အတော်လေးအထောက်အကူဖြစ်စေတဲ့ Analogy ကို မျှဝေပါမယ် – သင့်အတွက်လည်း အထောက်အကူဖြစ်မယ်လို့ မျှော်လင့်ပါတယ်! +// အသုံးပြုမှုဥပမာ +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` -Imagine လုပ်ပါ – သင် ဘာသာစကားမပြောတတ်တဲ့ နိုင်ငံတစ်ခုကို သွားရောက်ပြီး အရေးကြီး Bathroom ရှာဖွေရတဲ့အချိန် (အားလုံးက ဒီလိုဖြစ်ဖူးတယ်၊ ဟုတ်လား? 😅): +**အထက်ပါနမူနာမှာ:** +- **Modern arrow function syntax** ကို အသုံးပြု၍ ပြန်လည်သုံးနိုင်သော function တစ်ခု ဖန်တီးထားသည်။ +- **Array တစ်ခုဆောက်ပြီး** နံပါတ်များစွာကို တစ်ခါတည်း တစ်ခုစီပြရန်တင်မထားဘဲ သိမ်းဆည်းထားသည်။ +- **Array index ကို အသုံးပြု၍** နောက်ဆုံးနံပါတ်များမှ အသစ်ထုတ်ယူသည်။ +- **ပြန်လည် Return** လုပ်၍ application တစ်ခုတွင် အလွယ်တကူအသုံးပြုနိုင်သည်။ + +**နိမ့်အဆင့် ဘာသာစကား (ARM Assembly) – ကွန်ပျူတာအတွက် သင့်တော်:** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` -- **Low-level programming** ကတော့ ဒေသခံ Dialect ကို အတော်လေး Fluently ပြောတတ်ပြီး Cultural References, Local Slang, Inside Jokes တွေကို အသုံးပြုနိုင်တဲ့အတိုင်း ဖြစ်တယ်။ အတော်လေး Impression ဖြစ်ပြီး အလွန်အကျွမ်းကျင်တယ်... ဒါပေမယ့် Bathroom ရှာဖွေရတဲ့အချိန်မှာတော့ အတော်လေး Overwhelming ဖြစ်တယ်။ +JavaScript ဗားရှင်းဟာ အင်္ဂလိပ်လို ပုံမှန် နည်းလမ်းနဲ့ ဖတ်ရပြီး Assembly ဗားရှင်းကတော့ ကွန်ပျူတာ processor ကို တိုက်ရိုက် ထိန်းချုပ်ဖို့ မျိုးစုံ ကုတ်များမှာ စာလုံးပေါင်းတွေ အသုံးပြုထားတာ တွေ့ရတယ်။ နှစ်ခုလုံးက တစ်ခုတည်းတဲ့ အလုပ်လုပ်ပေးတာဖြစ်ပေမယ့် အဆင့်မြင့် ဘာသာစကားက လူသားတွေအတွက် ပိုလွယ်ကူ နားလည်ရေး၊ ရေးဖွဲ့ရေးနဲ့ ပြုပြင်ပြောင်းလဲရေး အဆင်ပြေပါတယ်။ -- **High-level programming** ကတော့ Amazing Local Friend တစ်ယောက်လိုပါပဲ။ "ကျွန်တော် Bathroom ရှာဖွေနေ -- **မှတ်ချက်များ**: အဆင့်မြင့်ဘာသာစကားများသည် ကုဒ်ကို ကိုယ်တိုင်ရှင်းပြနိုင်သော အကြောင်းအရာများကို ရှင်းလင်းစွာ ရေးသားရန်အားပေးသည်။ -- **ဖွဲ့စည်းမှု**: JavaScript ၏ သဘောတရားစဉ်ဆက်လက်မှုသည် လူသားများက ပြဿနာများကို အဆင့်ဆင့်တွေးဆလိုက်သည့် နည်းလမ်းနှင့် ကိုက်ညီသည်။ -- **ထိန်းသိမ်းမှု**: အခြေအနေအမျိုးမျိုးအတွက် JavaScript ဗားရှင်းကို အဆင်ပြေစွာ ပြင်ဆင်နိုင်သည်။ +**အဓိက ကွာခြားချက်များကို သင်တွေ့ရှိမှာ**: +- **ဖတ်ရှုရလွယ်မှု**: JavaScript သည် `fibonacciCount` ကဲ့သို့ ဖော်ပြချက်ပြည့်ဝသော နာမည်များကို အသုံးပြုသောအခါ Assembly သည် `r0`, `r1` ကဲ့သို့ လျှို့ဝှက် အမှတ်အသားများကို အသုံးပြုသည် +- **မှတ်ချက်များ**: အဆင့်မြင့် ဘာသာစကားများတွင် ကိုးကားချက်ရှင်းလင်းမှုများအား စွမ်းအားပေးကာ ကုဒ်ကို ကိုယ်တိုင်စာရွက်စာတမ်းဖြစ်လာစေသည် +- **ဖွဲ့စည်းပုံ**: JavaScript ၏ ယောဂျနည်းလိုင်းသည် လူတစ်ယောက်သည် ပြဿနာများကို တစ်ဆင့်ချင်းစီ အတွေးအခေါ်ပုံစံနှင့် ကိုက်ညီသည် +- **စောင့်ရှောက်မှု**: မတူညီသော လိုအပ်ချက်များအတွက် JavaScript ဗားရှင်းကို အဆင်ပြေစွာ နှင့်ရှင်းလင်းစွာ ပြင်ဆင်နိုင်သည် -✅ **Fibonacci အစဉ်အတိုင်းအတာအကြောင်း**: ဒီအလှပဆုံးနံပါတ်ပုံစံ (နံပါတ်တစ်ခုစီသည် အရင်နံပါတ်နှစ်ခု၏ စုစုပေါင်းဖြစ်သည်: 0, 1, 1, 2, 3, 5, 8...) သဘာဝတွင် *အရမ်း* တွေ့ရပါတယ်! သင်သည် ဒါကို နေကြာပန်းပုံစံများ၊ ပိတောက်ပန်းပုံစံများ၊ nautilus အခွံပုံစံများ၊ နှင့် သစ်ပင်အခွံပုံစံများတွင် တွေ့ရပါမည်။ သဘာဝ၏ အလှတရားကို ဖန်တီးရန် သင်္ချာနှင့် ကုဒ်က အကြောင်းအရာများကို နားလည်စေပြီး ပြန်ဖန်တီးနိုင်သည်ဟု တွေးမိတာ အရမ်းအံ့ဩစရာပါပဲ! +✅ **Fibonacci အစဉ်အလာအကြောင်း**: ဒီအလွန်အမင်းလှပသော အရေအတွက်ပုံစံ (အရေအတွက်တစ်ခုချင်းစီသည် ၎င်းမတိုင်မှီနှစ်ခု၏ စုစုပေါင်းနှင့်တူသည်: 0, 1, 1, 2, 3, 5, 8...) သဘာဝတွင် တကယ်အချိန်တိုင်း မြင်တွေ့ရသည်! သင့်သည် နေကြာပန်းပန်းသီးများ၏ စနစ်, ရှေးဟောင်းပင်ပန်းပုံစံများ, nautilus သားလိပ်များ၏လွှမ်းမိုးပုံ, သစ်ပင်ခွံပေါ်နည်းလမ်းများတွင် လည်းတွေ့ရှိနိုင်သည်။ သင်္ချာနှင့် ကုဒ်က သဘာဝ၌ အလှတရားဖန်တီးရန်အသုံးပြုသည့် ပုံစံများကို နားလည်၍ ပြန်လည်ဖန်တီးနိုင်မှု မျှော်လင့်စရာအကြီးကောင်းပါတယ်! -## မျိုးစုံအံ့ဩမှုကို ဖန်တီးပေးသော အခြေခံအဆောက်အအုံများ +## သို့သော အခြေခံအစိတ်အပိုင်းများ -အိုကေ၊ programming languages တွေကို လုပ်ဆောင်ပုံကို ကြည့်ပြီးပြီဆိုတော့ အခုတော့ ဘာသာစကားတိုင်းမှာပါဝင်တဲ့ အခြေခံအစိတ်အပိုင်းတွေကို ခွဲခြမ်းရှင်းလင်းကြည့်ရအောင်။ ဒါတွေကို သင်အကြိုက်ဆုံးဟင်းချက်နည်းမှာပါဝင်တဲ့ အရေးကြီးအပစ္စည်းတွေလို တွေးပါ – တစ်ခုချင်းစီက ဘာလုပ်ပေးနိုင်တယ်ဆိုတာ နားလည်ပြီးရင် ဘာသာစကားမဆို ကုဒ်ကို ဖတ်နိုင်၊ ရေးနိုင်ဖြစ်သွားပါလိမ့်မယ်! +အိုကေ၊ လက်ရှိ programming ဘာသာစကားများက ဘယ်လို ရှိနေတယ်ဆိုတာတွေ့ပြီးပြီဆိုတော့၊ ကြည့်ပြီးသော အခြေခံအပိုင်းများကို သွားကြည့်ကြမယ်။ သင်နှစ်သက်သည့် ဟင်းချက်ချက်နည်းမှာ မည်သည့်ပစ္စည်းတစ်ခုချင်းစီသည် ဘယ်လိုလုပ်သလဲ တွေ့ရတာလိုမျိုး - အဲဒါကို နားလည်ပြီးပါက ဘာသာစကား မဆို ကိုးကားရေးသားနိုင်ပြီဖြစ်သည်။ -ဒါဟာ programming ၏ သဒ္ဒါကို သင်ယူနေသလိုပါပဲ။ ကျောင်းမှာ နာမ်၊ ကြိယာ၊ စာကြောင်းတွေကို ဘယ်လိုချိတ်ဆက်ရမယ်ဆိုတာ သင်ယူခဲ့တဲ့အခါကို သတိရပါ။ Programming က သူ့သဒ္ဒါကိုယ်စီရှိပြီး အင်္ဂလိပ်သဒ္ဒါထက် အလွန်လွယ်ကူပြီး အလွန်လက်ခံနိုင်စွမ်းရှိပါတယ် 😄 +ဒါဟာ programming ရဲ့ ဝေါဟာရကို သင်ယူနေသလိုပါ။ ကျောင်းတုန်းက နာမ်၊ ကြိယာနဲ့ စာကြောင်းဖွဲ့စည်းပုံကို သင်ဖတ်ခဲ့တဲ့အခါ ကြားဖူးပါလား။ programming ရဲ့ ကိုယ်ပိုင် grammar ရှိပြီး၊ တကယ်說ဘာသာ စကားgrammarထက် ပိုသေချာပြတ်သားပြီး ကောင်းတာပါ! 😄 -### Statements: အဆင့်ဆင့်ညွှန်ကြားချက်များ +### ကြေညာချက်များ: အဆင့်လိုက် အချက်ပြချက်များ -**Statements** တွေက သင့်ကွန်ပျူတာနဲ့ စကားပြောတဲ့ စာကြောင်းတစ်ကြောင်းလိုပါပဲ။ Statement တစ်ခုစီက ကွန်ပျူတာကို တစ်ခုခုလုပ်ဖို့ ညွှန်ကြားပါတယ်၊ ဥပမာ "ဒီမှာ ဘယ်ဘက်ကိုလှည့်ပါ," "အနီရောင်မီးမှာရပ်ပါ," "ဒီနေရာမှာ ကားရပ်ပါ" လိုမျိုး။ +**ကြေညာချက်များ** ဆိုတာက ကွန်ပျူတာနဲ့ စကားပြော တစ်ကြောင်းလိုပါပဲ။ ကြေညာချက်တိုင်းက ကွန်ပျူတာကို တစ်ချက်လောက် အလုပ်လုပ်စေဖို့ လိုက်နာစေသည်။ ဥပမာ- "ဒီမှာဘယ်ဘက်ကို သွားပါ", "နီရောင်မီးမှာ ရပ်ပါ", "ဒီနေရာမှာ ကားရပ်ပါ။" -Statements တွေက အရမ်းဖတ်လွယ်တဲ့အချက်ကို သင်ကြိုက်မိမှာပါ။ ဒီကိုကြည့်ပါ: +ကြေညာချက်တွေရဲ့ ဖတ်ရှုရလွယ်မှုက ကောင်းတဲ့အရာပါ။ ဒီကို ကြည့်ပါ: ```javascript -// Basic statements that perform single actions +// တစ်ခုတည်းသော လုပ်ဆောင်ချက်များ ပြုလုပ်သော အခြေခံ ပြောကြားချက်များ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**ဒီကုဒ်က ဘာလုပ်သလဲဆိုရင်:** -- **Constant variable** တစ်ခုကို အသုံးပြုသူရဲ့နာမည်ကို သိမ်းဆည်းရန် ကြေညာပါ။ -- **Console output** မှာ အကြိုဆိုစာကို ပြပါ။ -- **သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်** ရလဒ်ကို တွက်ချက်ပြီး သိမ်းဆည်းပါ။ + +**ဒီကုဒ်ရဲ့ လုပ်ဆောင်ချက်များ:** +- အသုံးပြုသူနာမည်ကို သိမ်းဆည်းရန် တည်ငြိမ်သော မရေပြားတစ်ခုကို ကြေညာသည် +- စာလုံးဖတ်ထွက်ထံ အကြောင်းကြားစာတစ်ခု ပြသသည် +- သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်ရလဒ်ကိုတွက်ချက်ပြီး သိမ်းဆည်းသည် ```javascript -// Statements that interact with web pages +// ဝက်ဘ်စာမျက်နှာများနှင့် အပြန်အလှန်ဆက်ဆံသော ကြေညာချက်များ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` + +**အဆင့်လိုက် အကြောင်းအရာများ:** +- ဝဘ်စာမျက်နှာ၏ ခေါင်းစဉ်ကို ပြင်ဆင်သည် (ဘရောက်ဇာတဘ်တွင် ပြသသော) +- စာမျက်နှာ၏ နောက်ခံအရောင်ကို ပြောင်းသည် -**အဆင့်ဆင့်လုပ်ဆောင်မှု:** -- **Webpage title** ကို ပြောင်းလဲပါ။ -- **Page body** ရဲ့ နောက်ခံအရောင်ကို ပြောင်းလဲပါ။ +### အမျိုးအစားများ: သင့်ကိုယ်ပိုင် မှတ်ဉာဏ်စနစ် -### Variables: သင့်ကုဒ်ရဲ့ မှတ်ဉာဏ်စနစ် +အိုကေ၊ **အမျိုးအစားများ** ဟာ ကျွန်ုပ်အတွက် သင်ကြားရတာ အရမ်းနှစ်သက်တဲ့အကြောင်းအရာတစ်ခုပါ၊ ဒါဟာ သင့်နေ့စဉ်အသုံးပြုတာတွေနဲ့ သက်ဆိုင်တယ်ဆိုတော့! -**Variables** တွေက သင်နေ့စဉ်အသုံးပြုနေတဲ့ အရာတွေနဲ့ အလွန်တူတဲ့အတွက် သင်ယူရတာ အရမ်းပျော်စရာကောင်းပါတယ်! +လူမှုဆက်သွယ်ရေးနံပါတ်စာရင်းကို စဉ်းစားကြည့်ပါ။ မင်း `မိခင်`, `အကောင်းဆုံးသူငယ်ချင်း`, ဒါမှမဟုတ် `နောက်နေ့၂နာရီထိ ပို့ဆောင်တဲ့ ပီဇာဆိုင်` စတဲ့ နာမ်များသိမ်းဆည်းထားပြီး နံပါတ်တွေကို မမှတ်မိဘဲ ဖုန်းကို ယူထားတယ်။ အမျိုးအစားတွေကလည်း ဒီလိုပါပဲ။ ဒါတွေက သင့်အစီအစဉ်မှာ ဒေတာများကို သိမ်းဆည်းပြီး နောက်မှ အမှန်တကယ် နာမည်နဲ့ ခေါ်ယူနိုင်တဲ့ labeled container တွေပဲ။ -သင့်ဖုန်းရဲ့ ဆက်သွယ်ရန်စာရင်းကို စဉ်းစားပါ။ လူတိုင်းရဲ့ဖုန်းနံပါတ်ကို မှတ်မထားဘဲ "မေမေ," "အကောင်းဆုံးသူငယ်ချင်း," "Pizza ဆိုင်" လို့ သိမ်းထားပြီး ဖုန်းက အမှန်တကယ်နံပါတ်ကို မှတ်ထားပေးပါတယ်။ Variables တွေက အတိအကျ ဒီလိုပဲ လုပ်ပါတယ်! Variables တွေက သင့်ကုဒ်မှာ အချက်အလက်တွေကို သိမ်းဆည်းပြီး နောက်ပိုင်းမှာ အလွယ်တကူ ပြန်ယူနိုင်တဲ့ အမည်တစ်ခုနဲ့ label လုပ်ထားတဲ့ အထုပ်တွေလိုပါပဲ။ +အလွန် အထူးသဖြင့်- အမျိုးအစားတွေ ပြောင်းလဲနိုင်တာကြောင့် အလွယ်တကူ အသစ် ပြင်ဆင်ပေးလို့ရတယ် (အဲဒီမှ "variable" ဆိုတဲ့အမည်မျိုးပဲ)။ မင်းအသစ်ကောင်းတဲ့ ပီဇာဆိုင်ကို ရှာတွေ့ရင် အလွယ်တကူ အမျိုးအစားတူ ပြင်နိုင်တယ်။ -Variables တွေက သင့်ကုဒ်အတွင်းမှာ အခြေအနေအလိုက် ပြောင်းလဲနိုင်ပါတယ်။ Pizza ဆိုင်ကို အကောင်းဆုံးဆိုင်တစ်ခုကို ရှာတွေ့တဲ့အခါ update လုပ်သလိုပဲ၊ Variables တွေက သင့်ကုဒ်မှာ အချက်အလက်အသစ်တွေကို update လုပ်နိုင်ပါတယ်။ - -ဒီလိုရိုးရှင်းတဲ့အရာကို ကြည့်ပါ: +ဒီအတိုင်း လွယ်ကူစွာရှင်းပြမယ်: ```javascript -// Step 1: Creating basic variables +// အဆင့် ၁: အခြေခံရင်းနှီးသတ်မှတ်ချက်များ ဖန်တီးခြင်း const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**ဒီအချက်တွေကို နားလည်ပါ:** -- **Const variables** တွေကို unchanging values သိမ်းဆည်းရန် အသုံးပြုပါ။ -- **Let** ကို သင့်ကုဒ်အတွင်းမှာ ပြောင်းလဲနိုင်တဲ့ values တွေအတွက် အသုံးပြုပါ။ -- **Strings, numbers, booleans** စတဲ့ data types တွေကို assign လုပ်ပါ။ -- **Descriptive names** တွေကို အသုံးပြုပါ။ + +**သဘောထားများ သဘောပေါက်ခြင်း:** +- `const` ကို အသုံးပြုပြီး မပြောင်းလဲနိုင်သော တန်ဖိုးများ သိမ်းဆည်းခြင်း +- `let` ကို အသုံးပြုပြီး အလုပ်အပြောင်းအလဲရှိဉာဏ်ပညာတန်ဖိုးများကို သိမ်းဆည်းခြင်း +- အမျိုးအစား များ ချိန်ညှိခြင်း: စာသားများ, နံပါတ်များ, boolean (true/false) +- အကြောင်းဖော်ပြသော နာမည်များ ရွေးချယ်ခြင်း ```javascript -// Step 2: Working with objects to group related data +// အဆင့် ၂: သက်ဆိုင်ရာဒေတာများကို အုပ်စုဖွဲ့ရန် အရာဝတ္ထုများနှင့် အလုပ်လုပ်ခြင်း const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**ဒီမှာ:** -- **Object** တစ်ခုကို ဖန်တီးပြီး သက်ဆိုင်ရာ အချက်အလက်တွေကို အုပ်စုဖွဲ့ထားပါ။ -- **Key-value pairs** တွေကို အသုံးပြုပြီး အချက်အလက်တွေကို ရှင်းလင်းစွာ label လုပ်ပါ။ + +**အထက်ပါ၌:** +- ဆက်စပ်သော ရာသီဥတုဆိုင်ရာ ဥပမာတစ်ခုကို အသုံးပြုအရာအား ဆောက်လုပ်သည် +- အချက်အလက်များစွာကို တစ်ခုတည်းသော အမျိုးအစား အောက်တွင် စုစည်းသည် +- key-value စနစ်ဖြင့် တစ်စိတ်တစ်ပိုင်း ငြင်းသာတပ်၍ ဖော်ပြသည် ```javascript -// Step 3: Using and updating variables +// အဆင့် ၃: မျဉ်းပြောင်းများကို အသုံးပြုခြင်းနှင့် အပ်ဒိတ်လုပ်ခြင်း console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// ပြောင်းလဲနိုင်သော မျဉ်းပြောင်းများကို အပ်ဒိတ်တင်ခြင်း currentWeather = "cloudy"; temperature = 68; ``` - -**ဒီအပိုင်းကို နားလည်ပါ:** -- **Template literals** ကို `${}` syntax နဲ့ အသုံးပြုပါ။ -- **Dot notation** ကို အသုံးပြုပြီး object properties တွေကို access လုပ်ပါ။ -- **Let variables** တွေကို update လုပ်ပါ။ -- **Multiple variables** တွေကို ပေါင်းစပ်ပြီး အဓိပ္ပါယ်ရှိတဲ့ messages ဖန်တီးပါ။ + +**အပိုင်းတစ်ခုချင်းစီ နားလည်ခြင်း:** +- template literals `${}` နယ်နိမိတ်များဖြင့် သတင်းအချက်အလက် ပြသခြင်း +- dot notation (`weatherData.windSpeed`) ဖြင့် object property များ ထိန်းသိမ်းတွက်ချက်ရန် +- `let` ဖြင့် ကြေညာထားတဲ့ variable များကို ပြင်ဆင်ခြင်း +- မျိုးကြီးတူ variable များ ပေါင်းစပ်ပြီး ဆက်စပ်တန်ဖိုးများ ဖန်တီးခြင်း ```javascript -// Step 4: Modern destructuring for cleaner code +// ခြေလှမ်း ၄: ပိုသန့်ရှင်းသောကုဒ်အတွက်ခေတ်မီသောပျိုးပင်ခြင်း const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**သိထားရန်လိုအပ်ချက်များ:** +- destructuring assignment ဖြင့် object-properties ထွက်ယူခြင်း +- object keys နာမည်များနှင့် အလိုအလျောက် variable အသစ် ဖန်တီးခြင်း +- dot notation အလွန် မကြာခဏ သုံးခြင်း မလိုအပ်အောင် code ရိုးရှင်းစေခြင်း -**သင်သိထားရမယ့်အချက်များ:** -- **Destructuring assignment** ကို အသုံးပြုပြီး object properties တွေကို extract လုပ်ပါ။ -- **Object keys** နဲ့ အမည်တူတဲ့ variables တွေကို auto-create လုပ်ပါ။ -- **Dot notation** ကို မကြာခဏအသုံးပြုရတာကို ရှောင်ရှားပါ။ +### ထိန်းချုပ်မှု လည်ပတ်မှု: သင့်အစီအစဉ်ကို စဉ်းစားကောင်းစေခြင်း -### Control Flow: သင့်ကုဒ်ကို စဉ်းစားစေခြင်း +အိုကေ၊ ဒီမှာ programming က အံ့သြစရာအမြင့်ဆုံး ဖြစ်တာပါပဲ! **ထိန်းချုပ်မှု လည်ပတ်မှု** ဆိုတာ သင့်အစီအစဉ်ကို သင်လုန့်တဲ့အတိုင်း ဖြစ်ထွန်းအောင် စဉ်းစားသော နည်းလမ်းများ သင်ကြားပေးခြင်းပါ။ -ဒီမှာတော့ programming က အရမ်းအံ့ဩစရာကောင်းတဲ့နေရာကို ရောက်လာပါပြီ! **Control flow** က သင့်ကုဒ်ကို အတိအကျဆုံးဆုံးဖြတ်ချက်တွေကို လုပ်နိုင်အောင် သင်ပေးတာပါ။ +မနက်ဖြန်မိုးရွာရင် ထီးယူမယ်။ အေးမြေလို့ ဇက်ကတ်ဝတ်မယ်။ နောက်ကျသွားရင် ထမင်းမစားဘဲ ကော်ဖီယူမယ်ဆိုတဲ့ logic ကို စဉ်းစားပါ။ မိမိဘက်ဝဲတွင် ထို if-then လိုက်နာမှု ပုံစံများကို နေ့စဉ် ဒါရိုက်စရာမရှိဘဲ အလုပ်လုပ်နေတယ်! -ဥပမာ၊ ဒီမနက်မှာ သင် "မိုးရွာရင် ထီးယူမယ်။ အေးရင် အင်္ကျီဝတ်မယ်။ နောက်ကျနေရင် မနက်စာကျော်ပြီး coffee ယူမယ်" လို့ စဉ်းစားခဲ့ရတယ်ဆိုပါစို့။ သင့်ဦးနှောက်က ဒီလို if-then logic ကို အလိုအလျောက် လိုက်နာပါတယ်။ +ဒါကြောင့် ကုဒ်များက ရိုးစွဲသော စာရိုက်မှု မဟုတ်ဘဲ တကယ်သိပ္ပံရပ်မှန်ပြီး အသက်ရှင်လှုပ်ရှားသော ဇာတ်ကောင်တွေလို ဖြစ်စေတယ်။ အချက်အလက်များကို တွက်ချက်ပြီး ရလဒ်ထွက်အောင် လုပ်ဆောင်တယ်! သင့်အစီအစဉ်ကို စိတ်ဥာဏ်ရှိသော နက်နဲတဲ့ ဦးနှောက်တစ်ခု ပေးပြီး ပြောင်းလဲမှုများနှင့် ဆုံးဖြတ်ချက်များ လုပ်နိုင်စေပါတယ်။ -ဒီလို conditional logic တွေက သင့်ကုဒ်ကို အသုံးပြုသူအတွက် အကောင်းဆုံးအတွေ့အကြုံပေးနိုင်အောင် အခြေအနေအလိုက် ပြောင်းလဲနိုင်စေပါတယ်။ +အဲဒါက ဘယ်လိုကောင်းမြတ်နိုင်မလဲ၊ ကြည့်ပါ: ```javascript -// Step 1: Basic conditional logic +// အဆင့် ၁: မူလအခြေအနေဆိုင်ရာ ရွေးချယ်မှုရေးရာ ထောက်ခံချက် const userAge = 17; if (userAge >= 18) { @@ -263,15 +387,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**ဒီကုဒ်က ဘာလုပ်သလဲဆိုရင်:** -- **Age** ကို စစ်ဆေးပြီး မဲပေးနိုင်မှုကို စစ်ဆေးပါ။ -- **Condition result** အပေါ်မူတည်ပြီး ကုဒ်အပိုင်းတွေကို run လုပ်ပါ။ -- **Voting eligibility** အတွက် ကျန်ရှိတဲ့အချိန်ကို တွက်ချက်ပြီး ပြပါ။ -- **Scenario တစ်ခုစီအတွက် feedback** ပေးပါ။ + +**ဒီကုဒ်လုပ်တာက:** +- အသုံးပြုသူအသက်ကို မဲပေးခွင့်လိုအပ်ချက်နှင့် စစ်ဆေးသည် +- နောက်ဆုံးရလဒ်အပေါ် အခြေခံကာ ကွဲပြားသည့် code block များ ကို လုပ်ဆောင်သည် +- အသက် ၁၈ နှုတ်မပြည့်လျှင် မဲပေးခွင့် ရရှိမည့် အချိန်ကို တွက်ပြီး ပြသသည် +- တခြားအခြေအနေများအတွက် ထိရောက်သော အကြံပြုချက်များ ထောက်ပံ့ပေးသည် ```javascript -// Step 2: Multiple conditions with logical operators +// အဆင့် ၂: ဆိုက်ငံ့လှည့်ခြင်းများနှင့်အတူ မျိုးစုံထားသော အခြေအနေများ const userAge = 17; const hasPermission = true; @@ -283,26 +407,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**ဒီမှာဖြစ်ပျက်တာကို ခွဲခြမ်းကြည့်ပါ:** -- **Conditions** တွေကို `&&` operator နဲ့ ပေါင်းစပ်ပါ။ -- **Else if** ကို အသုံးပြုပြီး အခြေအနေအမျိုးမျိုးကို စီမံပါ။ -- **Final else statement** ကို အသုံးပြုပြီး မျှော်လင့်မထားတဲ့အခြေအနေကို handle လုပ်ပါ။ -- **Feedback** ကို scenario တစ်ခုစီအတွက် ရှင်းလင်းစွာပေးပါ။ + +**မှတ်ချက်များ:** +- `&&` (နှင့်) ရိုးရာ operator ဖြင့် အခြေအနေများ ပေါင်းစပ်ခြင်း +- မျိုးစုံအခြေအနေများအတွက် `else if` ဖြင့် အဆင့်တန်းဖွဲ့ခြင်း +- နောက်ဆုံးတွင် `else` ဖြင့် အခြေအနေ မမှတ်သားဘဲ ဖြစ်နိုင်ခြေ ချုပ်ဆိုခြင်း +- အခြေအနေတစ်ခုချင်းစီအတွက် အကြောင်းပြချက်အသေးစိတ်ပေးခြင်း ```javascript -// Step 3: Concise conditional with ternary operator +// အဆင့် ၃: သုံးလမ်းရွေးချယ်ခြင်းနဲ့ စည်းကမ်းပြည့်စုံတဲ့ အခြေအနေစစ်တမ်း const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**သင်သိထားရမယ့်အချက်များ:** -- **Ternary operator (`? :`)** ကို အသုံးပြုပြီး simple conditions တွေကို handle လုပ်ပါ။ -- **Condition** ကို ရေးပြီး `?` နောက်မှာ true result, `:` နောက်မှာ false result ကို ရေးပါ။ -- **Assign values** ကို conditions အပေါ်မူတည်ပြီး လုပ်ပါ။ + +**သတိထားရန်:** +- အခြေအနေ ရိုးရှင်းသော နှစ်ရွေးစရာအတွက် ternary operator (`? :`) အသုံးပြုသည် +- ပထမဦးဆုံး အခက်အခဲရေးပြီး `?` ဖြင့်စ၍ true မျာ့နှင့် false ရလဒ်များကိုထည့်သည် +- အခြေအနေအပေါ်တွင် ထောက်ခံတန်ဖိုး ပေးသည့်အခါ အသုံးပြုရန် ```javascript -// Step 4: Handling multiple specific cases +// အဆင့် ၄: အထူးအမှုအခြေအနေများစွာကို ကောင်းစွာကျင့်သုံးခြင်း const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -321,56 +445,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**ဒီကုဒ်အလုပ်ဖြစ်စေသောအချက်များ:** +- variable တန်ဖိုးကို မတူညီသော ဥပမာများနှင့် ကိုက်ညီမှု ပြုစေသည် +- ဆက်စပ်သည့် ဥပမာများ (အလုပ်ရက်နေ့များ နှင့် အပတ်ကုန်များ) ကိုစုစည်းသည် +- ကိုက်ညီမှု မြင်သာသောအခါ သင့်လျော်သော code block ကို ဆောင်ရွက်သည် +- မမျှော်လင့်သော တန်ဖိုးများကို ထိန်းသိမ်းရန် `default` case ပါထည့်သည် +- နောက်မှဖြစ်လာရင် မလုပ်ဆောင်အောင် `break` ဖြင့် ရပ်ဆိုင်းသည် -**ဒီကုဒ်က ဘာလုပ်သလဲဆိုရင်:** -- **Variable value** ကို specific cases တွေနဲ့ match လုပ်ပါ။ -- **Similar cases** တွေကို အုပ်စုဖွဲ့ပါ။ -- **Code block** ကို match တွေ့တဲ့အခါ run လုပ်ပါ။ -- **Default case** ကို အသုံးပြုပြီး unexpected values ကို handle လုပ်ပါ။ -- **Break statements** ကို အသုံးပြုပြီး နောက်ထပ် case ကို မဆက်လက်လုပ်ဆောင်စေပါ။ +> 💡 **နမူနာနက်နဲတယ်**: ထိန်းချုပ်မှု လည်ပတ်မှုကို သဘာဝနှင့် လူကြီးဆုံး GPS တစ်ခုလို ထင်နိုင်ပါသည်။ "Main သာလမ်းတွင် ယာဉ်တာရွေ့နေပါက အမြန်ဆုံးလမ်းကို သွားပါ၊ အမြန်လမ်းပိတ်နေပါက ကျေးလက်လမ်းကို စမ်းကြည့်ပါ" ဆိုသလိုဖြစ်သည်။ ကြားနာတတ်သော logic များဖြင့် အခြေအနေများကို အသိပညာနဲ့ တုံ့ပြန်ပေးသည်။ -> 💡 **အမှန်တကယ်နမူနာ**: Control flow ကို GPS လမ်းညွှန်စနစ်လို တွေးပါ။ "Main Street မှာ traffic ရှိရင် highway ကို သွားပါ။ Highway မှာ ဆောက်လုပ်ရေးရှိရင် scenic route ကို သွားပါ" လို့ GPS က ပြောသလိုပဲ၊ Programs တွေက conditional logic ကို အသုံးပြုပြီး အခြေအနေအလိုက် အကောင်းဆုံးဆုံးဖြတ်ချက်တွေကို လုပ်နိုင်ပါတယ်။ +### 🎯 **အကြောင်းအရာ စစ်ဆေးခြင်း: အခြေခံကိရိယာ ကျွမ်းကျင်မှု** -### 🎯 **Concept Check: အခြေခံအဆောက်အအုံများကို ကျွမ်းကျင်မှုစစ်ဆေးခြင်း** +**အခြေခံများမှာ မင်း ဘယ်လိုလုပ်နေတာလဲ ကြည့်ရအောင်:** +- မင်းရဲ့စကားဖြင့် variable နဲ့ statement ကြားက ကြားခံချက်ကို ရှင်းပြနိုင်မလား? +- ကျွန်ုပ်တို့ voting ဥပမာကဲ့သို့ if-then ဆုံးဖြတ်ချက် များ အသုံးပြုမယ့် ရဲ့ နေ့စဉ်ဘဝ အခန်းကဏ္ဍတစ်ခု ဆိုလိုက်ပါ +- programming logic မှာ မင်း အံ့ဩသွားတဲ့ အချက်တစ်ချက် ပြောပါ -**သင့်အခြေခံအဆောက်အအုံများကို စစ်ဆေးကြည့်ပါ:** -- Variable နဲ့ statement တစ်ခုချင်းစီရဲ့ ကွာခြားချက်ကို သင့်စကားနဲ့ ရှင်းပြနိုင်ပါသလား? -- If-then decision ကို သင့်နေ့စဉ်ဘဝမှာ အသုံးပြုမယ့် နမူနာတစ်ခုကို တွေးနိုင်ပါသလား? -- Programming logic အကြောင်းမှာ သင့်ကို အံ့ဩစေတဲ့အရာတစ်ခုက ဘာလဲ? - -**Quick confidence booster:** +**မြန်စွာ ယုံကြည်မှု တိုးမြှင့်ကမ့်:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 မက်ဆေ့ချ်များ
(ညွှန်ကြားချက်များ)"] --> B["📦 အမျိုးအစားများ
(သိုလှောင်မှု)"] --> C["🔀 ထိန်းချုပ်မှုစီးဆင်းမှု
(ဆုံးဖြတ်ချက်များ)"] --> D["🎉 လုပ်ဆောင်နိုင်သောပရိုဂရမ်!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` +``` +✅ **နောက်တစ်ခုပြီးတော့ မျှော်လင့်သောအရာ**: ဒီအံ့သြဖွယ် concepts တွေကို နက်နဲစွာ အသိပညာရရှိအောင် ကူညီဖို့ ဒီခရီးကို ဆက်လုပ်မှာပါ! လက်ရှိမှာ တစ်ခုချင်းစီအတွက် စိတ်လှုပ်ရှားမှုကိုသာ ဖမ်းဆီးထားပါ။ အတော်များများသော ကျွမ်းကျင်မှုများနှင့် နည်းပညာများမှာ သင်ယူလေ့ကျင့်မှုတွေနဲ့ အလိုအလျောက် ရွေးချယ်ဖြစ်လာမှာ သေချာပါတယ်။ ဒီခရီး သင့်အတွက်အတော်ပင် စိတ်ဝင်စားစရာဖြစ်မယ်! -✅ **နောက်တစ်ခုမှာ ဘာတွေရှိမလဲ**: ဒီ concepts တွေကို နက်နက်ရှိုင်းရှိုင်း သင်ယူရင်း အရမ်းပျော်စရာကောင်းတဲ့ ခရီးကို ဆက်လက်လုပ်ဆောင်မှာပါ! အခုတော့ အနာဂတ်မှာ ဖြစ်နိုင်တဲ့ အံ့ဩစရာတွေကို စိတ်လှုပ်ရှားမှုနဲ့ အာရုံစိုက်ပါ။ အတိအကျ skills တွေက ကျွန်တော်တို့အတူတူ practice လုပ်ရင်း အလိုအလျောက် သင့်မှာ ကျန်ရှိသွားပါလိမ့်မယ် – ဒီခရီးက သင်မျှော်လင့်ထားတာထက် ပိုပျော်စရာကောင်းမှာပါလို့ ကတိပေးပါတယ်! +## ကိရိယာများ -## Tools of the Trade +အိုကေ၊ ဒီနေရာမှာ ကျွန်တော် တကယ် စိတ်လှုပ်ရှားစရာ ဖြစ်သွားတာပါ! 🚀 ဒီကား ဝန်းရံပေးမယ့် အံ့ဖွယ်ကိရိယာတွေကို ပြောပြတော့မယ်။ -အိုကေ၊ ဒီမှာတော့ excitement အပြည့်နဲ့ မနားနိုင်တော့ဘူး! 🚀 အခုတော့ သင့်ကို digital spaceship ရဲ့ key တွေကို လက်ထဲမှာပေးလိုက်သလို tools တွေကို ပြောပြမှာပါ။ +ဟင်းချက်သမားတစ်ယောက်မှာ လက်မောင်းတစ်မောင်းလို မကျေမနပ် စိတ်ချရသောဓားတွေ ရှိသလို၊ သာမန်တေးသမားတစ်ယောက်မှာ ဂီတတီးတစ်လုံးကို လက်တည်သာချိန်မှာသာ သီဆိုနိုင်သလို၊ developer တွေမှာလည်း ဒီစွမ်းအားရှိတဲ့ ကိရိယာတွေရှိတယ်။ အဲဒါတွေက တကယ့်အဖိုးအတန်ကိရိယာတွေဖြစ်ပြီး ထူးခြားစိတျကြီးစွာမှာ ရေးသားရေးလုပ်အားကို ပေးနိုင်စေတယ်။ -Chef တစ်ယောက်ရဲ့ လက်ကို extension လိုခံစားရတဲ့ balance ကောင်းတဲ့ ဓားတွေ၊ သို့မဟုတ် ဂီတသမားရဲ့ သီချင်းတွေကို အလွယ်တကူဖန်တီးနိုင်တဲ့ guitar တစ်လက်လို tools တွေကို developers တွေမှာလည်း ရှိပါတယ်။ အခုတော့ အံ့ဩစရာကောင်းတဲ့အချက်က – ဒီ tools တွေက အများစုအခမဲ့ပါ! +အဲ့ဒီထဲမှာ AI ကို အသုံးပြု၍ ကုဒ်ရေးရာမှ ကူညီပေးတဲ့ အကူအညီပေးသူတွေ၊ Wi-Fi ရရှိသည့်နေရာဘယ်နေရာကမှ ကုဒ်ပြုလုပ်နိုင်မယ့် cloud ဖိနပ်တွေ၊ X-ray vision လို debug လုပ်နိုင်တဲ့ ကိရိယာတွေ ပါဝင်တယ်။ -AI-powered coding assistants, cloud environments, debugging tools စတဲ့ tools တွေက software ဖန်တီးပုံကို ပြောင်းလဲပေးခဲ့ပါတယ်။ ဒီ tools တွေက beginner tools မဟုတ်ပါဘူး – Google, Netflix, indie app studio တွေမှာ အသုံးပြုနေတဲ့ tools တွေပါပဲ။ +နှလုံးသားထဲက လှုပ်ရှားဖွယ်ကောင်းတာကတော့ အဲဒီကိရိယာတွေအများစုက ဝမ်းသာစရာအမျိုးအစား "အစပိုင်းသင်ယူသူကိရိယာ" မဟုတ်ပဲ၊ Google, Netflix, သင့်အကြိုက် အင်ဒီအက်ပ်စတူဒီယိုတွေရဲ့ ပြင်ပတွင်လည်း ပါဝင် အသုံးပြုနေကြတဲ့ နောက်ဆုံးပေါ် professional-grade ကိရိယာတွေ ဖြစ်တာပါ။ မင်းလုံးဝ အရမ်းကျွမ်းကျင်ပြီးသားလိုခံစားရလိမ့်မယ်! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 သင်၏အယူအဆ"] --> B["⌨️ ကုဒ်တည်းဖြတ်ဆော့ဖ်ဝဲ
(VS Code)"] + B --> C["🌐 ဘရောက်ဇာ DevTools
(စမ်းသပ်ခြင်းနှင့်အမွှန်းဖော်ခြင်း)"] + C --> D["⚡ Command Line
(အလိုအလျောက်လုပ်ဆောင်ခြင်းနှင့်ကိရိယာများ)"] + D --> E["📚 စာရွက်စာတမ်းများ
(သင်ယူခြင်းနှင့်ကိုးကားရန်)"] + E --> F["🚀 အံ့သြဖွယ် Web App!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 AI အကူအညီ
(GitHub Copilot)"] + C -.-> H["📱 စက်ပစ္စည်းစမ်းသပ်ခြင်း
(တုံ့ပြန်နိုင်မှုဒီဇိုင်း)"] + D -.-> I["📦 အထုပ်စီမံခန့်ခွဲသူများ
(npm, yarn)"] + E -.-> J["👥 အသိုင်းအဝိုင်း
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -378,323 +503,345 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` +``` +### ကုဒ် ဆောင်းပါးရေးတည်းဖြတ်သူများ နဲ့ IDE များ: သင့်အသစ်ရ digitaal ကျွန်မိတ်ဆွေများ + +ကုဒ် ဆောင်းပါးရေးတည်းဖြတ်ရာတွင်ပေါ်ပေါက်လာပါစို့ – ဒီနေရာတွေက သင့်အကြိုက်ဆုံး အသင်းအဖွဲ့ ဝင်နေရာတွေ ဖြစ်တော့မှာပါ! ဒီနေရာမှာ သင် digital ဖန်တီးမှုများ ကိုက်ညီစွာ ဖန်တီးတော်မူမယ်။ -### Code Editors and IDEs: သင့်ရဲ့ digital အကောင်းဆုံးသူငယ်ချင်း +အခုခေတ် အဆင့်မြင့် Editors တွေက ဆောင်းပါးရေးတည်းဖြတ်သူ အဖြစ်သာမက 24/7 ဘေးနားမှာ ထိုင်နေတဲ့ brilliant, support ပေးမယ့် coding mentor တွေလည်း ဖြစ်တယ်။ သင်ရိုက်လို့ ယူမယ်ဆိုသောအတိုင်း typing error များကို စောင့်ကြည့်ပေး၊ coding ကို ပိုမိုထူးချွန်အောင် ကူညီ၊ ဘယ်လို code တစ်ခုစီ အလုပ်လုပ်သလဲကို ကြားနားပေးတယ်။ တချို့ကတော့ မင်းရိုက်ဖြစ်မှာကို ထင်ရှားစေရန် ပျမ်းမျှထက်ပြီး အသုံးပြုမယ့် အရာကို အပြီးလိုက် ပြောပြတတ်ကြတယ်! -Code editors တွေက သင့်ရဲ့ coding sanctuary ဖြစ်လာမှာပါ။ Modern editors တွေက သင့်ကို coding mentor တစ်ယောက်လို support ပေးပါတယ်။ Typos တွေကို အလိုအလျောက်ဖမ်းပြီး၊ သင့်ကို genius လိုခံစားရစေတဲ့ suggestions တွေ၊ code ကို နားလည်စေတဲ့ explanations တွေ၊ auto-completion feature တွေက သင့်ကို future မှာနေတဲ့သူလို ခံစားရစေပါတယ်။ +ဥပမာ အလိုအလျောက် ဖြည့်စွက်မှု (auto-completion) ကို စတင်တွေ့မြင်တဲ့အခါ အနာဂတျနေ့သားမှာ နေထိုင်နေသလိုခံစားခဲ့ရတယ်။ မင်းဟာ function တစ်ခု ခန့်မှန်းပြီး ရိုက်ရင်း editor က "ဒီ function လုပ်ဆောင်မယ်ဆိုတာ မင်းစဉ်းစားထားသလား?" လို့ ပြောပေးတယ်။ mind-reader တစ်ဦးလို ပေါ့! -**Modern editors တွေက ဘာတွေကောင်းလဲ?** +**ဘာပဲလို့ editor တွေပြောင်းလဲနေသလဲ?** -| Feature | ဘာလုပ်ပေးသလဲ | ဘာလို့အကျိုးရှိလဲ | +ခေတ်သစ် code editor တွေမှာ productivity တိုးတက်စေဖို့ feature များစွာ ပါဝင်တယ်: + +| Function | အကြောင်း | အကျိုးသက်ရောက်မှု | |---------|--------------|--------------| -| **Syntax Highlighting** | Code ကို အရောင်အသွေးနဲ့ ဖော်ပြ | Code ကို ဖတ်ရလွယ်ပြီး error တွေကို အလွယ်တကူတွေ့နိုင် | -| **Auto-completion** | Code ကို type လုပ်ရင်း suggestion ပေး | Coding ကို မြန်ဆန်စေပြီး typos တွေကို လျှော့ချ | -| **Debugging Tools** | Error တွေကို ရှာပြီး ပြင်ဆင် | Troubleshooting အချိန်ကို လျှော့ချ | -| **Extensions** | Specialized features တွေကို ထည့်သွင်း | Editor ကို သင့်နည်းပညာအလိုက် customize လုပ်နိုင် | -| **AI Assistants** | Code နဲ့ explanations တွေကို suggest | Learning နဲ့ productivity ကို မြှင့်တင် | +| **Syntax Highlighting** | code ၏ အပိုင်းများကို အရောင်ပေးသည် | ကုဒ်ဖတ်ရှုရလွယ်ကူပြီး အမှားတွေရှာဖွေချင်ရလွယ်စေသည် | +| **Auto-completion** | မင်းရိုက်နေသူအတိုင်း ကုဒ်ကို အကြံပေးသည် | coding အမြန်မြှင့်ပြီး စာလုံးမှားမှု လျော့ချပေးသည် | +| **Debugging Tools** | error တွေရှာ ဖယ်ရှားရာကူညီသည် | ဆင့်ကဲခြင်းနာရီများ လျှော့ချပေးသည် | +| **Extensions** | အထူးပြု feature များ ထည့်သွင်းနိုင်သည် | သင်၏ editor ကို နည်းပညာ အမျိုးမျိုး အတွက် ကိုက်ညီစေသည် | +| **AI Assistants** | ကုဒ်နှင့် ရှင်းလင်းချက်များ အကြံပေးသည် | သင်ယူမှုနှင့် လုပ်ငန်းဆောင်တာ ပိုမိုမြန်ဆန်စေသည် | + +> 🎥 **ဗွီဒီယို အရင်းအမြစ်**: ဒီကိရိယာတွေ အသုံးပြုပုံ ကြည့်ရှုချင်ရင် [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) ကို ကြည့်လိုက်ပါ။ -> 🎥 **ဗီဒီယိုအရင်းအမြစ်**: Tools တွေကို လုပ်ဆောင်ပုံကို ကြည့်ချင်ပါသလား? ဒီ [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) ကို ကြည့်ပါ။ +#### ဝက်ဘ်ဖန်တီးမှုအတွက် အကြံပြု editor များ -#### Web Development အတွက် အကြံပြုထားတဲ့ Editors +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (အခမဲ့) +- ဝက်ဘ်ဖန်တီးသူများအကြား အလွန်နာမည်ကြီးသော editor +- Extension ecosystem ကောင်းမှုပြည့်ဝသည် +- terminal နှင့် Git ပါဝင်သည် +- **လိုအပ်သော extension များ**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI ဖြင့် ကုဒ်ဆွဲပြချက် + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - အချိန်နှင့်တပြေးညီ ပူးပေါင်းရေးသားမှု + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ကုဒ်ကို အလိုအလျောက် ပရောဖောမက်ခြင်း + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - ကုဒ်လုံးပေါက်မှားရေးစစ်ခြင်း -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (အခမဲ့) -- Web developers တွေကြားမှာ အလွန်လူကြိုက်များ -- Extension ecosystem ကောင်း -- Built-in terminal နဲ့ Git integration -- **Must-have extensions**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered code suggestions - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time collaboration - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic code formatting - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Catch typos in your code +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (စာရင်းပေးဆောင်ရပြီး၊ ကျောင်းသားများအခမဲ့) +- တိုးတက်သော ပြန်လည်စစ်ဆေးမှုနှင့် စမ်းသပ်စက်ကိရိယာများ +- အတှကျဆင့်-ကုဒ်ပြည့်စုံစနစ် +- ဖွဲ့စည်းထားသော ရုပ်ပိုင်းများနှင့် အပြောင်းအလဲစီမံခန့်ခွဲမှု -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Paid, free for students) -- Debugging နဲ့ testing tools အဆင့်မြင့် -- Intelligent code completion -- Built-in version control +**Cloud-Based IDEs** (စျေးနှုန်းကွဲပြားမှုများ) +- [GitHub Codespaces](https://github.com/features/codespaces) - browser ထဲတွင် VS Code အပြည့်အစုံ +- [Replit](https://replit.com/) - သင်ယူရေးနှင့် မျှဝေရေးအတွက်ကောင်းမှု +- [StackBlitz](https://stackblitz.com/) - အမြန်ဆုံး၊ full-stack ဝက်ဘ်ဖန်တီးမှု -**Cloud-Based IDEs** (Various pricing) -- [GitHub Codespaces](https://github.com/features/codespaces) - Browser မှာ VS Code အပြည့်အသုံးပြုနိုင် -- [Replit](https://replit.com/) - Learning နဲ့ code ကို share လုပ်ဖို့ကောင်း -- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development +> 💡 **စတင်သုံးစွဲခြင်း အကြံပြုချက်**: Visual Studio Code နဲ့ စတင်ပါ – အခမဲ့၊ များစွာ အသုံးပြုတယ်၊ များစွာသော အဖွဲ့အစည်းများ သင်ကြားမှုနဲ့ Extension များ ဖန်တီးနေပြီဖြစ်တာကြောင့် အရမ်းအထောက်အကူဖြစ်လိမ့်မယ်။ -> 💡 **စတင်ရန်အကြံပြုချက်**: Visual Studio Code ကို စတင်ပါ – အခမဲ့၊ စက်မှုလုပ်ငန်းမှာ အများဆုံးအသုံးပြုပြီး tutorials နဲ့ extensions တွေကို ရှာဖွေဖို့ community ကြီးတစ်ခုရှိပါတယ်။ +### ဝက်ဘ် ဘရောက်ဇာ: သင်၏လျှို့ဝှက် ဖန်တီးမှုလေ့လာခန်း -### Web Browsers: သင့်ရဲ့လျှို့ဝှက် Developer Laboratory +အိုကေ၊ စိတ်အမြန်အမြင့်တက်ဖို့ ပြင်ဆင်ထားပါ! နဲ့ ကမ့်သည် နောက်ဖက်မှာ developer tools လျှို့ဝှက်ခန်းတစ်ခုကို ဖုံးကွယ်ထားခဲ့တဲ့ ဘရောက်ဇာကို သင်အသုံးပြုနေပါသလား? အခုထိ ဖော်ထုတ်ဖော်ပြဖို့ စောင့်ဆိုင်းနေခဲ့တာပါ! -အိုကေ၊ သင့်စိတ်ကို အပြည့်အဝ အံ့ဩစေဖို့ ပြင်ဆင်ထားပါ -တစ်ဦးတစ်ယောက် Browser DevTools ကို ပထမဆုံး ပြသခဲ့တဲ့အခါ၊ ကျွန်တော်/ကျွန်မ သုံးနာရီလောက် အဲဒီမှာပဲ ကလစ်လုပ်ပြီး "WAIT, ဒါလည်းလုပ်နိုင်တာလား?!" လို့ အံ့ဩနေခဲ့တယ်။ သင်တစ်ခုခု website ကို အချိန်နှင့်တပြေးညီ ပြင်ဆင်နိုင်တယ်၊ အားလုံး ဘယ်လောက်မြန်မြန်တင်တင်ဖြစ်တယ်ဆိုတာ မြင်နိုင်တယ်၊ သင့် site ကို အခြား device တွေမှာ ဘယ်လိုပုံစံနဲ့ မြင်ရမလဲ စမ်းသပ်နိုင်တယ်၊ JavaScript ကိုလည်း အတော်လေးကျွမ်းကျင်တဲ့ပုံစံနဲ့ debug လုပ်နိုင်တယ်။ အဲဒါက အံ့ဩစရာကောင်းလှပါတယ်! +ဝက်ဘ်စာမျက်နှာဘက်ကို ဖက်နှိပ်၍ "Inspect Element" ရွေးချယ်တိုင်း၊ သင့်ရှေ့တွင် developer tools များ၏ ပြတင်းပေါက်ပိတ်မခံနိုင်စိတ်ကူးတစ်ခု ပေါ်ပေါက်လာပါသည်။ ဒီကိရိယာတွေက ကျွန်ုပ်တို့ဟာ တစ်ကြိမ်မှာ ရေတွက်ကြည့်ရင် ဒေါ်လာရာနဲ့ ပဲ စျေးထားတဲ့ software တွေထက် ပို စွမ်းဆောင်ရည်မြင့်တယ်။ စားသောက်ခန်းလက်ငင်းမျှော်မှန်းမရသော စီမံခန့်ခွဲမှု ခန်းမဖြစ်ပါတယ်! +ပထမဆုံးတစ်ယောက်ယောက်က browser DevTools ကိုပြသပေးတဲ့အခါမှာ၊ ကျွန်တော် သုံးနာရီလောက် တိုးတိုးမြှောက်မြှောက်နှိပ်ကာ "သတိရပါဦး၊ ဒါကိုပါ လုပ်လို့ရမယ်လား?!" လို့ထင်ခဲ့ပါတယ်။ သင်ဟာ တကယ်တမ်းအားဖြင့် မည်သည့်ဝက်ဘ်ဆိုဒ်မဆို တိုက်ရိုက်ပြင်ဆင်နိုင်တယ်၊ အရာရာဘယ်လောက်မြန်မြန် ကွန်တိန်းလုပ်ဆောင်နေသလဲ ချက်ချင်းကြည့်ရှုနိုင်တယ်၊ သင့်ဆိုဒ်ကို အမျိုးမျိုးသောစက်ပစ္စည်းများပေါ်မှာ ဘယ်လိုကြည့်ရမလဲ စမ်းသပ်နိုင်တယ်၊ နောက်ပြီး JavaScript ကိုလည်း လုံးဝကျွမ်းကျင်သူလို မှတ်ပုံတင်ပြင်ဆင်နိုင်တယ်။ ဒါက တကယ်အံ့ဩစရာပါပဲ! -**Browser တွေက သင့်ရဲ့ လျှို့ဝှက်လက်နက်ဖြစ်တဲ့အကြောင်း:** +**အဲ့ဒါကြောင့် browser တွေက သင့်ရဲ့လျှို့ဝှက်လက်နက်ဖြစ်တယ်ဆိုတာ ဖြစ်တာက ဒီတော့ပါ:** -Website သို့မဟုတ် web application တစ်ခုကို ဖန်တီးတဲ့အခါ၊ အဲဒါကို အမှန်တကယ်ကမ္ဘာမှာ ဘယ်လိုပုံစံနဲ့ မြင်ရမလဲ၊ ဘယ်လိုအပြုအမူရှိမလဲဆိုတာ သိဖို့လိုပါတယ်။ Browser တွေက သင့်အလုပ်ကို ပြသပေးရုံသာမက၊ performance, accessibility, နဲ့ ဖြစ်နိုင်တဲ့ပြဿနာတွေကို အသေးစိတ် feedback ပေးနိုင်ပါတယ်။ +ဝက်ဘ်ဆိုဒ် သို့မဟုတ် ဝက်ဘ်အက်ပ်လိကေးရှင်းတစ်ခု ဖန်တီးတဲ့အခါမှာ၊ ကမ္ဘာလောကမှာ ဘယ်လိုပုံပေါ်တယ်၊ ဘယ်လိုသဘောထားပြုလုပ်တယ်ဆိုတာ ကြည့်ရှုဖို့လိုပါတယ်။ Browser များက သင့်လုပ်ဆောင်မှုကို ပြသပေးတာကပဲ မဟုတ်ပဲ၊ စွမ်းဆောင်ရည်၊ အသုံးပြုနိုင်မှုနှင့် ဖြစ်နိုင်တဲ့ ပြဿနာများအကြောင်း အသေးစိတ်တုံ့ပြန်ချက်များကိုပါပံ့ပိုးပေးပါတယ်။ #### Browser Developer Tools (DevTools) -ခေတ်မီ Browser တွေမှာ Comprehensive Development Suite တွေ ပါဝင်ပါတယ်။ +ခေတ်မှီ browser များဟာ ဖန်တီးသူဆော့ဖ်ဝဲများ အပြည့်အဝပါဝင်ပါတယ်- -| Tool Category | ဘာလုပ်ပေးသလဲ | အသုံးပြုမှု ဥပမာ | +| ကိရိယာ အမျိုးအစား | အလုပ်လုပ်ပုံ | သုံးစွဲမှုဥပမာ | |---------------|--------------|------------------| -| **Element Inspector** | HTML/CSS ကို အချိန်နှင့်တပြေးညီ ကြည့်ရှုပြီး ပြင်ဆင်နိုင် | Styling ကို ပြင်ပြီး ချက်ချင်းရလဒ်တွေကို မြင်နိုင် | -| **Console** | Error message တွေကို ကြည့်ပြီး JavaScript ကို စမ်းသပ်နိုင် | ပြဿနာတွေကို debug လုပ်ပြီး code ကို စမ်းသပ် | -| **Network Monitor** | Resource တွေ ဘယ်လို load ဖြစ်တယ်ဆိုတာကို ကြည့်ရှု | Performance နဲ့ loading time တွေကို optimize လုပ် | -| **Accessibility Checker** | Inclusive design အတွက် စမ်းသပ် | သင့် site ကို လူတိုင်းအတွက် အလုပ်လုပ်စေဖို့ သေချာစေ | -| **Device Simulator** | အခြား screen size တွေမှာ preview လုပ် | Responsive design ကို စမ်းသပ်ဖို့ များစွာသော device မလိုအပ်တော့ဘူး | +| **Element Inspector** | HTML/CSS ကို အချိန်နှင့်တပြေးညီ ကြည့်ရှု ပြင်ဆင်နိုင် | တိုက်ရိုက်မကြာခဏ ပုံစံပြင်ဆင်ခြင်း | +| **Console** | အမှားစာတန်းများအား ကြည့်ရှု သပ်မတ် JavaScript ကို စမ်းသပ် | ပြဿနာများ ဖြေရှင်းခြင်းနှင့် ကုဒ် စမ်းသပ်မှု | +| **Network Monitor** | အရင်းအမြစ်ဘယ်လိုပေါက်ကြောင်း စောင့်ကြည့်ခြင်း | စွမ်းဆောင်ရည်နှင့် ယခုပြန်ဘယ်လောက်လျှော့ချရန် စမ်းသပ်ခြင်း | +| **Accessibility Checker** | ကာမရှင်ဖက်ဆိုင် ဒီဇိုင်း စစ်ဆေးခြင်း | အသုံးပြုသူအားလုံးအတွက် သင့်ဆိုဒ် အလုပ်လုပ်စေလိုချက် | +| **Device Simulator** | မျိုးစုံသော စကင်းအရွယ်အစားပေါ်မှာ ကြည့်ရှုရန် | စကင်းလှုပ်ရှားမှုဒီဇိုင်း စမ်းသပ်ခြင်း | -#### Development အတွက် အကြံပြု Browser တွေ +#### ဖန်တီးမှုအတွက် အကြံပြု browser များ -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Documentation အပြည့်အစုံနဲ့ Industry-standard DevTools -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - CSS Grid နဲ့ accessibility tools အတွက် အထူးကောင်းမွန် -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium ပေါ်မှာ Microsoft ရဲ့ developer resources တွေနဲ့ တည်ဆောက်ထား +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - စံချိန်စံညွှန်း DevTools နှင့် အသေးစိတ်စာရွက်စာတမ်းများ +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - CSS Grid နှင့် အသုံးပြုနိုင်မှုကိရိယာ အထူးကောင်းမွန် +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium အခြေခံပြီး Microsoft ၏ဖန်တီးသူရင်းမြစ်များပါရှိ -> ⚠️ **အရေးကြီး Testing အကြံပေးချက်**: သင့် website တွေကို Browser အမျိုးမျိုးမှာ စမ်းသပ်ပါ! Chrome မှာ အလုံးစုံအလုပ်လုပ်တဲ့အရာတွေ Safari သို့မဟုတ် Firefox မှာ မတူနိုင်ပါတယ်။ Professional developer တွေက Browser ใหญ่တွေမှာ အားလုံးကို စမ်းသပ်ပြီး consistent user experience ရရှိစေဖို့ ကြိုးစားကြပါတယ်။ +> ⚠️ **အသိပေး စမ်းသပ်မှု အကြံပြုချက်**: မိမိ ဝက်ဘ်ဆိုဒ်များကို browser အမျိုးမျိုးမှာ စမ်းသပ်ဖို့ အမြဲတမ်းလိုသည်! Chrome မှာ ပြီးပြည့်စုံတဲ့အရာတွေဟာ Safari ဒါမှမဟုတ် Firefox မှာ ကွာခြား ကြည့်ပါလိမ့်မယ်။ အတန်းစား ဖန်တီးသူများက major browser ကြီးများအားလုံးမှာ စမ်းသပ်ပြီး အသုံးပြုသူတွေ စိတ်ကျေနပ်မှုကို သေချာဆောင်ရွက်ကြပါတယ်။ -### Command Line Tools: Developer Superpowers ရောက်ဖို့ Gateway +### Command Line Tools: Developer Superpowers များသို့ ရောက်ရှိဖို့ သင့်လမ်းဝင် -အခုတော့ Command Line အကြောင်းကို အပြည့်အဝ အမှန်တရားနဲ့ ပြောပြချင်ပါတယ်၊ အကြောင်းက ကျွန်တော်/ကျွန်မလည်း အဲဒီအရာကို အရင်ဆုံးတွေ့တဲ့အခါ "အင်း၊ မလုပ်နိုင်ဘူး! ၁၉၈၀ ခုနှစ် hacker movie ကနေ ထွက်လာတဲ့အရာလိုပဲ၊ ကျွန်တော်/ကျွန်မ အဲဒီအရာကို လုပ်နိုင်အောင် smart မဟုတ်ဘူး!" 😅 လို့ literal ထင်ခဲ့တယ်။ +ကောင်းပြီ၊ Command line ကို ပိုမိုရင်းနှီးစွာ သတိထားလေ့လာဖို့၊ ရိုးသားစွာ ပြောရရင်၊ ပထမဆုံး Command line ကို တွေ့သမျှပြောရရင် - အဲဒါက မျက်စိထဲ တောက်ပသောစာသားလိပ်ရူပါသော အနက်ရောင် စာမျက်နှာတစ်မျက်နဲ့ တူတဲ့ကြောက်စရာတစ်ခုလို ပြရတယ်။ ကျွန်တော် "မဖြစ်ပါ၊ ကောင်းကောင်းလူမဟုတ်ပါဘူး! 1980s hacker ရုပ်ရှင်ကနေထွက်လာတဲ့ အရာတစ်ခုလိုတယ်!" ဆိုပြီး စိတ်ချန်နေတာပါ။ 😅 -ဒါပေမယ့် အဲဒီအချိန်မှာ တစ်ဦးတစ်ယောက်က ပြောပြပေးခဲ့ရမယ့်အရာကို အခုတော့ ကျွန်တော်/ကျွန်မ ပြောပြချင်ပါတယ်။ Command Line က စိတ်လှုပ်ရှားစရာကောင်းတဲ့အရာမဟုတ်ဘူး – အဲဒါက သင့် computer နဲ့ တိုက်ရိုက် စကားပြောနေတဲ့အရာပါပဲ။ Fancy app တွေမှာ menu နဲ့ picture တွေကို သုံးပြီး အစားအစာ order လုပ်တာနဲ့ သင့်အကြိုက်ကို chef က သိပြီး "အံ့ဩစရာကောင်းတဲ့အရာတစ်ခု surprise လုပ်ပေးပါ" လို့ ပြောလိုက်တာနဲ့ တိုက်ရိုက် အစားအစာရတဲ့အရာနဲ့ တူပါတယ်။ +ဒါပေမယ့်၊ တချို့သူငယ်ချင်းတွေက ပြောခဲ့ရင် အခုမှာ သင့်ကို ပြောချင်တာကတော့ အဲ့ဒါက ကြောက်စရာမဟုတ်ဘူး – တကယ်တော့ကွန်ပျူတာနဲ့ ပြောဆိုတာလိုတယ်။ အစားအသောက်မှာ ဓာတ်ပုံနဲ့ မီနူးပါတဲ့ fancy app မှာ အော်ဒါပေးတာနဲ့ (နူးညံ့ပြေပြစ်) သင်ကြိုက်တဲ့အရာကောင်းတစ်ခုကို သိတဲ့ မီးဖိုချောင်မှာတစ်ကိုယ်တော်ဝင်ပြီး "အံ့ဩစရာ တစ်ခု လုပ်ပေးပါ" လို့ ပြောတဲ့ကွာခြားချက်အတိုင်းပါ။ -Command Line က developer တွေ wizard လိုခံစားရတဲ့နေရာပါပဲ။ စကားလုံးအနည်းငယ် (အိုကေ၊ အဲဒါက command တွေပါပဲ၊ ဒါပေမယ့် magic လိုခံစားရတယ်!) ရိုက်ပြီး enter ကို နှိပ်လိုက်တာနဲ့ BOOM – project structure အပြည့်ကို ဖန်တီးလိုက်တယ်၊ ကမ္ဘာတစ်ဝှမ်းက powerful tools တွေ install လုပ်လိုက်တယ်၊ သို့မဟုတ် သင့် app ကို internet ပေါ်တင်ပြီး လူသန်းပေါင်းများစွာကို မြင်နိုင်အောင်လုပ်လိုက်တယ်။ အဲဒီ power ကို ပထမဆုံး ခံစားလိုက်တဲ့အခါ၊ အဲဒါက အတော်လေး စွဲလမ်းစရာကောင်းပါတယ်! +Command line က အဲ့ဒီ့အရာကို Developer တွေကိုအံ့ဖွယ်ဆန်းသစ်ချက်တွေ လုံးဝမီးမောင်းကစားသလို ဖြစ်စေပါတယ်။ တချို့ စကားလုံးများကို ရိုက်ထည့်ပြီး (အိုကေ၊ အဲ့ဒါက command တွေပဲ ဖြစ်ပေမယ့် စိတ်ကူးယဉ်ဆန်စေပါတယ်) enter နှိပ်လိုက်တာနဲ့ BOOM – လုံးဝပရောဂျက်ဖွဲ့စည်းမှုတွေ ဖန်တီးသွားတယ်၊ ကမ္ဘာအနှံ့က စွမ်းအားကြီးတဲ့ကိရိယာတွေကို တပ်ဆင်လိုက်တယ်၊ သို့မဟုတ် သင့် app ကို အင်တာနက်ပေါ် မီလျံပေါင်းကြီးတွေ ကြည့်ရှုနိုင်ဖို့ ထုတ်ဝေသွားတယ်။ ဒီစွမ်းအားကို ပထမဆုံးခံစားလိုက်ရင်၊ အရမ်းလေးစားဖို့ဖြစ်ပါတယ်! -**Command Line ကို သင့်အကြိုက် tool ဖြစ်စေမယ့်အကြောင်း:** +**Command line ကို ဘာကြောင့် သင်၏သဘောကျဆုံးသော ကိရိယာဖြစ်လာမည်နည်း** -Graphical interface တွေက အလုပ်အမျိုးမျိုးအတွက် အကောင်းဆုံးဖြစ်ပေမယ့် Command Line က automation, precision, နဲ့ speed အတွက် အထူးကောင်းပါတယ်။ Development tool အများစုက Command Line Interface တွေကို အဓိကအခြေခံထားပြီး၊ အဲဒီ tool တွေကို ထိရောက်စွာ အသုံးပြုတတ်ခြင်းက productivity ကို အလွန်မြှင့်တင်ပေးနိုင်ပါတယ်။ +ဂရပ်ဖစ်အင်တာဖေ့စ်များဟာ အများပြည်သူအတွက်ကောင်းခဲတယ်။ ဒါပေမယ့် command line က အလိုအလျောက်လုပ်သက်၊ တိကျမှု၊ နာရီအရှိန်မှာထူးခြားပါတယ်။ ဖန်တီးမှုကိရိယာအများစုက command line မှာ သည်းခံနေရပြီး၊ အဲဒီကို တည့်တည့်အသုံးပြုပြီး သင် ရလဒ်တွေကို ထူးခြားစွာ တိုးတက်မှုရှိစေပါတယ်။ ```bash -# Step 1: Create and navigate to project directory +# အဆင့် ၁: ပရောဂျက်ဖိုဒါကို ဖန်တီးပြီး သွားရောက်ရန် mkdir my-awesome-website cd my-awesome-website ``` -**ဒီ code က ဘာလုပ်သလဲ:** -- **Create** "my-awesome-website" လို့ခေါ်တဲ့ directory အသစ်တစ်ခု ဖန်တီးပြီး project အတွက် အသုံးပြု -- **Navigate** အသစ်ဖန်တီးထားတဲ့ directory ထဲကို ဝင်ပြီး အလုပ်လုပ်စတင် +**ဒီကုဒ်က ဘာလုပ်တယ်ဆိုတာ:** +- **"my-awesome-website"** ဆိုတဲ့ directory အသစ်တစ်ခု ဖန်တီးသည် +- အသစ်ဖန်တီးထားတဲ့ directory ထဲကို ဝင်ရောက်ကုဒ်ရေးစမည် ```bash -# Step 2: Initialize project with package.json +# အဆင့် ၂: package.json ဖြင့် ပရောဂျက်စတင်ဖွင့်ပါ npm init -y -# Install modern development tools +# ခေတ်သစ် တိုးတက်ဖွံ့ဖြိုးရေးကိရိယာများ ထည့်သွင်းတပ်ဆင်ပါ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**အဆင့်ဆင့်ဖြင့် ဘာတွေဖြစ်နေသလဲ:** -- **Initialize** Node.js project အသစ်တစ်ခုကို default settings နဲ့ `npm init -y` ကို သုံးပြီး စတင် -- **Install** Vite ကို modern build tool အဖြစ် အသုံးပြုဖို့ -- **Add** Prettier ကို automatic code formatting အတွက်၊ ESLint ကို code quality check အတွက် -- **Use** `--save-dev` flag ကို development-only dependencies အဖြစ် သတ်မှတ်ဖို့ +**တစ်ဆင့်ချင်း အဖြစ်ဖြစ်ပုံများ:** +- `npm init -y` နဲ့ Node.js ပရောဂျက်အသစ်ကို မူလဖွဲ့စည်းမှုဖြင့် စတင်သည် +- အဆင့်မြင့်အဆောက်အအုံ Vite ကို တပ်ဆင်သည်၊ ဖွံ့ဖြိုးမှုနှင့် ထုတ်လုပ်မှုအတွက် အကောင်းဆုံးကိရိယာ +- Prettier ကို ကုဒ်အလိုအလျော့ ဖော်မက်ဖို့၊ ESLint ကို ကုဒ်အရည်အသွေး စစ်ဆေးရန် ထည့်သွင်းသည် +- `--save-dev` flag နဲ့ ဤကိရိယာများကို ဖန်တီးသူအဆင့် မဟုတ်သော dependencies အဖြစ် မှတ်သားသည် ```bash -# Step 3: Create project structure and files +# အဆင့် ၃: ပရောဂျက်ဖွဲ့စည်းမှုနှင့်ဖိုင်များ ဖန်တီးပါ mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# ဖွံ့ဖြိုးတိုးတက်မှုဆာဗာကို စတင်ပါ npx vite ``` -**အထက်ပါအရာတွေမှာ:** -- **Organized** project ကို source code နဲ့ assets အတွက် folder တွေ ခွဲခြားဖန်တီး -- **Generated** basic HTML file တစ်ခုကို proper document structure နဲ့ -- **Started** Vite development server ကို live reloading နဲ့ hot module replacement အတွက် +**အထက်မှာ ကျွန်တော်တို့:** +- မူလကုဒ်နှင့် ပစ္စည်းများအတွက် အထူးဖိုင်ပေါက်များ ဖန်တီး၍ ပရောဂျက် စနစ်တကျ စီစဉ်သည်။ +- မှန်ကန်သော စာရွက်စနစ်အတိုင်း မူလ HTML ဖိုင် တစ်ခု ဖန်တီးသည် +- Vite ဖွံ့ဖြိုးရေးဆာဗာကို စတင်ပြီး Live Reloading နှင့် Hot Module Replacement ကိုအသုံးပြုသည် -#### Web Development အတွက် အရေးကြီး Command Line Tools +#### ဝက်ဘ်ဖန်တီးမှုအတွက် မဖြစ်မနေနဲ့ Command Line ကိရိယာများ -| Tool | ရည်ရွယ်ချက် | ဘာကြောင့်လိုအပ်သလဲ | +| ကိရိယာ | ရည်ရွယ်ချက် | ဘာကြောင့်လိုသလဲ | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | Version control | Changes တွေကို track လုပ်၊ အခြားသူတွေနဲ့ ပူးပေါင်းလုပ်ဆောင်၊ အလုပ်တွေကို backup လုပ် | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Browser အပြင်မှာ JavaScript ကို run လုပ်၊ modern development tools တွေ install လုပ် | -| **[Vite](https://vitejs.dev/)** | Build tool & dev server | Lightning-fast development နဲ့ hot module replacement | -| **[ESLint](https://eslint.org/)** | Code quality | JavaScript မှာ ပြဿနာတွေကို အလိုအလျောက် ရှာပြီး ပြင် | -| **[Prettier](https://prettier.io/)** | Code formatting | Code ကို အမြဲတမ်း readable နဲ့ consistent ဖြစ်အောင် format လုပ် | +| **[Git](https://git-scm.com/)** | ဗားရှင်းထိန်းချုပ်မှု | ပြောင်းလဲမှုများ စောကြည့်နည်း၊ အဖွဲ့လိုက်လုပ်ဆောင်ခြင်း၊ အလုပ်စာရွက်များ ကူးယူခြင်း | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime နှင့် package စီမံခန့်ခွဲမှု | Browser ပြင်ပတွင် JavaScript ဆားပင်ဘက် အသုံးပြုခြင်း၊ နောက်ဆုံးပေါ် ဖန်တီးမှုကိရိယာများ ထည့်သွင်းခြင်း | +| **[Vite](https://vitejs.dev/)** | Build ကိရိယာနှင့် dev ဆာဗာ | အလွန်မြန်ဆန်သော ဖွံ့ဖြိုးမှု၊ Hot Module Replacement ပါဝင်သည် | +| **[ESLint](https://eslint.org/)** | ကုဒ်အရည်အသွေးစစ်ဆေးခြင်း | JavaScript မှာ ပြဿနာများကိုကိုယ်တိုင် ရှာဖွေပြင်ဆင်ပါသည် | +| **[Prettier](https://prettier.io/)** | ကုဒ်ဖော်မတ်ရေး | ကုဒ်ကို အမြဲတမ်း တိကျချောမွေ့ စေပြီး ဖတ်ရှုရလွယ်ကူအောင်ထားသည် | -#### Platform-Specific Options +#### စနစ်ပလက်ဖောင်းအလိုက် ရွေးချယ်မှုများ **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ခေတ်မီ feature-rich terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Powerful scripting environment -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditional Windows command line +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ခေတ်မှီ၊ အင်္ဂါရပ်ပြည့်စုံဆုံး terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - စွမ်းအားပြင်းသော scripting ပတ်ဝန်းကျင် +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - ရိုးရိုး Windows command line **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Built-in terminal application -- **[iTerm2](https://iterm2.com/)** - Advanced features ပါဝင်တဲ့ terminal +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - စနစ်တစ်ခုအတွင်း ပါရှိသော terminal app +- **[iTerm2](https://iterm2.com/)** - ထူးခြားစွာ တိုးတက်တင်မြှောက်ထားသော terminal **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Advanced terminal emulator +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ရိုးရာ Linux shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - အဆင့်မြင့် terminal emulator + +> 💻 = စနစ်တပ်ဆင်ပြီးသော -> 💻 = Operating system မှာ အလိုအလျောက် ပါဝင်ပြီးသား +> 🎯 **သင်ယူမှုလမ်းညွှန်**: အခြေခံ command များဖြစ်တဲ့ `cd` (directory ပြောင်းရန်), `ls` ဒါမှမဟုတ် `dir` (ဖိုင်စာရင်းဖော်ရန်), `mkdir` (ဖိုင်ပေါက်ဖန်တီးရန်) ကို စတင်လေ့ကျင့်ပါ။ `npm install`, `git status` နှင့် `code .` (အဲဒီနေရာ VS Code ဖြင့်ဖွင့်ရန်) စတဲ့ နောက်ဆုံးပေါ် workflow command များကိုလည်း အသုံးပြုရန် လေ့လာပါ။ နောက်ပိုင်းမှာ ပိုမိုကျွမ်းကျင်လာချိန်မှာ advanced command များနှင့် automation နည်းလမ်းများကို သဘာဝတရားလို တစ်ဆင့်တိုးလေ့လာပါလိမ့်မယ်။ -> 🎯 **Learning Path**: `cd` (directory ပြောင်း), `ls` သို့မဟုတ် `dir` (file list), `mkdir` (folder ဖန်တီး) လို basic command တွေကို စတင်ပါ။ `npm install`, `git status`, `code .` (VS Code မှာ current directory ကို ဖွင့်) လို modern workflow command တွေကို လေ့ကျင့်ပါ။ အဆင့်မြင့် command တွေ နဲ့ automation technique တွေကို သင်တတ်လာမှာပါ။ +###စာရွက်စာတမ်းများ: သင်၏ အမြဲရရှိနိုင်သော သင်ယူမှုလမ်းညွှန် -### Documentation: သင့်ရဲ့ အမြဲရရှိနိုင်တဲ့ သင်ကြားမှု Mentor +အိုကေ၊ စိတ်တိုင်းကျ beginner ဖြစ်နေတဲ့ မိမိကိုယ်ကိုပိုမိုသက်သာစေဖို့ လျှို့ဝှက်ချက်တစ်ခုမျှဝေရမယ်။ အတွေ့အကြုံရှိတဲ့ Developer အများစုဟာ အချိန်အများစုကို Documentation ဖတ်ခြင်းဆီမှာဖြတ်သိမ်းကြတယ်။ ဒါဟာ သူတို့ဘာလုပ်နေလဲ မသိတာမဟုတ်ပါဘူး – အတက်ပညာကြီးမှု လက္ခဏာတစ်ခုပါပဲ! -အိုကေ၊ beginner ဖြစ်တဲ့အခါ သင့်ကို ပိုကောင်းစေမယ့် လျှို့ဝှက်ချက်လေးကို မျှဝေချင်ပါတယ် – အတွေ့အကြုံရှိ developer တွေက documentation ကို ဖတ်ဖို့ အချိန်အများကြီး သုံးတယ်။ ဒါက သူတို့ မသိတာကြောင့် မဟုတ်ဘူး – အဲဒါက တကယ့်ပညာရှိမှုရဲ့ အမှတ်အသားပါ! +Documentation ကို ကမ္ဘာ့အကြင်နာဆုံး၊ ပညာရှင်အကောင်းဆုံး ဆရာတွေကို 24/7 ရနိုင်သလို စဉ်ဆက်မပြတ်မှာနေရတဲ့အတိုင်း ယူဆကြပါ။ မနက် ၂ နာရီမှာ ပြဿနာတစ်ခုတွင်ကြုံရလျှင် Documentation က လှပတဲ့ virtual ဖမ်းခေါင်းနဲ့ သင့်အတွက်လိုအပ်တဲ့ ဖြေဆိုချက်ကိုပေးပါတယ်။ အသစ်ထွက်သန့်စင်သည့် လုပ်ဆောင်ချက်တစ်ခုလေ့လာချင်လျှင် Documentation ကို သင့်ပြီးခဲ့တဲ့အတိုင်း အဆင့်ဆင့် ဥပမာတွေနဲ့ ရှင်းပြပေးပါတယ်။ ဘာဖြစ်လို့ အဲ့ဒီအခြေအနေ လုပ်ဆောင်နေတာလဲဆိုတာ နားလည်ဖို့ ကြိုးစားရင် - ဖြေရှင်းပုံကတော့ documentation ဖြစ်ပါတယ်။ -Documentation ကို 24/7 ရရှိနိုင်တဲ့ အတော်လေး သည်းခံပြီး ပညာရှိတဲ့ ဆရာတွေလို ထင်ပါ။ 2 AM မှာ ပြဿနာတစ်ခုမှာ ပိတ်မိနေတယ်လို့ ထင်ပါစေ – Documentation က virtual hug နဲ့ သင့်လိုအပ်တဲ့ အဖြေကို ပေးနိုင်ပါတယ်။ လူတိုင်းပြောနေတဲ့ အလန်းစား feature တစ်ခုကို သင်ယူချင်တယ်လို့ ထင်ပါစေ – Documentation က step-by-step ဥပမာတွေနဲ့ သင့်ကို ကူညီနိုင်ပါတယ်။ တစ်ခုခု ဘာကြောင့် အလုပ်လုပ်တယ်ဆိုတာ နားလည်ချင်တယ်လို့ ထင်ပါစေ – Documentation က အဲဒီအရာကို သင့်အတွက် ရှင်းပြနိုင်ပါတယ်။ +ကျွန်ုပ် ကိုယ်တိုင်အတွေ့အကြုံလည်း ပြောင်းလဲမှုကြီးဖြစ်ခဲ့ပါတယ်။ ဝက်ဘ်ဖန်တီးမှုကမ္ဘာလောကက အလွန်မြန်မြန်တိုးတက်နေပြီး၊ တစိတ်တပိုင်းအားလုံးကို မှတ်မိထားတာ မရှိပါဘူး။ Senior developer ၁၅ နှစ်ကျော်အတွေ့အကြုံရှိသူတွေကိုလည်း အခြေခံ syntax ကို အချိန်ပေးရှာဖွေနေကြတာတွေ မြင်ခဲ့တယ်။ ဒါက အရမ်းနောက်ကျတာရော မဟုတ်ပါဘူး သေချာပါပြီ။ မှတ်ဉာဏ်ကောင်းတာကို မဟုတ်ပါဘူး၊ အဆင်ပြေတဲ့ ဖြေရှင်းချက်တွေကို ပြီးမြောက်မြန်ဆန်စွာ ရှာဖွေချင်တာပါ။ -**အမှန်တရားက ဒီမှာပဲ:** +**အမှန်တကယ် စွမ်းအားတူးဖော်ရာမှာ:** -Professional developer တွေက documentation ကို အများကြီး ဖတ်တယ် – သူတို့ မသိတာကြောင့် မဟုတ်ဘူး၊ web development က မြန်မြန်ဆန်ဆန် ရှေ့ဆက်နေတဲ့အတွက် current ဖြစ်ဖို့ အမြဲလေ့လာရတာပါ။ Documentation က သင့်ကို *ဘယ်လို* အသုံးပြုရမလဲဆိုတာသာမက၊ *ဘာကြောင့်* နဲ့ *ဘယ်အချိန်မှာ* အသုံးပြုရမလဲဆိုတာကိုလည်း နားလည်စေပါတယ်။ +Professional developer တွေ Documentation ကို အချိန်အတော်များစွာ ဖတ်ကြတယ် - ဘာလုပ်နေလည်း မသိသူတွေမဟုတ်ပေမယ့်၊ ဝက်ဘ်ဖန်တီးမှုလောက ပြောင်းလဲနေတဲ့အတွက် အဆက်မပြတ် သင်ယူလိုနေရတာပါ။ ကောင်းမွန်တဲ့ Documentation က သင်ကို ဘယ်လိုအသုံးပြုရမယ်ဆိုတာသာမက ဘာကြောင့်၊ ဘယ်အခါအသုံးပြုရမလဲ ဆိုတာကိုလည်း နားဆင်ရန် ကူညီပေးပါတယ်။ -#### အရေးကြီး Documentation Resources +#### အရေးကြီး Documentation ရင်းမြစ်များ **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Web technology documentation အတွက် gold standard -- HTML, CSS, JavaScript အတွက် comprehensive guide -- Browser compatibility အချက်အလက်တွေ ပါဝင် -- Practical examples နဲ့ interactive demos တွေ ပါဝင် +- ဝက်ဘ်နည်းပညာ Documentation ၏ ရွှေစံချိန်စံညွှန်း +- HTML၊ CSS၊ JavaScript အတွက် ကျယ်ပြန့်သော လမ်းညွှန်များ +- Browser compatibility အချက်အလက်များ ပါဝင်သည် +- လက်တွေ့ ဥပမာများနှင့် interactive demo များ ပါရှိသည် **[Web.dev](https://web.dev)** (Google မှ) -- Modern web development best practices -- Performance optimization guide -- Accessibility နဲ့ inclusive design principle -- Real-world project case studies +- ခေတ်မှီ ဝက်ဘ်ဖန်တီးမှု လုပ်ထုံးလုပ်နည်းများ +- စွမ်းဆောင်ရည် တိုးတက်အောင်လမ်းညွှန်ချက်များ +- စားေပွဲဖက်နှင့် ပါဝင်မှု ဖန်တီးမှုစည်းမျဉ်းများ +- အိမ်တတ်သော စမ်းသပ်မှုများ **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge browser development resources -- Progressive Web App guide -- Cross-platform development insights +- Edge browser အတွက် ဖန်တီးမှုအရင်းအမြစ်များ +- Progressive Web App လမ်းညွှန်ချက်များ +- Cross-platform ဖန်တီးမှု သဘောတူညီချက်များ **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Structured learning curricula -- Industry expert တွေက video course -- Hands-on coding exercise +- သီးသန့်သင်ယူမှု သင်တန်းများ +- စက်မှုလုပ်ငန်းပညာရှင်များမှ ဗီဒီယိုသင့်ဘွဲ့များ +- လက်တွေ့ကုဒ်ရေးမှု လေ့ကျင့်ခန်းများ -> 📚 **Study Strategy**: Documentation ကို မှတ်မထားဖို့ ကြိုးစားမနေပါနဲ့ – အစား Documentation ကို ထိရောက်စွာ navigate လုပ်တတ်ဖို့ လေ့လာပါ။ အမြဲအသုံးပြု references တွေကို bookmark လုပ်ပြီး အချက်အလက်ကို မြန်မြန်ရှာဖွေဖို့ search function တွေကို လေ့ကျင့်ပါ။ +> 📚 **လေ့လာမှုနည်းဗျူဟာ**: Documentation ကို မှတ်မိရန် မကြိုးစားပါနှင့် - သာမန်အားဖြင့် သင်နည်းတူလမ်းညွှန်များအား စနစ်တကျ သွားရေးနိုင်ရန် သင်ယူပါ။ အမြဲအသုံးများသော သတင်းအချက်အလက်များကို Bookmark လုပ်ပြီး ရှာဖွေမှုအင်္ဂါရပ်များကူညီမှုပြုရာ သာမာန်သုံးပါ။ -### 🔧 **Tool Mastery Check: သင့်အတွက် အဓိကအရာက ဘာလဲ?** +### 🔧 **Tool Mastery Check: သင်နှစ်သက်တဲ့ Tool ဘာလဲ?** -**အချိန်ယူပြီး စဉ်းစားပါ:** -- သင့်အတွက် စမ်းသပ်ချင်တဲ့ tool က ဘာလဲ? (မှားတဲ့အဖြေမရှိပါ!) -- Command Line က အခုထိ ကြောက်စရာကောင်းသေးလား၊ ဒါမှမဟုတ် စိတ်ဝင်စားနေပါသလား? -- Browser DevTools ကို သင့်အကြိုက် website တွေမှာ စမ်းသပ်ကြည့်ဖို့ စိတ်ကူးရနိုင်ပါသလား? +**အချိန်ယူပြီး အောက်ပါတို့ရေတွက်ကြည့်ပါ:** +- ဘယ် tool ကို မျှော်လင့်စရာအရ ပထမဆုံးစမ်းသပ်လိုပါသလဲ? (မှားတဲ့အဖြေ မရှိပါ) +- Command line ဟာ ကျွန်တော်/ကျွန်မကို ကြောက်ရွံ့စေတယ်? ဒါမှမဟုတ် စူးစမ်းလိုက်ချင်ပါသလား? +- Browser DevTools ကို သင်ကြိုက်တဲ့ ဝက်ဘ်ဆိုဒ်များနောက်ကွယ် ကြည့်ရှုဖို့ စိတ်ဝင်စားလား? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "တီထွင်သူအချိန်ကိရိယာများနှင့်ဖြုန်းပွားမှု" + "ကုဒ်အယ်ဒီတာ" : 40 + "ဘရောက်ဆာစမ်းသပ်ခြင်း" : 25 + "ကမမ်ဒ်လိုင်း" : 15 + "စာရွက်စာတမ်းဖတ်ခြင်း" : 15 + "ဒက်ဘတ်" : 5 ``` +> **ပျော်စရာ ကပ်လီနက်**: အများဆုံး developer တွေဟာ သူတို့ကုဒ် editor မှာ အချိန် ၄၀% ခန့် ခဏစောင့်ကြည့်တယ်၊ ဒါပေမယ့် စမ်းသပ်ခြင်း၊ သင်ယူခြင်း၊ ပြဿနာဖြေရှင်းခြင်းများမှာ အချိန်အများကြီးသုံးတယ်။ Programming လုပ်တာ ကုဒ်ရေးခြင်းပဲ မဟုတ်ပါဘူး၊ အတွေ့အကြုံဖန်တီးခြင်း ဖြစ်ပါတယ်! -> **စိတ်ဝင်စားစရာအချက်**: Developer တွေက သူတို့ရဲ့ code editor မှာ အချိန် 40% လောက် သုံးတယ်၊ ဒါပေမယ့် testing, learning, နဲ့ problem-solving အတွက် အချိန်အများကြီး သုံးတယ်။ Programming က code ရေးတာပဲ မဟုတ်ဘူး – အတွေ့အကြုံတွေကို ဖန်တီးတာပါ! - -✅ **စဉ်းစားစရာအချက်**: Website တွေကို ဖန်တီးတဲ့ tool တွေ (development) နဲ့ အဲဒီ website တွေကို ဒီဇိုင်းဆွဲတဲ့ tool တွေ (design) ဘယ်လိုကွာခြားမလဲလို့ သင်ထင်ပါသလဲ? အလှပဆုံးအိမ်ကို ဒီဇိုင်းဆွဲတဲ့ architect နဲ့ အဲဒီအိမ်ကို တကယ်တည်ဆောက်တဲ့ contractor တို့လိုပါပဲ။ နှစ်ခုလုံး အရေးကြီးပေမယ့် tool box က မတူပါဘူး! Website တွေ ဘယ်လိုပုံစံနဲ့ အသက်ဝင်လာတယ်ဆိုတာကို ကြီးကျယ်တဲ့အမြင်နဲ့ မြင်နိုင်စေမှာပါ။ +✅ **စိတ်ထဲတွင် စဉ်းစားရန်**: ဝက်ဘ်ဆိုဒ်ဖန်တီးရန် ကိရိယာများနဲ့ နေရာပြောင်းမှု ဒီဇိုင်းကိရိယာများ ဘာကွာခြားကြမလဲ ဆိုတာ စဉ်းစားကြည့်ပါ။ ဒါဟာ လှပတဲ့ အိမ်တစ်လုံး ဒီဇိုင်းရေးတဲ့ ဘဏ္ဍာရေးဆရာနဲ့ အဲဒီအိမ်ကို တည်ဆောက်နေတဲ့ လုပ်သားပန်းချီကြီးကြားက ကွာခြားချက်လိုပါပဲ။ နှစ်ခုလုံးလိုအပ်တယ်၊ ဒါပေမယ့် ကိရိယာကိုလည်း မတူပါဘူး! အဲဒီစဥ်းစားခြင်းက သင့်အား ဝက်ဘ်ဆိုဒ်တွေ ဘယ်လိုဖန်တီးကြတာကို ကျယ်ကျယ်ပြန့်ပြန့် မြင်ရဖို့ ကူညီလိမ့်မယ်။ ## GitHub Copilot Agent Challenge 🚀 -Agent mode ကို အသုံးပြုပြီး အောက်ပါ challenge ကို ပြီးမြောက်ပါ: +Agent mode ကို အသုံးပြု၍ အောက်ပါ စိန်ခေါ်မှုကို ပြီးမြောက်ပါ: -**ဖော်ပြချက်:** Modern code editor သို့မဟုတ် IDE ရဲ့ feature တွေကို စူးစမ်းပြီး Web Developer အနေနဲ့ workflow ကို ဘယ်လိုတိုးတက်စေမလဲဆိုတာ ပြသပါ။ +**ဖော်ပြချက်:** ခေတ်မှီ code editor သို့မဟုတ် IDE ၏ လက္ခဏာများကို ရှာဖွေပြီး ဝက်ဘ်ဖန်တီးမှု အလုပ်လုပ်စဥ်အား တိုးတက်စေသည့် နည်းလမ်းများ ချပြပါ။ -**Prompt:** Visual Studio Code, WebStorm, သို့မဟုတ် cloud-based IDE တစ်ခုကို ရွေးပါ။ Code ရေး, debug လုပ်, သို့မဟုတ် code ကို maintain လုပ်ဖို့ အထောက်အကူပြု feature သို့မဟုတ် extension သုံးခုကို ရွေးပါ။ တစ်ခုချင်းစီအတွက် workflow ကို ဘယ်လိုအကျိုးရှိစေမလဲဆိုတာ အကျဉ်းချုပ် ရေးပါ။ +**Prompt:** Code editor သို့ IDE (Visual Studio Code, WebStorm, ဒါမှမဟုတ် cloud-based IDE တို့မလိုအပ်သည်) တစ်ခု ရွေးပါ။ ကုဒ်ရေးခြင်း၊ debug လုပ်ခြင်း သို့မဟုတ် ကုဒ်ထိန်းသိမ်းမှုကို ပိုမိုမြန်ဆန်စေသော လက္ခဏာ သုံးခု သို့မဟုတ် extension သုံးခုကို ပြပါ။ တစ်ခုစီအတွက် သင့် workflow အတွက် ဘယ်လိုအကျိုးရှိသလဲ ဆိုတာ အကျဥ်းတင်ရှင်းပြပါ။ --- ## 🚀 Challenge -**အိုကေ၊ စုံထောက်၊ သင့်ရဲ့ ပထမဆုံး case အတွက် အဆင်သင့်ဖြစ်ပြီလား?** +**အခု detective ရေ၊ ပထမဆုံးကိစ္စကြီးအတွက် ပြင်ဆင်ပါပြီလား?** + +အခု သင်မှာ အဲဒီ အံ့သြစရာ အထောက်အကူပေး အခြေခံများ ရနေပြီ။ သူတို့ရဲ့ အံ့ဩစရာ programming ကမ္ဘာက တကယ်မျိုးစုံနှင့်စိတ်ဝင်စားဖွယ် ဖြစ်တယ်ဆိုတာ သင်သိနိုင်ဖို့ ကူညီဖို့ စွန့်စားမှုတစ်ခု ကြိုတင်ပြင်ဆင်ထားပါတယ်။ နားထောင်ပါ - အခု code မရေးသေးပါဘူး၊ ဖိအားတစ်ခုမှ မရှိပါဘူး! သင်ဟာ programming language စုံစမ်းသူ တစ်ယောက်တည်းဖြစ်ပြီး ပထမဆုံး စွန့်စားမှုကို တွန်းအားပေးမှာပါ! + +**သင့်တာဝန်၊ လက်ခံပါက:** +1. **ဘာသာစကားစူးစမ်းသူ ဖြစ်ပါ:** တကယ်ကို အလုပ်လုပ်နေရတဲ့ programming languages သုံးခုကို ရွေးချယ်ပါ – ဝက်ဘ်ဆိုဒ်တစ်ခုဖန်တီးတဲ့၊ မိုဘိုင်းအက်ပ်တစ်ခုဖန်တီးတဲ့၊ သိပ္ပံပညာရှင်တွေအတွက်ဒေတာကိုခွဲခြမ်းစိတ်ဖြာတဲ့ တစ်ခုစီ။ တူညီတဲ့ လုပ်ဆောင်ချက် လုပ်နည်း အတွက် မတူညီသော ဥပမာများကို ရှာဖွေပါ။ သုံးသပ်ကြည့်ပါ! ဘယ်လောက် ကွဲပြားနိုင်သလဲဆိုတာ မှတ်မိမယ်! +2. **မူလဇာတ်လမ်းများ ကို ရှာဖွေပါ:** ဘာသာစကား တစ်ခုချင်းစီ မူလမှာ အထူးပြုရာဘာလဲ? အဲဒါက အထူးပါးပျံ့ချနေတာ – programming language တစ်ခုစီကို ဘာဖြေရှင်းဖို့ ဖြစ်လာတာလဲဆိုတာဟာ သိထားဖို့စိတ်ဝင်စားစရာကောင်းပါတယ်။ +3. **အသိုင်းအဝိုင်းများနှင့် တွေ့ဆုံပါ:** ဘာသာစကားအသိုင်းအဝိုင်းတွေအကြောင်း ကြည့်ရှုပါ။ အချို့တွေအလွန်ကြီးမားပြီး developerပေါင်းများစွာ သိရှိဝေစုသလို၊ တချို့က အလွန်ငယ်ငယ်ပြီးလည်း သဲကြားမှုရှိသည်။ သင်နှစ်သက်တဲ့ အသိုင်းအဝိုင်းကို ကြည့်ရှုပါ။ +4. **အသိပေးခံစားချက်နဲ့ လိုက်ပါ:** လက်ရှိအချိန်မှာ သင့်အား အကောင်းဆုံး လက်ခံရရှိသော ဘာသာစကား ဘယ်ဟာလဲ? “ပေါက်ကွဲ” ရွေးချယ်မှုမရှိပါဘူး၊ သင့်ခံစားချက်ကိုသာ လိုက်ပါ! ဘာမှမှား မဟုတ်ပါဘူး၊ နောက်မှ နောက်ထပ် လေ့လာ ကြည့်လို့ရပါတယ်။ + +**အပို detective စွန့်စားမှု**: ဘာသာစကားတစ်ခုချင်းစီက major websites သို့မဟုတ် apps ဘယ်လောက် ဖန်တီးရာ ရှိသလဲ ရှာဖွေပါ။ Instagram, Netflix, သင်မရပ်နိုင်တဲ့ မိုဘိုင်းဂိမ်း ဘယ်လို ဘာသာစကားနဲ့ ဖန်တီးထားတာလဲဆိုတာ သိပြီး အံ့အားသင့်မှာ သေချာပါပဲ! -အခု သင့်မှာ အခြေခံအချက်တွေ ရှိပြီးသားဖြစ်တဲ့အတွက်၊ Programming ကမ္ဘာကြီးရဲ့ အမျိုးမျိုးနဲ့ စိတ်ဝင်စားစရာကောင်းတဲ့အရာတွေကို မြင်နိုင်ဖို့ အခွင့်အရေးတစ်ခု ရှိပါတယ်။ ဒီတော့ – အခုတော့ code ရေးတာမဟုတ်ဘူး၊ ဒါကြောင့် စိတ်ဖိစီးမှုမရှိပါဘူး! သင့်ကို Programming Language Detective အဖြစ် သင့်ရဲ့ ပထမဆုံး စိတ်လှုပ်ရှားစရာ case ကို လုပ်ဆောင်ဖို့ ဖိတ်ခေါ်ပါတယ်! +> 💡 **မေ့မလားနဲ့**: ဒီဘာသာစကားတွေမှာ တကယ် ကျွမ်းကျင်သူ ဖြစ်ဖို့ မဟုတ်ပါဘူး။ ဘာသာစကားတွေရှိရာ အသိုင်းအဝိုင်းကို မိမိအကျဆုံးနေရာရှာဖွေဖို့၊ အကောင်းဆုံးနေရာမှာ ဆုံးဖြတ်တိုင်ပတ်ဖို့ နေရာရှာဖွေတဲ့မှု ဖြစ်ပါတယ်။ အချိန်ယူပြီး ပျော်ပါစေ၊ စူးစမ်းဖို့စေ! -**သင့် mission, သင်လက်ခံဖို့ ဆုံးဖြတ်လျှင်:** -1. **Language Explorer ဖြစ်ပါ**: Website တွေကို ဖန်တီးတဲ့ language တစ်ခု၊ Mobile app တွေကို ဖန်တီးတဲ့ language တစ်ခု၊ Scientist တွေအတွက် data crunching လုပ်တဲ့ language တစ်ခု – အဲဒီ language သုံးခုကို ရွေးပါ။ တစ်ခုချင်းစီမှာ အလွယ်ဆုံး task တစ်ခုကို ဘယ်လိုရေးထားတယ်ဆိုတာကို ရှာပါ။ အဲဒီ task တွေက တူတူလုပ်ပေမယ့် ဘ -## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း +## သင့်ရှာဖွေတွေ့ရှိမှုကို ကျေနပ်အောင် အတူပျော်ကြရအောင်! -**အချိန်ယူပြီး စူးစမ်းလေ့လာပါ၊ ပျော်ရွှင်ပါစေ!** +မင်း ဒီနေ့ အံ့ဖွယ်အချက်အလက်တွေကို များစွာ သိရှိသွားပြီ! ကျွန်တော် အမှန်တကယ် ဝမ်းမြောက်မိပြီး ဒီ အံ့ဩဖွယ်ခရီးစဉ်ကို ကောင်းစွာ ကျင့်သုံးမိကြောင်း မျှော်လင့်ပါတယ်။ စမ်းသပ်ချက်လေးမျိုး မဟုတ်ပါဘူး၊ အမှားကင်းစင်ပြီး ရှင်းလင်းစွာ သင်ယူဖို့ အခမ်းအနားတစ်ခုလိုပါပဲ။ -ဒီနေ့မှာ သင်အများကြီးလေ့လာပြီးဖြစ်ပါတယ်၊ အဲဒါက သင်ဂုဏ်ယူဖို့အကြောင်းပါ! အခုတော့ စိတ်ဝင်စားမှုကိုဖြစ်စေတဲ့အကြောင်းအရာတွေကို စူးစမ်းဖို့အချိန်ရောက်ပါပြီ။ ဒီဟာက အိမ်စာမဟုတ်ပါဘူး – ဒါက စွန့်စားမှုပါ! +[စာသင်ပြီးနောက် စမ်းသပ်မေးခွန်းများ](https://ff-quizzes.netlify.app/web/) -**သင့်ကို စိတ်လှုပ်ရှားစေတဲ့အရာတွေကို ပိုမိုနက်နက်ရှိုင်းရှိုင်းလေ့လာပါ:** +## ပြန်ကြားခြင်းနှင့် ကိုယ်တိုင်လေ့လာမှု -**Programming Language တွေနဲ့ လက်တွေ့လုပ်ဆောင်ပါ:** -- သင့်စိတ်ဝင်စားမှုကိုဖြစ်စေတဲ့ ဘာသာစကား ၂-၃ ခုရဲ့ တရားဝင်ဝက်ဘ်ဆိုဒ်တွေကို သွားလေ့လာပါ။ ဘာသာစကားတိုင်းမှာ သူ့ရဲ့ပုံစံနဲ့ သမိုင်းကြောင်းရှိပါတယ်! -- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), [Replit](https://replit.com/) တို့လို online coding playground တွေကို စမ်းကြည့်ပါ။ စမ်းသပ်ဖို့မကြောက်ပါနဲ့ – ဘာမှမပျက်စီးနိုင်ပါဘူး! -- သင့်အကြိုက်ဆုံး programming language ရဲ့ သမိုင်းကြောင်းကို ဖတ်ရှုပါ။ တကယ်လို့ စိတ်ဝင်စားဖွယ်ကောင်းပြီး ဘာသာစကားတွေ ဘာကြောင့် ဒီလိုအလုပ်လုပ်ရလဲဆိုတာကို နားလည်စေမှာပါ။ +**အချိန်ယူ ကျွမ်းကျင်လာရန် နှင့် ပျော်ပါစေ!** +နေ့တစ်နေ့မှာ အများကြီး လေ့လာခဲ့ပြီ၊ အဲဒါက မျက်နှာမောင်း တစ်ခုပါပဲ! ယခုကော ဘယ်လို စိတ်ဝင်စားစရာရှိလဲ ဆိုတဲ့ ခေါင်းစဉ်တွေကို ရှာဖွေကြည့်ဖို့ ပိုစိတ်လှုပ်ရှားစရာပဲ။ မှတ်ထားပါ၊ ဒါက စာသင်ခန်းအလုပ်မဟုတ်ပါဘူး၊ စွန့်စားခန်းတစ်ခုပါပဲ! -**သင့်ရဲ့ Tools အသစ်တွေနဲ့ ရင်းနှီးပါ:** -- Visual Studio Code ကို ဒေါင်းလုပ်လုပ်ပါ (မလုပ်ရသေးရင်) – အခမဲ့ဖြစ်ပြီး သင်အကြိုက်တွေ့ပါလိမ့်မယ်! -- Extensions marketplace ကို အချိန်အနည်းငယ်ကြာ browse လုပ်ပါ။ ဒါက သင့် code editor အတွက် app store လိုပါပဲ! -- သင့် browser ရဲ့ Developer Tools ကို ဖွင့်ပြီး အဲဒီမှာ click လုပ်ကြည့်ပါ။ အားလုံးကို နားလည်ဖို့မလိုပါဘူး – အဲဒီမှာ ဘာတွေရှိလဲဆိုတာကို ရင်းနှီးဖို့သာ လုပ်ပါ။ +**သင့်စိတ်အားထက်သန်မှုကို နက်ရှိုင်းစွာ ထည့်သွင်းကြည့်ပါ။** -**Community ကို ဝင်ပါ:** -- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), [GitHub](https://github.com/) တို့မှာ developer communities တွေကို follow လုပ်ပါ။ Programming community က အသစ်ဝင်လာသူတွေကို အလွန်ကြိုဆိုပါတယ်! -- YouTube မှာ beginner-friendly coding video တွေကို ကြည့်ပါ။ စတင်နေတဲ့အချိန်က ဘယ်လိုဖြစ်တယ်ဆိုတာကို သတိရတဲ့ creators တွေ အများကြီးရှိပါတယ်။ -- ဒေသခံ meetups တွေကို ဝင်ပါ၊ ဒါမှမဟုတ် online communities တွေကို join လုပ်ပါ။ Developer တွေက အသစ်ဝင်လာသူတွေကို ကူညီဖို့အကြိုက်ဆုံးပါ! +**ပရိုဂရမ်မင်းဘာသာစကားတွေနဲ့ လက်တွေ့ကျကျ လုပ်ဆောင်ပါ။** +- သင့်စိတ်ဝင်စားမှုကို ဖမ်းဆီးထားတဲ့ ဘာသာစကား ၂-၃ ခုရဲ့ တရားဝင် ဝက်ဘ်ဆိုဒ်တွေကို လည်ပတ်ကြည့်ပါ။ တစ်ခုချင်းစီမှာ ကိုယ့်ဘာသာ စတိုင်နဲ့ အကြောင်းအရာသီးသန့်တွေ ရှိပါတယ်! +- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ဒါမှမဟုတ် [Replit](https://replit.com/) ကဲ့သို့ အွန်လိုင်းကုဒ် ရေးနိုင်တဲ့နေရာတွေကို စမ်းကြည့်ပါ။ စမ်းသပ်ဖို့ မကြောက်ပါနဲ့ – ဘာမှ မဖျက်ရင် မိမိကောင်းမှုမျိုးမျိုးလည်း ရနိုင်ပါတယ်! +- သင်နှစ်သက်တဲ့ ဘာသာစကား ဘယ်လို တည်ရှိလာခဲ့တာလဲ ဆိုတာကို ဖတ်ရှုလိုက်ပါ။ တကယ်ပါပဲ၊ ဒီအစပြုမှုများက အလွန်စိတ်ဝင်စားဖွယ်ဖြစ်ပြီး ဘာသာစကားတွေ ဘာကြောင့် ဒီလို အသုံးပြုကြတာလဲ ကို နားလည်စေပါတယ်။ -> 🎯 **နောက်ဆုံး သတိပေးချင်တာက**: သင် coding wizard ဖြစ်ဖို့ တစ်ညလုံးမှာ မျှော်လင့်ထားတာမဟုတ်ပါဘူး! အခုတော့ သင်ဝင်ရောက်ဖို့ရှိတဲ့ အံ့မခန်းတဲ့ကမ္ဘာကို သိရှိဖို့သာ ဖြစ်ပါတယ်။ အချိန်ယူပါ၊ ခရီးကို ပျော်ရွှင်ပါ၊ သတိထားပါ – သင်ဂုဏ်ပြုတဲ့ developer တစ်ဦးချင်းစီဟာ သင်အခုရှိနေတဲ့နေရာမှာ တစ်ချိန်ကရှိခဲ့ပြီး စိတ်လှုပ်ရှားမှုနဲ့ အနည်းငယ်မူးမူးမောမောဖြစ်ခဲ့ပါတယ်။ ဒါက အလွန်ပုံမှန်ဖြစ်ပြီး သင်မှန်ကန်စွာလုပ်ဆောင်နေတယ်ဆိုတာကို ဆိုလိုပါတယ်။ +**သင့် အသုံးပြုမည့်ကိရိယာ အသစ်များနဲ့ သဘာဝကျစွာ နေထိုင်ကြည့်ပါ။** +- Visual Studio Code ကို ဒေါင်းလုပ်မလုပ်ဖူးရင် ဒေါင်းလုပ်ဆွဲပါ – အခမဲ့ပါ၊ သင့်အတွက် အရမ်းကြိုက်မယ်။ +- Extensions Marketplace ကို မိနစ်ပိုင်းကြည့်ကြည့်ပါ။ ဒါဟာ ကိုယ်ရဲ့ ကုဒ်ရေးစက်အတွက် အက်ပ်ဆိုင်လို့တူပါတယ်! +- သင့် ဘရောက်ဇာ Developer Tools ကို ဖွင့်ပြီး တစ်ချို့နေရာတွေ ဆလတ်ဆလတ် နှိပ်ကြည့်ပါ။ အားလုံးကို နားလည်ဖို့ မလိုပါဘူး – ရှိတဲ့ အရာတွေကို သဘောကျဖို့ လေ့လာပါ။ -## အိမ်စာ +**အသိုင်းအဝိုင်းမှာ ပါဝင်ပါ။** +- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ဒါမှမဟုတ် [GitHub](https://github.com/) မှာ Developer အသိုင်းအဝိုင်းတွေကို ချီးမြှင့်လိုက်ပါ။ ပရိုဂရမ်မင်းအသိုင်းအဝိုင်းက အတွေ့အကြုံ မရှိသေးသူတွေကို ဂရုစိုက် တက်ကြွစွာ လက်ခံတတ်ပါတယ်! +- YouTube ပေါ်မှာ စကင်းစရိုက် ကုဒ်ရေး ဖွင့်ကြည့် videos တွေကို ကြည့်ပါ။ စတင်၍ ပြောင်းလဲနေသူများ ခံစားရသလို အဖြစ်မှတ်ထားသူ အသက်ဝင်သူများ အများကြီး ရှိတယ်။ +- ဒေသခံ Meetup များ သို့မဟုတ် အွန်လိုင်းအသိုင်းအဝိုင်းတွေကို ပါဝင်စဉ်းစားပါ။ Developer များက လူအသစ်တွေကို ကူညီပေးဖို့ ကြိုက်နှစ်သက်တယ်။ + +> 🎯 **နားဆင်ထည့်သွင်းပါ၊ ကျွန်တော်/သူ မေတ္တာရပ်ခံချင်တာမှာ**: တစ်ညအတွင်း ကုဒ်ရေး ဘာမော့မဆိုသမား ဖြစ်ဖို့ မမျှော်လင့်ပါနဲ့! ယခုအချိန်မှာတော့ သင် ပါဝင်ဖို့ရှိတဲ့ ဒီ အံ့သြဖွယ် ကမ္ဘာအသစ်နဲ့ မိတ်ဆက်နေတယ်။ အချိန်ယူပြီး ခရီးစဉ်ကို ပျော်ရွှင်ပါ၊ နှလုံးထားပါ – သင်ကို မျှော်လင့်ကြည့်ရတဲ့ Developer တစ်ယောက်ချင်းစီဟာ ဒီနေရာမှာရောက်တုန်းက သင့်လိုပဲ စိတ်လှုပ်ရှားမှုတွေနဲ့ အနည်းငယ် စိတ်မသာမှုတွေနဲ့ ရှိခဲ့ကြတာပါ။ ဒါက လုံးဝ သာမာန်ဖြစ်ခြင်းဖြစ်ပြီး သင်ဟာ မှန်ကန်စွာ လုပ်ဆောင်နေပြီဆိုရတာပါ။ + +## Assignment [Reading the Docs](assignment.md) -> 💡 **အိမ်စာအတွက် အနည်းငယ်သတိပေးချက်**: ကျွန်တော်အရမ်းကြိုက်မိတာက သင်မလေ့လာရသေးတဲ့ tools တွေကို စူးစမ်းဖို့ပါ! ကျွန်တော်တို့ပြောခဲ့တဲ့ editors, browsers, command line tools တွေကို ကျော်သွားပါ – အံ့မခန်းတဲ့ development tools တွေရှိပြီး အဲဒီမှာ စူးစမ်းဖို့အချိန်ရောက်ပါပြီ။ အလုပ်လုပ်နေဆဲဖြစ်ပြီး community တွေက အလွန်ကူညီတတ်တဲ့ tools တွေကို ရှာဖွေပါ (tutorials တွေက အကောင်းဆုံးဖြစ်ပြီး သင်အခက်အခဲတွေ့တဲ့အခါမှာ ကူညီပေးမယ့်သူတွေရှိပါတယ်။) +> 💡 **သင့် အလုပ်အပ်တာအတွက် ငြိမ်သက်မှုချေးချက်**: မကျွန်တော်တို့ မဖော်ပြဖူးသေးတဲ့ ကိရိယာတွေကို ရှာဖွေကြည့်တာကို အရမ်းချစ်လိမ့်မယ်! ကျွန်တော်တို့ အကြောင်းပြောထားတဲ့ Editor, Browser, Command line tools များကို ရပ်ပါ – ထူးခြား အံ့သြဖွယ် Development tools တွေက ထပ်ပြီး ရှာဖွေရန် စောင့်ကြည့်နေပါတယ်။ ဖြစ်နိုင်ရင် တီထွင်ပြုပြင်မှု အမြဲတမ်းရှိပြီး လန်းဆန်းတဲ့ အသိုင်းအဝိုင်းပါဝင်သော ကိရိယာတွေကို ရွေးချယ်ပါ (ဒီလူတွေဟာ သင် ပံ့ပိုးမှုလိုအပ်တဲ့အခါမှာ ကူညီပေးဖို့ အကောင်းဆုံး Tutorial တွေနဲ့ လူတွေ ဖြစ်လေ့ရှိပါတယ်)။ --- -## 🚀 သင့် Programming ခရီးစဉ် အချိန်ဇယား +## 🚀 သင့် ပရိုဂရမ်းမင်း ခရီးစဉ် အချိန်ဇယား ### ⚡ **နောက် ၅ မိနစ်အတွင်း လုပ်နိုင်တာ** -- [ ] သင့်စိတ်ဝင်စားမှုကိုဖြစ်စေတဲ့ programming language websites ၂-၃ ခုကို bookmark လုပ်ပါ -- [ ] Visual Studio Code ကို ဒေါင်းလုပ်လုပ်ပါ (မလုပ်ရသေးရင်) -- [ ] သင့် browser ရဲ့ DevTools (F12) ကို ဖွင့်ပြီး website တစ်ခုခုမှာ click လုပ်ကြည့်ပါ -- [ ] Programming community တစ်ခုကို join လုပ်ပါ (Dev.to, Reddit r/webdev, Stack Overflow) +- [ ] စိတ်ဝင်စားဖွယ်ကောင်းတဲ့ ပရိုဂရမ်းမင်းဘာသာစကား ဝက်ဘ်ဆိုဒ် ၂-၃ ခု Bookmark လုပ်ပါ +- [ ] Visual Studio Code ကို ဒေါင်းလုပ်ဆွဲပါ (မလုပ်ဖူးရင်) +- [ ] ဘရောက်ဇာ DevTools (F12) ဖွင့်ပြီး မည်သည့် ဝက်ဘ်ဆိုဒ် မဆို လှည့်ယှဉ်ကြည့်ပါ +- [ ] တစ်ခုသော ပရိုဂရမ်းမင်း အသိုင်းအဝိုင်း (Dev.to, Reddit r/webdev, Stack Overflow) ကို ပါဝင်ဆက်သွယ်ပါ ### ⏰ **ဒီနာရီအတွင်း ပြီးမြောက်နိုင်တာ** -- [ ] Post-lesson quiz ကို ပြီးမြောက်ပြီး သင့်အဖြေတွေကို ပြန်လည်သုံးသပ်ပါ -- [ ] VS Code ကို GitHub Copilot extension နဲ့ setup လုပ်ပါ -- [ ] Programming language ၂ ခုမှာ "Hello World" ဥပမာကို online မှာ စမ်းကြည့်ပါ -- [ ] YouTube မှာ "Day in the Life of a Developer" video တစ်ခုကို ကြည့်ပါ -- [ ] Programming language detective work ကို စတင်ပါ (challenge မှာ) - -### 📅 **သင့်ရဲ့ တစ်ပတ်တာ စွန့်စားမှု** -- [ ] အိမ်စာကို ပြီးမြောက်ပြီး development tools အသစ် ၃ ခုကို စူးစမ်းပါ -- [ ] Developer ၅ ဦး ဒါမှမဟုတ် programming accounts တွေကို social media မှာ follow လုပ်ပါ -- [ ] CodePen ဒါမှမဟုတ် Replit မှာ တစ်ခုခုကို တည်ဆောက်ကြည့်ပါ (တောင် "Hello, [Your Name]!" ဆိုပြီး) -- [ ] Developer blog post တစ်ခုကို ဖတ်ရှုပါ (coding journey အကြောင်း) -- [ ] Virtual meetup တစ်ခုကို join လုပ်ပါ ဒါမှမဟုတ် programming talk တစ်ခုကို ကြည့်ပါ -- [ ] Online tutorials တွေနဲ့ သင်ရွေးချယ်ထားတဲ့ ဘာသာစကားကို စတင်လေ့လာပါ - -### 🗓️ **တစ်လတာ ပြောင်းလဲမှု** -- [ ] ပထမဆုံး project သေးသေးလေးကို တည်ဆောက်ပါ (တစ်ခုခုရိုးရိုးလေး webpage တစ်ခုတောင် ရပါပြီ!) -- [ ] Open-source project တစ်ခုကို ပါဝင်ပါ (documentation fixes နဲ့ စတင်ပါ) -- [ ] Programming journey ကို စတင်နေတဲ့သူတစ်ဦးကို mentor လုပ်ပါ -- [ ] Developer portfolio website ကို ဖန်တီးပါ -- [ ] ဒေသခံ developer communities ဒါမှမဟုတ် study groups တွေနဲ့ ဆက်သွယ်ပါ -- [ ] သင့်ရဲ့ နောက် learning milestone ကို စတင်စီစဉ်ပါ - -### 🎯 **နောက်ဆုံး Reflection Check-in** - -**သင့်ခရီးစဉ်ကို ဆက်လက်လုပ်ဆောင်မတိုင်မီ ခဏတာဂုဏ်ပြုပါ:** -- ဒီနေ့ programming အကြောင်းမှာ စိတ်လှုပ်ရှားစေတဲ့အရာတစ်ခုက ဘာလဲ? -- Tools ဒါမှမဟုတ် concept တစ်ခုကို ပထမဆုံး စူးစမ်းချင်တာက ဘာလဲ? -- ဒီ programming ခရီးစဉ်ကို စတင်ဖို့ သင့်ခံစားချက်က ဘယ်လိုလဲ? -- Developer တစ်ဦးကို အခုချိန်မှာ မေးချင်တဲ့မေးခွန်းတစ်ခုက ဘာလဲ? +- [ ] သင်ခန်းစာပြီးနောက် စစ်တမ်း ဖြေပြီး မဟာဗျူဟာတွေအပေါ် ပြန်လည်စဉ်းစားပါ +- [ ] VS Code ကို GitHub Copilot extension ဖြင့် ပြင်ဆင်ပါ +- [ ] အွန်လိုင်းမှာ ဘာသာစကား ၂ မျိုးနဲ့ "Hello World" နမူနာ လုပ်ကြည့်ပါ +- [ ] YouTube ပေါ်မှာ "Day in the Life of a Developer" ဗီဒီယို ကြည့်ပါ +- [ ] ဘာသာစကား စုံစမ်းဖော်ထုတ်မှုများ (ချန်လှပ်) စတင်ပါ + +### 📅 **သင့် အပတ်တစ်ပတ် ခရီးစဉ်** +- [ ] အလုပ်အပ်တာ ပြီးစီးပြီး နောက် ၃ မျိုး Development tools ရှာဖွေပါ +- [ ] Developer များ သို့မဟုတ် programming အကောင့် ၅ ခု follower လုပ်ပါ +- [ ] CodePen ဒါမှမဟုတ် Replit မှာ သေးငယ်တဲ့ တည်ဆောက်မှုတစ်ခုစမ်းဆောင်ပါ ("Hello, [Your Name]!" ပါ) +- [ ] Developer ဘလော့ဂ် တစ်ခုကို တစ်ခုဖတ်ပါ၊ တစ်ယောက်ရဲ့ ကုဒ်ရေး ခရီးစဉ်ကို ဖတ်ရှု့ +- [ ] Virtual meetup တစ်ခု သို့မဟုတ် programming စကားဝိုင်းတစ်ခု ဝင်ပါ +- [ ] သင် ရွေးချယ်ထားတဲ့ ဘာသာစကားကို အွန်လိုင်းသင်ခန်းစာဖြင့် သင်ယူပါ + +### 🗓️ **သင့် လ ပြည့် ခရီးစဉ် ပြောင်းလဲမှု** +- [ ] ပထမဆုံး သေးငယ်တဲ့ Project တစ်ခု တည်ဆောက်ပါ (လွယ်ကူတဲ့ ဝက်ဘ်စာမျက်နှာတစ်ခုပါ) +- [ ] Open-source project တစ်ခုတွင် လှည့်လည်ပါ (အများအားဖြင့် စာရွက်စာတမ်း အသေးစိတ် ပြင်ဆင်ခြင်း) +- [ ] ပရိုဂရမ်းမင်း ခရီးစဉ် စတင်သူ ခေါ်သူတစ်ယောက်ကို မန်တော် ဒ်ဖြစ်ပါ +- [ ] သင့် Developer Portfolio Website တည်ဆောက်ပါ +- [ ] ဒေသခံ Developer အဖွဲ့များ သို့ Study Group များနှင့် ဆက်သွယ်ပါ +- [ ] နောက်ထပ် သင်ယူမည့် အဆင့်စီမံကိန်းများ စီစဉ်ပါ + +### 🎯 **နောက်ဆုံး ပြန်လည် မေးမြန်းခြင်း** + +**ရှေ့ဆက်ရန်မပြီးခင်၊ ချီးမွမ်းချိန်တစ်ခု တွေ့ပါလား:** +- ဒီနေ့ သင့်ကို စိတ်လှုပ်ရှားစေတဲ့ Programming အချက်တစ်ခုက ဘာလဲ။ +- အရင်ဆုံး ရှာဖွေလိုတဲ့ ကိရိယာ သို့မဟုတ် သဘောတရား ဘာလဲ။ +- ဒီ ပရိုဂရမ်းမင်း ခရီးစဉ် စတင်ဖို့ ဘယ်လို ခံစားနေရပါသလဲ။ +- ယခုလက်ရှိ Developer တစ်ယောက်ကို မေးချင်တဲ့ မေးခွန်း တစ်ခု ရှိပါသလား။ ```mermaid journey - title Your Confidence Building Journey - section Today + title သင့်ယုံကြည်မှုတည်ဆောက်ခြင်းခရီး + section ယနေ့ Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section ဒီအပတ် Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section နောက်လ Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **သတိထားပါ**: ကျွမ်းကျင်သူတိုင်းဟာ တစ်ချိန်က beginner ဖြစ်ခဲ့ပါတယ်။ Senior developer တစ်ဦးချင်းစီဟာ သင်အခုခံစားနေရတဲ့အတိုင်း စိတ်လှုပ်ရှားမှုနဲ့ အနည်းငယ်မူးမူးမောမောဖြစ်ခဲ့ပါတယ် – အဲဒါက အံ့မခန်းတဲ့အရာတွေကို စူးစမ်းဖို့ စိတ်ဝင်စားမှုကို ဆိုလိုပါတယ်။ သင်အံ့မခန်းတဲ့ company မှာ ရှိနေပြီး ဒီခရီးစဉ်က အလွန်အမင်းအံ့မခန်းတဲ့အရာဖြစ်မှာပါ။ Programming ရဲ့ အံ့မခန်းတဲ့ကမ္ဘာကို ကြိုဆိုပါတယ်! 🎉 +> 🌟 **မေ့မလားနဲ့**: တစ်ဦးချင်းစီ က ပညာရှင် ဖြစ်ရန် အစက စတင်သူတစ်ယောက်ပါပဲ။ ကြီးမားတဲ့ Developer များ ဘာကြောင့်လဲဆိုတော့ သင့်လိုပဲ စိတ်လှုပ်ရှားပြီး၊ အနည်းငယ် စိတ်ရှုပ်ထွေးမှုတွေကို ခံစားခဲ့ကြတယ်။ သင်ဟာ စပျစ်တဲ့ပေါင်းကောင်းတဲ့ လူပတ်ဝန်းကျင်ထဲမှာ ရှိပြီး ဒီခရီးစဉ်ဟာ အံ့သြဖွယ် ဖြစ်တော့မှာပါ။ ပရိုဂရမ်းမင်းကမ္ဘာလုံလောက်တဲ့ နေရာကြီးသို့ ကြိုဆိုပါတယ်! 🎉 --- -**အကြောင်းကြားချက်**: -ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ \ No newline at end of file + +**အလြန္စိုးရိမ္ခ်က္** +ဤစာတမ္း၌ [Co-op Translator](https://github.com/Azure/co-op-translator) ဟုေခၚေသာ AI ဘာသာျပန္ဝန္ေဆာင္မွုကို အသံုးျပဳျပီး ဘာသာျပန္ထားျခင္းျဖစ္သည္။ စိစစ္မွန္ကန္မႈအတြက္ႀကိဳးစားေနၾကေသာ္လည္း၊ စက္ယန္႔ဘာသာျပန္မ်ားတြင္ အမွားမ်ား သို႔မဟုတ္မွားယြင္းခ်က္မ်ား ပါဝင္ႏိုင္ေၾကာင္း သတိျပဳၾကပါေစ။ မူရင္းစာတမ္းသည္ မိခင္ဘာသာစကားျဖင့္ ရွိျခင္းေၾကာင့္ အတည္ၿပဳရမည့္ စာတမ္းျဖစ္သည္။ အေရးႀကီးေသာ အခ်က္အလက္မ်ားအတြက္ ပရဖက္ရွင္နယ္ လူသားဘာသာျပန္ေရာက္ခြင့္ယူသင့္ပါသည္။ ဤဘာသာျပန္ခ်က္ကို အသံုးျပဳလ်က္ျဖစ္ေသာ တြယ္တမ္း သို႔မဟုတ္ မမွန္ကန္မႈမ်ားအတြက္ ေတာင္းပန္ျခင္းမရွိပါ။ + \ No newline at end of file diff --git a/translations/my/AGENTS.md b/translations/my/AGENTS.md index 335ae27fa..908aef3d4 100644 --- a/translations/my/AGENTS.md +++ b/translations/my/AGENTS.md @@ -2,27 +2,27 @@ ## Project Overview -ဤသည်မှာ ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို စတင်သူများအား သင်ကြားပေးရန် အတွက် ပညာပေး သင်ရိုးညွှန်းတမ်း စုစည်းမှု ဖြစ်သည်။ သင်ရိုးညွှန်းတမ်းသည် Microsoft Cloud Advocates မှ တီထွင်ထားသော ၁၂ ပတ်ကြာ သင်တန်း အပြည့်အစုံဖြစ်ပြီး၊ JavaScript၊ CSS နှင့် HTML を ကိုက်ညီသော လက်တွေ့ သင်ခန်းစာ ၂၄ ခု ပါဝင်သည်။ +ဤအရာသည် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို စတင္ရင်းနှီးသူများကို သင်ကြားပေးရန် ရည်ရွယ်ထားသော ပညာရေးသင်ရိုးအစီအစဉ်၏ ဂိုဒေါင်ဖြစ်သည်။ သင်ရိုးအစီအစဉ်သည် Microsoft Cloud Advocates များမှ ဖန်တီးထားသော ၁၂ အပတ် ကြာသည့် အဝန်းလည်းပြည့်သည့် သင်ခန်းစာများပါဝင်ပြီး JavaScript၊ CSS နှင့် HTML ကို လက်တွေ့ လေ့ကျင့်ခန်း ၂၄ ခုအပါအဝင်ဖြစ်သည်။ ### Key Components -- **ပညာရေး အကြောင်းအရာများ**: ပရောဂျက် အခြေပြု မော်ဂျူး များ အပြည့်အစုံဖြင့် စီစဉ်ထားသော သင်ခန်းစာ ၂၄ ခု -- **လက်တွေ့ ပရောဂျက်များ**: Terrarium၊ Typing Game၊ Browser Extension၊ Space Game၊ Banking App၊ Code Editor နှင့် AI Chat Assistant -- **အပြန်အလှန် ဖြေဆိုမေးခွန်းများ**: မေးခွန်း ၃ မျိုး ပါဝင်သည့် ၄၈ ပတ်လည် စစ်တမ်းများ (သင်ခန်းစာ မတိုင်မီ/ပြီးနောက် အကဲဖြတ်ရန်) -- **ဘာသာစကားစုံ ထောက်ခံမှု**: GitHub Actions မှ တက်အလိုက် ဘာသာစကား ၅၀ ကျော်အတွက် အလိုအလျှောက် ဘာသာပြန်ချက်များ -- **နည်းပညာများ**: HTML၊ CSS၊ JavaScript၊ Vue.js 3၊ Vite၊ Node.js၊ Express၊ Python (AI ပရောဂျက်များအတွက်) +- **ပညာရေး အကြောင်းအရာ**: စီမံကိန်းအခြေခံ မော်ဂျူးများ အတွင်း ဖွဲ့စည်းထားသော ၂၄ ခု သင်ခန်းစာ +- **လက်တွေ့ စီမံကိန်းများ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, နှင့် AI Chat Assistant +- **အပြန်အလှန် စစ်ဆေးမေးခွန်းများ**: မေးခွန်း ၃ ခုနှင့် ၄၈ ခု (သင်ခန်းစာမတိုင်မှီ/ပြီးနောက်သုံးသပ်မှုများ) +- **ဘာသာစကား များစွာ ပံ့ပိုးမှု**: GitHub Actions မှတစ်ဆင့် ၅၀ ကျော်ဘာသာစကား အလိုအလျောက် ဘာသာပြန်ခြင်း +- **နည်းပညာများ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI စီမံကိန်းများအတွက်) ### Architecture -- သင်ခန်းစာအခြေပြု ပညာရေး စုစည်းမှု -- သင်ခန်းစာ တစ်ခုချင်းလျှင် README၊ ကုဒ်နမူနာနှင့် ဖြေရှင်းချက်များ ပါရှိသည် -- အခြားပရောဂျက်များကို သီးသန့်လမ်းကြောင်းများတွင် ထားရှိသည် (quiz-app နှင့် သင်ခန်းစာ ပရောဂျက်များအတော်များများ) -- GitHub Actions ဖြင့် ဘာသာပြန်စနစ် (co-op-translator) -- Docsify မှ တင်သွင်းခဲ့သော စာရွက်စာတမ်းများကို PDF အဖြစ်လည်း ရနိုင်သည် +- သင်ခန်းစာအခြေခံ ပညာရေးဂိုဒေါင် +- သင်ခန်းစာတိုင်းတွင် README၊ ကုဒ်ဥပမာများနှင့် ဖြေရှင်းနည်းများပါဝင် +- ကွဲပြားသော ဒိုင်ရေးတရီများတွင် သီးခြား စီမံကိန်းများ (quiz-app, သင်ခန်းစာစီမံကိန်းစွန့်) +- GitHub Actions (co-op-translator) ကို အသုံးပြုသည့် ဘာသာပြန်စနစ် +- Docsify မှတဆင့် စာတမ်းများ ပေးပို့ပြီး PDF အဖြစ်ရနိုင်ခြင်း ## Setup Commands -ဤ repository သည် မူလက ပညာရေး အကြောင်းအရာ အသုံးပြုမှု အတွက် ဖြစ်သည်။ အထူးပြု ပရောဂျက်များနှင့် တွဲဖက် အသုံးပြုရန်အတွက်: +ဤဂိုဒေါင်ကို အဓိကအားဖြင့် ပညာရေးအကြောင်းအရာ အသုံးပြုမှုနှင့် ရည်ရွယ်သည်။ သီးခြား စီမံကိန်းများတွင် အလုပ်လုပ်ရန်: ### Main Repository Setup @@ -36,9 +36,9 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # ဖွံ့ဖြိုးတိုးတက်မှု ဆာဗာ စတင်ပါ -npm run build # ထုတ်လုပ်မှုပိုင်းအတွက် တည်ဆောက်ပါ -npm run lint # ESLint ကို အလုပ်လုပ်ပါ +npm run dev # ဖွံ့ဖြိုးမှုဆာဗာကို စတင်ပါ +npm run build # ထုတ်လုပ်မှုအတွက် တည်ဆောက်ပါ +npm run lint # ESLint ကို chạyပါ ``` ### Bank Project API (Node.js + Express) @@ -46,9 +46,9 @@ npm run lint # ESLint ကို အလုပ်လုပ်ပါ ```bash cd 7-bank-project/api npm install -npm start # API ဆာဗာ စတင်ပါ +npm start # API ဆာဗာကို စတင်ပါ npm run lint # ESLint ကို လုပ်ဆောင်ပါ -npm run format # Prettier ဖြင့် အမျိုးအစား ပြုပြင်ပါ +npm run format # Prettier ဖြင့် ဖော်မတ်လုပ်ပါ ``` ### Browser Extension Projects @@ -56,7 +56,7 @@ npm run format # Prettier ဖြင့် အမျိုးအစား ပ ```bash cd 5-browser-extension/solution npm install -# Browser အမျိုးအစားကို သတ်မှတ်သည့် extension တွေကို တင်သွင်းနည်းကို လိုက်နာပါ။ +# ဘရောက်ဇာအထူးတိကျသော extension ပေါင်းထည့်နည်းလမ်းညွှန်များကိုလိုက်နာပါ ``` ### Space Game Projects @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# browser တွင် index.html ကိုဖွင့်ပါ သို့မဟုတ် Live Server ကိုအသုံးပြုပါ +# index.html ကို browser တွင်ဖွင့်ပါ သို့မဟုတ် Live Server ကို အသုံးပြုပါ ``` ### Chat Project (Python Backend) @@ -72,7 +72,7 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN ပတ်ဝန်းကျင်အပြောင်းအလဲကို သတ်မှတ်ပါ +# GITHUB_TOKEN ပတ်ဝန်းကျင်အပြောင်းအလဲအစားထိုးပြုလုပ်ရန် python api.py ``` @@ -80,29 +80,29 @@ python api.py ### For Content Contributors -1. **တင်သွင်းသူအနေဖြင့် repository ကို fork ပြုလုပ်ပါ** -2. **ထို fork ကို လုပ်ငန်းစဉ်တစ်ခုအနေဖြင့် clone ပြုလုပ်ပါ** -3. **ပြောင်းလဲမှုများအတွက် အဆင့်အသစ် တည်ဆောက်ပါ** -4. သင်ခန်းစာ အကြောင်းအရာ သို့မဟုတ် ကုဒ် နမူနာများ ပြင်ဆင်ပါ -5. သက်ဆိုင်ရာ ပရောဂျက် လမ်းကြောင်းများတွင် ကုဒ်ပြင်ဆင်မှုများ စမ်းသပ်ပါ -6. ဆောင်ရွက်မှု လမ်းညွှန်ချက်များနှင့်ကိုက်ညီစွာ pull request တင်ပြပါ +1. သင့် GitHub အကောင့်သို့ လှည်းရိုက်ပါ +2. သင့်လှည်းကို ဒေသခံတွင် ကွန်ပျူတာသို့ကလုဏ်းလုပ်ပါ +3. မိမိပြင်ဆင်မည့်အတွက် ဘရင့်အသစ်တစ်ခု ဖန်တီးပါ +4. သင်ခန်းစာအကြောင်းအရာ သို့မဟုတ် ကုဒ်ဥပမာများ ပြုပြင်ပါ +5. သင့်အပြောင်းအလဲများကို သက်ဆိုင်ရာ စီမံကိန်း ဒိုင်ရေးတရီများတွင် စမ်းသပ်ပါ +6. ထောက်ပံ့မှုလမ်းညွှန်များကို လိုက်နာ၍ Pull Request တင်ပါ ### For Learners -1. Repository ကို fork သို့ clone ပြုလုပ်ပါ -2. သင်ခန်းစာ လမ်းကြောင်းများကို ဆက်တိုက် သွားပါ -3. သင်ခန်းစာ တစ်ခုပြီးတစ်ခု README ဖိုင်များ ဖတ်ရှုပါ -4. https://ff-quizzes.netlify.app/web/ တွင် သင်ခန်းစာမတိုင်မီ စစ်တမ်းများ ဖြေဆိုပါ -5. သင်ခန်းစာ ဖိုလ်ဒါများတွင် ကုဒ်နမူနာများ ဖြေရှင်းပါ -6. အပ်ဒိတ်များနှင့် စိန်ခေါ်မှုများ အကောင်အထည်ဖော်ပါ -7. သင်ခန်းစာပြီးနောက် စစ်တမ်းများ ဖြေဆိုပါ +1. ဂိုဒေါင်ကို လှည်းရိုက်သို့မဟုတ် ကလုဏ်းလုပ်ပါ +2. သင်ခန်းစာ ဒိုင်ရေးတရီများအား တစိတ်တပိုင်း နဲ့သွားပါ +3. သင်ခန်းစာတိုင်း၏ README ဖိုင်များ ဖတ်ပါ +4. https://ff-quizzes.netlify.app/web/ တွင် သင်ခန်းစာမတိုင်မှီ စစ်ဆေးမေးခွန်းများ ဖြေဆိုပါ +5. သင်ခန်းစာဒိုင်ရေးတရီများတွင် ကုဒ်ဥပမာများ အလုပ်လုပ်ပါ +6. အပ်စာများနှင့် စိန်ခေါ်မှုများ ပြီးစီးပါ +7. သင်ခန်းစာပြီးနောက် စစ်ဆေးမေးခွန်းများ ဖြေဆိုပါ ### Live Development -- **စာရွက်စာတမ်းများ**: မွမ်းမံရေးရာ root တွင် `docsify serve` လုပ်ပါ (port 3000) -- **Quiz App**: quiz-app လမ်းကြောင်း၌ `npm run dev` လုပ်ပါ -- **ပရောဂျက်များ**: HTML ပရောဂျက်များအတွက် VS Code Live Server extension ကို အသုံးပြုပါ -- **API ပရောဂျက်များ**: အသီးသီး API လမ်းကြောင်းများတွင် `npm start` လုပ်ပါ +- **စာတမ်းများ**: root မှ `docsify serve` အမိန့် ဖွင့်ပါ (port 3000) +- **Quiz App**: quiz-app ဒိုင်ရေးတရီတွင် `npm run dev` ဖြင့် သက်ဝင်အောင်လုပ်ပါ +- **စီမံကိန်းများ**: HTML စီမံကိန်းများအတွက် VS Code Live Server extension အသုံးပြုပါ +- **API စီမံကိန်းများ**: သက်ဆိုင်ရာ API ဒိုင်ရေးတရီတွင် `npm start` ပြုလုပ်ပါ ## Testing Instructions @@ -110,85 +110,85 @@ python api.py ```bash cd quiz-app -npm run lint # ကုဒ်စတိုင်ပြဿနာများကို စစ်ဆေးပါ -npm run build # ဆောက်လုပ်မှု အောင်မြင်မှုကို စစ်ဆေးပါ +npm run lint # ကုဒ်ပုံစံပြဿနာများကိုစစ်ဆေးပါ +npm run build # ဆောက်လုပ်မှုအောင်မြင်မှုကိုအတည်ပြုပါ ``` ### Bank API Testing ```bash cd 7-bank-project/api -npm run lint # ကုတ်စံနှုန်းပြဿနာများကို စစ်ဆေးပါ -node server.js # အမှားမရှိဘဲ ဆာဗာစတင်သည်ကို စစ်ဆေးပါ +npm run lint # ကုဒ်ပုံစံပြဿနာများကိုစစ်ဆေးပါ +node server.js # ပြတ်မှုများမရှိဘဲ ဆာဗာစတင်မှုကိုအတည်ပြုပါ ``` ### General Testing Approach -- ဤသည် ပညာရေး စုဆောင်းမှုဖြစ်ကာ အလိုအလျောက် စမ်းသပ်မှု မပြည့်စုံပါ -- လက်လုပ်စမ်းသပ်မှု အများအားဖြင့် အောက်ပါများကို ဦးတည်သည် - - - ကုဒ်နမူနာများ အမှားကင်းစွာ လည်ပတ်နိုင်ခြင်း - - စာရွက်စာတမ်းများရှိ link များ မှန်ကန်မှုရှိခြင်း - - ပရောဂျက် များ အောင်မြင်စွာ တည်ဆောက်ခြင်း - - နမူနာများသည် ထိရောက်ဆုံးနည်းလမ်းများကို လိုက်နာခြင်း +- ဤသည်မှာ စုံလုံသော အလိုအလျောက် စမ်းသပ်မှုများ မပါဝင်သည့် ပညာရေးဂိုဒေါင်ဖြစ်သည် +- လက်တွေ့စမ်းသပ်မှုတွင် အာရုံစိုက်ရန် + - ကုဒ်ဥပမာများ အမှားမရှိပြေးနိုင်ခြင်း + - စာတမ်း တွင် လင့်ခ်များ သင့်တော်စွာ လည်ပတ်ခြင်း + - စီမံကိန်း အောင်မြင်စွာ တည်ဆောက်ခြင်း + - ဥပမာများသည် အကောင်းဆုံး လေ့လာသင်ယူနည်းများကို လိုက်နာခြင်း ### Pre-submission Checks -- package.json ပါဝင်သည့် လမ်းကြောင်းများတွင် `npm run lint` လုပ်ပါ -- markdown link များ မှန်ကန်ကြောင်း စစ်ဆေးပါ -- ဘရိုက်ဇာသို့ node.js တွင် ကုဒ်နမူနာများ စမ်းသပ်ပါ -- ဘာသာပြန်ချက်များ၏ ဖွဲ့စည်းမှု ကို ထိန်းသိမ်းထားမှုကို စစ်ဆေးပါ +- package.json ပါဝင်သည့် ဒိုင်ရေးတရီများတွင် `npm run lint` အလုပ်လုပ်ပါ +- markdown link များ သေချာစွာ စစ်ဆေးပါ +- ကုဒ်ဥပမာများအား browser သို့မဟုတ် Node.js တွင် စမ်းသပ်ပါ +- ဘာသာပြန်မှုသိမ်းထားမှု တိကျမှန်ကန်ကြောင်း စစ်ဆေးပါ ## Code Style Guidelines ### JavaScript -- အခေတ်သစ် ES6+ စနစ် အသုံးပြုပါ -- ပရောဂျက်များတွင် ပါဝင်သည့် standard ESLint ဖိုင်များကို လိုက်နာပါ -- ပညာရေးအတွက် သိသာသော variable နှင့် function နာမည်များ အသုံးပြုပါ -- သင်ယူသူများအတွက် လေ့လာရန် မှတ်ချက်များ ထည့်သွင်းပါ -- Prettier ဖြင့် ဖော်မတ်လုပ်ခြင်း +- ယနေ့ခေတ် ES6+ စတိုင်များ အသုံးပြုပါ +- စီမံကိန်းများတွင် ပေးထားသော အခြေခံ ESLint ဖိုင်များကို လိုက်နာပါ +- ပညာရေးအတွက် မျက်မှောက်နားလည်မှုလွယ်ကူရန် သေချာသည့် အမျိုးအမည်များ အသုံးပြုပါ +- သင်ယူလိုသူများအတွက် အကြောင်းပြုချက်များ ထည့်သွင်းရေးသားပါ +- Prettier ဖြင့် ပုံစံချိန်ညှိထားသောနေရာများတွင် အသုံးပြုပါ ### HTML/CSS -- Semantic HTML5 element များ အသုံးပြုပါ -- ပြန်လည်တုံ့ပြန်မှု ဒီဇိုင်း အရေးပါသည် -- သန့်ရှင်းသော class နာမည်ပုံစံများ -- CSS နည်းလမ်းများကို သင်ယူသူများအတွက် ရှင်းလင်း ဖော်ပြထားသော မှတ်ချက်များ +- Semantic HTML5 အကြောင်းအရာအသုံးပြုပါ +- ရွေ့လျားတုံ့ပြန်မှု ဒီဇိုင်း ကို ထည့်သွင်းပါ +- ကလပ်အမည် များ ဖေါ်ပြပုံကွက်ကျစွာရေးသားပါ +- CSS နည်းပညာများကို သင်ယူသူများအတွက် ရှင်းလင်းဖေါ်ပြမှု များ ထည့်ပါ ### Python -- PEP 8 စတိုင်လ် လမ်းညွှန်ချက်များ -- ပညာရေးအတွက် ရှင်းလင်းသော ကုဒ် နမူနာများ -- သင်ယူမှု အတွက် အချို့နေရာများတွင် type hints ထည့်သွင်းထားသည် +- PEP 8 စတိုင် လမ်းညွှန်များ လိုက်နာပါ +- ပညာရေးအတွက် သေချာရှင်းလင်းသော ကုဒ်ဥပမာများ +- သင်ယူမှုအတွက် အထောက်အကူဖြစ်စေရန် Type hints အသုံးပြုပါ ### Markdown Documentation -- အကြောင်းအရာ ဖော်ပြရာတွင် ခေါင်းစဉ်သွေးကြောင်း ထားရှိခြင်း -- ဘာသာပြန်မှု ရှိသော code block များ -- နောက်ထပ် အရင်းအမြစ်များ သို့လင့်ခ်များ -- `images/` ဖိုလ်ဒါများတွင် ရှုပ်ထွေးချက်နှင့် ပုံများ -- သက်ဆိုင်ရာ Accessiblity အတွက် ပုံများ၏ Alt စာသားများ +- ခေါင်းစဉ်များ ဖော်ပြမှု တိကျရှင်းလင်းမှု +- ဘာသာပြန်ဖြစ်သည့် ကုဒ်ဘလော့များနှင့် ဘာသာဖော်ပြမှု +- အပိုဆောင်း ရင်းမြစ်များအား လင့်ခ်များပါဝင်သည် +- `images/` ဒိုင်ရေးတရီပြည့်စုံအပါအဝင် ပုံများနှင့် ရုပ်ပုံများ +- အားလုံးလက်လှမ်းမီစေရန် ဗဟိုသတ်မှတ် Alt texts များ ### File Organization -- သင်ခန်းစာများကို နံပါတ်ခွဲ စီစဉ်ထားသည် (1-getting-started-lessons, 2-js-basics, စသည်) -- ပရောဂျက် တစ်ခုချင်းစီတွင် `solution/` နှင့် မကြာခဏ `start/` သို့မဟုတ် `your-work/` ဖိုလ်ဒါများ ပါဝင်သည် -- သင်ခန်းစာ အလိုက် `images/` ဖိုလ်ဒါများတွင် ပုံများ သိမ်းဆည်းထားသည် -- ဘာသာပြန်ချက်များကို `translations/{language-code}/` ဖိုလ်ဒါများတွင် ထားရှိသည် +- သင်ခန်းစာများကို တန်းတူ နေရာချထားမှု (1-getting-started-lessons, 2-js-basics, စသည်) +- စီမံကိန်းတိုင်းတွင် `solution/` နှင့် မကြာခဏ `start/` သို့မဟုတ် `your-work/` ဒိုင်ရေးတရီများရှိသည် +- သင်ခန်းစာအလိုက် `images/` ဖိုလ်ဒါထဲတွင် ပုံများ သိုလှောင်ထားခြင်း +- ဘာသာပြန်များကို `translations/{language-code}/` ဖိုလ်ဒါတွင် သိမ်းဆည်းထားခြင်း ## Build and Deployment ### Quiz App Deployment (Azure Static Web Apps) -quiz-app ကို Azure Static Web Apps တွင် တင်ရန် စတင်ပြင်ဆင်ထားသည်: +quiz-app သည် Azure Static Web Apps များတွင် တည်ဆောက်ရန် စံချိန်တင်ထားသည်- ```bash cd quiz-app -npm run build # dist/ ဖိုလ်ဒါကို ဖန်တီးသည် -# main သို့ ပို့ပြီးနောက် GitHub Actions workflow ဖြင့် တပ်ဆင်သည် +npm run build # dist/ ဖိုလဒါကို ဖန်တီးသည် +# main တွင် push လုပ်သည့်အခါ GitHub Actions workflow ဖြင့် Deploy လုပ်သည် ``` -Azure Static Web Apps စနစ်: +Azure Static Web Apps စနစ်ဖောင့်ကွက်များ- - **App location**: `/quiz-app` - **Output location**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` @@ -197,86 +197,85 @@ Azure Static Web Apps စနစ်: ```bash npm install # docsify-to-pdf ကို ထည့်သွင်းပါ -npm run convert # docs မှ PDF ဖိုင် ပေါ်ထွက်ပါ +npm run convert # docs မှ PDF ကို ဖန်တီးပါ ``` ### Docsify Documentation ```bash -npm install -g docsify-cli # Docsify ကို ထိပ်တန်းမှာ ထည့်သွင်းပါ -docsify serve # localhost:3000 တွင် ဝန်ဆောင်မှု ပေးပါ +npm install -g docsify-cli # Docsify ကို စုစုပေါင်း ထည့်သွင်းပါ +docsify serve # localhost:3000 တွင် ဝန်ဆောင်မှုပေးပါ ``` ### Project-specific Builds -ပရောဂျက်တိုင်းမှာ ကိုယ်ပိုင် build လုပ်စနစ် ရှိနိုင်သည် - -- Vue ပရောဂျက်များ: `npm run build` ဖြင့် production bundle များ ဖန်တီးသည် -- Static ပရောဂျက်များ: build လုပ်စဉ် မရှိ၊ ဖိုင်များကို တိုက်ရိုက် ပေးဆောင်သည် +စီမံကိန်းတိုင်းတွင် ကိုယ်ပိုင် တည်ဆောက်မှု လုပ်ငန်းစဉ်များ ရှိနိုင်သည်- +- Vue စီမံကိန်းများ: `npm run build` ဖြင့် ထုတ်လုပ်မှု bundle များ ပြုလုပ်ခြင်း +- Static စီမံကိန်းများ: တည်ဆောက်မှုပြုလုပ်မှု လိုအပ်မှု မရှိပါ၊ ဖိုင်များကို တိုက်ရိုက် ဝန်ဆောင်မှုပေးခြင်း ## Pull Request Guidelines ### Title Format -ပြောင်းလဲမှု ရှိသော နေရာကို ပြောကြားသော ပြတ်သားရှင်းလင်းသော ခေါင်းစဉ်အသုံးပြုပါ: -- `[Quiz-app] Add new quiz for lesson X` -- `[Lesson-3] Fix typo in terrarium project` -- `[Translation] Add Spanish translation for lesson 5` -- `[Docs] Update setup instructions` +ပြောင်းလဲမှု နေရာအတိုင်း ဖြည့်သွင်းဖေါ်ပြရန်- +- `[Quiz-app] သင်ခန်းစာ X အတွက် Quiz အသစ် ထည့်ရန်` +- `[Lesson-3] Terrarium စီမံကိန်းတွင် အမှားစာလုံးပြင်ဆင်ခြင်း` +- `[Translation] သင်ခန်းစာ ၅ အတွက် စပိန်ဘာသာပြန်ထည့်ခြင်း` +- `[Docs] Setup လမ်းညွှန်ချက်များ ပြင်ဆင်ခြင်း` ### Required Checks -PR တင်ပြမည်မဆို အောက်ပါများကို အရင်စစ်ဆေးရန် - +PR တင်ပြီးမတိုင်မီ- 1. **ကုဒ်အရည်အသွေး**: - - သက်ဆိုင်ရာ ပရောဂျက် လမ်းကြောင်းများတွင် `npm run lint` လုပ်ပါ - - အမှားများ နှင့် သတိပေးချက်များကို ပြင်ဆင်ပါ + - သက်ဆိုင်ရာ စီမံကိန်း ဒိုင်ရေးတရီတွင် `npm run lint` ကို အသုံးပြု၍ အမှားများ ဖော်ထုတ်ရန် + - လုံးလုံးမကျန် အမှား နှင့် သတိပေးချက် များ ပြင်ဆင်ပါ -2. **Build စစ်ဆေးခြင်း**: - - လိုအပ်လျှင် `npm run build` လုပ်ပါ - - Build အမှား မရှိကြောင်း သေချာပါစေ +2. **တည်ဆောက်မှု စစ်ဆေးခြင်း**: + - `npm run build` (လိုအပ်ပါက) အလုပ်လုပ်၍ အမှားမရှိစေရန် -3. **Link များ စစ်ဆေးခြင်း**: - - markdown link များအားလုံး စစ်ဆေးပါ - - ပုံ ရှိ/မရှိကို စစ်ဆေးပါ +3. **လင့်ခ် စစ်ဆေးမှု**: + - markdown link များအားလုံး ရှင်းလင်းမှန်ကန်စွာ လည်ပတ်ခြင်း + - ဓာတ်ပုံ နှင့် ရုပ်ပုံများ ရောက်ရှိမှု -4. **အကြောင်းအရာ သုံးသပ်ခြင်း**: - - သရုပ်ဖော်ချက် နှင့် သဒ္ဒါ ပြင်ဆင်ပါ - - ကုဒ်နမူနာများမှန်ကန်၍ ပညာရေး အတွက် အသုံးဝင်မှုရှိကြောင်း သေချာပါစေ - - ဘာသာပြန်ချက် မူလ အနက်ရည်ကို ထိန်းသိမ်းထားသည် +4. **အကြောင်းအရာ ပြန်လည် သုံးသပ်ခြင်း**: + - စကားလုံးမှား၊ သဒ္ဒါမှားများကို စစ်ချက်ပေးခြင်း + - ကုဒ်ဥပမာများ သင်ယူရန်တိကျမှန်ကန်စွာ ရှိခြင်း + - ဘာသာပြန်များသည် မူလ အဓိပ္ပါယ်ကို ထိန်းသိမ်းထားခြင်း ### Contribution Requirements -- Microsoft CLA ကို သဘောတူမှတ်ချက် ပြုလုပ်ထားရမည် (ပထမဆုံး PR မှာ အလိုအလျောက် စစ်ဆေးသည်) -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ကို လိုက်နာရမည် -- အသေးစိတ် လမ်းညွှန်ချက်များအတွက် [CONTRIBUTING.md](./CONTRIBUTING.md) ကို ကြည့်ရှုပါ -- PR ဖော်ပြချက်တွင် issue နံပါတ်များ ပါဝင်မှု ရှိသင့်သည် +- Microsoft CLA ကို သဘောတူပါ (PR ပထမဆုံးပြုလုပ်ချိန် တွင် အလိုအလျောက် စစ်ဆေးမည်) +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) လိုက်နာပါ +- အသေးစိတ် လမ်းညွှန်ချက်များအတွက် [CONTRIBUTING.md](./CONTRIBUTING.md) ကို ကြည့်ပါ +- PR ဖေါ်ပြချက်တွင် လိုအပ်ပါက ရှေ့ပြေး ဥပဒေအမှတ်များကို ထည့်သွင်းပါ ### Review Process -- PR များကို ထိန်းသိမ်းသူများနှင့် အသိုင်းအဝိုင်းမှ ပြန်လည် သုံးသပ်ကြမည် -- ပညာရေးအစဉ့်ကြေညာမှုကို ဦးစားပေးသည် -- ကုဒ်နမူနာများမှာ ခေတ်မီပြီး အကောင်းဆုံး နည်းလုပ်ပုံများအတိုင်း ဖြစ်သင့်သည် -- ဘာသာပြန်ချက်များကို တိကျမှုနှင့် ယဉ်ကျေးမှုသေချာမှုအရ သုံးသပ်သည် +- PR များသည် ပြုပြင်သူများနှင့် မိသားစုအသိုင်းအဝိုင်း အကြား ကြည့်သုံးစစ်ဆေးခြင်း +- ပညာရေး ရည်ရွယ်ချက် ဦးစားပေး စစ်ဆေးခြင်း +- ကုဒ်ဥပမာများသည် လောလောဆယ် အကောင်းဆုံး လေ့လာသင်ယူနည်းများနှင့် ကိုက်ညီစေရန် +- ဘာသာပြန်အရည်အသွေးနှင့် ယဉ်ကျေးမှု သင်္ကေတတပ်ဖွဲ့မှု ရှိအောင် စစ်ဆေးခြင်း ## Translation System ### Automated Translation -- GitHub Actions အား co-op-translator workflow ဖြင့် အသုံးပြုသည် -- ၅၀ ကျော် ဘာသာစကားများကို အလိုအလျောက် ဘာသာပြန်သည် -- မူလ ဖိုင်များသည် ပဋိညာဉ် လမ်းကြောင်းများတွင် ရှိသည် -- ဘာသာပြန်ထုတ်ဖိုင်များကို `translations/{language-code}/` တွင် သိမ်းဆည်းသည် +- GitHub Actions တွင် နေရာယူထားသည့် co-op-translator workflow ကို အသုံးပြုသည် +- ၅၀ ကျော်ဘာသာစကားသို့ အလိုအလျောက် ဘာသာပြန်သည် +- မူရင်းဖိုင်များသည် မူလ ဒိုင်ရေးတရီများတွင် +- ဘာသာပြန်ထားသောဖိုင်များသည် `translations/{language-code}/` တွင် ### Adding Manual Translation Improvements -1. `translations/{language-code}/` ထဲမှ ဖိုင်ကို ရှာဖွေပါ -2. ဖွဲ့စည်းမှုကို ထိန်းသိမ်း၍ တိုးတက်အောင် ပြင်ဆင်ပါ -3. ကုဒ် နမူနာများ လုပ်ငန်းမှန်ကြောင်း သေချာပါစေ -4. ဒေသိယ quiz အကြောင်းအရာများကို စမ်းသပ်ပါ +1. `translations/{language-code}/` တွင် ဖိုင် ရှာပါ +2. ဖွဲ့စည်းပုံကို ထိန်းသိမ်းပြီး တိုးတက်အောင် ပြုပြင်ပါ +3. ကုဒ်ဥပမာများ အသုံးပြုနိုင်မှု ရှိသည်ကို သေချာစေရန် +4. ဒေသဆိုင်ရာ Quiz အကြောင်းအရာ စမ်းသပ်ပါ ### Translation Metadata -ဘာသာပြန် ဖိုင်များတွင် မီတာဒေတာ ခေါင်းစီးများ ပါဝင်သည် - +ဘာသာပြန် ဖိုင်များတွင် metadata ခေါင်းစဉ်ပါရှိသည်- ```markdown -**မူရင်းအကြောင်းကြားချက်** -ဤစာတမ်းကို AI ဘာသာပြန်ဆော့ဖ်ဝဲဖြစ်သော [Co-op Translator](https://github.com/Azure/co-op-translator) အသုံးပြုပြီး ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် မှန်ကန်မှုကို မျှော်လင့်နေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ချက်များတွင် မှားယွင်းမှု သို့မဟုတ် အတိအကျမမှန်ကန်မှုများ ရှိနိုင်သည်ကို သတိပြုပါရန် မေတ္တာရပ်ခံအပ်ပါသည်။ မူရင်းစာတမ်းကို စနစ်တကျ အသုံးပြုခဲ့သင့်သော အကြောင်းအရာ အရင်းအမြစ်အဖြစ် ယူဆရမည်။ အရေးကြီးသော သတင်းအချက်အလက်များအတွက် သင့်လျော်သည့် လူမှုဆက်ဆံရေး ဘာသာပြန်ဌာနမှ အတည်ပြုခြင်း လိုအပ်ပါသည်။ ဤဘာသာပြန်ချက်ကို အသုံးပြုခြင်းကြောင့် ဖြစ်ပေါ်လာနိုင်သည့် နားမလည်မှုများ သို့မဟုတ် မှားယွင်းသောဖော်ပြချက်များအတွက် ကျွန်ုပ်တို့သည် တာဝန်မပေးပါ။ +**သတိပြုချက်** +ဤစာရွက်ကို AI ဘာသာပြန်ခြင်းဆော့ဖ်ဝဲဖြစ်သော [Co-op Translator](https://github.com/Azure/co-op-translator) ဖြင့် ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည်တိကျမှန်ကန်မှုအတွက် ကြိုးပမ်းနေသော်လည်း အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မှားယွင်းချက်များ ရှိနိုင်သည်ကို သိရှိထားရန် မေတ္တာရပ်ခံအပ်ပါသည်။ မူရင်းစာရွက်ကို မူလဘာသာဖြင့်သာ မှန်ကန်သည့် မူရင်းအရင်းအမြစ်အဖြစ်ယူဆသင့်ပါသည်။ အရေးကြီးသည့် သတင်းအချက်အလက်များအတွက် ကျွမ်းကျင်သော လူသားဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ချက်ကို အသုံးပြုမှုကြောင့် ဖြစ်ပေါ်လာသော မည်သည့် ပဋိပက္ခ သို့မဟုတ် မှားနေမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မကောက်ခံပါ။ \ No newline at end of file diff --git a/translations/my/README.md b/translations/my/README.md index 1677b72f6..85e05fc2a 100644 --- a/translations/my/README.md +++ b/translations/my/README.md @@ -1,207 +1,222 @@ -# Web Development for Beginners - A Curriculum +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ! +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) -Azure AI Foundry Discord ပြည်သူ့အသိုင်းအဝိုင်းတွင် ပါဝင်ဆက်သွယ်ပါ - -Web Development for Beginners - A Curriculum - -Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ! - -Azure AI Foundry Discord အဖွဲ့အစည်းတွင် ပါဝင်ဆက်သွယ်ပါ +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Web Development for Beginners - A Curriculum +# စတင်လေ့လာသူများအတွက် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု - သင်ရိုးအစီအစဉ် -Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ ပြည့်စုံသော သင်တန်းဖြင့် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို လေ့လာပါ။ ၂၄ ပါး သင်ခန်းစာတစ်ခုချင်းစီမှာ JavaScript၊ CSS နှင့် HTML ကို terrariums၊ browser extensions နှင့် space games တို့ကဲ့သို့ လက်တွေ့ပရောဂျက်များဖြင့် ဆွေးနွေးသွားပါသည်။ မေးမြန်းခွင့်များ၊ ဆွေးနွေးချက်များနှင့် လက်တွေ့တာဝန်များတွင် ပါဝင်ပါ။ ကျွန်ုပ်တို့၏ ထိရောက်သော ပရောဂျက်အခြေပြု သင်ကြားနည်းဖြင့် သင့်ကျွမ်းကျင်မှုများ တိုးတက်စေပြီး စွမ်းရည်သိမြင်မှုများကို တိုးမြှင့်ပါ။ ယခုခေတ်မှာ သင့်ကုဒ်ရေးသားခြင်း ခရီးစဉ်ကို စတင်ပါ! +Microsoft Cloud Advocates မှ ၁၂ အပတ်ကြာ စုံလင်အောင် စီစဉ်ထားသော ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို သင်ယူလိုက်ပါ။ ၂၄ ခန်းစာတိုင်း၌ JavaScript, CSS, နှင့် HTML ကို terrariums, browser extensions, နှင့် space games ကဲ့သို့ လက်တွေ့လုပ်ငန်းစီမံချက်များဖြင့် အာရုံစိုက်လေ့လာပါ။ စာမေးပွဲများ၊ ဆွေးနွေးပြောဆိုမှုများနှင့် လက်တွေ့အလုပ်များနှင့် ပါဝင်ဆောင်ရွက်ပါ။ ကျွမ်းကျင်မှုကို တိုးတက်စေပြီး အသိပညာကို ကောင်းမွန်စွာ သွင်းယူနိုင်ရန် လမ်းညွှန်ချက်အပြည့်အစုံဖြင့် သင်ကြားပေးပါသည်။ ယခု နည်းပညာလမ်းစဥ်ကို စတင်လိုက်ပါ! -Azure AI Foundry Discord အဖွဲ့အစည်းတွင် ပါဝင်ဆက်သွယ်ပါ +Azure AI Foundry Discord အသိုင်းအဝိုင်းတွင် ပါဝင်ဆက်သွယ်ပါ။ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -ဒီအရင်းအမြစ်များကို အသုံးပြုကာ စတင်ရန်အတွက် အောက်ပါ အဆင့်ဆင့်အတိုင်း လုပ်ဆောင်ပါ- -1. **Repository ကို Fork လုပ်ပါ**- Click [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Repository ကို Clone လုပ်ပါ**- `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Azure AI Foundry Discord တွင် ပါဝင်၍ ကျွမ်းကျင်သူများနှင့် သမားတန်း Developer များကို တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4) +ဤအရင်းအမြစ်များကို အသုံးပြုစတင်ရန် အောက်ပါအဆင့်များကို လိုက်နာလိုက်ပါ။ +1. **Repository ကို Fork လုပ်ပါ**: နှိပ်ပါ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Azure AI Foundry Discord ထဲကို ဝင်ရောက်ပြီး ကျွမ်းကျင်သူများနှင့် အတူတူ Developer များနှင့် တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 ဘာသာစကားများ အများအပြားကို ထောက်ပံ့ခြင်း +### 🌐 ဘာသာစကားစွမ်းဆောင်ရည်အမျိုးမျိုး -#### GitHub Action (အလိုအလျောက် & အမြဲသက်တမ်းရှိ) မှတဆင့် ထောက်ပံ့ထားပါသည် +#### GitHub Action ဖြင့် ထောက်ပံ့သည် (အလိုအလျောက် လုပ်ဆောင်ပြီး အမြဲအသစ်အဆန်းဖြစ်နေသည်) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](./README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **ဒေသတွင်းတွင် Clone လုပ် သုံးသင့်သလား?** - -> ဤ repository တွင် ဘာသာစကား ၅၀ ကျော်သည့် ဘာသာပြန်အသုံးအနှုန်းများ ပါဝင်ပြီး ဒေါင်းလုပ် အရွယ်အစားကို မှန်ကန်စွာ တိုးမြှင့်သည်။ ဘာသာပြန်များ မပါပဲ Clone လုပ်ရန် sparse checkout ကို အသုံးပြုပါ- +> **ဒေသအလို local သို့ Clone လုပ်ချင်ပါသလား?** +> +> ဒီ repository တွင် ဘာသာစကား ၅၀ ကျော်အပြောင်းအလဲများ ပါဝင်ပြီး ဒေါင်းလုပ်အရွယ်အစားကို ကွဲပြားစေပါသည်။ ဘာသာပြန် ထည့်မထားပဲ clone လုပ်ရန် sparse checkout ကို အသုံးပြုနိုင်ပါသည်။ +> +> **Bash / macOS / Linux:** > ```bash > 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):** +> ```cmd +> 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" +> ``` +> +> ဒီနည်းလမ်းက သင့်ကို သင်ခန်းစာအပေါ် မှန်ကန်ပြီး ပိုမိုမြန်ဆန်စွာ လုပ်ဆောင်နိုင်မှာ ဖြစ်ပါတယ်။ -**ထောက်ပံ့လိုသော ဘာသာတစ်ခြား အပိုများကို [ဤနေရာတွင်](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) ကြည့်ရှုနိုင်ပါသည်** +**ထပ်မံ ဘာသာစကားများကို ထောက်ပံ့လိုပါက [ဒီမှာ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) ဖတ်ရှုနိုင်ပါသည်။** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _သင်သည် ကျောင်းသားတစ်ဦးဖြစ်ပါသလား?_ +#### 🧑‍🎓 _သင်တန်းသားလား?_ -[**Student Hub စာမျက်နှာ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) သို့ ဝင်ရောက်ကြည့်ရှုပါ၊ ဒီမှာ စတင်လေ့လာသူများအတွက် အရင်းအမြစ်များ၊ ကျောင်းသား ပက်(များ)နှင့် အခမဲ့ အသိမှတ်ပြုလက်မှတ် ဝေါချက်ရရှိနိုင်သော နည်းလမ်းများကို တွေ့နိုင်သည်။ လစဉ်အကြောင်းအရာများကို ပြောင်းလဲ၍ သင်ကြားမှု များပြားလာသည့်အတွက် ဒီစာမျက်နှာကို Bookmark ထား၍ လေ့လာပြီး ကြည့်ရှုရန် အကြံပြုသည်။ +[**Student Hub စာမျက်နှာကို သွားရောက်ပါ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)။ ဒီနေရာမှာ စတင်လေ့လာသူ အသုံးများ, သင်တန်းသားပက်ကေ့များ၊ နှင့် အခမဲ့ စာမေးပွဲရေးသူ လက်မှတ်ဗောင်ချာလက်ချပေး နည်းလမ်းများတွေ့ရပါမယ်။ လစဉ် အကြောင်းအရာများ ပြောင်းလဲလာတဲ့အခါ ဒီစာမျက်နှာကို bookmark လုပ်ထားဖို့ အကြံပြုပါတယ်။ -### 📣 ကြေညာချက် - GitHub Copilot Agent mode အသုံးပြု၍ ပြီးစီးရန် လုပ်ဆောင်ရမည့် စိန်ခေါ်မှုအသစ်များ! +### 📣 ကြေညာချက် - GitHub Copilot Agent mode အစီအစဉ်အသစ်များ ပြီးမြောက်ရန် -အသစ် ထပ်ထည့်ပြီးသား စိန်ခေါ်မှုများကို "GitHub Copilot Agent Challenge 🚀" ဟု မဟုတ်တော့မှုစာမျက်နှာများတွင် ရှာဖွေကြည့်ပါ။ ဤသည်မှာ GitHub Copilot နှင့် Agent mode အသုံးပြု၍ ပြီးစီးရမည့် စိန်ခေါ်မှုအသစ်တစ်ခု ဖြစ်သည်။ Agent mode ကို မသုံးဖူးပါက၊ ၎င်းသည် စာသား ဖန်တီးခြင်းသာမက ဖိုင်တွေ ဖန်တီး၊ ပြင်ဆင်ခြင်း၊ command များ ဆောင်ရွက်ခြင်း စသည်ဖြင့် ထပ်ဆင့် အလုပ်လုပ်နိုင်သည်။ +အသစ်ထည့်သွင်းထားသော စိန်ခေါ်မှုများ, အများဆုံးခန်းများတွင် “GitHub Copilot Agent Challenge 🚀” စိန်ခေါ်မှု ကို ရှာဖွေကြည့်ပါ။ GitHub Copilot နဲ့ Agent mode ကို အသုံးပြုပြီး ပြီးမြောက်စေတဲ့ စိန်ခေါ်မှုအသစ်ဖြစ်ပါတယ်။ Agent mode ကို မသုံးဖူးသူများအတွက် ပြောရရင် စာသားထုတ်ပေးခြင်းအပြင် ဖိုင်ဖန်တီးခြင်း၊ ဖိုင်တည်းဖြတ်ခြင်း ၊ command များ run လုပ်ခြင်း စသည့် လုပ်ဆောင်ချက်များလည်း လုပ်နိုင်ပါတယ်။ -### 📣 ကြေညာချက် - _Generative AI ကို အသုံးပြု၍ တည်ဆောက်မည့် ပရောဂျက် အသစ်_ +### 📣 ကြေညာချက် - _Generative AI ကို အသုံးပြု၍ လုပ်ဆောင်နိုင်မယ့် ပရောဂျက်အသစ်_ -Generative AI နည်းပညာ အသုံးပြု၍ AI အကူအညီပရောဂျက် အသစ် ထပ်ထည့်ပြီး ဖြစ်ပါသည်၊ [project](./9-chat-project/README.md) ကို ကြည့်ပါ။ +AI Assistant ပရောဂျက်အသစ် ထပ်မံတိုးချဲ့ပြီးသားဖြစ်သည်၊ သွားနေရေးကြည့်ပါ [project](./9-chat-project/README.md) -### 📣 ကြေညာချက် - _JavaScript အတွက် Generative AI သင်ခန်းစာအသစ်_ အသစ် ထွက်ရှိခဲ့ပါပြီ +### 📣 ကြေညာချက် - _JavaScript အတွက် Generative AI နဲ့ ပတ်သတ်သည့် သင်ရိုးအစီအစဉ်အသစ်_ -ကျွန်ုပ်တို့၏ Generative AI သင်ခန်းစာအသစ်ကို မကျန်သင့်ပါနဲ့! +ကျွန်ုပ်တို့၏ Generative AI သင်ရိုးအသစ်မမေ့ပါနှင့်! -စတင်ရန် [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားရောက်ကြည့်ရှုပါ! +စတင်ရန် [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားရောက်ကြည့်ရှုလိုက်ပါ! ![Background](../../translated_images/my/background.148a8d43afde5730.webp) -- အခြေခံမှ RAG အထိ ကိုယ်ပိုင်သင်ခန်းစာများ။ -- GenAI နှင့် ကျွန်ုပ်တို့၏ companion app ကို အသုံးပြု၍ သမိုင်းတုန်းက ဇာတ်ကောင်များနှင့် အပြန်အလှန် ဆက်သွယ်နိုင်ပါသည်။ -- နှစ်သက်ဖွယ်ကောင်းသော ဝတ္ထုဖော်ပြချက်၊ အချိန်ခရီးစဉ် ပြုလုပ်ပါ။ +- အခြေခံမှ RAG အထိ သင်ကြားမှုများပါရှိသည်။ +- သမိုင်းကျန်_characters_ နှင့် GenAI နှင့် ကျွန်ုပ်တို့ app တို့ဖြင့် ဆက်သွယ်နိုင်သည်။ +- ပျော်စရာပါဝင်ပြီး ဇာတ်လမ်းတစ်ခုလို အချိန်ခရီးသွားနိုင်ပါသည်။ ![character](../../translated_images/my/character.5c0dd8e067ffd693.webp) -သင်ခန်းစာတစ်ခုချင်းစီတွင် လုပ်ဆောင်ရမည့်တာဝန်၊ အသိပညာ စစ်ဆေးခြင်းနှင့် စိန်ခေါ်မှုတစ်ခု ပါဝင်သည်။ လေ့လာနေစဉ်မှာ - + +ခန်းစာတိုင်းတွင် အလုပ်ကိုထပ်မံပြီးမြောက်ရေးတာဝန်၊ နားလည်မှုစစ်ဆေးမှုနှင့် စိန်ခေါ်မှုတစ်ခုပါဝင်ပြီး အောက်ဖော်ပြပါအကြောင်းအရာများကိုလေ့လာဖို့လမ်းညွှန်ပေးပါသည်။ - Prompting နှင့် prompt engineering -- စာသားနှင့် ပုံများ ဖန်တီးခြင်း app များ -- ရှာဖွေရေး app များ +- စာသားနှင့် ပုံများ ဆော့ဖ်ဝဲ ဖန်တီးခြင်း +- ရှာဖွေရေးဆော့ဖ်ဝဲများ -စတင်ရန် [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပါ။ +စတင်ရန် [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပါ! -## 🌱 စတင်ရန် -> **ကျောင်းဆရာများအတွက်**, ကျွန်ုပ်တို့သည် [ဒီသင်ခန်းစာကို အသုံးပြုနည်းအကြံပြုချက်](for-teachers.md) များကို ထည့်သွင်းပေးထားပါသည်။ သင်၏တုံ့ပြန်ချက်များကို [ကျွနု်ပ်တို့၏ ဆွေးနွေးပွဲ ဖိုရမ်တွင်](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) လက်ခံရရှိမည် ဖြစ်ပါသည်! -**[လေ့လာသူများ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**၊ သင်ခန်းစာတိုင်း အစမှာ pre-lecture quiz ဖြင့် စတင်ပြီး၊ စာသင်ခန်းစာစာရင်းကို ဖတ်ရှုခြင်း၊ လုပ်ဆောင်မှုများ ပြီးမြောက်ခြင်းနှင့် post-lecture quiz ဖြင့် နားလည်မှုကို စစ်ဆေးပါ။ +## 🌱 စတင်ခြင်း -သင်၏ သင်ကြားမှု အတွေ့အကြုံကို ပိုမိုတိုးတက်စေရန် အချင်းချင်း ပူးပေါင်းဆောင်ရွက် ရန် အကြံပြုပါသည်။ ကျွန်ုပ်တို့၏ [ဆွေးနွေးပွဲ ဖိုရမ်](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ဆွေးနွေးမှုများပြုလုပ်ရန် နှင့် မေးခွန်းများကို မော်ဒရိတ် အဖွဲ့ဝင်များမှ ဖြေကြားပေးမည် ဖြစ်ပါသည်။ +> **ဆရာ/ဆရာမများ** အတွက် သင့်သင်တန်းတွင်ဤသင်ရိုးအစီအစဉ်ကို ဘယ်လိုသုံးလို့ရမည်ဆိုသည်ကို [အကြံပြုချက်များ](for-teachers.md) ထည့်သွင်းပေးထားပါသည်။ သင်၏တုံ့ပြန်ချက်များကို ကျွန်ုပ်တို့၏ [ဆွေးနွေးပွဲကွင်း](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) တွင် ဖော်ပြနိုင်ပါသည်။ -သင်ယူမှုကို အများကြီး တန်းတိုးစေရန် Microsoft Learn ကို လေ့လာကြည့်ရန် အကြံပြုပါသည်။ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) တွင် နောက်ထပ် သင်ကြားပစ္စည်းများ ရှိပါသည်။ +**[လေ့လာသူများ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**၊ ခန်းစာတစ်ခုစီအတွက် အစပိုင်း စာမေးပွဲဖြေပြီး ခန်းစာစာသားများကို ဖတ်ရင်း လိုအပ်သည့် လုပ်ဆောင်ချက်များ ပြီးမြောက်အောင်လုပ်ပါ။ နောက်ပိုင်း စာမေးပွဲဖြေရာတွင် နားလည်မှုကို စစ်ဆေးပါ။ -### 📋 သင့်ပတ်ဝန်းကျင် ကို ပြင်ဆင်ခြင်း +သင်ယူမှုအတွေ့အကြုံကို တိုးတက်မြှင့်တင်ရန် မိတ်ဆွေများနှင့် ပရောဂျက်များတွင် ပြိုင်တြဲလုပ်ဆောင်ပါ။ ဆွေးနွေးပြောဆိုမှုများကို ကျွန်ုပ်တို့၏ [ဆွေးနွေးပွဲကွင်း](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ကြိုဆိုပါသည်၊ မေးမြန်းလိုချက်များအတွက် moderator များထံမှ အကူအညီရပါမည်။ -ဤ သင်ခန်းစာတွင် အလုပ်လုပ်စေဖို့ သင့်တင့်သော ဖန်တီးမှု ပတ်ဝန်းကျင် ရှိပြီးသား ဖြစ်သည်! စတင်သောအခါ သင်သည် [Codespace](https://github.com/features/codespaces/) (_browser-based, installs မလိုအပ်သော ပတ်ဝန်းကျင်_) သို့မဟုတ် သင့်ကွန်ပျူတာ ပေါ်တွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော စာသားတည်းဖြတ်ရေးကိရိယာဖြင့် ပြုလုပ်နိုင်သည်။ +ပညာသင်ယူမှုကိုပိုမိုတိုးတက်စေဖို့ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) တွင် ထပ်မံ သင်ယူနိုင်သောပစ္စည်းများကို အကြံပြုပါသည်။ -#### သင့် Repository ကို ဖန်တီးခြင်း -အလုပ်များကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် သင်၏ ကိုယ်ပိုင် Repository ပုံစံသစ်ကို ဖန်တီးရန် အကြံပြုသည်။ ဒီစာမျက်နှာ အပေါ်တွင်ရှိသည့် **Use this template** ခလုတ်ကို နှိပ်၍ ပြုလုပ်နိုင်သည်။ ၎င်းက GitHub အကောင့်တွင် သင်၏ ကိုယ်ပိုင် Repository အသစ်တစ်ခု အတွက် သင်ခန်းစာ පිölဲတူပုံစံကို ဖန်တီးပေးမည် ဖြစ်သည်။ +### 📋 သင်၏ ပတ်ဝန်းကျင်ကို ဆက်တင်ခြင်း -အောက်ပါအဆင့်များကို လိုက်နာပါ -1. **Repository ကို Fork လုပ်ပါ**- ဒီစာမျက်နှာ အပေါ်ညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။ -2. **Repository ကို Clone လုပ်ပါ**- `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +ဤ သင်ရိုးအစီအစဉ်သည် ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်တစ်ခု ဆောက်လုပ်ပြီးသားဖြစ်သည်! စတင်သည့်အခါ [Codespace](https://github.com/features/codespaces/) (ဘရောက်ဇာတွင် အသုံးပြုနိုင်ပြီး install မလိုအပ်သောပတ်ဝန်းကျင်) ကို လိုက်ရွေးနိုင်သလို သင်၏ကွန်ပျူတာတွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော စာသားတည်းဖြတ်ကိရိယာဖြင့် လည်း ဆောင်ရွက်နိုင်သည်။ -#### Codespace တွင် သင်ခန်းစာကို ပြုလုပ်ခြင်း +#### သင်၏ Repository ကို ဖန်တီးခြင်း +သင်၏ အလုပ်များကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် ကျွန်ုပ်တို့၏ repository ၏ သင့်ကိုယ်ပိုင် မိတ္တူကို ဖန်တီးရန် အကြံပြုသည်။ ဒီလုပ်ဆောင်မှုကို စာမျက်နှာအပေါ်တွင် ရှိသော **Use this template** ခလုတ်ကို နှိပ်ခြင်းဖြင့် ပြုလုပ်နိုင်သည်။ ဒါဟာ သင်၏ GitHub အကောင့်တွင် သင်ရိုးအစီအစဉ် မိတ္တူအသစ်တစ်ခု ဖန်တီးပေးပါသည်။ -သင့် ဖန်တီးထားသော Repository ထဲ တွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးသည်။ ဒီလိုလုပ်ခြင်းအားဖြင့် အသစ်တစ်ခု Codespace ဖန်တီးပေးမည် ဖြစ်သည်။ +အောက်ပါအဆင့်များကို လိုက်နာပါ။ +1. **Repository ကို Fork လုပ်ပါ**: ဤစာမျက်နှာ၏ ညာဘက်အပေါ်ထိပ်တွင်ရှိသည့် "Fork" ခလုတ်ကို နှိပ်ပါ။ +2. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.webp) +#### Codespace တွင် သင်ရိုးအစီအစဉ်ကို ဆောင်ရွက်ခြင်း -#### သင်ခန်းစာကို သင့်ကွန်ပျူတာ ပေါ်တွင် အခြားတည်းဖြတ်ရေးကိရိယာနှင့် နှုတ်ခမ်းပြင်ဆင်ခြင်း +သင်ဖန်တီးထားသော repository မိတ္တူတွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးချယ်ပါ။ ဒီနည်းဖြင့် သင်အလုပ်လုပ်နိုင်ရန် Codespace အသစ်တစ်ခု ဖန်တီးပေးပါမည်။ + +![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.webp) -သင့်ကွန်ပျူတာတွင် သင်ခန်းစာကိုထည့်ပြီး လေ့လာရန် စာသားတည်းဖြတ်ရေးကိရိယာ၊ browser နှင့် command line ကိရိယာ တို့ လိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ ပထမဆုံး သင်ခန်းစာဖြစ်သော [Programming Languages and Tools of the Trade အောက်ဒေါင်းရန်မိတ်ဆက်](../../1-getting-started-lessons/1-intro-to-programming-languages) သင်ခန်းစာက သင့်လိုအပ်ချက်အတွက် အမျိုးမျိုးသော ရွေးချယ်စရာများကို ကူညီ လမ်းညွှန်ပေးပါလိမ့်မည်။ +#### သင်ရိုးအစီအစဉ်ကို သင်၏ ကွန်ပျူတာပေါ်တွင် ဒေသစံပြ run ချခြင်း -ကျွန်ုပ်တို့ အကြံပြုလိုသည်မှာ သင့်တည်းဖြတ်ရေးကိရိယာအဖြစ် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို အသုံးပြုရန်ဖြစ်ပြီး၊ ၎င်းတွင် [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ပါရှိပါသည်။ Visual Studio Code ကို [ဤနေရာမှ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ဒေါင်းလုပ်လုပ်နိုင်ပါသည်။ +ဤသင်ရိုးအစီအစဉ်ကို သင့်ကွန်ပျူတာပေါ်တွင် လည်ပတ်ရန်အတွက် စာသားတည်းဖြတ်ကိရိယာ၊ ဘရောက်ဇာ နှင့် command line ကိရိယာ တို့ လိုတယ်။ ကျွန်ုပ်တို့၏ ပထမ ခန်းစာ인 [Programming Languages and Tools of the Trade အကြောင်းနိဒါန်း](../../1-getting-started-lessons/1-intro-to-programming-languages) သည် ရွေးချယ်နိုင်သော ကိရိယာများနှင့် ညွှန်ပြချက်များကို သင်ကြားပေးပါမည်။ -1. သင့် Repository ကို သင့် ကွန်ပျူတာထံ Clone လုပ်ပါ။ ဤအရာလုပ်ရန် **Code** ခလုတ်ကို နှိပ်ပြီး URL ကို ကော်ပီတင်ပါ။ +သင့် အတွက် အကြံပြုလိုတာက [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို စာသားတည်းဖြတ်ကိရိယာအဖြစ် အသုံးပြုရန်ဖြစ်ပြီး ၎င်းတွင် တည်ဆောက်ပြီးသား [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ပါဝင်သည်။ Visual Studio Code ကို ဒီနေရာမှ ဒေါင်းလုဒ်ဆွဲနိုင်ပါသည် [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)။ +1. Clone your repository to your computer. You can do this by clicking the **Code** button and copying the URL: [CodeSpace](./images/createcodespace.png) -ပြီးမှ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) အတွင်းရှိ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ကိုဖွင့်ပြီး၊ သင်ဧည့်ပေးပြီးကူးယူထားသော URL ကို `` နေရာတွင်ထား၍ အောက်ပါ command ကိုမှန်ကန်စွာရိုက်ထည့်ပါ။ + + Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) within [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run the following command, replacing `` with the URL you just copied: ```bash git clone ``` -2. Visual Studio Code တွင် ဖိုလ်ဒါကို ဖွင့်ပါ။ ဒါကို **File** > **Open Folder** ကိုနှိပ်၍ သင်ကူးယူထားသောဖိုလ်ဒါကို ရွေးချယ်ခြင်းဖြင့် လုပ်ဆောင်နိုင်ပါသည်။ +2. Open the folder in Visual Studio Code. You can do this by clicking **File** > **Open Folder** and selecting the folder you just cloned. -> တိုက်တွန်းချက် Visual Studio Code extension များ- -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code အတွင်း HTML စာမျက်နှာများကို ကြိုကြည့်ရန် -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ကုဒ်ရေးသားရာတွင် ပိုမြန်ဆန်စေလိုသူများအတွက် -## 📂 များစွာ သင်ခန်းစာများတွင် ပါဝင်သည့်အချက်များ - +> Recommended Visual Studio Code extensions: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster -- ရွေးချယ်နိုင်သည့် စကက်ချ်မှတ်စု -- ရွေးချယ်နိုင်သည့် အိမ်စာပုံလေ့လာမှု ဗွီဒီယို -- သင်ခန်းစာမတိုင်မီ ပြင်ဆင်ရန် ပြိုင်ဆိုင်မေးခွန်း -- စာအုပ်သင်ခန်းစာ -- ပရောဂျက်-အခြေခံသင်ခန်းစာများအတွက် ပရောဂျက်တည်ဆောက်ပုံအဆင့်ဆင့်လမ်းညွှန်ချက်များ -- ဗဟုသုတစစ်ဆေးချက်များ -- စိန်ခေါ်မှု -- အပိုဖတ်စာမျက်နှာများ -- အလုပ်ခွင့် +## 📂 Each lesson includes: -- [သင်ခန်းစာပြီးနောက် ပြိုင်ဆိုင်မေးခွန်း](https://ff-quizzes.netlify.app/web/) +- optional sketchnote +- optional supplemental video +- pre-lesson warmup quiz +- written lesson +- for project-based lessons, step-by-step guides on how to build the project +- knowledge checks +- a challenge +- supplemental reading +- assignment +- [post-lesson quiz](https://ff-quizzes.netlify.app/web/) -> **ပြိုင်ဆိုင်မေးခွန်းများအကြောင်း မှတ်ချက်** - မေးခွန်းများအားလုံးကို Quiz-app ဖိုလ်ဒါတွင်ထားရှိပြီး မေးခွန်းသုံးခုပါဝင်သည့် စုစုပေါင်း ၄၈ မေးခွန်းပါဝင်သည်။ ၎င်းတို့ကို [ဤမှာ](https://ff-quizzes.netlify.app/web/) တွင်ကြည့်ရူနိုင်ပြီး၊ quiz app ကို ဒေသတွင်း စက်ထဲတွင်_run_ ထားနိုင်သလို Azure တွင်လည်း ထားနိုင်သည်။ `quiz-app` ဖိုလ်ဒါထဲရှိ လမ်းညွှန်ချက်များကို လိုက်နာပါ။ +> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. They are available [here](https://ff-quizzes.netlify.app/web/) the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder. -## 🗃️ သင်ခန်းစာများ +## 🗃️ Lessons -| | ပရောဂျက်အမည် | သင်ကြားမည့်အကြောင်းအရာများ | သင်ယူရမည့်ရည်မှန်းချက်များ | ဆက်သွယ်ထားသော သင်ခန်းစာ | ဆရာ/ဆရာမ | +| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | စတင်ခြင်း | ပရိုဂရမ်းမင်းခြင်းနှင့် အသုံးပြုသော ကိရိယာများမိတ်ဆက် | အများအပြား programming ဘာသာစကားများ၏ အခြေခံ နားလည်မှုများနှင့် လုပ်ငန်းအတွက် ကုဒ်ရေးသူများအတွက် အထောက်အကူဖြစ်သော ဆော့ဖ်ဝဲများအကြောင်း သင်ယူရန် | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | စတင်ခြင်း | GitHub အခြေခံများ၊ အဖွဲ့ဖြင့်နှီးနင်းခြင်းပါရှိသည် | GitHub ကိုသင့်ပရောဂျက်တွင် မည်သို့အသုံးပြုရမည်၊ ကုဒ် အခြေခံပေါ်တွင် အဖွဲ့လိုက်‌လုပ်ဆောင်ရမည့်နည်းလမ်းများ | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | စတင်ခြင်း | ဝက်ဘ်ထိန်းသိမ်းမှု | ဝက်ဘ်အက်ဆက်စ္ဘီလတစ်ရိတီ အခြေခံများကို သင်ယူပါ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS အခြေခံများ | JavaScript ဒေတာအမျိုးအစား | JavaScript ဒေတာအမျိုးအစား အခြေခံများ | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS အခြေခံများ | function နှင့် method များ | လုပ်ငန်းစဉ်စီမံခန့်ခွဲရန် function နှင့် method များအကြောင်း သင်ယူရန် | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS အခြေခံများ | JS ဖြင့် ဆုံးဖြတ်ချက်လုပ်ခြင်း | သင်၏ကုဒ်တွင် သတ်မှတ်ချက်များ ဖန်တီးနည်းများကို လေ့လာရန် | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS အခြေခံများ | Array နှင့် Loop များ | JavaScript တွင် ဒေတာများကို အယ်ရေးနှင့် loop များဖြင့် စီမံလုပ်ဆောင်ခြင်း | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML လက်တွေ့အတွက် | အွန်လိုင်း တဲရာရီးယမ် ဖန်တီးရန် HTML ဖောင်တည်ဆောက်ခြင်း၊ layout တည်ဆောက်ပုံ အထူးဂရုစိုက်ခြင်း | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS လက်တွေ့အတွက် | အွန်လိုင်း တဲရာရီးယမ် အတွက် CSS ဖန်တီးခြင်း၊ CSS အခြေခံနှင့် หน้า responsive ပြုလုပ်ခြင်းပုံစံများ အထူးဂရုစိုက်ခြင်း | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript နှင့် DOM ကိုင်တွယ်ခြင်း | တဲရာရီယမ်တွင် drag/drop အင်တာဖေ့စ် အဖြစ် လုပ်ဆောင်စေဖို့ JavaScript ဖန်တီးခြင်း၊ closure နှင့် DOM ကိုင်တွယ်မှု အထူးဂရုစိုက်ခြင်း | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | လက်ရေးဂိမ်း တည်ဆောက်ခြင်း | keyboard event များကို အသုံးပြုပြီး သင်၏ JavaScript app ၏ လုပ်ဆောင်ချက် ကို တိုးတက်စေခြင်း | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ဘရောက်ဇာများနှင့် အလုပ်လုပ်ခြင်း | ဘရောက်ဇာများ မည်သို့ လုပ်ဆောင်သည်၊ ၎င်းတို့၏ သမိုင်းနှင့် ဘရောက်ဇာ အထောက်အပံ့ ပထမဆုံး အစိတ်အပိုင်းများ ဖန်တီးနည်း | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ဖောင်တစ်ခု တည်ဆောက်ခြင်း၊ API ခေါ်ယူခြင်းနှင့် ဒေတာ ဒေသတွင်းသိုလှောင်ခြင်း | ဒေတာ ဒေသတွင်းသိုလှောင်ရာတွင် သိုလှောင်ထားသော မူရင်း များအသုံးပြု၍ API ခေါ်ယူရန် ဘရောက်ဇာ အထောက်အပံ့ JavaScript အရေးဆွဲခြင်း | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ဘရောက်ဇာအတွင်း ပင်မလုပ်ငန်းများ၊ ဝက်ဘ် လုပ်ဆောင်မှု | Extension icon ကို အစီအစဉ်ကျကျ စီမံခြင်းအတွက် ဘရောက်ဇာ၏ ပင်မလုပ်ငန်းများကို အသုံးပြု၍ ဝက်ဘ် လုပ်ဆောင်မှုနှင့် တိုးတက်မှုများ ဆိုင်ရာ သင်ယူရန် | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript ဖြင့် ကစားဂိမ်း ပိုမိုအဆင့်မြင့် တည်ဆောက်ခြင်း | Inheritance ကို Classes နှင့် Composition နှင့် Pub/Sub pattern အသုံးပြု၍ သင်ယူခြင်း၊ ဂိမ်း တည်ဆောက်ရန် အတွက် ပြင်ဆင်ခြင်း | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | canvas ပေါ်တွင် ရေးဆွဲခြင်း | Canvas API အကြောင်း သင်ယူပါ၊ မျက်နှာပြင်ပေါ်တွင် တဆွဲချရန် အသုံးပြုသည် | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | မျက်နှာပြင်ပေါ်တွင် အရာဝတ္ထုများ ရွှေ့လျားခြင်း | ကိလိုင်နိတ်စနစ်နှင့် Canvas API ကို အသုံးပြု၍ အရာဝတ္ထုများကို ရွှေ့လျားစေခြင်း | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | အပြန်အလှန် ထိတွေ့မှု ဆန်းစစ်ခြင်း | keypress များ အသုံးပြုပြီး အရာဝတ္ထုများ ထိတွေ့မှု ဖြစ်စေခြင်းနှင့် ဂိမ်း လုပ်ဆောင်မှုကို စိတ်ချအောင် cooldown function တစ်ခု ထည့်သွင်းခြင်း | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | စာရင်းတင်ခြင်း | ဂိမ်း၏ အခြေအနေနှင့် လုပ်ဆောင်မှု အပေါ် အခြေခံ၍ သင်္ကေတတွက်ချက်ချက်လုပ်ခြင်း | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | ဂိမ်းပြီးဆုံးခြင်းနှင့် ပြန်စတင်ခြင်း | ဂိမ်းပြီးဆုံးခြင်းနှင့် ပြန်စတင်ခြင်း အကြောင်း၊ assets များဖျက်သိမ်းခြင်းနှင့် variable တန်ဖိုးများ ပြန်စစ်ဆေးခြင်း | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | ဝက်ဘ် အက်ပ်တွင် HTML template များနှင့် မောင်းနှင်မှုများ | မူလှည့်အမျိုးမျိုးပါရှိသည့် ဝက်ဘ်ဆိုဒ်တွင် routing နှင့် HTML template များသုံးပြီး အလေ့အထလာ ဖန်တီးပုံသင်ယူရန် | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | အကောင့်ဝင်ခြင်းနှင့် မှတ်ပုံတင်ဖောင်တည်ဆောက်ခြင်း | ဖောင်တည်ဆောက်ခြင်းနှင့် အတည်ပြုချက်စနစ်များ အသုံးပြုပုံ သင်ယူရန် | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | ဒေတာ ပြန်လည်ရယူခြင်းနှင့် အသုံးပြုခြင်းနည်းများ | သင်၏အက်ပ်တွင် ဒေတာ လှိုင်းများသွားလာပုံ၊ ဒေတာ ရယူခြင်း၊ သိမ်းဆည်းခြင်းနှင့် ဖျက်ပစ်ခြင်း ပုံစံများ | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | အဆင့်အတန်း စီမံခန့်ခွဲမှု အကြောင်း | သင်၏အက်ပ်သည် အဆင့်အတန်း (state) များကို မည်သို့ ထိန်းသိမ်းထားပြီး ပရိုဂရမ်ဖြင့် စီမံခန့်ခွဲရမည်ကို သင်ယူရန် | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | VScode နှင့် အလုပ်လုပ်ခြင်း | code editor အသုံးပြုနည်း သင်ယူရန် | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | AI နှင့်အလုပ်လုပ်ခြင်း | ကိုယ်ပိုင် AI အကူအညီတစ်ခု တည်ဆောက်ရန် သင်ယူရန် | [AI Assistant project](./9-chat-project/README.md) | Chris | - -## 🏫 သင်ကြားမှု ကိရိယာများ - -ကျွန်ုပ်တို့၏ဘာသာရပ်မွေ့လျော်မှုသည် အောက်ပါ သင်ကြားရေးဆိုင်ရာအယူအဆနှစ်ချက်ကို အခြေခံထားပါသည်- -* ပရောဂျက်မှုပေါ်မူတည်သောသင်ယူမှု -* မကြာခဏ ပြိုင်ဆိုင်မေးခွန်းများ - -ဒီအစီအစဉ်သည် JavaScript, HTML နှင့် CSS ၏ အခြေခံအချက်များကိုသာမက ယနေ့ခေတ် ဝက်ဘ်ဒီဗဲလပ်များ အသုံးပြုသော နောက်ဆုံးပေါ် ကိရိယာများနှင့် နည်းလမ်းများကိုလည်း သင်ကြားပေးသည်။ ကျောင်းသားများသည် လက်တွေ့ အတွေ့အကြုံ ရရှိရန် အတွက် လက်ရေးဂိမ်း၊ ဗ်ကျူးချား တဲရာရီယမ်၊ အနာဂတ်အတွက် သက်သာရေး ဘရောက်ဇာ အကူအညီ၊ အာကာသ ဂိမ်းနှင့် စီးပွားရေး အတွက် ဘဏ်ဆိုင်ရာ အက်ပ် တို့ကို တည်ဆောက်ပြီး လေ့လာသင်ယူနိုင်ကာ ဟိုင်းနားရာ ပညာရပ်အား ပြေလည်စွာ သိရှိလာမည်ဖြစ်သည်။ - -> 🎓 ဤဘာသာရပ်ကိစ္စ၏ စတင်သင်ခန်းစာများကို Microsoft Learn တွင် [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) အဖြစ်လည်း ကောက်ယူနိုင်ပါသည်။ - -အကြောင်းအရာများ အား ပရောဂျက်များနှင့် ကိုက်ညီစေရန် ဆောင်ရွက်ခြင်းအားဖြင့် ကျောင်းသားများအတွက် ပိုမိုစိတ်ဝင်စားဖွယ်ရာ ဖြစ်လာ၍ သင်ယူမှု သိသိသာသာ တိုးတက်လာပါမည်။ ကျွန်ုပ်တို့သည် JavaScript အခြေခံ အကြောင်းအရာများကို ဗီဒီယို တစ်ခုဖြင့် တွဲဖက်၍ "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယိုသင်ခန်းစာများတွင် ပါ၀င်ခဲ့သော တချို့ မူရင်းရေးသားသူတို့၏ အကူအညီဖြင့် ဖန်တီးထားသည့် သင်ခန်းစာမိတ်ဆက်များလည်း ပါဝင်သည်။ - -ထို့အပြင် သင်တန်းမတိုင်မီ သေးငယ်သည့် ပြိုင်ဆိုင်မေးခွန်းတစ်ခုကနေကျောင်းသားများကို သင်ယူမှုမည်သို့ ရည်ရွယ်ထားကြောင်း သတ်မှတ်ပေးပြီး သင်တန်းပြီးနောက် ပြိုင်ဆိုင်မေးခွန်းတစ်ခုက သင်ယူမှု ကိုပိုမိုသိမ်းဆည်းရန် အထောက်အကူ ဖြစ်စေသည်။ ဤဘာသာရပ်ကိစ္စသင်ရိုးအစီအစဉ်မှာ ပြောင်းလဲနိုင်ပြီး ပျော်ရွှင်စရာလည်း ဖြစ်သည်။ ပရောဂျက်များမှာ ကလေးသင်ယူရန်လွယ်ကူသည့်အတိုင်း စတင်ကာ ၁၂ ပတ်ကြာ လေ့လာပတ်သက်မှုအဆုံးတွင် ပိုမိုရှုပ်ထွေးလာမည် ဖြစ်သည်။ - -JavaScript framework များမကျတော့ဘဲ ဝက်ဘ်ဒီဗဲလပ်တစ်ဦး အနေဖြင့် လိုအပ်သည့် အခြေခံကျွမ်းကျင်မှုများပေါ် အထူးကွပ်မျက်အာရုံစိုက်လိုက်၍ ဒီဘာသာရပ်ကိစ္စကို ဖွံ့ဖြိုးစေခဲ့သော်လည်း၊ ဤသင်ခန်းစာအစီအစဉ် ပြီးဆုံးရန် နောက်တစ်ဆင့်ကောင်းတစ်ခုမှာ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယိုများစုမှ နိုဒ် jez ၌ သင်ယူခြင်း ဖြစ်ပါသည်။ - -> ကျွန်ုပ်တို့၏ [Code of Conduct](CODE_OF_CONDUCT.md) နှင့် [Contributing](CONTRIBUTING.md) လမ်းညွှန်ချက်များကို လေ့လာနိုင်ပြီး၊ သင်၏တည်ဆောက်မှု မျှလင့်ချက်များကို ကြိုဆိုပါတယ်။ - -## 🧭 အော့ဖ်လိုင်း ဝင်ရောက်ခြင်း - -[Docsify](https://docsify.js.org/#/) ကို အသုံးပြု၍ ဤစာတမ်းကို အော့ဖ်လိုင်း၌ ပြေးဆွဲနိုင်ပါသည်။ ဤ repo ကို fork ပြီး၊ [Docsify ကို တပ်ဆင်ရန်](https://docsify.js.org/#/quickstart) သင့်ဒေသୀစက်ပေါ်တွင် ပြုလုပ်ပြီး ပြီးလျှင် ဤ repo ၏ root ဖိုလ်ဒါတွင် `docsify serve` ဟုရိုက်ထည့်ပါ။ ဝက်ဘ်ဆိုဒ်ကို ရိုးရိုး localhost ၏ port 3000 တွင် ဆက်တင်ဖြင့် ဝင္ရောက်ကြည့်ရှုနိုင်ပါမည် - `localhost:3000`။ +| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Build a Login and Registration Form | Learn about building forms and handling validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Working with VScode | Learn how to Using a code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Working with AI | Learn how to build your own AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris | + +## 🏫 Pedagogy + +Our curriculum is designed with two key pedagogical principles in mind: +* project-based learning +* frequent quizzes + +The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development. + +> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn! + +By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum. + +In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle. + +While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". + +> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback! + + +## 🧭 Offline access + +You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`. ## 📘 PDF +စာသင်ခန်းအားလုံးအတွက် PDF ကို [ဒီမှာ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) တွေ့နိုင်သည်။ + -သင်ခန်းစာအားလုံးသော PDF ကို [ဤနေရာတွင်](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) တွေ့နိုင်ပါသည်။ +## 🎒 အခြားဘာသာရပ်များ -## 🎒 အခြား သင်တန်းများ -ကျွန်ုပ်တို့အဖွဲ့သည် အခြားသင်တန်းများကို ထုတ်လုပ်လျက်ရှိသည်။ လေ့လာကြည့်ပါ: +ကျွန်တော်တို့အသင်းက အခြားဘာသာရပ်တွေ ထုတ်လုပ်ပါတယ်! တစ်ခါကြည့်ပါ: ### LangChain @@ -243,23 +258,23 @@ JavaScript framework များမကျတော့ဘဲ ဝက်ဘ်ဒ [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## အကူအညီရယူခြင်း +## ကူညီမှု ရယူခြင်း -AI အက်ပ်များတည်ဆောက်ရာတွင် ကန့်သတ်မှုရှိပါက သို့မဟုတ် မေးခွန်းများရှိပါက MCP အကြောင်း ကိုယ်တူလေ့လာသူများနှင့် အတွေ့အကြုံရှိ တီထွင်သူများနှင့် ဆွေးနွေးနိုင်သည်။ မေးခွန်းများကို လက်ခံပေးပြီး အသိပညာ မျှဝေရာ အထောက်အပံ့ပေးသော အသိုင်းအဝိုင်းတစ်ခုဖြစ်သည်။ +AI အက်ပ်များ ဖန်တီးရာတွင် မတက်နိုင်ပါက သို့မဟုတ် မေးခွန်းများရှိပါက MCP အကြောင်း ဆွေးနွေးမှုများတွင် လေ့လာသူများနှင့် အတွေ့အကြုံရှိသော ဖန်တီးသူများနှင့် ပါဝင်ဆွေးနွေးနိုင်သည်။ အဆိုပါအသိုင်းအဝိုင်းသည် မေးခွန်းများအား ကြိုဆိုပြီး အသိပညာကို အလွတ်ပေးဝေမှုရှိသော သက်ဆိုင်ရာ ကူညီမှုအသိုင်းအဝိုင်းဖြစ်သည်။ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -ထုတ်ကုန်တုံ့ပြန်ချက် သို့မဟုတ် တည်ဆောက်မှုအတွင်း အမှား များရှိပါက: +ထုတ်ကုန် တုံ့ပြန်ချက်များ သို့မဟုတ် ပြဿနာများ ရှိပါက ဖန်တီးနေစဉ်တွင် ဒီနေရာသို့ လာရောက်ကြည့်ပါ။ [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## လိုင်စင် -ဤသိုက်ခန်းသည် MIT လိုင်စင်ဖြင့် လိုင်စင်ပြုထားသည်။ အသေးစိတ်အချက်အလက်များအတွက် [LICENSE](../../LICENSE) ဖိုင်ဖတ်ရှုပါ။ +ဤ repository သည် MIT လိုင်စင်ဖြင့် လိုင်စင်ပြုထားပါသည်။ ပိုမိုသိရှိရန် [LICENSE](../../LICENSE) ဖိုင်ကို ကြည့်ပါ။ --- -**အရေးမကြီးချက်** -ဤစာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) မှတဆင့် ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားသည်မှာမှန်ပါသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းများတွင် အမှားများ သို့မဟုတ် တိကျမှုမရှိမှုများ ဖြစ်ပေါ်နိုင်ပါကြောင်း သတိပြုပါရန်။ မူရင်းစာတမ်းကို မူရင်းဘာသာဖြင့် အတည်ပြုအရင်းအမြစ်အဖြစ် သတ်မှတ်ရမည်ဖြစ်သည်။ အရေးကြီးသော သတင်းအချက်အလက်များအတွက် နယ်ပယ်အတော်လေးရှိ လူမှုပညာရှင်၏ ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ချက်အသုံးပြုရာမှ ဖြစ်ပေါ်နိုင်သည့် မမှန်ကန်မှုများ သို့မဟုတ် မှားယွင်းသဘောထားများအတွက် ကျွန်ုပ်တို့ အာမခံမှုမရှိပါ။ +**သတိပေးချက်**: +ဤစာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြုပြီး ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် မှန်ကန်မှုအတွက် ကြိုးစားပေမယ့် အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မှားယွင်းချက်များ ပါဝင်နိုင်ကြောင်း သိရှိထားရမည်။ မူလစာတမ်းသည် မူရင်းဘာသာစကားဖြင့် သက်ဆိုင်ရာအာဏာရှိသော အချက်အလက်အရင်းအမြစ်အနေဖြင့် ယူဆရပါမည်။ အရေးကြီးသော အချက်အလက်များအတွက် အသက်မွေးဝမ်းမွေး သက်ဆိုင်ရာ လူ့ဘာသာပြန် ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုမှုကြောင့် ဖြစ်ပေါ်လာနိုင်သည့် နားလည်မှုမှားယွင်းမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မခံပါ။ \ No newline at end of file diff --git a/translations/uk/.co-op-translator.json b/translations/uk/.co-op-translator.json index 41cba6a7a..1c6393048 100644 --- a/translations/uk/.co-op-translator.json +++ b/translations/uk/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-06T13:19:37+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T17:09:40+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "uk" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:57:51+00:00", + "translation_date": "2026-03-06T17:19:32+00:00", "source_file": "AGENTS.md", "language_code": "uk" }, @@ -516,8 +516,8 @@ "language_code": "uk" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:51:51+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T17:04:59+00:00", "source_file": "README.md", "language_code": "uk" }, diff --git a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md index e06f4d478..eff0ead86 100644 --- a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ # Вступ до мов програмування та сучасних інструментів розробника + +Привіт, майбутній розробнику! 👋 Чи можу я розповісти тобі дещо, що досі викликає у мене мурашки щодня? Ти ось-ось дізнаєшся, що програмування — це не просто про комп’ютери, а про справжні суперсили, які допомагають втілити найсміливіші твої ідеї у життя! -Привіт, майбутній розробнику! 👋 Можу розповісти тобі щось, що досі викликає у мене мурашки щодня? Ти збираєшся дізнатися, що програмування – це не просто про комп’ютери, це про справжні суперсили, які дозволяють втілювати найсміливіші ідеї в життя! +Знаєш той момент, коли ти користуєшся улюбленим додатком, і все просто працює ідеально? Коли ти натискаєш кнопку, і стається щось абсолютно чарівне, що змушує сказати: «Вау, як вони це ЗРОБИЛИ?» Ну, хтось саме такий, як ти — мабуть, сидить у власній улюбленій кав’ярні о 2-й ночі з третім еспресо — написав код, який створив цю магію. І ось що тебе здивує: наприкінці цього уроку ти не лише зрозумієш, як вони це зробили, а й сам захочеш спробувати! -Знаєш той момент, коли ти користуєшся улюбленим додатком, і все працює ідеально? Коли натискаєш кнопку, і відбувається щось абсолютно магічне, що змушує тебе сказати: "Вау, як вони це ЗРОБИЛИ?" Ну, хтось, такий самий, як ти – ймовірно, сидячи у своєму улюбленому кафе о 2 годині ночі з третьою чашкою еспресо – написав код, який створив цю магію. І ось що тебе здивує: до кінця цього уроку ти не тільки зрозумієш, як вони це зробили, але й захочеш спробувати сам! +Дивись, я цілком розумію, якщо програмування здається зараз страшним. Коли я починав, я чесно думав, що треба бути гением з математики або програмувати з п’яти років. Але ось що повністю змінило мій погляд: програмування — це саме як навчитися вести розмови новою мовою. Спочатку вивчаєш «привіт» і «дякую», потім замовляєш каву, а за мить ти вже ведеш глибокі філософські бесіди! Тільки у цьому випадку ти розмовляєш з комп’ютерами, і, чесно? Вони — найтерплячливіші співрозмовники: не засуджують помилки і завжди раді спробувати знову! -Слухай, я повністю розумію, якщо програмування здається тобі зараз страшним. Коли я тільки починав, я чесно думав, що потрібно бути якимось математичним генієм або програмувати з п’яти років. Але ось що повністю змінило моє уявлення: програмування – це точно як навчитися розмовляти новою мовою. Ти починаєш з "привіт" і "дякую", потім переходиш до замовлення кави, і перш ніж ти це усвідомиш, ти ведеш глибокі філософські дискусії! Тільки в цьому випадку ти розмовляєш з комп’ютерами, і чесно? Вони найтерплячіші співрозмовники, яких ти коли-небудь зустрічав – вони ніколи не судять твої помилки і завжди готові спробувати знову! - -Сьогодні ми дослідимо неймовірні інструменти, які роблять сучасну веб-розробку не просто можливою, а дійсно захоплюючою. Я говорю про ті самі редактори, браузери та робочі процеси, які розробники Netflix, Spotify та твоєї улюбленої студії інді-додатків використовують щодня. І ось частина, яка змусить тебе танцювати від радості: більшість із цих професійних, стандартних для галузі інструментів абсолютно безкоштовні! +Сьогодні ми дослідимо неймовірні інструменти, що роблять сучасну веб-розробку не просто можливою, а справді захопливою. Я говорю про ті самі редактори, браузери та робочі процеси, що використовують розробники Netflix, Spotify і твоєї улюбленої інді-студії. І ось що змусить тебе танцювати від радості: більшість цих професійних, індустріальних інструментів — абсолютно безкоштовні! ![Intro Programming](../../../../translated_images/uk/webdev101-programming.d6e3f98e61ac4bff.webp) -> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today + title Ваша подорож програмуванням сьогодні section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You + Що таке програмування: 5: You + Мови програмування: 4: You + Огляд інструментів: 5: You section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You + Редактори коду: 4: You + Браузери та інструменти розробника: 5: You + Командний рядок: 3: You section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + Детектив мови: 4: You + Вивчення інструментів: 5: You + Спілкування в спільноті: 5: You ``` +## Перевіримо, що ти вже знаєш! -## Давайте перевіримо, що ви вже знаєте! +Перш ніж поринути у веселощі, мені цікаво – що ти вже знаєш про цей світ програмування? І слухай, якщо ти дивишся на ці питання і думаєш: «Я зовсім нічого не знаю про це,» — це не просто нормально, це ідеально! Це означає, що ти якраз у потрібному місці. Подумай про цю вікторину як про розім’янку перед тренуванням – ми просто розігріваємо мозок! -Перш ніж ми перейдемо до цікавого, мені цікаво – що ви вже знаєте про цей світ програмування? І слухайте, якщо ви дивитеся на ці питання і думаєте: "Я буквально нічого про це не знаю", це не просто нормально, це ідеально! Це означає, що ви саме там, де потрібно. Подумайте про цей тест як про розтяжку перед тренуванням – ми просто розігріваємо мозок! +[Пройди вступний тест](https://ff-quizzes.netlify.app/web/) -[Пройдіть тест перед уроком](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Пригода, яку ми збираємося пережити разом +## Подорож, в яку ми вирушаємо разом -Добре, я щиро переповнений захопленням від того, що ми будемо досліджувати сьогодні! Серйозно, я хотів би побачити ваше обличчя, коли деякі з цих концепцій стануть зрозумілими. Ось неймовірна подорож, яку ми здійснимо разом: +Окей, я справді шалено радію тому, що ми сьогодні вивчатимемо! Серйозно, хотів би побачити твоє обличчя, коли деякі з цих концепцій дійдуть до тебе. Ось неймовірна подорож, яку ми проходимо разом: -- **Що таке програмування (і чому це найкрутіша річ у світі!)** – Ми дізнаємося, як код буквально є невидимою магією, яка живить усе навколо вас, від будильника, який якось знає, що зараз понеділок, до алгоритму, який ідеально підбирає рекомендації на Netflix. -- **Мови програмування та їх дивовижні особливості** – Уявіть, що ви заходите на вечірку, де кожен має абсолютно різні суперсили та способи вирішення проблем. Саме так виглядає світ мов програмування, і вам сподобається знайомитися з ними! -- **Основні будівельні блоки, які створюють цифрову магію** – Думайте про них як про найкращий набір творчих LEGO. Як тільки ви зрозумієте, як ці частини поєднуються, ви усвідомите, що можете буквально створити все, що тільки уявите. -- **Професійні інструменти, які змушують вас відчувати, ніби вам дали чарівну паличку** – Я не перебільшую – ці інструменти справді змушують вас відчувати, ніби у вас є суперсили, і найкраще? Це ті самі, які використовують професіонали! +- **Що таке програмування насправді (і чому це найкрутіша річ у світі!)** – Ми відкриємо, як код — це невидима магія, що живить все навколо: від сигналізації, яка якимось чином знає, що сьогодні понеділок, до алгоритму, що ідеально підбирає рекомендації Netflix +- **Мови програмування та їх дивовижні особистості** – Уяви, що ти потрапив на вечірку, де кожна людина має унікальні суперсили й способи розв’язувати проблеми. Саме так виглядає світ мов програмування, і тобі сподобається знайомство з ними! +- **Основні будівельні блоки, що творять цифрову магію** – Подумай про це як про найкращий творчий набір LEGO. Як тільки зрозумієш, як ці деталі поєднуються, ти усвідомиш, що можеш створити буквально все, що забажає твоя уява +- **Професійні інструменти, що дадуть тобі відчуття чарівної палички** – Я не перебільшую – ці інструменти справді змусить тебе відчути, що володієш суперсилами, а найкращє — це ті самі інструменти, що використовують професіонали! -> 💡 **Ось у чому справа**: навіть не думайте намагатися запам’ятати все сьогодні! Зараз я просто хочу, щоб ви відчули той спалах захоплення від того, що можливо. Деталі запам’ятаються природно, коли ми будемо практикуватися разом – саме так відбувається справжнє навчання! +> 💡 **Ось що потрібно знати**: Не намагайся запам’ятати все сьогодні! Просто відчуй іскру захоплення тим, що можливо. Деталі закріпляться природно, коли ми практикуватимемось разом – ось як відбувається справжнє навчання! -> Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Ти можеш пройти цей урок на [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## То що ж таке *програмування*? +## Отже, що таке програмування? -Добре, давайте розберемося з питанням на мільйон доларів: що ж таке програмування насправді? +Добре, розглянемо головне питання: що ж насправді таке програмування? -Я розповім вам історію, яка повністю змінила моє уявлення про це. Минулого тижня я намагався пояснити мамі, як користуватися новим пультом від нашого смарт-телевізора. Я зловив себе на тому, що кажу щось на кшталт: "Натисни червону кнопку, але не велику червону кнопку, маленьку червону кнопку зліва... ні, з іншого боку... добре, тепер тримай її дві секунди, не одну, не три..." Знайомо? 😅 +Розкажу історію, яка повністю змінила моє уявлення про це. Минулого тижня я намагався пояснити мамі, як користуватися новим пультом від розумного ТВ. Я зловив себе на тому, що кажу: «Натисни червону кнопку, але не велику червону, а маленьку червону зліва… ні, твоя інша ліва… добре, тепер потримай дві секунди, не одну, не три…» Знайомо? 😅 -Це і є програмування! Це мистецтво давати надзвичайно детальні, покрокові інструкції чомусь дуже потужному, але такому, що потребує всього поясненого ідеально. Тільки замість того, щоб пояснювати мамі (яка може запитати "яку червону кнопку?!"), ви пояснюєте комп’ютеру (який просто робить саме те, що ви сказали, навіть якщо те, що ви сказали, не зовсім те, що ви мали на увазі). +Це програмування! Це мистецтво давати надзвичайно докладні, крок за кроком, інструкції чомусь дуже потужному, але що потребує пояснення до найменших деталей. Тільки замість пояснень мамі (яка може спитати «яку червону кнопку?») ти пояснюєш комп’ютеру, який просто виконує те, що ти сказав, навіть якщо ти переплутав. -Ось що мене вразило, коли я вперше це зрозумів: комп’ютери насправді досить прості в основі. Вони буквально розуміють лише дві речі – 1 і 0, що, по суті, означає "так" і "ні" або "ввімкнено" і "вимкнено". І все! Але ось де це стає магічним – нам не потрібно говорити на мові 1 і 0, як у "Матриці". Тут на допомогу приходять **мови програмування**. Вони як найкращий перекладач у світі, який перетворює ваші абсолютно нормальні людські думки на мову комп’ютера. +Ось що мене вразило, коли я вперше це зрозумів: комп’ютери насправді дуже прості в основі. Вони розуміють буквально дві речі — 1 та 0, що по суті означає «так» і «ні» або «ввімкнено» і «вимкнено». Ось і все! Але тут починається магія — нам не потрібно говорити на 1 і 0, як у Матриці. Саме тут допомагають **мови програмування**. Вони — наче найкращий перекладач у світі, який бере твої нормальні людські думки і перетворює їх на мову комп’ютера. -І ось що досі викликає у мене мурашки щоранку, коли я прокидаюся: буквально *все* цифрове у вашому житті почалося з когось, такого ж, як ви, ймовірно, сидячи в піжамі з чашкою кави, набираючи код на своєму ноутбуці. Той фільтр Instagram, який робить вас бездоганним? Хтось закодував це. Рекомендація, яка привела вас до вашої нової улюбленої пісні? Розробник створив цей алгоритм. Додаток, який допомагає вам розділити рахунок за вечерю з друзями? Так, хтось подумав: "Це дратує, я думаю, я можу це виправити", а потім... вони це зробили! +І ось що досі викликає у мене мурашки щоранку: буквально *все* цифрове у твоєму житті почалося з когось такого, як ти, мабуть, у піжамі з горням кави, що друкує код на ноутбуці. Той фільтр в Instagram, що робить тебе бездоганним? Хтось його закодував. Рекомендація, що привела тебе до нової улюбленої пісні? Розробник створив цей алгоритм. Додаток, що допомагає розділити рахунок за вечерю з друзями? Так, хтось подумав «це дратує, я можу це полагодити» і зробив це! -Коли ви вчитеся програмувати, ви не просто освоюєте новий навик – ви стаєте частиною цієї неймовірної спільноти вирішувачів проблем, які проводять свої дні, думаючи: "А що, якщо я міг би створити щось, що зробить чийсь день трохи кращим?" Чесно, чи є щось крутіше за це? +Коли ти навчаєшся програмувати, ти не просто здобуваєш нову навичку — ти стаєш частиною неймовірної спільноти розв’язувачів проблем, які проводять дні, думаючи: «А що як я зроблю щось, що зробить чийсь день трошки кращим?» Чесно кажучи, чи є щось крутіше за це? -✅ **Полювання на цікаві факти**: Ось щось дуже цікаве, що можна пошукати, коли у вас буде вільний момент – як ви думаєте, хто був першим програмістом у світі? Я дам вам підказку: це може бути не той, кого ви очікуєте! Історія цієї людини абсолютно захоплююча і показує, що програмування завжди було про творчий підхід до вирішення проблем і нестандартне мислення. +✅ **Цікавинка**: Ось що круто дослідити, якщо матимеш вільну хвилинку — хто, на твою думку, був першим комп’ютерним програмістом у світі? Підказка: це може бути не той, кого ти очікуєш! Історія цієї людини надзвичайно захоплива і показує, що програмування завжди було про креативне розв’язання проблем і нестандартне мислення. -### 🧠 **Час перевірки: як ви себе почуваєте?** +### 🧠 **Час перевірити себе: Як ти почуваєшся?** -**Зробіть паузу, щоб подумати:** -- Чи зрозуміла вам тепер ідея "давати інструкції комп’ютерам"? -- Чи можете ви придумати щоденне завдання, яке хотіли б автоматизувати за допомогою програмування? -- Які питання виникають у вас щодо цього всього програмування? +**Зроби паузу й подумай:** +- Чи стало зараз зрозуміло, що означає «давати інструкції комп’ютерам»? +- Чи можеш уявити якусь щоденну задачу, яку б хотів автоматизувати за допомогою програмування? +- Які питання виникають у тебе про весь цей світ програмування? -> **Пам’ятайте**: Це абсолютно нормально, якщо деякі концепції зараз здаються вам нечіткими. Вивчення програмування – це як вивчення нової мови – потрібно час, щоб мозок побудував ці нейронні зв’язки. Ви чудово справляєтеся! +> **Пам’ятай**: це нормально, якщо деякі концепції здаються розмитими зараз. Вивчення програмування — як навчання новій мові, потрібно час, щоб мозок налагодив потрібні зв’язки. Ти чудово справляєшся! -## Мови програмування – це як різні смаки магії +## Мови програмування — це як різні смаки магії -Добре, це може звучати дивно, але залишайтеся зі мною – мови програмування дуже схожі на різні стилі музики. Подумайте: у вас є джаз, який плавний і імпровізаційний, рок, який потужний і прямолінійний, класика, яка елегантна і структурована, і хіп-хоп, який творчий і виразний. Кожен стиль має свою атмосферу, свою спільноту пристрасних шанувальників, і кожен ідеально підходить для різних настроїв і випадків. +Окей, зараз прозвучить дивно, але лишайся зі мною — мови програмування дуже схожі на різні музичні стилі. Подумай: є джаз, який плавний і імпровізаційний, рок — потужний і прямолінійний, класика — елегантна і структурована, а хіп-хоп — креативний і експресивний. У кожного стилю своя атмосфера, своє коло палких фанатів, і кожен ідеально підходить для різного настрою та випадків. -Мови програмування працюють точно так само! Ви не будете використовувати ту саму мову для створення веселого мобільного додатку, яку використовуєте для обробки величезних обсягів кліматичних даних, так само як ви не будете грати дез-метал на занятті йогою (ну, на більшості занять йогою! 😄). +Мови програмування працюють так само! Ти ж не використовуватимеш одну і ту саму мову для створення веселої мобільної гри та для опрацювання величезних масивів кліматичних даних, як не будеш слухати дез-метал на занятті йогою (ну, більшість занять, принаймні! 😄). -Але ось що мене абсолютно вражає кожного разу, коли я думаю про це: ці мови – це як мати найтерплячішого, найрозумнішого перекладача у світі, який сидить прямо поруч із вами. Ви можете висловлювати свої ідеї так, як це природно для вашого людського мозку, а вони беруть на себе всю неймовірно складну роботу з перекладу цього на мову 1 і 0, яку комп’ютери насправді розуміють. Це як мати друга, який ідеально володіє і "людською творчістю", і "комп’ютерною логікою" – і вони ніколи не втомлюються, ніколи не потребують перерв на каву і ніколи не судять вас за те, що ви задаєте одне й те ж питання двічі! +А ось що мене вражає кожного разу, коли я про це думаю: ці мови — наче найтерплячіший та найрозумніший перекладач у світі, який сидить поруч з тобою. Ти виражаєш ідеї так, як комфортно твоєму людському мозку, а вони роблять усю складну роботу, перекладаючи це на 1 і 0, якими розмовляють комп’ютери. Це як мати друга, який ідеально володіє і «людською творчістю», і «комп’ютерною логікою» — і він ніколи не втомлюється, не потребує кави і не засуджує, якщо ти задаєш одне і те саме питання двічі! -### Популярні мови програмування та їх використання +### Популярні мови програмування та їх застосування ```mermaid mindmap - root((Programming Languages)) + root((Мови програмування)) Web Development JavaScript - Frontend Magic - Interactive Websites + Магія фронтенда + Інтерактивні вебсайти TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + типи + Корпоративні додатки Data & AI Python - Data Science - Machine Learning - Automation + Дані науки + Машинне навчання + Автоматизація R - Statistics - Research + Статистика + Дослідження Mobile Apps Java Android - Enterprise + Корпоративні Swift iOS - Apple Ecosystem + Екосистема Apple Kotlin - Modern Android - Cross-platform + Сучасний Android + Кросплатформовий Systems & Performance C++ - Games - Performance Critical + Ігри + Критична продуктивність Rust - Memory Safety - System Programming + Безпека пам’яті + Системне програмування Go - Cloud Services - Scalable Backend + Хмарні сервіси + Масштабований бекенд ``` - | Мова | Найкраще для | Чому популярна | -|------|--------------|----------------| -| **JavaScript** | Веб-розробка, користувацькі інтерфейси | Працює в браузерах і забезпечує інтерактивність веб-сайтів | -| **Python** | Наука про дані, автоматизація, AI | Легка для читання і навчання, потужні бібліотеки | +|----------|----------|------------------| +| **JavaScript** | Веб-розробка, інтерфейси користувача | Працює в браузерах і забезпечує інтерактивні сайти | +| **Python** | Наука про дані, автоматизація, ШІ | Легка для читання та вивчення, потужні бібліотеки | | **Java** | Корпоративні додатки, Android-додатки | Незалежна від платформи, надійна для великих систем | -| **C#** | Windows-додатки, розробка ігор | Сильна підтримка екосистеми Microsoft | +| **C#** | Додатки для Windows, розробка ігор | Сильна підтримка екосистеми Microsoft | | **Go** | Хмарні сервіси, бекенд-системи | Швидка, проста, створена для сучасних обчислень | -### Високорівневі vs. низькорівневі мови +### Мови високого рівня проти низького рівня -Добре, це була концепція, яка буквально "зламала" мій мозок, коли я тільки починав вчитися, тому я поділюся аналогією, яка нарешті допомогла мені зрозуміти це – і я дуже сподіваюся, що вона допоможе вам теж! +Окей, це була та концепція, яка зламала мій мозок, коли я починав вчитися, тому поділюся аналогією, яка нарешті допомогла мені це зрозуміти — і сподіваюся, вона допоможе й тобі! -Уявіть, що ви відвідуєте країну, де не говорите мовою, і вам терміново потрібно знайти найближчий туалет (ми всі були в такій ситуації, правда? 😅): +Уяви, що ти приїхав у країну, де не знаєш мову, і терміново шукаєш найближчий туалет (ми всі через це проходили, правда? 😅): -- **Низькорівневе програмування** – це як вивчити місцевий діалект настільки добре, що ви можете спілкуватися з бабусею, яка продає фрукти на розі, використовуючи культурні посилання, місцевий сленг і внутрішні жарти, які зрозуміє тільки той, хто виріс там. Дуже вражаюче і неймовірно ефективно... якщо ви випадково володієте мовою! Але досить складно, коли ви просто намагаєтеся знайти туалет. +- **Програмування низького рівня** — це як знати місцевий діалект настільки добре, що можеш поговорити з бабусею, яка продає фрукти на розі, використовуючи культурні посилання, місцевий сленг та жарти, які зрозуміє лише той, хто там виріс. Це дуже вражає й надзвичайно ефективно... якщо ти, звісно, вільно розмовляєш! Але доволі складно, коли тобі лише потрібно знайти туалет. -- **Високорівневе програмування** – це як мати того дивовижного місцевого друга, який просто вас розуміє. Ви можете сказати "Мені дуже потрібно знайти туалет" звичайною англійською, і вони беруть на себе весь культурний переклад і дають вам інструкції так, щоб це мало сенс для вашого не місцевого мозку. +- **Програмування високого рівня** — це як мати того чудового місцевого друга, який тебе чудово розуміє. Ти можеш сказати просто «мені потрібно знайти туалет» англійською, а він зробить весь культурний переклад і дасть тобі напрямок у зрозумілій для тебе формі. У термінах програмування: -- **Низькорівневі мови** (як Assembly або C) дозволяють вам вести надзвичайно детальні розмови з фактичним обладнанням комп’ютера, але вам потрібно думати як машина, що... ну, скажімо так, це досить великий ментальний зсув! -- **Високорівневі мови** (як JavaScript, Python або C#) дозволяють вам думати як людина, поки вони беруть на себе всю машинну мову за лаштунками. Крім того, вони мають ці неймовірно гостинні спільноти, повні людей, які пам’ятають, як це бути новачком, і щиро хочуть допомогти! +- **Мови низького рівня** (як Assembly чи C) дозволяють вести надзвичайно докладні розмови безпосередньо з апаратним забезпеченням комп’ютера, але потрібно мислити як машина, що... скажімо, великий ментальний зсув! +- **Мови високого рівня** (як JavaScript, Python чи C#) дозволяють думати як людина, у той час як вони вирішують усі машинні питання за сценою. Також у них є неймовірно дружні спільноти з людьми, які пам’ятають, як це — бути новачком, і щиро хочуть допомогти! -Вгадайте, з яких я запропоную вам почати? 😉 Високорівневі мови – це як мати тренувальні колеса, які ви ніколи не захочете знімати, тому що вони роблять весь досвід набагато приємнішим! +Вгадай, з чого я запропоную почати? 😉 Мови високого рівня — це наче тренувальні колеса, які ти ніколи справді не захочеш знімати, бо вони роблять увесь досвід набагато приємнішим! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 Людська думка:
'Я хочу обчислити числа Фібоначчі'"] --> B{Вибрати рівень мови} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|Високий рівень| C["🌟 JavaScript/Python
Легко читати і писати"] + B -->|Низький рівень| D["⚙️ Assembly/C
Пряме керування апаратурою"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Написати: fibonacci(10)"] + D --> F["📝 Написати: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Розуміння комп'ютера:
Перекладач обробляє складнощі"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Той самий результат:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Дай покажу, чому мови високого рівня такі дружні -### Дозвольте показати, чому високорівневі мови набагато дружелюбніші +Добре, я збираюся показати тобі приклад, який ідеально пояснює, чому я закохався в мови високого рівня, але спочатку — пообіцяй мені одне. Коли побачиш перший приклад коду, не панікуй! Він має виглядати загрозливо. Це саме той пункт, який я хочу підкреслити! -Добре, я збираюся показати вам щось, що ідеально демонструє, чому я закохався у високорівневі мови, але спочатку – мені потрібно, щоб ви пообіцяли мені щось. Коли ви побачите цей перший приклад коду, не панікуйте! Він має виглядати страшно. Це саме той момент, який я хочу підкреслити! +Ми подивимось на одну і ту ж задачу, написану у двох абсолютно різних стилях. Обидва створюють так звану послідовність Фібоначчі — це гарний математичний патерн, де кожне число є сумою двох попередніх: 0, 1, 1, 2, 3, 5, 8, 13... (Цікавинка: цей патерн буквально всюди у природі — спіралі насіння соняшника, візерунки на шишках, навіть у формуванні галактик!) -Ми подивимося на одну й ту ж задачу, написану двома абсолютно різними стилями. Обидва створюють те, що називається послідовністю Фібоначчі – це красивий математичний шаблон, де кожне число є сумою двох попередніх: 0, 1, 1, 2, 3, 5, 8, 13... (Цікаво: ви знайдете цей шаблон буквально всюди в природі – спіралі насіння соняшника, візерунки шишок, навіть спосіб формування галактик!) +Готовий побачити різницю? Поїхали! -Готові побачити різницю? Поїхали! - -**Високорівнева мова (JavaScript) – дружня для людини:** +**Мова високого рівня (JavaScript) – зрозуміло для людини:** ```javascript -// Step 1: Basic Fibonacci setup +// Крок 1: Основна настройка Фібоначчі const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,127 +183,202 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Ось що робить цей код:** -- **Оголошує** константу для визначення кількості чисел Фібоначчі, які ми хочемо створити -- **Ініціалізує** дві змінні для відстеження поточного та наступного чисел у послідовності -- **Встановлює** початкові значення (0 і 1), які визначають шаблон Фібонач -- **Коментарі**: Мови високого рівня заохочують пояснювальні коментарі, які роблять код самодокументованим -- **Структура**: Логічний потік JavaScript відповідає тому, як люди думають про вирішення проблем крок за кроком -- **Підтримка**: Оновлення версії JavaScript для різних вимог є простим і зрозумілим +**Що робить цей код:** +- **Оголошує** константу, що визначає, скільки чисел Фібоначчі ми хочемо згенерувати +- **Ініціалізує** дві змінні для відстеження поточного і наступного чисел у послідовності +- **Встановлює** початкові значення (0 і 1), що визначають патерн Фібоначчі +- **Виводить** заголовок для позначення нашого результату + +```javascript +// Крок 2: Згенеруйте послідовність за допомогою циклу +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // Обчислити наступне число в послідовності + const sum = current + next; + current = next; + next = sum; +} +``` + +**Роз’яснення того, що відбувається тут:** +- **Цикл** перебирає кожну позицію в нашій послідовності за допомогою `for` +- **Виводить** кожне число з позицією за допомогою шаблонного рядка +- **Обчислює** наступне число Фібоначчі, додаючи поточне і наступне значення +- **Оновлює** змінні для переходу до наступної ітерації + +```javascript +// Крок 3: Сучасний функціональний підхід +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; -✅ **Про послідовність Фібоначчі**: Цей абсолютно чудовий числовий патерн (де кожне число дорівнює сумі двох попередніх: 0, 1, 1, 2, 3, 5, 8...) буквально *з'являється всюди* в природі! Ви знайдете його в спіралях соняшників, візерунках шишок, вигинах раковин наутилуса і навіть у тому, як ростуть гілки дерев. Це просто неймовірно, як математика і код можуть допомогти нам зрозуміти і відтворити патерни, які природа використовує для створення краси! +// Приклад використання +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**У наведеному вище коді ми:** +- **Створили** повторно використовувану функцію за допомогою сучасного синтаксису стрілкових функцій +- **Побудували** масив для зберігання всієї послідовності, а не виводили по одному +- **Використали** індексацію масиву для обчислення кожного нового числа з попередніх +- **Повернули** повну послідовність для гнучкого використання в інших частинах програми + +**Мова низького рівня (ARM Assembly) – зрозуміло для комп’ютера:** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Поміти, як версія JavaScript читається майже як інструкції англійською, а версія Assembly використовує закодовані команди, що безпосередньо керують процесором комп’ютера. Обидві виконують ту саму задачу, але мова високого рівня набагато легша для розуміння, написання і підтримки людьми. -## Основи, які створюють магію +**Основні відмінності, які ти зауважиш:** +- **Читаємість**: JavaScript використовує описові назви, як `fibonacciCount`, тоді як Assembly використовує зашифровані ярлики на кшталт `r0`, `r1` +- **Коментарі**: Мови високого рівня заохочують пояснювальні коментарі, які роблять код само-документованим +- **Структура**: Логічний потік JavaScript відповідає тому, як люди розглядають проблеми крок за кроком +- **Підтримка**: Оновлення версії JavaScript під різні вимоги є простим і зрозумілим -Добре, тепер, коли ви побачили, як виглядають мови програмування в дії, давайте розберемо фундаментальні частини, які складають буквально кожну програму, коли-небудь написану. Думайте про них як про основні інгредієнти вашого улюбленого рецепту – як тільки ви зрозумієте, що кожен з них робить, ви зможете читати і писати код практично будь-якою мовою! +✅ **Про послідовність Фібоначчі**: Цей надзвичайно гарний числовий патерн (де кожне число дорівнює сумі двох попередніх: 0, 1, 1, 2, 3, 5, 8...) зустрічається буквально *усюди* в природі! Ви знайдете його у спіралях соняшника, у візерунках шишок, у тому, як вигинаються мушлі наутилуса, і навіть у тому, як ростуть гілки дерев. Це просто вражає, як математика і код допомагають нам зрозуміти і відтворити патерни, за допомогою яких природа створює красу! -Це трохи схоже на вивчення граматики програмування. Пам'ятаєте, як у школі ви вивчали іменники, дієслова і те, як складати речення? У програмуванні є своя версія граматики, і чесно кажучи, вона набагато логічніша і поблажливіша, ніж граматика англійської мови! 😄 -### Інструкції: покрокові вказівки +## Будівельні блоки, що створюють магію -Почнемо з **інструкцій** – це як окремі речення в розмові з вашим комп'ютером. Кожна інструкція говорить комп'ютеру зробити щось конкретне, як давати вказівки: "Поверни ліворуч тут", "Зупинись на червоному світлі", "Припаркуйся на тому місці". +Добре, тепер, коли ви побачили, як виглядають мови програмування на практиці, давайте розберемося у фундаментальних складових, з яких складається буквально кожна написана програма. Уявіть їх як необхідні інгредієнти у вашому улюбленому рецепті — як тільки ви зрозумієте, що кожен з них робить, ви зможете читати і писати код майже на будь-якій мові! -Що мені подобається в інструкціях, так це те, наскільки вони зазвичай зрозумілі. Подивіться: +Це дещо схоже на вивчення граматики програмування. Пам’ятаєте в школі, як ви вчили іменники, дієслова і як складати речення? У програмування є своя версія граматики, і чесно кажучи, вона значно логічніша і поблажливіша, ніж граматика англійської мови! 😄 + +### Оператори: покрокові інструкції + +Почнемо з **операторів** – вони схожі на окремі речення у вашому діалозі з комп’ютером. Кожен оператор велить комп’ютеру зробити одну конкретну дію, ніби даючи вказівки: «Поверни ліворуч тут», «Зупинися на червоне світло», «Запаркуйся на тому місці». + +Що мені подобається в операторах, так це те, наскільки вони зазвичай зручні для читання. Подивіться на це: ```javascript -// Basic statements that perform single actions +// Базові оператори, які виконують окремі дії const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Ось що робить цей код:** -- **Оголошує** константну змінну для збереження імені користувача -- **Відображає** привітальне повідомлення в консоль -- **Обчислює** і зберігає результат математичної операції + +**Ось що робить цей код:** +- **Оголосити** константну змінну для збереження імені користувача +- **Відобразити** вітальне повідомлення у консолі +- **Обчислити** і зберегти результат математичної операції ```javascript -// Statements that interact with web pages +// Оператори, що взаємодіють з веб-сторінками document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Крок за кроком, ось що відбувається:** -- **Змінює** заголовок вебсторінки, який з'являється у вкладці браузера -- **Змінює** колір фону всього тіла сторінки -### Змінні: система пам'яті вашої програми +**Крок за кроком, що відбувається:** +- **Змінити** заголовок вебсторінки, що відображається на вкладці браузера +- **Змінити** колір фону всього тіла сторінки + +### Змінні: система пам’яті вашої програми -Добре, **змінні** – це, чесно кажучи, одна з моїх улюблених концепцій для викладання, тому що вони дуже схожі на те, що ви вже використовуєте щодня! +Добре, **змінні** — це чесно одна з моїх улюблених концепцій для навчання, бо вони дуже схожі на те, що ви вже використовуєте щодня! -Подумайте про список контактів у вашому телефоні. Ви не запам'ятовуєте номери всіх – натомість ви зберігаєте "Мама", "Кращий друг" або "Піцерія, яка доставляє до 2 ночі" і дозволяєте телефону запам'ятовувати фактичні номери. Змінні працюють точно так само! Вони як мітки на контейнерах, де ваша програма може зберігати інформацію і отримувати її пізніше, використовуючи назву, яка дійсно має сенс. +Подумайте про список контактів у вашому телефоні. Ви не запам’ятовуєте всі номери телефонів – замість цього ви зберігаєте «Мама», «Кращий друг» або «Піца до 2 ранку», і телефон запам’ятовує номери за вас. Змінні працюють так само! Вони як підписані контейнери, у яких ваша програма може зберігати інформацію і витягувати її пізніше за назвою, що має сенс. -Ось що дійсно круто: змінні можуть змінюватися під час виконання програми (звідси назва "змінна" – бачите, що вони зробили?). Так само, як ви можете оновити контакт піцерії, коли знайдете щось краще, змінні можуть оновлюватися, коли ваша програма отримує нову інформацію або змінюються обставини! +Ось що насправді круто: змінні можуть змінюватися під час роботи програми (звідси і назва «змінна» — помітили гру слів?). Як ви можете оновлювати контакт піцерії, коли знаходите кращу, так і змінні можуть оновлюватися, коли ваша програма дізнається щось нове або коли змінюються обставини! -Дозвольте показати вам, наскільки це просто і красиво: +Дозвольте показати, наскільки це просто і красиво: ```javascript -// Step 1: Creating basic variables +// Крок 1: Створення базових змінних const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Розуміння цих концепцій:** -- **Зберігайте** незмінні значення у змінних `const` (наприклад, назва сайту) -- **Використовуйте** `let` для значень, які можуть змінюватися протягом програми -- **Призначайте** різні типи даних: рядки (текст), числа і булеві значення (true/false) -- **Обирайте** описові назви, які пояснюють, що містить кожна змінна + +**Розуміння цих концепцій:** +- **Зберігати** незмінні значення у змінних `const` (наприклад, назву сайту) +- **Використовувати** `let` для значень, які можуть змінюватися протягом програми +- **Присвоювати** різні типи даних: рядки (текст), числа, логічні значення (true/false) +- **Вибирати** описові назви, які пояснюють, що містить кожна змінна ```javascript -// Step 2: Working with objects to group related data +// Крок 2: Робота з об'єктами для групування пов’язаних даних const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**У наведеному прикладі ми:** -- **Створили** об'єкт для групування пов'язаної інформації про погоду -- **Організували** кілька частин даних під одним ім'ям змінної -- **Використали** пари ключ-значення для чіткого позначення кожної частини інформації + +**У наведеному прикладі ми:** +- **Створили** об’єкт, щоб згрупувати пов’язані погодні дані +- **Організували** кілька даних під однією назвою змінної +- **Використали** пари ключ-значення, щоб чітко позначити кожен елемент інформації ```javascript -// Step 3: Using and updating variables +// Крок 3: Використання та оновлення змінних console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Оновлення змінних, які можна змінювати currentWeather = "cloudy"; temperature = 68; ``` - -**Давайте розберемо кожну частину:** -- **Відображаємо** інформацію за допомогою шаблонних літералів із синтаксисом `${}` -- **Доступ до** властивостей об'єкта за допомогою точкової нотації (`weatherData.windSpeed`) -- **Оновлюємо** змінні, оголошені з `let`, щоб відобразити змінні умови -- **Об'єднуємо** кілька змінних для створення змістовних повідомлень + +**Розберемо кожну частину:** +- **Вивести** інформацію, використовуючи шаблонні літерали з `${}` синтаксисом +- **Отримати доступ** до властивостей об’єкта через крапкову нотацію (`weatherData.windSpeed`) +- **Оновлювати** змінні, оголошені через `let`, щоб відображати змінні умови +- **Комбінувати** кілька змінних для створення змістовних повідомлень ```javascript -// Step 4: Modern destructuring for cleaner code +// Крок 4: Сучасне деструктурування для чистішого коду const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**Що потрібно знати:** -- **Витягуйте** конкретні властивості з об'єктів за допомогою деструктуризації -- **Створюйте** нові змінні автоматично з тими ж назвами, що й ключі об'єкта -- **Спрощуйте** код, уникаючи повторюваної точкової нотації -### Потік управління: навчіть вашу програму думати +**Що потрібно знати:** +- **Витягувати** конкретні властивості з об’єктів за допомогою деструктуризації +- **Створювати** нові змінні автоматично з тими ж іменами, що й ключі об’єкта +- **Спрощувати** код, уникаючи повторюваної крапкової нотації + +### Управління потоком: вчимо вашу програму думати -Добре, ось де програмування стає абсолютно захоплюючим! **Потік управління** – це, по суті, навчання вашої програми приймати розумні рішення, точно так, як ви робите це щодня, навіть не замислюючись. +Добре, саме тут програмування стає справді вражаючим! **Управління потоком** – це фактично навчання вашої програми приймати розумні рішення, так само, як ви робите це щодня, навіть не задумуючись. -Уявіть собі: сьогодні вранці ви, ймовірно, пройшли через щось на кшталт "Якщо йде дощ, я візьму парасольку. Якщо холодно, я одягну куртку. Якщо я запізнююся, я пропущу сніданок і візьму каву по дорозі." Ваш мозок природно слідує цій логіці "якщо-то" десятки разів щодня! +Уявіть собі: сьогодні вранці ви йшли через щось на кшталт «Якщо йде дощ, візьму парасольку. Якщо холодно — вдягну куртку. Якщо запізнююсь — пропущу сніданок і візьму каву по дорозі.» Ваш мозок природно слідує цій логіці if-then десятки разів щодня! -Це те, що робить програми розумними і живими, а не просто слідуванням якомусь нудному, передбачуваному сценарію. Вони можуть фактично оцінювати ситуацію, аналізувати, що відбувається, і відповідати відповідно. Це як дати вашій програмі мозок, який може адаптуватися і приймати рішення! +Саме це робить програми розумними і живими, а не просто слідкують за нудним, передбачуваним скриптом. Вони можуть оцінювати ситуацію, аналізувати, що відбувається, і відповідати відповідно. Це як дати вашій програмі мозок, який може адаптуватися і приймати рішення! -Хочете побачити, як це працює? Дозвольте показати вам: +Хочете побачити, як це прекрасно працює? Ось: ```javascript -// Step 1: Basic conditional logic +// Крок 1: Базова умовна логіка const userAge = 17; if (userAge >= 18) { @@ -315,15 +388,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Ось що робить цей код:** -- **Перевіряє**, чи відповідає вік користувача вимогам для голосування -- **Виконує** різні блоки коду залежно від результату умови -- **Обчислює** і відображає, скільки часу залишилося до права голосу, якщо менше 18 років -- **Надає** конкретний, корисний зворотний зв'язок для кожного сценарію + +**Що робить цей код:** +- **Перевіряє**, чи відповідає вік користувача вимогам для голосування +- **Виконує** різні блоки коду залежно від результату умови +- **Обчислює** та виводить, скільки залишилось до права голосу, якщо менше 18 +- **Надає** конкретний, корисний зворотний зв’язок для кожного сценарію ```javascript -// Step 2: Multiple conditions with logical operators +// Крок 2: Кілька умов з логічними операторами const userAge = 17; const hasPermission = true; @@ -335,26 +408,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Розбираємо, що тут відбувається:** -- **Об'єднуємо** кілька умов за допомогою оператора `&&` (і) -- **Створюємо** ієрархію умов за допомогою `else if` для кількох сценаріїв -- **Обробляємо** всі можливі випадки за допомогою фінального `else` -- **Надаємо** чіткий, дієвий зворотний зв'язок для кожної різної ситуації + +**Розбір того, що тут відбувається:** +- **Об’єднує** кілька умов за допомогою оператора `&&` (і) +- **Створює** ієрархію умов за допомогою `else if` для кількох випадків +- **Опрацьовує** всі можливі варіанти за допомогою заключного `else` +- **Надає** чіткий і дієвий фідбек для кожної ситуації ```javascript -// Step 3: Concise conditional with ternary operator +// Крок 3: Лаконічна умова з тернарним оператором const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Що потрібно пам'ятати:** -- **Використовуйте** тернарний оператор (`? :`) для простих умов із двома варіантами -- **Пишіть** умову спочатку, потім `?`, потім результат для true, потім `:`, потім результат для false -- **Застосовуйте** цей шаблон, коли потрібно призначити значення на основі умов + +**Що потрібно пам’ятати:** +- **Використовувати** тернарний оператор (`? :`) для простих двовариантних умов +- **Писати** умову спочатку, потім `?`, після чого — результат для істинного випадку, потім `:`, і результат для хибного +- **Застосовувати** цей патерн, коли потрібно присвоювати значення за умовами ```javascript -// Step 4: Handling multiple specific cases +// Крок 4: Обробка кількох конкретних випадків const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -373,58 +446,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**Цей код виконує наступне:** -- **Порівнює** значення змінної з кількома конкретними випадками -- **Групує** схожі випадки разом (робочі дні проти вихідних) -- **Виконує** відповідний блок коду, коли знайдено збіг -- **Включає** випадок `default` для обробки несподіваних значень -- **Використовує** оператори `break`, щоб запобігти виконанню наступного випадку -> 💡 **Аналогія з реальним світом**: Думайте про потік управління як про найтерплячіший GPS, який дає вам вказівки. Він може сказати: "Якщо на Main Street затори, їдьте по шосе. Якщо на шосе ремонт, спробуйте мальовничий маршрут." Програми використовують точно таку ж умовну логіку, щоб реагувати розумно на різні ситуації і завжди надавати користувачам найкращий можливий досвід. +**Цей код виконує наступне:** +- **Порівнює** значення змінної з кількома конкретними випадками +- **Групує** схожі випадки разом (будні проти вихідних) +- **Виконує** відповідний блок коду при знаходженні збігу +- **Включає** `default` для обробки несподіваних значень +- **Використовує** `break` для запобігання продовженню виконання у наступному випадку -### 🎯 **Перевірка концепції: освоєння основ** +> 💡 **Приклад зі світу:** уявіть управління потоком як найтерплячішу навігаторську систему у світі, що дає вам вказівки. Вона скаже: «Якщо на Main Street затор, поїдь по автомагістралі. Якщо автомагістралю перекриває будівництво – вибери мальовничий маршрут.» Програми використовують точно таку ж умовну логіку, щоб розумно реагувати на різні ситуації і завжди надавати найкращий користувацький досвід. -**Давайте перевіримо, як ви справляєтеся з основами:** -- Чи можете ви пояснити різницю між змінною і інструкцією своїми словами? -- Подумайте про реальний сценарій, де ви б використали рішення "якщо-то" (як у нашому прикладі з голосуванням) -- Що вас здивувало в логіці програмування? +### 🎯 **Перевірка розуміння: майстерність будівельних блоків** -**Швидкий заряд впевненості:** +**Давайте перевіримо, як у вас із фундаментальними поняттями:** +- Чи можете ви власними словами пояснити різницю між змінною і оператором? +- Згадайте реальний приклад, де ви використали б if-then рішення (як наш приклад із голосуванням) +- Що з логіки програмування вас найбільше здивувало? + +**Швидкий бустер впевненості:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 Оператори
(Інструкції)"] --> B["📦 Змінні
(Зберігання)"] --> C["🔀 Управління потоком
(Рішення)"] --> D["🎉 Робоча програма!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` - -✅ **Що буде далі**: Ми будемо отримувати величезне задоволення, заглиблюючись у ці концепції, продовжуючи цю неймовірну подорож разом! Зараз просто зосередьтеся на тому, щоб відчути захоплення від усіх дивовижних можливостей, які чекають попереду. Конкретні навички та техніки запам'ятаються природно, коли ми будемо практикуватися разом – обіцяю, це буде набагато веселіше, ніж ви могли очікувати! +✅ **Що буде далі**: Нас чекає неймовірно цікава подорож, де ми глибше зануримося у ці поняття! Зараз просто зосередьтеся на емоції захоплення від усіх неймовірних можливостей попереду. Конкретні навички й техніки прийдуть природно, коли ми будемо практикувати разом — обіцяю, це буде значно цікавіше, ніж ви очікуєте! -## Інструменти для роботи +## Інструменти професіонала -Добре, це чесно той момент, коли я настільки схвильований, що ледве можу стриматися! 🚀 Ми збираємося поговорити про неймовірні інструменти, які змусять вас відчути, що вам щойно дали ключі від цифрового космічного корабля. +Добре, цього моменту я майже не можу стримати захоплення! 🚀 Зараз ми поговоримо про неймовірні інструменти, які зроблять так, ніби вам щойно вручили ключі від цифрового космічного корабля. -Знаєте, як у шеф-кухаря є ті ідеально збалансовані ножі, які здаються продовженням його рук? Або як у музиканта є та одна гітара, яка ніби співає, щойно він торкається її? Ну, у розробників є своя версія цих магічних інструментів, і ось що вас абсолютно вразить – більшість із них абсолютно безкоштовні! +Ви знаєте, як шеф-кухар має ідеально збалансовані ножі, які здаються продовженням його рук? А музикант має ту одну гітару, яка починає співати в той момент, коли він її торкається? Так ось, у розробників є власна версія таких магічних інструментів, і ось що з них вас точно здивує — більшість із них абсолютно безкоштовні! -Я буквально підстрибую на стільці, думаючи про те, щоб поділитися ними з вами, тому що вони повністю революціонізували те, як ми створюємо програмне забезпечення. Ми говоримо про асистентів програмування на основі штучного інтелекту, які можуть допомогти написати ваш код (я не жартую!), хмарні середовища, де ви можете створювати цілі додатки буквально з будь-якого місця з Wi-Fi, і інструменти для налагодження, настільки складні, що вони схожі на рентгенівське бачення для ваших програм. +Я буквально стрибаю на стільці від радості, що можу це вам показати, бо ці інструменти повністю революціонізували те, як ми створюємо програмне забезпечення. Це AI-асистенти кодування, які можуть допомагати писати ваш код (і я не жартую!), хмарні середовища, де ви можете будувати повноцінні додатки буквально з будь-якого місця з Wi-Fi, та надскладні інструменти для налагодження, які немов дали вашій програмі рентгенівський зір. -І ось частина, яка досі викликає у мене мурашки: це не "інструменти для початківців", які ви переростете. Це ті самі професійні інструменти, які розробники в Google, Netflix і тому інді-студії додатків, яку ви любите, використовують прямо зараз. Ви будете відчувати себе справжнім професіоналом, використовуючи їх! +І ось те, що до сих пір дає мурашки: це не «інструменти для початківців», які ви швидко зростете. Це ті самі професійні інструменти, що їх використовують розробники Google, Netflix і ті інді-студії додатків, які ви любите, саме зараз. Ви відчуєте себе справжнім профі, використовуючи їх! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 Ваша Ідея"] --> B["⌨️ Редактор Коду
(VS Code)"] + B --> C["🌐 Інструменти Розробника Браузера
(Тестування та Налагодження)"] + C --> D["⚡ Командний Рядок
(Автоматизація та Інструменти)"] + D --> E["📚 Документація
(Навчання та Посилання)"] + E --> F["🚀 Чудовий Веб Додаток!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 AI Асистент
(GitHub Copilot)"] + C -.-> H["📱 Тестування Пристроїв
(Адаптивний Дизайн)"] + D -.-> I["📦 Менеджери Пакетів
(npm, yarn)"] + E -.-> J["👥 Спільнота
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -433,325 +505,352 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - ### Редактори коду та IDE: ваші нові цифрові найкращі друзі -Давайте поговоримо про редактори коду – вони серйозно стануть вашими новими улюбленими місцями для проведення часу! Думайте про них як про ваш особистий кодовий притулок, де ви будете проводити більшу частину часу, створюючи і вдосконалюючи свої цифрові творіння. +Поговоримо про редактори коду – вони серйозно скоро стануть вашим улюбленим місцем для творчості! Уявіть їх як особисте святилище програмування, де ви проведете більшу частину часу, пишучи і вдосконалюючи свої цифрові твори. -Але ось що абсолютно магічне в сучасних редакторах: вони не просто модні текстові редактори. Вони як найгеніальніший, підтримуючий наставник програмування, який сидить поруч із вами 24/7. Вони ловлять ваші помилки, перш ніж ви навіть їх помітите, пропонують покращення, які змушують вас виглядати як геній, допомагають зрозуміти, що робить кожен шматок коду, і деякі з них навіть можуть передбачити, що ви збираєтеся написати, і запропонувати завершити ваші думки! +А ось що справді магічно у сучасних редакторах: це не просто гарні текстові редактори. Це мовби найрозумніший, найпідтримуючий ментор з кодування, який сидить поруч з вами 24/7. Вони ловлять помилки ще до того, як ви їх помітите, пропонують покращення, що роблять вас генієм, допомагають зрозуміти, що робить кожен рядок коду, і деякі навіть передбачають, що ви збираєтесь написати, і пропонують закінчити вашу думку! -Я пам'ятаю, коли вперше відкрив автозаповнення – я буквально відчував, що живу в майбутньому. Ви починаєте щось писати, і ваш редактор каже: "Гей, ви думали про цю функцію, яка робить саме те, що вам потрібно?" Це як мати читача думок як кодового друга! +Я пригадую, як уперше відкрив автозаповнення – я буквально відчував, що живу в майбутньому. Ви починаєте вводити щось, і редактор каже: «Гей, чи ти думав про цю функцію, яка робить саме те, що тобі потрібно?» Це як мати в думках читача у якості напарника з кодування! **Що робить ці редактори такими неймовірними?** -Сучасні редактори коду пропонують вражаючий набір функцій, розроблених для підвищення вашої продуктивності: +Сучасні редактори коду пропонують вражаючий набір функцій для підвищення вашої продуктивності: + +| Функція | Що робить | Чому допомагає | +|---------|-----------|----------------| +| **Підсвічування синтаксису** | Кольорове виділення різних частин коду | Полегшує читання коду і пошук помилок | +| **Автозаповнення** | Пропонує код під час набору | Прискорює написання коду і знижує помилки | +| **Інструменти налагодження** | Допомагають знаходити і виправляти помилки | Заощаджує години на пошук багів | +| **Розширення** | Додають спеціалізовані функції | Налаштовують редактор під будь-які технології | +| **AI-асистенти** | Пропонують код та пояснення | Прискорюють навчання і продуктивність | -| Функція | Що вона робить | Чому це допомагає | -|---------|----------------|-------------------| -| **Підсвічування синтаксису** | Розфарбовує різні частини вашого коду | Робить код легшим для читання і пошуку помилок | -| **Автозаповнення** | Пропонує код під час введення | Прискорює написання коду і зменшує помилки | -| **Інструменти налагодження** | Допомагають знайти і виправити помилки | Економить години часу на пошук проблем | -| **Розширення** | Додають спеціалізовані функції | Налаштовують редактор для будь-якої технології | -| **AI Асистенти** | Пропонують код і пояснення | Прискорюють навчання і продуктивність | +> 🎥 **Відеоресурс**: Хочете побачити ці інструменти в дії? Подивіться це [відео про інструменти професіонала](https://youtube.com/watch?v=69WJeXGBdxg) для повного огляду. -> 🎥 **Відеоресурс**: Хочете побачити ці інструменти в дії? Перегляньте цей [відео про інструменти для роботи](https://youtube.com/watch?v=69WJeXGBdxg) для всебічного огляду. +#### Рекомендовані редактори для веб-розробки -#### Рекомендовані редактори для веброзробки +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (безкоштовно) +- Найпопулярніший серед веб-розробників +- Відмінна екосистема розширень +- Вбудований термінал і інтеграція Git +- **Обов’язкові розширення**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – AI-пропозиції коду + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – спільна робота в реальному часі + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – автоматичне форматування коду + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – ловить помилки при наборі тексту -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Безкоштовно) -- Найпопулярніший серед веброзробників -- Відмінна екосистема розширень -- Вбудований термінал і інтеграція з Git -- **Обов'язкові розширення**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Пропозиції коду на основі AI - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Спільна робота в реальному часі - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Автоматичне форматування коду - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Виявлення помилок у коді +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (платно, безкоштовно для студентів) +- Просунуті інструменти налагодження і тестування +- Інтелектуальне автозаповнення коду +- Вбудований контрол версій -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Платно, безкоштовно для студентів) -- Розширені інструменти -Коли мені вперше показали DevTools у браузері, я провела близько трьох годин, просто клацаючи все підряд і вигукуючи: "СТОП, ВОНО МОЖЕ РОБИТИ І ЦЕ?!" Ви буквально можете редагувати будь-який сайт у реальному часі, бачити, як швидко все завантажується, тестувати, як ваш сайт виглядає на різних пристроях, і навіть відлагоджувати JavaScript, як справжній профі. Це просто неймовірно! +**IDE на базі хмари** (різні цінові плани) +- [GitHub Codespaces](https://github.com/features/codespaces) – повний VS Code у браузері +- [Replit](https://replit.com/) – чудово для навчання і спільного кодування +- [StackBlitz](https://stackblitz.com/) – миттєва повноцінна веб-розробка -**Ось чому браузери — ваш секретний інструмент:** +> 💡 **Порада для початку**: Починайте з Visual Studio Code — він безкоштовний, широко використовується й має величезну спільноту з численними навчальними матеріалами та розширеннями. -Коли ви створюєте вебсайт або вебдодаток, вам потрібно побачити, як він виглядає і працює в реальному світі. Браузери не лише показують вашу роботу, але й надають детальний зворотний зв'язок про продуктивність, доступність і потенційні проблеми. -#### Інструменти розробника в браузері (DevTools) +### Веб-браузери: ваша секретна лабораторія розробника -Сучасні браузери включають комплексні набори інструментів для розробки: +Добре, готуйтеся бути враженими! Ви звикли використовувати браузери для перегляду соцмереж і відео? Так от, виявляється, вони весь цей час приховували неймовірну секретну лабораторію розробника, яка чекає, щоб ви її відкрили! -| Категорія інструментів | Що робить | Приклад використання | -|-------------------------|-----------|----------------------| +Кожен раз, коли ви клікаєте правою кнопкою миші на вебсторінці і обираєте «Перевірити елемент», ви відкриваєте прихований світ інструментів розробника, які насправді потужніші, ніж деяке дороге програмне забезпечення, за яке я колись платив сотні доларів. Це як виявити, що ваша звичайна кухня приховує за стіною лабораторію професійного кухаря! +Вперше, коли хтось показав мені DevTools браузера, я провів близько трьох годин, просто клікаючи навколо і кажучи "СТІЙ, ВОНА ТАКОЖ МОЖЕ ЦЕ?!" Ви буквально можете редагувати будь-який вебсайт у реальному часі, бачити точно, наскільки швидко все завантажується, перевіряти, як ваш сайт виглядає на різних пристроях, і навіть налагоджувати JavaScript, як повний профі. Це абсолютно вражає! + +**Ось чому браузери — ваш секретний козир:** + +Коли ви створюєте вебсайт або вебдодаток, вам потрібно бачити, як він виглядає і поводиться в реальному світі. Браузери не лише відображають вашу роботу, а й надають докладний зворотний зв’язок про продуктивність, доступність та потенційні проблеми. + +#### Інструменти розробника браузера (DevTools) + +Сучасні браузери містять комплексні набори інструментів для розробки: + +| Категорія інструментів | Що він робить | Приклад використання | +|------------------------|---------------|---------------------| | **Інспектор елементів** | Перегляд і редагування HTML/CSS у реальному часі | Налаштування стилів для миттєвого результату | -| **Консоль** | Перегляд повідомлень про помилки та тестування JavaScript | Відлагодження проблем і експерименти з кодом | -| **Монітор мережі** | Відстеження завантаження ресурсів | Оптимізація продуктивності та часу завантаження | -| **Перевірка доступності** | Тестування інклюзивного дизайну | Переконання, що ваш сайт працює для всіх користувачів | -| **Симулятор пристроїв** | Перегляд на різних розмірах екранів | Тестування адаптивного дизайну без використання кількох пристроїв | +| **Консоль** | Перегляд помилок і тестування JavaScript | Налагодження проблем та експерименти з кодом | +| **Моніторинг мережі** | Відстеження завантаження ресурсів | Оптимізація продуктивності та часу завантаження | +| **Перевірка доступності** | Тестування на інклюзивний дизайн | Забезпечення роботи сайту для всіх користувачів | +| **Симулятор пристроїв** | Перегляд на різних розмірах екранів | Тестування адаптивного дизайну без кількох пристроїв | #### Рекомендовані браузери для розробки -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Стандарт DevTools з обширною документацією -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Відмінні інструменти для CSS Grid і доступності -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Побудований на Chromium з ресурсами для розробників від Microsoft +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Стандартні DevTools з великою кількістю документації +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Чудові інструменти для CSS Grid та доступності +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Побудований на Chromium із ресурсами від Microsoft + +> ⚠️ **Важлива порада з тестування**: Завжди тестуйте свої сайти у кількох браузерах! Те, що ідеально працює у Chrome, може виглядати інакше в Safari чи Firefox. Професійні розробники тестують у всіх основних браузерах, щоб забезпечити послідовний користувацький досвід. -> ⚠️ **Важлива порада для тестування**: Завжди тестуйте ваші вебсайти в кількох браузерах! Те, що ідеально працює в Chrome, може виглядати інакше в Safari або Firefox. Професійні розробники тестують у всіх основних браузерах, щоб забезпечити однаковий досвід для користувачів. ### Інструменти командного рядка: ваш шлях до суперсил розробника -Добре, давайте будемо чесними щодо командного рядка, тому що я хочу, щоб ви почули це від когось, хто дійсно розуміє. Коли я вперше побачила його — цей страшний чорний екран із миготливим текстом — я буквально подумала: "Ні, точно ні! Це виглядає як щось із хакерського фільму 1980-х, і я точно недостатньо розумна для цього!" 😅 +Добре, давайте будемо чесними про командний рядок, бо я хочу, щоб ви почули це від когось, хто дійсно розуміє. Коли я вперше побачив його – цей страшний чорний екран із миготливим текстом – я буквально подумав: "Ні, ні в якому разі! Це виглядає, як щось із хакерського фільму 1980-х, і я точно не розумний для такого!" 😅 -Але ось що я хотіла б, щоб мені тоді сказали, і що я кажу вам зараз: командний рядок не страшний — це насправді як прямий діалог із вашим комп'ютером. Уявіть це як різницю між замовленням їжі через модний додаток із картинками та меню (що зручно і просто) і заходом у ваш улюблений місцевий ресторан, де шеф-кухар знає, що вам подобається, і може приготувати щось ідеальне, просто почувши "здивуйте мене чимось неймовірним". +Але ось що я хотів, щоб мені тоді хтось сказав, і що я кажу вам зараз: командний рядок не страшний – це насправді як розмова безпосередньо з вашим комп’ютером. Уявіть це як різницю між замовленням їжі через крутий додаток із картинками та меню (що зручно і просто) і заходом у ваш улюблений локальний ресторан, де шеф знає точно, що вам подобається, і може приготувати щось ідеальне, просто почувши від вас "порадуй мене чимось неймовірним." -Командний рядок — це місце, де розробники відчувають себе справжніми чарівниками. Ви вводите кілька, здавалося б, магічних слів (добре, це просто команди, але вони здаються магічними!), натискаєте Enter, і БАЦ — ви створили структуру проекту, встановили потужні інструменти з усього світу або розгорнули ваш додаток в інтернеті для мільйонів людей. Як тільки ви відчуєте цю силу, це стає досить захоплюючим! +Командний рядок – це місце, куди приходять розробники, щоб відчути себе справжніми чарівниками. Ви вводите кілька ніби магічних слів (ну, це просто команди, але вони відчуваються магічними!), натискаєте enter, і БАЦ – ви створили цілі структури проекту, встановили потужні інструменти з усього світу або розгорнули свій додаток в інтернеті для мільйонів користувачів. Як тільки ви відчуєте цю силу, це реально затягує! -**Чому командний рядок стане вашим улюбленим інструментом:** +**Ось чому командний рядок стане вашим улюбленим інструментом:** -Хоча графічні інтерфейси чудово підходять для багатьох завдань, командний рядок перевершує їх у автоматизації, точності та швидкості. Багато інструментів для розробки працюють переважно через інтерфейси командного рядка, і навчання їх ефективному використанню може значно підвищити вашу продуктивність. +Хоча графічні інтерфейси класні для багатьох завдань, командний рядок блискуче справляється з автоматизацією, точністю і швидкістю. Багато інструментів розробки працюють через командний рядок, і вміння користуватися ним ефективно значно підвищить вашу продуктивність. ```bash -# Step 1: Create and navigate to project directory +# Крок 1: Створіть та перейдіть у каталог проекту mkdir my-awesome-website cd my-awesome-website ``` -**Що робить цей код:** -- **Створює** нову директорію під назвою "my-awesome-website" для вашого проекту +**Ось що робить цей код:** +- **Створює** новий каталог "my-awesome-website" для вашого проєкту - **Переходить** у щойно створену директорію, щоб почати роботу ```bash -# Step 2: Initialize project with package.json +# Крок 2: Ініціалізуйте проект з package.json npm init -y -# Install modern development tools +# Встановіть сучасні інструменти розробки npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Крок за кроком, ось що відбувається:** -- **Ініціалізує** новий проект Node.js із налаштуваннями за замовчуванням за допомогою `npm init -y` -- **Встановлює** Vite як сучасний інструмент для швидкої розробки та створення продакшн-збірок -- **Додає** Prettier для автоматичного форматування коду та ESLint для перевірки якості коду -- **Використовує** прапорець `--save-dev`, щоб позначити ці залежності як призначені лише для розробки +**Крок за кроком, що відбувається:** +- **Ініціалізує** новий проєкт Node.js з налаштуваннями за замовчуванням за допомогою `npm init -y` +- **Встановлює** Vite як сучасний інструмент збірки для швидкої розробки і продакшен-збірок +- **Додає** Prettier для автоматичного форматування коду і ESLint для перевірки якості коду +- **Використовує** прапорець `--save-dev`, щоб позначити ці залежності тільки для розробки ```bash -# Step 3: Create project structure and files +# Крок 3: Створення структури проекту і файлів mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Запустити сервер розробки npx vite ``` **У наведеному вище ми:** -- **Організували** наш проект, створивши окремі папки для вихідного коду та ресурсів -- **Згенерували** базовий HTML-файл із правильною структурою документа -- **Запустили** сервер розробки Vite для автоматичного перезавантаження та гарячої заміни модулів +- **Організували** проєкт, створивши окремі папки для вихідного коду і ресурсів +- **Згенерували** базовий HTML-файл із правильною структурою документа +- **Запустили** сервер розробки Vite для live-reload і гарячої заміни модулів #### Основні інструменти командного рядка для веброзробки -| Інструмент | Призначення | Чому він вам потрібен | -|------------|-------------|-----------------------| -| **[Git](https://git-scm.com/)** | Контроль версій | Відстеження змін, співпраця з іншими, резервне копіювання роботи | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript-оточення та управління пакетами | Запуск JavaScript поза браузерами, встановлення сучасних інструментів розробки | -| **[Vite](https://vitejs.dev/)** | Інструмент збірки та сервер розробки | Надшвидка розробка з гарячою заміною модулів | -| **[ESLint](https://eslint.org/)** | Якість коду | Автоматичне виявлення та виправлення проблем у вашому JavaScript | -| **[Prettier](https://prettier.io/)** | Форматування коду | Підтримка коду уніфікованим і читабельним | +| Інструмент | Призначення | Чому це вам потрібно | +|------------|-------------|----------------------| +| **[Git](https://git-scm.com/)** | Контроль версій | Відстежувати зміни, співпрацювати, робити резервні копії | +| **[Node.js & npm](https://nodejs.org/)** | Виконання JavaScript та менеджер пакетів | Запускати JS поза браузерами, встановлювати сучасні інструменти | +| **[Vite](https://vitejs.dev/)** | Інструмент збірки та dev сервер | Надзвичайно швидка розробка з гарячою заміною модулів | +| **[ESLint](https://eslint.org/)** | Якість коду | Автоматично знаходити і виправляти проблеми у JavaScript | +| **[Prettier](https://prettier.io/)** | Форматування коду | Підтримувати код у послідовно відформатованому і читабельному вигляді | -#### Варіанти для різних платформ +#### Опції для конкретних платформ **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Сучасний термінал із багатими функціями -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Потужне середовище для скриптів +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Сучасний, багатофункціональний термінал +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Потужне середовище скриптів - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Традиційний командний рядок Windows **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Вбудований додаток терміналу -- **[iTerm2](https://iterm2.com/)** - Покращений термінал із розширеними функціями +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Вбудований термінал +- **[iTerm2](https://iterm2.com/)** - Покращений термінал з розширеними можливостями **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандартна оболонка Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Розширений емулятор терміналу +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандартна оболонка Linux +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Просунутий емулятор термінала -> 💻 = Встановлено на операційній системі +> 💻 = Попередньо встановлено в ОС -> 🎯 **Шлях навчання**: Почніть із базових команд, таких як `cd` (зміна директорії), `ls` або `dir` (список файлів) і `mkdir` (створення папки). Практикуйтеся з командами сучасного робочого процесу, такими як `npm install`, `git status` і `code .` (відкриває поточну директорію у VS Code). З часом ви природно освоїте більш складні команди та техніки автоматизації. +> 🎯 **Навчальна стратегія**: Почніть з базових команд, як `cd` (зміна директорії), `ls` або `dir` (перелік файлів), і `mkdir` (створення папки). Тренуйтеся з командами сучасного workflow, як `npm install`, `git status` і `code .` (відкриває поточну директорію у VS Code). З часом ви природно опануєте більш складні команди та техніки автоматизації. -### Документація: ваш завжди доступний наставник -Добре, дозвольте мені поділитися маленьким секретом, який змусить вас почуватися набагато краще як новачка: навіть найдосвідченіші розробники проводять величезну частину свого часу, читаючи документацію. І це не тому, що вони не знають, що роблять – це насправді ознака мудрості! +### Документація: ваш завжди доступний наставник у навчанні -Уявіть документацію як доступ до найтерплячіших, найзнаючих вчителів у світі, які доступні 24/7. Застрягли на проблемі о 2 годині ночі? Документація тут із теплим віртуальним обіймом і саме тією відповіддю, яка вам потрібна. Хочете дізнатися про якусь круту нову функцію, про яку всі говорять? Документація вас підтримує зі зрозумілими прикладами. Прагнете зрозуміти, чому щось працює саме так? Ви здогадалися – документація готова пояснити це так, що нарешті все стане зрозуміло! +Добре, поділюсь маленьким секретом, який допоможе вам почуватися набагато впевненіше на початку: навіть найдосвідченіші розробники витрачають багато часу, читаючи документацію. І це не тому, що вони не знають, що роблять – це насправді знак мудрості! -Ось що повністю змінило моє сприйняття: світ веброзробки рухається неймовірно швидко, і ніхто (я маю на увазі абсолютно ніхто!) не тримає все в пам'яті. Я бачила, як старші розробники з досвідом понад 15 років шукають базовий синтаксис, і знаєте що? Це не соромно – це розумно! Справа не в тому, щоб мати ідеальну пам'ять; справа в тому, щоб знати, де швидко знайти надійні відповіді і як їх застосувати. +Уявіть документацію як найдоступніших, терплячих і знавців вчителів у світі, доступних 24/7. Застрягли у проблемі о 2 ночі? Документація тут, як теплий віртуальний обійм, з потрібною відповіддю. Хочете дізнатись про якусь класну нову функцію, про яку всі говорять? Документація підтримає вас покроковими прикладами. Прагнете зрозуміти, чому щось працює саме так? Вгадали – документація готова пояснити це так, щоб у вас нарешті все склалося! + +Ось що повністю змінило мій погляд: світ веброзробки розвивається надзвичайно швидко, і ніхто (та й справді ніхто!) не тримає все в пам’яті. Я бачив досвідчених розробників із 15+ роками досвіду, які шукали базовий синтаксис, і знаєте що? Це не соромно – це розумно! Не справа в ідеальній пам’яті, а в тому, щоб знати, де швидко знайти надійні відповіді і як їх застосувати. **Ось де відбувається справжня магія:** -Професійні розробники витрачають значну частину свого часу на читання документації – не тому, що вони не знають, що роблять, а тому, що ландшафт веброзробки розвивається так швидко, що залишатися в курсі вимагає постійного навчання. Хороша документація допомагає зрозуміти не лише *як* щось використовувати, але й *чому* і *коли* це робити. +Професійні розробники полюбляють багато часу читати документацію – не тому що не знають, що роблять, а тому що ландшафт веброзробки надто швидко змінюється, і триматися в курсі – це постійне навчання. Чудова документація допомагає вам зрозуміти не тільки *як* щось використовувати, а й *чому* і *коли*. -#### Основні ресурси документації +#### Важливі ресурси документації **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Золотий стандарт документації з вебтехнологій -- Комплексні посібники з HTML, CSS і JavaScript -- Містить інформацію про сумісність із браузерами -- Містить практичні приклади та інтерактивні демо +- Золотий стандарт документації вебтехнологій +- Всеосяжні посібники з HTML, CSS і JavaScript +- Включає інформацію про сумісність із браузерами +- Містить практичні приклади і інтерактивні демо **[Web.dev](https://web.dev)** (від Google) -- Найкращі практики сучасної веброзробки -- Посібники з оптимізації продуктивності -- Принципи доступності та інклюзивного дизайну -- Кейси з реальних проектів +- Сучасні найкращі практики веброзробки +- Посібники з оптимізації продуктивності +- Принципи доступності та інклюзивного дизайну +- Кейси з реальних проєктів **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ресурси для розробки під браузер Edge -- Посібники з прогресивних вебдодатків -- Інсайти з кросплатформної розробки +- Ресурси для розробки під браузер Edge +- Посібники з Progressive Web App +- Інсайти кросплатформної розробки **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структуровані навчальні програми -- Відеокурси від експертів галузі -- Практичні вправи з програмування +- Структуровані навчальні курси +- Відео від експертів галузі +- Практичні вправи з кодування -> 📚 **Стратегія навчання**: Не намагайтеся запам'ятати документацію – натомість навчіться ефективно її використовувати. Зберігайте закладки часто використовуваних посилань і практикуйте пошук конкретної інформації. +> 📚 **Стратегія навчання**: Не намагайтеся запам’ятати документацію – натомість навчіться ефективно нею користуватися. Закладки на часто потрібні довідники і вправи з пошуку точних відповідей значно допоможуть. -### 🔧 **Перевірка майстерності інструментів: що вас зацікавило?** +### 🔧 **Перевірка майстерності інструментів: що вам найбільше резонує?** -**Зробіть паузу і подумайте:** -- Який інструмент вам найбільше хочеться спробувати? (Немає неправильних відповідей!) -- Чи командний рядок все ще здається страшним, чи вам цікаво його освоїти? -- Чи можете ви уявити використання DevTools у браузері, щоб зазирнути за куліси ваших улюблених сайтів? +**Зробіть паузу й подумайте:** +- Який інструмент ви найбільше хочете спробувати першим? (Неправильних відповідей немає!) +- Чи досі командний рядок здається лякаючим, чи ви зацікавлені в ньому? +- Чи уявляєте, як використовувати DevTools браузера, щоб заглянути за куліси улюблених сайтів? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Час розробника, витрачений на інструменти" + "Редактор коду" : 40 + "Тестування в браузері" : 25 + "Командний рядок" : 15 + "Читання документації" : 15 + "Налагодження" : 5 ``` +> **Цікава інсайт:** Більшість розробників проводить близько 40% часу в редакторі коду, але погляньте, скільки часу витрачається на тестування, навчання та вирішення проблем. Програмування – це не тільки про написання коду, а про створення досвіду! -> **Цікава думка**: Більшість розробників проводять близько 40% свого часу у редакторі коду, але зверніть увагу, скільки часу йде на тестування, навчання та вирішення проблем. Програмування — це не лише написання коду, а й створення досвіду! - -✅ **Їжа для роздумів**: Ось щось цікаве для роздумів – як ви думаєте, інструменти для створення вебсайтів (розробка) можуть відрізнятися від інструментів для дизайну їхнього вигляду (дизайн)? Це як різниця між архітектором, який проектує красивий будинок, і будівельником, який його будує. Обидва важливі, але їм потрібні різні набори інструментів! Такий спосіб мислення дійсно допоможе вам побачити загальну картину того, як вебсайти оживають. +✅ **Їжа для роздумів:** Ось що цікаво поміркувати – чим, на вашу думку, інструменти для створення сайтів (розробка) відрізняються від інструментів для проєктування їх вигляду (дизайн)? Це приблизно як різниця між архітектором, який проектує красивий будинок, і підрядником, який його фактично зводить. Обидва важливі, але їм потрібні різні набори інструментів! Такий підхід допоможе вам побачити ширшу картину, як живуть вебсайти. -## Виклик GitHub Copilot Agent 🚀 +## Випробування GitHub Copilot Agent 🚀 -Використовуйте режим Agent, щоб виконати наступний виклик: +Використайте режим агента, щоб виконати наступне завдання: -**Опис:** Дослідіть функції сучасного редактора коду або IDE і продемонструйте, як він може покращити ваш робочий процес як веброзробника. +**Опис:** Дослідіть можливості сучасного редактора коду або IDE і продемонструйте, як він може покращити ваш робочий процес як веброзробника. -**Завдання:** Виберіть редактор коду або IDE (наприклад, Visual Studio Code, WebStorm або хмарний IDE). Перелічіть три функції або розширення, які допомагають писати, відлагоджувати або підтримувати код більш ефективно. Для кожного надайте коротке пояснення, як це покращує ваш робочий процес. +**Підказка:** Оберіть редактор коду або IDE (наприклад Visual Studio Code, WebStorm або хмарне IDE). Наведіть три функції або розширення, що допомагають ефективніше писати, налагоджувати або підтримувати код. Для кожної дайте коротке пояснення, як це покращує ваш робочий процес. --- ## 🚀 Виклик -**Ну що, детективе, готові до першої справи?** +**Отже, детективе, готові до першої справи?** + +Зараз, коли у вас є чудова база, у мене для вас пригода, яка допоможе побачити, наскільки надзвичайно різноманітний і захопливий світ програмування. І слухайте – це ще не про написання коду, тож не хвилюйтесь! Уявіть себе детективом мов програмування на вашій першій захоплюючій справі! + +**Ваше завдання, якщо вирішите його прийняти:** +1. **Стати дослідником мов:** Виберіть три мови програмування із зовсім різних світів – можливо одна для вебсайтів, одна для мобільних додатків, і одна для обробки даних науковцями. Знайдіть приклади однієї простої задачі, написаної на кожній з них. Обіцяю, ви будете в захваті від того, як вони можуть виглядати зовсім інакше, виконуючи однакову роботу! -Тепер, коли у вас є цей чудовий фундамент, я маю для вас пригоду, яка допоможе вам побачити, наскільки різноманітним і захоплюючим є світ програмування. І слухайте – це не про написання коду, тому ніякого тиску! Уявіть себе детективом мов програмування на вашій першій захоплюючій справі! +2. **Розкрийте їх історії створення:** Що робить кожну мову особливою? Ось цікавий факт – кожна мова програмування створена тому, що хтось подумав: «Знаєте, мусить бути кращий спосіб розв’язати цю конкретну проблему». Спробуйте з’ясувати, якими були ці проблеми. Деякі з цих історій справді захопливі! -**Ваша місія, якщо ви вирішите її прийняти:** -1. **Станьте дослідником мов**: Виберіть три мови програмування з абсолютно різних сфер – можливо, одну для створення вебсайтів, одну для створення мобільних додатків і одну для аналізу даних для науковців. Знайдіть приклади виконання одного простого завдання на кожній мові. Обіцяю, ви будете абсолютно здивовані, наскільки вони можуть відрізнятися, виконуючи одне й те ж завдання! +3. **Познайомтесь з їх спільнотами:** Подивіться, наскільки дружні і пристрасні спільноти кожної мови. Деякі налічують мільйони розробників, які діляться знаннями і допомагають один одному, інші – менші, але напрочуд згуртовані і підтримують. Вам сподобається бачити різні характери цих спільнот! -2. **Розкрийте їхні історії походження**: Що робить кожну мову особливою? Ось цікавий факт – кожна мова програмування була створена тому, що хтось подумав: "Знаєте що? Має бути кращий спосіб вирішити цю конкретну проблему." Чи можете ви з'ясувати, які це були проблеми? Деякі з цих історій дійсно захоплюючі! +4. **Довіртесь серцю:** Яка мова зараз здається вам найпростіше? Не турбуйтесь над «ідеальним» вибором – слухайте свої інстинкти! Справді, неправильної відповіді тут немає, і завжди можна дослідити інші пізніше. -3. **Познайомтеся з їхніми спільнотами**: Дізнайтеся, наскільки привітними та захопленими є спільноти кожної мови. Деякі мають мільйони розробників, які діляться знаннями та допомагають один одному, інші – менші, але надзвичайно згуртовані та підтримуючі. Вам сподобається побачити різні "особистості" цих спільнот! +**Бонусне детективне завдання:** Дізнайтеся, які великі сайти чи додатки побудовані на кожній з мов. Гарантую, ви здивуєтесь, дізнавшись, що стоїть за Instagram, Netflix чи тією мобільною грою, у яку ви не можете відірватися! -4. **Слухайте своє серце**: Яка мова здається вам найбільш доступною зараз? Не хвилюйтеся про "ідеальний" вибір – -## Огляд і самостійне навчання +> 💡 **Пам’ятайте**: Мета не стати експертом у цих мовах зараз. Ви просто знайомитесь з «околицями», перш ніж вибрати, де хочете поселитися. Не поспішайте, отримуйте задоволення і дозвольте допитливості вести вас! -**Не поспішайте, досліджуйте і отримуйте задоволення!** +## Давайте відсвяткуємо ваші відкриття! -Сьогодні ви охопили багато матеріалу, і це варто пишатися! Тепер настає найцікавіша частина – дослідження тем, які вас зацікавили. Пам'ятайте, це не домашнє завдання – це пригода! +Ой лишенько, ви сьогодні засвоїли стільки неймовірної інформації! Я щиро тішуся, що щораз більше цього дивовижного шляху лишається з вами. І пам’ятайте – це не тест з ідеальними відповідями. Це, скоріше, святкування всього крутого, що ви дізналися про цей захопливий світ, у який ви ось-ось поринете! -**Зануртеся глибше в те, що вас захоплює:** +[Пройдіть післяурочний тест](https://ff-quizzes.netlify.app/web/) -**Практикуйтеся з мовами програмування:** -- Відвідайте офіційні сайти 2-3 мов, які привернули вашу увагу. Кожна з них має свою унікальну особливість і історію! -- Спробуйте онлайн-платформи для програмування, такі як [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) або [Replit](https://replit.com/). Не бійтеся експериментувати – ви нічого не зламаєте! -- Почитайте про те, як виникла ваша улюблена мова програмування. Серйозно, деякі з цих історій дуже цікаві і допоможуть вам зрозуміти, чому мови працюють саме так. +## Повторення і самостійне навчання -**Освойте нові інструменти:** -- Завантажте Visual Studio Code, якщо ще цього не зробили – це безкоштовно, і вам точно сподобається! -- Проведіть кілька хвилин, переглядаючи ринок розширень. Це як магазин додатків для вашого редактора коду! -- Відкрийте інструменти розробника у вашому браузері і просто клацайте по всьому. Не хвилюйтеся, якщо щось незрозуміло – просто ознайомтеся з тим, що там є. +**Не поспішайте, досліджуйте і насолоджуйтесь!** +Ви сьогодні пройшли великий шлях, і це варто того, щоб пишатися! Тепер настає найцікавіше – досліджувати теми, які викликали вашу цікавість. Пам’ятайте, це не домашнє завдання – це пригода! -**Приєднуйтесь до спільноти:** -- Слідкуйте за спільнотами розробників на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) або [GitHub](https://github.com/). Спільнота програмістів дуже привітна до новачків! -- Дивіться відео для початківців про програмування на YouTube. Є багато чудових авторів, які пам'ятають, як це – починати з нуля. -- Розгляньте можливість приєднатися до місцевих зустрічей або онлайн-спільнот. Повірте, розробники люблять допомагати новачкам! +**Пірнайте глибше у те, що вас надихає:** -> 🎯 **Ось що я хочу, щоб ви запам'ятали**: Ніхто не очікує, що ви станете майстром програмування за одну ніч! Зараз ви просто знайомитеся з цим дивовижним новим світом, частиною якого ви скоро станете. Не поспішайте, насолоджуйтеся подорожжю і пам'ятайте – кожен розробник, яким ви захоплюєтеся, колись сидів точно там, де ви зараз, відчуваючи захоплення і, можливо, трохи розгубленість. Це абсолютно нормально, і це означає, що ви на правильному шляху! +**Попрактикуйтеся з мовами програмування:** +- Відвідайте офіційні сайти 2-3 мов, які привернули вашу увагу. Кожна має свій характер і історію! +- Спробуйте онлайн-майданчики для кодування, як-от [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), або [Replit](https://replit.com/). Не бійтеся експериментувати – нічого не зламаєте! +- Прочитайте про те, як виникла ваша улюблена мова. Справді, деякі історії походження дуже цікаві і допоможуть вам краще зрозуміти, чому мови працюють так, як вони працюють. + +**Привчіться до нових інструментів:** +- Завантажте Visual Studio Code, якщо ще не зробили цього – він безкоштовний, і він вам сподобається! +- Приділіть кілька хвилин огляду магазину розширень. Це як магазин додатків для вашого редактора коду! +- Відкрийте інструменти розробника у браузері та клацайте навколо. Не переймайтеся, якщо не все зрозуміло – просто ознайомтеся з тим, що там є. + +**Приєднайтесь до спільноти:** +- Підписуйтеся на деякі спільноти розробників на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), або [GitHub](https://github.com/). Спільнота програмістів дуже дружня до новачків! +- Дивіться відео для початківців на YouTube. Є багато чудових авторів, які пам’ятають, що таке починати з нуля. +- Розгляньте можливість приєднатися до локальних мітапів або онлайн-спільнот. Повірте, розробники люблять допомагати новачкам! + +> 🎯 **Послухайте, що я хочу, щоб ви пам’ятали**: від вас не чекають, що ви станете магом коду за одну ніч! Наразі ви просто знайомитеся з цим неймовірним новим світом, частиною якого станете. Не поспішайте, насолоджуйтеся подорожжю, і пам’ятайте – кожен розробник, ким ви захоплюєтеся, колись сидів саме там, де ви зараз, відчуваючи захоплення і, можливо, трохи розгубленості. Це абсолютно нормально і означає, що ви на правильному шляху! ## Завдання -[Читання документації](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Невеликий поштовх для вашого завдання**: Мені дуже хотілося б побачити, як ви досліджуєте інструменти, які ми ще не розглядали! Пропустіть редактори, браузери та інструменти командного рядка, про які ми вже говорили – існує цілий неймовірний всесвіт дивовижних інструментів для розробки, які тільки чекають, щоб їх відкрили. Шукайте ті, які активно підтримуються і мають живі, корисні спільноти (зазвичай вони мають найкращі навчальні матеріали і найбільш підтримуючих людей, коли ви неминуче застрягнете і потребуватимете дружньої допомоги). +> 💡 **Невеликий підштовх для вашого завдання**: Мені дуже хотілося б побачити, як ви вивчаєте інструменти, які ми ще не розглянули! Пропускайте редактори, браузери та командні інструменти, про які ми вже говорили – існує цілий неймовірний всесвіт чудових інструментів для розробки, що чекають на відкриття. Шукайте ті, що активно підтримуються і мають жваві, дружні спільноти (вони зазвичай мають найкращі підручники і найбільш підтримуючих людей, коли ви неминуче застрягнете і вам знадобиться допомога). --- -## 🚀 Хронологія вашої подорожі у програмуванні - -### ⚡ **Що можна зробити за наступні 5 хвилин** -- [ ] Додайте в закладки 2-3 сайти мов програмування, які вас зацікавили -- [ ] Завантажте Visual Studio Code, якщо ще цього не зробили -- [ ] Відкрийте інструменти розробника у вашому браузері (F12) і клацайте по будь-якому сайту -- [ ] Приєднайтеся до однієї спільноти програмістів (Dev.to, Reddit r/webdev або Stack Overflow) - -### ⏰ **Що можна досягти за годину** -- [ ] Пройдіть тест після уроку і обміркуйте свої відповіді -- [ ] Налаштуйте VS Code з розширенням GitHub Copilot -- [ ] Спробуйте приклад "Hello World" у 2 різних мовах програмування онлайн -- [ ] Подивіться відео "День із життя розробника" на YouTube -- [ ] Почніть своє детективне дослідження мов програмування (з виклику) - -### 📅 **Ваш тижневий виклик** -- [ ] Виконайте завдання і досліджуйте 3 нових інструменти для розробки -- [ ] Слідкуйте за 5 розробниками або акаунтами про програмування у соціальних мережах -- [ ] Спробуйте створити щось маленьке в CodePen або Replit (навіть просто "Привіт, [Ваше ім'я]!") -- [ ] Прочитайте один блог розробника про його шлях у програмуванні -- [ ] Приєднайтеся до віртуальної зустрічі або подивіться виступ про програмування -- [ ] Почніть вивчати обрану вами мову за допомогою онлайн-уроків - -### 🗓️ **Ваш місячний трансформаційний план** -- [ ] Створіть свій перший невеликий проєкт (навіть простий вебсайт рахується!) -- [ ] Внесіть свій вклад у проєкт з відкритим кодом (почніть з виправлення документації) -- [ ] Станьте наставником для когось, хто тільки починає свій шлях у програмуванні -- [ ] Створіть свій вебсайт-портфоліо розробника -- [ ] Зв'яжіться з місцевими спільнотами розробників або навчальними групами -- [ ] Почніть планувати свою наступну навчальну мету +## 🚀 Ваш Таймлайн Програмістської Подорожі + +### ⚡ **Що ви можете зробити за наступні 5 хвилин** +- [ ] Закладинки 2-3 вебсайти мов програмування, які привернули вашу увагу +- [ ] Завантажити Visual Studio Code, якщо ще не зробили цього +- [ ] Відкрити DevTools браузера (F12) і клікнути по будь-якому сайту +- [ ] Приєднатися до однієї спільноти програмістів (Dev.to, Reddit r/webdev або Stack Overflow) + +### ⏰ **Що ви можете встигнути за цю годину** +- [ ] Завершити вікторину після уроку і проаналізувати свої відповіді +- [ ] Налаштувати VS Code з розширенням GitHub Copilot +- [ ] Спробувати приклад "Hello World" у 2 різних мовах програмування онлайн +- [ ] Подивитися відео "День із життя розробника" на YouTube +- [ ] Почати «детективне» вивчення вибраної мови програмування (з виклику) + +### 📅 **Ваша тижнева пригода** +- [ ] Виконати завдання і дослідити 3 нових інструменти для розробки +- [ ] Підписатися на 5 розробників або облікових записів про програмування в соцмережах +- [ ] Спробувати створити щось маленьке в CodePen або Replit (навіть просто "Hello, [Ваше ім'я]!") +- [ ] Прочитати один блогпост розробника про чиюсь програмістську подорож +- [ ] Приєднатися до онлайн або віртуального мітапу чи переглянути програмістську доповідь +- [ ] Почати вивчати обрану мову за допомогою онлайн-уроків + +### 🗓️ **Ваша місячна трансформація** +- [ ] Створити свій перший невеликий проект (навіть проста вебсторінка — це вже рахуються!) +- [ ] Внести внесок у проєкт з відкритим кодом (почати з виправлення документації) +- [ ] Станьте наставником для когось, хто щойно починає свій шлях програміста +- [ ] Створити власний вебсайт портфоліо розробника +- [ ] Зв’язатися з локальними спільнотами розробників або навчальними групами +- [ ] Почати планувати свій наступний етап навчання ### 🎯 **Фінальна рефлексія** -**Перед тим, як рухатися далі, знайдіть момент, щоб відсвяткувати:** -- Що вас сьогодні найбільше захопило у програмуванні? +**Перш ніж рухатися далі, знайдіть час, щоб відсвяткувати:** +- Що сьогодні найбільше надихнуло вас у програмуванні? - Який інструмент або концепцію ви хочете дослідити першою? -- Як ви почуваєтеся, починаючи цей шлях у програмуванні? -- Яке одне питання ви хотіли б зараз задати розробнику? +- Як ви почуваєтеся щодо початку цієї програмістської подорожі? +- Яке одне питання ви хотіли б зараз поставити розробнику? ```mermaid journey - title Your Confidence Building Journey - section Today + title Ваша подорож розвитку впевненості + section Сьогодні Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Цього тижня Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Наступного місяця Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Пам'ятайте**: Кожен експерт колись був новачком. Кожен старший розробник колись відчував себе так само, як ви зараз – захопленим, можливо, трохи розгубленим, і точно цікавим до того, що можливо. Ви в чудовій компанії, і ця подорож буде неймовірною. Ласкаво просимо до дивовижного світу програмування! 🎉 +> 🌟 **Пам’ятайте**: Кожен експерт колись був початківцем. Кожен старший розробник колись почувався так само, як ви зараз – захоплено, можливо трохи розгублено, і безперечно зацікавлено, що можливо. Ви у чудовій компанії, і ця подорож буде неймовірною. Ласкаво просимо у дивовижний світ програмування! 🎉 --- -**Відмова від відповідальності**: -Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу. \ No newline at end of file + +**Застереження**: +Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Незважаючи на наші зусилля забезпечити точність, просимо враховувати, що машинні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатись до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що можуть виникнути через використання цього перекладу. + \ No newline at end of file diff --git a/translations/uk/AGENTS.md b/translations/uk/AGENTS.md index 46b52d645..4b8aff794 100644 --- a/translations/uk/AGENTS.md +++ b/translations/uk/AGENTS.md @@ -2,35 +2,35 @@ ## Огляд проекту -Це навчальний репозиторій для викладання основ веб-розробки початківцям. Навчальна програма — це всебічний 12-тижневий курс, розроблений спеціалістами Microsoft Cloud Advocates, який включає 24 практичних уроки з JavaScript, CSS та HTML. +Це навчальний репозиторій з курикулумом для викладання основ веб-розробки початківцям. Курикулум — це всебічний 12-тижневий курс, розроблений Microsoft Cloud Advocates, що містить 24 практичні уроки з JavaScript, CSS та HTML. ### Ключові компоненти -- **Навчальний контент**: 24 структуровані уроки, організовані у модулі на основі проектів -- **Практичні проєкти**: Терраріум, Гра на друкування, Розширення для браузера, Космічна гра, Банківський додаток, Код редактор, AI чат-асистент -- **Інтерактивні вікторини**: 48 вікторин по 3 запитання в кожній (до та після уроків) -- **Підтримка багатьох мов**: Автоматичні переклади більш ніж 50 мовами через GitHub Actions -- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI проектів) +- **Навчальний контент**: 24 структуровані уроки, організовані в модулі на основі проектів +- **Практичні проекти**: Terrarium, Typing Game, Розширення браузера, Space Game, Банківський додаток, Редактор коду та AI чат-асистент +- **Інтерактивні вікторини**: 48 вікторин по 3 питання в кожній (до та після уроку) +- **Підтримка кількох мов**: Автоматичні переклади понад 50 мов за допомогою GitHub Actions +- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI-проектів) ### Архітектура -- Навчальний репозиторій з структурою на основі уроків -- У кожній папці з уроком є README, приклади коду та рішення -- Окремі проекти в окремих каталогах (quiz-app, різні проекти уроків) -- Система перекладів із GitHub Actions (co-op-translator) -- Документація подається через Docsify та доступна у форматі PDF +- Навчальний репозиторій зі структурою на основі уроків +- У кожній папці уроку є README, приклади коду та рішення +- Автономні проекти в окремих каталогах (quiz-app, різні проекти уроків) +- Система перекладів з використанням GitHub Actions (co-op-translator) +- Документація подається через Docsify та доступна у форматі PDF ## Команди налаштування -Цей репозиторій переважно для споживання навчального контенту. Для роботи з конкретними проектами: +Цей репозиторій призначений переважно для споживання освітнього контенту. Для роботи з окремими проектами: -### Головне налаштування репозиторію +### Основне налаштування репозиторію ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - + ### Налаштування Quiz App (Vue 3 + Vite) ```bash @@ -40,34 +40,34 @@ npm run dev # Запустити сервер розробки npm run build # Зібрати для продакшена npm run lint # Запустити ESLint ``` - + ### API банківського проекту (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # Запустити сервер API +npm start # Запустити API сервер npm run lint # Запустити ESLint -npm run format # Форматувати за допомогою Prettier +npm run format # Відформатувати за допомогою Prettier ``` - -### Проекти розширень для браузера + +### Проекти розширень браузера ```bash cd 5-browser-extension/solution npm install -# Дотримуйтесь інструкцій із завантаження розширень, специфічних для браузера +# Дотримуйтесь інструкцій з завантаження розширень, специфічних для браузера ``` - -### Проекти космічної гри + +### Проекти гри у космосі ```bash cd 6-space-game/solution npm install -# Відкрийте index.html у браузері або скористайтеся Live Server +# Відкрийте index.html у браузері або використовуйте Live Server ``` - -### Проект чату (бекенд на Python) + +### Чат-проект (бекенд на Python) ```bash cd 9-chat-project/solution/backend/python @@ -75,34 +75,34 @@ pip install openai # Встановіть змінну середовища GITHUB_TOKEN python api.py ``` - + ## Робочий процес розробки ### Для контрибуторів контенту -1. **Форкніть репозиторій** до свого облікового запису GitHub -2. **Клонуйте свій форк** локально -3. **Створіть нову гілку** для ваших змін -4. Внесіть зміни до матеріалів уроків або прикладів коду -5. Перевірте зміни коду у відповідних каталогах проектів -6. Надішліть pull request згідно з правилами внеску +1. **Форкніть репозиторій** у свій обліковий запис GitHub +2. **Клонуйте ваш форк** локально +3. **Створіть нову гілку** для ваших змін +4. Вносьте зміни в контент уроків або приклади коду +5. Тестуйте зміни коду у відповідних директоріях проектів +6. Надсилайте pull request відповідно до інструкцій з внесення ### Для учнів -1. Форкніть або клонсьте репозиторій -2. Переходьте послідовно каталогами уроків -3. Читайте README файли кожного уроку -4. Виконуйте вікторини перед уроком на https://ff-quizzes.netlify.app/web/ -5. Опрацьовуйте приклади коду у папках уроків -6. Виконуйте завдання та виклики -7. Проходьте вікторини після уроків +1. Форкніть або клонують репозиторій +2. Перейдіть у каталоги уроків послідовно +3. Читайте README файли кожного уроку +4. Пройдіть початкові вікторини на https://ff-quizzes.netlify.app/web/ +5. Опрацьовуйте приклади коду в папках уроків +6. Виконуйте завдання і виклики +7. Пройдіть фінальні вікторини ### Жива розробка -- **Документація**: Запустіть `docsify serve` в корені (порт 3000) -- **Quiz App**: Запустіть `npm run dev` у каталозі quiz-app -- **Проекти**: Використовуйте розширення VS Code Live Server для HTML-проектів -- **API Проекти**: Запустіть `npm start` у відповідних каталогах API +- **Документація**: Запустіть `docsify serve` у корені (порт 3000) +- **Quiz App**: Запустіть `npm run dev` у директорії quiz-app +- **Проекти**: Використовуйте розширення VS Code Live Server для HTML-проектів +- **API-проекти**: Запускайте `npm start` у відповідних API папках ## Інструкції з тестування @@ -111,9 +111,9 @@ python api.py ```bash cd quiz-app npm run lint # Перевірте на наявність проблем зі стилем коду -npm run build # Переконайтеся, що збірка проходить успішно +npm run build # Переконайтеся, що збірка успішна ``` - + ### Тестування Bank API ```bash @@ -121,162 +121,162 @@ cd 7-bank-project/api npm run lint # Перевірте наявність проблем зі стилем коду node server.js # Переконайтеся, що сервер запускається без помилок ``` - + ### Загальний підхід до тестування -- Це навчальний репозиторій без повністю автоматичних тестів -- Ручне тестування фокусується на: - - Безпомилковому виконанні прикладів коду - - Коректній роботі посилань у документації - - Успішній збірці проектів - - Дотриманні найкращих практик у прикладах +- Це навчальний репозиторій без комплексних автоматизованих тестів +- Ручне тестування зосереджено на: + - Коректному виконанні прикладів коду без помилок + - Роботі посилань у документації + - Успішних збірках проектів + - Дотриманні найкращих практик у прикладах ### Перевірки перед відправкою -- Запустіть `npm run lint` у каталогах із package.json -- Перевірте валідність посилань markdown -- Тестуйте приклади коду в браузері або Node.js -- Переконайтесь, що переклади зберігають правильну структуру +- Запускайте `npm run lint` у директоріях з package.json +- Переконуйтесь, що посилання у markdown дійсні +- Тестуйте приклади коду у браузері або Node.js +- Перевіряйте, що переклади зберігають правильну структуру -## Правила стилю коду +## Керівництво зі стилю коду ### JavaScript -- Використовуйте сучасний синтаксис ES6+ -- Дотримуйтесь стандартних конфігурацій ESLint, наданих у проектах -- Використовуйте змістовні імена змінних і функцій для ясності -- Додавайте коментарі, що пояснюють концепції для учнів -- Форматуйте код з Prettier, де це налаштовано +- Використовуйте сучасний синтаксис ES6+ +- Дотримуйтесь стандартних конфігурацій ESLint у проектах +- Використовуйте осмислені імена змінних і функцій для кращого навчання +- Додавайте коментарі, що пояснюють концепції для учнів +- Форматуйте код з Prettier там, де це настроєно ### HTML/CSS -- Семантичні елементи HTML5 -- Принципи адаптивного дизайну -- Зрозумілі назви класів -- Коментарі, що пояснюють CSS техніки для учнів +- Семантичні елементи HTML5 +- Принципи адаптивного дизайну +- Чіткі конвенції іменування класів +- Коментарі, що пояснюють CSS-техніки для учнів ### Python -- Стиль PEP 8 -- Чіткі, навчальні приклади коду -- Підказки типів там, де це корисно для навчання +- Дотримуйтесь стилю PEP 8 +- Чіткі навчальні приклади коду +- Використовуйте типізацію, коли це корисно для навчання ### Документація Markdown -- Чітка ієрархія заголовків -- Блоки коду з вказівкою мови -- Посилання на додаткові ресурси -- Знімки екранів та зображення в папках `images/` -- Атрибути alt для зображень задля доступності +- Чітка ієрархія заголовків +- Блоки коду з вказаною мовою +- Посилання на додаткові ресурси +- Знімки екрану та зображення у папках `images/` +- Опис для зображень для доступності ### Організація файлів -- Нумерація уроків послідовна (1-getting-started-lessons, 2-js-basics тощо) -- Кожен проект має каталоги `solution/` та зазвичай `start/` або `your-work/` -- Зображення зберігаються у папках `images/` конкретного уроку -- Переклади розміщені в структурах `translations/{language-code}/` +- Уроки нумеруються послідовно (1-getting-started-lessons, 2-js-basics тощо) +- Кожен проект має папки `solution/` і часто `start/` або `your-work/` +- Зображення зберігаються в окремих папках `images/` для кожного уроку +- Переклади розташовані в структурах `translations/{language-code}/` -## Збірка та розгортання +## Збірка і розгортання ### Розгортання Quiz App (Azure Static Web Apps) -quiz-app налаштовано для розгортання на Azure Static Web Apps: +quiz-app налаштований для розгортання в Azure Static Web Apps: ```bash cd quiz-app npm run build # Створює папку dist/ -# Розгортає за допомогою workflow GitHub Actions при пуші в main +# Розгортає за допомогою робочого процесу GitHub Actions при пуші до main ``` - -Конфігурація Azure Static Web Apps: -- **Розташування додатку**: `/quiz-app` -- **Папка виводу**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +Конфігурація Azure Static Web Apps: +- **Розташування додатку**: `/quiz-app` +- **Папка виводу**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Генерація PDF документації ```bash npm install # Встановити docsify-to-pdf -npm run convert # Згенерувати PDF з docs +npm run convert # Згенерувати PDF з документів ``` - + ### Документація Docsify ```bash -npm install -g docsify-cli # Встановіть Docsify глобально -docsify serve # Запустіть на localhost:3000 +npm install -g docsify-cli # Встановити Docsify глобально +docsify serve # Запустити на localhost:3000 ``` + +### Збірки для конкретних проектів -### Збірки проектів - -Кожен каталог проекту може мати власний процес збірки: -- Проекти Vue: `npm run build` створює production-бандли -- Статичні проекти: без кроку збірки, файли подаються напряму +Кожна директорія проекту може мати свій процес збірки: +- Vue-проекти: `npm run build` створює production-бандли +- Статичні проекти: немає кроку збірки, файли подаються напряму -## Правила pull request +## Керівництво для Pull Request -### Формат заголовка +### Формат заголовку -Використовуйте зрозумілі, описові заголовки з уточненням області змін: -- `[Quiz-app] Додати нову вікторину для уроку X` -- `[Lesson-3] Виправити помилку в проєкті терраріум` -- `[Translation] Додати іспанський переклад для уроку 5` -- `[Docs] Оновити інструкції з налаштування` +Використовуйте чіткі описові заголовки, що вказують сферу змін: +- `[Quiz-app] Додати нову вікторину для уроку X` +- `[Lesson-3] Виправити опечатку в проекті terrarium` +- `[Translation] Додати іспанський переклад для уроку 5` +- `[Docs] Оновити інструкції з налаштування` -### Необхідні перевірки +### Обов’язкові перевірки -Перед подачею PR: +Перед подачею PR: -1. **Якість коду**: - - Запустіть `npm run lint` в проектах, що змінилися - - Виправте всі помилки і попередження +1. **Якість коду**: + - Запустіть `npm run lint` у відповідних каталогах + - Виправте всі помилки та попередження lint -2. **Перевірка збірки**: - - Запустіть `npm run build`, якщо потрібно - - Переконайтесь, що помилок збірки немає +2. **Перевірка збірки**: + - Якщо застосовно, запустіть `npm run build` + - Переконайтесь, що немає помилок збірки -3. **Перевірка посилань**: - - Перевірте всі markdown-посилання - - Переконайтесь у працездатності посилань на зображення +3. **Перевірка посилань**: + - Перевірте всі markdown-посилання + - Переконайтесь, що зображення відображаються правильно -4. **Перевірка контенту**: - - Вичитайте на орфографію та граматику - - Переконайтесь, що приклади коду правильні та навчальні - - Перевірте акуртність перекладів +4. **Перегляд контенту**: + - Перевірте орфографію та граматику + - Переконайтесь, що приклади коду коректні і зрозумілі + - Перевірте, що переклади зберігають оригінальний зміст ### Вимоги до внеску -- Підтвердіть згоду з Microsoft CLA (автоматична перевірка при першому PR) -- Дотримуйтесь [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Детальні правила у [CONTRIBUTING.md](./CONTRIBUTING.md) -- За потреби посилайтеся на номери issue у описі PR +- Погодитись з Microsoft CLA (автоматична перевірка при першому PR) +- Дотримуватись [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Детальні інструкції в [CONTRIBUTING.md](./CONTRIBUTING.md) +- Якщо є, вказуйте номери issues у описі PR -### Процес огляду +### Процес рев’ю -- PR переглядають підтримувачі та спільнота -- Пріоритет — навчальна ясність -- Приклади коду мають відповідати найкращим практикам -- Переклади переглядають на точність та культурну відповідність +- PR переглядають мейнтейнер та спільнота +- Пріоритет — освітня зрозумілість +- Приклади коду повинні відповідати актуальним найкращим практикам +- Переклади перевіряють на точність та відповідність культурі ## Система перекладів ### Автоматичний переклад -- Використовує GitHub Actions з workflow co-op-translator -- Автоматично перекладає більш ніж 50 мовами -- Файли-джерела у головних каталогах -- Перекладені файли в `translations/{language-code}/` +- Використовує GitHub Actions із workflow co-op-translator +- Автоматично перекладає більш ніж на 50 мов +- Джерельні файли у основних директоріях +- Перекладені файли у папках `translations/{language-code}/` ### Додавання ручних покращень перекладу -1. Знайдіть файл у `translations/{language-code}/` -2. Внесіть покращення, зберігаючи структуру -3. Переконайтесь, що приклади коду працюють -4. Перевірте локалізований контент вікторин +1. Знайдіть файл у `translations/{language-code}/` +2. Вносьте покращення, зберігаючи структуру +3. Переконайтесь, що приклади коду залишаються працездатними +4. Перевірте будь-який локалізований контент вікторин ### Метадані перекладу -Перекладені файли містять заголовок метаданих: +Перекладені файли містять заголовок із метаданими: ```markdown ``` - -## Відлагодження та усунення неполадок + +## Налагодження та усунення неполадок ### Поширені проблеми -**Quiz app не запускається**: -- Перевірте версію Node.js (рекомендується v14+) -- Видаліть `node_modules` та `package-lock.json`, знову виконайте `npm install` -- Перевірте конфлікти портів (за замовчуванням Vite використовує порт 5173) +**Quiz app не запускається**: +- Перевірте версію Node.js (рекомендується v14+) +- Видаліть `node_modules` і `package-lock.json`, виконайте `npm install` знову +- Перевірте конфлікти портів (за замовчуванням Vite використовує порт 5173) -**API сервер не стартує**: -- Переконайтесь, що версія Node.js мінімум 10 і вище -- Перевірте, чи порт не зайнятий -- Впевніться, що всі залежності встановлені через `npm install` +**API сервер не запускається**: +- Переконайтесь, що версія Node.js відповідає мінімальній (node >=10) +- Перевірте, чи порт вже не зайнятий +- Переконайтесь, що всі залежності встановлені через `npm install` -**Розширення браузера не завантажується**: -- Перевірте правильність manifest.json -- Перевірте консоль браузера на помилки -- Дотримуйтесь інструкцій встановлення розширень для конкретного браузера +**Розширення браузера не завантажується**: +- Переконайтесь, що manifest.json правильно сформатований +- Перевірте консоль браузера на помилки +- Дотримуйтесь інструкцій зі встановлення, специфічних для браузера -**Проблеми з Python чат-проектом**: -- Переконайтесь, що пакет OpenAI встановлений: `pip install openai` -- Перевірте, що змінна середовища GITHUB_TOKEN встановлена -- Перевірте права доступу GitHub Models +**Проблеми з Python чат-проектом**: +- Переконайтесь, що пакет OpenAI встановлений: `pip install openai` +- Переконайтесь, що змінна середовища GITHUB_TOKEN встановлена +- Перевірте права доступу GitHub Models -**Docsify не подає документацію**: -- Встановіть docsify-cli глобально: `npm install -g docsify-cli` -- Запускайте з кореневої директорії репозиторію -- Переконайтесь, що файл `docs/_sidebar.md` існує +**Docsify не подає документацію**: +- Встановіть docsify-cli глобально: `npm install -g docsify-cli` +- Запускайте з кореневого каталогу репозиторію +- Переконайтесь, що файл `docs/_sidebar.md` існує -### Поради щодо середовища розробки +### Поради для середовища розробки -- Використовуйте VS Code з розширенням Live Server для HTML-проектів -- Встановіть розширення ESLint та Prettier для узгодженого форматування -- Використовуйте DevTools браузера для налагодження JavaScript -- Для проектів Vue встановіть Vue DevTools у браузер +- Використовуйте VS Code з розширенням Live Server для HTML проектів +- Встановіть розширення ESLint та Prettier для консистентного форматування +- Використовуйте DevTools браузера для налагодження JavaScript +- Для Vue проектів встановіть розширення Vue DevTools для браузера ### Особливості продуктивності -- Велика кількість перекладених файлів (>50 мов) робить повні клонування великими -- Використовуйте shallow clone, якщо працюєте лише з контентом: `git clone --depth 1` -- Вилучайте переклади з пошуку при роботі з англомовним контентом -- Першочергова збірка може бути повільною (npm install, Vite build) +- Велика кількість перекладених файлів (50+ мов) робить повні клони великими +- Використовуйте shallow clone, якщо працюєте лише з контентом: `git clone --depth 1` +- Виключайте переклади з пошуку при роботі з англійською версією +- Процеси збірки можуть бути повільними при першому запуску (npm install, збірка Vite) ## Питання безпеки ### Змінні середовища -- API ключі ніколи не мають потрапляти у репозиторій -- Використовуйте файли `.env` (вже у `.gitignore`) -- Документуйте необхідні змінні середовища у README проектів +- API-ключі ніколи не повинні комітитись у репозиторій +- Використовуйте `.env` файли (вже в `.gitignore`) +- Документуйте необхідні змінні середовища в README проектів -### Python проекти +### Python-проекти -- Використовуйте віртуальні середовища: `python -m venv venv` -- Підтримуйте залежності актуальними -- GitHub токени мають мати мінімальні необхідні права +- Використовуйте віртуальні середовища: `python -m venv venv` +- Оновлюйте залежності +- Токени GitHub повинні мати мінімально необхідні дозволи -### Доступ до GitHub Models +### Доступ GitHub Models -- Для GitHub Models потрібні Personal Access Tokens (PAT) -- Токени зберігайте у змінних середовища -- Ніколи не комітьте токени або облікові дані +- Потрібні персональні токени доступу (PAT) для GitHub Models +- Токени зберігайте у змінних середовища +- Ніколи не комітьте токени або облікові дані ## Додаткові нотатки ### Цільова аудиторія -- Повні початківці у веб-розробці -- Студенти та самонавчальні -- Вчителі, що використовують програму у класах -- Контент створено для доступності та поступового розвитку навичок +- Повні початківці у веб-розробці +- Студенти та самонавчальні +- Викладачі, що використовують курикулум у класах +- Контент розроблений з урахуванням доступності та поступового нарощування навичок ### Освітня філософія -- Підхід навчання на основі проектів -- Часті перевірки знань (вікторини) -- Практичні вправи з кодування -- Приклади застосування у реальному світі -- Акцент на основах перед фреймворками +- Підхід на основі проектів +- Часті перевірки знань (вікторини) +- Практичні вправи з кодування +- Приклади з реального життя +- Акцент на основах перед фреймворками ### Підтримка репозиторію -- Активна спільнота учнів та контрибуторів -- Регулярні оновлення залежностей та контенту -- Моніторинг Issues та дискусій підтримувачами -- Автоматичне оновлення перекладів через GitHub Actions +- Активна спільнота учнів і контрибуторів +- Регулярні оновлення залежностей і контенту +- Моніторинг issues і дискусій мейнтейнерами +- Оновлення перекладів автоматизовані через GitHub Actions ### Пов’язані ресурси -- [Модулі Microsoft Learn](https://docs.microsoft.com/learn/) -- [Ресурси Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендовано для учнів -- Додаткові курси: генеративний AI, Data Science, ML, IoT +- [Модулі Microsoft Learn](https://docs.microsoft.com/learn/) +- [Ресурси Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендований для учнів +- Додаткові курси: Generative AI, Data Science, ML, IoT curricula доступні -### Робота з конкретними проектами +### Робота з окремими проектами -Для докладних інструкцій дивіться README у: -- `quiz-app/README.md` - Vue 3 додаток для вікторин -- `7-bank-project/README.md` - Банківський додаток з автентифікацією -- `5-browser-extension/README.md` - Розробка розширень для браузера -- `6-space-game/README.md` - Розробка гри на Canvas -- `9-chat-project/README.md` - Проект AI чат-асистента +Для детальних інструкцій звертайтеся до README файлів у: +- `quiz-app/README.md` - Vue 3 додаток вікторин +- `7-bank-project/README.md` - Банківський додаток з автентифікацією +- `5-browser-extension/README.md` - Розробка розширень браузера +- `6-space-game/README.md` - Розробка гри на Canvas +- `9-chat-project/README.md` - Проект AI чат-асистента ### Структура монорепозиторію -Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів: -- Кожен урок автономний -- Проекти не ділять залежностей -- Працюйте з окремими проектами без впливу на інші -- Клонуйте весь репозиторій для повного досвіду навчання +Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів: +- Кожен урок автономний +- Проекти не розділяють залежності +- Працюйте з окремими проектами без впливу на інші +- Клонуйте весь репозиторій для повного досвіду курсу --- -**Відмова від відповідальності**: -Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильне тлумачення, що виникли внаслідок використання цього перекладу. +**Відмова від відповідальності**: +Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу. \ No newline at end of file diff --git a/translations/uk/README.md b/translations/uk/README.md index b7a76e384..7d03a8c1b 100644 --- a/translations/uk/README.md +++ b/translations/uk/README.md @@ -10,71 +10,81 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Веб-розробка для початківців - навчальна программа +# Веб-розробка для початківців - навчальна програма -Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен з 24 уроків глибоко занурюється у JavaScript, CSS та HTML через практичні проекти, такі як тераріуми, розширення браузерів та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою нашої ефективної проєктно-орієнтованої педагогіки. Почніть свою подорож програмування вже сьогодні! +Вивчайте основи веб-розробки за нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків глибоко занурюється у JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою нашої ефективної педагогіки на основі проєктів. Розпочніть свою програмістську подорож сьогодні! -Приєднуйтеся до спільноти Azure AI Foundry у Discord +Приєднуйтесь до спільноти Azure AI Foundry у Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Виконайте ці кроки, щоб почати використовувати ці ресурси: -1. **Зробіть форк репозиторію**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Клонувати репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Приєднуйтесь до Azure AI Foundry Discord, щоб зустріти експертів і колег-розробників**](https://discord.com/invite/ByRwuEEgH4) +1. **Створіть форк репозиторію**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Приєднуйтесь до Azure AI Foundry Discord та зустрічайтеся з експертами і іншими розробниками**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Підтримка кількох мов +### 🌐 Підтримка багатьох мов -#### Підтримується через GitHub Action (автоматично і завжди актуально) +#### Підтримується через GitHub Action (автоматично та завжди актуально) -[Арабська](../ar/README.md) | [Бенгальська](../bn/README.md) | [Болгарська](../bg/README.md) | [Бирманська (М’янма)](../my/README.md) | [Китайська (спрощена)](../zh-CN/README.md) | [Китайська (традиційна, Гонконг)](../zh-HK/README.md) | [Китайська (традиційна, Макао)](../zh-MO/README.md) | [Китайська (традиційна, Тайвань)](../zh-TW/README.md) | [Хорватська](../hr/README.md) | [Чеська](../cs/README.md) | [Данська](../da/README.md) | [Голландська](../nl/README.md) | [Естонська](../et/README.md) | [Фінська](../fi/README.md) | [Французька](../fr/README.md) | [Німецька](../de/README.md) | [Грецька](../el/README.md) | [Іврит](../he/README.md) | [Хінді](../hi/README.md) | [Угорська](../hu/README.md) | [Індонезійська](../id/README.md) | [Італійська](../it/README.md) | [Японська](../ja/README.md) | [Каннада](../kn/README.md) | [Корейська](../ko/README.md) | [Литовська](../lt/README.md) | [Малайська](../ms/README.md) | [Малаялам](../ml/README.md) | [Маратхі](../mr/README.md) | [Непальська](../ne/README.md) | [Нігерійський Піджин](../pcm/README.md) | [Норвезька](../no/README.md) | [Перська (фарсі)](../fa/README.md) | [Польська](../pl/README.md) | [Португальська (Бразилія)](../pt-BR/README.md) | [Португальська (Португалія)](../pt-PT/README.md) | [Пенджабі (гурмухі)](../pa/README.md) | [Румунська](../ro/README.md) | [Російська](../ru/README.md) | [Сербська (кирилиця)](../sr/README.md) | [Словацька](../sk/README.md) | [Словенська](../sl/README.md) | [Іспанська](../es/README.md) | [Свахілі](../sw/README.md) | [Шведська](../sv/README.md) | [Тагальська (філіппінська)](../tl/README.md) | [Тамільська](../ta/README.md) | [Телугу](../te/README.md) | [Тайська](../th/README.md) | [Турецька](../tr/README.md) | [Українська](./README.md) | [Урду](../ur/README.md) | [В’єтнамська](../vi/README.md) +[Арабська](../ar/README.md) | [Бенгальська](../bn/README.md) | [Болгарська](../bg/README.md) | [Бірманська (М’янма)](../my/README.md) | [Китайська (спрощена)](../zh-CN/README.md) | [Китайська (традиційна, Гонконг)](../zh-HK/README.md) | [Китайська (традиційна, Макао)](../zh-MO/README.md) | [Китайська (традиційна, Тайвань)](../zh-TW/README.md) | [Хорватська](../hr/README.md) | [Чеська](../cs/README.md) | [Данська](../da/README.md) | [Голландська](../nl/README.md) | [Естонська](../et/README.md) | [Фінська](../fi/README.md) | [Французька](../fr/README.md) | [Німецька](../de/README.md) | [Грецька](../el/README.md) | [Іврит](../he/README.md) | [Гінді](../hi/README.md) | [Угорська](../hu/README.md) | [Індонезійська](../id/README.md) | [Італійська](../it/README.md) | [Японська](../ja/README.md) | [Каннада](../kn/README.md) | [Корейська](../ko/README.md) | [Литовська](../lt/README.md) | [Малайська](../ms/README.md) | [Малаялам](../ml/README.md) | [Маратхі](../mr/README.md) | [Непальська](../ne/README.md) | [Нігерійський піжин](../pcm/README.md) | [Норвезька](../no/README.md) | [Перська (фарсі)](../fa/README.md) | [Польська](../pl/README.md) | [Португальська (Бразилія)](../pt-BR/README.md) | [Португальська (Португалія)](../pt-PT/README.md) | [Панджабі (гурмухі)](../pa/README.md) | [Румунська](../ro/README.md) | [Російська](../ru/README.md) | [Сербська (кирилиця)](../sr/README.md) | [Словацька](../sk/README.md) | [Словенська](../sl/README.md) | [Іспанська](../es/README.md) | [Свахілі](../sw/README.md) | [Шведська](../sv/README.md) | [Тагальська (філіппінська)](../tl/README.md) | [Тамільська](../ta/README.md) | [Телугу](../te/README.md) | [Тайська](../th/README.md) | [Турецька](../tr/README.md) | [Українська](./README.md) | [Урду](../ur/README.md) | [В’єтнамська](../vi/README.md) -> **Бажаєте клонувати локально?** - -> У цьому репозиторії є понад 50 мовних перекладів, що суттєво збільшує розмір завантаження. Щоб клонувати без перекладів, використовуйте sparse checkout: +> **Віддаєте перевагу локальному клонуванню?** +> +> Цей репозиторій включає понад 50 мовних перекладів, що значно збільшує розмір завантаження. Щоб клонувати без перекладів, використайте sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > 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):** +> ```cmd +> 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" +> ``` +> +> Це дасть вам все необхідне для проходження курсу з набагато швидшим завантаженням. -**Якщо ви хочете, щоб додаткові мови перекладу були підтримані, список доступних мов наведений [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Якщо ви хочете підтримки додаткових мов перекладу, вони перелічені [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Відкрити у Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Ви студент?_ -Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете матеріали для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки і перевіряти час від часу, адже ми щомісяця оновлюємо контент. +Відвідайте [**сторінку студентського хабу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати до закладок і періодично перевіряти, оскільки контент оновлюється щомісяця. -### 📣 Оголошення - Нові виклики в режимі GitHub Copilot Agent для виконання! +### 📣 Оголошення - Нові виклики режиму GitHub Copilot Agent для виконання! -Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання, яке ви можете виконати за допомогою GitHub Copilot та режиму Agent. Якщо ви раніше не користувались режимом Agent, він здатний не лише генерувати текст, а й створювати та редагувати файли, запускати команди та інше. +Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" в більшості розділів. Це новий виклик, який вам потрібно виконати, використовуючи GitHub Copilot та режим Agent. Якщо ви раніше не використовували режим Agent, він може не лише генерувати текст, а й створювати та редагувати файли, запускати команди і більше. -### 📣 Оголошення - _Новий проєкт з використанням генеративного ШІ_ +### 📣 Оголошення - _Новий проєкт для створення з використанням генеративного ШІ_ -Додано новий проєкт AI Assistant, ознайомтесь із ним [тут](./9-chat-project/README.md) +Щойно додано новий проєкт AI Assistant, ознайомтеся з ним [проект](./9-chat-project/README.md) -### 📣 Оголошення - _Нова навчальна программа_ по генеративному ШІ для JavaScript щойно випущена +### 📣 Оголошення - _Нова навчальна програма_ з генеративного ШІ для JavaScript щойно випущена -Не пропустіть нашу нову навчальну программу з генеративного ШІ! +Не пропустіть нашу нову навчальну програму з генеративного ШІ! Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати! ![Background](../../translated_images/uk/background.148a8d43afde5730.webp) -- Уроки охоплюють все від основ до RAG. -- Спілкуйтесь з історичними персонажами за допомогою GenAI та нашого супутникового додатку. -- Весела та захоплююча нарація, ви будете подорожувати у часі! +- Уроки, що охоплюють усе від основ до RAG. +- Взаємодійте з історичними персонажами за допомогою GenAI і нашого компаньйон-додатку. +- Цікаве і захоплююче оповідання, ви будете подорожувати у часі! ![character](../../translated_images/uk/character.5c0dd8e067ffd693.webp) -Кожен урок включає завдання для виконання, перевірку знань та виклик, щоб допомогти вам навчитися темам, таким як: -- Формування запитів і інженерія підказок -- Генерація текстових і графічних додатків +Кожен урок включає завдання, перевірку знань і виклик, щоб допомогти вам освоїти теми такі як: +- Формулювання запитів і інженерія запитів +- Генерація текстових та іміжевих додатків - Пошукові додатки Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати! @@ -83,175 +93,173 @@ ## 🌱 Початок роботи -> **Вчителі**, ми включили [деякі поради](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді отримати ваші відгуки [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Вчителі**, ми включили [деякі пропозиції](for-teachers.md) про те, як використовувати цю навчальну програму. Нам буде цікаво почути ваш відгук [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з пре-лекційної вікторини, потім переходьте до читання лекційного матеріалу, виконання різноманітних завдань і перевіряйте розуміння за допомогою пост-лекційної вікторини. +**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з попередньої вікторини, далі читайте навчальний матеріал, виконуйте різні завдання та перевіряйте свої знання за допомогою підсумкової вікторини. -Щоб покращити навчальний досвід, об’єднуйтесь з однокурсниками для роботи над проектами разом! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де команда модераторів буде готова відповісти на ваші питання. +Щоб покращити свій навчальний досвід, спілкуйтеся з однокурсниками для спільного виконання проєктів! Заохочуються обговорення на нашому [форумі](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де команда модераторів завжди готова відповісти на ваші запитання. -Для подальшого навчання ми дуже рекомендуємо дослідити [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів. +Для подальшого навчання ми настійно рекомендуємо переглянути [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів. ### 📋 Налаштування вашого середовища -Ця навчальна програма має готове середовище розробки! На початку ви можете обрати запуск програми у [Codespace](https://github.com/features/codespaces/) (_середовище в браузері без необхідності встановлень_), або локально на вашому комп’ютері, використовуючи текстовий редактор, наприклад [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Ця навчальна програма має готове до роботи середовище розробки! Під час початку ви можете запускати курс у [Codespace](https://github.com/features/codespaces/) (_середовище у браузері, без необхідності встановлювати щось локально_), або локально на вашому комп’ютері за допомогою текстового редактора, наприклад [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Створіть свій репозиторій -Щоб вам було зручно зберігати свою роботу, рекомендуємо створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub із копією навчальної програми. +#### Створіть ваш репозиторій +Щоб вам було зручно зберігати вашу роботу, рекомендується створити власну копію цього репозиторію. Для цього натисніть кнопку **Use this template** вгорі сторінки. Це створить новий репозиторій у вашому акаунті GitHub з копією навчальної програми. -Виконайте ці кроки: -1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки. -2. **Клонування репозиторію**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Слідуйте цим крокам: +1. **Зробіть форк репозиторію**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки. +2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Запуск навчальної програми у Codespace +#### Запуск курсу у Codespace -У створеній вами копії цього репозиторію натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи. +У вашій копії створеного репозиторію натисніть кнопку **Code** та виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи. ![Codespace](../../translated_images/uk/createcodespace.0238bbf4d7a8d955.webp) -#### Запуск навчальної програми локально на вашому комп’ютері - -Щоб запустити цю навчальну програму локально на комп’ютері, вам потрібен текстовий редактор, браузер і консоль командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), допоможе вам обрати найкращі варіанти для кожного з цих інструментів. +#### Запуск курсу локально на вашому комп’ютері -Рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Завантажити Visual Studio Code можна [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Щоб запустити цей курс локально на вашому комп’ютері, вам потрібен текстовий редактор, браузер та засіб командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), допоможе вам вибрати найзручніші для вас інструменти. - -1. Клонуйте свій репозиторій на свій комп’ютер. Для цього натисніть кнопку **Code** і скопіюйте URL: +Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL: [CodeSpace](./images/createcodespace.png) - Тоді відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і запустіть наступну команду, замінивши `` на URL, який ви щойно скопіювали: + + Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `` на URL, який ви щойно скопіювали: ```bash git clone ``` -2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** та обравши щойно клоновану папку. +2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** і вибравши папку, яку щойно клонували. > Рекомендовані розширення Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - для швидшого написання коду +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - щоб допомогти вам швидше писати код -## 📂 Кожен урок включає: +## 📂 Кожен урок містить: -- необов’язкову нотатку +- необов’язкову скетчноут - необов’язкове додаткове відео -- розминковий вікторину перед уроком -- текстовий урок -- для уроків на основі проектів – покрокові інструкції зі створення проекту +- розминковий тест перед уроком +- письмовий урок +- для уроків із проектами покрокові інструкції зі створення проекту - перевірки знань - виклик - додаткове читання - завдання -- [вікторину після уроку](https://ff-quizzes.netlify.app/web/) +- [тест після уроку](https://ff-quizzes.netlify.app/web/) -> **Примітка про вікторини**: Всі вікторини знаходяться в папці Quiz-app, всього 48 вікторин по три питання в кожній. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток для вікторин можна запускати локально або розгортати в Azure; дотримуйтесь інструкцій в папці `quiz-app`. +> **Примітка про тести**: Усі тести знаходяться у папці Quiz-app, всього 48 тестів по три питання кожен. Вони доступні [тут](https://ff-quizzes.netlify.app/web/). Додаток для тестів можна запустити локально або розгорнути в Azure; дотримуйтесь інструкцій у папці `quiz-app`. ## 🗃️ Уроки -| | Назва проекту | Вивчені концепції | Навчальні цілі | Пов’язаний урок | Автор | -| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Початок роботи | Вступ до програмування та інструменти фахівця | Вивчити основи більшості мов програмування і програмне забезпечення, яке допомагає професійним розробникам у їх роботі | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проекті, як співпрацювати з іншими над кодом | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Основи JS | Типи даних JavaScript | Основи типів даних JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Основи JS | Функції та методи | Вивчити функції та методи для керування логікою додатка | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | Основи JS | Прийняття рішень на JS | Вивчити, як створювати умови у коді за допомогою методів прийняття рішень | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Основи JS | Масиви та цикли | Працювати з даними, використовуючи масиви та цикли у JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | Практика HTML | Створити HTML для онлайн-терраріуму з акцентом на розмітку | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | Практика CSS | Створити CSS для стилізації онлайн-терраріуму, з акцентом на основи CSS, включаючи адаптивність сторінки | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Замикання JavaScript, маніпулювання DOM | Написати JavaScript, щоб зробити терраріум інтерфейсом перетягування, зосередившись на замиканнях і маніпулюванні DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Створення гри на друку | Вивчити використання подій клавіатури для управління логікою JavaScript-додатку | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Робота з браузерами | Вивчити як працюють браузери, їх історію, а також як створити перші елементи розширення браузера | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, що зберігаються в локальному сховищі | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, веб-продуктивність | Використати фонові процеси браузера для керування іконкою розширення; дізнатися про продуктивність вебу та деякі оптимізації | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Більш складна розробка ігор на JavaScript | Вивчити наслідування за допомогою Класів і Композиції та патерн Pub/Sub, готуючись до створення гри | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Малювання на canvas | Вивчити Canvas API, який використовується для малювання елементів на екрані | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнатися, як елементи можуть рухатися, використовуючи декартові координати та Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Виявлення колізій | Зробити так, щоб елементи стикалися і реагували один на одного за допомогою натискань клавіш, а також додати функцію затримки | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати математичні розрахунки на основі статусу та продуктивності гри | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Вивчити процес завершення і перезапуску гри, включаючи очищення ресурсів та скидання значень змінних | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони та маршрути у веб-додатку | Вивчити, як створювати основу архітектури багатосторінкового сайту за допомогою маршрутизації та шаблонів HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Вивчити створення форм та обробку валідації | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять до вашого додатку та виводяться з нього, як їх отримувати, зберігати та звільняти | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепції управління станом | Вивчити, як ваш додаток зберігає стан і як керувати ним програмно | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Робота з VScode | Навчитися використовувати редактор коду| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Робота з AI | Навчитися створювати власного AI асистента | [AI Assistant project](./9-chat-project/README.md) | Chris | +| | Назва проекту | Вивчені концепції | Навчальні цілі | Пов’язаний урок | Автор | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Початок роботи | Вступ до програмування та інструменти професії | Ознайомитися з основами більшості мов програмування та програмним забезпеченням, яке допомагає професійним розробникам | [Вступ до мов програмування та інструментів професії](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проекті, як співпрацювати з іншими над кодом | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Початок роботи | Доступність | Вивчити основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Основи JS | Типи даних JavaScript | Основи типів даних у JavaScript | [Типи даних](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Основи JS | Функції та методи | Дізнатися про функції та методи для керування логікою додатка | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | Основи JS | Прийняття рішень з JS | Вивчити, як створювати умови у вашому коді, використовуючи методи прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів і циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Тераріум](./3-terrarium/solution/README.md) | Практика HTML | Створити HTML для онлайн-тераріуму, зосередившись на створенні макета | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Тераріум](./3-terrarium/solution/README.md) | Практика CSS | Створити CSS для стилізації онлайн-тераріуму, зосередившись на основах CSS, зокрема - адаптивність сторінки | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання JavaScript, маніпуляції з DOM | Написати JavaScript, щоб створити функціонал тераріуму як drag/drop інтерфейсу, зосередившись на замиканнях та маніпуляціях DOM | [Замикання JavaScript, маніпуляції з DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Вивчити, як використовувати події клавіатури для керування логікою JavaScript-застосунку | [Програмування на подіях](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Розширення браузера Green](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнатися, як працюють браузери, їх історію та як створити перші елементи розширення браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Розширення браузера Green](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API, використовуючи змінні, збережені в локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Розширення браузера Green](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, продуктивність веба | Використовувати фонові процеси браузера для керування іконкою розширення; дізнатися про продуктивність веба та оптимізації | [Фонові задачі та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Гра у космосі](./6-space-game/solution/README.md) | Розвиток складніших ігор з JavaScript | Вивчити спадкування за допомогою класів і композиції та шаблон Pub/Sub для створення гри | [Вступ до складної розробки ігор](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Гра у космосі](./6-space-game/solution/README.md) | Малювання на холсті | Вивчити Canvas API для малювання елементів на екрані | [Малювання на холсті](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Гра у космосі](./6-space-game/solution/README.md) | Переміщення елементів на екрані | Дослідити, як елементи можуть рухатися, використовуючи декартові координати та Canvas API | [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Гра у космосі](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробити так, щоб елементи стикалися та реагували один на одного за допомогою натискань клавіш і функції охолодження для продуктивності | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Гра у космосі](./6-space-game/solution/README.md) | Ведення рахунку | Виконувати розрахунки на основі стану та продуктивності гри | [Ведення рахунку](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Гра у космосі](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Дізнатися про завершення та перезапуск гри, очищення ресурсів і скидання змінних | [Умови завершення](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути у веб-додатку | Навчитися створювати каркас мультисторінкового вебсайту за допомогою маршрутизації та HTML-шаблонів | [HTML-шаблони і маршрути](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Дізнатися про створення форм та обробку валідації | [Форми](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані потрапляють у додаток, як їх отримувати, зберігати та звільняти | [Дані](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепції управління станом | Навчитися зберігати стан додатку та керувати ним програмно | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Код браузера/VScode](../../8-code-editor) | Робота з VScode | Навчитися користуватись редактором коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з AI | Навчитися створювати власного AI асистента | [Проєкт AI Асистента](./9-chat-project/README.md) | Chris | ## 🏫 Педагогіка -Наша навчальна програма розроблена з урахуванням двох ключових педагогічних принципів: -* навчання на основі проектів -* часті вікторини +Наша навчальна програма розроблена на основі двох ключових педагогічних принципів: +* навчання на основі проєктів +* часті тести -Програма викладає основи JavaScript, HTML та CSS, а також останні інструменти і техніки, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друк, віртуальний терраріум, екологічно чисте розширення браузера, гру у стилі космічного загарбника та банківський додаток для бізнесу. До кінця циклу студенти матимуть ґрунтовне розуміння веб-розробки. +Програма викладає основи JavaScript, HTML та CSS, а також найновіші інструменти та методики, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друкування, віртуальний тераріум, екологічно чисте розширення браузера, гру на зразок Space Invaders і банківський додаток для бізнесу. Наприкінці серії студенти здобудуть міцне розуміння веб-розробки. -> 🎓 Перші кілька уроків цієї програми ви можете пройти як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn! +> 🎓 Ви можете пройти перші кілька уроків цієї навчальної програми як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn! -Забезпечивши відповідність контенту проектам, процес навчання стає більш захопливим для студентів і покращує засвоєння концепцій. Ми також написали кілька вступних уроків з основ JavaScript для ознайомлення з концепціями, доповнених відео з колекції "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори яких брали участь у створенні цієї навчальної програми. +Забезпечуючи, щоб контент узгоджувався з проєктами, ми робимо процес більш захоплюючим для студентів та покращуємо засвоєння концепцій. Ми також підготували кілька вступних уроків основ JavaScript із відео з колекції "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", автори якої деякі брали участь у створенні цієї навчальної програми. -Додатково, невелика вікторина перед уроком налаштовує студента на вивчення теми, а друга — після заняття — допомагає закріпити матеріал. Ця навчальна програма була розроблена так, щоб бути гнучкою та цікавою, її можна проходити цілком або частково. Проекти починаються з простого і стають дедалі складнішими до кінця 12-тижневого циклу. +Крім того, низькопоріг тест перед заняттям задає студенту намір вивчення теми, а другий тест після заняття гарантує подальше закріплення знань. Ця навчальна програма розроблена бути гнучкою і цікавою, її можна проходити повністю або частково. Проєкти починаються із простих і стають все складнішими до кінця 12-тижневого циклу. -Хоч ми й свідомо уникаємо введення JavaScript-фреймворків, щоб зосередитися на базових навичках веб-розробника перед освоєнням фреймворків, добрим наступним кроком після проходження цієї програми буде вивчення Node.js через колекцію відеоуроків: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Хоч ми і цілеспрямовано уникали використання JavaScript-фреймворків, щоб сконцентруватися на базових навичках веб-розробника перед використанням фреймворку, наступним кроком після завершення цієї програми може бути вивчення Node.js через іншу колекцію відео: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Відвідайте наші [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Правила внеску](CONTRIBUTING.md). Ми радо приймаємо ваші конструктивні відгуки! +> Відвідайте наші рекомендації [Кодекс поведінки](CODE_OF_CONDUCT.md) та [Участь](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки! -## 🧭 Оффлайн-доступ +## 🧭 Офлайн-доступ -Ви можете запускати цю документацію оффлайн за допомогою [Docsify](https://docsify.js.org/#/). Форкніть це репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на вашому комп’ютері, і в кореневій папці репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`. +Ви можете користуватися цією документацією офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на свій локальний комп’ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 вашого локального хоста: `localhost:3000`. ## 📘 PDF - -PDF з усіма уроками можна знайти [тут](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). - +PDF-файл з усіма уроками можна знайти [тут](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Інші курси -Наша команда створює й інші курси! Ознайомтеся з ними: + +Наша команда створює інші курси! Перегляньте: ### LangChain -[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j для початківців](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js для початківців](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain для початківців](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agents -[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +### Azure / Edge / MCP / Агенти +[![AZD для початківців](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI для початківців](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP для початківців](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Агенти для початківців](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- -### Серія Генеративного ШІ -[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +### Серія Generative AI +[![Generative AI для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- -### Основне навчання -[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +### Основні курси +[![ML для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Кібербезпека для початківців](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev для початківців](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT для початківців](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Серія Copilot -[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot для AI парного програмування](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot для C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Пригоди Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## Отримання допомоги -Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до інших учнів і досвідчених розробників у обговореннях про MCP. Це дружнє співтовариство, де вітаються запитання і знання вільно діляться. +Якщо ви застрягли або маєте запитання щодо створення AI-додатків, приєднуйтесь до інших учнів та досвідчених розробників у обговореннях про MCP. Це підтримуюча спільнота, де питання вітаються, а знання вільно діляться. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) @@ -261,11 +269,11 @@ PDF з усіма уроками можна знайти [тут](https://micros ## Ліцензія -Цей репозиторій ліцензовано за MIT ліцензією. Детальніше дивіться у файлі [LICENSE](../../LICENSE). +Цей репозиторій ліцензовано за ліцензією MIT. Для детальнішої інформації дивіться файл [LICENSE](../../LICENSE). --- **Відмова від відповідальності**: -Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, просимо враховувати, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ його рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу. +Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний переклад людиною. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу. \ No newline at end of file