diff --git a/translations/cs/.co-op-translator.json b/translations/cs/.co-op-translator.json index 7cf1f1959..8036606ae 100644 --- a/translations/cs/.co-op-translator.json +++ b/translations/cs/.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-07T04:12:06+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T16:02:36+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "cs" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:18:33+00:00", + "translation_date": "2026-03-06T16:06:41+00:00", "source_file": "AGENTS.md", "language_code": "cs" }, @@ -516,8 +516,8 @@ "language_code": "cs" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:11:29+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T15:57:56+00:00", "source_file": "README.md", "language_code": "cs" }, diff --git a/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/README.md index ef6610bae..ff6c763f5 100644 --- a/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/cs/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,98 +1,98 @@ -# Úvod do programovacích jazyků a moderních vývojářských nástrojů - -Ahoj, budoucí vývojáři! 👋 Můžu vám něco říct, co mi dělá husí kůži každý den? Chystáte se objevovat, že programování není jen o počítačích – je to skutečná superschopnost přivést vaše nejdivočejší nápady k životu! +# Úvod do programovacích jazyků a moderních nástrojů pro vývojáře -Znám ten moment, kdy používáte svoji oblíbenou aplikaci a všechno do sebe perfektně zapadne? Když kliknete na tlačítko a stane se něco naprosto magického, co vás přiměje říct „wow, jak to DĚLALI?“ No, někdo přesně jako vy – pravděpodobně sedící ve své oblíbené kavárně ve 2 ráno s třetím espressem – napsal kód, který tu magii vytvořil. A teď vás čeká něco, co vám úplně vyrazí dech: na konci této lekce nejen pochopíte, jak to udělali, ale budete přímo chtít to vyzkoušet sami! +Ahoj, budoucí vývojáři! 👋 Můžu ti říct něco, co mi pokaždé cestou mrazí v zádech? Právě se chystáš objevit, že programování není jen o počítačích – je to o tom mít skutečné superschopnosti přivést k životu své nejdivočejší nápady! -Podívejte, chápu, že programování může být zatím zastrašující. Když jsem začínal já, upřímně jsem si myslel, že musíte být nějací matematičtí géniové nebo kódovat už od pěti let. Ale co mi úplně změnilo pohled: programování je přesně jako naučit se konverzovat v novém jazyce. Začnete „ahoj“ a „děkuji“, pak si objednáváte kávu a než se nadějete, vedete hluboké filozofické debaty! Akorát v tomto případě konverzujete s počítači a upřímně? Jsou to ti nejtrpělivější konverzační partneři na světě – nikdy vás nekritizují za chyby a vždycky jsou nadšení to zkusit znovu! +Znáš ten moment, kdy používáš svoji oblíbenou aplikaci a vše na sebe perfektně navazuje? Když ťukneš na tlačítko a stane se něco naprosto kouzelného, co tě nechá říct „wow, jak to udělali?“ No, někdo přesně jako ty – pravděpodobně sedí ve své oblíbené kavárně ve 2 ráno u třetího espressa – napsal kód, který to kouzlo stvořil. A teď přijde to, co ti rozum vyrazí: na konci této lekce nejen pochopíš, jak to udělali, ale už nebudeš moct dočkat, až to zkusíš sám! -Dnes si prozkoumáme úžasné nástroje, které činí moderní webový vývoj nejen možným, ale doopravdy návykovým. Mluvím o stejných editorech, prohlížečích a pracovních postupech, které používají vývojáři ve Netflixu, Spotify a ve vašem oblíbeném indie studiu každý den. A tady je část, která vás nadchne: většina těchto profesionálních, průmyslových standardů je úplně zdarma! +Vidíš, chápu, že programování může teď působit zastrašujícím dojmem. Když jsem začínal, opravdu jsem si myslel, že musíš být nějaký matematik nebo programovat už od pěti let. Ale tohle mi úplně změnilo pohled: programování je přesně jako učení se mluvit v novém jazyce. Začínáš „ahoj“ a „děkuju“, pak se učíš objednat kávu a než se naděješ, vedeš hluboké filozofické diskuse! Jenže v tomto případě vedeš rozhovory s počítači, a upřímně? Jsou to nejtrpělivější konverzační partneři, jaké budeš mít – nikdy netrestají tvoje chyby a vždy se těší, že to zkusíš znovu! + +Dnes prozkoumáme úžasné nástroje, díky kterým není moderní webový vývoj jen možný, ale taky skutečně návykový. Mluvím o přesně těch editorech, prohlížečích a pracovních postupech, které denně používají vývojáři v Netflixu, Spotify a tvém oblíbeném nezávislém app studiu. A tady je část, která tě rozesměje radostí: většina těchto profesionálních, průmyslově standardních nástrojů je úplně zdarma! ![Intro Programming](../../../../translated_images/cs/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Vaše dnešní cesta programováním + title Vaše programátorská cesta dnes section Objevování Co je programování: 5: You Programovací jazyky: 4: You Přehled nástrojů: 5: You - section Prozkoumávání + section Prozkoumat Editory kódu: 4: You - Prohlížeče a DevTools: 5: You + Prohlížeče a vývojářské nástroje: 5: You Příkazový řádek: 3: You section Procvičování - Detektiv jazyků: 4: You - Průzkum nástrojů: 5: You + Jazykový detektiv: 4: You + Prozkoumání nástrojů: 5: You Spojení s komunitou: 5: You ``` -## Podíváme se, co už umíte! +## Podívejme se, co už víš! -Než se pustíme do zábavy, jsem zvědavý – co už o světě programování víte? A pokud při pohledu na tyto otázky myslíte „nemám o tom absolutně žádné ponětí,“ vůbec nevadí, je to perfektní! To znamená, že jste na přesně správném místě. Považujte tento kvíz za rozcvičku před tréninkem – jen prostě rozehříváme mozkové svaly! +Než se pustíme do zábavy, zajímá mě – co už o programování víš? A poslouchej, pokud na tyto otázky koukáš a myslíš si „nemám o tom vůbec žádnou představu,“ to není jen v pořádku, to je perfektní! To znamená, že jsi přesně tam, kde máš být. Považuj tento kvíz za rozcvičku před cvičením – jen zahříváme mozkové svaly! -[Vyplňte předběžný kvíz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Vyplň si kvíz před lekcí](https://ff-quizzes.netlify.app/web/) -## Dobrodružství, na které se společně vydáme +## Dobrodružství, na které se spolu vydáme -Dobře, upřímně jsem celý nadšený z toho, co dnes budeme objevovat! Fakt, rád bych viděl vaši tvář, až vám některé z těchto konceptů začnou dávat smysl. Tady je neuvěřitelná cesta, na kterou se společně vydáme: +Dobře, skutečně se nemohu dočkat, co dnes prozkoumáme! Opravdu, přál bych si vidět tvůj výraz, až ti některé z těch konceptů dojdou. Tady je ta úžasná cesta, na kterou se spolu vydáme: -- **Co programování vlastně je (a proč je to ta nejúžasnější věc!)** – Objevíme, jak kód je doslova neviditelná magie, která pohání vše kolem vás, od budíku, který nějak ví, že je pondělí ráno, až po algoritmus, který perfektně vybírá vaše doporučení na Netflixu -- **Programovací jazyky a jejich úžasné osobnosti** – Představte si párty, kde každý má úplně jiné superschopnosti a způsoby řešení problémů. Takový je svět programovacích jazyků – a vy se s nimi budete rádi seznamovat! -- **Základní stavební kameny, které vytvářejí digitální magii** – Představte si to jako ultimátní kreativní LEGO sadu. Jakmile pochopíte, jak tyto kousky do sebe zapadají, uvědomíte si, že můžete skutečně postavit cokoli, co vám přijde na mysl -- **Profesionální nástroje, díky kterým se budete cítit, jako byste právě dostali kouzelnickou hůlku** – Nezveličuji – tyto nástroje vám skutečně dají pocit superhrdiny a ta nejlepší část? Jsou to ty stejné, které používají profíci! +- **Co vlastně programování je (a proč je to ta nejvíc cool věc vůbec!)** – Objistíme si, jak je kód doslova neviditelné kouzlo pohánějící všechno kolem tebe, od budíku, který nějak ví, že je pondělí ráno, až po algoritmus, který perfektně vyladí tvoje Netflix doporučení +- **Programovací jazyky a jejich úžasné osobnosti** – Představ si, že přijdeš na párty, kde každý má úplně jiné superschopnosti a způsoby řešení problémů. Takový je svět programovacích jazyků a ty si je zamiluješ! +- **Základní stavební kameny, které dělají digitální magii** – Považuj je za ultimátní kreativní LEGO sadu. Jakmile pochopíš, jak tyto části zapadají, uvědomíš si, že můžeš doslova postavit cokoli, co si vymyslíš +- **Profesionální nástroje, které tě nechají cítit, jako bys dostal kouzelnickou hůlku** – Ne, to není přehánění – tyto nástroje tě opravdu donutí cítit se jako mág, a ta nejlepší část? Jsou to ty samé, které používají profíci! -> 💡 **Tady je věc**: ani nepřemýšlejte o tom, že byste si to dnes všechno měli zapamatovat! Teď chci, abyste pocítili ten jiskřivý zájem o to, co je možné. Detaily vám zůstávají přirozeně, když budeme spolu cvičit – takto se skutečně učíte! +> 💡 **Něco k zapamatování:** Nemysli si, že dnes musíš všechno naučit nazpaměť! Teď chci, aby sis jen zapálil tu jiskru vzrušení z toho, co je možné. Detaily ti budou přirozeně ulehávat do paměti při společném praktickém procvičování – takhle skutečné učení funguje! -> Tuto lekci si můžete projít i na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Tuto lekci můžeš absolvovat i na [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Co vlastně *je* programování? +## Tak co to vlastně *je* programování? -Dobře, pojďme na tu zásadní otázku: co je programování doopravdy? +Dobře, pojďme se podívat na otázku za milion dolarů: co je to programování, opravdu? -Povím vám příběh, který mi úplně změnil pohled na to. Minulý týden jsem se snažil vysvětlit mámě, jak používat náš nový dálkový ovladač od chytré televize. Přistihl jsem se, jak říkám věci jako „Stiskni červené tlačítko, ale ne to velké červené, to malé vlevo... ne, vaši druhou levou... dobře, drž ho dvě vteřiny, ne jednu, ne tři...“ Zní to povědomě? 😅 +Dám ti příběh, který mi úplně změnil, jak o tom přemýšlím. Minulý týden jsem se snažil vysvětlit mamince, jak používat dálkový ovladač na naší nové chytré televizi. Přistihl jsem se, jak říkám věci jako „Stiskni červené tlačítko, ale ne to velké červené, malé červené vlevo... ne, tvoje druhá levá... dobrá, teď drž dvě sekundy, ne jednu, ne tři...“ Zní to povědomě? 😅 -To je programování! Je to umění dávat velmi detailní, krok za krokem instrukce něčemu, co je mocné, ale potřebuje všechno přesně vyspecifikované. Akorát místo toho, abyste vysvětlovali mámě (která může zeptat „které červené tlačítko?!“), vysvětlujete počítači (který prostě udělá přesně to, co mu řeknete, i když to není úplně, co jste mysleli). +Tohle je programování! Je to umění dávat opravdu detailní, krok za krokem instrukce něčemu, co je velmi výkonné, ale potřebuje, aby všechno bylo přesně vysvětleno. Jenže místo toho, abys to vysvětloval mamince (která může říct „které červené tlačítko?!“), vysvětluješ to počítači (který prostě dělá přesně to, co mu řekneš, i když to není úplně to, co jsi myslel). -Co mě nadchlo, když jsem tohle poprvé pochopil: počítače jsou vlastně na základní úrovni docela jednoduché. Rozumí doslova jen dvěma věcem – 1 a 0, což je v podstatě „ano“ a „ne“ nebo „zapnuto“ a „vypnuto.“ To je vše! Ale tady nastává ta magie – nemusíme mluvit v jedničkách a nulách, jako v Matrixu. To jsou **programovací jazyky**, které nám pomáhají. Jsou jako nejlepší překladatel světa, který vezme vaše úplně normální lidské myšlenky a převede je do počítačového jazyka. +Když jsem to poprvé pochopil, úplně mi to zmátlo hlavu: počítače jsou ve své podstatě vlastně docela jednoduché. Rozumí jen dvěma věcem – 1 a 0, což je v podstatě „ano“ a „ne“ nebo „zapnuto“ a „vypnuto.“ To je všechno! Ale tady přichází kouzlo – nemusíme mluvit v 1 a 0 jako bychom byli ve filmu Matrix. Právě proto tu jsou **programovací jazyky**. Jsou jako nejlepší překladatel světa, který vezme tvoje úplně normální lidské myšlenky a převede je do počítačové řeči. -A tady je něco, co mi dělá husí kůži každé ráno, když se probouzím: doslova *všechno* digitální ve vašem životě začalo u někoho přesně jako jste vy, pravděpodobně sedícího v pyžamu s šálkem kávy a píšícího kód na notebooku. Ten Instagram filtr, který vás nechá vypadat dokonale? Někdo napsal ten kód. Doporučení, které vás zavedlo k vaší nové oblíbené písničce? Vývojář vytvořil ten algoritmus. Aplikace, která pomáhá rozdělit účet za večeři s přáteli? Jo, někdo si řekl „tohle je otravné, to zkusím opravit“ a... udělal to! +A teď přijde něco, co mi každý den ráno skutečně dává husí kůži: doslova *všechno* digitální v tvém životě začalo někým přesně jako jsi ty, pravděpodobně v pyžamu s šálkem kávy, který píše kód na svém notebooku. Ten Instagram filtr, který tě dělá dokonalým? Někdo ho naprogramoval. Doporučení, které tě dovedlo k nové oblíbené písničce? Vývojář vytvořil ten algoritmus. Aplikace, která ti pomáhá rozdělit účet za večeři s přáteli? Jo, někdo si řekl „to je otravné, tohle opravím“ a pak… taky udělal! -Když se naučíte programovat, neosvojujete si jen novou dovednost – stáváte se součástí úžasné komunity řešitelů problémů, kteří každý den přemýšlejí: „Co kdybych mohl postavit něco, co někomu zlepší den alespoň trochu?“ Opravdu, existuje něco lepšího? +Když se naučíš programovat, nezískáš jen novou dovednost – stáváš se součástí úžasné komunity řešitelů problémů, kteří denně přemýšlejí: „Co kdybych mohl postavit něco, co někomu zlepší den alespoň trochu?“ Upřímně, je něco lepšího než tohle? -✅ **Zajímavý úkol**: Najděte si, kdo myslíte, že byl první programátor na světě? Dám vám nápovědu: možná to není ten, koho čekáte! Příběh této osoby je naprosto fascinující a ukazuje, že programování vždycky bylo o kreativním hledání řešení a přemýšlení mimo zaběhnuté šablony. +✅ **Zábavná fakta:** Když budeš mít chvilku, mrkni na tohle – kdo byl podle tebe první programátor na světě? Mám nápovědu: nemusí to být ten, koho očekáváš! Příběh této osoby je fascinující a ukazuje, že programování vždycky bylo o kreativním řešení problémů a myšlení mimo zaběhnuté cesty. -### 🧠 **Jak se cítíte?** +### 🧠 **Jak se nyní cítíš?** -**Chvilku se zamyslete:** -- Dává vám teď smysl představa „dávat počítačům instrukce“? -- Umíte si představit denní úkol, který byste chtěli automatizovat pomocí programování? -- Jaké otázky se vám honí hlavou ohledně celého toho programování? +**Zastav se a zamysli:** +- Dává ti teď smysl představa „dávání pokynů počítačům“? +- Napadá tě nějaký každodenní úkol, který bys chtěl pomocí programování automatizovat? +- Jaké otázky tě ohledně programování napadají? -> **Pamatujte**: Je naprosto normální, pokud některé koncepty zatím nejsou úplně jasné. Učení programování je jako učení nového jazyka – mozek potřebuje čas na vybudování nových neuronových spojů. Děláte to skvěle! +> **Pamatuj:** Je naprosto normální, pokud ti něco teď připadá matoucí. Učení programování je jako učení nového jazyka – trvá, než si mozek vybuduje nové spojení. Děláš to skvěle! -## Programovací jazyky jsou jako různé druhy magie +## Programovací jazyky jsou jako různé druhy kouzel -Dobře, tohle možná bude znít divně, ale vydržte se mnou – programovací jazyky jsou hodně jako různé hudební styly. Přemýšlejte o tom: máte jazz, který je hladký a improvizační, rock, který je silný a přímý, klasiku, co je elegantní a strukturovaná, a hip-hop, který je kreativní a expresivní. Každý styl má svou atmosféru, svoji komunitu nadšených fanoušků a každý je perfektní pro jiné nálady a příležitosti. +Dobře, zní to asi divně, ale vydrž – programovací jazyky jsou hodně podobné různým hudebním žánrům. Přemýšlej: máš jazz, který je hladký a improvizační, rock, který je silný a přímý, klasiku, která je elegantní a strukturovaná, a hip-hop, který je kreativní a expresivní. Každý styl má svoji atmosféru, svoji komunitu zapálených fanoušků a každý je perfektní pro různé nálady a příležitosti. -Programovací jazyky fungují stejně! Nechtěli byste používat stejný jazyk na tvorbu zábavné mobilní hry jako na zpracování obřího množství klimatických dat, stejně jako byste nehráli death metal při józe (no aspoň většinou ne! 😄). +Programovací jazyky fungují přesně stejně! Nepoužil bys stejný jazyk na vývoj zábavné mobilní hry, jaký bys použil na zpracování obrovského množství klimatických dat, stejně jako bys nehrál death metal na hodině jógy (no, většinou ne! 😄). -Ale to, co mi pořád vyrazí dech, je tohle: ty jazyky jsou jako mít po boku nejtrpělivějšího a nejbystřejšího tlumočníka na světě. Můžete vyjádřit své myšlenky způsobem, který je přirozený vaší lidské mysli, a on zvládne veškerou neuvěřitelně složitou práci s překladem do jedniček a nul, které počítače skutečně „mluví“. Je to jako mít kamaráda, který dokonale ovládá oba jazyky – „lidskou kreativitu“ i „počítačovou logiku“ – a nikdy se neunaví, nepotřebuje pauzu na kávu a nikdy se na vás nezlobí, když se ptáte stejnou otázku dvakrát! +Ale co mi absolutně vždycky vyrazí dech: tyto jazyky jsou jako nejtrpělivější, nejbystřejší tlumočník na světě, který sedí vedle tebe. Můžeš vyjádřit své myšlenky způsobem, který je pro tvůj lidský mozek přirozený, a oni zvládnou všechno to neuvěřitelně složité přeložení do jedniček a nul, které počítače skutečně „mluví“. Je to jako mít přítele, který perfektně ovládá „lidskou kreativitu“ i „počítačovou logiku“ – a nikdy se neunaví, nikdy nepotřebuje přestávky na kafe a nikdy tě neodsoudí za to, že se ptáš dvakrát! ### Oblíbené programovací jazyky a jejich použití ```mermaid mindmap root((Programovací jazyky)) - Vývoj webu + Webový vývoj JavaScript Frontendová magie Interaktivní webové stránky TypeScript JavaScript + typy Podnikové aplikace - Data a AI + Data & AI Python Datová věda Strojové učení @@ -113,7 +113,7 @@ mindmap Systémy a výkon C++ Hry - Kritický výkon + Výkonová kritická Rust Bezpečnost paměti Systémové programování @@ -123,37 +123,37 @@ mindmap ``` | Jazyk | Nejlepší pro | Proč je populární | |----------|----------|------------------| -| **JavaScript** | Webový vývoj, uživatelská rozhraní | Běží v prohlížečích a pohání interaktivní weby | -| **Python** | Data science, automatizace, AI | Snadné čtení a učení, silné knihovny | -| **Java** | Podnikové aplikace, Android aplikace | Platformně nezávislý, robustní pro velké systémy | -| **C#** | Windows aplikace, vývoj her | Silná podpora Microsoft ekosystému | -| **Go** | Cloudové služby, backend systémy | Rychlý, jednoduchý, navržený pro moderní výpočty | +| **JavaScript** | Vývoj webu, uživatelská rozhraní | Funguje v prohlížečích a pohání interaktivní weby | +| **Python** | Data science, automatizace, AI | Snadno čitelný a učenlivý, silné knihovny | +| **Java** | Podnikové aplikace, Android aplikace | Nezávislý na platformě, robustní pro velké systémy | +| **C#** | Windows aplikace, vývoj her | Silná podpora v Microsoft ekosystému | +| **Go** | Cloudové služby, backend systémy | Rychlý, jednoduchý, navržený pro moderní výpočetní prostředí | -### Jazyky na vysoké úrovni vs. nízké úrovni +### Vyšší vs. nižší úroveň jazyků -Dobře, tohle byl opravdu koncept, který mě úplně zmátl na začátku, tak sdílím analogii, která to konečně rozsvítila i mě – doufám, že pomůže i vám! +Dobře, upřímně to byl koncept, který mi úplně rozbil mozek, když jsem začínal, tak ti povím analogii, která mi to konečně otevřela – doufám, že ti taky pomůže! -Představte si, že jste v cizí zemi, kde neumíte jazyk, a zoufale hledáte nejbližší záchod (to jsme všichni zažili, že? 😅): +Představ si, že cestuješ do země, kde neumíš jazyk, a zoufale potřebuješ najít nejbližší záchod (to jsme všichni zažili, že jo? 😅): -- **Programování nízké úrovně** je jako naučit se místní dialekt tak dobře, že si můžete povídat s babičkou prodávající ovoce na rohu pomocí kulturních narážek, místní slangu a vtipů, kterým rozumí jen někdo, kdo tam vyrostl. Super impresivní a neuvěřitelně efektivní… pokud jste fluent! Ale dost náročné, když jen chcete najít záchod. +- **Programování na nízké úrovni** je jako naučit se místní dialekt tak dobře, že můžeš mluvit s babičkou prodávající ovoce na rohu, používat kulturní odkazy, místní slang a vtipy, kterým rozumí jen místní. Super působivé a nesmírně efektivní... pokud jsi plynulý! Ale docela matoucí, když se prostě snažíš najít záchod. -- **Programování vysoké úrovně** je jako mít úžasného místního kamaráda, který vás prostě chápe. Můžete říct „Opravdu potřebuji najít toaletu“ v obyčejné angličtině a on zařídí celý kulturní překlad a dá vám instrukce tak, že jim rozumí i vaše netypická hlava. +- **Programování na vysoké úrovni** je jako mít úžasného místního přítele, který ti rozumí. Můžeš říct „Potřebuju opravdu najít toaletu“ jednoduše v angličtině a on překládá všechny kulturní nuance a dává ti směrovky srozumitelné pro tvůj ne-místní mozek. -V programovacích termínech: -- **Jazyky nízké úrovně** (například Assembly nebo C) vám umožní mít neuvěřitelně detailní rozhovor s fyzickým hardwarem počítače, ale musíte myslet jako stroj, což je… no, řekněme, že to je pořádná změna myšlení! -- **Jazyky vysoké úrovně** (jako JavaScript, Python nebo C#) vám dovolí myslet jako člověk, zatímco ony se starají o veškerou strojovou řeč v pozadí. Navíc mají úžasné přívětivé komunity plné lidí, kteří si pamatují, jaké to bylo být nováčky, a skutečně chtějí pomoci! +Ve světě programování: +- **Jazyky na nízké úrovni** (jako Assembly nebo C) ti umožňují mluvit velmi detailně přímo s hardwarem počítače, ale musíš myslet jako stroj, což... no, řekněme, že je to velká změna myšlení! +- **Jazyky na vysoké úrovni** (jako JavaScript, Python nebo C#) ti umožní myslet jako člověk a ony se postarají o veškerý strojový kód za oponou. Navíc mají nesmírně přívětivé komunity plné lidí, kteří si pamatují, jaké to je být nováček, a skutečně chtějí pomáhat! -Hádejte, které vám doporučím začít? 😉 Jazyky vysoké úrovně jsou jako pomocná kolečka na kole, která nikdy nechcete sundat, protože celý zážitek je díky nim mnohem příjemnější! +Hádej, které ti navrhnu začít používat? 😉 Jazyky na vysoké úrovni jsou jako pomocná kolečka na kole, která vlastně nikdy nechceš sundat, protože ti celý zážitek tolik usnadní! ```mermaid flowchart TB - A["👤 Lidská myšlenka:
'Chci vypočítat Fibonacciho čísla'"] --> B{Vyberte úroveň jazyka} + A["👤 Lidská myšlenka:
'Chci spočítat Fibonacciho čísla'"] --> B{Vybrat úroveň jazyka} B -->|Vyšší úroveň| C["🌟 JavaScript/Python
Snadné čtení a psaní"] - B -->|Nižší úroveň| D["⚙️ Assembly/C
Přímá kontrola hardwaru"] + B -->|Nižší úroveň| D["⚙️ Assembler/C
Přímá kontrola hardwaru"] - C --> E["📝 Napište: fibonacci(10)"] - D --> F["📝 Napište: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Napiš: fibonacci(10)"] + D --> F["📝 Napiš: mov r0,#00
sub r0,r0,#01"] E --> G["🤖 Porozumění počítače:
Překladač řeší složitost"] F --> G @@ -164,15 +164,15 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Ukážu vám, proč jsou jazyky vysoké úrovně tak přátelské +### Ukážu ti, proč jsou jazyky na vysoké úrovni tak přátelské -Dobře, chystám se vám ukázat něco, co perfektně demonstruje, proč jsem si zamiloval jazyky vysoké úrovně, ale nejdřív – potřebuji, abyste mi něco slíbili. Když uvidíte první ukázku kódu, nezpanikařte! Má vypadat trochu zastrašujícím dojmem. To je přesně ten bod, který chci zdůraznit! +Dobře, ukážu ti něco, co perfektně ukazuje, proč jsem si zamiloval jazyky na vysoké úrovni, ale nejdřív – slib mi něco. Až uvidíš ten první kódový příklad, nepanikař! Má vypadat zastrašujícím dojmem. To je přesně ten bod, který chci ukázat! -Podíváme se na stejný úkol napsaný ve dvou úplně odlišných stylech. Oba vytvoří tzv. Fibonacciho posloupnost – nádherný matematický vzor, kde je každé číslo součtem dvou předchozích: 0, 1, 1, 2, 3, 5, 8, 13... (Zajímavost: tenhle vzor najdete doslova všude v přírodě – spirály slunečnicových semen, vzory šišek, dokonce i v tom, jak se tvoří galaxie!) +Podíváme se na úplně stejný úkol napsaný ve dvou úplně odlišných stylech. Oba vytvářejí tzv. Fibonacciho posloupnost – je to krásný matematický vzor, kde každé číslo je součtem dvou předchozích: 0, 1, 1, 2, 3, 5, 8, 13... (Zábavná poznámka: tento vzor najdeš doslova všude v přírodě – spirály na semenech slunečnice, vzory šišek, dokonce i ve formování galaxií!) -Připraveni vidět rozdíl? Jdeme na to! +Připraven na rozdíl? Jdeme na to! -**Jazyk vysoké úrovně (JavaScript) – přátelský k lidem:** +**Jazyk na vysoké úrovni (JavaScript) – Přátelský pro člověka:** ```javascript // Krok 1: Základní nastavení Fibonacciho posloupnosti @@ -184,28 +184,28 @@ console.log('Fibonacci sequence:'); ``` **Co tento kód dělá:** -- **Deklaruje** konstantu určující, kolik Fibonacciho čísel chceme vygenerovat -- **Inicializuje** dvě proměnné pro sledování současného a dalšího čísla v posloupnosti -- **Nastavuje** počáteční hodnoty (0 a 1), které definují Fibonacciho vzor -- **Zobrazuje** hlavičku pro identifikaci našeho výstupu +- **Deklaruje** konstantu, která určuje, kolik Fibonacciho čísel chceme vygenerovat +- **Inicializuje** dvě proměnné pro sledování aktuálního a dalšího čísla v posloupnosti +- **Nastaví** počáteční hodnoty (0 a 1), které definují Fibonacciho vzor +- **Zobrazí** nadpis, aby identifikoval naši výstupní zprávu ```javascript -// Krok 2: Vygenerujte posloupnost pomocí smyčky +// Krok 2: Vygenerujte sekvenci pomocí smyčky for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Vypočítejte další číslo v posloupnosti + // Vypočítejte další číslo v sekvenci const sum = current + next; current = next; next = sum; } ``` -**Co se zde děje podrobněji:** +**Rozbor, co se zde děje:** - **Prochází** každou pozici v posloupnosti pomocí cyklu `for` -- **Zobrazuje** každé číslo s jeho pozicí využitím formátování šablonových řetězců -- **Vypočítává** další Fibonacciho číslo sčítáním současné a další hodnoty -- **Aktualizuje** sledovací proměnné pro přechod na další iteraci +- **Zobrazuje** každé číslo s jeho pozicí pomocí formátování šablony +- **Vypočítá** další Fibonacciho číslo sčítáním aktuálního a dalšího čísla +- **Aktualizuje** sledovací proměnné pro přechod k další iteraci ```javascript // Krok 3: Moderní funkcionální přístup @@ -225,12 +225,12 @@ console.log(fibSequence); ``` **Výše jsme:** -- **Vytvořili** znovupoužitelnou funkci pomocí moderní syntaxi šipek (arrow function) -- **Sestavili** pole pro uložení celé posloupnosti místo zobrazení po jednom -- **Použili** indexování pole pro výpočet každého nového čísla ze starších -- **Vrátili** celou posloupnost pro flexibilní použití v dalších částech programu +- **Vytvořili** znovupoužitelnou funkci pomocí moderní syntaxe šipkových funkcí +- **Postavili** pole pro uložení celé posloupnosti místo zobrazení po jednom +- **Použili** indexování pole k výpočtu každého nového čísla z předchozích hodnot +- **Vrátili** celou posloupnost pro flexibilní použití v jiných částech programu -**Jazyk nízké úrovně (ARM Assembly) – přátelský k počítači:** +**Jazyk na nízké úrovni (ARM Assembly) – Přátelský pro počítač:** ```assembly area ascen,code,readonly @@ -257,59 +257,60 @@ back add r0,r1 end ``` -Všimněte si, jak verze v JavaScriptu čte téměř jako instrukce v angličtině, zatímco verze v Assembly používá záhadné příkazy, které přímo řídí procesor počítače. Oba úkoly splní stejný úkol, ale jazyk vysoké úrovně je pro lidi mnohem snadněji pochopitelný, psaný a udržovatelný. +Všimni si, jak verze v JavaScriptu čte téměř jako anglické pokyny, zatímco Assembly verze používá záhadné příkazy, které přímo ovládají procesor počítače. Oba provádějí přesně ten samý úkol, ale jazyk na vysoké úrovni je mnohem snazší pro lidi pochopit, napsat i udržovat. -**Klíčové rozdíly, které si všimnete:** -- **Čitelnost**: JavaScript používá popisné názvy jako `fibonacciCount`, zatímco Assembly používá nesrozumitelné označení jako `r0`, `r1` -- **Komentáře**: Vysokoúrovňové jazyky podporují vysvětlující komentáře, které činí kód samodokumentujícím +**Klíčové rozdíly, které si všimneš:** +- **Čitelnost**: JavaScript používá popisné názvy jako `fibonacciCount`, zatímco Assembly používá kryptické označení jako `r0`, `r1` +- **Komentáře**: Vyšší programovací jazyky podporují vysvětlující komentáře, které činí kód samo-dokumentujícím - **Struktura**: Logický tok JavaScriptu odpovídá tomu, jak lidé přemýšlejí o problémech krok za krokem -- **Údržba**: Aktualizace verze JavaScriptu pro různé požadavky je přímá a jasná +- **Údržba**: Aktualizace verze v JavaScriptu pro různé požadavky je jednoduchá a přehledná + +✅ **O Fibonacciho posloupnosti**: Tento naprosto nádherný číselný vzorec (kde každé číslo je součtem dvou předchozích: 0, 1, 1, 2, 3, 5, 8...) se objevuje doslova *všude* v přírodě! Najdete ho ve spirálách slunečnic, ve vzorech šišek, v křivkách ulit chobotnic a dokonce i ve způsobu růstu větví stromů. Je opravdu ohromující, jak nám matematika a kód mohou pomoci pochopit a znovu vytvořit vzory, které příroda používá k tvoření krásy! -✅ **O Fibonacciho posloupnosti**: Tento naprosto nádherný číselný vzorec (kde každé číslo se rovná součtu dvou předchozích: 0, 1, 1, 2, 3, 5, 8...) se doslova *vyskytuje všude* v přírodě! Najdete ho ve spirálách slunečnic, vzorcích šišek, způsobu, jak křivky ulit náutila a dokonce i ve způsobu růstu větví stromů. Je to docela úžasné, jak nám matematika a kód mohou pomoci pochopit a znovu vytvořit vzory, které příroda používá k tvorbě krásy! -## Základní stavební kameny, které vytvářejí kouzlo +## Základní stavební kameny magie -Dobře, teď když jste viděli, jak programovací jazyky vypadají v akci, pojďme rozložit základní kousky, které tvoří doslova každý program, který kdy byl napsán. Považujte je za základní ingredience ve vašem oblíbeném receptu – jakmile pochopíte, co každý dělá, budete schopni číst a psát kód téměř v jakémkoli jazyce! +Dobře, nyní když jste viděli, jak vypadají programovací jazyky v akci, pojďme rozložit základní části, které tvoří doslova každý napsaný program. Představte si tyto části jako základní ingredience ve vašem oblíbeném receptu – jakmile pochopíte, co každá z nich dělá, budete schopni číst a psát kód prakticky v jakémkoli jazyce! -Je to něco jako učení se gramatice programování. Pamatujete si, jak jste se ve škole učili o podstatných jménech, slovesech a jak skládat věty dohromady? Programování má svou vlastní verzi gramatiky a upřímně je mnohem logičtější a shovívavější než anglická gramatika byla! 😄 +Je to trochu jako naučit se gramatiku programování. Pamatujete si ze školy, jak jste se učili o podstatných jménech, slovesech a jak tvořit věty? Programování má svou vlastní verzi gramatiky, a upřímně, je mnohem logičtější a shovívavější než anglická gramatika! 😄 -### Příkazy: Krok za krokem pokyny +### Příkazy: Pokyny krok za krokem -Začněme s **příkazy** – ty jsou jako jednotlivé věty v konverzaci s vaším počítačem. Každý příkaz říká počítači, aby udělal jednu konkrétní věc, podobně jako když dáváte směrování: „Zahni tady vlevo,“ „Zastav na červenou,“ „Zaparkuj na tom místě.“ +Začněme s **příkazy** – ty jsou jako jednotlivé věty v konverzaci s vaším počítačem. Každý příkaz říká počítači, aby udělal jednu konkrétní věc, podobně jako dávání pokynů: „Zahněte tady vlevo,“ „Zastavte na červené,“ „Zaparkujte na tomto místě.“ -Co mám na příkazech rád, je to, jak jsou obvykle čitelné. Podívejte se na to: +Co na příkazech miluji, je jejich obvykle vysoká čitelnost. Podívejte se na to: ```javascript -// Základní příkazy, které vykonávají jednotlivé akce +// Základní příkazy, které provádějí jednotlivé akce const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Toto kód dělá:** +**Co tento kód dělá:** - **Deklaruje** konstantní proměnnou pro uložení jména uživatele -- **Zobrazí** uvítací zprávu do konzole -- **Spočítá** a uloží výsledek matematické operace +- **Zobrazuje** uvítací zprávu v konzoli +- **Vypočítá** a uloží výsledek matematické operace ```javascript -// Výrazy, které interagují s webovými stránkami +// Příkazy, které interagují s webovými stránkami document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Krok za krokem se děje toto:** -- **Upraví** titulek webové stránky, který se zobrazuje na kartě v prohlížeči -- **Změní** barvu pozadí celého těla stránky +**Krok za krokem, co se děje:** +- **Upravuje** titul webové stránky, který se zobrazuje na záložce prohlížeče +- **Mění** barvu pozadí celého těla stránky ### Proměnné: Paměťový systém vašeho programu -Dobře, **proměnné** jsou upřímně jeden z mých nejoblíbenějších konceptů učit, protože jsou tak podobné věcem, které už každý den používáte! +Dobře, **proměnné** jsou upřímně jedno z mých absolutně nejoblíbenějších pojmů k výuce, protože jsou tak podobné věcem, které každý den používáte! -Zamyslete se na chvíli nad seznamem kontaktů ve vašem telefonu. Nezapamatujete si čísla na všechny – místo toho uložíte „Maminka,“ „Nejlepší přítel“ nebo „Pizzerie, která rozváží do 2 ráno“ a necháte telefon pamatovat si ta skutečná čísla. Proměnné fungují úplně stejně! Jsou to jako označené kontejnery, kde váš program může uložit informace a později je vyhledat pomocí smysluplného jména. +Přemýšlejte o kontaktu ve svém telefonu. Nepamatujete si všechny telefonní čísla – místo toho uložíte „Máma“, „Nejlepší kamarád“ nebo „Pizza, co rozváží do 2 ráno“ a necháte telefon zapamatovat si ta čísla. Proměnné fungují úplně stejně! Jsou jako označené nádoby, kam může váš program uložit informace a později je získat pomocí názvu, který opravdu dává smysl. -Co je opravdu skvělé: proměnné se mohou měnit, zatímco váš program běží (odtud název „proměnlivé“ – vidíte, co udělali?). Stejně jako můžete aktualizovat ten kontakt na pizzerii, když objevíte něco lepšího, proměnné se mohou změnit, když váš program získá nové informace nebo když se situace změní! +To, co je opravdu skvělé: proměnné se mohou měnit, zatímco váš program běží (odtud název „proměnná“ – vidíte, co udělali?). Stejně jako můžete aktualizovat kontakt na pizzérii, když najdete lepší místo, proměnné lze aktualizovat, jak se program učí nové informace nebo situace se mění! -Ukážu vám, jak to může být krásně jednoduché: +Ukážu vám, jak krásně jednoduché to může být: ```javascript // Krok 1: Vytváření základních proměnných @@ -320,10 +321,10 @@ let isRaining = false; ``` **Pochopení těchto konceptů:** -- **Uložení** neměnných hodnot do `const` proměnných (například název stránky) -- **Použití** `let` pro hodnoty, které se mohou během programu měnit -- **Přiřazení** různých datových typů: řetězce (text), čísla a booleany (true/false) -- **Výběr** popisných názvů, které vysvětlují, co každá proměnná obsahuje +- **Ukládejte** neměnné hodnoty do `const` proměnných (např. název webu) +- **Používejte** `let` pro hodnoty, které se mohou měnit během běhu programu +- **Přiřazujte** různé datové typy: řetězce (text), čísla, a booleovské hodnoty (true/false) +- **Vyberte** popisné názvy, které vysvětlují, co každá proměnná obsahuje ```javascript // Krok 2: Práce s objekty pro seskupení souvisejících dat @@ -334,47 +335,47 @@ const weatherData = { }; ``` -**Výše jsme:** +**V předchozím příkladu jsme:** - **Vytvořili** objekt pro seskupení souvisejících informací o počasí -- **Organizovali** více dat pod jedno jméno proměnné -- **Použili** klíč-hodnota páry k jasnému označení každé informace +- **Uspořádali** více dat pod jedním názvem proměnné +- **Použili** páry klíč-hodnota pro jasné pojmenování každé informace ```javascript // Krok 3: Používání a aktualizace proměnných console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Aktualizace změnitelných proměnných +// Aktualizace proměnných, které lze měnit currentWeather = "cloudy"; temperature = 68; ``` -**Pojďme porozumět každé části:** -- **Zobrazit** informace pomocí šablonových literálů se syntaxí `${}` -- **Přistupovat** k vlastnostem objektu pomocí tečkové notace (`weatherData.windSpeed`) -- **Aktualizovat** proměnné deklarované s `let` pro odrážení měnících se podmínek -- **Kombinovat** více proměnných k vytvoření smysluplných zpráv +**Pojďme si vysvětlit jednotlivé části:** +- **Zobrazujeme** informace pomocí šablonových literálů s `${}` syntaxí +- **Přistupujeme** ke vlastnostem objektu pomocí tečkové notace (`weatherData.windSpeed`) +- **Aktualizujeme** proměnné deklarované pomocí `let`, aby odrážely měnící se podmínky +- **Kombinujeme** více proměnných pro vytvoření smysluplných zpráv ```javascript -// Krok 4: Moderní destrukturalizace pro čistější kód +// Krok 4: Moderní destrukturalizace pro čistší kód const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Co musíte vědět:** -- **Extrahovat** specifické vlastnosti z objektů pomocí destrukturalizace přiřazení -- **Vytvářet** nové proměnné automaticky se stejnými názvy jako klíče objektu -- **Zjednodušit** kód vyhnutím se opakované tečkové notaci +**Co je potřeba vědět:** +- **Extrahujte** specifické vlastnosti z objektů pomocí destrukturace +- **Vytvářejte** nové proměnné automaticky se stejnými názvy jako klíče objektu +- **Zjednodušte** kód vyhýbáním se opakovanému používání tečkové notace -### Řízení toku: Naučte svůj program myslet +### Řízení toku: Učíte svůj program myslet -Dobře, tady programování začne být naprosto ohromující! **Řízení toku** je v podstatě učení vašeho programu, jak dělat chytrá rozhodnutí, přesně jako to děláte vy každý den bez přemýšlení. +Dobře, tady to programování začíná být naprosto ohromující! **Řízení toku** znamená naučit svůj program dělat chytrá rozhodnutí, přesně jako vy sami každý den bez přemýšlení. -Představte si toto: dnes ráno jste asi šli něčím jako „Když prší, vezmu si deštník. Když je zima, obléknu si bundu. Když jdu pozdě, vynechám snídani a vezmu si kávu cestou.“ Váš mozek přirozeně sleduje tuto logiku pokud-pak desítkykrát denně! +Představte si, že dnes ráno jste asi prošli něčím jako „Pokud prší, vezmu si deštník. Pokud je zima, obléknu si bundu. Pokud jdu pozdě, přeskočím snídani a vezmu si kávu na cestu.“ Váš mozek přirozeně následuje tuto logiku "jestliže-pak" desítkykrát denně! -Toto dělá programy inteligentními a živými místo toho, aby jen následovaly nudný, předvídatelný scénář. Mohou skutečně pohledět na situaci, vyhodnotit, co se děje, a reagovat vhodně. Je to jako dát programu mozek, který se dokáže přizpůsobit a vybírat si! +To dělá programy chytřejší a živější místo toho, aby jen následovaly nudný, předvídatelný scénář. Skutečně mohou situaci posoudit, vyhodnotit, co se děje, a reagovat vhodným způsobem. Je to jako dát programu mozek, který se dokáže přizpůsobit a dělat volby! -Chcete vidět, jak krásně to funguje? Ukážu vám to: +Chcete vidět, jak to krásně funguje? Ukážu vám to: ```javascript // Krok 1: Základní podmíněná logika @@ -388,11 +389,11 @@ if (userAge >= 18) { } ``` -**Tento kód dělá:** -- **Zkontroluje**, zda uživatel dosáhl věku pro hlasování -- **Provede** různé bloky kódu podle výsledku podmínky -- **Spočítá** a zobrazí, jak dlouho ještě do způsobilosti k volbám, pokud je pod 18 -- **Poskytne** specifickou, užitečnou zpětnou vazbu pro každou situaci +**Co tento kód dělá:** +- **Kontroluje**, zda uživatel splňuje věkový limit pro hlasování +- **Spouští** různé bloky kódu podle výsledku podmínky +- **Vypočítává** a zobrazuje, za jak dlouho bude možné hlasovat, pokud je uživatel mladší 18 let +- **Poskytuje** konkrétní a užitečnou zpětnou vazbu pro každou situaci ```javascript // Krok 2: Více podmínek s logickými operátory @@ -408,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Rozbor, co se tu děje:** -- **Spojíme** více podmínek pomocí operátoru `&&` (a) -- **Vytvoříme** hierarchii podmínek pomocí `else if` pro více scénářů -- **Zpracujeme** všechny možné případy pomocí konečného `else` -- **Poskytujeme** jasnou a praktickou zpětnou vazbu pro každou situaci +**Co se zde děje:** +- **Kombinuje** více podmínek pomocí operátoru `&&` (a) +- **Vytváří** hierarchii podmínek pomocí `else if` pro více scénářů +- **Zpracovává** všechny možné případy pomocí závěrečného příkazu `else` +- **Poskytuje** jasnou a srozumitelnou zpětnou vazbu pro každou situaci ```javascript -// Krok 3: Stručná podmínka s ternárním operátorem +// Krok 3: Srozumitelná podmínka s ternárním operátorem const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Na co si pamatovat:** -- **Použijte** ternární operátor (`? :`) pro jednoduché dvou-variantní podmínky -- **Napište** podmínku první, následovanou `?`, pak pravdivý výsledek, pak `:`, a nakonec nepravdivý výsledek -- **Použijte** tento vzor, když potřebujete přiřadit hodnoty podle podmínek +**Co si zapamatovat:** +- **Používejte** ternární operátor (`? :`) pro jednoduché dvou možnostní podmínky +- **Napište** nejdříve podmínku, pak `?`, následuje hodnota pro pravdu, pak `:`, a nakonec hodnota pro nepravdu +- **Použijte** tento vzor, když potřebujete přiřadit hodnoty na základě podmínek ```javascript -// Krok 4: Řešení více konkrétních případů +// Krok 4: Zpracování více konkrétních případů const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -446,23 +447,23 @@ switch (dayOfWeek) { } ``` -**Tento kód dokáže následující:** -- **Porovná** hodnotu proměnné s více specifickými případy -- **Seskupí** podobné případy dohromady (pracovní dny vs. víkendy) -- **Spustí** odpovídající blok kódu, když najde shodu +**Tento kód plní následující:** +- **Porovnává** hodnotu proměnné s více specifickými případy +- **Skupinuje** podobné případy dohromady (pracovní dny vs. víkendy) +- **Spouští** odpovídající blok kódu, když najde shodu - **Zahrnuje** `default` případ pro neočekávané hodnoty -- **Používá** příkazy `break`, aby zabránil pokračování kódu v dalším případě +- **Používá** příkazy `break` k zabránění pokračování kódu do dalšího případu -> 💡 **Skutečná analogie**: Myslete na řízení toku jako na nejtrpělivější GPS na světě, která vám dává pokyny. Může říct „Pokud je na Main Street provoz, jeďte raději po dálnici. Pokud je dálnice zablokovaná stavbou, zkuste malebnou cestu.“ Programy používají stejný druh podmíněné logiky, aby inteligentně reagovaly na různé situace a vždy poskytly uživatelům nejlepší možný zážitek. +> 💡 **Reálná analogie**: Řízení toku si představte jako nejtrpělivější GPS na světě, která vám dává pokyny. Může říct „Pokud je na Main Street dopravní zácpa, jeďte dálnicí. Pokud je dálnice zablokovaná stavbou, zvolte panoramatickou cestu.“ Programy používají přesně tento typ podmíněné logiky, aby chytře reagovaly na různé situace a vždy uživatelům poskytly co nejlepší zážitek. -### 🎯 **Ověření konceptů: Mistrovství stavebních kamenů** +### 🎯 **Kontrola porozumění: Ovládnutí základních stavebních prvků** -**Podívejme se, jak na tom jste se základy:** -- Dokážete vysvětlit rozdíl mezi proměnnou a příkazem svými slovy? -- Zamyslete se nad reálnou situací, kdy byste použili rozhodnutí typu pokud-pak (například náš příklad s hlasováním) -- Co vás na programovací logice nejvíc překvapilo? +**Podívejme se, jak rozumíte základům:** +- Dokážete vlastními slovy vysvětlit rozdíl mezi proměnnou a příkazem? +- Vymyslete reálný příklad, kde byste použili rozhodovací konstrukci if-then (jako náš příklad s hlasováním) +- Co vás v logice programování nejvíce překvapilo? -**Rychlý posilovač sebevědomí:** +**Rychlé povzbuzení:** ```mermaid flowchart LR A["📝 Příkazy
(Instrukce)"] --> B["📦 Proměnné
(Úložiště)"] --> C["🔀 Řízení toku
(Rozhodnutí)"] --> D["🎉 Fungující program!"] @@ -472,27 +473,27 @@ flowchart LR style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Co bude dál**: Budeme mít absolutní zábavu, když se do těchto konceptů ponoříme hlouběji na naší úžasné cestě spolu! Teď se jen soustřeďte na pocit vzrušení z těch všech úžasných možností před vámi. Konkrétní dovednosti a techniky přirozeně přijdou, jak budeme společně procvičovat – slibuji, že to bude mnohem zábavnější, než možná očekáváte! +✅ **Co přijde dál**: Budeme mít absolutní radost, když se společně ponoříme hlouběji do těchto konceptů! Teď se jen soustřeďte na pocit vzrušení z nekonečných možností před vámi. Konkrétní dovednosti a techniky přijdou přirozeně, když budeme společně trénovat – slibuji, že to bude zábava, jakou jste nečekali! ## Nástroje řemesla -Dobře, tady se upřímně začínám tak těšit, že se sotva udržím! 🚀 Půjdeme mluvit o neuvěřitelných nástrojích, které vám dají pocit, jako byste právě dostali klíče od digitální vesmírné lodi. +Dobře, tady se opravdu nemohu ubránit nadšení! 🚀 Brzy si povíme o úžasných nástrojích, které vás přenesou do role, kdy budete mít klíče k digitálnímu vesmírnému plavidlu. -Víte, jak má kuchař ty dokonale vyvážené nože, které jsou prodloužením jeho rukou? Nebo jak má hudebník tu jedinou kytaru, která jakmile se jí dotkne, jako by zpívala? No, vývojáři mají svoji vlastní verzi těchto magických nástrojů a tady je něco, co vás opravdu ohromí – většina z nich je úplně zdarma! +Víte, jak má kuchař perfektně vyvážené nože, které jsou jako pokračování jeho rukou? Nebo jak má muzikant tu jednu kytaru, která zní, jakmile se jí dotkne? Vývojáři mají své vlastní verze těchto magických nástrojů, a teď přijde část, která vás opravdu ohromí – většina z nich je úplně zdarma! -Skoro skáču na židli s nadšením, že vám je můžu ukázat, protože úplně změnily způsob, jak stavíme software. Mluvíme o asistentech pro psaní kódu poháněných umělou inteligencí (nemyslím si to!), cloudových prostředích, kde můžete stavět celé aplikace doslova odkudkoli s Wi-Fi, a ladicích nástrojích tak sofistikovaných, že jsou jako rentgenové vidění pro vaše programy. +Těším se, že vám je ukážu, protože zcela změnily způsob, jak stavíme software. Mluvíme o asistentech pro psaní kódu poháněných umělou inteligencí (to vážně myslím!), cloudových prostředích, kde můžete tvořit celé aplikace z prakticky kdekoli s Wi-Fi, a ladicích nástrojích tak sofistikovaných, že jsou jako rentgenové vidění pro vaše programy. -A tady je část, která mi stále dává husí kůži: nejsou to „nástroje pro začátečníky“, které rychle přerostete. Jsou to úplně stejné profesionální nástroje, které používají vývojáři ve Google, Netflixu a v tom indie vývojářském studiu, které máte rádi, právě teď. Budete se při jejich používání cítit jako fakt profíci! +A teď část, která mě stále dojímá: to nejsou nástroje pro začátečníky, ze kterých vyrostete. Jsou to přesně ty profesionální nástroje, které používají vývojáři ve firmách jako Google, Netflix a ta nezávislá vývojářská studio, která máte rádi právě teď. S nimi se budete cítit jako opravdový profík! ```mermaid graph TD - A["💡 Váš nápad"] --> B["⌨️ Editor kódu
(VS Code)"] - B --> C["🌐 DevTools prohlížeče
(Testování a ladění)"] + A["💡 Váš nápad"] --> B["⌨️ Kódový editor
(VS Code)"] + B --> C["🌐 Nástroje prohlížeče
(Testování a ladění)"] C --> D["⚡ Příkazový řádek
(Automatizace a nástroje)"] D --> E["📚 Dokumentace
(Učení a reference)"] - E --> F["🚀 Úžasná webová aplikace!"] + E --> F["🚀 Skvělá webová aplikace!"] - B -.-> G["🤖 AI Asistent
(GitHub Copilot)"] + B -.-> G["🤖 AI asistent
(GitHub Copilot)"] C -.-> H["📱 Testování zařízení
(Responzivní design)"] D -.-> I["📦 Správci balíčků
(npm, yarn)"] E -.-> J["👥 Komunita
(Stack Overflow)"] @@ -506,103 +507,104 @@ graph TD ``` ### Editory kódu a IDE: Vaši noví digitální nejlepší přátelé -Pojďme mluvit o editorech kódu – ty se vážně chystají stát vašimi novými oblíbenými místy! Považujte je za své osobní útočiště programování, kde strávíte většinu času tvorbou a zdokonalováním svých digitálních výtvorů. +Povíme si něco o editorech kódu – ty se brzy stanou vaším nejoblíbenějším místem na práci! Představte si je jako osobní svatyni programování, kde strávíte většinu času tvořením a vylepšováním svých digitálních výtvorů. -Ale to, co je na moderních editorech naprosto kouzelné, je, že nejsou jen obyčejné textové editory. Jsou jako mít nejchytřejšího a nejpodpůrnějšího mentora programování, který sedí přímo vedle vás 24/7. Chytají vaše překlepy dřív, než je vůbec zaregistrujete, navrhují vylepšení, která vás nechají vypadat jako géniové, pomáhají vám pochopit, co každý kousek kódu dělá, a některé dokonce předpovídají, co chcete napsat, a nabídnou vám dokončit vaše myšlenky! +A teď přijde to kouzlo moderních editorů: nejsou to jen fancy textové editory. Jsou to jako mít po boku nejbystřejšího, nejpodporujícího mentora programování nonstop. Chytí vaše překlepy dříve, než si jich všimnete, navrhnou vylepšení, která vás udělají za génia, pomohou vám pochopit, co každý kousek kódu dělá, a některé dokonce dokážou předpovědět, co budete chtít napsat, a nabídnout dokončení! -Pamatuji si, když jsem poprvé objevil automatické doplňování – doslova jsem měl pocit, že žiju v budoucnosti. Začnete něco psát a editor vám řekne: „Hej, nemyslel jsi na tuto funkci, která dělá přesně to, co potřebuješ?“ Je to jako mít mentálního čtecího kamaráda při kódování! +Pamatuji si, když jsem poprvé objevila automatické doplňování – měl jsem pocit, že žiju v budoucnosti. Začnete něco psát a editor říká: „Měl jsi na mysli tuhle funkci, která přesně dělá, co potřebuješ?“ Je to jako mít telepatického parťáka pro kódování! **Co dělá tyto editory tak úžasnými?** -Moderní editory kódu nabízejí působivé spektrum funkcí navržených pro zvýšení vaší produktivity: +Moderní editory kódu nabízejí širokou škálu funkcí, které zvyšují vaši produktivitu: | Funkce | Co dělá | Proč pomáhá | |---------|--------------|--------------| -| **Zvýraznění syntaxe** | Barevně odlišuje různé části kódu | Usnadňuje čtení kódu a hledání chyb | -| **Automatické doplňování** | Navrhuje kód při psaní | Zrychluje psaní kódu a snižuje překlepy | -| **Nástroje ladění** | Pomáhají najít a opravit chyby | Šetří hodiny času při hledání problémů | -| **Rozšíření** | Přidávají specializované funkce | Přizpůsobí editor jakékoli technologii | -| **Asistenti AI** | Navrhují kód a vysvětlení | Zrychlují učení a produktivitu | +| **Zvýraznění syntaxe** | Barevně odliší části kódu | Usnadňuje čtení kódu a hledání chyb | +| **Automatické doplňování** | Nabízí kód při psaní | Urychluje psaní a snižuje překlepy | +| **Nástroje pro ladění** | Pomáhá najít a opravit chyby | Šetří hodiny hledání závad | +| **Rozšíření** | Přidává specializované funkce | Přizpůsobí editor jakékoli technologii | +| **AI asistenti** | Nabízejí kód a vysvětlení | Urychlují učení a produktivitu | -> 🎥 **Video zdroj**: Chcete vidět tyto nástroje v akci? Podívejte se na toto [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) pro komplexní přehled. +> 🎥 **Video zdroj**: Chcete vidět tyto nástroje v akci? Podívejte se na toto video [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) pro komplexní přehled. #### Doporučené editory pro webový vývoj -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (zdarma) -- Nejoblíbenější mezi webovými vývojáři -- Vynikající ekosystém rozšíření -- Vestavěný terminál a integrace s Gitem -- **Nezbytná rozšíření**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-poháněné návrhy kódu - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Spolupráce v reálném čase - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatické formátování kódu - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Odhalování překlepů v kódu - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (placené, zdarma pro studenty) -- Pokročilé nástroje pro ladění a testování -- Inteligentní dokončování kódu -- Vestavěná správa verzí - -**Cloudová IDE** (různá cenová politika) -- [GitHub Codespaces](https://github.com/features/codespaces) - Plnohodnotný VS Code v prohlížeči -- [Replit](https://replit.com/) - Skvělé pro učení a sdílení kódu -- [StackBlitz](https://stackblitz.com/) - Okamžitý full-stack webový vývoj +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (zdarma) +- Nejoblíbenější mezi webovými vývojáři +- Skvělý ekosystém rozšíření +- Integrovaný terminál a Git +- **Nutná rozšíření**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – AI navrhování kódu + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – Spolupráce v reálném čase + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – Automatické formátování kódu + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – Kontrola překlepů v kódu + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (placené, zdarma pro studenty) +- Pokročilé nástroje pro ladění a testování +- Inteligentní dokončování kódu +- Integrovaná správa verzí + +**Cloudová IDE** (různé ceny) +- [GitHub Codespaces](https://github.com/features/codespaces) – Plný VS Code v prohlížeči +- [Replit](https://replit.com/) – Skvělé pro učení a sdílení kódu +- [StackBlitz](https://stackblitz.com/) – Okamžitý full-stack webový vývoj > 💡 **Tip na začátek**: Začněte s Visual Studio Code – je zdarma, široce používaný v oboru a má obrovskou komunitu vytvářející užitečné návody a rozšíření. + ### Webové prohlížeče: Vaše tajná vývojářská laboratoř -Dobře, připravte se, že vám to úplně vyrazí dech! Víte, jak jste používali prohlížeče k prohlížení sociálních sítí a sledování videí? Ukázalo se, že celý čas skrývají tuto neuvěřitelnou tajnou vývojářskou laboratoř, která čeká, až ji objevíte! +Dobře, připravte se, že vám to úplně vyrazí dech! Víš, jak používáš prohlížeče k procházení sociálních sítí a sledování videí? Ukazuje se, že celý čas skrývaly tu úžasnou tajnou laboratoř pro vývojáře, která čekala, až ji objevíš! -Pokaždé, když kliknete pravým tlačítkem na webovou stránku a vyberete „Prozkoumat prvek,“ otevírá se vám skrytý svět vývojářských nástrojů, které jsou upřímně silnější než některé drahé programy, za které jsem kdysi platil stovky dolarů. Je to jako objevit, že vaše obyčejná domácí kuchyně skrývá profesionální kuchařskou laboratoř za tajným panelem! -Poprvé, když mi někdo ukázal nástroje pro vývojáře v prohlížeči, strávil jsem asi tři hodiny jen klikáním a říkal si: „POČKEJ, TO MŮŽE DĚLAT I TO?“ Doslova můžete upravovat jakoukoli webovou stránku v reálném čase, přesně vidět, jak rychle se všechno načítá, testovat, jak vaše stránka vypadá na různých zařízeních, a dokonce ladit JavaScript jako opravdový profík. Je to naprosto úžasné! +Pokaždé, když kliknete pravým tlačítkem na webovou stránku a vyberete „Prozkoumat prvek“, otevíráte skrytý svět vývojářských nástrojů, které jsou upřímně mocnější než některé drahé programy, za které jsem dřív platila stovky dolarů. Je to jako objevit, že vaše stará kuchyň skrývá profesionální kuchařskou laboratoř za tajným panelem! +Poprvé, když mi někdo ukázal DevTools v prohlížeči, strávil jsem asi tři hodiny jen klikáním a říkáním „POČKEJ, TO UMÍ I TOHLE?!“ Doslova můžete upravovat jakoukoli webovou stránku v reálném čase, přesně vidět, jak rychle se vše načítá, testovat, jak vypadá vaše stránka na různých zařízeních, a dokonce ladit JavaScript jako naprostý profík. Je to naprosto ohromující! -**Tady je důvod, proč jsou prohlížeče vaším tajným zbraněm:** +**Tady je důvod, proč jsou prohlížeče vaším tajným trikem:** -Když vytváříte webovou stránku nebo webovou aplikaci, potřebujete vidět, jak vypadá a chová se v reálném světě. Prohlížeče nejen zobrazují vaši práci, ale také poskytují podrobné informace o výkonu, přístupnosti a možných problémech. +Když vytváříte web nebo webovou aplikaci, potřebujete vidět, jak vypadá a jak se chová v reálném světě. Prohlížeče nejen zobrazují vaši práci, ale také poskytují podrobnou zpětnou vazbu o výkonu, přístupnosti a potenciálních problémech. -#### Nástroje pro vývojáře v prohlížeči (DevTools) +#### Vývojářské nástroje prohlížeče (DevTools) -Moderní prohlížeče obsahují komplexní sady nástrojů pro vývoj: +Moderní prohlížeče obsahují komplexní vývojové nástroje: | Kategorie nástroje | Co dělá | Příklad použití | -|---------------|--------------|------------------| -| **Inspektor elementů** | Zobrazení a úprava HTML/CSS v reálném čase | Úprava stylu pro okamžité výsledky | -| **Konzole** | Zobrazení chybových zpráv a testování JavaScriptu | Ladění problémů a experimentování s kódem | -| **Monitor sítě** | Sledování načítání zdrojů | Optimalizace výkonu a doby načítání | -| **Kontrola přístupnosti** | Testování inkluzivního designu | Zajištění funkčnosti webu pro všechny uživatele | -| **Simulátor zařízení** | Náhled na různých velikostech obrazovek | Testování responzivního designu bez více zařízení | +|-------------------|---------|-----------------| +| **Inspektor prvků** | Zobrazí a upraví HTML/CSS v reálném čase | Úprava stylů pro okamžité výsledky | +| **Konzole** | Zobrazí chybové zprávy a testuje JavaScript | Ladění problémů a experimentování s kódem | +| **Monitor sítě** | Sleduje načítání zdrojů | Optimalizace výkonu a doby načítání | +| **Kontrola přístupnosti** | Testuje inkluzivní design | Zajištění funkčnosti pro všechny uživatele | +| **Simulátor zařízení** | Náhled na různých velikostech obrazovky | Testování responzivního designu bez více zařízení | #### Doporučené prohlížeče pro vývoj -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Průmyslový standard DevTools s rozsáhlou dokumentací -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Skvělé nástroje pro CSS Grid a přístupnost -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Postavený na Chromium s vývojářskými zdroji od Microsoftu +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Průmyslový standard DevTools s rozsáhlou dokumentací +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Výborné nástroje pro CSS Grid a přístupnost +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Postavený na Chromium s vývojářskými zdroji od Microsoftu -> ⚠️ **Důležitý tip pro testování**: Vždy testujte své weby v několika prohlížečích! To, co funguje perfektně v Chromu, může vypadat jinak v Safari nebo Firefoxu. Profesionální vývojáři testují ve všech hlavních prohlížečích, aby zajistili konzistentní uživatelský zážitek. +> ⚠️ **Důležitý tip pro testování**: Vždy testujte své weby ve více prohlížečích! To, co funguje perfektně v Chromu, může vypadat odlišně v Safari nebo Firefoxu. Profesionální vývojáři testují napříč všemi hlavními prohlížeči, aby zajistili konzistentní uživatelský zážitek. -### Nástroje příkazové řádky: Vaše brána do supermocí vývojáře +### Nástroje příkazové řádky: vaše brána k vývojářským supermocím -Dobře, pojďme mít teď upřímný moment ohledně příkazové řádky, protože chci, abyste to slyšeli od někoho, kdo tomu skutečně rozumí. Když jsem ji poprvé viděl – jen tu strašidelnou černou obrazovku s blikajícím textem – doslova jsem si pomyslel: „Ne, rozhodně ne! To vypadá jako něco z hackerského filmu z 80. let a já na to opravdu nejsem dost chytrý!“ 😅 +Dobře, pojďme si upřímně promluvit o příkazové řádce, protože chci, abyste to slyšeli od někoho, kdo jí opravdu rozumí. Když jsem ji poprvé viděl – jen tu děsivou černou obrazovku s blikajícím textem – doslova jsem si pomyslel: „Ne, to rozhodně ne! Vypadá to jako něco z hackerovského filmu z 80. let a já na to rozhodně nejsem dost chytrý!“ 😅 -Ale tady je to, co bych si přál, aby mi tehdy někdo řekl, a co říkám vám teď: příkazová řádka není strašidelná – je to vlastně jako mít přímý rozhovor s vaším počítačem. Představte si to jako rozdíl mezi objednávkou jídla přes stylovou aplikaci s obrázky a menu (což je hezké a snadné) oproti vstupu do vaší oblíbené místní restaurace, kde kuchař přesně zná, co máte rád, a umí vytvořit něco perfektního jen proto, že řeknete „překvap mě něčím úžasným.“ +Ale tady je, co bych si přál, aby mi někdo tehdy řekl, a co vám říkám teď: příkazová řádka není děsivá – je to vlastně jako mít přímou konverzaci s počítačem. Myslete na to jako na rozdíl mezi objednávkou jídla přes hezkou aplikaci s obrázky a menu (což je fajn a snadné) versus osobní návštěvou vaší oblíbené místní restaurace, kde kuchař přesně ví, co máte rádi, a dokáže uvařit něco perfektního jen proto, že řeknete „překvap mě něčím úžasným“. -Příkazová řádka je místo, kam chodí vývojáři, aby se cítili jako opravdoví kouzelníci. Napíšete pár zdánlivě magických slov (dobře, jsou to jen příkazy, ale mají magický nádech!), stisknete enter a BUM – vytvořili jste celé struktury projektů, nainstalovali výkonné nástroje z celého světa, nebo nasadili svou aplikaci na internet, aby ji mohly vidět miliony lidí. Jakmile ochutnáte tu moc, je to opravdu návykové! +Na příkazovou řádku chodí vývojáři, aby se cítili jako úplní kouzelníci. Napíšete pár na první pohled magických slov (dobře, jsou to jen příkazy, ale působí magicky!), stisknete enter a HOP – vytvořili jste celé struktury projektů, nainstalovali výkonné nástroje z celého světa, nebo nasadili svou aplikaci na internet milionům lidí. Jakmile okusíte tu sílu, je to fakt návykové! **Proč se příkazová řádka stane vaším oblíbeným nástrojem:** -I když jsou grafická rozhraní skvělá pro mnoho úkolů, příkazová řádka vyniká v automatizaci, přesnosti a rychlosti. Mnoho vývojářských nástrojů funguje primárně přes příkazové rozhraní a naučit se je efektivně používat může výrazně zlepšit vaši produktivitu. +I když jsou grafická rozhraní skvělá pro mnoho úkolů, příkazová řádka vyniká v automatizaci, přesnosti a rychlosti. Mnoho vývojových nástrojů funguje hlavně přes příkazovou řádku a naučit se je efektivně používat může výrazně zlepšit vaši produktivitu. ```bash -# Krok 1: Vytvořte adresář projektu a přejděte do něj +# Krok 1: Vytvořte a přejděte do adresáře projektu mkdir my-awesome-website cd my-awesome-website ``` -**Co tento kód dělá:** -- **Vytvoří** nový adresář s názvem "my-awesome-website" pro váš projekt -- **Přejde** do nově vytvořeného adresáře, aby mohl začít pracovat +**Tento kód dělá toto:** +- **Vytvoří** novou složku nazvanou „my-awesome-website“ pro váš projekt +- **Přejde** do nově vytvořené složky, aby mohl začít pracovat ```bash # Krok 2: Inicializujte projekt s package.json @@ -614,10 +616,10 @@ npm install --save-dev @eslint/js ``` **Krok za krokem, co se děje:** -- **Inicializuje** nový Node.js projekt s výchozími nastaveními pomocí `npm init -y` +- **Inicializuje** nový projekt Node.js s výchozím nastavením pomocí `npm init -y` - **Nainstaluje** Vite jako moderní nástroj pro rychlý vývoj a produkční sestavení -- **Přidá** Prettier pro automatické formátování kódu a ESLint pro kontrolu kvality -- **Použije** přepínač `--save-dev`, aby tyto závislosti byly jen pro vývoj +- **Přidá** Prettier pro automatické formátování kódu a ESLint pro kontrolu kvality kódu +- **Používá** přepínač `--save-dev` k označení těchto závislostí jako pouze pro vývoj ```bash # Krok 3: Vytvořte strukturu projektu a soubory @@ -628,156 +630,156 @@ echo 'My Site

Hello Wo npx vite ``` -**Ve výše uvedeném jsme:** -- **Uspořádali** náš projekt vytvořením samostatných složek pro zdrojový kód a assety +**Výše uvedeným jsme:** +- **Uspořádali** náš projekt vytvořením samostatných složek pro zdrojový kód a zdroje - **Vygenerovali** základní HTML soubor s správnou strukturou dokumentu -- **Spustili** vývojový server Vite pro živé aktualizace a horkou náhradu modulů +- **Spustili** Vite vývojový server pro živé aktualizace a hot module replacement -#### Základní nástroje příkazové řádky pro webový vývoj +#### Nezbytné nástroje příkazové řádky pro webový vývoj | Nástroj | Účel | Proč ho potřebujete | -|------|---------|-----------------| -| **[Git](https://git-scm.com/)** | Správa verzí | Sledování změn, spolupráce s ostatními, zálohování práce | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & správa balíčků | Spouštění JavaScriptu mimo prohlížeče, instalace moderních vývojových nástrojů | -| **[Vite](https://vitejs.dev/)** | Nástroj pro sestavení & dev server | Bleskový vývoj s horkou náhradou modulů | -| **[ESLint](https://eslint.org/)** | Kvalita kódu | Automatické nalezení a oprava problémů v JavaScriptu | -| **[Prettier](https://prettier.io/)** | Formátování kódu | Udržování kódu konzistentně formátovaného a čitelného | +|---------|-------|--------------------| +| **[Git](https://git-scm.com/)** | Správa verzí | Sleduje změny, umožňuje spolupráci a zálohy práce | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime a správa balíčků | Spouští JavaScript mimo prohlížeče, instaluje moderní vývojové nástroje | +| **[Vite](https://vitejs.dev/)** | Nástroj pro sestavení a dev server | Bleskově rychlý vývoj s hot module replacement | +| **[ESLint](https://eslint.org/)** | Kvalita kódu | Automaticky najde a opraví problémy v JavaScriptu | +| **[Prettier](https://prettier.io/)** | Formátování kódu | Udržuje kód konzistentně formátovaný a přehledný | -#### Platformně specifické možnosti +#### Platformově specifické možnosti **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderní, plně vybavený terminál -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Výkonné skriptovací prostředí -- **[Příkazový řádek](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradiční Windows příkazová řádka +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Moderní a funkčně bohatý terminál +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Výkonné skriptovací prostředí +- **[Příkazový řádek](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Tradiční Windows příkazová řádka **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Vestavěná terminálová aplikace -- **[iTerm2](https://iterm2.com/)** - Vylepšený terminál s pokročilými funkcemi +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Vestavěná terminálová aplikace +- **[iTerm2](https://iterm2.com/)** – Vylepšený terminál s pokročilými funkcemi **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standardní linuxová shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Pokročilý terminálový emulátor +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standardní shell na Linuxu +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Pokročilý terminálový emulátor > 💻 = Předinstalováno v operačním systému -> 🎯 **Cesta učení**: Začněte se základními příkazy jako `cd` (změna adresáře), `ls` nebo `dir` (výpis souborů) a `mkdir` (vytvoření složky). Procvičujte moderní pracovní příkazy jako `npm install`, `git status` a `code .` (otevře současný adresář ve VS Code). Jakmile si zvyknete, přirozeně osvojíte více pokročilých příkazů a automatizačních technik. +> 🎯 **Cesta učení**: Začněte s základními příkazy jako `cd` (změna složky), `ls` nebo `dir` (výpis souborů) a `mkdir` (vytvoření složky). Procvičujte moderní pracovní příkazy jako `npm install`, `git status` a `code .` (otevření aktuální složky ve VS Code). Jakmile získáte jistotu, přirozeně se naučíte pokročilejší příkazy a automatizační techniky. -### Dokumentace: Váš vždy dostupný učitel a mentor +### Dokumentace: váš vždy dostupný učitel -Dobře, prozradím vám malý tajemství, které vám pomůže cítit se mnohem lépe jako začátečník: i ti nejzkušenější vývojáři stráví obrovskou část svého času čtením dokumentace. A není to proto, že by nevěděli, co dělají – to je vlastně známka moudrosti! +Dobře, prozradím vám malé tajemství, které vám pomůže cítit se mnohem lépe jako začátečník: i ti nejzkušenější vývojáři tráví obrovskou část svého času čtením dokumentace. A není to proto, že by nevěděli, co dělají – je to vlastně znamení moudrosti! -Představte si dokumentaci jako přístup k nejtrpělivějším, nejvzdělanějším učitelům světa, kteří jsou k dispozici 24/7. Zasekli jste se na problému ve 2 ráno? Dokumentace je tam s teplým virtuálním objetím a přesně vám podá odpověď, kterou potřebujete. Chcete se naučit o nějaké skvělé nové funkci, o které všichni mluví? Dokumentace to má připravené s příklady krok za krokem. Snažíte se pochopit, proč něco funguje tak, jak to funguje? Hádejte co – dokumentace je připravená vám to vysvětlit způsobem, který vám to konečně rozsvítí! +Považujte dokumentaci za přístup k nejtrpělivějším a nejzkušenějším učitelům na světě, kteří jsou k dispozici 24/7. Máte problém v 2 ráno? Dokumentace je tu s virtuálním teplým objetím a přesně tou odpovědí, kterou potřebujete. Chcete se naučit o nějaké skvělé nové funkci, o které všechny mluví? Dokumentace vás provede krok za krokem s příklady. Snažíte se pochopit, proč něco funguje tak, jak to funguje? Tušíte správně – dokumentace vám to vysvětlí způsobem, který vám konečně dá smysl! -Tady je něco, co úplně změnilo můj pohled: svět webového vývoje se hýbe neuvěřitelně rychle a nikdo (mám na mysli opravdu nikdo!) nemá všechno v paměti. Viděl jsem zkušené vývojáře s 15+ lety praxe, jak vyhledávají základní syntaxi, a víte co? To není trapné – to je chytré! Není to o perfektní paměti; je to o tom vědět, kde rychle najít spolehlivé odpovědi a umět je správně použít. +Něco, co mi úplně změnilo pohled: svět webového vývoje se pohybuje neuvěřitelně rychle a nikdo (myslím naprosto nikdo!) nemá všechno v paměti. Viděl jsem zkušené vývojáře s 15+ lety praxe hledat základní syntaxi, a víte co? Není to trapné – je to chytré! Nejde o perfektní paměť, ale o vědění, kde rychle najít spolehlivé odpovědi a jak je aplikovat. -**Tady se odehrává ta opravdová magie:** +**Tady se děje ta opravdová magie:** -Profesionální vývojáři tráví výraznou část svého času čtením dokumentace – ne proto, že by nevěděli, co dělají, ale protože oblast webového vývoje se tak rychle vyvíjí, že udržet krok vyžaduje neustálé učení. Skvělá dokumentace vám pomůže pochopit nejen *jak* něco používat, ale také *proč* a *kdy* to použít. +Profesionální vývojáři tráví významnou část svého času čtením dokumentace – ne proto, že nevědí, co dělají, ale protože svět webového vývoje se rychle mění a udržet krok znamená se nepřetržitě učit. Skvělá dokumentace vám pomůže pochopit nejen *jak* něco používat, ale *proč* a *kdy* to použít. #### Základní zdroje dokumentace **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Zlatý standard dokumentace webových technologií -- Obsáhlé průvodce pro HTML, CSS a JavaScript -- Zahrnuje informace o kompatibilitě prohlížečů -- Obsahuje praktické příklady a interaktivní ukázky +- Zlatý standard pro dokumentaci webových technologií +- Komplexní návody pro HTML, CSS a JavaScript +- Obsahuje informace o kompatibilitě v prohlížečích +- Nabízí praktické příklady a interaktivní ukázky -**[Web.dev](https://web.dev)** (od Google) -- Moderní doporučené postupy ve webovém vývoji +**[Web.dev](https://web.dev)** (Google) +- Nejlepší moderní praktiky webového vývoje - Průvodce optimalizací výkonu - Principy přístupnosti a inkluzivního designu - Případové studie z reálných projektů **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Vývojářské zdroje pro prohlížeč Edge -- Průvodce pro progresivní webové aplikace -- Přehled multiplatformního vývoje +- Zdroje pro vývoj v prohlížeči Edge +- Průvodci pro progresivní webové aplikace +- Pohledy na multiplatformní vývoj **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturované výukové plány -- Videokurzy od expertů z oboru -- Praktické cvičení s kódováním +- Strukturované kurikulum +- Video kurzy od odborníků z praxe +- Praktická cvičení s kódováním -> 📚 **Strategie studia**: Nesnažte se dokumentaci memorovat – místo toho se naučte, jak ji efektivně procházet. Přidejte si do záložek často používané reference a trénujte využívání vyhledávání pro rychlé nalezení konkrétních informací. +> 📚 **Studijní strategie**: Nesnažte se dokumentaci memorovat – místo toho se naučte, jak se v ní efektivně orientovat. Přidejte si do záložek často používané odkazy a procvičujte, jak používat vyhledávání k rychlému nalezení konkrétních informací. -### 🔧 **Otestujte své mistrovství s nástroji: Co na vás nejvíc zapůsobilo?** +### 🔧 **Ověření ovládání nástrojů: Co na vás nejvíc zapůsobilo?** -**Zastavte se na chvíli a zamyslete se:** -- Který nástroj si chcete vyzkoušet jako první? (Žádná špatná odpověď!) -- Stále je pro vás příkazová řádka zastrašující nebo vás to láká ji poznat? -- Dokážete si představit, že byste používali nástroje pro vývojáře v prohlížeči k nahlédnutí pod pokličku svých oblíbených webů? +**Chvilku se zamyslete:** +- Který nástroj chcete zkusit jako první? (Špatná odpověď neexistuje!) +- Stále je pro vás příkazová řádka děsivá, nebo vás zajímá? +- Dokážete si představit, že použijete DevTools prohlížeče a nahlédnete pod pokličku svých oblíbených webů? ```mermaid pie title "Čas vývojáře strávený s nástroji" - "Kódový editor" : 40 + "Editor kódu" : 40 "Testování v prohlížeči" : 25 "Příkazový řádek" : 15 "Čtení dokumentace" : 15 "Ladění" : 5 ``` -> **Zajímavost**: Většina vývojářů tráví asi 40 % času v editoru kódu, ale všimněte si, kolik času jde na testování, učení a řešení problémů. Programování není jen psaní kódu – je to vytváření zážitků! +> **Zajímavost**: Většina vývojářů tráví asi 40 % času ve svém kódovacím editoru, ale všimněte si, kolik času jde na testování, učení a řešení problémů. Programování není jen psaní kódu – je to tvorba zážitků! -✅ **K zamyšlení**: Tady je něco zajímavého k přemýšlení – jak myslíte, že se nástroje pro tvorbu webů (vývoj) liší od nástrojů pro návrh vzhledu (design)? Je to jako rozdíl mezi architektem, který navrhuje krásný dům, a stavebním dodavatelem, který ho skutečně postaví. Obě role jsou klíčové, ale vyžadují odlišnou sadu nástrojů! Takové myšlení vám opravdu pomůže vidět širší obraz, jak weby vznikají. +✅ **Zamyslete se**: Tady je zajímavá otázka – jak si myslíte, že se nástroje pro tvorbu webů (vývoj) liší od nástrojů na návrh jejich vzhledu (design)? Je to jako rozdíl mezi architektem, který navrhuje krásný dům, a dodavatelem, který ho skutečně staví. Oba jsou klíčoví, ale potřebují odlišné nástroje! Takové uvažování vám opravdu pomůže vidět širší obraz, jak weby vznikají. ## Výzva GitHub Copilot Agenta 🚀 Použijte režim Agenta k dokončení následující výzvy: -**Popis:** Prozkoumejte funkce moderního kódovacího editoru nebo IDE a ukažte, jak může zlepšit váš pracovní tok jako webový vývojář. +**Popis:** Prozkoumejte funkce moderního kódovacího editoru nebo IDE a ukažte, jak může zlepšit váš pracovní postup jako webového vývojáře. -**Zadání:** Vyberte si kódovací editor nebo IDE (například Visual Studio Code, WebStorm nebo cloudové IDE). Vyjmenujte tři funkce nebo rozšíření, které vám pomáhají psát, ladit nebo udržovat kód efektivněji. U každé krátce vysvětlete, jak zlepšuje váš pracovní proces. +**Zadání:** Vyberte si kódovací editor nebo IDE (např. Visual Studio Code, WebStorm nebo cloudové IDE). Uveďte tři funkce nebo rozšíření, které vám pomáhají efektivněji psát, ladit nebo udržovat kód. U každé krátce vysvětlete, jak vaši práci zlepšuje. --- ## 🚀 Výzva -**Tak dobře, detektive, jsi připraven na svůj první případ?** +**Tak šéfe, připraven na svůj první případ?** -Teď když máš tento skvělý základ, čeká tě dobrodružství, které ti pomůže vidět, jak neuvěřitelně různorodý a fascinující je svět programování. A poslouchej – není to o psaní kódu, takže žádný tlak! Představ si sám sebe jako detektiva programovacích jazyků na svém úplně prvním vzrušujícím případě! +Teď, když máte skvělé základy, mám pro vás dobrodružství, které vám pomůže vidět, jak neuvěřitelně rozmanitý a fascinující je svět programování. A pozor – tady nejde o psaní kódu, takže netlačte na pilu! Považujte se za detektiva programovacích jazyků na vašem úplně prvním vzrušujícím případu! -**Tvůj úkol, pokud se rozhodneš ho přijmout:** -1. **Staň se objevitelem jazyků**: Vyber tři programovací jazyky z úplně odlišných světů – třeba jeden pro tvorbu webů, jeden pro mobilní aplikace a jeden pro vědecká data. Najdi příklady stejného jednoduchého úkolu napsaného v každém jazyce. Slibuju, že tě překvapí, jak odlišně mohou vypadat, i když dělají úplně to samé! +**Vaše mise, pokud ji přijmete:** +1. **Staňte se průzkumníkem jazyků**: Vyberte tři programovací jazyky z úplně jiných světů – třeba jeden pro tvorbu webů, jeden pro mobilní aplikace a jeden pro vědecké zpracování dat. Najděte příklady stejného jednoduchého úkolu, napsané v každém jazyce. Slíbím vám, že budete naprosto ohromeni tím, jak mohou vypadat rozdílně, i když dělají úplně tu samou věc! -2. **Získej jejich příběhy vzniku**: Co dělá každý jazyk výjimečným? Tady je zajímavý fakt – každý programovací jazyk vznikl, protože někdo řekl: „Víš co? Musí existovat lepší způsob, jak vyřešit tento konkrétní problém.“ Můžeš zjistit, jaké problémy to byly? Některé z těch příběhů jsou opravdu fascinující! +2. **Objevte jejich příběhy vzniku**: Co dělá každý jazyk výjimečným? Tady je zajímavost – každý programovací jazyk vznikl, protože někdo řekl: „Víš co? Musí existovat lepší způsob, jak vyřešit tenhle konkrétní problém.“ Dokážete zjistit, jaké problémy to byly? Některé příběhy jsou opravdu fascinující! -3. **Poznej komunity**: Podívej se, jak vstřícná a zapálená je komunita kolem každého jazyka. Některé mají miliony vývojářů sdílejících znalosti a pomáhajících si, jiné jsou menší, ale neskutečně soudržné a podporující. Budeš rád vidět, jaké osobnosti tyto komunity mají! +3. **Poznejte komunity**: Prozkoumejte, jak vstřícná a zanícená je komunita každého jazyka. Některé mají miliony vývojářů, kteří si sdílejí znalosti a pomáhají si, jiné jsou menší, ale neuvěřitelně soudržné a podporující. Určitě vás nadchne, jaké různé osobnosti tyto komunity mají! -4. **Řiď se svým instinktem**: Který jazyk ti teď přijde nejsnazší? Neřeš, že bys měl udělat „perfektní“ volbu – jen naslouchej svému pocitu! Opravdu neexistuje špatná odpověď a vždy můžeš později prozkoumat další. +4. **Řiďte se svým instinktem**: Který jazyk vám teď připadá nejpřístupnější? Netrapte se tím, abyste vybrali „perfektní“ jazyk – prostě poslouchejte svůj vnitřní pocit! Není tady špatná volba a vždy můžete později vyzkoumat další. -**Bonusová detektivní práce**: Podívej se, které hlavní weby nebo aplikace jsou postavené s použitím každého jazyka. Zaručuji ti, že budeš šokovaný, až zjistíš, co pohání Instagram, Netflix nebo tu mobilní hru, kterou nemůžeš přestat hrát! +**Bonusová detektivní práce**: Zapátrejte, které velké weby nebo aplikace jsou postavené v každém z těchto jazyků. Zaručuji, že budete šokováni, co pohání Instagram, Netflix nebo tu mobilní hru, kterou nemůžete přestat hrát! -> 💡 **Pamatuj**: Dnes se nesnažíš stát expertem na žádný z těchto jazyků. Jen si pořádně prohlížíš sousedství, než se rozhodneš, kde chceš zakotvit. Dej si na čas, bav se a nech svou zvědavost vést! +> 💡 **Pamatujte**: Dnes se nesnažíte stát expertem na žádný z těchto jazyků. Jen se seznamujete s oblastí, než si vyberete, kde chcete začít. Dejte si na čas, užijte si to a nechte se vést zvědavostí! -## Oslavme, co jsi objevil! +## Oslavme, co jste objevili! -Páni, dnes jsi nasál tolik neuvěřitelných informací! Opravdu se těším, kolik toho z téhle úžasné cesty ti zůstalo. A pamatuj – není to test, kde musíš být perfektní. Je to spíš oslava všeho skvělého, co ses o tomto fascinujícím světě dozvěděl, do kterého se brzy ponoříš! +Ty jo, dnes jste nasáli tolik neuvěřitelných informací! Opravdu mě těší, kolik z té skvělé cesty vám zůstalo v paměti. A pamatujte – není to test, kde musíte mít vše perfektní. Je to oslava všeho toho úžasného, co jste se o tomto fascinujícím světě dozvěděli! -[Vyzkoušej si kvíz po lekci](https://ff-quizzes.netlify.app/web/) -## Revize a Samostudium +[Vyzkoušejte test po lekci](https://ff-quizzes.netlify.app/web/) -**Vezmi si čas na prozkoumání a bav se tím!** +## Přehled & Samostudium -Dnes jsi zvládl spoustu věcí, a to je něco, na co můžeš být hrdý! Teď přichází ta zábavná část – prozkoumání témat, která vzbudila tvou zvědavost. Pamatuj, že to není domácí úkol – je to dobrodružství! +**Vezměte si čas na objevování a zábavu!** +Pokryli jste dnes hodně témat, a to je něco, na co můžete být hrdí! Teď přichází ta zábavná část – prozkoumávání témat, která ve vás vzbudila zvědavost. Nezapomeňte, že to není domácí úkol – je to dobrodružství! -**Ponoř se hlouběji do toho, co tě nadchlo:** +**Ponořte se hlouběji do toho, co vás nadchlo:** -**Zapoj se prakticky do programovacích jazyků:** -- Navštiv oficiální webové stránky 2-3 jazyků, které tě zaujaly. Každý má svou osobnost a příběh! -- Vyzkoušej si online „coding playgroundy“ jako [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), nebo [Replit](https://replit.com/). Neboj se experimentovat – nic nezničíš! -- Přečti si, jak tvůj oblíbený jazyk vznikl. Vážně, některé z těchto příběhů jsou fascinující a pomohou ti pochopit, proč jazyky fungují tak, jak fungují. +**Zapojte se do programovacích jazyků:** +- Navštivte oficiální webové stránky 2-3 jazyků, které vám padly do oka. Každý z nich má svou osobnost a příběh! +- Vyzkoušejte si nějaká online programovací hřiště jako [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) nebo [Replit](https://replit.com/). Nebojte se experimentovat – nic tím nezlomíte! +- Přečtěte si, jak váš oblíbený jazyk vznikl. Některé z těchto příběhů jsou opravdu fascinující a pomohou vám pochopit, proč jazyky fungují tak, jak fungují. -**Seznam se se svými novými nástroji:** -- Stáhni si Visual Studio Code, pokud ho ještě nemáš – je zdarma a bude se ti líbit! -- Strav pár minut prohlížením tržiště rozšíření. Je to jako obchod s aplikacemi pro tvůj kódovací editor! -- Otevři vývojářské nástroje v prohlížeči a jen tak klikaj po webu. Nemusíš tomu všemu rozumět – jen si zvykej, co tam je. +**Zvykněte si na své nové nástroje:** +- Stáhněte si Visual Studio Code, pokud ho ještě nemáte – je zdarma a budete ho milovat! +- Stravte pár minut prohlížením tržiště rozšíření. Je to jako obchod s aplikacemi pro váš kódový editor! +- Otevřete Vývojářské nástroje ve svém prohlížeči a jen si klikejte kolem. Nemusíte rozumět všemu – stačí, když si zvyknete, co tam je. -**Připoj se ke komunitě:** -- Sleduj vývojářské komunity na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), nebo [GitHub](https://github.com/). Programátorská komunita je neuvěřitelně vstřícná k nováčkům! -- Sleduj na YouTube videa přátelská k začátečníkům. Je tam spousta skvělých tvůrců, kteří si pamatují, jaké to je začínat. -- Zvaž připojení k místním setkáním nebo online komunitám. Věř mi, vývojáři rádi pomáhají nováčkům! +**Připojte se ke komunitě:** +- Sledujte některé vývojářské komunity na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) nebo [GitHub](https://github.com/). Programátorská komunita je nesmírně vstřícná k nováčkům! +- Podívejte se na začátečnická videa o programování na YouTube. Je tam spousta skvělých tvůrců, kteří si pamatují, jaké to je začínat. +- Zvažte připojení k místním setkáním nebo online komunitám. Věřte mi, vývojáři rádi pomáhají nováčkům! -> 🎯 **Poslouchej, co ti chci říct**: Nečeká se od tebe, že se ze dne na den staneš kódovacím mágem! Právě teď se jen seznamuješ s tím úžasným světem, jehož součástí se chystáš stát. Vezmi si čas, užij si cestu a pamatuj – každý jeden vývojář, kterého obdivuješ, jednou seděl právě tam, kde jsi teď, cítil se nadšený a možná trochu zahlcený. To je úplně normální a znamená to, že to děláš správně! +> 🎯 **Poslouchejte, co chci, abyste si zapamatovali**: Neočekává se, že se z vás přes noc stane programovací čaroděj! Teď jen poznáváte tento úžasný nový svět, jehož součástí se brzy stanete. Vezměte si čas, užívejte si cestu a pamatujte – každý programátor, kterého obdivujete, seděl přesně tam, kde jste teď vy, plný nadšení a možná trochu zahlcený. To je naprosto normální a znamená to, že to děláte správně! @@ -785,70 +787,70 @@ Dnes jsi zvládl spoustu věcí, a to je něco, na co můžeš být hrdý! Teď [Reading the Docs](assignment.md) -> 💡 **Malé popostrčení pro tvé zadání**: Určitě bych rád viděl, jak prozkoumáš nějaké nástroje, které jsme zatím neprobírali! Vynech editory, prohlížeče a příkazové nástroje, o kterých jsme už mluvili – existuje celý tento neuvěřitelný vesmír skvělých vývojářských nástrojů, které čekají na objevení. Hledej takové, které jsou aktivně udržované a mají živé, nápomocné komunity (ty mají obvykle nejlepší tutoriály a nejpřátelštější lidi, když se zasekneš a potřebuješ pomocnou ruku). +> 💡 **Malé nakopnutí k vašemu úkolu**: Rád(a) bych vás viděl(a), jak zkoumáte nějaké nástroje, o kterých jsme ještě nemluvili! Přeskočte editory, prohlížeče a nástroje příkazové řádky, které jsme už probírali – je tu celý neuvěřitelný svět skvělých vývojářských nástrojů, které čekají na to, až je objevíte. Hledejte takové, které jsou aktivně udržované a mají živé, nápomocné komunity (ty obvykle mají nejlepší návody a nejvíc podpůrných lidí, pokud se zaseknete a budete potřebovat přátelskou pomoc). --- -## 🚀 Tvůj časový plán programátorské cesty - -### ⚡ **Co můžeš udělat během příštích 5 minut** -- [ ] Přidej si do záložek 2-3 weby programovacích jazyků, které tě zaujaly -- [ ] Stáhni si Visual Studio Code, pokud ho ještě nemáš -- [ ] Otevři ve svém prohlížeči DevTools (F12) a klikni si na jakémkoli webu -- [ ] Připoj se do jedné programátorské komunity (Dev.to, Reddit r/webdev, nebo Stack Overflow) - -### ⏰ **Co můžeš stihnout během hodiny** -- [ ] Dokonči kvíz po lekci a zamysli se nad svými odpověďmi -- [ ] Nastav VS Code s rozšířením GitHub Copilot -- [ ] Vyzkoušej příklad „Hello World“ ve 2 různých programovacích jazycích online -- [ ] Podívej se na video „Den v životě vývojáře“ na YouTube -- [ ] Začni s detektivní prací na svém zvoleném programovacím jazyku (z výzvy) - -### 📅 **Týdenní dobrodružství** -- [ ] Dokonči zadání a prozkoumej 3 nové vývojářské nástroje -- [ ] Sleduj 5 vývojářů nebo programátorských účtů na sociálních sítích -- [ ] Zkus postavit něco malého v CodePen nebo Replit (třeba jen „Hello, [Tvé jméno]!“) -- [ ] Přečti si jeden blogový příspěvek vývojáře o jeho kódovací cestě -- [ ] Připoj se k virtuálnímu setkání nebo se podívej na programátorskou přednášku -- [ ] Začni se učit svůj zvolený jazyk podle online tutoriálů - -### 🗓️ **Měsíční proměna** -- [ ] Postav svůj první malý projekt (i jednoduchá webová stránka se počítá!) -- [ ] Přispěj do open-source projektu (začni opravami dokumentace) -- [ ] Mentoruj někoho, kdo právě začíná s programováním -- [ ] Vytvoř si webovou stránku s portfolio vývojáře -- [ ] Spoj se s místními komunitami vývojářů nebo studijními skupinami -- [ ] Začni plánovat svůj další učební milník - -### 🎯 **Závěrečné zhodnocení** - -**Než budeš pokračovat dál, oslav tohle:** -- Co tě dnes na programování nejvíc nadchlo? -- Který nástroj nebo koncept chceš prozkoumat jako první? -- Jak se cítíš ohledně začátku této programátorské cesty? -- Jakou jednu otázku bys chtěl teď položit vývojáři? +## 🚀 Váš časový plán programátorské cesty + +### ⚡ **Co můžete udělat během příštích 5 minut** +- [ ] Přidejte si do záložek 2-3 webové stránky programovacích jazyků, které vás zaujaly +- [ ] Stáhněte si Visual Studio Code, pokud ho ještě nemáte +- [ ] Otevřete si Vývojářské nástroje prohlížeče (F12) a klikejte na jakékoliv webové stránce +- [ ] Připojte se k jedné programátorské komunitě (Dev.to, Reddit r/webdev nebo Stack Overflow) + +### ⏰ **Co můžete stihnout během této hodiny** +- [ ] Dokončete kvíz po lekci a zamyslete se nad svými odpověďmi +- [ ] Nastavte VS Code s rozšířením GitHub Copilot +- [ ] Vyzkoušejte si "Hello World" v 2 různých programovacích jazycích online +- [ ] Podívejte se na video „Den v životě vývojáře“ na YouTube +- [ ] Začněte pátrat po informacích o programovacích jazycích (z výzvy) + +### 📅 **Vaše týdenní dobrodružství** +- [ ] Splňte úkol a prozkoumejte 3 nové vývojářské nástroje +- [ ] Sledujte 5 vývojářů nebo programátorských účtů na sociálních sítích +- [ ] Zkuste postavit něco malého v CodePen nebo Replit (i jen „Hello, [Vaše jméno]!“) +- [ ] Přečtěte si jeden blogový příspěvek od vývojáře o jeho programátorské cestě +- [ ] Připojte se k virtuálnímu setkání nebo shlédněte přednášku o programování +- [ ] Začněte se učit vybraný jazyk pomocí online tutoriálů + +### 🗓️ **Vaše měsíční proměna** +- [ ] Postavte svůj první malý projekt (i jednoduchá webová stránka se počítá!) +- [ ] Přispějte k open-source projektu (začněte opravami dokumentace) +- [ ] Mentorujte někoho, kdo právě začíná svou programátorskou cestu +- [ ] Vytvořte si svůj vývojářský portfolio web +- [ ] Spojte se s místními vývojářskými komunitami nebo studijními skupinami +- [ ] Začněte plánovat svůj další učební milník + +### 🎯 **Konečné reflexní tachování** + +**Než půjdete dál, na chvíli se zastavte a oslavte:** +- Co vás dnes na programování nejvíc nadchlo? +- Který nástroj nebo koncept chcete prozkoumat jako první? +- Jak se cítíte při začátku této programátorské cesty? +- Jakou otázku byste chtěli teď položit nějakému vývojáři? ```mermaid journey - title Vaše cesta k budování sebedůvěry + title Tvoje cesta budování sebevědomí section Dnes - Curious: 3: Vy - Overwhelmed: 4: Vy - Excited: 5: Vy + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You section Tento týden - Exploring: 4: Vy - Learning: 5: Vy - Connecting: 4: Vy + Exploring: 4: You + Learning: 5: You + Connecting: 4: You section Příští měsíc - Building: 5: Vy - Confident: 5: Vy - Helping Others: 5: Vy + Building: 5: You + Confident: 5: You + Helping Others: 5: You ``` -> 🌟 **Pamatuj**: Každý expert byl jednou začátečník. Každý zkušený vývojář se kdysi cítil přesně tak, jako ty teď – nadšený, možná trochu zahlcený a rozhodně zvědavý na možnosti. Jsi v úžasné společnosti a tahle cesta bude neuvěřitelná. Vítej ve skvělém světě programování! 🎉 +> 🌟 **Pamatujte**: Každý expert byl jednou začátečník. Každý zkušený vývojář se někdy cítil přesně tak, jak se cítíte vy teď – nadšeně, možná trochu zahlceně a určitě zvědavě, co je možné. Jste v úžasné společnosti a tato cesta bude neuvěřitelná. Vítejte ve skvělém světě programování! 🎉 --- -**Prohlášení o vyloučení odpovědnosti**: -Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Nejsme odpovědni za jakákoliv nedorozumění nebo špatné interpretace vzniklé z použití tohoto překladu. +**Vyloučení odpovědnosti**: +Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože usilujeme o přesnost, mějte na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Za jakékoliv nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu neneseme odpovědnost. \ No newline at end of file diff --git a/translations/cs/AGENTS.md b/translations/cs/AGENTS.md index e099124ba..2b5e56fe5 100644 --- a/translations/cs/AGENTS.md +++ b/translations/cs/AGENTS.md @@ -2,29 +2,29 @@ ## Přehled projektu -Toto je vzdělávací repozitář učebního plánu pro výuku základů webového vývoje pro začátečníky. Kurikulum je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, obsahující 24 praktických lekcí pokrývajících JavaScript, CSS a HTML. +Toto je vzdělávací repozitář pro výuku základů webového vývoje pro začátečníky. Kurikul je komplexní 12týdenní kurz vyvinutý Microsoft Cloud Advocates, obsahující 24 praktických lekcí pokrývajících JavaScript, CSS a HTML. -### Klíčové komponenty +### Klíčové prvky -- **Vzdělávací obsah**: 24 strukturovaných lekcí uspořádaných do modulů založených na projektech -- **Praktické projekty**: Terrarium, Hra na psaní, Rozšíření prohlížeče, Kosmická hra, Bankovní aplikace, Kódovací editor a AI chat asistent -- **Interaktivní kvízy**: 48 kvízů po 3 otázkách (před a po lekci) -- **Podpora vícejazyčnosti**: Automatizované překlady do více než 50 jazyků přes GitHub Actions +- **Vzdělávací obsah**: 24 strukturovaných lekcí organizovaných do modulů založených na projektech +- **Praktické projekty**: Terrárium, Hra na psaní, Rozšíření prohlížeče, Hra ve vesmíru, Bankovní aplikace, Editor kódu a AI chatovací asistent +- **Interaktivní kvízy**: 48 kvízů se 3 otázkami každý (hodnocení před a po lekci) +- **Podpora více jazyků**: Automatické překlady pro více než 50 jazyků pomocí GitHub Actions - **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pro AI projekty) ### Architektura -- Vzdělávací repozitář s strukturou založenou na lekcích -- Každá složka lekce obsahuje README, ukázky kódu a řešení -- Samostatné projekty v oddělených adresářích (quiz-app, různé projekty lekcí) +- Vzdělávací repozitář s lekční strukturou +- Každá složka lekce obsahuje README, příklady kódu a řešení +- Samostatné projekty v oddělených adresářích (quiz-app, různé lekční projekty) - Překladový systém využívající GitHub Actions (co-op-translator) -- Dokumentace poskytovaná přes Docsify a dostupná jako PDF +- Dokumentace podávána přes Docsify a dostupná jako PDF ## Příkazy pro nastavení -Tento repozitář je určen především ke konzumaci vzdělávacího obsahu. Pro práci s konkrétními projekty: +Tento repozitář je primárně určen pro konzumaci vzdělávacího obsahu. Pro práci s konkrétními projekty: -### Hlavní nastavení repozitáře +### Nastavení hlavního repozitáře ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -41,7 +41,7 @@ npm run build # Sestavit pro produkci npm run lint # Spustit ESLint ``` -### Bankovní projekt API (Node.js + Express) +### Bankovní API projekt (Node.js + Express) ```bash cd 7-bank-project/api @@ -56,10 +56,10 @@ npm run format # Formátovat pomocí Prettier ```bash cd 5-browser-extension/solution npm install -# Postupujte podle specifických pokynů pro načítání rozšíření v prohlížeči +# Postupujte podle pokynů pro načítání rozšíření specifických pro prohlížeč ``` -### Projekty Kosmické hry +### Projekty hry ve vesmíru ```bash cd 6-space-game/solution @@ -67,7 +67,7 @@ npm install # Otevřete index.html v prohlížeči nebo použijte Live Server ``` -### Chat projekt (Python backend) +### Chatovací projekt (Python backend) ```bash cd 9-chat-project/solution/backend/python @@ -80,183 +80,183 @@ python api.py ### Pro přispěvatele obsahu -1. **Vytvořte fork** repozitáře na svém GitHub účtu +1. **Rozvětvěte (fork) repozitář** do svého GitHub účtu 2. **Naklonujte svůj fork** lokálně 3. **Vytvořte novou větev** pro své změny -4. Proveďte změny v obsahu lekcí nebo ukázkách kódu -5. Otestujte případné změny kódu v příslušných adresářích projeků -6. Odešlete pull requesty podle pravidel přispívání +4. Proveďte změny v obsahu lekce nebo příkladech kódu +5. Testujte kódové změny v příslušných projektových složkách +6. Podávejte pull requesty podle pokynů pro přispění ### Pro studenty -1. Vytvořte fork nebo naklonujte repozitář -2. Procházejte adresáře lekcí postupně -3. Čtěte README soubory každé lekce -4. Vyplňte kvízy před lekcí na https://ff-quizzes.netlify.app/web/ -5. Propracujte se ukázkami kódu v adresářích lekcí +1. Rozvětvěte nebo naklonujte repozitář +2. Procházejte lekční složky postupně +3. Čtěte README soubory pro každou lekci +4. Dokončete předběžné kvízy na https://ff-quizzes.netlify.app/web/ +5. Procházejte příklady kódu v lekčních složkách 6. Dokončete úkoly a výzvy -7. Udělejte kvízy po lekci +7. Absolvujte kvízy po lekci ### Živý vývoj -- **Dokumentace**: Spusťte `docsify serve` v kořenovém adresáři (port 3000) -- **Quiz App**: Spusťte `npm run dev` v adresáři quiz-app -- **Projekty**: Používejte VS Code Live Server rozšíření pro HTML projekty -- **API projekty**: Spusťte `npm start` v odpovídajících API adresářích +- **Dokumentace**: Spusťte `docsify serve` v rootu (port 3000) +- **Quiz App**: Spusťte `npm run dev` ve složce quiz-app +- **Projekty**: Použijte VS Code Live Server rozšíření pro HTML projekty +- **API projekty**: Spusťte `npm start` v příslušných API složkách -## Instrukce pro testování +## Instrukce testování ### Testování Quiz App ```bash cd quiz-app npm run lint # Zkontrolujte problémy se stylem kódu -npm run build # Ověřte úspěšnost sestavení +npm run build # Ověřte, že kompilace proběhla úspěšně ``` ### Testování Bank API ```bash cd 7-bank-project/api -npm run lint # Zkontrolujte problémy se stylem kódu +npm run lint # Zkontrolujte problémy s stylem kódu node server.js # Ověřte, že server startuje bez chyb ``` ### Obecný přístup k testování -- Jedná se o vzdělávací repozitář bez rozsáhlých automatizovaných testů +- Toto je vzdělávací repozitář bez rozsáhlých automatizovaných testů - Manuální testování se zaměřuje na: - - Ukázky kódu bez chybového běhu - - Odkazy v dokumentaci fungují správně - - Projekty se úspěšně sestaví - - Ukázky dodržují osvědčené postupy + - Příklady kódu bez chyb při spuštění + - Funkčnost odkazů v dokumentaci + - Úspěšné sestavení projektů + - Příklady odpovídající nejlepší praxi -### Kontroly před odevzdáním +### Kontroly před odesláním -- Spusťte `npm run lint` v adresářích s package.json -- Ověřte validitu markdown odkazů -- Testujte ukázky kódu v prohlížeči nebo Node.js +- Spusťte `npm run lint` ve složkách s package.json +- Ověřte platnost odkazů v markdownu +- Testujte příklady kódu v prohlížeči nebo Node.js - Zkontrolujte, že překlady zachovávají správnou strukturu -## Pravidla stylu kódu +## Zásady stylu kódu ### JavaScript -- Používejte moderní ES6+ syntaxi -- Řiďte se standardními ESLint konfiguracemi v projektech -- Používejte popisné názvy proměnných a funkcí pro snadné pochopení +- Používejte moderní syntaxi ES6+ +- Dodržujte standardní ESLint konfigurace v projektech +- Používejte smysluplné názvy proměnných a funkcí pro vzdělávací přehlednost - Přidávejte komentáře vysvětlující koncepty pro studenty - Formátujte pomocí Prettier tam, kde je nastaveno ### HTML/CSS -- Používejte sémantické HTML5 elementy +- Sémantické HTML5 elementy - Principy responzivního designu - Jasné konvence pojmenování tříd - Komentáře vysvětlující CSS techniky pro studenty ### Python -- Dodržujte PEP 8 styl -- Jasné, vzdělávací ukázky kódu -- Používejte typové hinty tam, kde je to užitečné pro učení +- Dodržování PEP 8 stylu +- Jasné, vzdělávací příklady kódu +- Typové anotace tam, kde je to pro učení užitečné ### Markdown dokumentace - Jasná hierarchie nadpisů -- Kódové bloky s označením jazyka -- Odkazy na doplňková zdroje -- Snímky obrazovek a obrázky v adresářích `images/` -- Alt text pro obrázky pro přístupnost +- Kódové bloky s určením jazyka +- Odkazy na další zdroje +- Snímky obrazovky a obrázky ve složkách `images/` +- Alt texty pro obrázky pro přístupnost ### Organizace souborů -- Lekce číslovány sekvenčně (1-getting-started-lessons, 2-js-basics atd.) -- Každý projekt obsahuje adresáře `solution/` a často `start/` nebo `your-work/` -- Obrázky ukládány do specifických `images/` složek lekcí -- Překlady v adresářové struktuře `translations/{language-code}/` +- Lekce číslovány sekvenčně (1-getting-started-lessons, 2-js-basics, atd.) +- Každý projekt má složky `solution/` a často `start/` nebo `your-work/` +- Obrázky uložené v lekčně specifických složkách `images/` +- Překlady ve struktuře `translations/{jazykový-kód}/` ## Sestavení a nasazení ### Nasazení Quiz App (Azure Static Web Apps) -Quiz-app je nakonfigurována pro nasazení v Azure Static Web Apps: +Quiz-app je konfigurován pro nasazení na Azure Static Web Apps: ```bash cd quiz-app npm run build # Vytváří složku dist/ -# Nasazuje pomocí workflow GitHub Actions při push do hlavní větve +# Nasazuje pomocí GitHub Actions workflow při pushi do main ``` Konfigurace Azure Static Web Apps: - **Umístění aplikace**: `/quiz-app` -- **Výstupní umístění**: `dist` +- **Umístění výstupu**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Generování PDF dokumentace ```bash npm install # Nainstalujte docsify-to-pdf -npm run convert # Vytvořit PDF z docs +npm run convert # Vygenerujte PDF z docs ``` -### Dokumentace Docsify +### Docsify dokumentace ```bash npm install -g docsify-cli # Nainstalujte Docsify globálně -docsify serve # Spusťte na localhost:3000 +docsify serve # Spustit na localhost:3000 ``` -### Projektově-specifické sestavení +### Sestavení specifická pro projekt -Každý projekt může mít vlastní proces sestavení: -- Vue projekty: `npm run build` vytvoří produkční balíčky -- Statické projekty: Žádný build krok, soubory se přímo servírují +Každý projekt může mít vlastní build proces: +- Vue projekty: `npm run build` vytváří produkční balíčky +- Statické projekty: žádný build krok, soubory se podávají přímo -## Pravidla pro pull requesty +## Pokyny pro pull requesty ### Formát názvu -Používejte jasné, popisné názvy s označením oblasti změny: +Používejte jasné, popisné názvy uvádějící oblast změn: - `[Quiz-app] Přidat nový kvíz pro lekci X` -- `[Lesson-3] Opravit překlep v terrarium projektu` +- `[Lesson-3] Opravit překlep v projektu terrária` - `[Translation] Přidat španělský překlad pro lekci 5` -- `[Docs] Aktualizovat instalační instrukce` +- `[Docs] Aktualizovat instrukce pro nastavení` ### Povinné kontroly Před odesláním PR: 1. **Kvalita kódu**: - - Spusťte `npm run lint` v příslušných projektových složkách + - Spusťte `npm run lint` v ovlivněných projektových složkách - Opravte všechny lintovací chyby a varování 2. **Ověření sestavení**: - - Spusťte `npm run build` pokud je to relevantní - - Zajistěte, že nejsou žádné chyby sestavení + - Spusťte `npm run build`, pokud je relevantní + - Zajistěte, že nejsou chyby sestavení -3. **Validace odkazů**: +3. **Ověření odkazů**: - Otestujte všechny markdown odkazy - - Ověřte fungování odkazů na obrázky + - Ověřte fungování referencí obrázků -4. **Revize obsahu**: - - Korektura pravopisu a gramatiky - - Ověřte, že ukázky kódu jsou správné a vzdělávací - - Zkontrolujte, že překlady zachovávají původní význam +4. **Kontrola obsahu**: + - Korektury pravopisu a gramatiky + - Ověření správnosti a vzdělávací hodnoty příkladů kódu + - Ověření, že překlady zachovávají původní význam -### Požadavky na přispívání +### Požadavky na přispění -- Souhlas s Microsoft CLA (automatická kontrola při prvním PR) -- Dodržování [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Podrobné instrukce v [CONTRIBUTING.md](./CONTRIBUTING.md) -- Uvádějte čísla issues v popisu PR, pokud je to relevantní +- Souhlas se smlouvou Microsoft CLA (automatická kontrola při prvním PR) +- Dodržujte [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Viz [CONTRIBUTING.md](./CONTRIBUTING.md) pro podrobné pokyny +- V případě potřeby odkazujte čísla issue v popisu PR ### Proces revize -- PR kontrolují maintainers a komunita -- Priorita jasnost vzdělávacího obsahu -- Ukázky kódu by měly dodržovat současné nejlepší praktiky -- Překlady jsou kontrolovány na přesnost a kulturní vhodnost +- PR kontrolují správci a komunita +- Prioritou je vzdělávací srozumitelnost +- Příklady kódu by měly odpovídat aktuálním nejlepším praktikám +- Překlady se kontrolují z hlediska přesnosti a kulturní vhodnosti ## Překladový systém @@ -265,14 +265,14 @@ Před odesláním PR: - Používá GitHub Actions s workflow co-op-translator - Automaticky překládá do více než 50 jazyků - Zdrojové soubory v hlavních adresářích -- Přeložené soubory v adresářích `translations/{language-code}/` +- Přeložené soubory v adresářích `translations/{jazykový-kód}/` -### Přidávání ručních vylepšení překladů +### Přidávání manuálních úprav překladů -1. Najděte soubor v `translations/{language-code}/` -2. Proveďte úpravy při zachování struktury -3. Ujistěte se, že ukázky kódu zůstávají funkční -4. Otestujte lokalizovaný obsah kvízů +1. Najděte soubor v `translations/{jazykový-kód}/` +2. Proveďte úpravy s zachováním struktury +3. Ověřte, že příklady kódu zůstávají funkční +4. Testujte lokalizovaný obsah kvízů ### Metadata překladu @@ -291,54 +291,54 @@ CO_OP_TRANSLATOR_METADATA: ## Ladění a řešení problémů -### Časté problémy +### Běžné problémy -**Quiz aplikace nenaběhne**: +**Quiz app se nespustí**: - Zkontrolujte verzi Node.js (doporučeno v14+) -- Odstraňte `node_modules` a `package-lock.json`, spusťte `npm install` znovu +- Smažte `node_modules` a `package-lock.json`, spusťte znovu `npm install` - Zkontrolujte konflikty portů (výchozí: Vite používá port 5173) -**API server nenaběhne**: -- Ověřte verzi Node.js (minimálně node >=10) -- Zkontrolujte, zda port není obsazený -- Ujistěte se, že jsou nainstalované všechny závislosti příkazem `npm install` +**API server se nespustí**: +- Ověřte, že verze Node.js splňuje minimální požadavky (node >=10) +- Zkontrolujte, zda port není již obsazen +- Ujistěte se, že jsou nainstalovány všechny závislosti `npm install` -**Rozšíření prohlížeče se nenačítá**: +**Rozšíření prohlížeče se nenačte**: - Ověřte správné formátování manifest.json -- Kontrola chyb v konzoli prohlížeče -- Postupujte podle instrukcí specifických pro prohlížeč +- Zkontrolujte prohlížečovou konzoli na chyby +- Postupujte podle návodů k instalaci rozšíření specifických pro prohlížeč **Problémy s Python chat projektem**: -- Ujistěte se, že je nainstalován balíček OpenAI: `pip install openai` -- Ověřte, že je nastavena proměnná prostředí GITHUB_TOKEN -- Zkontrolujte oprávnění přístupu k GitHub modelům +- Ujistěte se, že balíček OpenAI je nainstalován: `pip install openai` +- Ověřte nastavení proměnné prostředí GITHUB_TOKEN +- Zkontrolujte oprávnění k přístupu k GitHub Models -**Docsify neservíruje dokumentaci**: -- Globálně nainstalujte docsify-cli: `npm install -g docsify-cli` -- Spusťte v kořenovém adresáři repozitáře -- Ověřte, že existuje `docs/_sidebar.md` +**Docsify neposkytuje dokumentaci**: +- Nainstalujte docsify-cli globálně: `npm install -g docsify-cli` +- Spusťte z kořenového adresáře repozitáře +- Ověřte existenci `docs/_sidebar.md` ### Tipy pro vývojové prostředí - Používejte VS Code s rozšířením Live Server pro HTML projekty -- Nainstalujte ESLint a Prettier rozšíření pro jednotné formátování -- K debugu JavaScriptu používejte DevTools v prohlížeči -- Pro Vue projekty nainstalujte Vue DevTools rozšíření prohlížeče +- Nainstalujte rozšíření ESLint a Prettier pro konzistentní formátování +- Použijte DevTools v prohlížeči pro debugování JavaScriptu +- Pro Vue projekty nainstalujte Vue DevTools rozšíření do prohlížeče ### Výkonové aspekty -- Velké množství přeložených souborů (50+ jazyků) znamená velké klony -- Použijte shallow clone, pokud pracujete pouze s obsahem: `git clone --depth 1` +- Velké množství překladových souborů (50+ jazyků) znamená velké klony +- Pro práci pouze s obsahem použijte shallow clone: `git clone --depth 1` - Při práci s anglickým obsahem vylučujte překlady z vyhledávání -- Procesy build mohou být při prvním spuštění pomalé (npm install, build Vite) +- První běh build procesů může být pomalý (npm install, Vite build) ## Bezpečnostní aspekty ### Proměnné prostředí -- API klíče nikdy neukládejte do repozitáře -- Používejte `.env` soubory (jsou uvedeny v `.gitignore`) -- Dokumentujte požadované proměnné prostředí v README projektů +- API klíče by se nikdy neměly commitovat do repozitáře +- Používejte `.env` soubory (již v `.gitignore`) +- Dokumentujte požadované proměnné prostředí v README projektech ### Python projekty @@ -346,35 +346,35 @@ CO_OP_TRANSLATOR_METADATA: - Udržujte závislosti aktuální - GitHub tokeny by měly mít minimální potřebná oprávnění -### Přístup k GitHub modelům +### Přístup k GitHub Models -- Vyžadovány personal access tokens (PAT) +- Pro GitHub Models jsou potřeba Personal Access Tokens (PAT) - Tokeny ukládejte jako proměnné prostředí -- Nikdy neukládejte tokeny ani přihlašovací údaje do repozitáře +- Nikdy necommitujte tokeny či přihlašovací údaje ## Další poznámky ### Cílová skupina -- Kompletní začátečníci ve webovém vývoji +- Úplní začátečníci ve webovém vývoji - Studenti a samouci -- Učitelé využívající kurikulum ve třídě -- Obsah navržen pro přístupnost a postupné budování dovedností +- Učitelé používající kurikulum ve třídách +- Obsah je navržen pro přístupnost a postupné rozvíjení dovedností ### Vzdělávací filozofie -- Projektově orientované učení +- Přístup založený na projektech - Časté ověřování znalostí (kvízy) -- Praktická cvičení v psaní kódu -- Reálné příklady použití -- Důraz na základy před frameworky +- Praktická cvičení kódování +- Příklady využití v reálném světě +- Zaměření na základy před frameworky ### Údržba repozitáře - Aktivní komunita studentů a přispěvatelů - Pravidelné aktualizace závislostí a obsahu -- Issues a diskuse sledovány maintainery -- Aktualizace překladů automatizované přes GitHub Actions +- Sledují se issues a diskuse správci +- Aktualizace překladů automatizovány přes GitHub Actions ### Související zdroje @@ -387,22 +387,22 @@ CO_OP_TRANSLATOR_METADATA: Pro podrobné instrukce k jednotlivým projektům viz README soubory v: - `quiz-app/README.md` - Vue 3 kvízová aplikace -- `7-bank-project/README.md` - Bankovní aplikace s autentizací +- `7-bank-project/README.md` - Bankovní aplikace s autentifikací - `5-browser-extension/README.md` - Vývoj rozšíření prohlížeče -- `6-space-game/README.md` - Vývoj hry založené na Canvas -- `9-chat-project/README.md` - AI chat asistent projekt +- `6-space-game/README.md` - Vývoj hry s využitím Canvas +- `9-chat-project/README.md` - Projekt AI chat asistenta -### Struktura Monorepo +### Struktura monorepa -Ačkoliv nejde o tradiční monorepo, tento repozitář obsahuje více nezávislých projektů: +I když se nejedná o tradiční monorepo, tento repozitář obsahuje více nezávislých projektů: - Každá lekce je samostatná - Projekty nesdílí závislosti -- Pracujte na jednotlivých projektech bez ovlivnění ostatních -- Naklonujte celý repozitář pro plný zážitek kurikula +- Pracujte na jednotlivých projektech, aniž byste ovlivnili ostatní +- Pro plný kurz si naklonujte celý repozitář --- -**Prohlášení o vyloučení odpovědnosti**: -Tento dokument byl přeložen pomocí služby automatického překladu [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. U kritických informací se doporučuje využít profesionální lidský překlad. Nejsme odpovědní za jakákoli nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu. +**Vyloučení odpovědnosti**: +Tento dokument byl přeložen pomocí služby automatického překladu [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Nejsme odpovědni za jakékoliv nedorozumění či nesprávné výklady vyplývající z použití tohoto překladu. \ No newline at end of file diff --git a/translations/cs/README.md b/translations/cs/README.md index 6b04e6a0e..b4ad78650 100644 --- a/translations/cs/README.md +++ b/translations/cs/README.md @@ -10,251 +10,260 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Webový vývoj pro začátečníky - Kurikulum +# Webový vývoj pro začátečníky - kurikulum -Naučte se základy webového vývoje v našem 12týdenním komplexním kurzu od Microsoft Cloud Advocates. Každá z 24 lekcí se věnuje JavaScriptu, CSS a HTML prostřednictvím praktických projektů jako jsou terária, rozšíření prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte si uchování znalostí s naší efektivní projektově orientovanou výukou. Začněte svou cestu s kódováním ještě dnes! +Naučte se základy webového vývoje s naším 12týdenním komplexním kurzem od Microsoft Cloud Advocates. Každá ze 24 lekcí se zabývá JavaScriptem, CSS a HTML prostřednictvím praktických projektů, jako jsou terária, rozšíření pro prohlížeče a vesmírné hry. Zapojte se do kvízů, diskuzí a praktických úkolů. Zlepšete své dovednosti a optimalizujte uchování znalostí díky naší efektivní projektově orientované pedagogice. Začněte svou cestu programování ještě dnes! -Přidejte se do komunity Azure AI Foundry na Discordu +Připojte se k Azure AI Foundry Discord komunitě [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Postupujte podle těchto kroků, abyste mohli začít používat tyto zdroje: -1. **Vytvořte forknutí repozitáře**: Klikněte na [![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) +Postupujte podle těchto kroků, abyste začali používat tyto zdroje: +1. **Vytvořte Fork repozitáře**: Klikněte na [![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. **Naklonujte repozitář**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Připojte se k Azure AI Foundry Discordu a potkejte odborníky a ostatní vývojáře**](https://discord.com/invite/ByRwuEEgH4) +3. [**Přidejte se k Azure AI Foundry Discord a poznejte experty a ostatní vývojáře**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Podpora více jazyků -#### Podporováno skrze GitHub Action (automatizované a vždy aktuální) +#### Podporováno pomocí GitHub Action (automatizováno a vždy aktuální) -[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](./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) +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Čínština (zjednodušená)](../zh-CN/README.md) | [Čínština (tradiční, Hongkong)](../zh-HK/README.md) | [Čínština (tradiční, Macao)](../zh-MO/README.md) | [Čínština (tradiční, Tchaj-wan)](../zh-TW/README.md) | [Chorvatština](../hr/README.md) | [Čeština](./README.md) | [Dánština](../da/README.md) | [Nizozemština](../nl/README.md) | [Estonština](../et/README.md) | [Finština](../fi/README.md) | [Francouzština](../fr/README.md) | [Němčina](../de/README.md) | [Řečtina](../el/README.md) | [Hebrejština](../he/README.md) | [Hindština](../hi/README.md) | [Maďarština](../hu/README.md) | [Indonéština](../id/README.md) | [Italština](../it/README.md) | [Japonština](../ja/README.md) | [Kannadština](../kn/README.md) | [Korejština](../ko/README.md) | [Litevština](../lt/README.md) | [Malajština](../ms/README.md) | [Malayalam](../ml/README.md) | [Maráthština](../mr/README.md) | [Nepálština](../ne/README.md) | [Nigérijská pidžin](../pcm/README.md) | [Norština](../no/README.md) | [Perština (Farsi)](../fa/README.md) | [Polština](../pl/README.md) | [Portugalština (Brazílie)](../pt-BR/README.md) | [Portugalština (Portugalsko)](../pt-PT/README.md) | [Paňdžábština (Gurmukhí)](../pa/README.md) | [Rumunština](../ro/README.md) | [Ruština](../ru/README.md) | [Srbština (cyrilice)](../sr/README.md) | [Slovenština](../sk/README.md) | [Slovinština](../sl/README.md) | [Španělština](../es/README.md) | [Svahilština](../sw/README.md) | [Švédština](../sv/README.md) | [Tagalog (Filipínština)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugština](../te/README.md) | [Thajština](../th/README.md) | [Turečtina](../tr/README.md) | [Ukrajinština](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamština](../vi/README.md) -> **Dáváte přednost lokálnímu klonování?** - -> Tento repozitář zahrnuje více než 50 překladů jazyků, což výrazně zvětšuje velikost stažených dat. Pro klonování bez překladů použijte sparse checkout: +> **Raději klonovat lokálně?** +> +> Tento repozitář obsahuje více než 50 překladů jazyků, což výrazně zvětšuje velikost stahování. Pro klonování bez překladů použijte 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' > ``` -> To vám poskytne vše potřebné ke zdárnému dokončení kurzu a výrazně rychlejší stažení. +> +> **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" +> ``` +> +> Tím získáte vše potřebné k dokončení kurzu s mnohem rychlejším stažením. -**Pokud si přejete, aby byly podporovány další překladové jazyky, jsou uvedeny [zde](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Pokud chcete podporu dalších jazyků, jsou zde uvedeny podporované jazykové možnosti [zde](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) +[![Otevřít ve 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) #### 🧑‍🎓 _Jste student?_ -Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde najdete začátečnické zdroje, studentské balíčky a dokonce způsoby, jak získat voucher na bezplatný certifikát. Tuto stránku si doporučujeme přidat do záložek a čas od času ji navštívit, protože obsah měníme měsíčně. +Navštivte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde naleznete zdroje pro začátečníky, studentské balíčky a dokonce i způsoby, jak získat bezplatný certifikát. Tuto stránku si chcete zařadit mezi oblíbené a čas od času ji zkontrolovat, protože obsah měníme měsíčně. -### 📣 Oznámení - Nové výzvy GitHub Copilot Agent mode k dokončení! +### 📣 Oznámení - Nové výzvy režimu GitHub Copilot Agent k dokončení! -Nová výzva přidána, hledejte „GitHub Copilot Agent Challenge 🚀“ ve většině kapitol. Je to nová výzva, kterou můžete dokončit pomocí GitHub Copilota a režimu Agent. Pokud jste režim Agent předtím nepoužívali, dokáže nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další. +Přidána nová výzva, hledejte "GitHub Copilot Agent Challenge 🚀" ve většině kapitol. To je nová výzva, kterou máte dokončit pomocí GitHub Copilot a režimu Agent. Pokud jste režim Agent nikdy nepoužili, umožňuje nejen generovat text, ale také vytvářet a upravovat soubory, spouštět příkazy a další. -### 📣 Oznámení - _Nový projekt k postavení pomocí Generativní AI_ +### 📣 Oznámení - _Nový projekt k vytvoření pomocí generativní AI_ -Nový projekt AI asistenta právě přidán, podívejte se na [projekt](./9-chat-project/README.md) +Právě přidán nový projekt AI asistenta, podívejte se na [projekt](./9-chat-project/README.md) -### 📣 Oznámení - _Nové kurikulum_ o Generativní AI pro JavaScript právě vydáno +### 📣 Oznámení - _Nové kurikulum_ o generativní AI pro JavaScript bylo právě vydáno -Nezapomeňte na naše nové kurikulum Generativní AI! +Nezmeškejte naše nové kurikulum Generativní AI! Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte! -![Background](../../translated_images/cs/background.148a8d43afde5730.webp) +![Pozadí](../../translated_images/cs/background.148a8d43afde5730.webp) + +- Lekce pokrývají vše od základů až po RAG. +- Komunikujte s historickými postavami pomocí GenAI a naší průvodní aplikace. +- Zábavný a poutavý příběh, budete cestovat časem! -- Lekce pokrývají vše od základů po RAG. -- Komunikujte s historickými postavami pomocí GenAI a naší doprovodné aplikace. -- Zábavný a poutavý příběh, při němž budete cestovat časem! +![postava](../../translated_images/cs/character.5c0dd8e067ffd693.webp) -![character](../../translated_images/cs/character.5c0dd8e067ffd693.webp) -Každá lekce zahrnuje úkol k dokončení, kontrolu znalostí a výzvu, která vás provede tématy jako: -- Promptování a prompt engineering +Každá lekce obsahuje úkol k dokončení, ověření znalostí a výzvu, která vás provede tématy jako: +- Vytváření promptů a jejich inženýrství - Generování textových a obrazových aplikací - Vyhledávací aplikace Navštivte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začněte! - ## 🌱 Začínáme -> **Učitelé**, zahrnuli jsme [několik návrhů](for-teachers.md) jak toto kurikulum používat. Budeme rádi za vaši zpětnou vazbu [v našem diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Učitelé**, zahrnuli jsme [několik návrhů](for-teachers.md), jak použít toto kurikulum. Budeme rádi za vaši zpětnou vazbu [v našem diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Studující](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, u každé lekce začněte přednáškovým kvízem a pokračujte čtením materiálu přednášky, plněním různých aktivit a ověřte si pochopení pomocí kvízu po přednášce. +**[Studující](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, u každé lekce začněte přednáškovým kvízem a pokračujte čtením přednáškového materiálu, dokončením různých aktivit a ověřením porozumění pomocí povětrná přednáškového kvízu. -Pro lepší studijní zážitek se spojte se svými spolužáky a pracujte na projektech společně! Diskuze jsou vítané v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je náš tým moderátorů připraven odpovědět na vaše dotazy. +Pro lepší zkušenosti s učením se spojte s kolegy a pracujte na projektech společně! Diskuze jsou vítané v našem [diskuzním fóru](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde je k dispozici náš tým moderátorů, kteří vám pomohou. -Pro další vzdělávání důrazně doporučujeme prozkoumat [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pro doplňující studijní materiály. +Pro další vzdělávání doporučujeme prozkoumat [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pro doplňující studijní materiály. ### 📋 Nastavení vašeho prostředí -Toto kurikulum má připravené vývojové prostředí! Jakmile začnete, můžete si vybrat spouštět kurikulum v [Codespace](https://github.com/features/codespaces/) (_prostředí v prohlížeči bez potřeby instalace_), nebo lokálně na vašem počítači pomocí textového editoru jako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Toto kurikulum má připravené vývojové prostředí! Na začátku si můžete vybrat, zda budete kurz spouštět v [Codespace](https://github.com/features/codespaces/) (_prohlížečem ovládané prostředí bez nutnosti instalace_), nebo lokálně na svém počítači pomocí textového editoru, například [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Vytvořte si repozitář -Pro snadné ukládání své práce je doporučeno vytvořit si vlastní kopii tohoto repozitáře. To můžete udělat kliknutím na tlačítko **Use this template** v horní části stránky. Tím vznikne nový repozitář ve vašem GitHub účtu s kopií kurikula. +#### Vytvořte si vlastní repozitář +Pro snadné ukládání vaší práce je doporučeno vytvořit si vlastní kopii tohoto repozitáře. Můžete tak učinit kliknutím na tlačítko **Použít tuto šablonu** na vrchu stránky. Tím se vytvoří nový repozitář na vašem GitHub účtu s kopií kurikula. -Postupujte takto: -1. **Vytvořte fork repozitáře**: Klikněte na tlačítko „Fork“ v pravém horním rohu této stránky. +Postupujte následovně: +1. **Vytvořte Fork repozitáře**: Klikněte na tlačítko „Fork“ v pravém horním rohu této stránky. 2. **Naklonujte repozitář**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Spuštění kurikula v Codespace -Ve vaší kopii repozitáře, kterou jste vytvořili, klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím se pro vás vytvoří nový Codespace, ve kterém můžete pracovat. +Ve své kopii repozitáře klikněte na tlačítko **Code** a vyberte **Open with Codespaces**. Tím vytvoříte nový Codespace, ve kterém můžete pracovat. ![Codespace](../../translated_images/cs/createcodespace.0238bbf4d7a8d955.webp) #### Spuštění kurikula lokálně na vašem počítači -Pro spuštění kurikula lokálně budete potřebovat textový editor, prohlížeč a nástroj příkazového řádku. Naše první lekce, [Úvod do programovacích jazyků a nástrojů oboru](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi těchto nástrojů, abyste si mohli vybrat, co vám nejlépe vyhovuje. +Pro spuštění tohoto kurikula lokálně budete potřebovat textový editor, prohlížeč a nástroj příkazového řádku. Naše první lekce, [Úvod do programovacích jazyků a nástrojů](../../1-getting-started-lessons/1-intro-to-programming-languages), vás provede různými možnostmi pro každý z těchto nástrojů, abyste si vybrali, co vám vyhovuje nejvíce. -Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také vestavěný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). - - -1. Naklonujte svůj repozitář do počítače. Můžete to udělat kliknutím na tlačítko **Code** a zkopírováním adresy URL: +Doporučujeme použít [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako editor, který má také zabudovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si můžete stáhnout [zde](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Naklonujte si své úložiště do počítače. Můžete to udělat kliknutím na tlačítko **Code** a zkopírováním URL: [CodeSpace](./images/createcodespace.png) -Poté otevřete [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ve [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spusťte následující příkaz, přičemž `` nahraďte URL, kterou jste právě zkopírovali: + + Poté otevřete [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ve [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spusťte následující příkaz, přičemž `` nahraďte právě zkopírovanou URL: ```bash git clone ``` -2. Otevřete složku ve Visual Studio Code. To můžete udělat kliknutím na **Soubor** > **Otevřít složku** a vybráním složky, kterou jste právě naklonovali. +2. Otevřete složku ve Visual Studio Code. Můžete to udělat kliknutím na **File** > **Open Folder** a výběrem složky, kterou jste právě naklonovali. > Doporučené rozšíření Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pro náhled HTML stránek přímo ve Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - který vám pomůže psát kód rychleji +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pomáhá rychleji psát kód -## 📂 Každá lekce zahrnuje: +## 📂 Každá lekce obsahuje: -- volitelnou náčrtovou poznámku +- volitelnou náčrtnou poznámku (sketchnote) - volitelné doplňkové video -- rozcvičkový kvíz před lekcí -- písemnou lekci -- u lekcí založených na projektu podrobné návody, jak projekt vytvořit -- kontrolní znalostní otázky +- rozcvičovací kvíz před lekcí +- psanou lekci +- u lekcí založených na projektu krok za krokem průvodce, jak projekt postavit +- kontrolní otázky - výzvu - doplňkové čtení -- zadání +- úkol - [kvíz po lekci](https://ff-quizzes.netlify.app/web/) -> **Poznámka ke kvízům**: Všechny kvízy jsou uloženy ve složce Quiz-app, celkem je 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; řiďte se pokyny ve složce `quiz-app`. +> **Poznámka ke kvízům**: Všechny kvízy jsou uloženy ve složce Quiz-app, celkem 48 kvízů po třech otázkách. Jsou dostupné [zde](https://ff-quizzes.netlify.app/web/), kvízovou aplikaci lze spustit lokálně nebo nasadit na Azure; postupujte podle instrukcí ve složce `quiz-app`. ## 🗃️ Lekce -| | Název projektu | Naučené koncepty | Výukové cíle | Odkaz na lekci | Autor | -| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Začínáme | Úvod do programování a nástroje řemeslníka | Naučte se základy většiny programovacích jazyků a o softwaru, který pomáhá profesionálním vývojářům vykonávat jejich práci | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Začínáme | Základy GitHubu, včetně práce v týmu | Jak používat GitHub ve vašem projektu, jak spolupracovat s ostatními na kódu | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Začínáme | Přístupnost | Naučte se základy webové přístupnosti | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Základy JS | Datové typy JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Základy JS | Funkce a metody | Naučte se o funkcích a metodách pro správu logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher | -| 06 | Základy JS | Tvorba podmínek v JS | Naučte se vytvářet podmínky ve vašem kódu pomocí rozhodovacích metod | [Tvorba rozhodnutí](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Základy JS | Pole a smyčky | Pracujte s daty pomocí polí a smyček v JavaScriptu | [Pole a smyčky](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořte HTML pro online terárium se zaměřením na vytvoření rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořte CSS pro stylování online terária, se zaměřením na základy CSS včetně responzivního designu stránky | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptové uzávěry, manipulace s DOM | Vytvořte JavaScript pro funkčnost terária jako drag/drop rozhraní, zaměřeno na uzávěry a manipulaci s DOM | [JavaScript uzávěry a manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Hra psaní na klávesnici](./4-typing-game/solution/README.md) | Vytvoření hry psaní na klávesnici | Naučte se používat klávesové události k řízení logiky vaší JavaScriptové aplikace | [Programování událostmi](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučte se, jak prohlížeče fungují, jejich historický vývoj a jak vytvořit první prvky rozšíření prohlížeče | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Vytváření formuláře, volání API a ukládání proměnných do místního úložiště | Vytvořte JavaScriptové prvky rozšíření prohlížeče, které volají API a používají proměnné uložené v místním úložišti | [API, formuláře a místní úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Zelené rozšíření prohlížeče](./5-browser-extension/solution/README.md) | Pozadí procesy v prohlížeči, webový výkon | Použijte pozadí procesy pro zvládání ikony rozšíření, naučte se o webovém výkonu a optimalizacích | [Pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pokročilejší vývoj hry v JavaScriptu | Naučte se o dědičnosti pomocí tříd a kompozice, stejně jako o vzoru Pub/Sub, jako přípravu na tvorbu hry | [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Kreslení na plátno | Naučte se o Canvas API používaném pro kreslení prvků na obrazovku | [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API | [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Detekce kolizí | Umožněte prvkům kolidovat a reagovat na sebe pomocí stisknutí kláves a přidejte cooldown funkci pro zajištění výkonu hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Udržování skóre | Provádějte matematické výpočty založené na stavu a výkonu hry | [Udržování skóre](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Hra ve vesmíru](./6-space-game/solution/README.md) | Ukončování a restartování hry | Naučte se o ukončení a restartování hry, včetně čištění zdrojů a resetování proměnných hodnot | [Podmínka ukončení](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Bankovní aplikace](./7-bank-project/solution/README.md) | HTML šablony a směrování v webové aplikaci | Naučte se vytvořit strukturu více stránkové webové aplikace použitím směrování a HTML šablon | [HTML šablony a směrování](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Vytvoření přihlašovacího a registračního formuláře | Naučte se vytvářet formuláře a zpracovávat validační rutiny | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Metody získávání a použití dat | Jak data proudí do vaší aplikace a ven, jak je načítat, ukládat a likvidovat | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Bankovní aplikace](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučte se, jak vaše aplikace uchovává stav a jak s ním programově pracovat | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Editor kódu pro prohlížeč/VScode](../../8-code-editor) | Práce s VScodem | Naučte se používat editor kódu | [Použití editoru VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI asistenti](./9-chat-project/README.md) | Práce s AI | Naučte se vytvořit vlastního AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris | +| | Název projektu | Naučené koncepty | Cíle učení | Propojená lekce | Autor | +| :-: | :--------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Začínáme | Úvod do programování a nástroje řemesla | Naučte se základní principy většiny programovacích jazyků a o softwaru, která pomáhá profesionálním vývojářům | [Úvod do programovacích jazyků a nástrojů](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Začínáme | Základy GitHubu, včetně práce v týmu | Jak používat GitHub ve vašem projektu, jak spolupracovat s ostatními na kódu | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Začínáme | Přístupnost | Naučte se základy webové přístupnosti | [Základy přístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Základy JS | Datové typy JavaScriptu | Základy datových typů v JavaScriptu | [Datové typy](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Základy JS | Funkce a metody | Naučte se o funkcích a metodách k řízení logiky aplikace | [Funkce a metody](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher | +| 06 | Základy JS | Rozhodování v JS | Naučte se vytvářet podmínky ve vašem kódu pomocí rozhodovacích metod | [Rozhodování](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Základy JS | Pole a cykly | Práce s daty pomocí polí a cyklů v JavaScriptu | [Pole a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvořte HTML pro online terárium, zaměřte se na tvorbu rozvržení | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvořte CSS pro stylování online terária, zaměřte se na základy CSS včetně responzivního designu | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptové uzávěry, manipulace s DOM | Napište JavaScript, aby terárium fungovalo jako rozhraní drag/drop, zaměřte se na uzávěry a manipulaci s DOM | [JavaScriptové uzávěry, manipulace s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Vytvoření hry psaní na klávesnici | Naučte se používat události klávesnice k řízení logiky JavaScriptové aplikace | [Programování řízené událostmi](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Práce s prohlížeči | Naučte se, jak fungují prohlížeče, jejich historii a jak vytvářet základy rozšíření prohlížeče | [O prohlížečích](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Vytváření formuláře, volání API a ukládání proměnných v lokálním úložišti | Vytvořte JavaScriptové prvky rozšíření pro volání API pomocí proměnných uložených v lokálním úložišti | [API, formuláře a lokální úložiště](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pozadí procesů v prohlížeči, webový výkon | Použijte pozadí prohlížeče ke správě ikony rozšíření; naučte se o výkonu webu a optimalizacích | [Pozadí úkolů a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Pokročilejší vývoj her v JavaScriptu | Naučte se o dědičnosti pomocí tříd a kompozice a o vzoru Pub/Sub jako příprava na tvorbu hry | [Úvod do pokročilého vývoje her](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Kreslení na plátno | Naučte se o Canvas API, které slouží k vykreslování prvků na obrazovku | [Kreslení na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Pohyb prvků po obrazovce | Objevte, jak mohou prvky získat pohyb pomocí kartézských souřadnic a Canvas API | [Pohyb prvků](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Detekce kolizí | Udělejte, aby se prvky srážely a reagovaly na sebe pomocí stisků kláves a přidejte funkci chladnutí pro výkon hry | [Detekce kolizí](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Udržování skóre | Proveďte matematické výpočty na základě stavu a výkonu hry | [Udržování skóre](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Ukončení a restartování hry | Naučte se o ukončení a restartování hry, včetně čištění zdrojů a resetování proměnných | [Podmínka ukončení](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML šablony a směrování ve webové aplikaci | Naučte se vytvářet architekturu vícestránkového webu pomocí směrování a HTML šablon | [HTML šablony a směrování](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Vytvoření přihlašovacího a registračního formuláře | Naučte se o tvorbě formulářů a zpracování validací | [Formuláře](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody získávání a použití dat | Jak data proudí do a z vaší aplikace, jak je získávat, ukládat a odstraňovat | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučte se, jak vaše aplikace udržuje stav a jak ho programově spravovat | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Práce s VScode | Naučte se používat editor kódu | [Použití editoru kódu VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Práce s AI | Naučte se vytvořit vlastního AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogika -Náš učební plán je navržen se dvěma klíčovými pedagogickými principy: +Náš výukový plán je navržen s ohledem na dva klíčové pedagogické principy: * učení založené na projektech * časté kvízy -Program učí základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti získají příležitost získat praktické zkušenosti tvorbou hry na psaní na klávesnici, virtuálního terária, ekologicky šetrného rozšíření prohlížeče, hry ve stylu vesmírných vetřelců a bankovní aplikace pro firmy. Po dokončení série budou studenti mít pevné základy webového vývoje. +Program učí základy JavaScriptu, HTML a CSS, stejně jako nejnovější nástroje a techniky používané dnešními webovými vývojáři. Studenti budou mít možnost získat praktické zkušenosti stavbou hry psaní na klávesnici, virtuálního terária, ekologického rozšíření prohlížeče, hry ve stylu Space Invaders a bankovní aplikace pro firmy. Na konci série budou mít studenti pevné základy webového vývoje. -> 🎓 První lekce tohoto učebního plánu můžete absolvovat také jako [Výukovou cestu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn! +> 🎓 První lekce tohoto kurzu můžete absolvovat jako [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn! -Zajištěním, že obsah odpovídá projektům, se proces pro studenty stává zajímavějším a dochází k lepšímu zapamatování konceptů. Napsali jsme také několik úvodních lekcí základů JavaScriptu, které představují koncepty, doplněné videem ze série "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", jejíchž autoři se na plánu podíleli. +Díky sladění obsahu s projekty je proces pro studenty zajímavější a zvyšuje se zapamatování konceptů. Také jsme napsali několik úvodních lekcí o základech JavaScriptu doplněných videi z kolekce "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", jejichž autoři se podíleli na tomto kurzu. -Navíc nízkorizikový kvíz před hodinou nastaví studentovi záměr naučit se téma, zatímco druhý kvíz po hodině zajistí další upevnění znalostí. Tento učební plán je navržen tak, aby byl flexibilní a zábavný, lze jej absolvovat celý nebo částečně. Projekty začínají jednoduché a ke konci 12týdenního cyklu se postupně stávají složitějšími. +Navíc nízkorizikový kvíz před hodinou nastavuje záměr studenta se učit dané téma, zatímco druhý kvíz po hodině podporuje další zapamatování. Tento kurz je navržen tak, aby byl flexibilní a zábavný a lze ho absolvovat celý nebo částečně. Projekty začínají malé a na konci 12týdenního cyklu jsou stále složitější. -Ačkoliv jsme záměrně vynechali zavádění JavaScriptových frameworků, abychom se zaměřili na základní dovednosti webového vývojáře před adopcí frameworku, vhodným dalším krokem po absolvování tohoto kurzu je naučit se Node.js prostřednictvím další kolekce videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Záměrně jsme se vyhnuli zavádění JavaScriptových frameworků, abychom se soustředili na základní dovednosti potřebné jako webový vývojář před přijetím frameworku, dobrým dalším krokem po absolvování tohoto kurzu by bylo naučit se Node.js prostřednictvím jiné kolekce videí: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Navštivte naše [chování](CODE_OF_CONDUCT.md) a [příspěvky](CONTRIBUTING.md) pravidla. Vítáme vaše konstruktivní návrhy! +> Navštivte naše [Kodex chování](CODE_OF_CONDUCT.md) a [Přispívání](CONTRIBUTING.md). Těšíme se na vaše konstruktivní návrhy! ## 🧭 Offline přístup -Tuto dokumentaci můžete spustit offline pomocí [Docsify](https://docsify.js.org/#/). Vytvořte fork tohoto repozitáře, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svém počítači a poté ve výchozím adresáři repozitáře spusťte příkaz `docsify serve`. Webová stránka poběží na portu 3000 na vašem localhostu: `localhost:3000`. +Tuto dokumentaci můžete spustit offline pomocí [Docsify](https://docsify.js.org/#/). Forkněte si toto repo, [nainstalujte Docsify](https://docsify.js.org/#/quickstart) na svém počítači a poté v kořenové složce tohoto repozitáře spusťte příkaz `docsify serve`. Webová stránka bude servírována na portu 3000 na vašem localhostu: `localhost:3000`. ## 📘 PDF +PDF všech lekcí naleznete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -PDF se všemi lekcemi naleznete [zde](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +## 🎒 Ostatní kurzy -## 🎒 Další kurzy -Náš tým vytváří i další kurzy! Podívejte se: +Náš tým připravuje i další kurzy! Podívejte se na: ### LangChain -[![LangChain4j pro začátečníky](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 pro začátečníky](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 pro začátečníky](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 / Agenti -[![AZD pro začátečníky](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 pro začátečníky](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 pro začátečníky](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 agenti pro začátečníky](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 / 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) --- -### Série Generativní AI -[![Generativní AI pro začátečníky](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) -[![Generativní 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) -[![Generativní 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) -[![Generativní 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) +### Generativní AI série +[![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) --- -### Základní učení -[![Strojové učení pro začátečníky](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 pro začátečníky](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 pro začátečníky](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) +### Základní vzdělávání +[![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) [![Kybernetická bezpečnost pro začátečníky](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) [![Webový vývoj pro začátečníky](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 pro začátečníky](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 Vývoj pro začátečníky](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) +[![Vývoj XR pro začátečníky](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) --- ### Série Copilot -[![Copilot pro AI párové programování](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 pro 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 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) ## Získání pomoci -Pokud se zaseknete nebo máte jakékoli otázky ohledně vývoje AI aplikací, připojte se k ostatním učenlivým a zkušeným vývojářům v diskuzích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti se sdílejí svobodně. +Pokud se zaseknete nebo máte otázky ohledně tvorby AI aplikací, připojte se k ostatním studentům a zkušeným vývojářům v diskusích o MCP. Je to podpůrná komunita, kde jsou otázky vítány a znalosti se sdílejí otevřeně. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Pokud máte zpětnou vazbu k produktu nebo chcete hlásit chyby při tvorbě, navštivte: +Pokud máte zpětnou vazbu k produktu nebo narazíte na chyby během vývoje, navštivte: [![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) @@ -265,6 +274,6 @@ Tento repozitář je licencován pod licencí MIT. Více informací naleznete v --- -**Prohlášení o vyloučení odpovědnosti**: -Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). Přestože se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za autoritativní zdroj. Pro zásadní informace je doporučován profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo nesprávné výklady vzniklé použitím tohoto překladu. +**Prohlášení o vyloučení odpovědnosti**: +Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Za jakékoli nedorozumění nebo nesprávné výklady vzniklé z použití tohoto překladu neneseme odpovědnost. \ No newline at end of file diff --git a/translations/hu/.co-op-translator.json b/translations/hu/.co-op-translator.json index 5ad62337a..07a3eb5fb 100644 --- a/translations/hu/.co-op-translator.json +++ b/translations/hu/.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-07T03:13:27+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T15:55:42+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "hu" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:17:22+00:00", + "translation_date": "2026-03-06T16:05:29+00:00", "source_file": "AGENTS.md", "language_code": "hu" }, @@ -516,8 +516,8 @@ "language_code": "hu" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:09:19+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T15:50:16+00:00", "source_file": "README.md", "language_code": "hu" }, diff --git a/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md index c1db4b9f8..339ee0479 100644 --- a/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,15 +1,15 @@ # Bevezetés a programozási nyelvekbe és a modern fejlesztői eszközökbe - -Szia, leendő fejlesztő! 👋 Elmondhatok valamit, ami minden egyes nap kiráz a hideg? Most fogod felfedezni, hogy a programozás nemcsak a számítógépekről szól – hanem arról, hogy valódi szuperképességekkel rendelkezel, hogy életre keltsd a legvadabb ötleteidet! -Ismered azt a pillanatot, amikor a kedvenc appodat használod, és minden csak tökéletesen működik? Amikor megnyomsz egy gombot, és történik valami teljesen varázslatos, amin elámulsz, hogy "hű, ezt hogy CSINÁLTÁK?" Nos, valaki, pont olyan, mint te – valószínűleg a kedvenc kávézójában ül éjjel 2-kor a harmadik eszpresszójával – írta azt a kódot, amely létrehozta azt a varázslatot. És itt jön az igazán elképesztő: a tananyag végére nemcsak azt fogod érteni, hogy hogyan tették ezt, hanem alig várni fogod, hogy te magad is kipróbáld! +Szia, jövőbeli fejlesztő! 👋 Elmondhatok neked valamit, ami nekem nap mint nap libabőrt okoz? Most fogod felfedezni, hogy a programozás nem csak a számítógépekről szól – hanem arról, hogy tényleges szuperképességeid legyenek, hogy a vadabb ötleteidet életre keltsd! -Tudom, hogy a programozás most még ijesztőnek tűnhet. Amikor én kezdtem, tényleg azt hittem, hogy vagy valami matekzseni kell legyek, vagy már ötéves korom óta kódolnom kell. De ez változtatta meg teljesen a nézőpontomat: a programozás pont olyan, mintha megtanulnál beszélgetni egy új nyelven. Először köszönsz meg azt mondod, hogy "köszönöm," aztán megtanulsz kávét rendelni, és mielőtt észrevennéd, mély filozófiai beszélgetéseket folytatsz! Csak éppenséggel a számítógépekkel beszélgetsz, és őszintén? Ezek a legkitartóbb beszélgetőpartnerek, akikkel valaha találkozhatsz – soha nem ítélik meg a hibáidat, és mindig örömmel próbálkoznak újra! +Ismered azt a pillanatot, amikor a kedvenc appodat használod, és minden tökéletesen klappol? Amikor megnyomsz egy gombot, és történik valami igazán varázslatos, amiért azt mondod: "hűha, ezt hogyan CSINÁLTÁK?" Nos, valaki pontosan olyan, mint te – valószínűleg a kedvenc kávézójában egy hajnal kettőkor, a harmadik eszpresszójával – írta azt a kódot, ami ezt a varázslatot megteremtette. És most jön az, ami el fog kápráztatni: a tanóra végére nemcsak meg fogod érteni, hogyan csinálták, hanem alig fogod várni, hogy magad is kipróbáld! -Ma meg fogjuk nézni azokat a hihetetlen eszközöket, amik nemcsak lehetővé teszik, hanem nagyon addiktívvá teszik a modern webfejlesztést. Pont azokat az editorokat, böngészőket és munkafolyamatokat, amelyeket a Netflix, a Spotify és a kedvenc indie app stúdiód fejlesztői használnak minden nap. És most jön a rész, amire majd örülni fogsz: ezeknek a professzionális, iparági szabvány eszközöknek a többsége teljesen ingyenes! +Nézd, teljesen megértem, ha most még ijesztőnek tűnik a programozás. Amikor én kezdtem, őszintén azt hittem, hogy valami matekgéniusz kell hozzá, vagy hogy ötéves korom óta kell kódolnom. De eztán valami teljesen megváltoztatta a nézőpontomat: a programozás pont olyan, mintha egy új nyelven tanulnál beszélgetni. Először csak annyit tudsz, hogy "szia" és "köszönöm", aztán már rendelni tudsz kávét, és az emberfia hamarosan mély filozófiai beszélgetéseket folytat! Csak itt a számítógéppel beszélgetsz, és őszintén? Ők a legelnézőbb beszélgetőpartnerek, amilyeneket el tudsz képzelni – soha nem ítélkeznek a hibáid miatt, és mindig örömmel próbálják újra! + +Ma megismerjük az elképesztő eszközöket, amelyek nemcsak lehetővé teszik, hanem komolyan függőséget okoznak a modern webfejlesztést. Pontosan azokat a szerkesztőket, böngészőket és munkafolyamatokat fogjuk nézni, amiket a Netflix, Spotify és a kedvenc indie app stúdiód fejlesztői használnak nap mint nap. És itt jön a legjobb rész, ami boldoggá fog tenni: ezeknek a profi, ipari szabványú eszközöknek a nagy része teljesen ingyenes! ![Intro Programming](../../../../translated_images/hu/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote készítette [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey @@ -22,65 +22,65 @@ journey Kód szerkesztők: 4: You Böngészők és fejlesztői eszközök: 5: You Parancssor: 3: You - section Gyakorlás + section Gyakorlat Nyelvnyomozó: 4: You - Eszközfelfedezés: 5: You - Közösségi kapcsolatok: 5: You + Eszköz feltárás: 5: You + Közösségi kapcsolat: 5: You ``` -## Nézzük, mit tudsz már! +## Nézzük meg, mit tudsz már! -Mielőtt belevágnánk a mókába, kíváncsi vagyok – mit tudsz már erről a programozás világáról? És hallgasd csak, ha ezekre a kérdésekre azt gondolod, hogy "nincs semmi fogalmam erről," az nemcsak rendben van, hanem tökéletes! Ez azt jelenti, hogy pontosan a megfelelő helyen vagy. Gondolj erre a kvízre úgy, mint az edzés előtti bemelegítésre – csak melegítjük az agyizmokat! +Mielőtt belevágnánk a mókába, kíváncsi vagyok – mit tudsz már erről a programozós világról? És hallgasd, ha ezeket a kérdéseket olvasva azt gondolod: "Nekem erről tényleg semmi fogalmam sincs," az nem csak rendben van, hanem tökéletes! Ez azt jelenti, hogy pontosan jó helyen vagy. Gondolj erre a kvízre úgy, mint egy bemelegítésre az edzés előtt – csak a "gondolkodó izmaidat" melegítjük fel! -[Vegyél részt az előzetes kvízen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Vedd fel az előóra kvízt](https://ff-quizzes.netlify.app/web/) -## Az a kaland, amire együtt indulunk +## Az a kaland, amit együtt fogunk megtapasztalni -Jól van, őszintén izgatott vagyok, hogy mit fogunk ma felfedezni! Komolyan, szívesen látnám az arcodat, amikor néhány koncepció végre összeáll. Íme az a hihetetlen utazás, amire együtt indulunk: +Oké, őszintén szólva majd kiugrom a bőrömből az izgalomtól, amit ma tanulni fogunk! Komolyan, bárcsak láthatnám az arcodat, amikor néhány fogalom hirtelen helyére kerül. Itt van az az elképesztő utazás, amire együtt indulunk: -- **Mi is valójában a programozás (és miért a legmenőbb dolog a világon!)** – Felfedezzük, hogyan a kód a szinte láthatatlan varázslat, amely mindent hajt körülötted, az ébresztőtől, ami valahogy tudja, hogy hétfő reggel van, egészen a Netflix tökéletes ajánló algoritmusáig -- **A programozási nyelvek és elképesztő személyiségük** – Képzeld el, hogy egy buliba mész, ahol mindenki teljesen más szuperképességekkel és problémamegoldási módszerekkel rendelkezik. Pont ilyen a programozási nyelvek világa, és imádni fogod őket megismerni! -- **Az alapvető építőelemek, amelyek életre keltik a digitális varázslatot** – Gondolj erre, mint a végső kreatív LEGO készletre. Ha megérted, hogyan állnak össze ezek a darabok, rájössz, hogy bármit meg tudsz építeni, amit csak a képzeleted álmodik meg -- **A professzionális eszközök, amelyek úgy érzik veled, mintha most adtak volna egy varázspálcát a kezedbe** – Nem túlozok – ezek az eszközök tényleg szuperképességekkel ruháznak fel, és a legjobb az egészben? Pont ugyanazokat az eszközöket használják a profik! +- **Mi is pontosan a programozás (és miért a legmenőbb dolog az egész világon!)** – Felfedezzük, hogyan a kód szó szerint az a láthatatlan varázslat, ami mindent működtet körülötted, az ébresztőtől, ami valahogy tudja, hogy hétfő reggel van, egészen az algoritmusig, ami tökéletesen személyre szabja a Netflix ajánlásaidat. +- **A programozási nyelvek és elképesztő személyiségük** – Képzeld el, hogy belépsz egy buliba, ahol minden embernek teljesen más szuperképességei és problémamegoldó módszerei vannak. Pont ilyen a programozási nyelvek világa, és imádni fogod megismerni őket! +- **Az alapvető építőelemek, amelyek a digitális varázslatot létrehozzák** – Gondolj erre úgy, mint az ultimate kreatív LEGO készletre. Ha egyszer rájössz, ezek az elemek hogyan illeszkednek össze, rá fogsz jönni, hogy szó szerint bármit meg tudsz építeni, amit csak el tudsz képzelni. +- **Professzionális eszközök, amiktől úgy fogod érezni magad, mint egy mágus, akinek most adtak egy varázspálcát** – Nem dramatizálok – ezek az eszközök tényleg arra fognak késztetni, hogy szuperképességeid vannak, és a legjobb az egészben? Ezeket ugyanazokat az eszközöket használják a szakik! -> 💡 **Egy dolog:** Ne is próbáld meg ma mindenre megjegyezni a választ! Most csak azt szeretném, hogy érezd azt az izgalmat, ami a lehetőségekben rejlik. A részletek természetesen megmaradnak majd, ahogy együtt gyakorlunk – így tanul az ember igazán! +> 💡 **Fontos**: Ne is gondolj arra, hogy ma mindent megjegyezz! Jelenleg csak azt szeretném, hogy érezd azt a lelkes szikrát, hogy mennyi minden lehetséges. A részletek maguktól ragadnak majd rád, ahogy gyakorolunk együtt – így zajlik a valódi tanulás! -> Ezt a leckét elvégezheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) oldalán is! +> Ezt az órát megtalálod a [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) oldalán is! -## Szóval mi is *valójában* a programozás? +## Szóval, mit is jelent *valójában* a programozás? -Oké, foglalkozzunk a millió dolláros kérdéssel: mi is a programozás igazából? +Rendben, vessünk egy pillantást a millió dolláros kérdésre: mi is pontosan a programozás? -Mesélek egy történetet, ami teljesen megváltoztatta a róla alkotott képemet. A múlt héten próbáltam elmagyarázni anyukámnak, hogyan kell használni az új okostévénk távirányítóját. Közben azt vettem észre, hogy olyasmiket mondok, hogy "Nyomd meg a piros gombot, de nem a nagy pirosat, hanem a kis pirosat a bal oldalon... nem, a másik bal oldaladat... oké, most tartsd benyomva két másodpercig, nem egyet, nem hármat..." Ismerős? 😅 +Mesélek egy történetet, ami teljesen megváltoztatta a gondolkodásomat erről. Múlt héten megpróbáltam elmagyarázni anyukámnak, hogyan kell használni az új okostévé távkapcsolónkat. Meghallottam magamban, ahogy mondom: "Nyomd meg a piros gombot, de nem a nagy pirosat, az apró pirosat balra... nem, a másik balodat... oké, most tartsd nyomva két másodpercig, nem egyet, nem hármat..." Ez ismerős? 😅 -Ez a programozás! Az a művészet, hogy hihetetlenül részletes, lépésről lépésre szóló utasításokat adj valaminek, ami nagyon erős, de mindent tökéletesen ki kell írnod neki. Csakhogy nem a mamádnak magyarázod (aki megkérdezheti, hogy "melyik piros gomb?!"), hanem egy számítógépnek, ami pontosan azt teszi, amit mondasz, még ha az nem is teljesen az, amit gondoltál. +Ez a programozás! Az a művészet, hogy hihetetlenül részletes, lépésről lépésre szóló utasításokat adsz egy erős dolognak, amihez mindent tökéletesen ki kell fejezni. Csak itt nem anyukádnak magyarázol (aki megkérdezheti: "melyik piros gombot?!"), hanem a számítógépnek, ami pontosan azt csinálja, amit mondasz, még ha amit mondtál, nem is teljesen az, amit gondoltál. -Ez az, ami elsőre elvarázsolt: a számítógépek tulajdonképpen elég egyszerűek a magjukban. Valójában csak két dolgot értenek meg – az 1-et és a 0-t, ami gyakorlatilag azt jelenti, hogy "igen" meg "nem", vagy "be" és "ki". Ennyi! De itt jön a varázslat – nem kell úgy beszélnünk, mintha a Mátrixban lennénk, az 1-ekkel és 0-kkal. Itt jönnek képbe a **programozási nyelvek**. Olyanok, mint a világ legjobb tolmácsa, aki a teljesen normális emberi gondolataidat átalakítja számítógépes nyelvvé. +Ami nekem az első tanuláskor teljesen megdöbbentő volt: a számítógépek valójában meglepően egyszerűek. Csak két dolgot értenek meg: 1-et és 0-t, ami nagyjából "igen" és "nem" vagy "bekapcsolva" és "kikapcsolva." Ennyi! De itt jön a varázslat – nekünk nem kell úgy beszélnünk, mint egy Mátrixban játszódó filmben, azaz csak 1-esekkel és 0-kval. Itt segítenek a **programozási nyelvek**. Olyanok, mint a világ legjobb tolmácsai, akik a normális emberi gondolataidat számítógép-nyelvre fordítják. -És amitől minden reggel megint libabőrös leszek, amikor felébredek: szó szerint *minden* digitális az életedben onnan indult, hogy valaki pont olyan volt, mint te, valószínűleg pizsamában egy kávéval a kezében, kódot gépelve a laptopján. Az az Instagram szűrő, ami hibátlannak mutat? Valaki megírta a kódját. Az az ajánlás, ami elvezetett az új kedvenc dalodhoz? Egy fejlesztő építette azt az algoritmust. Az app, ami segít megosztani a vacsora számlát a barátaiddal? Igen, valaki azt gondolta, "ez idegesítő, ezt meg tudnám oldani," és aztán... megoldotta! +És eztől ma is minden reggel libabőrös leszek: szó szerint *minden* digitális az életedben onnan indult, hogy valaki, pont olyan, mint te, valószínűleg pizsamában, egy kávéval, gépelte a kódot a laptopján. Az az Instagram filter, ami tökéletessé tesz? Valaki megírta azt a kódot. Az az ajánlás, ami az új kedvenc dalodhoz vezetett? Egy fejlesztő készítette azt az algoritmust. Az az app, ami segít elosztani a vacsora számlát a barátaiddal? Igen, valaki arra gondolt, hogy "ez idegesítő, biztos meg tudom ezt oldani," és aztán... megoldotta! -Amikor megtanulsz programozni, nemcsak egy új készséget szerzel, hanem része leszel egy hihetetlen közösségnek, akik a napjaikat azzal töltik, hogy azon gondolkodnak: "Mi lenne, ha olyasmit építhetnék, ami valakinek a napját egy kicsit jobbá teszi?" Őszintén, van ennél menőbb? +Amikor megtanulod a programozást, nem csak egy új készséget sajátítasz el – egy elképesztő problémamegoldó közösség tagja leszel, akik nap mint nap azt gondolják: "Mi lenne, ha építenék valamit, ami egy kicsit jobbá teszi valaki napját?" Őszintén, van ennél menőbb dolog? -✅ **Érdekesség vadászat**: Amikor lesz egy szabad perce, nézz utána ennek – ki volt szerinted a világ első számítógépes programozója? Egy tipp: nem az, akire számítanál! Az ő története abszolút lenyűgöző, és megmutatja, hogy a programozás mindig a kreatív problémamegoldásról és a dobozon kívüli gondolkodásról szólt. +✅ **Szórakoztató ténykérdezés**: Itt egy szuper dolog, amit nézz meg, ha lesz egy szabad pillanatod – szerinted ki volt a világ első számítógépes programozója? Segítek: nem az, akire először gondolnál! Az ő története abszolút lenyűgöző, és megmutatja, hogy a programozás mindig is kreatív problémamegoldásról és a szokásos gondolkodásmódon túl való gondolkodásról szólt. -### 🧠 **Állj meg egy pillanatra: hogy érzed magad?** +### 🧠 **Ellenőrző pont: Hogy érzed magad?** -**Reflektálj egy kicsit:** -- Most már érted, mit jelent "utasításokat adni a számítógépeknek"? -- Tudsz gondolni olyan napi feladatra, amit programozással automatizálnál? -- Milyen kérdések merültek fel benned a programozással kapcsolatban? +**Szánj egy pillanatot az átgondolásra:** +- Most már érthető a "utasításokat adni a számítógépeknek" gondolata? +- Tudsz gondolni egy mindennapi feladatra, amit szívesen automatizálnál programozással? +- Milyen kérdések motoszkálnak a fejedben ezzel a programozás témával kapcsolatban? -> **Ne feledd**: teljesen normális, ha most néhány fogalom kicsit homályos. A programozás olyan, mintha új nyelvet tanulnál – idő kell, hogy az agyad megépítse az idegpályákat. Nagyon jól csinálod! +> **Emlékezz**: Teljesen normális, ha néhány fogalom most még zavarosnak tűnik. A programozás tanulása olyan, mint egy új nyelv tanulása – idő kell, hogy az agyad kialakítsa az idegpályákat. Jól csinálod! ## A programozási nyelvek olyanok, mint a varázslat különböző ízei -Oké, ez most furcsán fog hangzani, de bízz bennem – a programozási nyelvek nagyon hasonlítanak a különböző zenei stílusokra. Gondolj csak bele: van jazz, ami sima és improvizatív, rock, ami erőteljes és egyenes, klasszikus, ami elegáns és struktúrált, meg hip-hop, ami kreatív és kifejező. Minden stílusnak megvan a maga hangulata, a lelkes rajongó közössége, és mindegyik tökéletes különböző hangulatokhoz és alkalmakhoz. +Oké, ez furcsán fog hangzani, de maradj velem – a programozási nyelvek sokban hasonlítanak a különböző zenei műfajokra. Gondolj csak bele: van jazz, ami sima és improvizatív, rock, ami erőteljes és egyenes, klasszikus, ami elegáns és struktúrált, és hip-hop, ami kreatív és kifejező. Mindegyiknek megvan a saját hangulata, saját lelkes rajongótábora, és mind tökéletes más-más hangulathoz és alkalomhoz. -A programozási nyelvek pont így működnek! Nem használnál ugyanazt a nyelvet egy szórakoztató mobiljáték fejlesztésére, mint amit az óriási mennyiségű klímaadat feldolgozásához használnál, ahogy a death metalt sem játszanád jógán (na jó, a legtöbb jógán nem! 😄). +A programozási nyelvek is pontosan így működnek! Nem ugyanazt a nyelvet használnád egy szórakoztató mobil játékhoz, amit egy óriási klímadata elemzéshez, ahogy egy jógán sem tolnád a death metált (na, a legtöbb jógán mindenesetre! 😄). -De ami mindig lenyűgöz: ezek a nyelvek olyanok, mint a világ legkitartóbb, legbriliánsabb tolmáccsal az oldaladon. Ki tudod fejezni az ötleteidet úgy, hogy az természetes legyen az emberi agyadnak, ők pedig elvégzik azt a hihetetlenül komplex munkát, hogy átültessék azt az 1-esekbe és 0-kba, amit a számítógépek beszélnek. Olyan, mintha lenne egy barátod, aki tökéletesen beszéli az "emberi kreativitás" és a "számítógépes logika" nyelvét – és soha nem fárad el, nem kér kávészünetet, és soha nem ítél meg, ha kétszer kérdezel ugyanarról! +De ami minden alkalommal teljesen leterít, amikor erre gondolok: ezek a nyelvek olyanok, mintha a világ legelnézőbb, legbriliánsabb tolmácsa ülne melletted. Az ötleteidet úgy tudod kifejezni, ahogy az emberi agyad számára természetes, és ők elvégzik azt az elképesztően bonyolult munkát, hogy lefordítsák azt az 1-esekre és 0-kra, amit a számítógépek ténylegesen értenek. Olyan, mintha lenne egy barátod, aki tökéletesen beszéli mind az "emberi kreativitást", mind a "számítógépes logikát" – és soha nem fárad el, soha nem kell kávészünet, és soha nem káromkodik, ha kétszer kérdezel ugyanazt! -### Népszerű programozási nyelvek és hogyan használják őket +### Népszerű programozási nyelvek és felhasználásuk ```mermaid mindmap @@ -92,7 +92,7 @@ mindmap TypeScript JavaScript + típusok Vállalati alkalmazások - Adat & Mesterséges intelligencia + Adat & MI Python Adattudomány Gépi tanulás @@ -100,7 +100,7 @@ mindmap R Statisztika Kutatás - Mobilalkalmazások + Mobil alkalmazások Java Android Vállalati @@ -113,69 +113,69 @@ mindmap Rendszerek & Teljesítmény C++ Játékok - Teljesítménykritikus + Teljesítmény kritikus Rust Memóriabiztonság Rendszerprogramozás Go Felhőszolgáltatások - Skálázható háttér + Skálázható backend ``` -| Nyelv | Legjobb erre | Miért népszerű | +| Nyelv | Legjobb hozzá | Miért népszerű | |----------|----------|------------------| | **JavaScript** | Webfejlesztés, felhasználói felületek | Böngészőkben fut, interaktív weboldalakat hajt | -| **Python** | Adattudomány, automatizálás, mesterséges intelligencia | Könnyen olvasható, tanulható, erős könyvtárak | -| **Java** | Vállalati alkalmazások, Android appok | Platformfüggetlen, robosztus nagy rendszerekhez | -| **C#** | Windows alkalmazások, játékfejlesztés | Erős Microsoft ökoszisztéma támogatás | -| **Go** | Felhőszolgáltatások, backend rendszerek | Gyors, egyszerű, modern számítástechnikához tervezett | +| **Python** | Adattudomány, automatizálás, mesterséges intelligencia | Könnyű olvasni és tanulni, erőteljes könyvtárak | +| **Java** | Vállalati alkalmazások, Android appok | Platformfüggetlen, robusztus nagy rendszerekhez | +| **C#** | Windows alkalmazások, játékfejlesztés | Erős Microsoft támogatás | +| **Go** | Felhőszolgáltatások, backend rendszerek | Gyors, egyszerű, modern számítástechnikának tervezve | -### Magas szintű vs. alacsony szintű nyelvek +### Magas szintű vs alacsony szintű nyelvek -Oké, ez volt az a koncepció, ami totálisan megzavarta az agyam, amikor először kezdtem tanulni, úgyhogy most megosztom azt a hasonlatot, ami nekem végre bejött – és nagyon remélem, neked is segít majd! +Oké, őszintén szólva ez volt az a fogalom, ami teljesen összezavart, amikor először kezdtem tanulni, úgyhogy megosztom veled azt az analógiát, ami végül világossá tette számomra – és nagyon remélem, hogy neked is segíteni fog! -Képzeld el, hogy olyan országban jársz, ahol nem beszéled a nyelvet, és nagyon muszáj megtalálnod a legközelebbi mosdót (mindenki volt már így, nem? 😅): +Képzeld el, hogy egy olyan országba látogatsz, ahol nem beszéled a nyelvet, és kétségbeesetten keresed a legközelebbi mosdót (mindannyian voltunk már így, ugye? 😅): -- **Az alacsony szintű programozás** olyan, mint megtanulni az adott helyi dialektust annyira jól, hogy beszélgetsz a sarkon gyümölcsöt áruló nagymamával kulturális utalásokkal, helyi szlenggel és bennfentes poénokkal, amit csak az értene, aki ott nőtt fel. Szuper impresszív és hihetetlenül hatékony... ha tényleg folyékony vagy! De elég túlterhelő, ha csak mosdót keresel. +- **Az alacsony szintű programozás** olyan, mintha annyira megismernéd a helyi dialektust, hogy tudsz beszélgetni a saroknál gyümölcsöt árusító nagymamával kulturális utalásokkal, helyi szlenggel és belső poénokkal, csak azzal, aki ott nőtt fel. Szuper impresszív és hihetetlenül hatékony… ha véletlenül folyékony vagy! De elég megterhelő, ha csak egy mosdót próbálsz találni. -- **A magas szintű programozás** olyan, mintha lenne egy szuper helyi barátod, aki tökéletesen ért téged. Egyszerű angolsággal megmondod neki, hogy "Nagyon kellene egy mosdó," és ő lebonyolítja a kulturális fordítást, és olyan útbaigazítást ad, ami tökéletesen érthető a nem helyi agyadnak. +- **A magas szintű programozás** olyan, mintha meglenne az a csodás helyi barátod, aki egyszerűen megért. Mondhatod neki angolul, hogy "nagyon szükségem van egy mosdóra," és ő intéz minden kulturális fordítást, és olyan irányba mutat, ami teljesen érthető a nem helyi agyadnak. Programozási értelemben: -- **Az alacsony szintű nyelvek** (mint az Assembly vagy a C) lehetővé teszik, hogy hihetetlenül részletesen beszélj a számítógép tényleges hardverével, de gép módjára kell gondolkodnod, ami... hát elég nagy fejben váltás! -- **A magas szintű nyelvek** (mint a JavaScript, Python vagy C#) lehetővé teszik, hogy emberként gondolkodj, miközben megoldják helyetted a gépi nyelvet a háttérben. Ráadásul olyan befogadó közösségeik vannak, tele olyan emberekkel, akik emlékeznek rá, milyen újnak lenni, és tényleg szeretnének segíteni! +- **Alacsony szintű nyelvekkel** (mint az Assembly vagy C) hihetetlenül részletes beszélgetéseket folytathatsz a számítógép tényleges hardverével, de gépként kell gondolkodnod, ami... nos, elég nagy agyi váltás! +- **Magas szintű nyelvekkel** (JavaScript, Python vagy C# például) emberként gondolkodhatsz, miközben ők intézik a gépes nyelvet a háttérben. Ráadásul olyan barátságos közösségek vesznek körül, akik emlékeznek, milyen újonnan kezdeni, és tényleg segíteni akarnak! -Találd ki, melyiket javaslom, hogy kezdd el! 😉 A magas szintű nyelvek olyanok, mint a segédkerekek, amiket soha nem akarod levenni, mert sokkal élvezetesebbé teszik az egész tanulási folyamatot! +Tippeld meg, mivel kezdeném? 😉 A magas szintű nyelvek olyanok, mint a támaszkerek, amiket soha nem akarsz lehúzni, mert sokkal élvezetesebbé teszik az egész élményt! ```mermaid flowchart TB - A["👤 Emberi Gondolat:
'Ki akarom számítani a Fibonacci számokat'"] --> B{Válassz Nyelvi Szintet} + A["👤 Emberi gondolat:
'Fibonacci számokat akarok számolni'"] --> B{Válassz nyelvi szintet} B -->|Magas szintű| C["🌟 JavaScript/Python
Könnyű olvasni és írni"] - B -->|Alacsony szintű| D["⚙️ Assembly/C
Közvetlen hardver vezérlés"] + B -->|Alacsony szintű| D["⚙️ Assembly/C
Közvetlen hardvervezérlés"] - C --> E["📝 Írd: fibonacci(10)"] - D --> F["📝 Írd: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Írj: fibonacci(10)"] + D --> F["📝 Írj: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Számítógép Értelmezés:
A fordító kezeli a bonyolultságot"] + E --> G["🤖 Számítógép értelmezése:
A fordító kezeli a bonyolultságot"] F --> G - G --> H["💻 Ugyanaz az Eredmény:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Ugyanaz az eredmény:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Megmutatom, miért barátságosabbak a magas szintű nyelvek +### Hadd mutassam meg, miért barátságosabbak a magas szintű nyelvek -Rendben, mutatok neked valamit, ami tökéletesen bemutatja, hogy miért szerettem meg a magas szintű nyelveket, de előbb meg kell ígérned valamit. Amikor meglátod az első kódpéldát, ne pánikolj! Félőnek kell kinéznie. Ez a lényeg! +Rendben, mutatok valamit, ami tökéletesen példázza, miért szerettem meg a magas szintű nyelveket, de először meg kell ígérned valamit. Amikor meglátod az első kódpéldát, ne ess pánikba! Az pont azért tűnik ijesztőnek. Ez az, amit ki akarok emelni! -Azonos feladatot fogunk megnézni két teljesen különböző stílusban leírva. Mindkettő a Fibonacci-sorozatot hozza létre – ez egy gyönyörű matematikai minta, ahol minden szám az előző kettő összege: 0, 1, 1, 2, 3, 5, 8, 13... (Érdekesség: ezt a mintát szó szerint mindenütt megtalálod a természetben – napraforgómag spirálokban, fenyőtoboz mintákban, még a galaxisképződésben is!) +Megnézünk ugyanazt a feladatot két teljesen különböző stílusban. Mindkettő létrehozza az úgynevezett Fibonacci sorozatot – ez egy gyönyörű matematikai minta, ahol az egyes szám a kettő előző összege: 0, 1, 1, 2, 3, 5, 8, 13... (Érdekesség: ezt a mintát szinte mindenhol megtalálod a természetben – napraforgómag-spirálokban, fenyőtoboz mintákban, még a galaxisok formálódásában is!) -Készen állsz, hogy lásd a különbséget? Gyerünk! +Készen állsz megnézni a különbséget? Gyerünk! **Magas szintű nyelv (JavaScript) – Emberbarát:** ```javascript -// 1. lépés: Alap Fibonacci beállítás +// 1. lépés: Alapvető Fibonacci beállítás const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,10 +183,10 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Ez a kód a következőt csinálja:** -- **Deklarál** egy állandót, ami megadja, hány Fibonacci számot akarunk generálni -- **Inicializál** két változót, hogy követni tudjuk az aktuális és következő számot a sorozatban -- **Beállítja** az induló értékeket (0 és 1), amelyek definiálják a Fibonacci mintát +**Ezt csinálja ez a kód:** +- **Deklarál** egy konstans értéket, hogy megadja, hány Fibonacci számot akarunk generálni +- **Inicializál** két változót, hogy kövesse a sorozat aktuális és következő számát +- **Beállítja** a kezdő értékeket (0 és 1), amelyek meghatározzák a Fibonacci mintát - **Megjelenít** egy fejléc üzenetet, hogy azonosítsa a kimenetet ```javascript @@ -194,18 +194,18 @@ console.log('Fibonacci sequence:'); for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Számítsa ki a következő számot a sorozatban + // Számítsd ki a sorozat következő számát const sum = current + next; current = next; next = sum; } ``` -**Megnézzük lépésről lépésre, mi történik:** -- **Végigmegyünk** a sorozat minden helyén egy `for` ciklust használva -- **Megjelenít** minden számot a helyével együtt sablon szövegként formázva -- **Kiszámítja** a következő Fibonacci számot az aktuális és a következő érték összeadásával -- **Frissíti** a nyomon követő változókat, hogy továbblépjünk a következő iterációra +**Itt mi történik pontosan:** +- **Bejár** minden pozíciót a sorozatunkban egy `for` ciklus segítségével +- **Megjeleníti** minden számot a helyzetével együtt sablon-karakterlánc formátumban +- **Kiszámolja** a következő Fibonacci számot az aktuális és következő összeadásával +- **Frissíti** a nyomon követő változókat, hogy lépjen a következő iterációra ```javascript // 3. lépés: Modern funkcionális megközelítés @@ -224,11 +224,11 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Az előbb:** -- **Létrehoztunk** egy újrahasználható függvényt modern nyílfüggvény szintaxissal -- **Építettünk** egy tömböt, hogy a teljes sorozatot tároljuk, nem csupán egyesével jelenítsük meg -- **Használtuk** a tömb indexelést, hogy a korábbi értékekből számítsuk ki az új számokat -- **Visszaadtuk** a teljes sorozatot, hogy más részeken is rugalmasan használható legyen +**A fentiekben:** +- **Létrehoztunk** egy újrafelhasználható függvényt modern nyílfüggvény szintaxissal +- **Építettünk** egy tömböt, hogy tároljuk a teljes sorozatot ahelyett, hogy egyenként megjelenítjük +- **Használtuk** a tömb indexelést, hogy kiszámítsuk az új számokat az előzőkből +- **Visszaadtuk** a teljes sorozatot, hogy rugalmasan használhassuk a program más részeiben **Alacsony szintű nyelv (ARM Assembly) – Számítógépbarát:** @@ -257,27 +257,28 @@ back add r0,r1 end ``` -Figyeld meg, hogy a JavaScript verzió szinte úgy olvasható, mint az angol utasítások, míg az Assembly verzió titokzatos parancsokat használ, amelyek közvetlenül a számítógép processzorát vezérlik. Mindkettő ugyanazt a feladatot oldja meg, de a magas szintű nyelvet sokkal könnyebb az embereknek érteni, írni és karbantartani. +Észreveheted, hogy a JavaScript verzió majdnem úgy olvasható, mint egy angol nyelvű utasítás, míg az Assembly verzió titokzatos parancsokat használ, amelyek közvetlenül vezérlik a számítógép processzorát. Mindkettő ugyanazt a feladatot oldja meg, de a magas szintű nyelvet sokkal könnyebb az embereknek megérteni, írni és karbantartani. -**Fő különbségek, amik feltűnnek:** -- **Olvashatóság**: a JavaScript leíró neveket használ, például `fibonacciCount`, míg az Assembly titkosított címkéket, mint `r0`, `r1` -- **Megjegyzések**: A magas szintű nyelvek elősegítik az olyan magyarázó megjegyzéseket, amelyekkel a kód önmagát dokumentálja -- **Szerkezet**: A JavaScript logikai folyamata megfelel annak, ahogy az emberek lépésről lépésre gondolkodnak a problémákról +**A legfontosabb különbségek, amiket észre fogsz venni:** +- **Olvashatóság**: A JavaScript leíró neveket használ, mint például `fibonacciCount`, míg az Assembly titkosított címkéket, például `r0`, `r1` +- **Megjegyzések**: A magas szintű nyelvek bátorítják a magyarázó megjegyzéseket, amelyek önmagukat dokumentálóvá teszik a kódot +- **Struktúra**: A JavaScript logikai folyamata megfelel annak, ahogyan az emberek lépésről lépésre gondolkodnak a problémákról - **Karbantartás**: A JavaScript verzió frissítése különböző követelményekhez egyszerű és világos -✅ **A Fibonacci-sorról**: Ez a gyönyörű szám-minta (ahol minden szám az előző kettő összege: 0, 1, 1, 2, 3, 5, 8...) szinte *mindenütt* megjelenik a természetben! Megtalálod a napraforgó csigavonalában, fenyőtoboz mintázatában, a nautilusz kagylók görbületében, sőt még a faágak növekedésében is. Egészen elképesztő, hogy a matematika és a programozás hogyan segít nekünk megérteni és újraalkotni azokat a mintákat, amelyeket a természet a szépség létrehozásához használ! +✅ **A Fibonacci-sorozatról**: Ez a gyönyörű szám-minta (ahol minden szám az előtte lévő két szám összege: 0, 1, 1, 2, 3, 5, 8...) szó szerint *mindenütt* megjelenik a természetben! Megtalálod a napraforgó spiráljaiban, fenyőtoboz mintákban, a nautilusz kagylók görbületeiben, és még abban is, hogyan nőnek a faágak. Elképesztő, hogy a matematika és a kód hogyan segít megérteni és újrateremteni azokat a mintákat, amelyeket a természet használ a szépség létrehozásához! -## Az építőelemek, amelyek a varázslatot működtetik -Rendben, most, hogy láttad, hogyan néznek ki a programozási nyelvek a gyakorlatban, bontsuk le az alapvető részeket, amelyek szó szerint minden valaha írt programot felépítenek. Gondolj rájuk úgy, mint az alapvető hozzávalók a kedvenc receptedben – ha megérted, mit csinál mindegyik, akkor gyakorlatilag bármilyen nyelven tudsz kódot olvasni és írni! +## Az építőkövek, amelyek a varázslatot létrehozzák -Ez nagyjából olyan, mintha megtanulnád a programozás nyelvtanát. Emlékszel, amikor az iskolában tanultál a főnévről, igéről és hogy hogyan állítsd össze a mondatokat? A programozásnak is megvan a maga nyelvtana, és őszintén szólva, sokkal logikusabb és megengedőbb, mint az angol nyelvtan valaha is volt! 😄 +Rendben, most, hogy láttad, hogy hogyan néznek ki a programozási nyelvek működés közben, bontsuk le az alapvető elemeket, amelyek szó szerint minden valaha írt programot alkotnak. Gondolj ezekre úgy, mint a kedvenc recepted nélkülözhetetlen összetevőire – ha egyszer megérted, hogy melyik mit csinál, képes leszel kódot olvasni és írni gyakorlatilag bármilyen nyelven! -### Utasítások: Lépésről lépésre szóló instrukciók +Ez hasonló a programozás nyelvtanának megtanulásához. Emlékszel, amikor az iskolában tanultad a főnevekről, igékről és arról, hogy hogyan épülnek mondatok? A programozásnak is megvan a maga nyelvtana, és őszintén szólva, sokkal logikusabb és engedékenyebb, mint az angol nyelvtan valaha volt! 😄 -Kezdjük az **utasításokkal** – ezek olyanok, mint egyén mondatok egy beszélgetésben a számítógépeddel. Minden utasítás azt mondja meg a számítógépnek, hogy csináljon meg egy konkrét dolgot, olyan, mintha útbaigazítást adnál: „Fordulj erre balra,” „Állj meg a piros lámpánál,” „Parkolj abba a helybe.” +### Utasítások: Lépésről lépésre szóló parancsok -Amiért szeretem az utasításokat, az az, hogy általában mennyire olvashatóak. Nézd csak: +Kezdjük az **utasításokkal** – ezek olyanok, mint egy-egy mondat a számítógéppel folytatott beszélgetésben. Minden utasítás arra kéri a számítógépet, hogy végezzen el egy meghatározott dolgot, olyasmi mint az útmutatások: „Fordulj balra itt,” „Állj meg a piros lámpánál,” „Parkolj be abba a helybe.” + +Amit szeretek az utasításokban, hogy általában mennyire olvashatóak. Nézd csak meg ezt: ```javascript // Alapvető utasítások, amelyek egyetlen műveletet hajtanak végre @@ -286,10 +287,10 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Ez a kód ezt csinálja:** -- **Deklarál** egy konstans változót egy felhasználói név tárolására +**Ez a kód a következőt csinálja:** +- **Deklarál** egy konstans változót a felhasználó nevének tárolására - **Megjelenít** egy üdvözlő üzenetet a konzol kimeneten -- **Kiszámol** és tárol egy matematikai művelet eredményét +- **Kiszámít** és eltárol egy matematikai művelet eredményét ```javascript // Utasítások, amelyek weboldalakkal lépnek kapcsolatba @@ -298,18 +299,18 @@ document.body.style.backgroundColor = "lightblue"; ``` **Lépésről lépésre, ez történik:** -- **Módosítja** az oldal címét, ami a böngésző fülön jelenik meg -- **Megváltoztatja** az egész oldal testének háttérszínét +- **Módosítja** az oldal címét, ami a böngésző fülében jelenik meg +- **Megváltoztatja** az egész oldal háttérszínét ### Változók: A programod memóriarendszere -Rendben, a **változók** az egyik abszolút kedvenc fogalmam tanítani, mert nagyon hasonlítanak azokhoz a dolgokhoz, amiket már nap mint nap használsz! +Oké, a **változók** az egyik abszolút kedvenc koncepcióm tanítani, mert annyira olyanok, mint amiket nap mint nap használsz! -Gondolj csak a telefonod névjegyzékére egy pillanatra. Nem jegyzed meg mindenki telefonszámát – helyette elmented például „Anya,” „Legjobb Barát,” vagy „Pizza Ház, ami éjfélig szállít,” és a telefonod emlékszik a tényleges számokra. A változók pontosan így működnek! Olyan, mintha címkézett tárolók lennének, ahol a programod képes adatokat tárolni és egy későbbi időpontban elérni egy értelmes név segítségével. +Gondolj egy pillanatra a telefonod névjegyzékére. Nem jegyzed meg minden számot – helyette elmented, hogy „Anyu”, „Legjobb barát”, vagy „Pizzéria, ami 2-ig szállít” és a telefonod emlékszik a tényleges számokra. A változók pontosan így működnek! Olyan címkézett tárolóedények, ahol a programod információkat menthet és később név alapján visszakeresheti azokat. -Ami igazán klassz: a változók megváltozhatnak, amíg a program fut (innen ered a "változó" név – érted, mit csinálnak?). Ahogy frissítheted a pizza hely elérhetőségét, mert találsz jobbat, úgy a változók is módosíthatók, amikor a program új információkat tanul vagy a helyzetek változnak! +És ami igazán klassz: a változók a program futása közben változhatnak (innen ered a „változó” név – látod, mit csináltak?). Ahogy frissítheted a pizzéria elérhetőségeit, amikor találsz egy még jobbat, a programod is frissítheti a változókat, ahogy új információkat tanul vagy ahogy a helyzet változik! -Megmutatom, milyen egyszerű és gyönyörű ez: +Mutatom, milyen gyönyörűen egyszerű lehet ez: ```javascript // 1. lépés: Alapvető változók létrehozása @@ -320,13 +321,13 @@ let isRaining = false; ``` **Ezeknek a fogalmaknak a megértése:** -- **Tárol** változatlan értékeket `const` változókban (például az oldal neve) -- **Használ** `let` változókat olyan értékekhez, amelyek változhatnak a program során -- **Hozzárendel** különböző adattípusokat: sztringeket (szöveg), számokat és booleanokat (igaz/hamis) -- **Választ** beszédes neveket, amelyek elmagyarázzák, hogy mit tartalmaz minden változó +- **Tárol** állandó értékeket `const` változókban (például az oldal nevét) +- **Használ** `let` változókat olyan értékekhez, amelyek változhatnak a program futása során +- **Társít** különböző adattípusokat: szövegek (stringek), számok és logikai értékek (true/false) +- **Választ** beszédes neveket, amelyek elmagyarázzák, mit tartalmaz az adott változó ```javascript -// 2. lépés: Objektumok használata az összetartozó adatok csoportosításához +// 2. lépés: Objektumok használata kapcsolódó adatok csoportosításához const weatherData = { location: "San Francisco", humidity: 65, @@ -334,10 +335,10 @@ const weatherData = { }; ``` -**A fenti példa ezt tette:** -- **Létrehozott** egy objektumot az összetartozó időjárási információk csoportosítására -- **Rendszerezett** több adatot egy változónév alatt -- **Használt** kulcs-érték párokat az adatok világos megjelölésére +**Az előzőben:** +- **Létrehoztunk** egy objektumot, hogy egy csoportba rendezzük az időjárási adatokat +- **Szerveztünk** több adatot egy változónév alatt +- **Használtunk** kulcs-érték párokat az egyes adatdarabok egyértelmű megjelölésére ```javascript // 3. lépés: Változók használata és frissítése @@ -349,11 +350,11 @@ currentWeather = "cloudy"; temperature = 68; ``` -**Nézzük meg mindegyik részt:** -- **Megjelenít** információt sablon literálokkal `${}` szintaxissal -- **Hozzáfér** objektum tulajdonságokhoz pont notációval (`weatherData.windSpeed`) -- **Frissít** `let`-tel deklarált változókat, hogy tükrözzék a változó állapotokat -- **Összekapcsol** több változót, hogy értelmes üzeneteket hozzon létre +**Nézzük meg részletesen:** +- **Megjelenítés** sablon literálok segítségével a `${}` szintaxissal +- **Hozzáférés** objektum tulajdonságaihoz pontozással (`weatherData.windSpeed`) +- **Frissítés** `let` változókkal, hogy tükrözze a változó körülményeket +- **Összekombinálás** több változóból, hogy értelmes üzeneteket alkossunk ```javascript // 4. lépés: Modern destrukturálás a tisztább kódért @@ -361,20 +362,20 @@ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Amit tudnod kell:** -- **Kivesz** specifikus tulajdonságokat objektumokból destrukturálással -- **Létrehoz** új változókat automatikusan ugyanazzal a névvel, mint az objektum kulcsai -- **Egyszerűsít** kódot ismétlődő pont notáció nélkül +**Amit tudni kell:** +- **Kinyerés** objektumokból specifikus tulajdonságokat destrukturálással +- **Automatikus** új változók létrehozása ugyanazzal a névvel, mint az objektum kulcsai +- **Egyszerűsítés** a kódon az ismétlődő pontozás elkerülésével -### Vezérlési folyamat: Programod gondolkodásának tanítása +### Vezérlési folyamat: Megtanítani a programot gondolkodni -Na most jön az, ahol a programozás tényleg elképesztővé válik! A **vezérlési folyamat** tulajdonképpen annak megtanítása, hogyan hozzon okos döntéseket a programod, pont úgy, ahogy te is nap mint nap anélkül, hogy gondolkodnál rajta. +Oké, itt válik a programozás igazán lenyűgözővé! A **vezérlési folyamat** tulajdonképpen azt jelenti, hogy megtanítod a programodat okosan dönteni, pontosan úgy, ahogy te is teszed nap mint nap gondolkodás nélkül. -Képzeld el: ma reggel valószínűleg ilyen gondolatmeneted volt: „Ha esik, viszek esernyőt. Ha hideg van, felveszem a kabátot. Ha elkésnék, kihagyom a reggelit és veszek egy kávét útközben.” Az agyad természetesen követi ezt az ha-akkor logikát naponta százszor! +Képzeld el: ma reggel valószínűleg valami olyasmit csináltál, hogy „Ha esik, viszek esernyőt. Ha hideg van, kabátot veszek. Ha elkések, kihagyom a reggelit és útközben veszek kávét.” Az agyad automatikusan követi ezt az ha-akkor logikát naponta több tucatszor! -Ez az, ami miatt a programok intelligensnek és élőnek érződnek, nem pedig egy unalmas, kiszámítható scriptnek. Valóban meg tudják nézni a helyzetet, értékelni, mi történik, és megfelelően reagálni. Ez olyan, mintha agyat adnál a programodnak, ami alkalmazkodni tud és döntéseket hoz! +Ez az, ami miatt a programok intelligensnek és élőnek érződnek, nem pedig egy unalmas, kiszámítható forgatókönyvet követnek. Valóban képesek megnézni a helyzetet, kiértékelni, hogy mi történik, és megfelelően reagálni. Olyan, mintha az általad írt programnak agya lenne, ami alkalmazkodni tud és döntéseket hoz! -Látni akarod, milyen szépen működik ez? Megmutatom: +Szeretnéd látni, milyen gyönyörűen működik ez? Megmutatom: ```javascript // 1. lépés: Alapvető feltételes logika @@ -388,11 +389,11 @@ if (userAge >= 18) { } ``` -**Ez a kód ezt csinálja:** -- **Ellenőrzi**, hogy a felhasználó életkora megfelel-e a szavazási követelménynek -- **Végrehajt** különböző kódrészeket a feltétel eredménye alapján -- **Kiszámol** és megjeleníti, mennyi idő van még vissza a szavazati jogig, ha kevesebb, mint 18 -- **Ad** specifikus, hasznos visszajelzést az egyes helyzetekre +**Ez a kód a következőt teszi:** +- **Ellenőrzi**, hogy a felhasználó életkora megfelel-e a szavazati korhatárnak +- **Végrehajt** különböző kódrészleteket a feltétel eredményétől függően +- **Kiszámít** és megjeleníti, mennyi idő van még szavazati jogosultságig, ha az illető 18 alatti +- **Ad** konkrét, hasznos visszajelzést minden esetre ```javascript // 2. lépés: Több feltétel logikai operátorokkal @@ -408,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Ennek a lebontása:** -- **Összekapcsol** több feltételt az `&&` (és) operátorral -- **Készít** feltételi hierarchiát `else if` használatával több forgatókönyvhöz -- **Kezel** minden lehetséges esetet egy végső `else` ággal -- **Ad** egyértelmű, cselekvő visszajelzést az egyes helyzetekhez +**Lépésről lépésre, ez történik:** +- **Egyesít** több feltételt az `&&` (és) operátorral +- **Létrehozza** a feltételek hierarchiáját `else if`-ekkel több forgatókönyvhöz +- **Kezeli** az összes lehetséges esetet egy végső `else` utasítással +- **Ad** világos, cselekvésre ösztönző visszajelzést minden különböző helyzethez ```javascript -// 3. lépés: Rövid feltételes kifejezés ternáris operátorral +// 3. lépés: Tömör feltételes kifejezés ternáris operátorral const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Ezt érdemes megjegyezni:** -- **Használ** ternáris operátort (`? :`) egyszerű kétválasztásos feltételeknél -- **Írja** elsőként a feltételt, majd `?`, aztán igaz érték, majd `:`, végül hamis érték -- **Alkalmazza** ezt a mintát, ha értékeket kell hozzárendelni feltételek alapján +**Mit érdemes megjegyezni:** +- **Használja** a ternáris operátort (`? :`) egyszerű kétválasztásos feltételekhez +- **Írd** először a feltételt, majd `?`, aztán az igaz eredményt, majd `:`, végül a hamis eredményt +- **Alkalmazd** ezt a mintát, amikor feltételek szerint kell értékeket hozzárendelni ```javascript -// 4. lépés: Több specifikus eset kezelése +// 4. lépés: Több speciális eset kezelése const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -446,54 +447,54 @@ switch (dayOfWeek) { } ``` -**Ez a kód a következőt teszi:** -- **Összehasonlít** egy változó értékét több speciális esettel -- **Csoportosít** hasonló eseteket (hétköznapok vs. hétvégék) -- **Végrehajt** a megfelelőt, ha egyezést talál -- **Tartalmaz** egy `default` esetet váratlan értékekre -- **Használ** `break` utasításokat, hogy megakadályozza a következő eset végrehajtását +**Ez a kód a következőt éri el:** +- **Összehasonlítja** a változó értékét több konkrét esettel +- **Csoportosít** hasonló eseteket (hétköznapok versus hétvégék) +- **Végrehajtja** a megfelelő kódrészt, ha egyezés van +- **Tartalmaz** egy `default` esetet a váratlan értékek kezelésére +- **Használ** `break` utasításokat, hogy megakadályozza a folytatást a következő esethez -> 💡 **Valós példa**: Gondolj a vezérlési folyamatra úgy, mint a világ legpáciensebb GPS-ére, ami útbaigazítást ad. Például: „Ha torlódás van a Fő utcán, inkább menj az autópályán. Ha az útépítés blokkolja az autópályát, válassz egy panorámás utat.” A programok pontosan ilyen feltételes logikát használnak, hogy okosan reagáljanak különböző helyzetekre, mindig a legjobb élményt nyújtva a felhasználóknak. +> 💡 **Valós példával**: Gondolj a vezérlési folyamatra úgy, mint a világ legjobb türelmes GPS-ére, ami útbaigazítást ad. A GPS mondhatja: „Ha a Main Street-en forgalom van, inkább menj az autópályán. Ha az autópályát építkezés zárja el, próbáld a panorámás utat.” A programok pontosan ugyanolyan feltételes logikát használnak, hogy intelligensen reagáljanak különböző helyzetekre, és mindig a legjobb felhasználói élményt nyújtsák. -### 🎯 **Fogalmi ellenőrzés: Az építőelemek mesterfogása** +### 🎯 **Fogalomellenőrzés: Az építőelemek mesteri elsajátítása** -**Nézzük, hogy állsz az alapokkal:** -- Tudod magadnak elmagyarázni a változó és az utasítás közötti különbséget? -- Gondolj egy valós helyzetre, ahol egy ha-akkor döntést alkalmaznál (például a szavazási példánk) -- Mi az, ami a programozási logikából meglepett téged? +**Nézzük, hogyan megy az alapok megértése:** +- Tudod saját szavaiddal elmagyarázni a változó és az utasítás közti különbséget? +- Gondolj egy valós életbeli helyzetre, ahol if-then döntést használnál (például a szavazós példa) +- Mi volt az egyik dolog a programozási logikában, ami meglepett? -**Gyors önbizalom növelő:** +**Gyors önbizalom-növelő:** ```mermaid flowchart LR - A["📝 Állítások
(Utasítások)"] --> B["📦 Változók
(Tárolás)"] --> C["🔀 Vezérlés
(Döntések)"] --> D["🎉 Működő program!"] + A["📝 Utasítások
(Instrukciók)"] --> B["📦 Változók
(Tárolás)"] --> C["🔀 Vezérlési Áramlás
(Döntések)"] --> D["🎉 Működő program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Mi jön ezután**: Igazán jól fogjuk magunkat érezni, mélyebben elmerülve ezekben a fogalmakban ezen az elképesztő úton együtt! Most csak arra fókuszálj, hogy érzed a lelkesedést a rengeteg csodás lehetőség miatt, ami előtted áll. A konkrét készségek és technikák természetesen ragadni fognak, ahogy együtt gyakorolunk – ígérem, ez sokkal szórakoztatóbb lesz, mint gondolnád! +✅ **Mi következik ezután**: Nagyszerű szórakozás lesz mélyebben belemerülni ezekbe a fogalmakba, miközben közösen folytatjuk ezt a hihetetlen utazást! Most csak arra koncentrálj, hogy érezd azt az izgalmat az összes elképesztő lehetőség miatt, ami előtted áll. A konkrét készségek és technikák természetesen rögzülnek majd, ahogy együtt gyakorolunk – ígérem, sokkal szórakoztatóbb lesz, mint gondolnád! -## Az eszközök +## A szakma eszközei -Nos, ez az a pont, ahol igazán izgatott vagyok, és alig bírom magamban tartani! 🚀 Most azokról az elképesztő eszközökről beszélünk, amelyekkel úgy fogod érezni, mintha épp egy digitális űrhajó kulcsait adnák a kezedbe. +Rendben, ez az a pont, ahol őszintén annyira izgatott leszek, hogy alig bírom türtőztetni magam! 🚀 Most arról fogunk beszélni, hogy milyen elképesztő eszközök fognak úgy éreztetni, mintha épp egy digitális űrhajó kulcsait adnák a kezedbe. -Ismered azt az érzést, amikor egy séfnek tökéletesen kiegyensúlyozott kések vannak, amelyek egyenesen a kezének nyúlnak? Vagy amikor a zenésznek van az az egy gitárja, ami mintha dalolna, amint megérinti? Nos, a fejlesztőknek is megvan a saját verziójuk ezekből a varázslatos eszközökből, és olyasmi következik, ami garantáltan el fog kápráztatni – nagy részük teljesen ingyenes! +Tudod, hogy egy szakácsnak milyen tökéletesen kiegyensúlyozott kések vannak, amelyek szinte a kezének meghosszabbításai? Vagy hogy egy zenésznek van az a gitárja, ami az első érintésre mintha énekelne? Nos, a fejlesztőknek megvan a saját verziójuk ezekből a varázseszközökből, és most elmondom, hogy mi az, ami teljesen el fogja kápráztatni az elmédet – a legtöbbjük teljesen ingyenes! -Majdnem kiugrom a székemből, annyira örülök, hogy megoszthatom ezt veled, mert teljesen forradalmasították, ahogy szoftvert építünk. Mesterséges intelligencia által támogatott kódoló asszisztensekről beszélünk, amik segítenek írni a kódodat (komolyan!), felhőalapú környezetekről, ahol tényleg bárhonnan fejleszthetsz Wi-Fi-vel, és hibakereső eszközökről, amelyek olyan kifinomultak, mintha röntgenlátásod lenne a programjaidhoz. +Szinte ugrálok a székemben, hogy megoszthassam veled ezeket, mert teljesen forradalmasították, ahogy szoftvert építünk. Azokról az AI-alapú kódíró asszisztensekről beszélünk, amik képesek segíteni kódot írni (komolyan!), felhőalapú környezetekről, ahol szinte bárhonnan, Wi-Fi-vel teljes alkalmazásokat építhetsz, és hibakereső eszközökről, amelyek olyan kifinomultak, mint ha röntgenlátásuk lenne a programjaidnak. -És itt az a rész, ami még mindig libabőrös: ezek nem "kezdő eszközök", amiket kinősz majd. Pontosan ugyanolyan professzionális szintű eszközök ezek, amelyeket a Google, a Netflix és az az indie app stúdió, amit szeretsz, használ Pont Most. Olyan profinak fogod érezni magad, miközben ezekkel dolgozol! +És itt jön a rész, ami még mindig libabőrös lesz: ezek nem „kezdő eszközök”, amiket kinősz majd. Ezek pontosan ugyanazok a profi minőségű eszközök, amelyeket a Google, Netflix fejlesztői, és az a kedvenc indie app stúdiód most is használnak. Annyira profinak fogod érezni magad, amikor használod őket! ```mermaid graph TD - A["💡 Az Ötleted"] --> B["⌨️ Kód Szerkesztő
(VS Code)"] - B --> C["🌐 Böngésző Fejlesztői Eszközök
(Tesztelés & Hibakeresés)"] - C --> D["⚡ Parancssor
(Automatizálás & Eszközök)"] - D --> E["📚 Dokumentáció
(Tanulás & Hivatkozás)"] + A["💡 Az Ötleted"] --> B["⌨️ Kódszerkesztő
(VS Code)"] + B --> C["🌐 Böngésző Fejlesztői Eszközök
(Tesztelés és Hibakeresés)"] + C --> D["⚡ Parancssor
(Automatizálás és Eszközök)"] + D --> E["📚 Dokumentáció
(Tanulás és Referencia)"] E --> F["🚀 Csodálatos Webalkalmazás!"] - B -.-> G["🤖 Mesterséges Intelligencia Segéd
(GitHub Copilot)"] - C -.-> H["📱 Eszköz Tesztelés
(Reszponzív Dizájn)"] + B -.-> G["🤖 AI Asszisztens
(GitHub Copilot)"] + C -.-> H["📱 Eszköztesztelés
(Reszponzív Tervezés)"] D -.-> I["📦 Csomagkezelők
(npm, yarn)"] E -.-> J["👥 Közösség
(Stack Overflow)"] @@ -504,230 +505,230 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Kódszerkesztők és IDE-k: Az új digitális legjobb barátaid +### Kód szerkesztők és IDE-k: az új digitális legjobb barátaid -Beszéljünk a kódszerkesztőkről – ezek nagyon hamar a kedvenc helyeiddé válnak majd! Gondolj rájuk, mint a személyes kódolási szentélyedre, ahol a legtöbbet fogsz tölteni, miközben megalkotod és tökéletesíted digitális műveidet. +Beszéljünk a kódszerkesztőkről – ezek tényleg a szíved egyik kedvenc helyévé fognak válni! Gondolj rájuk úgy, mint a személyes kódolási szentélyedre, ahol a legtöbb idődet töltöd majd digitális alkotásaid megformálásával és tökéletesítésével. -De ami igazán varázslatos a modern szerkesztőkben: nem csak sima szövegszerkesztők. Olyanok, mintha a legbrilliánsabb, legsegítőkészebb programozási mentor ülne melletted 24/7-ben. Előre észreveszik a helyesírási hibáidat, javaslatokat tesznek, amelyek úgy mutatnak, mintha zseni lennél, segítenek megérteni minden kódrészlet működését, és néhányan még meg is jósolják, amit gépelni akarsz, ajánlják a gondolataid befejezését! +De ami igazán varázslatos a modern szerkesztőkben: nem csak menő szövegszerkesztők. Olyanok, mintha a legbriliánsabb, legtámogatóbb kódolási mentorod ülne melletted éjjel-nappal. Elkapják az elírásaidat, még mielőtt észrevennéd, javaslatokat tesznek, hogy zseninek tűnj, segítenek megérteni, hogy mit csinál minden kódrészlet, és egyesek még meg is próbálják kitalálni, mit akarsz írni és felajánlják, hogy befejezik a gondolataidat! -Emlékszem, amikor először fedeztem fel az automatikus kiegészítést – szó szerint azt éreztem, hogy a jövőben élek. Elkezded gépelni valamit, és a szerkesztőd azt mondja: „Hé, erre a funkcióra gondoltál, ami pont azt csinálja, amire szükséged van?” Olyan, mintha olvasná a gondolataidat a kódoló csapattársad! +Emlékszem, amikor először fedeztem fel az automatikus kiegészítést – szó szerint úgy éreztem, mintha a jövőben élnék. Elkezded gépelni, és a szerkesztőd azt mondja: „Hé, nem ezt a függvényt akartad használni, ami pont azt csinálja, amire szükséged van?” Olyan, mintha egy gondolatolvasó kódoló haverod lenne! -**Mi teszi ezeket a szerkesztőket olyan hihetetlenné?** +**Mi teszi ezeket a szerkesztőket annyira elképesztővé?** -A modern kódszerkesztők lenyűgöző funkciók közelét kínálják, amelyek segítik a termelékenységedet: +A modern kódszerkesztők lenyűgöző funkciók széles skáláját kínálják, amelyek növelik a termelékenységedet: -| Funkció | Mit csinál | Miért hasznos | -|---------|------------|---------------| -| **Szintaxis kiemelés** | Különböző részeket színez a kódban | Könnyebbé teszi a kód olvasását és hibák megtalálását | -| **Automatikus kiegészítés** | Javasol kódot gépelés közben | Gyorsabb kódolást és kevesebb helyesírási hibát eredményez | -| **Hibakereső eszközök** | Segít megtalálni és javítani a hibákat | Órákat takarít meg a hibakeresésben | -| **Kiterjesztések** | Speciális funkciókkal bővíthető | Testreszabhatod a szerkesztőt bármilyen technológiához | -| **AI asszisztensek** | Kódötleteket és magyarázatokat ad | Felgyorsítja a tanulást és a termelékenységet | +| Funkció | Mit csinál | Miért segít | +|---------|------------|-------------| +| **Szintaxis kiemelés** | Más színeket ad a kód különböző részeinek | Könnyebbé teszi az olvasást és a hibák felismerését | +| **Automatikus kiegészítés** | Javasolja a kódot gépelés közben | Felgyorsítja a kódolást és csökkenti az elírásokat | +| **Hibakereső eszközök** | Segít megtalálni és javítani a hibákat | Órákat spórol a hibák keresésén | +| **Bővítmények** | Speciális funkciókat ad hozzá | Testreszabhatod a szerkesztőt bármilyen technológiához | +| **AI asszisztensek** | Kódot és magyarázatokat javasolnak | Gyorsítja a tanulást és a hatékonyságot | -> 🎥 **Videó forrás**: Szeretnéd látni ezeket az eszközöket akció közben? Nézd meg ezt a [Tools of the Trade videót](https://youtube.com/watch?v=69WJeXGBdxg) egy átfogó áttekintésért. +> 🎥 **Videóforrás**: Szeretnéd látni ezeket az eszközöket működés közben? Nézd meg ezt a [Tools of the Trade videót](https://youtube.com/watch?v=69WJeXGBdxg) egy átfogó bemutatóért. #### Ajánlott szerkesztők webfejlesztéshez **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Ingyenes) - A legnépszerűbb a webfejlesztők körében -- Kiváló kiterjesztés ökoszisztéma +- Kiváló bővítmény-rendszer - Beépített terminál és Git integráció -- **Kötelező kiterjesztések**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI alapú kódjavaslatok +- **Kötelező bővítmények**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-alapú kódjavaslatok - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Valós idejű együttműködés - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatikus kódformázás - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Kódhibák elkapása + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Elírások felismerése a kódban **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Fizetős, diákoknak ingyenes) -- Fejlett hibakereső és tesztelő eszközök -- Intelligens kódkiegészítés +- Fejlett hibakeresés és tesztelés +- Intelligens kiegészítés - Beépített verziókezelés -**Felhőalapú IDE-k** (különféle árkategóriák) -- [GitHub Codespaces](https://github.com/features/codespaces) - Teljes VS Code a böngésződben -- [Replit](https://replit.com/) - Remek a tanuláshoz és kódmegosztáshoz -- [StackBlitz](https://stackblitz.com/) - Azonnali, teljes stack webfejlesztés +**Felhőalapú IDE-k** (különféle árképzés) +- [GitHub Codespaces](https://github.com/features/codespaces) - Teljes VS Code a böngészőben +- [Replit](https://replit.com/) - Nagyszerű tanuláshoz és megosztáshoz +- [StackBlitz](https://stackblitz.com/) - Azonnali, teljes webfejlesztés -> 💡 **Kezdő tipp**: Kezdd a Visual Studio Code-dal – ingyenes, iparági szinten széles körben használt, hatalmas közösség készít hozzá hasznos oktatóanyagokat és kiterjesztéseket. +> 💡 **Kezdő tipp**: Kezdd a Visual Studio Code-dal – ingyenes, széles körben használt az iparban, és hatalmas közösség készít hozzá hasznos oktatóanyagokat és bővítményeket. -### Webböngészők: A titkos fejlesztői laboratóriumod +### Web böngészők: a titkos fejlesztői laboratóriumod -Oké, készülj fel, hogy teljesen eláll a lélegzeted! Tudod, hogy böngésződet használtad már közösségi oldalak görgetéséhez és videók nézéséhez? Nos, kiderült, hogy egész idő alatt egy elképesztő titkos fejlesztői laboratóriumot rejtett el előtted, csak arra várva, hogy felfedezd! +Oké, készülj fel, hogy teljesen elbűvöljön ez! Tudod, hogy böngészőket használsz a közösségi média böngészésére és videók nézésére? Nos, kiderült, hogy egész idő alatt rejtegettek egy elképesztő titkos fejlesztői laboratóriumot, csak arra várva, hogy felfedezd! -Minden egyes alkalommal, amikor jobbklikkelsz egy weboldalon és kiválasztod az „Elem ellenőrzése” lehetőséget, egy rejtett fejlesztői eszköztár nyílik meg előtted, ami őszintén szólva erősebb, mint néhány drága szoftver, amelyért korábban százakat fizettem. Olyan, mint amikor felfedezed, hogy a megszokott konyhád mögött egy professzionális séf laboratóriuma van elrejtve egy titkos panel mögött! -Amikor először mutatták meg nekem a böngésző DevTools-t, úgy három órát töltöttem azzal, hogy kattintgattam ide-oda, és azt mondogattam: „VÁRJ, EZT IS TUDJA?!” Gyakorlatilag bármelyik weboldalt valós időben szerkesztheted, pontosan látod, milyen gyorsan töltődnek be az elemek, tesztelheted, hogyan néz ki az oldal különböző eszközökön, és akár JavaScriptet is hibakereshetsz teljes profi módjára. Egészen elképesztő! +Minden alkalommal, amikor az egér jobb gombjával kattintasz egy weboldalon, és kiválasztod az „Elem vizsgálata” lehetőséget, egy rejtett fejlesztői eszközök világát nyitod meg, amelyek őszintén szólva erősebbek, mint néhány drága szoftver, amit korábban száz dollárokért vettem. Olyan, mintha a régi, megszokott konyhád mögött egy profi séf laboratóriuma rejtőzne egy titkos panel mögött! +Amikor először mutatták meg nekem a böngésző fejlesztői eszközeit, olyan három órát töltöttem egyszerű kattintgatással és azon ámuldozva: "VÁRJ, EZT IS TUDJA?!" Szó szerint valós időben szerkeszthetsz bármilyen weboldalt, pontosan láthatod, milyen gyorsan töltődik be minden, tesztelheted, hogyan néz ki az oldal különböző eszközökön, és még JavaScriptet is hibakereshetsz, mint egy profi. Ez egyszerűen hihetetlen! -**Ezért titkos fegyvered a böngésző:** +**Íme, miért titkos fegyvered a böngésző:** -Amikor weboldalt vagy webalkalmazást készítesz, látnod kell, hogyan néz ki és hogyan viselkedik a valóságban. A böngészők nemcsak megjelenítik a munkádat, hanem részletes visszajelzéseket is adnak a teljesítményről, használhatóságról és az esetleges problémákról. +Amikor weboldalt vagy webalkalmazást készítesz, látnod kell, hogy néz ki és hogyan viselkedik a valóságban. A böngészők nemcsak megjelenítik a munkádat, hanem részletes visszajelzést is adnak a teljesítményről, az akadálymentességről és a lehetséges problémákról. #### Böngésző fejlesztői eszközök (DevTools) A modern böngészők átfogó fejlesztői csomagokat tartalmaznak: -| Eszközkategória | Mire jó | Példafelhasználás | -|-----------------|---------|-------------------| -| **Elem ellenőrző** | HTML/CSS valós idejű megtekintése és szerkesztése | Stílusok módosítása azonnali eredményért | -| **Konzol** | Hibák megjelenítése és JavaScript tesztelése | Hibák keresése és kód kipróbálása | -| **Hálózati monitor** | Erőforrások betöltődésének követése | Teljesítmény és betöltési idők optimalizálása | -| **Akadálymentesség ellenőrző** | Befogadó dizájn tesztelése | Annak biztosítása, hogy az oldal minden felhasználónak működjön | -| **Eszköz szimulátor** | Megjelenítés különböző képernyőméreteken | Reszponzív dizájn tesztelése eszközök nélkül | +| Eszközkategória | Mit csinál | Példa használati eset | +|-----------------|------------|-----------------------| +| **Elemellenőrző** | HTML/CSS valós idejű megtekintése és szerkesztése | Stílus módosítása az azonnali eredményhez | +| **Konzol** | Hibák megtekintése és JavaScript tesztelése | Hibák keresése és kód kísérletezés | +| **Hálózatfigyelő** | Követi az erőforrások betöltődését | Teljesítmény és betöltési idők optimalizálása | +| **Akadálymentesség-ellenőrző** | Befogadó dizájn tesztelése | Biztosítja, hogy az oldal mindenki számára működjön | +| **Eszköz szimulátor** | Különböző képernyőméreteken történő előnézet | Reszponzív dizájn tesztelése eszközök nélkül | -#### Fejlesztéshez ajánlott böngészők +#### Ajánlott böngészők fejlesztéshez -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Iparági szabvány DevTools és átfogó dokumentáció +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Iparági szabványos DevTools széleskörű dokumentációval - **[Firefox](https://developer.mozilla.org/docs/Tools)** – Kiváló CSS Grid és akadálymentességi eszközök -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Chromium-alapú a Microsoft fejlesztői erőforrásaival +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Chromium alapú, Microsoft fejlesztői erőforrásokkal -> ⚠️ **Fontos tesztelési tipp**: Mindig teszteld a weboldalaidat több böngészőben! Ami tökéletesen működik Chrome-ban, az Safari-ban vagy Firefoxban másként nézhet ki. A profi fejlesztők az összes nagyobb böngészőben tesztelnek a konzisztens felhasználói élmény érdekében. +> ⚠️ **Fontos tesztelési tipp**: Mindig teszteld az oldaladat több böngészőben! Ami tökéletesen működik Chrome-ban, az másként nézhet ki Safariban vagy Firefoxban. A profi fejlesztők minden fő böngészőben tesztelnek a következetes felhasználói élmény érdekében. -### Parancssori eszközök: Kapud a fejlesztői szuperképességekhez +### Parancssori eszközök: A fejlesztői szupererőd kapuja -Oké, most beszéljünk őszintén a parancssorról, mert szeretném, ha azt tényleg tőlem hallanád. Amikor először megláttam – csak egy félelmetes fekete képernyő villogó szöveggel –, szó szerint azt gondoltam: „Az nem, ezt semmiképp! Ez olyan, mint egy 1980-as évekbeli hacker film, és én tutira nem vagyok elég okos ehhez!” 😅 +Na jól van, legyünk teljesen őszinték a parancssorról, mert szeretném, ha ezt olyan embertől hallanád, aki tényleg érti. Amikor először láttam – csak egy ijesztő fekete képernyő villogó szöveggel – szó szerint azt gondoltam: „Nem, ez nekem túl sok! Ez olyan, mintha egy 1980-as évekbeli hackerfilmből lenne, és én biztosan nem vagyok elég okos ehhez!” 😅 -De ezt szeretném, ha most elmondanám neked: a parancssor nem ijesztő – valójában mintha közvetlenül a számítógépeddel beszélgetnél. Gondolj arra, mint az étel rendelésére egy menő, képes és menüs alkalmazásban (ami kényelmes), szemben azzal, amikor bemész a kedvenc helyi éttermedbe, ahol a séf pontosan tudja, mit szeretsz, és csak annyit mondasz, „lepd meg valami elképesztővel”. +De azt kívánom, valaki akkoriban elmondta volna nekem, és most neked is mondom: a parancssor nem ijesztő – valójában olyan, mintha közvetlenül beszélnél a számítógépeddel. Gondolj rá úgy, mint a különbségre egy menő ételrendelő app képekkel és menükkel (ami kellemes és egyszerű) és az között, amikor bemész a kedvenc helyi éttermedbe, ahol a szakács pontosan tudja, mit szeretsz, és egy „lepd meg valami csodálatossal” mondattal tökéletes fogást készít. -A parancssor az a hely, ahol a fejlesztők tényleg varázslónak érzik magukat. Beírsz néhány látszólag varázslatos szót (oké, csak parancsok, de olyan érzés!), lenyomod az Entert, és PUMM – létrehoztál egész projektstruktúrákat, telepítettél erőteljes eszközöket a világ minden tájáról, vagy épp közzétetted az alkalmazásodat az interneten milliók számára. Amint megérzed ezt az erőt, őszintén szólva elég addiktív lesz! +A parancssor az a hely, ahol a fejlesztők úgy érzik magukat, mint az abszolút varázslók. Beírsz néhány látszólag varázslatos szót (oké, csak parancsok, de varázslatosnak érződnek!), megnyomod az entert, és PÁÁÁM – egész projektstruktúrákat hoztál létre, telepítettél hatékony eszközöket a világ minden tájáról, vagy épp élesítettél egy appot az internetre, hogy milliók láthassák. Amint egyszer megkóstolod ezt a hatalmat, őszintén szólva eléggé függővé válik! **Miért lesz a parancssor a kedvenc eszközöd:** -Bár a grafikus felületek sok feladathoz kiválóak, a parancssor az automatizálásban, pontosságban és sebességben brillírozik. Sok fejlesztőeszköz elsősorban parancssori interfészeken keresztül működik, és hatékony használatuk drasztikusan növelheti a termelékenységed. +Bár a grafikus felületek sok feladathoz remekek, a parancssor az automatizálásban, a pontosságban és a sebességben jeleskedik. Sok fejlesztői eszköz elsősorban parancssori felületen működik, és ezek hatékony használatának elsajátítása drámaian javíthatja a termelékenységedet. ```bash -# 1. lépés: Hozd létre a projekt könyvtárát, majd lépj bele +# 1. lépés: Hozd létre a projekt könyvtárat és lépj be oda mkdir my-awesome-website cd my-awesome-website ``` - -**Mit csinál ez a kód:** -- **Létrehoz** egy új mappát „my-awesome-website” néven a projekted számára + +**Ez a kód mit csinál:** +- **Új mappát hoz létre** "my-awesome-website" néven a projektednek - **Belép** az újonnan létrehozott mappába, hogy elkezdhess dolgozni ```bash -# 2. lépés: Inicializálja a projektet package.json fájlal +# 2. lépés: Projekt inicializálása package.json fájllal npm init -y -# Telepítse a modern fejlesztői eszközöket +# Modern fejlesztőeszközök telepítése npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` - -**Lépésről lépésre, mi történik:** -- **Inicializál** egy új Node.js projektet alapértelmezett beállításokkal az `npm init -y` parancsal -- **Telepíti** a Vite-et modern build eszközként gyors fejlesztéshez és gyártási buildhez -- **Hozzáadja** a Prettier-t automatikus formázáshoz és az ESLint-et kódminőség ellenőrzéshez -- **Használja** a `--save-dev` kapcsolót, hogy csak fejlesztési függőségek legyenek + +**Lépésről lépésre, mi történik:** +- **Inicializál** egy új Node.js projektet alapértelmezett beállításokkal az `npm init -y` segítségével +- **Telepíti** a Vite-t modern build eszközként a gyors fejlesztéshez és éles buildhez +- **Hozzáad** Prettier-t automatikus kódformázáshoz és ESLint-et a kódminőség ellenőrzésére +- **A** `--save-dev` kapcsolót használja, hogy ezeket csak fejlesztési függőségként jelölje meg ```bash -# 3. lépés: Projekt struktúra és fájlok létrehozása +# 3. lépés: Projektstruktúra és fájlok létrehozása mkdir src assets echo 'My Site

Hello World

' > index.html -# Fejlesztő szerver indítása +# Indítsa el a fejlesztői szervert npx vite ``` + +**Az előbbiekben:** +- **Rendszerezte** a projektet külön mappákkal a forráskódnak és az eszközöknek +- **Generált** egy alap HTML fájlt megfelelő dokumentumszerkezettel +- **Elindította** a Vite fejlesztői szervert élő újratöltéssel és hot module replacementtel -**Fentiekben:** -- **Rendszerezte** a projektet külön mappákba a forráskód és az eszközök számára -- **Generált** egy alap HTML fájlt megfelelő dokumentumszerkezettel -- **Elindította** a Vite fejlesztői szervert élő újratöltéssel és hot module replacement-tel - -#### Alapvető parancssori eszközök webfejlesztéshez +#### Nélkülözhetetlen parancssori eszközök webfejlesztéshez -| Eszköz | Cél | Miért kell | -|--------|-----|------------| +| Eszköz | Célja | Miért van rá szükséged | +|--------|-------|-----------------------| | **[Git](https://git-scm.com/)** | Verziókezelés | Változások nyomon követése, együttműködés, biztonsági mentés | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript futtatókörnyezet és csomagkezelő | JavaScript futtatása böngészőn kívül, modern fejlesztőeszközök telepítése | -| **[Vite](https://vitejs.dev/)** | Build eszköz és fejlesztői szerver | Villámgyors fejlesztés hot module replacement-tel | -| **[ESLint](https://eslint.org/)** | Kódminőség | Problémák automatikus felderítése és javítása JavaScriptben | -| **[Prettier](https://prettier.io/)** | Kódformázás | A kód következetes és olvasható formázása | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript futtató környezet és csomagkezelő | JavaScript futtatása böngészőn kívül, modern eszközök telepítése | +| **[Vite](https://vitejs.dev/)** | Build eszköz és fejlesztői szerver | Villámgyors fejlesztés hot module replacemente | +| **[ESLint](https://eslint.org/)** | Kódminőség | Automatikusan felismeri és javítja a JavaScript problémákat | +| **[Prettier](https://prettier.io/)** | Kódformázás | Konzisztens és olvasható kódot biztosít | #### Platform-specifikus lehetőségek -**Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Modern, funkciógazdag terminál -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Erőteljes szkriptkörnyezet -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Hagyományos Windows parancssor +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Modern, sok funkciós terminál +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Erős szkriptnyelvi környezet +- **[Parancssor](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Hagyományos Windows parancssor -**macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Beépített terminál alkalmazás -- **[iTerm2](https://iterm2.com/)** – Fejlettebb terminál haladó funkciókkal +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Beépített terminálalkalmazás +- **[iTerm2](https://iterm2.com/)** – Fejlettebb terminál további funkciókkal -**Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Alapértelmezett Linux shell +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standard Linux shell - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Fejlett terminálemulátor -> 💻 = Előre telepített az operációs rendszeren +> 💻 = Előre telepítve az operációs rendszerrel -> 🎯 **Tanulási útvonal**: Kezd az alapvető parancsokkal, mint `cd` (könyvtárváltás), `ls` vagy `dir` (fájlok listázása), és `mkdir` (mappa létrehozása). Gyakorolj modern munkafolyamat parancsokat, például `npm install`, `git status`, és `code .` (megnyitja az aktuális mappát VS Code-ban). Ahogy egyre otthonosabb vagy, természetesen tanulod majd az összetettebb parancsokat és az automatizálási technikákat. +> 🎯 **Tanulási út**: Kezdd az alap parancsokkal, mint a `cd` (könyvtárváltás), `ls` vagy `dir` (fájlok listázása), és `mkdir` (mappa létrehozása). Gyakorold a modern munkafolyamat-parancsokat, például `npm install`, `git status` és `code .` (megnyitja az aktuális könyvtárat VS Code-ban). Ahogy egyre magabiztosabb leszel, természetesen tanulsz majd fejlettebb parancsokat és automatizálási technikákat is. -### Dokumentáció: Mindig elérhető tanulótársad +### Dokumentáció: Mindig elérhető tanuló mentorod -Hadd osszak meg veled egy titkot, ami segít jobban érezni magad kezdőként: még a legtapasztaltabb fejlesztők is rengeteg időt töltenek dokumentáció olvasásával. És nem azért, mert nem tudják, mit csinálnak – ez inkább a bölcsesség jele! +Nos, megosztok egy kis titkot, ami sokkal jobban fogja érezni magát, aki kezdő: még a legtapasztaltabb fejlesztők is az idejük nagy részét dokumentáció olvasásával töltik. És nem azért, mert nem tudják, mit csinálnak – ez valójában a bölcsesség jele! -Gondolj a dokumentációra úgy, mint a világ legpáciensebb, legtudatosabb tanáraira, akik éjjel-nappal rendelkezésedre állnak. 2 órakor az éjszaka közepén elakadtál? A dokumentáció ott van egy meleg virtuális öleléssel és pontosan azzal a válasszal, amire szükséged van. Szeretnél megtanulni egy menő, új funkciót, amiről mindenki beszél? A dokumentáció lépésről lépésre segít. Próbálod megérteni, hogy miért úgy működik valami, ahogy? Ugye kitaláltad – a dokumentáció készségesen elmagyarázza, hogy végre megértsd! +Gondolj a dokumentációra úgy, mintha a világ legkedvesebb, legokosabb tanárai lennének, akik 24/7 elérhetőek. Elakadtál egy problémával éjjel 2-kor? A dokumentáció ott van egy virtuális meleg öleléssel és pontosan a választ adja, amire szükséged van. Meg akarsz tanulni egy menő új funkciót, amiről mindenki beszél? A dokumentáció ott van lépésről lépésre példákkal. Megpróbálod megérteni, miért működik valami úgy, ahogy? Innen tudod – a dokumentáció kész elmagyarázni úgy, hogy végre „összeálljon” a kép! -Valami, ami teljesen megváltoztatta a nézőpontomat: a webfejlesztés világa rettenetesen gyorsan halad, és senki – tényleg senki! – nem tud mindent kívülről. Láttam 15+ éves tapasztalattal rendelkező senior fejlesztőket is, akik megnéznek alapvető szintaxist, és tudod mit? Ez nem ciki – ez okosság! Nem arról szól, hogy tökéletes a memóriád; arról szól, hogy tudd, hol találsz megbízható válaszokat gyorsan és hogyan alkalmazd azokat. +Volt valami, ami teljesen megváltoztatta a látásmódom: a webfejlesztés hihetetlenül gyorsan változik, és senki (értsd: senki!) nem tud mindent kívülről. Láttam 15+ éves tapasztalatú senior fejlesztőket, amint alap szintaxisokat néznek meg, és tudod mit? Ez nem ciki – ez okos dolog! Nem az a lényeg, hogy szupermemóriád legyen; hanem hogy tudd, hol találod gyorsan a megbízható válaszokat, és tudd, hogyan alkalmazd őket. -**A valódi varázslat itt kezdődik:** +**Itt történik az igazi varázslat:** -A profi fejlesztők jelentős részt töltenek dokumentáció olvasásával – nem mert nem tudják, mit csinálnak, hanem mert a fejlesztés világa folyamatosan változik, és a naprakészség folyamatos tanulást igényel. A jó dokumentáció nemcsak azt segít megérteni, *hogyan* használd egy eszközt, hanem azt is, *miért* és *mikor* érdemes alkalmazni. +A profi fejlesztők jelentős időt töltenek dokumentáció olvasásával – nem azért, mert nem tudják mit csinálnak, hanem mert a webfejlesztési világ olyan gyorsan változik, hogy a naprakészség folyamatos tanulást igényel. A nagyszerű dokumentáció nemcsak azt mutatja meg, *hogyan* használj valamit, hanem azt is, *miért* és *mikor* érdemes. -#### Fontos dokumentációs források +#### Alapvető dokumentációs források -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Az arany sztenderd a webes technológiák dokumentációjában -- Átfogó útmutatók HTML-hez, CSS-hez és JavaScripthez -- Böngésző kompatibilitási információk -- Gyakorlati példák és interaktív demók +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- Az aranyszabvány webtechnológiák dokumentációjában +- Átfogó útmutatók HTML, CSS és JavaScript témában +- Böngésző kompatibilitási információkkal +- Gyakorlati példákkal és interaktív demókkal -**[Web.dev](https://web.dev)** (Google-től) -- Modern webfejlesztési legjobb gyakorlatok -- Teljesítményoptimalizálási útmutatók -- Akadálymentességi és befogadó dizájn elvek -- Esettanulmányok valós projektekről +**[Web.dev](https://web.dev)** (Google-tól) +- Modern webfejlesztési legjobb gyakorlatok +- Teljesítmény optimalizációs útmutatók +- Akadálymentesség és befogadó dizájn elvei +- Valós projektek esettanulmányai -**[Microsoft fejlesztői dokumentáció](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge böngésző fejlesztési források -- Progresszív webalkalmazás útmutatók +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge böngésző fejlesztői erőforrásai +- Progresszív webalkalmazás útmutatók - Többplatformos fejlesztési betekintések -**[Frontend Masters tanulási útvonalak](https://frontendmasters.com/learn/)** -- Strukturált tanmenetek -- Videós tanfolyamok iparági szakértőktől +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Strukturált tanulási tanmenetek +- Ipari szakértők videós kurzusai - Gyakorlati kódolási feladatok -> 📚 **Tanulási stratégia**: Ne próbáld „megjegyezni” a dokumentációt – inkább tanuld meg hatékonyan használni. Könyvjelzőzd a gyakran használt forrásokat, és gyakorold a keresőfunkciók használatát az információk gyors megtalálásához. +> 📚 **Tanulási stratégiák**: Ne próbáld meg memorizálni a dokumentációt – inkább tanuld meg hatékonyan keresni benne. Könyvjelzőzd a gyakran használt referenciaanyagokat, és gyakorold a keresési funkciók használatát, hogy gyorsan megtaláld a konkrét információkat. -### 🔧 **Eszközmesteri ellenőrzés: Mi az, ami neked szól?** +### 🔧 **Eszközhasználati teszt: Mi rezonál veled?** -**Szánj rá egy pillanatot, hogy átgondold:** -- Melyik eszközt próbálnád ki először a legszívesebben? (Nincs rossz válasz!) -- Mennyire ijeszt még a parancssor, vagy inkább kíváncsivá tett? -- El tudod képzelni, hogy a böngésző DevTools segítségével bepillants a kedvenc weboldalaid kulisszái mögé? +**Szánj egy pillanatot arra, hogy átgondold:** +- Melyik eszközt próbálnád ki legszívesebben először? (Nincs rossz válasz!) +- Még mindig ijesztő a parancssor, vagy érdeklődsz iránta? +- El tudod képzelni, hogy a böngésző DevTools-szal beleshetsz a kedvenc weboldalaid kulisszái mögé? ```mermaid -pie title "Fejlesztői idő eszközökkel" - "Kód Szerkesztő" : 40 - "Böngésző Tesztelés" : 25 +pie title "Fejlesztői idő az eszközökkel" + "Kódszerkesztő" : 40 + "Böngészős tesztelés" : 25 "Parancssor" : 15 - "Dokumentáció Olvasása" : 15 + "Dokumentáció olvasása" : 15 "Hibakeresés" : 5 -``` -> **Érdekesség**: A fejlesztők körülbelül a munkaidejük 40%-át töltik az editorukban, de figyeld meg, mennyi idő megy el tesztelésre, tanulásra és problémamegoldásra. A programozás nemcsak kódírás – élmények megalkotása! +``` +> **Szórakoztató érdekesség**: A legtöbb fejlesztő mintegy 40%-ot tölt a kódszerkesztőjében, de észreveszed, mennyi idő megy el tesztelésre, tanulásra és problémamegoldásra. A programozás nem csak kódírás – élményalkotás is! -✅ **Gondolkodtató kérdés**: Íme valami érdekes – szerinted hogyan térnek el egymástól azok az eszközök, amiket weboldalak *fejlesztésére* használsz, és azok, amikkel a weboldalak *dizájnját* készíted? Olyan ez, mintha egy építész tervezi meg a gyönyörű házat, és egy vállalkozó építi meg azt. Mindkettő fontos, de más eszköztár kell! Ez a gondolkodás segít meglátni a nagyobb képet arról, hogyan kelnek életre a weboldalak. +✅ **Elgondolkodtató:** Íme egy érdekes kérdés – hogyan gondolod, a weboldalak készítő eszközei (fejlesztés) miben különböznek a megjelenést alakító eszközöktől (tervezés)? Olyan ez, mintha az építész tervezne egy szép házat, és a kivitelező építené meg azt. Mindkettő fontos, de más eszköztár kell hozzá! Ez a fajta gondolkodás segíteni fog meglátni a nagyobb képet, hogy hogyan kelnek életre a weboldalak. ## GitHub Copilot Agent kihívás 🚀 -Használd az Agent módot a következő kihívás megoldásához: +Használd az Agent módot a következő kihívás teljesítéséhez: -**Leírás:** Fedezd fel egy modern kódszerkesztő vagy IDE funkcióit, és mutasd be, hogyan segíti munkafolyamatodat webfejlesztőként. +**Leírás:** Fedezd fel egy modern kódszerkesztő vagy IDE funkcióit, és mutasd be, hogyan javíthatja a munkafolyamatodat webfejlesztőként. -**Felkérés:** Válassz egy kódszerkesztőt vagy IDE-t (például Visual Studio Code, WebStorm vagy egy felhőalapú IDE). Sorolj fel három olyan funkciót vagy bővítményt, amely segít a kód írásában, hibakeresésében vagy karbantartásában. Mindegyikhez adj rövid magyarázatot arról, hogyan javítja a munkafolyamatod. +**Feladat:** Válassz egy kódszerkesztőt vagy IDE-t (például Visual Studio Code, WebStorm vagy felhőalapú IDE). Sorolj fel három funkciót vagy kiegészítőt, amelyek segítenek hatékonyabban írni, hibakeresni vagy karbantartani a kódot. Mindegyikről adj rövid magyarázatot, hogy hogyan segíti a munkádat. --- @@ -735,121 +736,121 @@ Használd az Agent módot a következő kihívás megoldásához: **Na, nyomozó, készen állsz az első ügyedre?** -Most, hogy megvan ez a szuper alap, egy kaland vár, ami segít meglátni, milyen elképesztően sokszínű és izgalmas a programozás világa. És figyelj – ez még nem kódírásról szól, szóval nincs nyomás! Gondolj magadra úgy, mint programozási nyelv nyomozóra az első izgalmas ügyeden! +Most, hogy megvan ez a szuper alapod, egy kaland vár, ami segít meglátni, milyen hihetetlenül változatos és lenyűgöző a programozás világa. És hallgasd: ez még nem a kódírásról szól, szóval nincs nyomás! Gondolj magadra úgy, mint egy programozási nyelv nyomozóra az első izgalmas ügyeden! -**Küldetésed, ha elfogadod:** -1. **Válj nyelvkutatóvá**: Válassz három programozási nyelvet teljesen különböző világokból – lehet egy, ami weboldalakat épít, egy, ami mobilalkalmazásokat készít, és egy, ami adatokat elemez tudósoknak. Keress példákat ugyanarra az egyszerű feladatra mindegyik nyelven. Megígérem, teljesen el leszel kápráztatva, milyen másként néznek ki miközben ugyanazt csinálják! +**Missziód, ha vállalod:** +1. **Legyél nyelvkutató:** Válassz három, egymástól teljesen különböző univerzumból származó programozási nyelvet – talán egyet, ami weboldalakat készít, egyet, ami mobil appokat fejleszt, és egyet, ami tudósok adatfeldolgozására szolgál. Keress egyszerű példa feladatot mindegyik nyelven. Megígérem, teljesen el fogsz ámulni, milyen különbözőképpen nézhetnek ki ugyanazt csinálva! -2. **Fedezd fel a származásukat**: Mi tesz minden nyelvet különlegessé? Egy menő tény – minden programozási nyelvet azért hoztak létre, mert valaki gondolta, „Tudod mit? Ennél jobb mód kell egy adott probléma megoldására.” Meg tudod találni, mik voltak ezek a problémák? Egyes történetek igazán lenyűgözőek! +2. **Fedezd fel az eredetüket:** Mi teszi mindegyik nyelvet különlegessé? Egy menő tény: minden egyes programozási nyelvet azért alkottak meg, mert valaki azt gondolta, „Tudod mit? Ennél a konkrét problémánál jobb megoldásnak kell lennie.” Kitalálod, mik voltak ezek a problémák? Néhány történet igazán izgalmas! -3. **Ismerd meg a közösségeket**: Nézd meg, mennyire befogadó és lelkes a nyelv közössége. Van, amelyiknek millió fejlesztője van, akik tudást osztanak meg és segítik egymást, mások kisebbek, de nagyon összetartók és támogatóak. Remélem, élvezni fogod látni ezeket a különböző személyiségeket! +3. **Ismerd meg a közösségeket:** Nézd meg, mennyire befogadóak és lelkesek az egyes nyelvek közösségei. Néhány több millió fejlesztőt tömörít, akik megosztják egymással tudásukat és segítik egymást, mások kisebbek, de hihetetlenül összetartóak és támogatóak. Imádni fogod látni, milyen különböző személyiségek alkotják ezeket a közösségeket! -4. **Hallgass a megérzéseidre**: Melyik nyelv tűnik most a leginkább megközelíthetőnek számodra? Ne stresszelj a „tökéletes” választáson – csak hallgass az ösztöneidre! Itt tényleg nincs rossz válasz, és mindig felfedezhetsz másokat később is. +4. **Kövesd az ösztöneidet:** Melyik nyelv tűnik most számodra a legközelebb állónak? Ne stresszelj a „tökéletes” választáson – csak hallgass az ösztöneidre! Őszintén nincs rossz válasz, és mindig felfedezhetsz másokat később. -**Plusz nyomozói feladat:** Próbáld kideríteni, melyik nagy weboldalak vagy alkalmazások készültek mely nyelvekkel. Garantálom, hogy meg fogsz lepődni, milyen technológiák hajtják az Instagramot, a Netflixet vagy azt a mobiljátékot, amit nem tudsz letenni! +**Plusz nyomozói feladat:** Próbáld kideríteni, hogy mely nagyobb weboldalak vagy appok készültek az egyes nyelvekkel. Garantálom, hogy megdöbbensz majd, mik hajtják az Instagramot, Netflixet vagy azt a mobiljátékot, amit nem bírsz letenni! -> 💡 **Ne feledd**: Nem az a cél, hogy ma már szakértő legyél ezekben a nyelvekben. Csak ismerkedsz a környezettel, mielőtt eldöntöd, hol kezdesz el dolgozni. Szánj rá időt, szórakozz, és hagyd, hogy a kíváncsiság vezessen! +> 💡 **Emlékezz:** Ma nem az a cél, hogy szakértővé válj egyetlen nyelvben sem. Csak ismerkedj meg a „szomszédsággal”, mielőtt eldöntöd, hol akarsz letelepedni. Szánj rá időt, élvezd és hagyd, hogy a kíváncsiságod vezessen! ## Ünnepeljük, amit felfedeztél! -Hú, de sok elképesztő dolgot szívtál magadba ma! Őszintén izgatott vagyok, hogy mennyire maradt meg ebből a fantasztikus utazásból. És ne feledd – ez nem egy teszt, ahol mindent tökéletesen kell csinálni. Ez inkább egy ünnep, hogy mindazt a menő dolgot értékeld, amit megtanultál erről az izgalmas világról, amibe most belevetetted magad! +Hú, mennyi hihetetlen információt szívtál magadba ma! Őszintén izgatott vagyok, hogy lássam, mennyi maradt meg ebből a csodás utazásból. És emlékezz – ez nem egy vizsga, ahol mindennek tökéletesnek kell lennie. Ez inkább egy ünneplés mindarról a menő dologról, amit megtanultál erről a lenyűgöző világról, amibe épp most lépsz bele! -[Oldd meg az utólagos kvízt](https://ff-quizzes.netlify.app/web/) -## Áttekintés & Önálló tanulás +[Oldd meg az leckekvízt](https://ff-quizzes.netlify.app/web/) -**Szánj rá időt, fedezd fel és élvezd!** +## Áttekintés & önálló tanulás -Ma rengeteget haladtál, és erre igazán büszke lehetsz! Most jön a móka – fedezd fel azokat a témákat, amelyek felkeltették az érdeklődésedet. Ne feledd, ez nem házi feladat – ez egy kaland! +**Szánj rá időt, fedezd fel és szórakozz közben!** +Ma sok mindent tanultál, amire büszke lehetsz! Most jön a móka része – azokat a témákat felfedezni, amelyek felkeltették a kíváncsiságodat. Ne feledd, ez nem házi feladat – ez egy kaland! -**Mélyedj el abban, ami lelkesít:** +**Mélyedj el abban, ami izgat:** -**Próbálj ki programozási nyelveket:** -- Látogasd meg 2-3 olyan nyelv hivatalos weboldalát, amely felkeltette az érdeklődésedet. Mindegyiknek megvan a maga személyisége és története! -- Próbálj ki néhány online kódíró játszóteret, például a [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) vagy [Replit](https://replit.com/) oldalakat. Ne félj kísérletezni – semmit sem tudsz elrontani! -- Olvass arról, hogyan jött létre a kedvenc nyelved. Komolyan, néhány eredettörténet lenyűgöző, és segít megérteni, miért működnek a nyelvek úgy, ahogy. +**Ismerkedj meg gyakorlatban programozási nyelvekkel:** +- Látogasd meg 2-3 olyan nyelv hivatalos weboldalát, amelyek felkeltették az érdeklődésedet. Mindegyiknek megvan a saját személyisége és története! +- Próbálj ki online kódolási játszótereket, például a [CodePen](https://codepen.io/)-t, a [JSFiddle](https://jsfiddle.net/)-t vagy a [Replit](https://replit.com/)-et. Ne félj kísérletezni – nem tudsz semmit elrontani! +- Olvass a kedvenc nyelved születésének történetéről. Komolyan, ezek az eredettörténetek sokszor lenyűgözőek, és segítenek megérteni, miért működnek úgy a nyelvek, ahogy. **Ismerkedj meg az új eszközeiddel:** -- Töltsd le a Visual Studio Code-ot, ha még nem tetted meg – ingyenes és imádni fogod! -- Szánj néhány percet az Extensions piactér böngészésére. Olyan, mint egy alkalmazásbolt a kódszerkesztődnek! -- Nyisd meg a böngésződ Fejlesztői Eszközeit, és kattints körbe. Ne aggódj, ha nem értesz mindent – csak ismerkedj a dolgokkal. +- Töltsd le a Visual Studio Code-ot, ha még nem tetted meg – ingyenes, és nagyon meg fogod szeretni! +- Tölts pár percet az Extensions piactér böngészésére. Ez olyan, mint egy alkalmazásbolt a kódszerkesztődnek! +- Nyisd meg a böngésződ Fejlesztői Eszközeit, és kattints körbe nyugodtan. Ne aggódj, ha nem értesz mindent – csak ismerkedj meg, mi van ott. **Csatlakozz a közösséghez:** -- Kövess néhány fejlesztői közösséget a [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) vagy [GitHub](https://github.com/) oldalakon. A programozó közösség hihetetlenül befogadó az újoncokkal szemben! -- Nézz meg kezdőknek szóló programozós videókat a YouTube-on. Rengeteg nagyszerű alkotó van, aki emlékszik, milyen volt az elején lenni. -- Fontold meg, hogy csatlakozol helyi találkozókhoz vagy online közösségekhez. Hidd el, a fejlesztők imádnak segíteni az újonnan érkezőknek! +- Kövess néhány fejlesztői közösséget a [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) vagy [GitHub](https://github.com/) oldalán. A programozói közösség hihetetlenül barátságos az újoncokkal szemben! +- Nézz kezdőknek szóló kódolási videókat YouTube-on. Rengeteg remek készítő van, aki emlékszik rá, milyen az elején lenni. +- Fontold meg, hogy részt veszel helyi találkozókon vagy online közösségekben. Higgy nekem, a fejlesztők imádnak segíteni az újoncoknak! -> 🎯 **Figyelj, ezt szeretném, hogy megjegyezd**: Nem várjuk, hogy egyik napról a másikra kódvarázsló váljon belőled! Jelenleg csak ismerkedsz ezzel a csodálatos új világgal, amelynek része leszel. Szánj rá időt, élvezd az utat, és tudd – minden egyes fejlesztő, akit csodálsz, valamikor pontosan ott ült, ahol most te vagy, izgatottan és talán egy kicsit túlterhelten. Ez teljesen normális, és azt jelenti, hogy jól csinálod! +> 🎯 **Figyelj, ezt szeretném, ha megjegyeznéd:** Nem várjuk el tőled, hogy egyik napról a másikra programozó zsenivé válj! Most csak ismerkedsz ezzel a csodálatos új világgal, amelynek a része leszel. Szánj időt, élvezd az utat, és emlékezz rá – minden fejlesztő, akit csodálsz, egyszer épp ott ült, ahol te most vagy, izgatottan és talán egy kicsit túlterhelve. Ez teljesen normális, és azt jelenti, hogy jól csinálod! ## Feladat -[Olvasd el a dokumentációt](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Egy kis ösztönzés a feladatodhoz**: Nagyon örülnék neki, ha felfedeznél olyan eszközöket, amelyeket még nem érintettünk! Kerüld azokat a szerkesztőket, böngészőket és parancssori eszközöket, amelyeket már említettünk – van egy egész hihetetlen fejlesztői eszköz univerzum, amely felfedezésre vár. Olyanokat keress, amelyek aktívan karbantartottak és élénk, segítőkész közösséggel rendelkeznek (ezeknél a legjobb oktatóanyagokat és a leginkább támogató embereket találod, ha elakadnál, és baráti segítségre lenne szükséged). +> 💡 **Egy kis segítség a feladathoz:** Nagyon örülnék, ha felfedeznél néhány olyan eszközt, amelyről még nem beszéltünk! Hagyjuk ki a már ismert szerkesztőket, böngészőket és parancssoros eszközöket – van ezernyi csodálatos fejlesztői eszköz, amely csak vár arra, hogy felfedezd. Keress olyat, amely aktívan karbantartott, és élénk, segítőkész közössége van (ezeknél általában a legjobb tutorialok és a legbarátságosabb emberek támogatnak, amikor elakadnál és segítséget kérnél). --- -## 🚀 A programozási utad idővonala +## 🚀 A programozói utad idővonala ### ⚡ **Mit tehetsz meg a következő 5 percben** -- [ ] Könyvjelzőzz be 2-3 programozási nyelv weboldalt, amelyek felkeltették az érdeklődésedet +- [ ] Könyvjelzőz 2-3 programozási nyelv weboldalát, amelyek felkeltették az érdeklődésedet - [ ] Töltsd le a Visual Studio Code-ot, ha még nem tetted meg -- [ ] Nyisd meg a böngésződ Fejlesztői Eszközeit (F12), és kattints körbe bármely weboldalon +- [ ] Nyisd meg a böngésződ Fejlesztői Eszközeit (F12), és kattints körbe bármelyik weboldalon - [ ] Csatlakozz egy programozói közösséghez (Dev.to, Reddit r/webdev vagy Stack Overflow) -### ⏰ **Mit érhetsz el ezen az órán** -- [ ] Teljesítsd az óra utáni kvízt, és gondolkodj el a válaszaidon +### ⏰ **Mit érhetsz el ebben az órában** +- [ ] Fejezd be az óra utáni kvízt, és gondold át a válaszaidat - [ ] Állítsd be a VS Code-ot a GitHub Copilot kiterjesztéssel -- [ ] Próbálj ki egy „Hello World” példát 2 különböző programozási nyelven online -- [ ] Nézz meg egy „Egy fejlesztő egy napja” című videót a YouTube-on -- [ ] Kezdd el a programozási nyelv detektív munkát (a kihívásból) +- [ ] Próbálj ki egy "Hello World" példát 2 különböző programozási nyelven online +- [ ] Nézz meg egy "Egy nap egy fejlesztő életében" videót YouTube-on +- [ ] Kezdd el a programozási nyelv detektív munkádat (a kihívásból) ### 📅 **Heti kalandod** -- [ ] Teljesítsd a feladatot, és fedezz fel 3 új fejlesztői eszközt -- [ ] Kövess 5 fejlesztőt vagy programozási fiókot a közösségi médiában -- [ ] Próbálj meg valami apróságot építeni a CodePen-en vagy a Replit-en (még ha csak egy „Hello, [A neved]!” is) -- [ ] Olvass el egy fejlesztői blogbejegyzést valaki programozói útjáról -- [ ] Csatlakozz egy virtuális találkozóhoz vagy nézz meg egy programozós előadást -- [ ] Kezdd el tanulni a választott nyelved online oktatóanyagokkal +- [ ] Fejezd be a feladatot, és fedezz fel 3 új fejlesztői eszközt +- [ ] Kövess 5 fejlesztőt vagy programozási fiókot a közösségi oldalakon +- [ ] Próbálj meg valamit építeni CodePen-ben vagy Replit-en (még ha csak egy "Hello, [A Neved]!" is!) +- [ ] Olvass el egy fejlesztői blogbejegyzést valakinek a programozásról szóló útjáról +- [ ] Csatlakozz egy virtuális találkozóhoz vagy nézz meg egy programozói előadást +- [ ] Kezdd el tanulni a választott nyelvet online oktatóanyagokkal ### 🗓️ **Havi átalakulásod** - [ ] Építsd meg az első kis projektedet (még egy egyszerű weboldal is számít!) -- [ ] Vegyél részt egy nyílt forráskódú projektben (kezd a dokumentáció javításával) -- [ ] Mentorálj valakit, aki most kezdte el a programozói útját +- [ ] Adj hozzá egy nyílt forráskódú projekthez (kezdj dokumentációs javításokkal) +- [ ] Segíts tanácsadóként annak, aki most kezd a programozói úton - [ ] Készítsd el a fejlesztői portfólió weboldaladat -- [ ] Kapcsolódj helyi fejlesztői közösségekhez vagy tanulócsoportokhoz +- [ ] Csatlakozz helyi fejlesztői közösségekhez vagy tanulócsoportokhoz - [ ] Kezdd el tervezni a következő tanulási mérföldkövedet -### 🎯 **Záró visszatekintés** +### 🎯 **Záró önreflexió** -**Mielőtt továbbmész, szánj egy pillanatot az ünneplésre:** -- Mi az a programozással kapcsolatos dolog, ami ma felkeltette az izgalmadat? +**Mielőtt továbblépnél, szánj időt az ünneplésre:** +- Mi volt ma a programozásban az a dolog, ami a legjobban felkeltette az érdeklődésedet? - Melyik eszközt vagy fogalmat szeretnéd először felfedezni? -- Hogy érzed magad a programozói utad megkezdésével kapcsolatban? +- Hogy érzed magad, hogy elkezdted ezt a programozói utat? - Milyen kérdést tennél fel most egy fejlesztőnek? ```mermaid journey - title Az önbizalomépítés utad + title Az Önbizalom Építésének Útja section Ma - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section Ezen a héten - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Következő hónap - Building: 5: You - Confident: 5: You - Helping Others: 5: You + Kíváncsi: 3: You + Túlhajszolt: 4: You + Izgatott: 5: You + section Ezen a Héten + Felfedezés: 4: You + Tanulás: 5: You + Kapcsolatépítés: 4: You + section Következő Hónap + Építés: 5: You + Magabiztos: 5: You + Mások Segítése: 5: You ``` -> 🌟 **Ne feledd**: Minden szakértő egyszer kezdő volt. Minden szenior fejlesztő pontosan úgy érezte magát, mint most te – izgatottan, talán egy kicsit túlterhelten, és biztosan kíváncsian arra, mi lehetséges. Csodálatos társaságban vagy, és ez az út hihetetlen lesz. Üdv a programozás csodálatos világában! 🎉 +> 🌟 **Ne feledd:** Minden szakértő egyszer kezdő volt. Minden tapasztalt fejlesztő pontosan úgy érezte magát egyszer, mint te most – izgatottan, talán egy kicsit túlterhelve, és hatalmas kíváncsisággal, hogy mit rejt a jövő. Csodálatos társaságban vagy, és ez az út fantasztikus lesz. Üdv a csodálatos programozói világban! 🎉 --- -**Jogi nyilatkozat**: -Jelen dokumentumot az AI fordítószolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk le. Bár az igyekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az anyanyelvén tekintendő hiteles forrásnak. Kritikus információk esetén professzionális emberi fordítást javaslunk. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért. +**Nyilatkozat**: +A jelen dokumentumot az AI fordítószolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítás hibákat vagy pontatlanságokat tartalmazhat. Az eredeti dokumentum az anyanyelvén tekintendő hivatalos forrásnak. Fontos információk esetén professzionális emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy téves értelmezésekért. \ No newline at end of file diff --git a/translations/hu/AGENTS.md b/translations/hu/AGENTS.md index ef37c9da8..159146657 100644 --- a/translations/hu/AGENTS.md +++ b/translations/hu/AGENTS.md @@ -2,42 +2,42 @@ ## Projekt áttekintése -Ez egy oktatási tanterv adattára, amely kezdőknek tanítja a webfejlesztés alapjait. A tanterv egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, 24 gyakorlati leckével, amelyek lefedik a JavaScript, CSS és HTML témaköröket. +Ez egy oktatási tanterv-tár, amely a kezdők számára tanítja a webfejlesztés alapjait. A tanterv egy átfogó, 12 hetes kurzus, amelyet a Microsoft Cloud Advocates fejlesztett ki, 24 gyakorlati órával, amelyek JavaScript-et, CSS-t és HTML-t fednek le. -### Főbb összetevők +### Fő komponensek -- **Oktatási tartalom**: 24 strukturált lecke projekt alapú modulokba rendezve -- **Gyakorlati projektek**: Terrárium, gépelős játék, böngészőbővítmény, űrjáték, banki alkalmazás, kódszerkesztő és AI chat asszisztens -- **Interaktív kvízek**: 48 kvíz 3 kérdéssel mindegyikben (óra előtti/utáni felmérések) -- **Többnyelvű támogatás**: automatikus fordítások több mint 50 nyelvre GitHub Actions segítségével +- **Oktatási tartalom**: 24 strukturált lecke projekt-alapú modulokban szervezve +- **Gyakorlati projektek**: Terrárium, Gépelő játék, Böngészőbővítmény, Űrjáték, Banki alkalmazás, Kódszerkesztő és AI chat asszisztens +- **Interaktív kvízek**: 48 kvíz, mindegyik 3 kérdéssel (elő- és utóleckés felmérések) +- **Többnyelvű támogatás**: Automatikus fordítás 50+ nyelvre GitHub Actions segítségével - **Technológiák**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI projektekhez) ### Architektúra -- Oktatási adattár lecke-alapú szerkezettel -- Minden lecke könyvtára tartalmaz README-t, kódpéldákat és megoldásokat -- Önálló projektek külön könyvtárakban (quiz-app, egyes lecke projektek) -- Fordítási rendszer GitHub Actions használatával (co-op-translator) -- Dokumentáció Docsify-val szolgáltatva, PDF-ként is elérhető +- Oktatási tár tanulási egységek szerint felépítve +- Minden lecke mappája README-t, kódpéldákat és megoldásokat tartalmaz +- Önálló projektek külön könyvtárakban (quiz-app, különféle lecke projektek) +- Fordító rendszer GitHub Actions használatával (co-op-translator) +- Dokumentáció Docsify-val szolgáltatva, PDF formátumban is elérhető -## Telepítési parancsok +## Beállítási parancsok -Ez az adattár elsősorban oktatási tartalom fogyasztására szolgál. Egyes projektekhez való munkához: +Ez a tároló elsősorban az oktatási tartalmak fogyasztására szolgál. Egyes projektekhez való munkához: -### Fő adattár beállítása +### Fő tár beállítása ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz App beállítása (Vue 3 + Vite) +### Kvíz alkalmazás beállítása (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Fejlesztői szerver indítása -npm run build # Build létrehozása éles környezethez +npm run build # Építés éles környezetre npm run lint # ESLint futtatása ``` @@ -46,9 +46,9 @@ npm run lint # ESLint futtatása ```bash cd 7-bank-project/api npm install -npm start # Indítsd el az API szervert -npm run lint # Futtasd az ESLintet -npm run format # Formázd Prettier-rel +npm start # Indítsa el az API szervert +npm run lint # Futtassa az ESLint-et +npm run format # Formázza Prettier-rel ``` ### Böngészőbővítmény projektek @@ -56,7 +56,7 @@ npm run format # Formázd Prettier-rel ```bash cd 5-browser-extension/solution npm install -# Kövesd a böngészőspecifikus bővítmény betöltési utasításait +# Kövesse a böngészőspecifikus bővítmény betöltési utasításait ``` ### Űrjáték projektek @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# Nyisd meg az index.html fájlt a böngészőben, vagy használd a Live Server-t +# Nyisd meg az index.html fájlt a böngészőben vagy használd a Live Server-t ``` ### Chat projekt (Python backend) @@ -80,124 +80,124 @@ python api.py ### Tartalomközreműködőknek -1. **Forkold az adattárat** a GitHub fiókodba -2. **Klónozd a forkot** helyileg +1. **Forkold a tárat** a GitHub fiókodba +2. **Klónozd le a forkodat** helyileg 3. **Hozz létre egy új ágat** a változtatásaidhoz -4. Módosítsd a lecke tartalmát vagy kód példákat -5. Teszteld a kódváltoztatásokat a releváns projekt könyvtárakban -6. Küldd be a pull requesteket a hozzájárulási irányelvek szerint +4. Végezze el a módosításokat a leckék tartalmán vagy kód példákon +5. Tesztelje a kódváltozásokat az érintett projekt mappákban +6. Küldj be pull requesteket a hozzájárulási irányelvek szerint ### Tanulóknak -1. Forkold vagy klónozd az adattárat -2. Haladj sorban a lecke könyvtárakba -3. Olvasd el a README fájlokat minden leckéhez -4. Töltsd ki az előtti kvízeket a https://ff-quizzes.netlify.app/web/ oldalon -5. Dolgozz át a lecke könyvtárak kód példáin -6. Végezd el a feladatokat és kihívásokat -7. Töltsd ki a tanóra utáni kvízeket +1. Forkold vagy klónozd le a tárat +2. Folytasd a leckék mappáiban egymás után +3. Olvasd el az egyes leckék README fájljait +4. Teljesítsd az elő-lecke kvízeket a https://ff-quizzes.netlify.app/web/ címen +5. Dolgozz át a leckék mappa kód példáin +6. Fejezd be a feladatokat és kihívásokat +7. Csakazután végezd el az utó-lecke kvízeket ### Élő fejlesztés -- **Dokumentáció**: Futtasd a `docsify serve` parancsot a gyökérkönyvtárban (port 3000) -- **Quiz App**: Futtasd az `npm run dev` parancsot a quiz-app könyvtárban -- **Projektek**: Használd a VS Code Live Server bővítményt HTML projektekhez -- **API projektek**: Futtasd az `npm start` parancsot a megfelelő API könyvtárakban +- **Dokumentáció**: Futtasd a `docsify serve` parancsot a gyökérben (3000-es porton) +- **Kvíz alkalmazás**: `npm run dev` a quiz-app mappában +- **Projektek**: Használd a VS Code Live Server kiterjesztését HTML projektekhez +- **API projektek**: Futtasd az `npm start` parancsot a megfelelő API mappákban ## Tesztelési utasítások -### Quiz App tesztelés +### Kvíz alkalmazás tesztelése ```bash cd quiz-app -npm run lint # Ellenőrizze a kód stílusának problémáit +npm run lint # Ellenőrizze a kódstílus problémákat npm run build # Ellenőrizze, hogy a build sikeres-e ``` -### Bank API tesztelés +### Bank API tesztelése ```bash cd 7-bank-project/api npm run lint # Ellenőrizze a kódstílus problémákat -node server.js # Ellenőrizze, hogy a szerver hiba nélkül indul-e +node server.js # Ellenőrizze, hogy a szerver hibák nélkül indul-e ``` ### Általános tesztelési megközelítés -- Ez egy oktatási adattár, nem tartalmaz átfogó automatizált teszteket -- Kézi tesztelés fókuszpontjai: - - Kód példák hibamentes futtatása - - Dokumentációban lévő linkek helyes működése - - Projektek sikeres buildelése - - Példák követik a bevált gyakorlatokat +- Ez egy oktatási tár, nincs teljes körű automatizált tesztelés +- Manuális tesztek fókuszpontjai: + - Kódpéldák hibamentesen futnak + - Dokumentációban lévő linkek helyesek + - Projektek sikeresen épülnek + - Példák követik a legjobb gyakorlatokat -### Beküldés előtti ellenőrzések +### Előzetes ellenőrzések benyújtás előtt -- Futtasd az `npm run lint` parancsot a package.json fájlt tartalmazó könyvtárakban -- Ellenőrizd a markdown linkek érvényességét -- Teszteld a kód példákat böngészőben vagy Node.js-ben -- Ellenőrizd, hogy a fordítások megőrzik a megfelelő szerkezetet +- Futtasd az `npm run lint` parancsot azokban a mappákban, ahol van package.json +- Ellenőrizd a markdown linkek érvényes működését +- Teszteld a kódpéldákat böngészőben vagy Node.js-ben +- Ellenőrizd, hogy a fordítások megfelelő szerkezetet tartanak meg -## Kódstílus irányelvek +## Kódszabvány irányelvek ### JavaScript - Használj modern ES6+ szintaxist -- Kövesd a projektben található standard ESLint konfigurációkat -- Használj érthető változó- és függvényneveket az oktatási átláthatóság érdekében -- Adj kommenteket a fogalmak magyarázatára a tanulók számára -- Használj Prettier-t, ahol konfigurálva van +- Kövesd a projektekben megadott szabványos ESLint beállításokat +- Használj értelmes változó- és függvénynév adás a tanulók érthetőségéért +- Tegyél bele magyarázó kommenteket a fogalmak elmagyarázásához +- Formázd Prettier-rel, ahol be van állítva ### HTML/CSS -- Szemantikus HTML5 elemek használata -- Reszponzív tervezési alapelvek alkalmazása +- Szemiantikus HTML5 elemek használata +- Reszponzív tervezési alapelvek - Egyértelmű osztálynév konvenciók -- Kommentek a CSS technikák magyarázatára tanulóknak +- Kommentek CSS technikák elmagyarázásához a tanulók számára ### Python - PEP 8 stílusirányelvek követése -- Világos, oktatási célú kód példák -- Típusannotációk, ahol hasznos a tanulásban +- Világos, oktató jellegű kódpéldák +- Típusjavaslatok, ahol segítik a tanulást ### Markdown dokumentáció -- Tiszta fejezet hierarchia -- Kódblokkok nyelvi megjelöléssel +- Átlátható címsor hierarchia +- Kódrészek nyelvi specifikációval - Hivatkozások további forrásokra -- Képernyőfotók és képek az `images/` könyvtárakban -- Képekhez alt szöveg az akadálymentesség érdekében +- Képernyőképek és képek az `images/` könyvtárakban +- Képekhez alt szöveg az akadálymentességért ### Fájl szervezés -- A leckék számozása folytonos (1-getting-started-lessons, 2-js-basics stb.) -- Minden projektnek van `solution/` és gyakran `start/` vagy `your-work/` könyvtára -- Képek a leckékhez tartozó `images/` mappákban tárolva -- Fordítások a `translations/{nyelvkód}/` struktúrában +- A leckék sorszámozott sorrendben (1-getting-started-lessons, 2-js-basics stb.) +- Minden projekthez tartozik `solution/` és gyakran `start/` vagy `your-work/` mappa +- Képek a lecke-specifikus `images/` könyvtárakban tárolva +- Fordítások a `translations/{language-code}/` struktúrában ## Build és telepítés -### Quiz App telepítés (Azure Static Web Apps) +### Kvíz alkalmazás telepítése (Azure Static Web Apps) -A quiz-app konfigurálva van Azure Static Web Apps telepítéshez: +A quiz-app konfigurálva van Azure Static Web Apps telepítésre: ```bash cd quiz-app npm run build # Létrehozza a dist/ mappát -# GitHub Actions munkafolyamat segítségével telepít a main ágra történő push esetén +# GitHub Actions munkafolyamattal telepít nyomásra a main ágban ``` -Azure Static Web Apps konfiguráció: -- **App elérési út**: `/quiz-app` -- **Kimeneti könyvtár**: `dist` -- **Munkafolyamat**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Azure Static Web Apps beállítás: +- **Alkalmazás helye**: `/quiz-app` +- **Kimeneti hely**: `dist` +- **Folyamat**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Dokumentáció PDF generálás ```bash -npm install # Telepítse a docsify-to-pdf-t -npm run convert # PDF generálása a docs-ból +npm install # docsify-to-pdf telepítése +npm run convert # PDF generálása dokumentumokból ``` ### Docsify dokumentáció @@ -207,76 +207,76 @@ npm install -g docsify-cli # Telepítse a Docsify-t globálisan docsify serve # Szolgáltatás localhost:3000 címen ``` -### Projekt-specifikus build +### Projekt-specifikus build folyamatok -Minden projekt könyvtárnak lehet saját build folyamata: -- Vue projektek: `npm run build` létrehozza a produkciós csomagokat -- Statikus projektek: nincs build lépés, a fájlokat közvetlenül szolgálja ki +Minden projekthez lehet saját build folyamat: +- Vue projektek: `npm run build` előállítja a gyártásra kész csomagokat +- Statikus projektek: nincs build lépés, fájlokat közvetlenül szolgáltatja ## Pull request irányelvek -### Cím formátum +### Cím formátuma -Használj egyértelmű, leíró címeket, amelyek jelzik a változtatás területét: -- `[Quiz-app] Új kvíz hozzáadása a X. leckéhez` +Használj világos, leíró címeket, amelyek jelzik a változtatás területét: +- `[Quiz-app] Új kvíz a X. leckéhez` - `[Lesson-3] Elírás javítása a terrárium projektnél` - `[Translation] Spanyol fordítás hozzáadása az 5. leckéhez` -- `[Docs] Telepítési utasítások frissítése` +- `[Docs] Beállítási útmutató frissítése` -### Szükséges ellenőrzések +### Kötelező ellenőrzések -PR beküldése előtt: +Pull request beküldése előtt: 1. **Kódminőség**: - - Futtasd az `npm run lint` parancsot az érintett projekt könyvtárakban - - Javítsd az összes lint hibát és figyelmeztetést + - Futtasd az `npm run lint` parancsot a változtatott projektekben + - Javítsd a minden lint figyelmeztetést és hibát 2. **Build ellenőrzés**: - - Futtasd az `npm run build` parancsot, ha van - - Győződj meg róla, hogy nincs build hiba + - Futtasd az `npm run build`-et, ha van ilyen lépés + - Győződj meg, hogy nincs build hiba -3. **Linkek ellenőrzése**: +3. **Linkellenőrzés**: - Teszteld az összes markdown linket - - Ellenőrizd a képek működését + - Ellenőrizd a képek hivatkozásának működését -4. **Tartalom ellenőrzése**: - - Ellenőrizd helyesírást és nyelvtant - - Győződj meg róla, hogy a kód példák helyesek és oktató jellegűek - - Ellenőrizd, hogy a fordítások megőrzik az eredeti jelentést +4. **Tartalom átvizsgálás**: + - Ellenőrizd a helyesírást és nyelvtant + - Győződj meg a kódpéldák helyességéről és oktató jellegről + - Vizsgáld a fordítások pontosságát és eredeti jelentéstartalmat -### Hozzájárulási feltételek +### Hozzájárulási követelmények -- Fogadd el a Microsoft CLA-t (automatikus ellenőrzés az első PR-nél) -- Kövesd a [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) szabályzatot -- Lásd a [CONTRIBUTING.md](./CONTRIBUTING.md) fájlt részletes útmutatásért -- Hivatkozz hibaszámokra a PR leírásban, ha releváns +- Fogadd el a Microsoft CLA-t (automatikus ellenőrzés az első PR-nál) +- Kövesd a [Microsoft Open Source Etikai Kódexét](https://opensource.microsoft.com/codeofconduct/) +- Részletes szabályok a [CONTRIBUTING.md](./CONTRIBUTING.md) fájlban +- PR leírásában hivatkozz issue számokra, ha releváns -### Felülvizsgálati folyamat +### Átvizsgálási folyamat -- A PR-eket karbantartók és a közösség felülvizsgálja -- Előnyben részesül az oktatási tisztaság -- A kód példák kövessék a legjobb gyakorlatokat -- A fordításokat pontosság és kulturális megfelelőség alapján értékelik +- PR-eket a karbantartók és a közösség bírálja el +- Oktatási világosság előnyben +- Kódpéldák kövessék a jelenlegi legjobb gyakorlatokat +- Fordításokat ellenőrzik pontosság és kulturális illeszkedés szempontjából ## Fordítási rendszer ### Automatikus fordítás -- GitHub Actions használata a co-op-translator munkafolyamattal -- Több mint 50 nyelvre fordít automatikusan -- Forrásfájlok a főkönyvtárban -- Fordított fájlok a `translations/{nyelvkód}/` könyvtárakban +- GitHub Actions használata co-op-translator munkafolyamattal +- Automatikusan fordít 50+ nyelvre +- Forrásfájlok a fő könyvtárakban +- Fordított fájlok a `translations/{language-code}/` mappákban -### Manuális fordítási fejlesztések hozzáadása +### Kézi fordítási javítások hozzáadása -1. Keresd meg a fájlt a `translations/{nyelvkód}/` könyvtárban -2. Végezz javításokat úgy, hogy megőrzöd a szerkezetet -3. Biztosítsd, hogy a kódpéldák működőképesek maradjanak -4. Teszteld a lokalizált kvíz tartalmat +1. Keresd meg a fájlt a `translations/{language-code}/` könyvtárban +2. Végezze el a javításokat, miközben megőrzi a szerkezetet +3. Gondoskodj arról, hogy a kódpéldák továbbra is működjenek +4. Teszteld az esetleges lokalizált kvíz tartalmakat ### Fordítási metaadatok -A fordított fájlok tartalmaznak egy metaadat fejlécet: +A fordított fájlok tartalmazzák a metaadat fejlécet: ```markdown ``` -## Hibakeresés és problémamegoldás +## Hibakeresés és hibaelhárítás ### Gyakori problémák -**A quiz app nem indul el**: -- Ellenőrizd a Node.js verziót (ajánlott v14+) -- Töröld a `node_modules` és `package-lock.json` fájlokat, majd futtasd az `npm install`-t újra -- Ellenőrizd a portütközéseket (alapértelmezett: Vite a 5173-as portot használja) +**A kvíz alkalmazás nem indul el**: +- Ellenőrizd a Node.js verziót (javasolt v14+) +- Töröld a `node_modules` és a `package-lock.json` fájlokat, majd futtasd újra az `npm install` parancsot +- Ellenőrizd, hogy nincs portütközés (alapértelmezés szerint: Vite a 5173-as portot használja) -**Az API szerver nem indul**: -- Győződj meg, hogy a Node.js verzió eléri a minimumot (node >=10) -- Ellenőrizd, hogy a port nem foglalt -- Biztosítsd, hogy minden függőség telepítve van az `npm install`-lal +**API szerver nem indul**: +- Ellenőrizd, hogy a Node.js verzió legalább 10-es +- Ellenőrizd, hogy a port szabad-e +- Győződj meg róla, hogy minden függőség telepítve van az `npm install`-lal -**A böngészőbővítmény nem töltődik be**: -- Ellenőrizd, hogy a manifest.json helyesen van formázva -- Nézd meg a böngésző konzolját hibák után -- Kövesd a böngésző specifikus bővítmény telepítési utasításokat +**Böngészőbővítmény nem töltődik be**: +- Ellenőrizd, hogy a manifest.json helyesen van-e formázva +- Nézd meg a böngésző konzolját hibákért +- Kövesd a böngésző-specifikus bővítmény telepítési útmutatóját -**Python chat projekt problémái**: -- Győződj meg, hogy az OpenAI csomag telepítve van: `pip install openai` -- Ellenőrizd, hogy be van állítva a GITHUB_TOKEN környezeti változó -- Nézd meg a GitHub Models hozzáférési engedélyeket +**Python chat projekt problémák**: +- Biztosítsd, hogy az OpenAI csomag telepítve legyen: `pip install openai` +- Ellenőrizd, hogy a GITHUB_TOKEN környezeti változó be van állítva +- Nézd meg a GitHub Models hozzáférési jogosultságokat **Docsify nem szolgáltat dokumentációt**: -- Telepítsd a docsify-cli-t globálisan: `npm install -g docsify-cli` -- Futtasd az adattár gyökérkönyvtárából -- Ellenőrizd, hogy létezik a `docs/_sidebar.md` +- Telepítsd globálisan: `npm install -g docsify-cli` +- Futtasd a tár gyökérkönyvtárából +- Ellenőrizd, hogy létezik a `docs/_sidebar.md` fájl -### Fejlesztői környezeti tippek +### Fejlesztési környezet tippek -- Használd a VS Code Live Server bővítményt HTML projektekhez -- Telepítsd az ESLint és Prettier bővítményeket a konzisztens formázáshoz +- Használd VS Code-ot Live Server kiterjesztéssel HTML projektekhez +- Telepítsd az ESLint és Prettier kiterjesztéseket az egységes formázáshoz - Használd a böngésző fejlesztői eszközeit JavaScript hibakereséshez -- Vue projektekhez telepítsd a Vue DevTools böngésző bővítményt +- Vue projektekhez telepítsd a Vue DevTools böngésző kiegészítőt ### Teljesítmény szempontok -- A sok fordított fájl (50+ nyelv) miatt a teljes klón nagy -- Használj sekély klónt, ha csak tartalommal dolgozol: `git clone --depth 1` -- Bontsd ki a fordításokat a keresésekből, ha angol tartalommal dolgozol -- A build folyamatok lassúak lehetnek az első futtatáskor (npm install, Vite build) +- Nagyszámú fordított fájl (50+ nyelv) miatt a teljes klón nagy méretű +- Használj sekély klónt, ha csak a tartalmakon dolgozol: `git clone --depth 1` +- Fordításokat zárd ki a keresésből, ha angol tartalmakon dolgozol +- A build folyamatok lassúak lehetnek első futtatáskor (npm install, Vite build) -## Biztonsági szempontok +## Biztonsági megfontolások ### Környezeti változók -- API kulcsokat soha ne tölts be az adattárba -- Használj `.env` fájlokat (már szerepelnek a `.gitignore`-ban) -- Dokumentáld a szükséges környezeti változókat a projekt README-jeiben +- API kulcsokat soha ne tárolj a tárban +- Használj `.env` fájlokat (ezek már benne vannak a `.gitignore`-ban) +- Dokumentáld a szükséges környezeti változókat a projektek README-jeiben ### Python projektek - Használj virtuális környezeteket: `python -m venv venv` - Tartsd naprakészen a függőségeket -- A GitHub tokeneknek minimális szükséges jogosultságokkal kell rendelkezniük +- GitHub tokenek csak minimálisan szükséges jogosultságokkal legyenek beállítva ### GitHub Models hozzáférés -- Személyes hozzáférési tokenek (PAT) szükségesek a GitHub Models-hez -- A tokeneket környezeti változóként tárold -- Soha ne töltsd fel a tokeneket vagy hitelesítő adatokat az adattárba +- Személyes hozzáférési tokenek (PAT) szükségesek GitHub Models használatához +- Tokeneket környezeti változóként tárold +- Soha ne tárold vagy commitáld a tokeneket vagy hitelesítő adatokat -## Egyéb megjegyzések +## További megjegyzések ### Célközönség -- Teljes webfejlesztő kezdők +- Teljesen kezdő webfejlesztők - Diákok és önálló tanulók -- Tanárok, akik az órán használják a tananyagot -- A tartalom akadálymentes és fokozatos képességfejlesztésre tervezett +- Tanárok, akik ezt a tantervet használják osztálytermekben +- A tartalom akadálymentes és fokozatos készségfejlesztést szolgál ### Oktatási filozófia -- Projekt alapú tanulási megközelítés +- Projekt-alapú tanulás - Gyakori tudásellenőrzések (kvízek) - Gyakorlati kódolási feladatok -- Valós alkalmazási példák -- Az alapokra helyezi a hangsúlyt a keretrendszerek előtt +- Valós példák alkalmazásra +- Alapok elsajátítása keretrendszerek előtt -### Adattár karbantartás +### Tároló karbantartása -- Aktív közösség tanulókból és hozzájárulókból -- Rendszeres frissítések a függőségekben és tartalmakban -- Hibák és beszélgetések karbantartók által felügyelve -- Fordítási frissítések automatizáltak GitHub Actions segítségével +- Aktív tanulói és közreműködői közösség +- Függőségek és tartalom rendszeres frissítése +- Hibák és viták karbantartói felügyelete +- Fordítások automatikus frissítése GitHub Actions által ### Kapcsolódó források - [Microsoft Learn modulok](https://docs.microsoft.com/learn/) -- [Student Hub erőforrások](https://docs.microsoft.com/learn/student-hub/) +- [Student Hub források](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) ajánlott tanulóknak -- További kurzusok: Generatív AI, Adattudomány, ML, IoT tananyagok elérhetők +- Kiegészítő kurzusok: Generatív AI, Adattudomány, ML, IoT tantervek elérhetőek -### Egyes projektek kezelése +### Egyedi projektek kezelése -Az egyes projektek részletes utasításai a README fájlokban találhatók: -- `quiz-app/README.md` - Vue 3 kvíz alkalmazás +Részletes útmutatás egyes projektekhez a README fájlokban: +- `quiz-app/README.md` - Vue 3-alapú kvíz alkalmazás - `7-bank-project/README.md` - Banki alkalmazás hitelesítéssel - `5-browser-extension/README.md` - Böngészőbővítmény fejlesztés - `6-space-game/README.md` - Canvas alapú játékfejlesztés @@ -394,15 +394,15 @@ Az egyes projektek részletes utasításai a README fájlokban találhatók: ### Monorepo szerkezet -Bár nem hagyományos monorepo, ez az adattár több független projektet tartalmaz: -- Minden lecke önállóan működik -- A projektek nem osztanak meg függőségeket -- Egyes projektek fejlesztése nem befolyásolja a többit -- A teljes tananyag élményhez klónozd az egész adattárat +Bár nem hagyományos monorepo, ez a tár több független projektet tartalmaz: +- Minden lecke önálló +- Projektek nem osztoznak függőségeken +- Egyedi projekteken dolgozhatsz anélkül, hogy a többit érintenéd +- A teljes tantervi élményhez klónozd az egész tárat --- -**Jogi nyilatkozat**: -Ezt a dokumentumot az AI fordító szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti dokumentum a saját nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén szakmai emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy téves értelmezésekért. +**Felelősségkizárás**: +Ezt a dokumentumot a [Co-op Translator](https://github.com/Azure/co-op-translator) mesterséges intelligencia fordító szolgáltatás segítségével fordítottuk le. Bár az pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az anyanyelvén tekintendő hivatalos forrásnak. Kritikus információk esetén szakmai emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy félreértelmezésekért. \ No newline at end of file diff --git a/translations/hu/README.md b/translations/hu/README.md index a4db15194..77b095850 100644 --- a/translations/hu/README.md +++ b/translations/hu/README.md @@ -10,259 +10,270 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Webfejlesztés kezdőknek – Tananyag +# Webfejlesztés kezdőknek - Tananyag -Ismerd meg a webfejlesztés alapjait a Microsoft Cloud Advocates átfogó, 12 hetes tanfolyamán. A 24 leckéből álló anyag minden egyes részében gyakorlati projektek – teráriumok, böngészőbővítmények és űrjátékok – segítségével mélyedhetsz el a JavaScript, CSS és HTML világában. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd készségeidet, és optimalizáld tudásod megtartását hatékony, projektalapú oktatásunkkal. Kezdd el a kódolási utadat még ma! +Ismerd meg a webfejlesztés alapjait a Microsoft Cloud Advocates által tartott 12 hetes átfogó tanfolyamunkon. A 24 leckéből mindegyik JavaScriptet, CSS-t és HTML-t tárgyal, gyakorlati projektek révén, mint terráriumok, böngészőbővítmények és űrjátékok. Vegyél részt kvízekben, beszélgetésekben és gyakorlati feladatokban. Fejleszd készségeidet és optimalizáld a tudásod megtartását hatékony, projekt-alapú tanulási módszerünkkel. Kezdd el a kódolási utadat még ma! -Csatlakozz az Azure AI Foundry Discord közösséghez! +Csatlakozz az Azure AI Foundry Discord közösséghez [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Kezd el az alábbi lépések követésével használni ezeket az erőforrásokat: -1. **Forkold az adattárat**: Kattints ide [![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. **Klónozd az adattárat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Csatlakozz az Azure AI Foundry Discordhoz, és ismerkedj szakértőkkel és más fejlesztőkkel**](https://discord.com/invite/ByRwuEEgH4) +Kövesd ezeket a lépéseket, hogy elkezdd használni ezeket az erőforrásokat: +1. **Repozitorium klónozása**: Kattints ide [![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. **Repozitorium klónozása**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Csatlakozz az Azure AI Foundry Discordhoz, és ismerkedj meg szakértőkkel és fejlesztőtársaiddal**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Többnyelvű támogatás -#### GitHub Action által támogatott (Automatizált és mindig naprakész) +#### GitHub Action segítségével támogatott (Automatikus és mindig naprakész) [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](./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) -> **Inkább helyben klónoznád?** - -> Ez az adattár több mint 50 nyelvű fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítások nélkül szeretnéd klónozni, használhatod a sparse checkoutot: +> **Szeretnéd helyben klónozni?** +> +> Ez a repozitórium több mint 50 nyelvi fordítást tartalmaz, ami jelentősen megnöveli a letöltési méretet. Ha fordítások nélkül szeretnéd klónozni, használj sparse checkoutot: +> +> **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' > ``` -> Ezzel minden szükséges anyagot megkapsz a tanfolyam elvégzéséhez, sokkal gyorsabb letöltéssel. +> +> **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" +> ``` +> +> Így mindent megkapsz, amire szükséged van a tanfolyam elvégzéséhez, sokkal gyorsabb letöltéssel. -**Ha további nyelvi támogatást szeretnél, jelenleg támogatott fordítások listája [itt található](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Ha további nyelvű fordításokat szeretnél, ezek itt találhatók [itt](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) -#### 🧑‍🎓 _Diák vagy?_ +#### 🧑‍🎓 _Tanuló vagy?_ -Látogass el a [**Student Hub oldalra**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol kezdőknek szóló forrásokat, diák csomagokat és akár ingyenes tanúsítványutalványt is találsz. Ezt az oldalt érdemes könyvjelzővel ellátni és időnként felkeresni, hiszen havonta frissítjük a tartalmat. +Látogasd meg a [**Hallgatói központ oldalt**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), ahol megtalálod a kezdő erőforrásokat, hallgatói csomagokat és akár ingyenes tanúsítvány kupont is szerezhetsz. Ezt az oldalt érdemes elmenteni könyvjelzőnek és időnként ellenőrizni, mert havonta frissítjük a tartalmat. -### 📣 Bejelentés – Új GitHub Copilot Agent mód kihívások! +### 📣 Bejelentés - Új GitHub Copilot Agent mód kihívások várnak! -Új kihívás került hozzáadásra, keress rá a "GitHub Copilot Agent Challenge 🚀" kifejezésre a legtöbb fejezetben. Ez egy új kihívás, amelyhez a GitHub Copilot és az Agent mód segítségével dolgozhatsz. Ha még nem használtad az Agent módot, ez nem csak szöveg generálására képes, hanem fájlokat is létre tud hozni és szerkeszteni, parancsokat futtat és egyebeket. +Új kihívás került hozzáadásra, keresd a "GitHub Copilot Agent Challenge 🚀" feliratot a legtöbb fejezetben. Ez egy új kihívás, amelyet GitHub Copilot és Agent mód segítségével teljesíthetsz. Ha még nem használtad az Agent módot, tud szöveget generálni, fájlokat létrehozni és szerkeszteni, parancsokat futtatni és még sok mást. -### 📣 Bejelentés – _Új projekt generatív MI segítségével_ +### 📣 Bejelentés - _Új projekt generatív MI használatával_ -Új MI asszisztens projekt került be, nézd meg [projekt](./9-chat-project/README.md) +Új AI asszisztens projekt került hozzáadásra, nézd meg a [projektet](./9-chat-project/README.md) -### 📣 Bejelentés – _Új tananyag_ Generatív MI JavaScript számára most jelent meg +### 📣 Bejelentés - _Új tananyag_ Generatív MI témában JavaScripthez -Ne hagyd ki új Generatív MI tananyagunkat! +Ne hagyd ki új generatív MI tananyagunkat! -Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, hogy elkezdd! +Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt a kezdéshez! -![Background](../../translated_images/hu/background.148a8d43afde5730.webp) +![Háttér](../../translated_images/hu/background.148a8d43afde5730.webp) - Leckék az alapoktól a RAG-ig. -- Interaktív történelmi szereplőkkel GenAI és kísérő alkalmazásunk segítségével. -- Szórakoztató, lebilincselő narratíva, időutazással! - -![character](../../translated_images/hu/character.5c0dd8e067ffd693.webp) +- Történelmi karakterekkel interakció GenAI-val és kísérő alkalmazásunkkal. +- Szórakoztató és lebilincselő történet, időutazás! +![karakter](../../translated_images/hu/character.5c0dd8e067ffd693.webp) -Minden lecke tartalmaz egy feladatot, tudásellenőrzést és kihívást, amelyek segítségével megismerheted: -- Promptolás és prompt mérnökség -- Szöveges és képes alkalmazás generálás +Minden lecke tartalmaz egy kitöltendő feladatot, tudásellenőrzést és egy kihívást, amelyek segítenek a következők elsajátításában: +- Promptolás és prompttervezés +- Szöveg és kép alkalmazás generálás - Keresőalkalmazások -Látogass el a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalra, hogy elkezdd! +Látogasd meg a [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) oldalt a kezdéshez! -## 🌱 Kezdés -> **Tanári megjegyzésként**, tartalmazunk néhány javaslatot [itt](for-teachers.md) a tananyag használatához. Várjuk visszajelzésedet [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckét egy előzetes kvízzel kezdjetek, majd olvassátok el az anyagot, végezzétek el a feladatokat, és ellenőrizzétek megértéseteket az utólagos kvízzel. +## 🌱 Első lépések -Tanulási élményetek javítása érdekében dolgozzatok együtt társaiddal a projekteken! A beszélgetéseket biztatjuk [a vitafórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink válaszolnak kérdéseitekre. +> **Tanárok**, [tartalmazunk néhány javaslatot](for-teachers.md) a tananyag használatához. Visszajelzéseteket szívesen várjuk [a beszélgetési fórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -Tanulmányaitok elősegítésére erősen ajánljuk a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) oldal további anyagainak megismerését. +**[Tanulók](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, minden leckéhez kezdjetek egy előadás előtti kvízzel, majd olvassátok el az előadás anyagát, végezzétek el a különféle feladatokat, és a végén a jó megértés érdekében oldjátok meg az előadás utáni kvízt. + +A tanulási élmény fokozása érdekében dolgozzatok együtt társaitokkal a projekteken! A beszélgetéseket ösztönözzük [beszélgetési fórumunkon](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), ahol moderátoraink rendelkezésre állnak, hogy válaszoljanak kérdéseitekre. + +Tovább mélyítheted tudásodat, ha felfedezed a [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) oldalát további tananyagokért. ### 📋 Környezeted beállítása -A tananyag fejlesztői környezete készen áll! Kezdéskor választhatsz, hogy egy [Codespace](https://github.com/features/codespaces/) (_böngésző alapú, telepítés nélküli környezet_) futtatásával, vagy helyben, a számítógépeden egy szövegszerkesztő, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használatával dolgozol. +Ez a tananyag fejlesztői környezettel érkezik, ami készen áll a használatra! A kezdéshez választhatod, hogy a tananyagot egy [Codespace-ben](https://github.com/features/codespaces/) futtatod (_böngésző alapú, telepítés nélküli környezet_), vagy helyben a számítógépeden egy szövegszerkesztővel, például a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) alkalmazással. -#### Hozd létre saját adattáradat -Annak érdekében, hogy könnyen menthesd munkád, ajánlott létrehozni saját példányodat ebből az adattárból. Ezt a felül található **Use this template** gombbal teheted meg. Ez létrehoz egy új adattárat a GitHub-fiókodban a tananyag másolatával. +#### Hozd létre saját repositorydat +Ahhoz, hogy könnyen elmented a munkádat, ajánlott, hogy készíts saját másolatot erről a repozitóriumról. Ezt megteheted, ha a lap tetején a **Use this template** gombra kattintasz. Ez létrehoz egy új repozitóriumot a GitHub fiókodban a tananyag másolatával. -Kövesd az alábbi lépéseket: -1. **Forkold az adattárat**: Kattints a "Fork" gombra a felső jobb sarokban ezen az oldalon. -2. **Klónozd az adattárat**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Kövessétek ezeket a lépéseket: +1. **Forráspont másolása (Fork)**: Kattints a "Fork" gombra a lap jobb felső sarkában. +2. **Repo letöltése (Clone)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Tananyag futtatása Codespace-ben +#### A tananyag futtatása Codespace-ben -A létrehozott adattáradban kattints a **Code** gombra, majd válaszd az **Open with Codespaces** opciót. Ez létrehoz neked egy új Codespace környezetet. +A saját másolatodban, amit létrehoztál, kattints a **Code** gombra, majd válaszd az **Open with Codespaces** lehetőséget. Ez új Codespace-et hoz létre a munkához. ![Codespace](../../translated_images/hu/createcodespace.0238bbf4d7a8d955.webp) -#### Tananyag futtatása helyben a számítógépeden - -A tananyag helyi futtatásához szövegszerkesztőre, böngészőre és parancssori eszközre lesz szükséged. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközeibe](../../1-getting-started-lessons/1-intro-to-programming-languages), bemutat különféle lehetőségeket ezekre az eszközökre, hogy kiválaszthasd a számodra legmegfelelőbbet. +#### A tananyag helyi futtatása -Ajánlásunk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használata, amely beépített [terminállal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) rendelkezik. A Visual Studio Code-ot innen töltheted le: [link](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +A tananyag helyi futtatásához egy szövegszerkesztőre, böngészőre és parancssori eszközre lesz szükséged. Az első leckénk, [Bevezetés a programozási nyelvekbe és eszközökbe](../../1-getting-started-lessons/1-intro-to-programming-languages), bemutat különféle lehetőségeket ezek közül, hogy kiválaszthasd a számodra legmegfelelőbbet. -1. Klónozd a saját adattáradat a számítógépedre. Ezt megteheted a **Code** gombra kattintva és az URL másolásával: +Ajánljuk a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) használatát szerkesztőként, amely beépített [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) is tartalmaz. A Visual Studio Code-ot innen töltheted le: [ide](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Klónozd le a tárolódat a számítógépedre. Ezt úgy teheted meg, hogy rákattintasz a **Code** gombra, majd kimásolod az URL-t: [CodeSpace](./images/createcodespace.png) -Ezután nyisd meg a [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) alkalmazáson belül, és futtasd a következő parancsot, a `` helyére illeszd be az imént másolt URL-t: + + Ezután nyisd meg a [Terminált](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) a [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) alkalmazáson belül, és futtasd a következő parancsot, a `` helyére beillesztve az imént kimásolt URL-t: ```bash git clone ``` -2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt úgy teheted meg, hogy a **Fájl** > **Mappa megnyitása** menüpontra kattintasz, majd kiválasztod az imént klónozott mappát. +2. Nyisd meg a mappát a Visual Studio Code-ban. Ezt a **File** > **Open Folder** menüpont kiválasztásával, majd a klónozott mappa megadásával teheted meg. > Ajánlott Visual Studio Code kiterjesztések: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML oldalak előnézete a Visual Studio Code-on belül -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - segít gyorsabban írni a kódot +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - segít gyorsabban kódot írni -## 📂 Minden leckében megtalálható: +## 📂 Minden lecke tartalmaz: -- opcionális skiccjegyzet -- opcionális kiegészítő videó -- óra előtti bemelegítő kvíz -- írásos lecke -- projekt alapú leckék esetén lépésről lépésre útmutatók a projekt elkészítéséhez -- tudásellenőrző kérdések -- kihívás -- kiegészítő olvasmányok -- feladat -- [óra utáni kvíz](https://ff-quizzes.netlify.app/web/) +- opcionális vázlatrajzot +- opcionális kiegészítő videót +- leckét megelőző bemelegítő kvízt +- írott leckét +- projekt alapú leckékhez lépésről lépésre útmutatókat a projekt elkészítéséhez +- tudásellenőrzőket +- kihívást +- kiegészítő olvasnivalót +- feladatot +- [lecke utáni kvízt](https://ff-quizzes.netlify.app/web/) -> **Jegyzet a kvízekről**: Minden kvíz a Quiz-app mappában található, összesen 48 darab, mindegyik három kérdéssel. Elérhetők [itt](https://ff-quizzes.netlify.app/web/), a kvízalkalmazás helyben futtatható vagy telepíthető az Azure-ra; az instrukciókat a `quiz-app` mappában találod. +> **Megjegyzés a kvízekhez**: Az összes kvíz a Quiz-app mappában található, összesen 48 darab, mindhárom kérdésből álló teszt. Elérhetők [itt](https://ff-quizzes.netlify.app/web/), a kvíz alkalmazás helyileg is futtatható vagy Azure-ra telepíthető; kövesd az utasításokat a `quiz-app` mappában. ## 🗃️ Leckék -| | Projekt neve | Tanult fogalmak | Tanulási célok | Kapcsolódó lecke | Szerző | -| :-: | :------------------------------------------------------: | :-------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Kezdés | Bevezetés a programozásba és a fejlesztői eszközökbe | Megtanulni a legtöbb programozási nyelv alapjait és a szoftvereket, amelyek segítik a szakmai fejlesztőket munkájuk során | [Bevezetés a programozási nyelvekbe és eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Kezdés | GitHub alapok, köztük csapatmunkával kapcsolatos ismeretek | Megtanulni, hogyan kell használni a GitHub-ot a projektben és hogyan működj együtt másokkal a kódon | [Bevezetés a GitHub-ba](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Kezdés | Akadálymentesség | Megtanulni a web akadálymentesség alapjait | [Az akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS alapok | JavaScript adattípusok | A JavaScript adattípusok alapjai | [Adattípusok](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS alapok | Függvények és metódusok | Függvényekről és metódusokról tanulni az alkalmazás logikájának kezeléséhez | [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md) | Jasmine és Christopher | -| 06 | JS alapok | Döntéshozatal JavaScripttel | Tanulj meg feltételeket létrehozni a kódodban döntéshozatali módszerek segítségével | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS alapok | Tömbök és ciklusok | Adatok kezelése tömbök és ciklusok segítségével JavaScript-ben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML a gyakorlatban | HTML felépítése egy online terrárium számára, a felépítésre fókuszálva | [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS a gyakorlatban | CSS készítése az online terrárium stílusához, a CSS alapjaira fókuszálva, beleértve a reszponzív oldal készítését | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript closure-ök, DOM manipuláció | JavaScript írása a terrárium húzás- és ejtéses működéséhez, a closure-ök és a DOM manipuláció fókuszával | [JavaScript closure-ök, DOM manipuláció](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Gépelős játék](./4-typing-game/solution/README.md) | Gépelős játék készítése | Tanuld meg, hogyan használhatóak a billentyűesemények a JavaScript alkalmazás logikájában | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Böngészőkkel való munka | Tanuld meg, hogyan működnek a böngészők, történetüket és hogyan lehet elkészíteni az első elemeket egy böngészőbővítményhez | [A böngészőkről](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívása és változók tárolása helyi tárolóban | JavaScript elemek írása a böngészőbővítményedhez API hívásához, helyi tárolóban tárolt változók használatával | [API-k, űrlapok és helyi tároló](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, web teljesítmény | Használd a böngésző háttérfolyamatait a bővítmény ikon kezelésére; ismerkedj meg a web teljesítménnyel és optimalizációkkal | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Űrjáték](./6-space-game/solution/README.md) | Haladóbb játékkészítés JavaScript-tel | Tanulj az öröklésről osztályokkal és kompozícióval, valamint a Pub/Sub mintáról játék készítéshez | [Bevezetés a haladó játékkészítésbe](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás a canvas-re | Ismerd meg a Canvas API-t, amellyel elemek rajzolhatók a képernyőre | [Rajzolás a canvas-re](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Űrjáték](./6-space-game/solution/README.md) | Mozgatás a képernyőn elemekkel | Fedezd fel, hogyan lehet mozgást adni elemeknek a kartézián koordinátákkal és a Canvas API-val | [Elemek mozgatása](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Űrjáték](./6-space-game/solution/README.md) | Ütközés érzékelés | Készítsd el az ütközések kezelését elemek között, billentyűnyomások segítségével, valamint adj egy várakozási funkciót a játék teljesítményéhez | [Ütközés érzékelés](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Űrjáték](./6-space-game/solution/README.md) | Pontszámkészítés | Végezz matematikai számításokat a játék státusza és teljesítménye alapján | [Pontszámkészítés](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Űrjáték](./6-space-game/solution/README.md) | A játék befejezése és újraindítása | Ismerkedj meg a játék befejezésével és újraindításával, beleértve az erőforrások törlését és változók alaphelyzetbe állítását | [A befejező feltétel](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banki alkalmazás](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak webalkalmazásban | Tanuld meg, hogyan készíthetsz többszörös oldalt tartalmazó weboldal architektúrát routinggal és HTML sablonokkal | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Bejelentkezési és regisztrációs űrlap készítése | Tanulj az űrlapkészítésről és az érvényesítési folyamatokról | [Űrlapok](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Adatok lekérése és használata | Hogyan áramlanak az adatok az alkalmazásodba és onnan ki, hogyan kérd le, tárold és töröld őket | [Adatok](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelés fogalmai | Tanuld meg, hogyan kezeli az alkalmazásod az állapotot és hogyan kezeld azt programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Böngésző/VScode kód](../../8-code-editor) | VScode használata | Tanuld meg, hogyan használj kódszerkesztőt | [VScode kódszerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI asszisztensek](./9-chat-project/README.md) | Mesterséges intelligenciával való munka | Tanulj meg saját mesterséges intelligencia asszisztenst építeni | [AI asszisztens projekt](./9-chat-project/README.md) | Chris | - -## 🏫 Pedagógia - -A tananyagunk két fő pedagógiai elv mentén készült: +| | Projekt neve | Tanított koncepciók | Tanulási célok | Kapcsolódó lecke | Szerző | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Első lépések | Bevezetés a programozásba és a szakmában használt eszközök | Ismerd meg a legtöbb programozási nyelv alapjait és azokat a szoftvereket, amelyek segítik a profi fejlesztőket a munkájukban | [Bevezetés a programozási nyelvekbe és eszközökbe](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Első lépések | A GitHub alapjai, csapatmunkával együtt | Hogyan használd a GitHubot a projektedben, és hogyan működj össze másokkal egy kódalapon | [Bevezetés a GitHubba](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Első lépések | Akadálymentesség | Ismerd meg a webes akadálymentesség alapjait | [Az akadálymentesség alapjai](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Alapok | JavaScript adattípusok | A JavaScript adattípusainak alapjai | [Adattípusok](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Alapok | Függvények és metódusok | Ismerd meg a függvényeket és metódusokat, amelyek az alkalmazás logikájának kezelésére szolgálnak | [Függvények és metódusok](./2-js-basics/2-functions-methods/README.md) | Jasmine és Christopher | +| 06 | JS Alapok | Döntéshozatal JS-ben | Tanuld meg, hogyan készíts feltételeket a kódodban döntéshozó módszerekkel | [Döntéshozatal](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Alapok | Tömbök és ciklusok | Dolgozz adatokkal tömbök és ciklusok segítségével JavaScriptben | [Tömbök és ciklusok](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML a gyakorlatban | Építsd meg az online terrárium HTML-jét, fókuszálva a layout elkészítésére | [Bevezetés a HTML-be](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS a gyakorlatban | Építsd meg a CSS-t az online terrárium stílusához, beleértve az oldal reszponzívvá tételét is | [Bevezetés a CSS-be](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript lezárások, DOM kezelése | Építsd meg a JavaScript-et, hogy a terrárium drag/drop felületként működjön, fókuszálva a lezárásokra és a DOM kezelésére | [JavaScript lezárások, DOM kezelés](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Billentyűzetes játék](./4-typing-game/solution/README.md) | Billentyűzetes játék építése | Tanulj meg billentyűeseményeket használni JavaScript alkalmazásod logikájának vezérléséhez | [Eseményvezérelt programozás](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Böngészőkkel való munka | Ismerd meg, hogyan működnek a böngészők, történetüket és hogyan készítsd el az első elemeket egy böngészőbővítményhez | [A böngészőkről](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Űrlap készítése, API hívás és változók tárolása helyi tárolóban | Építsd meg a böngészőbővítmény JavaScript elemeit, hogy API-t hívj változók használatával, melyek helyileg tárolódnak | [API-k, űrlapok és helyi tárolók](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Zöld böngészőbővítmény](./5-browser-extension/solution/README.md) | Háttérfolyamatok a böngészőben, webteljesítmény | Használd a böngésző háttérfolyamatait az ikon kezelésére; ismerd meg a webteljesítményt és néhány optimalizálást | [Háttérfeladatok és teljesítmény](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Űrjáték](./6-space-game/solution/README.md) | Haladóbb játékfejlesztés JavaScript-tel | Tanuld meg az öröklődést osztályok és kompozíció segítségével, valamint a Pub/Sub mintát egy játék fejlesztéséhez | [Bevezetés a haladó játékfejlesztésbe](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Űrjáték](./6-space-game/solution/README.md) | Rajzolás vászonra | Ismerd meg a Canvas API-t, amely elemek rajzolására szolgál a képernyőre | [Rajzolás vászonra](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Űrjáték](./6-space-game/solution/README.md) | Mozgatás a képernyőn | Fedezd fel, hogyan mozdíthatók el elemek kartézián koordináták és a Canvas API segítségével | [Elemmozgatás](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Űrjáték](./6-space-game/solution/README.md) | Ütközésérzékelés | Tedd lehetővé, hogy az elemek ütközzenek, reagáljanak egymásra billentyűleütések alapján, és legyen visszaállító funkció a teljesítmény érdekében | [Ütközésérzékelés](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Űrjáték](./6-space-game/solution/README.md) | Pontszámlálás | Végezz matematikai számításokat a játék állapotának és teljesítményének megfelelően | [Pontszámlálás](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Űrjáték](./6-space-game/solution/README.md) | A játék befejezése és újraindítása | Ismerd meg, hogyan zárd le és indítsd újra a játékot, beleértve az erőforrások felszabadítását és a változók alaphelyzetbe állítását | [A befejezés feltétele](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banki alkalmazás](./7-bank-project/solution/README.md) | HTML sablonok és útvonalak egy webalkalmazásban | Tanuld meg, hogyan készítsd el egy többlapos weboldal architektúrájának alapját útvonalak és HTML sablonok használatával | [HTML sablonok és útvonalak](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Belépési és regisztrációs űrlap készítése | Tanuld meg az űrlapok építését és az érvényesítés kezelését | [Űrlapok](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Az adatok lekérése és használata | Hogyan áramlanak az adatok az alkalmazásban, hogyan kérhetők le, tárolhatók és törölhetők | [Adatok](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banki alkalmazás](./7-bank-project/solution/README.md) | Állapotkezelés alapjai | Tanuld meg, hogyan őrzi meg az alkalmazás az állapotot, és hogyan kezelheted programozottan | [Állapotkezelés](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Böngésző / VScode kód](../../8-code-editor) | VScode használata | Tanuld meg a kódszerkesztő használatát | [VScode kódszerkesztő használata](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI asszisztensek](./9-chat-project/README.md) | Mesterséges intelligenciával való munka | Tanuld meg, hogyan építsd fel a saját AI asszisztensedet | [AI asszisztens projekt](./9-chat-project/README.md) | Chris | + +## 🏫 Didaktika + +Tananyagunk kialakításánál két alapvető didaktikai elv vezérelt minket: * projektalapú tanulás * gyakori kvízek -A program a JavaScript, HTML és CSS alapjait, valamint a mai webfejlesztők által használt legújabb eszközöket és technikákat tanítja. A hallgatóknak lehetőségük lesz gyakorlati tapasztalatot szerezni egy gépelős játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós stílusú játék és egy üzleti banki alkalmazás fejlesztésével. A sorozat végére a résztvevők szilárd ismereteket szereznek a webfejlesztés területén. +A program a JavaScript, HTML és CSS alapjait, valamint a mai webfejlesztők által használt legújabb eszközöket és technikákat tanítja. A diákoknak lehetőségük lesz gyakorlati tapasztalatot szerezni egy billentyűzetes játék, virtuális terrárium, környezetbarát böngészőbővítmény, űrinváziós stílusú játék és egy banki alkalmazás építésével. A tanfolyam végére szilárd webfejlesztési ismeretekkel rendelkeznek majd. -> 🎓 Az első néhány leckét ezen tananyagból elvégezheted a [Tanulási útvonal](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) keretében a Microsoft Learn-en! +> 🎓 Az első pár leckét ebben a tananyagban egy [tanulási útvonal](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) formájában is elvégezheted a Microsoft Learn-en! -Azáltal, hogy az anyagok a projektekhez igazodnak, a tanulás élvezetesebb és a fogalmak jobb megtartása válik lehetővé. Továbbá több JavaScript alapokat bemutató kezdő leckét írtunk, melyek fogalmakat vezetnek be, kiegészítve a "[Kezdők sorozata: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videós oktatóanyagokkal, melyek egyes szerzői közreműködtek ebben a tananyagban. +Az anyag projektekhez igazítása által a folyamat élvezetesebb lesz a diákok számára, és növeli a koncepciók elsajátítását. Emellett több bevezető leckét is írtunk a JavaScript alapjairól, kiegészítve a "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" videós oktatóanyag gyűjtemény egyik videójával, amelynek néhány szerzője közreműködött ebben a tananyagban. -Ezen felül egy alacsony tétű kvíz az óra előtt beállítja a diák motivációját a téma tanulására, míg egy második kvíz az óra után biztosítja a tudás további megtartását. Ez a tananyag rugalmas és szórakoztató módon lett kialakítva, teljes egészében vagy részben is elvégezhető. A projektek kicsiben kezdődnek, és a 12 hetes ciklus végére egyre összetettebbek lesznek. +Továbbá, egy alacsony tétű kvíz az óra előtt segíti a tanuló elköteleződését a téma iránt, míg egy második kvíz az óra után tovább erősíti a tudás megszilárdítását. Ez a tananyag rugalmas és szórakoztató, egészben vagy részleteiben is végezhető. A projektek kicsiben indulnak, és a 12 hetes ciklus végére egyre összetettebbekké válnak. -Bár szándékosan kerültük a JavaScript keretrendszerek bevezetését, hogy a webfejlesztői alapok megtanítása után lehessen csak áttérni azok használatára, jó következő lépés lehet a tananyag után a Node.js elsajátítása a "[Kezdők sorozata: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" videósorozat által. +Miközben szándékosan mellőztük JavaScript keretrendszerek bemutatását, hogy a webfejlesztőként szükséges alapvető készségekre koncentráljunk, mielőtt keretrendszert alkalmaznánk, egy jó következő lépés a tananyag elvégzése után a Node.js megismerése lehet a következő videósorozaton keresztül: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Látogasd meg a [Viselkedési Kódexünket](CODE_OF_CONDUCT.md) és a [Hozzájárulás](CONTRIBUTING.md) útmutatókat. Várjuk építő jellegű visszajelzéseidet! +> Látogasd meg a [Viselkedési kódexünket](CODE_OF_CONDUCT.md) és a [Hozzájárulás](CONTRIBUTING.md) irányelveinket. Örömmel fogadjuk konstruktív visszajelzésed! -## 🧭 Offline hozzáférés +## 🧭 Offline használat -Ezt a dokumentációt offline is futtathatod a [Docsify](https://docsify.js.org/#/) használatával. Forkold le ezt a repót, [telepítsd a Docsify-t](https://docsify.js.org/#/quickstart) a helyi gépeden, majd a repo gyökérmappájában írd be: `docsify serve`. A weboldal a localhost 3000-es portján lesz elérhető: `localhost:3000`. +Ez a dokumentáció offline is használható a [Docsify](https://docsify.js.org/#/) használatával. Forkold ezt a repo-t, telepítsd a Docsify-t helyileg a gépeden, majd a repo gyökerében írd be, hogy `docsify serve`. A weboldal a 3000-es porton lesz elérhető a localhostodon: `localhost:3000`. ## 📘 PDF - Az összes leckéről készült PDF [itt található](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -## 🎒 Egyéb kurzusok +## 🎒 Egyéb tanfolyamok + Csapatunk más tanfolyamokat is készít! Nézd meg: ### LangChain -[![LangChain4j kezdőknek](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 kezdőknek](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 kezdőknek](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 / Ügynökök -[![AZD kezdőknek](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 kezdőknek](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 kezdőknek](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 ügynökök kezdőknek](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) --- - + ### Generatív AI sorozat -[![Generatív AI kezdőknek](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) -[![Generatív 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) -[![Generatív 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) -[![Generatív 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) +[![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) --- - + ### Alapvető tanulás -[![ML kezdőknek](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) -[![Adattudomány kezdőknek](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 kezdőknek](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) -[![Kiberbiztonság kezdőknek](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) -[![Webfejlesztés kezdőknek](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 kezdőknek](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 fejlesztés kezdőknek](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 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 sorozat -[![Copilot AI páros programozáshoz](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-hez](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 kaland](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 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) ## Segítségkérés -Ha elakadsz vagy kérdésed van az AI alkalmazások fejlesztésével kapcsolatban, csatlakozz a többi tanulóhoz és tapasztalt fejlesztőkhöz az MCP-vel kapcsolatos beszélgetésekben. Ez egy támogató közösség, ahol a kérdések szívesen fogadottak és a tudás szabadon megosztott. +Ha elakadsz vagy kérdésed van az AI alkalmazások építésével kapcsolatban, csatlakozz más tanulókhoz és tapasztalt fejlesztőkhöz az MCP-ről szóló beszélgetésekben. Ez egy támogató közösség, ahol a kérdéseket örömmel fogadják és a tudást szabadon megosztják. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Ha termékvisszajelzésed vagy hibáid vannak, látogass el ide: +Ha termék-visszajelzésed vagy hibajelentésed van fejlesztés közben, látogass el ide: -[![Microsoft Foundry fejlesztői fórum](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) +[![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) ## Licenc -Ez a tárhely az MIT licenc alatt áll. További információkért lásd a [LICENSE](../../LICENSE) fájlt. +Ez a tároló az MIT licenc alatt áll. Részletekért lásd a [LICENSE](../../LICENSE) fájlt. --- -**Nyilatkozat**: -Ezt a dokumentumot a [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordító szolgáltatás segítségével fordítottuk. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum a saját nyelvén tekintendő hivatalos forrásnak. Fontos információk esetén ajánlott szakmai, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért. +**Jóváhagyási nyilatkozat**: +Ezt a dokumentumot az AI fordító szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) használatával fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti, anyanyelvi dokumentum tekintendő a hiteles forrásnak. Kritikus információk esetén professzionális, emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy félreértelmezésekért. \ No newline at end of file diff --git a/translations/sw/.co-op-translator.json b/translations/sw/.co-op-translator.json index e8b6a831a..19a46dec8 100644 --- a/translations/sw/.co-op-translator.json +++ b/translations/sw/.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-07T02:08:41+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T15:47:51+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "sw" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:05:48+00:00", + "translation_date": "2026-03-06T16:03:56+00:00", "source_file": "AGENTS.md", "language_code": "sw" }, @@ -516,8 +516,8 @@ "language_code": "sw" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T18:01:36+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T15:43:54+00:00", "source_file": "README.md", "language_code": "sw" }, diff --git a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md index ed2f91993..95a46150a 100644 --- a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,161 +1,161 @@ -# Utangulizi wa Lugha za Programu na Vifaa vya Kisasa vya Mwaendelezaji +# Utangulizi kwa Lugha za Kuprogramu na Zana za Kisasa za Waundaji wa Programu -Hujambo, mtaalamu wa kesho! 👋 Naweza kukuambia kitu kinachoniletea baridi kila siku? Unakaribia kugundua kuwa programu siyo tu kuhusu kompyuta – ni kuhusu kuwa na nguvu za kichawi kuleta mawazo yako shupavu katika maisha! +Hujambo, muundaji wa baadaye! 👋 Naweza kukuambia kitu ambacho bado kinakupa baridi kila siku? Uko karibu kugundua kuwa programu siyo tu kuhusu kompyuta – ni kuhusu kuwa na nguvu halisi za kipekee za kuleta mawazo yako mabaya katika maisha! -Unajua wakati unapotumia programu unayopenda na kila kitu kinakwenda vizuri? Unapobofya kitufe na kitu cha kichawi kinatokea kinachokufanya useme "wow, walifanyaje hivyo?" Naam, mtu kama wewe – labda amekaa kwenye kahawa anayopenda saa 2 asubuhi akiwa na espresso ya tatu – aliandika msimbo uliosababisha kichawi hicho. Na hapa ndipo utakapoanguka kustaajabishwa: mwishoni mwa somo hili, hutagundua tu jinsi walivyofanya, bali utataka pia kujaribu wewe mwenyewe! +Unajua wakati ule unapokuwa unatumia programu yako uipendayo na kila kitu kinatokea kwa usahihi kabisa? Unapobofya kitufe na kitu cha kichawi kabisa kinatokea ambacho kinakufanya useme "wow, walifanya-je hiyo?" Naam, mtu anaekufanana nawe – labda ameketi kwenye kahawa anayopenda saa 2 usiku akiwa na espresso yake ya tatu – ndiye aliyeandika msimbo uliounda uchawi huo. Na hili ndilo litakalokufanya kushangaa: kufikia mwisho wa somo hili, hutakuwa tu unaelewa jinsi walivyofanya, bali utakuwa unataka kujaribu wewe mwenyewe! -Tazama, naelewa kabisa kama programu inakuletea hofu sasa hivi. Nilipoanza, nilifikiri unatakiwa uwe genius wa hisabati au umekuwa ukifanya programu tangu umekuwa na miaka mitano. Lakini hii ilibadilisha kabisa mtazamo wangu: programu ni sawa na kujifunza kuzungumza katika lugha mpya. Unaanzia na "hello" na "thank you," kisha unaendelea kuagiza kahawa, na ghafla unazungumza mijadala ya mwanafalsafa! Ila katika hili, unazungumza na kompyuta, na kweli? Kompyuta ni washirika wa mazungumzo wenye subira sana – hawakufungii makosa yako laana na daima wanataka kujaribu tena! +Tazama, ninaelewa kabisa ikiwa programu inakukera sasa hivi. Nilipoanza, nilifikiri kweli unahitaji kuwa genius wa hisabati au umekuwa ukipiga msimbo tangu umekuwa na umri wa miaka mitano. Lakini hili ndilo lililonibadilisha mtazamo: programu ni kama kujifunza kuzungumza lugha mpya. Unaanzia na "hello" na "asante," kisha unajiweka tayari kuagiza kahawa, na kabla haujajua, unazungumza masuala ya falsafa! Ila katika hili, unaendesha mazungumzo na kompyuta, na ukweli? Wao ni wapenzi wa mazungumzo wasio na kulaumu – hawahukumu makosa yako na kila wakati wanataka jaribu tena! -Leo, tutaangalia zana za ajabu zinazofanya maendeleo ya wavuti wa kisasa siyo tu kuwawezekana, bali kuwa kitu cha kuvutia sana. Ninazungumzia wahariri, vivinjari na njia za kazi sawa na zile zinazotumika na waendelezaji wa Netflix, Spotify, na studio yako ya programu unayopenda kila siku. Na hapa ni sehemu itakayokupeleka kucheza kwa furaha: wengi wa zana hizi za kitaalamu za kiwango cha viwanda ni bure kabisa! +Leo, tutachunguza zana za kushangaza zinazofanya maendeleo ya wavuti wa kisasa kuwa si tu inawezekana, bali kuvutia sana. Ninazungumzia wahariri wa msimbo, vivinjari, na mitiririko ya kazi ambayo waundaji wa Netflix, Spotify, na studio yako ya programu wa indie hutumia kila siku. Na hapa ni sehemu inayokufanya ufanye densi ya furaha: zana nyingi za kiwango cha kitaalamu, zenye viwango vya sekta ni bure kabisa! ![Intro Programming](../../../../translated_images/sw/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Safari Yako ya Uandishi wa Programu Leo + title Safari Yako ya Uprogramu Leo section Gundua - Nini Uandishi wa Programu: 5: You - Lugha za Uandishi wa Programu: 4: You - Muhtasari wa Vifaa: 5: You + Nini Ni Uprogramu: 5: You + Lugha za Uprogramu: 4: You + Muhtasari wa Zana: 5: You section Chunguza Wahariri wa Msimbo: 4: You Vivinjari na Zana za Waendelezaji: 5: You - Mstari wa Amri: 3: You - section Fanya Mazoezi + Sehemu ya Amri: 3: You + section Jaribu Mpelelezi wa Lugha: 4: You - Uchunguzi wa Vifaa: 5: You - Muungano wa Jamii: 5: You + Ugunduzi wa Zana: 5: You + Muunganiko wa Jumuiya: 5: You ``` -## Tuchunguze Unachojua Tayari! +## Tuwone Unajua Nini Hadi Sasa! -Kabla hatujaingia kwenye mambo ya kufurahisha, nina hamu ya kujua – tayari unajua nini kuhusu ulimwengu huu wa programu? Na sikiliza, kama unapoangalia maswali haya ukijiambia "hatuna wazo hata kidogo kuhusu haya," hiyo siyo tu sawa, ni nzuri kabisa! Hiyo ina maana uko mahali pale pa kuanzia. Fikiria hii kama kufanya mazoezi kabla ya mazoezi halisi – tunaandaa misuli ya ubongo! +Kabla hatujaingia kwenye mambo ya kufurahisha, nina hamu – unajua nini kuhusu ulimwengu huu wa programu? Na sikiliza, ikiwa unatazama maswali haya ukifikiri "sijui hata kidogo chochote kuhusu hili," hiyo si tu sawa, ni bora kabisa! Hii ina maana uko mahali sahihi kabisa. Fikiria hii kama mswada wa kufungua misuli kabla ya mazoezi – tunajipa moto misuli ya ubongo! -[Chukua mtihani wa kabla ya somo](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Chukua mtihani wa kabla ya somo](https://ff-quizzes.netlify.app/web/) -## Safari Tunayoanza Pamoja +## Safari Tunayotaka Kuichukua Pamoja -Sawa, nina furaha sana kuhusu kile tutakachokigundua leo! Kwa kweli, ningependa kuona uso wako unavyotabasamu wakati baadhi ya dhana hizi zitakapoeleweka. Haya ni mambo makuu tunayoyachunguza pamoja: +Sawa, nina furaha kabisa kuhusu kile tunachotaka kuchunguza leo! Kweli, natamani kuona uso wako wakati baadhi ya dhana hizi zinaeleweka. Hapa ni safari ya kushangaza tunayoyachukua pamoja: -- **Programu ni nini hasa (na kwa nini ni jambo la kuvutia zaidi!)** – Tutagundua jinsi msimbo ni nguvu ya kichawi isiyoonekana inayotawaliya kila kitu kinachokuzunguka, kutoka saa yako ya kengele inayojua ni Jumatatu asubuhi hadi algorithm inayoakili mapendekezo yako ya Netflix -- **Lugha za programu na utu wao wa ajabu** – Fikiria unaingia kwenye sherehe ambapo kila mtu ana nguvu tofauti na njia za kutatua matatizo. Dunia ya lugha za programu ni kama hivyo, na utapenda kuwakutana nao! -- **Misingi ya msingi inayosababisha uchawi wa kidijitali kutokea** – Fikiria hivi kama seti ya LEGO bora kabisa ya ubunifu. Ukijua jinsi vipande hivi vinavyolingana, utaona unaweza kujenga chochote kinachotokana na mawazo yako -- **Zana za kitaalamu zitakazokufanya uhisi kama umepata fimbo ya mchawi** – Sio kujaa mbwembwe hapa – zana hizi zitakufanya uhisi kama una nguvu za kichawi, na sehemu nzuri? Ni zile zile zinazotumika na wataalamu! +- **Kilicho programu kweli (na kwa nini ni kitu cha baridi zaidi!)** – Tutagundua jinsi msimbo ni hali ya kichawi isiyoonekana inayoiendesha kila kitu kinachokuzunguka, kutoka ile kengele inayojua ni Jumatatu asubuhi hadi ile algoriti inayochagua mapendekezo yako ya Netflix kwa usahihi +- **Lugha za programu na tabia zao za kushangaza** – Fikiria kuingia kwenye sherehe ambapo kila mtu ana nguvu za kipekee na njia tofauti za kutatua matatizo. Hapo ndio ulimwengu wa lugha za programu uko, na utapenda kukutana nazo! +- **Vijengo vya msingi vinavyofanya uchawi wa kidijitali kutokea** – Fikiria haya kama seti bora kabisa ya LEGO ya ubunifu. Ukielewa jinsi vipande hivi vinaungana, utagundua unaweza kujenga chochote unachotaka kwa mawazo yako +- **Zana za kitaalamu zitakazokufanya uhisi kama umepokea fimbo ya mchawi** – Si mingi hapa – zana hizi zitakufanya uhisi una nguvu za kipekee, na hatua bora? Ndizo zile ambazo wataalamu hutumia! -> 💡 **Hili ni jambo:** Usijaribu kumbuka yote leo! Sasa hivi, nataka ujisikie msisimko wa kile kinachowezekana. Maelezo yatajifunza kwa asili tukiwa tunazoezana – ndiyo jinsi mafunzo halisi yanavyotokea! +> 💡 **Haya ni mambo:** Usifikirie hata kidogo kuhusu kukumbuka kila kitu leo! Kwa sasa, nataka uonyeshe msisimko kidogo kuhusu kile kinachowezekana. Maelezo yatakuwa rahisi kueleweka tunapofanya kwa pamoja – ndivyo kujifunza halisi kunavyotokea! -> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Hivyo Basi, Programu Ni Nini Kweli? +## Hivyo *Basi* Programu ni Nini Halisi? -Sawa, tujiandae kukabiliana na swali la pesa milioni: programu ni nini, kweli? +Sawa, tuchukue swali la thamani kubwa: programu ni nini, kweli? -Nitakuambia hadithi iliyobadilisha kabisa mtazamo wangu kuhusu hili. Wiki iliyopita, nilijaribu kumweleza mama yangu jinsi ya kutumia kidhibiti TV yetu mpya smart. Nilijikuta nikisema vitu kama "Bonyeza kitufe cheupe, lakini si kitufe kikubwa cheupe, ni kidogo upande wa kushoto... hapana, upande mwingine wa kushoto... sawa, sasa shikilia kwa sekunde mbili, si moja, si tatu..." Inajulikana? 😅 +Nitakuambia hadithi iliyobadilisha kabisa mtazamo wangu kuhusu hili. Wiki iliyopita, nilijaribu kufafanulia mama yangu jinsi ya kutumia dremote ya TV smart mpya tuliyonayo. Nilijikuta nikisema vitu kama "Bofya kitufe chekundu, si kitufe kikubwa chekundu, kitufe kidogo chekundu upande wa kushoto... hapana, upande wako mwingine wa kushoto... sawa, sasa shikilia kwa sekunde mbili, si moja, si tatu..." Je, inakufahamika? 😅 -Hiyo ndiyo programu! Ni sanaa ya kutoa maagizo ya kina, hatua kwa hatua kwa kitu chenye nguvu lakini kinahitaji kila kitu kieleweke vizuri. Badala ya kumweleza mama yako (anaweza kuuliza "kitufe cheupe kipi?!"), unamweleza kompyuta (inafanya tu kile unachosema, hata kama hicho siyo ile ulichomaanisha). +Hiyo ndio programu! Ni sanaa ya kutoa maagizo ya kina, hatua kwa hatua kwa kitu chenye nguvu lakini kinahitaji kila kitu kieleweke kabisa. Ila badala ya kufafanulia mama yako (ambaye anaweza kuuliza "Ni kitufe kapekundu gani?!"), unafafanulia kompyuta (ambayo hufanya tu kile unachosema, hata kama kile ulichoambia si kile ulichomaanisha kabisa). -Hili lilenishangaza nilipolijifunza kwanza: kompyuta ni rahisi hasa ndani yake. Zinachambua vitu viwili tu – 1 na 0, ambayo ni sawa na "ndiyo" na "hapana" au "zima" na "zimewashwa". Hiyo tu! Lakini hapa ndipo kina kichawi kinapoanza – hatuhitaji kuzungumza kwa 1 na 0 kama tunavyofanya katika The Matrix. Hapo ndipo **lugha za programu** zinapokuja kuokoa hali. Ni kama kuwa na mkalimani bora duniani anayechukua mawazo yako ya kawaida ya binadamu na kuyatafsiri kwa lugha ya kompyuta. +Hili lilinishangaza nilipojifunza mara ya kwanza: kompyuta ni rahisi kabisa kwa kiini chao. Kwa kweli huelewa mambo mawili tu – 1 na 0, ambayo ni sawa na "ndio" na "hapana" au "zima" na "waka." Hilo ndilo! Lakini hapa ndipo uchawi unaingia – hatuhitaji kuzungumza kwa 1 na 0 kama tunavyofanya kwenye The Matrix. Hapo ndipo **lugha za programu** zinakuja kusaidia. Ziko kama mtafsiri bora wa dunia anayechukua mawazo yako ya kawaida ya kibinadamu na kuyageuza kuwa lugha ya kompyuta. -Na hili linanilia baridi kila asubuhi ninapoamka: kila kitu kidijitali katika maisha yako kilianzishwa na mtu kama wewe, labda amekaa mavazi ya kulala na kikombe cha kahawa, akiandika msimbo kwenye kompyuta yake ndogo. Filteri ya Instagram inayokufanya uonekane mzuri? Mtu aliandika msimbo huo. Mapendekezo yaliyokupeleka kwenye wimbo wako mpya mpendwa? Mtaalamu alijenga algorithm hiyo. Programu inayokusaidia kugawanya bili za chakula na marafiki? Vilevile, mtu aliyedhani "hili linanichosha, nitaweza kulitatua" na kisha... wakafanya! +Na hii bado inanipa baridi kila asubuhi ninapoamka: kila kitu cha kidijitali katika maisha yako alianza na mtu kama wewe, labda ameketi akiwa na pyjama na kikombe cha kahawa, akiandika msimbo kwenye kompyuta yake mpakato. Sefa ya Instagram inayokufanya uonekane mkamilifu? Mtu aliandika msimbo huo. Mapendekezo yaliyokupeleka kwenye wimbo wako mpya unaoupenda? Muundaji wa programu aliunda algoriti hiyo. Programu inayokusaidia kugawanya bili za chakula usiku na marafiki? Ndio, mtu alifikiri "hii ni kuchosha, nadhani ningeweza kutatua hii" na kisha... walifanya! -Unapojifunza programu, hauchagui tu ujuzi mpya – unajiunga na jamii hii ya ajabu ya watu wanaotafuta kutatua matatizo walioko siku nzima wakijiuliza, "Je, naweza kujenga kitu kitakachofanya mtu afurahie kidogo zaidi?" Kwa kweli, kuna jambo lolote la kuvutia zaidi kuliko hilo? +Unapojifunza kuprogramu, hutangazwi tu ujuzi mpya – unajiunga na jamii hii ya kushangaza ya watu wanaotatua matatizo ambao hutumia siku zao kufikiri, "Je, ningejenga kitu kitakachomfanya mtu aone siku yake kuwa bora kidogo?" Kweli, kuna jambo lolote baridi zaidi ya hilo? -✅ **Tamasha la Habari za Kufurahisha:** Hapa kuna kitu kizuri cha kutafiti unachopata muda – unafikiri ni nani alianza kuandika programu ya kompyuta duniani? Nitakupa dalili: labda si mtu unayemsubiria! Hadithi ya mtu huyu ni ya kusisimua sana na inaonyesha kuwa programu daima imekuwa kuhusu ubunifu wa kutatua matatizo na kufikiria nje ya kawaida. +✅ **Jifunze Zaidi Kuhusu Ficto:** Hapa kuna jambo la kupendeza kuangalia unapokuwa na muda huru – unadhani ni nani alikuwa muundaji wa programu wa kwanza duniani? Nitakupa kidokezo: huenda si mtu uliyetarajia! Hadithi ya mtu huyu ni ya kuvutia sana na inaonyesha kuwa programu daima imekuwa kuhusu ubunifu wa kutatua matatizo na kufikiria nje ya gridi. -### 🧠 **Wakati wa Kukagua: Unaonaje?** +### 🧠 **Wakati wa Kukagua: Una Jinsi gani?** -**Chukua muda kutafakari:** +**Chukua muda wa kutafakari:** - Je, wazo la "kutoa maagizo kwa kompyuta" linaeleweka kwako sasa? -- Unaweza kufikiria kazi ya kila siku unayotaka kuiboresha kwa programu? -- Maswali yapi yanakutokea kuhusu jambo hili zima la programu? +- Je, unaweza kufikiria kazi ya kila siku unayopenda kuendesha kwa programu? +- Ni maswali gani yanayojitokeza kichwani mwako kuhusu jambo hili la programu? -> **Kumbuka:** Ni kawaida kabisa kama baadhi ya dhana zinakuletea msukosuko sasa. Kujifunza programu ni sawa na kujifunza lugha mpya – inahitaji muda kwa ubongo wako kujenga njia za neva. Unaendelea vizuri sana! +> **Kumbuka:** Ni kawaida kabisa ikiwa baadhi ya dhana zinahisi kuchanganyikiwa sasa. Kujifunza programu ni kama kujifunza lugha mpya – inachukua muda kwa ubongo wako kujenga njia za neva. Unaendelea vizuri! -## Lugha za Programu Zimefananishwa na Ladha Tofauti za Uchawi +## Lugha za Programu ni Kama Ladha Mbali Mbali za Uchawi -Sawa, hili litawasikika la ajabu, lakini uko pamoja nami – lugha za programu ni kama aina tofauti za muziki. Fikiria: una jazz, ambayo ni laini na ya kubembeleza, rock yenye nguvu na ya moja kwa moja, classical nzuri na yenye muundo, na hip-hop ya ubunifu na ya kueleza hisia. Kila mtindo una vibe yake, jamii yake ya mashabiki, na kila mmoja ni mzuri kwa hali tofauti na hafla. +Sawa, hili linaweza kusikika la ajabu, lakini komboa nami – lugha za programu ni kama aina tofauti za muziki. Fikiria hii: una jazz, ambayo ni laini na ya ubunifu, rock yenye nguvu na rahisi, classical ndiyo nzuri na yenye mpangilio, na hip-hop ambayo ni ya ubunifu na ya hisia. Kila mtindo una mtetemo wake, jamii yake ya mashabiki wa moyo wote, na kila moja ni bora kwa hali tofauti na hafla tofauti. -Lugha za programu zinafanya kazi sawa! Hutaweka lugha moja kujenga mchezo wa simu wa kufurahisha unavyotumia kusindika data kubwa za hali ya hewa, kama vile hautakacheza death metal katika darasa la yoga (labda si katika darasa zote za yoga! 😄). +Lugha za programu hufanya sawa kabisa! Huta tumia lugha moja kujenga mchezo wa simu wa furaha na ile unayotumia kushughulikia data kubwa za hali ya hewa, kama hutacheza death metal kwenye darasa la yoga (vyote tunakubaliana! 😄). -Lakini hii kila mara inanishangaza: lugha hizi ni kama kuwa na mfasiri mwerevu na mwenye subira zaidi duniani anakakaa kando yako. Unaweza kueleza mawazo yako kwa njia inayofaa ubongo wako wa binadamu, nao wanashughulikia kazi ngumu sana ya kutafsiri maneno hayo kuwa 1 na 0 ambao kompyuta husema. Ni kama kukaa na rafiki anayezungumza vizuri sana "ubunifu wa binadamu" na "mantiki ya kompyuta" – na hawachoki, hawahitaji mapumziko ya kahawa, wala hawakufungii maswali mara mbili! +Lakini hili ndilo linalonisababisha mshangao kila mara ninapofikiria: lugha hizi ni kama kuwa na mkalimani mwaminifu kabisa, mwenye akili mno ulimwenguni amekaa karibu nawe. Unaweza kueleza mawazo yako kwa njia inayojisikia ya asili kwa ubongo wako wa binadamu, na wao hufanya kazi ngumu sana ya kuyatafsiri kuwa 1 na 0 ambazo kompyuta zinazungumza. Ni kama kuwa na rafiki ambaye ana ufasaha kabisa katika "ubunifu wa kibinadamu" na "mantiki ya kompyuta" – na hawachoki, hawahitaji mapumziko ya kahawa, na hawakukoseni kwa kuuliza swali hilo mara mbili! -### Lugha Maarufu za Programu na Matumizi Yao +### Lugha maarufu za Programu na Matumizi Yake ```mermaid mindmap root((Lugha za Kuprogramu)) - Web Development + Maendeleo ya Wavuti JavaScript Uchawi wa Mbele - Tovuti Zinazoshirikiana + Tovuti Zenye Mwingiliano TypeScript JavaScript + Aina - Programu za Shirika + Programu za Biashara Data & AI Python Sayansi ya Takwimu Kujifunza kwa Mashine - Uendeshaji wa Kiotomatiki + Otomesheni R Takwimu Utafiti - Mobile Apps + Programu za Simu Java Android - Shirika + Biashara Swift iOS Mfumo wa Apple Kotlin Android ya Kisasa Mtandao wa Majukwaa Mbalimbali - Systems & Performance + Mifumo & Utendaji C++ Michezo Utendaji Muhimu Rust Usalama wa Kumbukumbu - Uandishi wa Mfumo + Uprogramu wa Mifumo Go Huduma za Wingu - Sehemu ya Nyuma Inayozidi Kukua + Backend Inayoweza Kupanuka ``` | Lugha | Bora Kwa | Kwa Nini Inapendwa | |----------|----------|------------------| -| **JavaScript** | Maendeleo ya mtandao, matumizi ya mtumiaji | Inaendesha kwenye vivinjari na inaua websites zinazojibu | -| **Python** | Sayansi ya data, otomatiki, AI | Rahisi kusoma na kujifunza, maktaba zenye nguvu | -| **Java** | Programu za biashara, apps za Android | Haina utegemezi kwa jukwaa, imara kwa mifumo mikubwa | +| **JavaScript** | Maendeleo ya wavuti, interfaces za mtumiaji | Inaendesha kwenye vivinjari na inaendesha tovuti za ushirikiano | +| **Python** | Sayansi ya data, automatisering, AI | Rahisi kusoma na kujifunza, maktaba zenye nguvu | +| **Java** | Programu za mashirika, programu za Android | Haina utegemezi wa jukwaa, imara kwa mifumo mikubwa | | **C#** | Programu za Windows, maendeleo ya michezo | Msaada mkubwa kutoka ekosistimu ya Microsoft | -| **Go** | Huduma za wingu, mifumo ya nyuma | Haraka, rahisi, imetengenezwa kwa kompyuta za kisasa | +| **Go** | Huduma za wingu, mifumo ya nyuma | Haraka, rahisi, iliyoundwa kwa kompyuta za kisasa | -### Lugha za Ngazi ya Juu vs. Ngazi ya Chini +### Lugha za Kiwango cha Juu vs. Kiwango cha Chini -Sawa, hili lilikuwa dhana iliyonifanya nifikirie sana nikiwa namjifunza, kwa hiyo nitakushirikisha mfano uliomsababisha nifahamu – na natumai pia utakupatia mwanga! +Sawa, hili lilikuwa dhana iliyonivunja akili nilipokuwa nianze kujifunza, kwa hiyo nitashiriki mufano uliomfanya kueleweka kwangu – na natumai itakusaidia pia! -Fikiria unasafiri nchi ambako husemi lugha yao, na unahitaji kwa dharura kupata choo kilicho karibu (sote tumesonga hivyo, sivyo? 😅): +Fikiria unatembelea nchi ambayo husemi lugha yake, na unahitaji haraka kupata choo kilicho karibu (sote tumewahi kupitia hapo, sivyo? 😅): -- **Programu za ngazi ya chini** ni sawa na kujifunza lahaja za eneo hadi uweze kuzungumza na bibi anayeuza matunda kona akitumia mafumbo ya kitamaduni, mžio wa mtaa, na vichekesho vya ndani ambavyo mtu aliyekulia hapo ndie atakayafahamu. Ni ya kushangaza na yenye ufanisi sana... ikiwa uko mzuri katika hiyo! Lakini ni mzito unapojaribu tu kupata choo. +- **Programu ya kiwango cha chini** ni kama kujifunza lahaja ya eneo hilo vizuri hadi uweze kuzungumza na bibi anayeuza matunda pembezoni kwa kutumia marejeleo ya kitamaduni, lahaja za mtaa, na vichekesho vya ndani vinavyoeleweka tu na mtu aliyekulia huko. Inaonekana hali ya ajabu na ni yenye ufanisi sana... kama unazungumza vizuri! Lakini ni changamoto kubwa unapojaribu tu kutafuta choo. -- **Programu za ngazi ya juu** ni kama kuwa na rafiki mzuri wa huko anayekuelewa. Unaweza kusema "Nahitaji kabisa kupata choo" kwa Kingereza rahisi, nao wanashughulikia tafsiri zote za kitamaduni na kukupa maelekezo yanayofaa ubongo wako usiojua lugha. +- **Programu ya kiwango cha juu** ni kama kuwa na rafiki mzuri wa eneo hilo anayekuelewa. Unaweza kusema "Nahitaji kwa haraka kupata choo" kwa Kiingereza rahisi, na yeye hufanya tafsiri yote ya kitamaduni na kukupa mwelekeo unaoeleweka kirahisi kwa ubongo wako usio wa eneo hilo. -Katika lugha ya programu: -- **Lugha za ngazi ya chini** (kama Assembly au C) zinakuwezesha kuzungumza kwa maelezo kwa vifaa halisi vya kompyuta, lakini unatakiwa ufikirie kama mashine, ambacho... ni mabadiliko makubwa ya mawazo! -- **Lugha za ngazi ya juu** (kama JavaScript, Python, au C#) zinakuwezesha kufikiria kama binadamu wakati zinashughulikia lugha ya mashine nyuma. Zaidi ya hayo, zina jamii za watu wanaokukaribisha kwa ukarimu waliokumbuka jinsi ilivyokuwa kuwa mpya na wana hamu kweli ya kusaidia! +Katika istilahi za programu: +- **Lugha za kiwango cha chini** (kama Assembly au C) zinakuwezesha kuwa na mazungumzo ya kina sana na vifaa halisi vya kompyuta, lakini inahitaji kufikiri kama mashine, ambayo ni... basi, ni mabadiliko makubwa ya akili! +- **Lugha za kiwango cha juu** (kama JavaScript, Python, au C#) zinakuwezesha kufikiri kama binadamu wakati zinashughulikia lugha ya mashine za nyuma. Zaidi ya hayo, zina jumuiya za kupokea wageni zilizojaa watu wanaokumbuka ulivyokuwa mpya na wanapenda kusaidia! -Vipi unadhani nitakushauri uanze na zipi? 😉 Lugha za ngazi ya juu ni kama magurudumu ya mafunzo ambayo hutaki kuondoa kamwe kwa sababu zinafanya uzoefu kuwa mzuri zaidi! +Gundua ni zipi nitakopendekeza uanze nazo? 😉 Lugha za kiwango cha juu ni kama magurudumu ya mafunzo ambayo hutaki kuwatoza kwa sababu yanafanya uzoefu mzima kufurahisha zaidi! ```mermaid flowchart TB A["👤 Mawazo ya Binadamu:
'Nataka kuhesabu nambari za Fibonacci'"] --> B{Chagua Kiwango cha Lugha} - B -->|High-Level| C["🌟 JavaScript/Python
Rahisi kusoma na kuandika"] - B -->|Low-Level| D["⚙️ Assembly/C
Udhibiti wa moja kwa moja wa vifaa"] + B -->|Kiwango cha Juu| C["🌟 JavaScript/Python
Rahisi kusoma na kuandika"] + B -->|Kiwango cha Chini| D["⚙️ Assembly/C
Udhibiti wa moja kwa moja wa vifaa"] C --> E["📝 Andika: fibonacci(10)"] D --> F["📝 Andika: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Uelewa wa Kompyuta:
Mfasiri hushughulikia ugumu"] + E --> G["🤖 Uelewa wa Kompyuta:
Mtafiti anashughulikia ugumu"] F --> G G --> H["💻 Matokeo Sawa:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Niruhusu Nikuonyeshe Kwa Nini Lugha za Ngazi ya Juu ni Marafiki Zaidi +### Niruhusu Nikuonyeshe Kwa Nini Lugha za Kiwango cha Juu ni Rafiki Zaidi -Sawa, nitakuonyesha kitu kinachoelezea vizuri kwa nini nilipenda lugha za ngazi ya juu, lakini kwanza – nataka uahidi kitu. Unapoona mfano wa kwanza wa msimbo, usitoke hofu! Inapaswa kuonekana kama inavunja moyo kidogo. Hilo ndilo ninalolielezea! +Sawa, nitakuonyesha kitu kinachoonyesha kwa ukamilifu kwa nini nilipenda lugha za kiwango cha juu, lakini kabla – nahitaji uahidi kitu. Unapoona mfano wa msimbo wa kwanza, usitetemeke! Inapaswa kuonekana kama ni gumzo la kuogopesha. Hilo ndilo jambo ninaloeleza! -Tutatazama kazi sawa ikifanywa kwa mitindo miwili tofauti kabisa. Zote mbili zinaunda kile kinachoitwa mfuatano wa Fibonacci – ni mfano mzuri wa hisabati ambapo kila namba ni jumla ya zilizo mbili kabla yake: 0, 1, 1, 2, 3, 5, 8, 13... (Habari ya kufurahisha: utaona mfano huu katika asili kila mahali – mizunguko ya mbegu za sunflower, michoro ya magovu, hata namna magalaxi zinavyojengwa!) +Tutaangalia kazi ile ile iliyowandikwa kwa mitindo miwili tofauti kabisa. Zote zimeunda kinachoitwa mfuatano wa Fibonacci – ni mtindo wa kipekee wa hisabati ambapo kila nambari ni jumla ya mbili zilizopita: 0, 1, 1, 2, 3, 5, 8, 13... (Habari ya kufurahisha: utapata mfano huu kila mahali katika asili – mizunguko ya mbegu za jua, mifumo ya koni za pine, hata njia galaksi zinavyoundwa!) -Tayari kuona tofauti? Twende! +Uko tayari kuona tofauti? Twende! -**Lugha ya ngazi ya juu (JavaScript) – Rafiki wa binadamu:** +**Lugha ya kiwango cha juu (JavaScript) – Rafiki kwa binadamu:** ```javascript -// Hatua ya 1: Mpangilio wa msingi wa Fibonacci +// Hatua 1: Mpangilio wa msingi wa Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,14 +183,14 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Hiki nifanyacho msimbo huu:** -- **Tangaza** thabiti kuainisha ni namba ngapi za Fibonacci tunazotaka kuunda -- **Anzisha** vigezo viwili kufuatilia namba ya sasa na inayofuata katika mfuatano -- **Weka** thamani za mwanzo (0 na 1) zinazofafanua muundo wa Fibonacci -- **Onyesha** ujumbe wa kichwa ili kutambua matokeo yetu +**Hapa msimbo huu unafanya nini:** +- **Tangaza** thamani ya kudumu ya kuelezea ni nambari ngapi za Fibonacci tunazotaka kuzalisha +- **Anzisha** vigezo viwili kufuatilia nambari ya sasa na inayofuata kwenye mfuatano +- **Weka** thamani za kuanzia (0 na 1) zinazotambulisha mfano wa Fibonacci +- **Onesha** ujumbe wa kichwa wa habari kutambua matokeo yetu ```javascript -// Hatua ya 2: Tengeneza mlolongo kwa kutumia mduara +// Hatua ya 2: Tengeneza mlolongo kwa kutumia mzunguko for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Kuvunja kile kinachotokea hapa:** -- **Rudi** kwa kila nafasi katika mfuatano kwa kutumia `for` loop -- **Onyesha** kila namba na nafasi yake kwa kutumia muundo wa template literal -- **Hesabu** namba inayofuata ya Fibonacci kwa kuongeza namba ya sasa na inayofuata -- **Sasa** bora vigezo vyetu kufuata mchakato mwingine +**Kuvunja kinachotokea hapa:** +- **Rudia** kupitia kila nafasi kwenye mfuatano kutumia `for` loop +- **Onesha** kila nambari na nafasi yake kwa kutumia muundo wa template literal +- **Hesabu** nambari inayofuata ya Fibonacci kwa kuongeza thamani ya sasa na inayofuata +- **Sasisha** vigezo vyetu kuhamia kwenye kurudia inayofuata ```javascript // Hatua ya 3: Mbinu ya kisasa ya kazi @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Hapo juu, tume:** -- **Tengeneza** kazi inayoweza kutumika tena kwa kutumia sintaksia ya mishale ya kisasa -- **Jenga** orodha kuhifadhi mfuatano wote badala ya kuonyesha namba moja baada ya nyingine -- **Tumia** kuorodheshwa kwa orodha kufanikisha hesabu za namba mpya kutoka kwa thamani zilizopita -- **Rudisha** mfuatano kamili kwa matumizi tofauti sehemu nyingine kwenye programu yetu +**Juu tulifanya:** +- **Tengeneza** kipengele kinachoweza kutumika tena kwa kutumia muundo wa arrow function wa kisasa +- **Jenga** orodha kuhifadhi mfuatano mzima badala ya kuonyesha moja moja +- **Tumia** indexing ya orodha kuhesabu kila nambari mpya kutoka kwa thamani zilizopita +- **Rudisha** mfuatano mzima kwa matumizi ya kubadilika sehemu nyingine za programu yetu -**Lugha ya ngazi ya chini (ARM Assembly) – Rafiki wa kompyuta:** +**Lugha ya kiwango cha chini (ARM Assembly) – Rafiki kwa kompyuta:** ```assembly area ascen,code,readonly @@ -257,63 +257,62 @@ back add r0,r1 end ``` -Angalia jinsi toleo la JavaScript linavyosoma karibuni kama maagizo ya Kiingereza, huku toleo la Assembly likitumika amri za fumbo zinazosimamia processor ya kompyuta moja kwa moja. Zote zimefanya kazi ile ile, lakini lugha ya ngazi ya juu ni rahisi kwa wanadamu kuelewa, kuandika, na kudumisha. +Angalia jinsi toleo la JavaScript linavyosoma karibu kama maagizo ya Kiingereza, wakati toleo la Assembly linatumia amri za siri zinazosimamia moja kwa moja processor ya kompyuta. Zote mbili zinatimiza kazi ile ile, lakini lugha ya kiwango cha juu ni rahisi kwa binadamu kuelewa, kuandika, na kudumisha. -**Tofauti kuu utakazogundua:** -- **Soma kwa urahisi**: JavaScript inatumia majina ya kuelezea kama `fibonacciCount` wakati Assembly inatumia lebo za fumbo kama `r0`, `r1` -- **Maoni**: Lugha za ngazi ya juu zinahimiza maoni ya ufafanuzi yanayofanya msimbo uwe na maandishi ya kujieleza peke yake -- **Muundo**: Mtiririko wa mantiki wa JavaScript unalingana na jinsi binadamu wanavyofikiria matatizo hatua kwa hatua +**Tofauti kuu utakazoziona:** +- **Ufasaha wa kusoma**: JavaScript hutumia majina yaliyoeleweka kama `fibonacciCount` wakati Assembly inatumia lebo za fumbo kama `r0`, `r1` +- **Maelezo**: Lugha za kiwango cha juu hutia moyo maelezo ya kielezo yanayofanya msimbo kuwa unaeleweka peke yake +- **Muundo**: Mtiririko wa mantiki wa JavaScript unaendana na jinsi watu wanavyofikiria matatizo hatua kwa hatua - **Matunzo**: Kusasisha toleo la JavaScript kwa mahitaji tofauti ni rahisi na wazi -✅ **Kuhusu mfuatano wa Fibonacci**: Muundo huu mzuri kabisa wa nambari (ambapo kila nambari ni jumla ya mbili zilizo mbele yake: 0, 1, 1, 2, 3, 5, 8...) unapatikana kabisa *kila mahali* katika asili! Utauona katika mizunguko ya maua ya jua, mifumo ya mkungu wa maganda ya mfirka, jinsi maganda ya samaki wa baharini yanavyokunja, hata jinsi matawi ya miti yanavyokua. Ni kitu cha kushangaza sana jinsi hisabati na msimbo vinavyotusaidia kuelewa na kuunda tena mifumo ambayo asili hutumia kuonyesha uzuri! - +✅ **Kuhusu mfuatano wa Fibonacci**: Mchoro huu wa nambari unaopendeza sana (ambapo kila nambari ni jumla ya mbili zilizo nyuma yake: 0, 1, 1, 2, 3, 5, 8...) huonekana kila mahali kabisa katika asili! Utauona katika minyororo ya maua ya jua, mifumo ya koni za miti, namna makalio ya maji ya nautilus yanavyokunja, hata namna matawi ya miti yanavyokua. Ni kitu cha kushangaza jinsi hisabati na msimbo vinaweza kutusaidia kuelewa na kuunda tena mifumo ambayo asili hutumia kuunda uzuri! -## Vitu Vinavyounda Uchawi Hufanyika +## Vifungo Vinavyofanya Uchawi Kutokea -Sawa, sasa umeona jinsi lugha za programu zinavyoonekana zinapotekelezwa, hebu tushambaze vipengele vya msingi vinavyounda kila programu iliyowahi kuandikwa. Fikiria hili kama viungo muhimu katika mapishi yako unayopenda – mara utakapojua kila kimo kinachofanya kazi gani, utaweza kusoma na kuandika msimbo katika karibu lugha yoyote! +Sawa, sasa umeona jinsi lugha za programu zinavyoonekana zinapofanya kazi, hebu tuvunje vipengele msingi vinavyounda kila programu iliyoandikwa. Fikiria hivi kama viungo muhimu katika mapishi yako unayoupenda – mara tu unapojua kila kimoja kinafanya nini, utaweza kusoma na kuandika msimbo katika karibu lugha yoyote! -Hii ni kama kujifunza sarufi ya programu. Kumbuka shuleni ulipojifunza kuhusu nomino, vitenzi, na jinsi ya kutengeneza sentensi? Programu zina toleo la sarufi yao wenyewe, na ukweli ni kwamba ni mantiki zaidi na yenye msamaha kuliko sarufi ya Kiingereza ilivyowahi kuwa! 😄 +Hii ni kama kujifunza sarufi ya programu. Kumbuka shuleni ulipojifunza kuhusu nomino, vitenzi, na jinsi ya kutengeneza sentensi? Programu ina toleo lake la sarufi, na ukweli ni kwamba, lina mantiki zaidi na ni mpole zaidi kuliko sarufi ya Kiingereza ilivyokuwa! 😄 -### Matamko: Maelekezo Hatua kwa Hatua +### Tamko: Maelekezo Hatua kwa Hatua -Tuanze na **matamko** – haya ni kama sentensi katika mazungumzo na kompyuta yako. Kila tamko linaeleza kompyuta kufanya jambo moja maalum, kama kutoa maelekezo: "Geuka kushoto hapa," "Simama kwa taa nyekundu," "Paki kwenye sehemu hiyo." +Tuanze na **tamko** – haya ni kama sentensi binafsi katika mazungumzo na kompyuta yako. Kila tamko linaeleza kompyuta kufanya kitu kimoja maalum, kama kutoa maelekezo: "Geuka kushoto hapa," "Simama wakati taa nyekundu," "Paka gari mahali hapo." -Ninachopenda kuhusu matamko ni jinsi yanavyosomeka kwa urahisi. Angalia hii: +Ninachopenda kuhusu tamko ni jinsi yanavyoweza kusomwa kwa urahisi. Angalia hii: ```javascript -// Taarifa za msingi zinazofanya vitendo vya moja kwa moja +// Sentensi za msingi zinazofanya vitendo vya moja kwa moja const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **Hivi ndivyo msimbo huu unavyofanya kazi:** -- **Tangaza** kigezo kisichobadilika kuhifadhi jina la mtumiaji -- **Onyesha** ujumbe wa salamu kwenye kielekezi cha console -- **Hesabu** na uhifadhi matokeo ya operesheni ya hisabati +- **Tangaza** kigezo cha daima kuhifadhi jina la mtumiaji +- **Onyesha** ujumbe wa salamu kwenye matokeo ya consola +- **Hesabu** na hifadhi matokeo ya operesheni ya hisabati ```javascript -// Tamko ambalo linaingiliana na kurasa za wavuti +// Matamshi yanayoshirikiana na kurasa za wavuti document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Hatua kwa hatua, hivi ndivyo vinavyoendelea:** +**Hatua kwa hatua, hivi ndivyo vinavyotokea:** - **Badilisha** kichwa cha ukurasa kinachoonekana kwenye kichupo cha kivinjari - **Badilisha** rangi ya nyuma ya mwili mzima wa ukurasa ### Vigezo: Mfumo wa Kumbukumbu wa Programu Yako -Sawa, **vigezo** kwa kweli ni mojawapo ya dhana ninazopenda kufundisha kwa sababu ni kama vitu unavyotumia kila siku! +Sawa, **vigezo** ni kweli moja ya dhana zangu za kupenda kufundisha kwa sababu ni sawa sana na vitu unavyotumia kila siku! -Fikiria orodha ya majina kwenye simu yako kwa sekunde. Huwezi kumbuka nambari za kila mtu – badala yake, unahifadhi "Mama," "Rafiki wa karibu," au "Kiwango cha Pizza Kinachowasili Hadi Saa 8 Usiku" na simu yako huhifadhi nambari halisi. Vigezo hufanya kazi kwa njia ile ile! Ni kama vyombo vilivyo na lebo ambavyo programu yako inaweza kuhifadhi taarifa ndani na kuvichukua baadaye kwa kutumia jina linaloeleweka. +Fikiria orodha ya mawasiliano ya simu yako kwa sekunde. Hautahifadhi namba za simu za kila mtu kichwani – badala yake, unahifadhi "Mama," "Rafiki wa Kote," au "Kona ya Piza Inayowaletea Mpaka Saa 8 Usiku" na kuacha simu yako ikumbuke namba halisi. Vigezo hufanya kazi kwa njia hiyo hiyo! Ni kama vyombo vilivyo na lebo ambavyo programu yako inaweza kuhifadhi taarifa ndani na kuvichukua baadaye kwa kutumia jina linaloeleweka. -Hapa ndiyo jambo la kuvutia: vigezo vinaweza kubadilika programu inapotekelezwa (ndio maana ya jina "variable" – unaona walivyofanya?). Kama unavyoweza kusasisha mawasiliano ya pizzeria ukigundua mahali bora zaidi, vigezo vinaweza kubadilishwa programu inapojifunza au hali zikibadilika! +Hivi huwa ni vya ajabu: vigezo vinaweza kubadilika wakati programu yako inapotekelezwa (hivyo jina "variable" – umeona walivyo?). Kama vile unaweza kusasisha mawasiliano hayo ya piza unapogundua mahali pazuri zaidi, vigezo vinaweza kusasishwa wakati programu yako inajifunza taarifa mpya au hali inabadilika! -Hebu nikuonyeshe jinsi hii ni rahisi sana: +Nikuonyeshe jinsi hii inaweza kuwa rahisi na nzuri: ```javascript -// Hatua 1: Kuunda vigezo vya msingi +// Hatua ya 1: Kuunda vigezo vya msingi const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -322,12 +321,12 @@ let isRaining = false; **Kuelewa dhana hizi:** - **Hifadhi** thamani zisizobadilika katika vigezo vya `const` (kama jina la tovuti) -- **Tumia** `let` kwa thamani zinazobadilika katika programu yako -- **Toa** aina tofauti za data: nyuzi (maneno), nambari, na boolean (kweli/sikuwa kweli) -- **Chagua** majina ya kueleza yaliyotaja kile kila kigezo kinachohifadhi +- **Tumia** `let` kwa thamani zinazoweza kubadilika katika programu yako +- **Weka** aina mbalimbali za data: mistringi (maandishi), nambari, na boolean (kweli/siyokuwa) +- **Chagua** majina yanayoelezea yaliyomo kwenye kila kigezo ```javascript -// Hatua ya 2: Kufanya kazi na vitu kuandaa data zinazohusiana +// Hatua ya 2: Kufanya kazi na vitu kuunganishwa data zinazohusiana const weatherData = { location: "San Francisco", humidity: 65, @@ -335,10 +334,10 @@ const weatherData = { }; ``` -**Juu ya hapo, tume:** -- **Tengeneza** kitu ili kuunganisha taarifa za hali ya hewa zinazohusiana +**Juu yake, tumefanya:** +- **Tengeneza** kitu cha kuunganisha taarifa za hali ya hewa zilizo karibu - **Panga** vipande vingi vya data chini ya jina moja la kigezo -- **Tumia** jozi za funguo na thamani kuweka lebo wazi kwa kila kipande cha taarifa +- **Tumia** jozi za ufunguo-thamani kuonyesha kila kipande cha taarifa kwa uwazi ```javascript // Hatua ya 3: Kutumia na kusasisha vigezo @@ -351,34 +350,34 @@ temperature = 68; ``` **Hebu tuelewe kila sehemu:** -- **Onyesha** taarifa kwa kutumia mistari ya kiolezo na sintaksia ya `${}` -- **Pata** mali za kitu kwa kutumia alama ya doa (`weatherData.windSpeed`) -- **Sasisha** vigezo vilivyotangazwa kwa `let` kuonyesha hali zinazobadilika -- **Changanya** vigezo vingi kutengeneza ujumbe wenye maana +- **Onyesha** taarifa kwa kutumia template literals zenye sintaksia ya `${}` +- **Fikia** mali za kitu kwa kutumia alama ya doa (`weatherData.windSpeed`) +- **Sasisha** vigezo vilivyotangazwa kwa `let` kuonesha mabadiliko ya hali +- **Changanya** vigezo vingi kuunda ujumbe wenye maana ```javascript -// Hatua ya 4: Uvunjaji wa kisasa kwa msimbo safi zaidi +// Hatua ya 4: Uvunjaji wa kisasa wa muundo kwa msimbo safi zaidi const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Unachohitaji kujua:** -- **Chukua** mali maalum kutoka kwa vitu kwa kutumia mgawanyiko wa ugawaji -- **Tengeneza** vigezo vipya moja kwa moja kwa majina sawa na funguo za kitu -- **Rahisisha** msimbo kwa kuepuka kutumia alama ya doa mara kwa mara +- **Toa** mali maalum kutoka kwa vitu kwa kutumia ugawaji wa vifunguo +- **Tengeneza** vigezo vipya kiotomatiki kwa majina yale yale ya funguo za vitu +- **Rahisisha** msimbo kwa kuepuka kutumia mara nyingi alama za doa ### Mtiririko wa Udhibiti: Kufundisha Programu Yako Kufikiria -Sawa, hapa ndipo programu inapoanza kuwa ya kushangaza kabisa! **Mtiririko wa udhibiti** ni kama kufundisha programu yako jinsi ya kufanya maamuzi bora, kama unavyoyafanya kila siku bila hata kufikiria. +Sasa, hapa ndipo programu inavyopata kuwa ya kushangaza kweli! **Mtiririko wa udhibiti** ni kufundisha programu yako jinsi ya kufanya maamuzi ya busara, sawa na wewe unavyofanya kila siku bila hata kufikiria. -Fikiria hili: asubuhi hii labda ulipitia kitu kama "Ikiwa mvua inanyesha, nitachukua mwavuli. Ikiwa ni baridi, nitavaa koti. Ikiwa ninachelewa, nitaruka chakula cha asubuhi na kuchukua kahawa njiani." Ubongo wako hufuata mfumo huu wa ikiwa-basi mara nyingi kila siku! +Fikiria hivi: leo asubuhi labda ulipitia kitu kama "Ikiwa kunyevunyevu, nitaenda na mwavuli. Ikiwa ni baridi, nitavaa koti. Ikiwa ninachelewa, nitaacha chakula cha asubuhi na kunywa kahawa njiani." Ubongo wako unafuata mantiki hii ya ikiwa-basi mara nyingi kila siku! -Hii ndio inafanya programu kuwa na akili na hai badala ya kufuata tu maandishi ya kawaida na yasiyobadilika. Zinatoa uwezo wa kutathmini hali, kuamua kinachotokea, na kuonyesha majibu yanayofaa. Ni kama kumnyima programu yako ubongo unaoweza kuendana na kufanya uchaguzi! +Hili ndilo linalofanya programu kuonekana kuwa na akili na kuishi badala ya tu kufuata maandishi machache ya kuchosha na yanayotarajiwa. Zinapitia hali fulani, kutathmini kinachotokea, na kutoa majibu yanayostahili. Ni kama kumpa programu yako ubongo unaoweza kubadilika na kufanya chaguzi! -Unataka kuona jinsi hii inavyofanya kazi kwa urembo? Hebu nikuonyeshe: +Unataka kuona hii inavyofanya kazi kwa urembo? Nikuonyeshe: ```javascript -// Hatua 1: Mantiki ya msingi ya masharti +// Hatua 1: Mantiki ya masharti ya msingi const userAge = 17; if (userAge >= 18) { @@ -389,14 +388,14 @@ if (userAge >= 18) { } ``` -**Hivi ndivyo msimbo huu unavyofanya kazi:** -- **Angalia** kama umri wa mtumiaji unakidhi sharti la kupiga kura -- **Tekeleza** sehemu tofauti za msimbo kulingana na matokeo ya hali -- **Hesabu** na onyesha muda hadi mtu aweze kupiga kura akihitaji zaidi ya 18 -- **Toa** maoni maalum na ya msaada kwa kila hali +**Hivi ndivyo msimbo huu unavyofanya:** +- **Kagua** kama umri wa mtumiaji unakidhi mahitaji ya kupiga kura +- **Tekeleza** vikundi vya msimbo tofauti kulingana na matokeo ya hali +- **Hesabu** na onyesha muda hadi mtu aweze kupiga kura ikiwa ameshapungua miaka 18 +- **Toa** mrejesho maalum, wenye msaada kwa kila hali ```javascript -// Hatua ya 2: Masharti mengi na vibonye vya kiakili +// Hatua ya 2: Masharti mengi na waendeshaji wa mantiki const userAge = 17; const hasPermission = true; @@ -409,22 +408,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Kueleza kinachotokea hapa:** -- **Changanua** masharti mengi kwa kutumia kiendeshaji `&&` (na) -- **Tengeneza** ngazi ya masharti kwa kutumia `else if` kwa matukio mengi -- **Shughulikia** kesi zote zinazowezekana kwa matamko ya mwisho `else` -- **Toa** maoni wazi na yanayotekelezeka kwa kila hali tofauti +**Kuvunja kile kinachotokea hapa:** +- **Changanya** masharti mengi kwa kutumia kiendeshaji `&&` (na) +- **Tengeneza** mtawanyiko wa masharti kwa kutumia `else if` kwa hali mbalimbali +- **Shughulikia** matukio yote yanayowezekana kwa tamko la mwisho la `else` +- **Toa** mrejesho wazi, wa utekelezaji kwa kila hali tofauti ```javascript -// Hatua ya 3: Masharti mafupi kwa kutumia mtendaji wa ternary +// Hatua ya 3: Hali fupi kwa kutumia mtaalamu wa ternary const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Unachohitaji kukumbuka:** -- **Tumia** kiendeshaji cha ternary (`? :`) kwa masharti rahisi yenye chaguo mbili -- **Andika** hali kwanza, ikifuatiwa na `?`, kisha matokeo ya kweli, kisha `:`, kisha matokeo ya uongo -- **Tumia** muundo huu wakati unahitaji kugawa thamani kulingana na masharti +**Kumbuka yafuatayo:** +- **Tumia** kiendeshaji cha ternary (`? :`) kwa hali rahisi zenye chaguzi mbili +- **Andika** sharti kwanza, ifuatiwe na `?`, kisha matokeo ya kweli, `:`, na hitimisho la uongo +- **Tumia** mtindo huu unapohitaji kuweka thamani kulingana na hali ```javascript // Hatua ya 4: Kushughulikia kesi nyingi maalum @@ -448,53 +447,53 @@ switch (dayOfWeek) { ``` **Msimbo huu unatekeleza yafuatayo:** -- **Linganya** thamani ya kigezo dhidi ya kesi maalum nyingi -- **Kusanya** kesi zinazofanana pamoja (siku za wiki dhidi ya wikendi) -- **Tekeleza** sehemu sahihi ya msimbo pale tukio linapopatikana +- **Lingana** thamani ya kigezo kwa matukio mengi maalum +- **Shirikisha** matukio yanayofanana pamoja (siku za wiki dhidi ya wikendi) +- **Tekeleza** msimbo unaofaa wakati patikana mechi - **Jumlisha** kesi ya `default` kushughulikia thamani zisizotarajiwa -- **Tumia** matamko ya `break` kuzuia msimbo kuendelea kwenye kesi inayofuata +- **Tumia** tamko la `break` kuzuia msimbo kuendelea hadi kesi inayofuata -> 💡 **Mfano wa ulimwengu halisi**: Fikiria mtiririko wa udhibiti kama GPS mwenye subira zaidi duniani akikuongoza. Inaweza kusema "Ikiwa kuna msongamano barabarani Main Street, chukua njia kuu badala yake. Ikiwa ujenzi unazui njia kuu, jaribu njia ya mandhari." Programu hutumia mantiki kama hii ya masharti kujibu kwa busara hali tofauti na kuwapatia watumiaji uzoefu bora zaidi kila mara. +> 💡 **Mfano halisi**: Fikiria mtiririko wa udhibiti kama GPS yenye subira zaidi duniani ikikupa maelekezo. Inaweza kusema "Ikiwa kuna msongamano Main Street, chukua barabara kuu badala yake. Ikiwa ujenzi unazuia barabara kuu, jaribu njia ya mandhari." Programu hutumia mantiki hii ya masharti jinsi hiyo kuonyesha ujasiri na kuwapa watumiaji uzoefu bora kila wakati. -### 🎯 **Kukagua Dhana: Ustadi wa Vitu Vinavyojengwa** +### 🎯 **Kutegemeza Dhana: Ustadi wa Vifungo vya Msingi** -**Tuwone jinsi unavyoendelea na msingi:** +**Tuweze kuona unaendeleaje na msingi:** - Unaweza kuelezea tofauti kati ya kigezo na tamko kwa maneno yako mwenyewe? -- Fikiria tukio halisi ambalo ungeweza kutumia uamuzi wa ikiwa-basi (kama mfano wetu wa kupiga kura) -- Ni jambo gani moja kuhusu mantiki ya programu lililokushtua? +- Fikiria hali halisi ambapo utatumia uamuzi wa ikiwa-basi (kama mfano wetu wa kupiga kura) +- Ni jambo gani moja kuhusu mantiki ya programu lililokushangaza? -**Kudhibiti kujiamini kwa haraka:** +**Kukuongeza hamu ya kuendelea:** ```mermaid flowchart LR - A["📝 Taarifa
(Maelekezo)"] --> B["📦 Vigezo
(Hifadhi)"] --> C["🔀 Mtiririko wa Udhibiti
(Maamuzi)"] --> D["🎉 Programu Inayofanya Kazi!"] + A["📝 Matamko
(Maelekezo)"] --> B["📦 Vigezo
(Uhifadhi)"] --> C["🔀 Mtiririko wa Udhibiti
(Maamuzi)"] --> D["🎉 Programu Inayotumika!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Kinachokuja baadaye**: Tutaendelea na furaha kubwa kujifunza dhana hizi kwa kina katika safari hii ya ajabu pamoja! Kwa sasa, zingatia tu kuhisi msisimko kuhusu fursa zote za ajabu zilizo mbele yako. Ujuzi na mbinu maalum zitakwenda kushika asili unapoendelea kutekeleza pamoja nami – naahidi hii itakuwa ya kufurahisha zaidi kuliko unavyoweza kufikiria! +✅ **Kinachokuja baadaye**: Tutakuwa na wakati mzuri mno kuchunguza zaidi dhana hizi tunapoendelea katika safari hii ya kushangaza pamoja! Kwa sasa, zingatia hisia ya msisimko kuhusu fursa zote kubwa zinazokuja mbele yako. Ujuzi maalum na mbinu zitakuwepo kwa asili tunapofanya mazoezi pamoja – ninaahidi huu utakuwa wakati mzuri kuliko ulivyotarajia! ## Vifaa vya Kazi -Sawa, hapa ndio ninapojawa msisimko usioweza kujificha! 🚀 Tutazungumzia zana za ajabu zitakazokufanya ujisikie kama umepewa funguo za chombo cha anga la kidijitali. +Sawa, hapa ndio ninaposhindwa kuweka hamu yangu chini! 🚀 Tunaenda kuzungumza kuhusu vifaa vya kushangaza ambavyo vitafanya uhisi kama umepatiwa funguo za roketi ya kidijitali. -Unajua vile mpishi anavyo kuwa na visu vilivyopimwa vyema vinavyofanya kama kweli ni sehemu ya mikono yao? Au mpiga gitaa kuwa na gitaa moja inayopiga nyimbo mara anapoigusa? Sawa, waendelezaji wana toleo lao la zana hizi za kichawi, na hapa ndipo utakaposhtushwa kabisa – nyingi wao ni bure kabisa! +Unajua jinsi mpishi anavyokuwa na visu vya usawa vinavyohisi kama sehemu ya mikono yao? Au jinsi mwanamuziki anavyo kuwa na gitaa moja inayopiga nyimbo mara tu wanapigusa? Sawa, waendelezaji wana toleo lao la vifaa vya kichawi, na hapa ndilo litakachokuvutia kabisa – wengi wao ni bure kabisa! -Mimi hivi sasa ninainuka kiti kwa kufikiria kushiriki hizi kwa sababu zimebadilisha kabisa jinsi tunavyojenga programu. Tunazungumzia msaada wa kuandika msimbo unaotumia AI (sihutaji usemi!), mazingira ya wingu ambapo unaweza kujenga programu nzima mahali popote ulipo na Wi-Fi, na zana za kuondoa hitilafu zenye kufikia kiwango cha kuona kwa sarafu kwa programu zako. +Nipo kama niko juu ya kiti nakifikiria kuwasilisha haya kwako maana yameleta mapinduzi katika jinsi tunavyojenga programu. Tunazungumza kuhusu washirika wa kuandika msimbo wenye AI wanaosaidia kuandika msimbo (sijacheki!), mazingira ya wingu yanayowezesha kutengeneza programu zote kutoka mahali popote penye Wi-Fi, na zana za kubaini makosa ngumu mno hadi zinakaribia kuwa kama kuona ndani ya programu zako. -Na hapa ndio sehemu inayonipa baridi ya msisimko: hizi si zana za "wanzo" utakazokua nazo. Hizi ni zana sawa za kitaalamu zinazotumiwa sasa hivi na waendelezaji Google, Netflix, na studio ya programu za indie unazopenda. Utajisikia kama mtaalamu sana kuzitumia! +Na hii bado inanipa mshtuko: hizi si "vifaa vya waanzilishi" utakavyokua nayo. Hizi ndiyo vifaa halisi vya kiwango cha kitaalamu vinavyotumiwa na waendelezaji wa Google, Netflix, na studio hiyo ya programu ndogo unayopenda wakati huu kabisa. Utahisi kama mtaalamu mtukufu unapotumia hizi! ```mermaid graph TD A["💡 Wazo Lako"] --> B["⌨️ Mhariri wa Msimbo
(VS Code)"] - B --> C["🌐 Zana za Mvumbuzi wa Kivinjari
(Upimaji & Usahihishaji)"] - C --> D["⚡ Amri ya Mstari
(Uendeshaji wa Mifumo & Zana)"] - D --> E["📚 Nyaraka
(Kujifunza & Marejeleo)"] - E --> F["🚀 Tovuti Bora!"] + B --> C["🌐 Vyombo vya Kivinjari
(Upimaji & Urekebishaji)"] + C --> D["⚡ Amri ya Mstari
(Uendeshaji Kiotomatiki & Zana)"] + D --> E["📚 Nyaraka
(Kujifunza & Marejeo)"] + E --> F["🚀 Programu ya Kuvutia ya Mtandao!"] - B -.-> G["🤖 Msaidizi wa AI
(GitHub Copilot)"] - C -.-> H["📱 Upimaji wa Vifaa
(Ubunifu unaolingana)"] + B -.-> G["🤖 Msaada wa AI
(GitHub Copilot)"] + C -.-> H["📱 Upimaji wa Vifaa
(Muundo Unaobadilika)"] D -.-> I["📦 Wasimamizi wa Pakiti
(npm, yarn)"] E -.-> J["👥 Jamii
(Stack Overflow)"] @@ -505,108 +504,109 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Wahariri wa Msimbo na IDEs: Marafiki Wako Wapya Kidijitali +### Wahariri wa Msimbo na IDE: Marafiki Wako Mpya wa Kidijitali -Tuzungumze kuhusu wahariri wa msimbo – hawa kweli wanakaribia kuwa sehemu unayopenda kupita popote! Fikiria ni makazi yako binafsi ya kuandika msimbo ambapo utatumia muda mwingi kutengeneza na kuboresha kazi zako za kidijitali. +Tuzungumze kuhusu wahariri wa msimbo – hivi sasa watakuwa sehemu zako unazopenda zaidi! Fikiria kama makao yako mwenyewe ya maandalizi ya msimbo ambapo utatumia muda mwingi sana kutengeneza na kuboresha kazi zako za kidijitali. -Lakini hapa ni pepo la kisasa juu ya wahariri: siyo wahariri wa maandishi tu wa kawaida. Ni kama kuwa na mshauri wa programu mwenye akili sana na msaada karibu nawe saa 24/7. Wanakukuta makosa kabla hujayaona, kupendekeza maboresho yanayokufanya uonekane mwerevu, kusaidia kuelewa kila kipande cha msimbo, na baadhi yao hata hupredict ni nini ungeandika kisha hutoa kumalizia mawazo yako! +Lakini hali hii ya kufurahisha kuhusu wahariri wa kisasa ni hii: si wahariri wa kawaida wa maandishi. Ni kama kuwa na mshauri bora wa kuandika msimbo karibu nawe saa 24/7. Wanakamata makosa yako kabla hujayagundua, wanasisitiza maboresho yanayokufanya uonekane mwerevu, wanakusaidia kuelewa kila sehemu ya msimbo, na wengine wao hata wanaweza kutabiri unachotaka kuandika na kukamilisha mawazo yako! -Nakumbuka nilipogundua auto-completion mara ya kwanza – nilihisi nafanya kazi huko siku zijazo. Unaanza kuandika kitu, na mhariri wako husema, "Hey, ungekuwa unafikiria kuhusu hii function ambayo inafanya hasa unachohitaji?" Ni kama kuwa na mtu asomao mawazo yako kuwa rafiki yako wa kuandika msimbo! +Nakumbuka nilipogundua auto-completion mara ya kwanza – hisia ilikuwa kama niishi katika siku za usoni. Unaanza kuandika kitu, na mhariri anasema, "Je, ulikuwa unafikiria kuhusu kipengele hiki kinachofanya hasa kile unachotaka?" Ni kama kuwa na msomaji wa akili kama rafiki wa kuandika msimbo! -**Nini hufanya wahariri hawa kuwa wa ajabu hivi?** +**Ni nini kinachofanya wahariri hawa kuwa wa ajabu sana?** -Wahariri wa msimbo wa kisasa hutoa vipengele vya kuvutia vilivyobuniwa kuongeza utendaji wako: +Wahariri wa msimbo wa kisasa huleta vipengele vingi vya kuvutia vilivyotengenezwa kusaidia kuongeza tija yako: -| Kipengele | Kazi Yake | Kwanini Inasaidia | +| Kipengele | Kinachofanya | Kwa Nini Kinafaa | |---------|--------------|--------------| -| **Uangazaji wa Sintaksia** | Rangi sehemu tofauti za msimbo wako | Hufanya msimbo kusomeka kwa urahisi na kugundua makosa | -| **Auto-completion** | Hupendekeza msimbo unapoandika | Huongeza kasi ya kuandika na hupunguza makosa ya tahajia | -| **Zana za Kuondoa Hitilafu** | Husaidia kupata na kurekebisha makosa | Huokoa muda mwingi wa kutatua matatizo | -| **Nyongeza (Extensions)** | Ongeza vipengele maalum | Badilisha mhariri wako kwa teknolojia yoyote | -| **Msaidizi wa AI** | Hupendekeza msimbo na maelezo | Huongeza kasi ya kujifunza na utendakazi | +| **Uangazaji wa Sarufi** | Hurangi sehemu tofauti za msimbo wako | Hufanya msimbo usuafiki kusoma na kugundua makosa | +| **Auto-completion** | Inapendekeza msimbo unapoandika | Huarifu kuandika msimbo na kupunguza makosa ya tahajia | +| **Zana za Kubaini Makosa** | Husaidia kutiangazia na kurekebisha makosa | Hutoa saa nyingi za kutatua matatizo | +| **Mikengeuko** | Ongeza vipengele maalum | Binafsisha mhariri wako kwa teknolojia yoyote | +| **Msaidizi wa AI** | Pendekeza msimbo na maelezo | Harakisha kujifunza na kuzalisha kazi kwa ufanisi | -> 🎥 **Rasilimali ya Video**: Unataka kuona zana hizi zikifanya kazi? Angalia [Video ya Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) kwa muhtasari kamili. +> 🎥 **Rasilimali ya Video**: Unataka kuona vifaa hivi vinavyofanya kazi? Angalia [video ya Vifaa vya Kazi](https://youtube.com/watch?v=69WJeXGBdxg) kwa muhtasari kamili. -#### Wahariri Waliopendekezwa kwa Maendeleo ya Mtandao +#### Wahariri Waliopendekezwa kwa Maendeleo ya Wavuti **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Bure) -- Maarufu zaidi miongoni mwa waendelezaji wavuti -- Mfumo bora wa nyongeza -- Terminal iliyojengwa ndani na ushirikiano wa Git -- **Nyongeza muhimu:** - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - mapendekezo ya msimbo yanayotolewa na AI - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ushirikiano wa wakati halisi - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - upangaji wa msimbo kiotomatiki - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - kugundua makosa ya tahajia katika msimbo wako - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Inalipiwa, bure kwa wanafunzi) -- Zana za hali ya juu za kuondoa hitilafu na upimaji -- Ukomo wa msimbo wenye akili +- Pengine maarufu zaidi kwa waendelezaji wavuti +- Mfumo bora wa mikengeuko +- Terminal iliyojengwa ndani na muunganisho wa Git +- **Mikengeuko ya lazima:** + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Mapendekezo ya msimbo yenye nguvu ya AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Ushirikiano wa wakati halisi + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Urekebishaji wa kiotomatiki wa msimbo + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Kugundua makosa ya tahajia kwenye msimbo wako + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Zilizolipwa, bure kwa wanafunzi) +- Zana za hali ya juu za kubaini makosa na majaribio +- Ukomavu wa kukamilisha msimbo - Udhibiti wa toleo uliojengwa ndani -**IDEs za Kwenye Wingu** (Bei mbalimbali) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code kamili kupitia kivinjari chako -- [Replit](https://replit.com/) - Bora kwa kujifunza na kushiriki msimbo -- [StackBlitz](https://stackblitz.com/) - Maendeleo ya wavuti ya haraka na kamili +**IDE za Wingu** (Bei mbalimbali) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code kamili katika kivinjari chako +- [Replit](https://replit.com/) - Nzuri kwa kujifunza na kushiriki msimbo +- [StackBlitz](https://stackblitz.com/) - Maendeleo ya wavuti ya haraka, mfano kamili -> 💡 **Ushauri wa Kuanzisha**: Anza na Visual Studio Code – ni bure, inatumiwa sana katika sekta, na ina jamii kubwa inayounda mafunzo na nyongeza zinazosaidia. +> 💡 **Mwongozo wa Kuanzisha**: Anza na Visual Studio Code – ni bure, inatumiwa sana kwenye sekta, na ina jumuiya kubwa inayotengeneza mafunzo na mikengeuko yenye msaada. -### Vivinjari vya Mtandao: Maabara Yako ya Siri ya Maendeleo +### Vivinjari vya Wavuti: Maabara Yako ya Siri ya Maendeleo -Sawa, jiandae kushtuka kabisa! Unajua vile umekuwa ukitumia vivinjari kugonga mitandao ya kijamii na kutazama video? Sasa, zimekuwa zikificha maabara hii ya siri ya waendelezaji wakati wote, zikikusubiri ugundue! +Sawa, jiandae kufurahia akili yako kabisa! Unajua umekuwa ukitumia vivinjari kusogeza kupitia mitandao ya kijamii na kutazama video? Sawa, inaonekana wamekuwa wakificha maabara hii ya ajabu ya watengenezaji kwa muda wote, wakisubiri tu uigundue! -Kila mara unabonyeza kitufe cha kulia kwenye ukurasa wa wavuti na kuchagua "Inspekta Kipengele," unafungua dunia iliyofichwa ya zana za waendelezaji ambazo kwa kweli zina nguvu zaidi kuliko programu ghali nilizolipia mamia ya dola zamani. Ni kama kugundua jikoni lako la kawaida lina maabara ya mpishi mtaalamu nyuma ya paneli ya siri! -Mara ya kwanza mtu alinionyesha browser DevTools, nilitumia kama saa tatu nikibofya hapa na pale na kusema "SAA, INAWEZA KUFANYA HIVYO PIA?!" Unaweza kuhariri tovuti yoyote kwa wakati halisi, kuona haraka kabisa mambo yote yanapotapakaa, kujaribu jinsi tovuti yako inavyoonekana kwenye vifaa tofauti, na hata kutambua makosa ya JavaScript kama mtaalamu kweli. Ni ajabu kabisa! +Kila unapobofya kulia kwenye ukurasa na kuchagua "Inspect Element," unafungua dunia iliyofichwa ya zana za watengenezaji ambazo ni zenye nguvu zaidi kuliko programu ghali ambazo nilizikuwa nikipa maelfu ya dola zamani. Ni kama kugundua jikoni yako ya kawaida imekuwa ikifunua maabara ya mpishi mtaalamu nyuma ya paneli ya siri! +Mara ya kwanza mtu aliniona DevTools za kivinjari, nilitumia kama saa tatu nikibonyeza hapa na pale nikiwaza "SUBIRI, INAVYOFANYA HIVYO PIA?!" Kwa kweli unaweza kuhariri tovuti yoyote kwa wakati halisi, kuona haraka kila kitu kinapakia, kujaribu jinsi tovuti yako inavyoonekana kwenye vifaa tofauti, na hata kutatua matatizo ya JavaScript kama mtaalamu halisi. Ni ya kushangaza kabisa! -**Hii ndiyo sababu vivinjari ni silaha yako ya siri:** +**Hapa ndio sababu vivinjari ni silaha yako ya siri:** -Unapoanzisha tovuti au programu ya wavuti, unahitaji kuona jinsi inavyoonekana na tabia zake katika ulimwengu halisi. Vivinjari havionyeshi tu kazi yako bali pia hutoa maoni ya kina kuhusu utendaji, upatikanaji, na matatizo yanayoweza kutokea. +Unapounda tovuti au programu ya wavuti, unahitaji kuona jinsi inavyoonekana na kutenda katika ulimwengu halisi. Vivinjari havionyeshi tu kazi yako bali pia hutoa maoni ya kina kuhusu utendaji, upatikanaji, na matatizo yanayoweza kutokea. -#### Zana za Mwandishi za Vivinjari (DevTools) +#### Zana za Mwendelezi wa Kivinjari (DevTools) -Vivinjari vya kisasa vina seti kamili za maendeleo: +Vivinjari vya kisasa vinajumuisha zana kamili za maendeleo: -| Kategoria ya Zana | Inafanya Nini | Mfano wa Matumizi | -|-------------------|--------------|--------------------| -| **Kikagua Kipengele** | Tazama na hariri HTML/CSS kwa wakati halisi | Rekebisha mtindo kuona matokeo mara moja | -| **Konsoli** | Tazama ujumbe wa makosa na jaribu JavaScript | Tambua matatizo na jaribu msimbo | -| **Kisimamia Mtandao** | Fuatilia jinsi rasilimali zinavyopakuliwa | Boresha utendaji na muda wa kupakia | -| **Kikagua Upatikanaji** | Jaribu muundo wa ujumuishaji | Hakikisha tovuti yako inafanyakazi kwa watumiaji wote | -| **Mfananishi wa Vifaa** | Angalia kwenye saizi tofauti za skrini | Jaribu muundo unaojibu bila vifaa vingi | +| Kategori ya Zana | Inafanya Nini | Mfano wa Matumizi | +|------------------|--------------|-------------------| +| **Mtazamo wa Vipengele** | Tazama na hariri HTML/CSS kwa wakati halisi | Rekebisha mtindo kuona matokeo mara moja | +| **Konsoli** | Tazama ujumbe wa makosa na jaribu JavaScript | Tatua matatizo na jaribu msimbo | +| **Kisimamizi Mtandao** | Fuata jinsi rasilimali zinapakiwa | Boresha utendaji na nyakati za upakiaji | +| **Kikagua Upatikanaji** | Jaribu muundo unaojumuisha watu wote | Hakikisha tovuti yako inafanya kazi kwa watumiaji wote | +| **Sanifu Vifaa** | Tazama awali kwenye saizi tofauti za skrini | Jaribu muundo unaojibadilisha bila vifaa vingi | -#### Vivinjari Vinavyopendekezwa kwa Maendeleo +#### Vivinjari Vilivyopendekezwa kwa Maendeleo -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools za kiwango cha viwandani zenye nyaraka za kina +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools za viwango vya viwandani na nyaraka za kina - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Zana bora za CSS Grid na upatikanaji -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Jengwa juu ya Chromium na rasilimali za waendelezaji wa Microsoft +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Imejengwa juu ya Chromium na rasilimali za Microsoft kwa waendelezaji + +> ⚠️ **Mshauri Muhimu wa Upimaji**: Hakikisha kujaribu tovuti zako kwenye vivinjari vingi! Kinachofanya kazi vizuri kwenye Chrome kinaweza kuonekana tofauti kwenye Safari au Firefox. Waendelezaji wa kitaalamu hujaribu kwenye vivinjari vyote vikuu ili kuhakikisha uzoefu wa mtumiaji ni thabiti. -> ⚠️ **Kumbuka Muhimu kwa Upimaji**: Daima jaribu tovuti zako kwenye vivinjari vingi! Kile kinachofanya kazi vizuri Chrome kinaweza kuonekana tofauti Safari au Firefox. Waendelezaji wataalamu hujaribu kwenye vivinjari vyote vikubwa kuhakikisha uzoefu wa mtumiaji uko sawa. -### Zana za Amri: Mlango Wako wa Nguvu za Mwandishi +### Zana za Mstari wa Amri: Mlango Wako wa Nguvu za Kuendeleza -Sawa, tufanye kipindi cha uwazi kabisa hapa kuhusu mstari wa amri, kwa maana nataka usikilize kutoka kwa mtu anayeuelewa kweli. Nilipouona mara ya kwanza – ni skrini nyeusi yenye maandishi yanayang'aa – nilifikiri, "Hapana, kabisa hapana! Hii inaonekana kama kitu kutoka filamu ya wadukuzi ya miaka ya 1980, na mimi si mwerevu vya kutosha kwa hili!" 😅 +Sawa, hebu tuwe waaminifu kabisa kuhusu mstari wa amri, kwa sababu nataka usiseme tu na mtu, bali mtu anaelewa sana. Nilipouona mara ya kwanza – ni kati ya skrini nyeusi yenye maandishi yanayong'aa – nilifikiri, "Hapana kabisa! Hii inaonekana kama filamu ya mdukuzi ya miaka ya 1980, na mimi si mwerevu kiasi hicho kwa hili!" 😅 -Lakini hapa ni kile ningependa mtu kunisema wakati huo, na ninachokuambia sasa hivi: mstari wa amri si wa kutisha – ni kama kuwa na mazungumzo ya moja kwa moja na kompyuta yako. Fikiria kama tofauti kati ya kuagiza chakula kupitia app ya kisasa yenye picha na menyu (ambayo ni nzuri na rahisi) dhidi ya kuingia kwenye mgahawa wako maarufu ambapo mpishi anajua hasa unachopenda na anaweza kuandaa kitu kamili kwa sema tu "nishangaze na kitu kizuri." +Lakini hapa ni kile ningetaka mtu angenieleza wakati huo, na ninakueleza sasa hivi: mstari wa amri hauogopi – ni kama kuwa na mazungumzo ya moja kwa moja na kompyuta yako. Fikiria kama tofauti kati ya kuagiza chakula kupitia app ya kisasa yenye picha na menyu (ambayo ni rahisi na nzuri) dhidi ya kuingia kwa mgeni kwenye mgahawa unaoupenda ambapo mpishi anajua kabisa unachopenda na anaweza kuandaa kitu bora tu kwa kusema "nishangaze na kitu kizuri." -Mstari wa amri ndio mahali pa watengenezaji kujisikia kama wachawi kabisa. Unaandika maneno machache yanayoonekana ya kichawi (sipigani, ni amri tu, lakini yanahisi ya kichawi!), bonyeza enter, na BOOM – umeunda muundo mzima wa mradi, kusanidi zana zenye nguvu kutoka sehemu mbalimbali duniani, au kupeleka programu yako mtandaoni kwa mamilioni ya watu kuiona. Ukipata ladha ya kwanza ya nguvu hiyo, ni tabia ya kuvuta sana! +Mstari wa amri ni mahali ambapo waendelezaji hujisikia kama wachawi halisi. Unaandika maneno machache yanayoonekana kuwa ya kichawi (sawa, ni amri tu, lakini yanahisi ya kichawi!), bonyeza enter, NA HAPA NDIYO – umeundwa miundo yote ya mradi, kusanidi zana zenye nguvu kutoka duniani kote, au kupeleka app yako mtandaoni kwa watu milioni kuona. Mara unapochukua ladha ya kwanza ya nguvu hiyo, ni kabisa inakuvutia! -**Kwa nini mstari wa amri utakuwa zana yako ya kipenzi:** +**Kwa nini mstari wa amri utakuwa zana yako uipendayo:** -Wakati interfaces za picha ni nzuri kwa kazi nyingi, mstari wa amri ufanisi katika uendeshaji kiotomatiki, usahihi, na kasi. Zana nyingi za maendeleo hufanya kazi hasa kupitia interface za mstari wa amri, na kujifunza kuzitumia kwa ufanisi kunaweza kuboresha uzalishaji wako sana. +Wakati interfaces za picha ni nzuri kwa kazi nyingi, mstari wa amri unajivunia otomatiki, usahihi, na kasi. Zana nyingi za maendeleo hufanya kazi hasa kupitia interface ya mstari wa amri, na kujifunza kuzitumia kwa ufanisi kunaweza kuboresha sana uzalishaji wako. ```bash -# Hatua ya 1: Tengeneza na elekea kwenye saraka ya mradi +# Hatua 1: Unda na uelekee kwenye saraka ya mradi mkdir my-awesome-website cd my-awesome-website ``` **Hivi ndivyo msimbo huu unavyofanya:** -- **Tengeneza** saraka mpya iitwayo "my-awesome-website" kwa mradi wako -- **Ingia** ndani ya saraka mpya kuanza kazi +- **Unda** saraka mpya inayoitwa "my-awesome-website" kwa mradi wako +- **Ingia** kwenye saraka mpya kuanza kufanya kazi ```bash -# Hatua 2: Anzisha mradi na package.json +# Hatua ya 2: Anzisha mradi na package.json npm init -y # Sakinisha zana za kisasa za maendeleo @@ -614,11 +614,11 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Hatua kwa hatua, hili ndilo linalotokea:** -- **anzisha** mradi mpya wa Node.js kwa mipangilio ya default kwa kutumia `npm init -y` -- **sanidi** Vite kama zana ya kisasa ya kujenga kwa maendeleo ya haraka na kujenga uzalishaji -- **ongeza** Prettier kwa urembo wa msimbo kiotomatiki na ESLint kwa ukaguzi wa ubora wa msimbo -- **tumia** bendera `--save-dev` kuonyesha hizi ni tegemezi kwa maendeleo pekee +**Hatua kwa hatua, hapa kinatokea nini:** +- **anzisha** mradi mpya wa Node.js kwa mipangilio ya msingi ukitumia `npm init -y` +- **sanidi** Vite kama zana ya kisasa ya ujenzi kwa maendeleo ya haraka na ujenzi wa uzalishaji +- **ongeza** Prettier kwa upangaji wa msimbo kiotomatiki na ESLint kwa ukaguzi wa ubora wa msimbo +- **tumia** bendera ya `--save-dev` kuonyesha hivi ni viinua only vya maendeleo ```bash # Hatua ya 3: Unda muundo wa mradi na faili @@ -629,204 +629,205 @@ echo 'My Site

Hello Wo npx vite ``` -**Juu tume:** -- **Panga** mradi wetu kwa kuunda folda tofauti kwa msimbo chanzo na mali -- **Tengeneza** faili la HTML la msingi lenye muundo sahihi wa nyaraka -- **anzisha** seva ya maendeleo ya Vite kwa uhuishaji wa moja kwa moja na kubadilisha moduli joto +**Juu, tume:** +- **Panga** mradi wetu kwa kuunda folda tofauti za msimbo wa chanzo na mali +- **Tengeneza** faili la msingi la HTML lenye muundo sahihi wa hati +- **Anza** seva ya maendeleo ya Vite kwa upyaaji wa moja kwa moja na kubadilisha vipengele moto -#### Zana Muhimu za Mstari wa Amri kwa Maendeleo ya Wavuti +#### Zana Muhimu za Mstari wa Amri kwa Uendelezaji wa Wavuti -| Zana | Kusudi | Kwa Nini Unaihitaji | -|-------|---------|--------------------| -| **[Git](https://git-scm.com/)** | Udhibiti wa toleo | Fuatilia mabadiliko, shirikiana na wengine, tengeneza nakala za kazi yako | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & usimamizi wa kifurushi | Endesha JavaScript nje ya vivinjari, sanidi zana za maendeleo za kisasa | -| **[Vite](https://vitejs.dev/)** | Zana ya kujenga & seva ya maendeleo | Maendeleo ya kasi sana na uhuishaji wa moduli joto | -| **[ESLint](https://eslint.org/)** | Ubora wa msimbo | Pata na rekebisha matatizo ya JavaScript kiotomatiki | -| **[Prettier](https://prettier.io/)** | Urembo wa msimbo | Hifadhi msimbo wako ukiwa na muundo thabiti na wa kusomeka | +| Zana | Kusudi | Kwa Nini Unahitaji | +|------|---------|-------------------| +| **[Git](https://git-scm.com/)** | Udhibiti toleo | Fuata mabadiliko, shirikiana na wengine, hifadhi kazi yako | +| **[Node.js & npm](https://nodejs.org/)** | Muda wa utekelezaji wa JavaScript & usimamizi wa pakiti | Endesha JavaScript nje ya vivinjari, sanidi zana za kisasa za maendeleo | +| **[Vite](https://vitejs.dev/)** | Zana ya kujenga & seva ya maendeleo | Maendeleo ya kasi sana yenye kubadilisha vipengele moto | +| **[ESLint](https://eslint.org/)** | Ubora wa msimbo | Tambua na rekebisha matatizo katika JavaScript yako kiotomatiki | +| **[Prettier](https://prettier.io/)** | Upangaji wa msimbo | Dumisha msimbo wako ukifanikiwa na kuwa rahisi kusoma | -#### Chaguo Maalum kwa Mifumo +#### Chaguzi za Mfumo Mahususi **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal ya kisasa yenye vipengele vingi -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mazingira ya uandishi wa script yenye nguvu -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mstari wa amri wa kawaida wa Windows +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mazingira yenye nguvu ya uandishi wa skripti +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mstari wa amri wa Windows wa jadi **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Programu ya terminal iliyo ndani ya mfumo -- **[iTerm2](https://iterm2.com/)** - Terminal iliyoboreshwa yenye vipengele vya hali ya juu +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Programu ya terminal iliyojengwa ndani +- **[iTerm2](https://iterm2.com/)** - Terminal iliyoimarishwa yenye vipengele vya hali ya juu **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Shell ya kawaida ya Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emuleta terminal ya hali ya juu +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulator wa terminal yenye vipengele vya hali ya juu + +> 💻 = Imewekwa awali kwenye mfumo wa uendeshaji -> 💻 = Imejumuishwa tayari kwenye mfumo wa uendeshaji +> 🎯 **Njia ya Kujifunza**: Anza na amri za msingi kama `cd` (badilisha saraka), `ls` au `dir` (orodhesha faili), na `mkdir` (tengeneza folda). Fanya mazoezi kwa amri za kazi za kisasa kama `npm install`, `git status`, na `code .` (fungua saraka ya sasa VS Code). Unapokuwa mtaalamu zaidi, utajifunza amri na mbinu za otomatiki za hali ya juu kwa asili. -> 🎯 **Njia ya Kujifunza**: Anza na amri za msingi kama `cd` (badilisha saraka), `ls` au `dir` (orodhesha faili), na `mkdir` (tengeneza folda). Fanya mazoezi na amri za mtiririko wa kazi wa kisasa kama `npm install`, `git status`, na `code .` (fungua saraka ya sasa katika VS Code). Unapozoea, utaweza kujifunza amri za hali ya juu na mbinu za uendeshaji kiotomatiki kwa urahisi. -### Nyaraka: Mshauri Wako wa Kujifunza Ukiwa Hapo Siku zote +### Nyaraka: Mwalimu Wako Anayepatikana Daima Kujaribu -Sawa, ngojea niambie siri kidogo itakayokufanya ujisikie vizuri kuwa mmwanzo: hata waendelezaji wenye uzoefu zaidi hutumia sehemu kubwa ya muda wao kusoma nyaraka. Na si kwa sababu hawajui wanachofanya – ni ishara ya hekima! +Sawa, niruhusu nishiriki siri kidogo itakayokufanya uhisi afadhali sana kuwa mwanzoni: hata waendelezaji wenye uzoefu mkubwa hutumia sehemu kubwa ya wakati wao kusoma nyaraka. Na sio kwa sababu hawajui wanachofanya – ni ishara ya hekima! -Fikiria nyaraka kama kuwa na ufikiaji wa walimu mwenye subira, wenye maarifa, waliopo kila wakati 24/7. Unakumbwa na shida saa 2 usiku? Nyaraka zipo na pambazuko la virtual lenye joto na jibu halisi unalohitaji. Unataka kujifunza kuhusu kipengele kipya kinachozungumziwa na kila mtu? Nyaraka zinakuunga mkono kwa mifano ya hatua kwa hatua. Unajaribu kuelewa kwa nini kitu kinafanya kazi jinsi kinavyo? Umekisia – nyaraka ziko tayari kueleza kwa njia inayokuleta mwangaza! +Fikiria nyaraka kama kuwa na walimu wenye subira kubwa, maarifa na wanaopatikana masaa 24/7. Umekwama na tatizo saa 2 za usiku? Nyaraka zipo na kumbatio la joto la kidijitali na jibu sahihi unalotaka. Unataka kujifunza kuhusu kipengele kipya kinachozungumzwa na kila mtu? Nyaraka zinajali na mifano hatua kwa hatua. Unajaribu kuelewa kwa nini kitu kinafanya kazi kama kilivyo? Kumbuka – nyaraka ziko tayari kukueleza kwa njia itakayokuachia kuelewa kabisa! -Hapa kuna kitu kilichobadilisha kabisa mtazamo wangu: ulimwengu wa maendeleo ya wavuti unasogea kwa kasi sana, na hakuna mtu (yaani hakuna mtu!) anayekumbuka kila kitu. Nimeona waendelezaji wa ngazi ya juu wenye miaka 15+ ya uzoefu wakitafuta sintaksia za msingi, na unajua nini? Hiyo si aibu – ni busara! Siyo kuhusu kumbukumbu kamili; ni kujua wapi kupata majibu ya kuaminika haraka na kuelewa jinsi ya kuyatumia. +Hapa kuna kitu kilinibadilishia mtazamo kabisa: dunia ya maendeleo ya wavuti inaenda haraka sana, na hakuna mtu (naam, kabisa hakuna!) anayehifadhi kila kitu akilini. Nimewatazama waendelezaji wakuu wenye uzoefu wa miaka 15+ wakitafuta muundo wa msingi, na unajua? Hiyo si aibu – ni busara! Sio kuhusu kuwa na kumbukumbu kamili; ni kuhusu kujua wapi kupata majibu ya kuaminika haraka na kuelewa jinsi ya kuyatumia. -**Hapa ndipo uchawi wa kweli unapotokea:** +**Hapa ndipo uchawi halisi unapotokea:** -Waendelezaji wataalamu hutumia sehemu kubwa ya muda wao kusoma nyaraka – si kwa sababu hawajui wanachofanya, lakini kwa sababu mandhari ya maendeleo ya wavuti hubadilika haraka kiasi kwamba kuendelea kuwa wa kisasa kunahitaji kujifunza endelevu. Nyaraka bora zinakusaidia kuelewa si tu *jinsi* ya kutumia kitu, bali *kwa nini* na *lini* utakitumia. +Waendelezaji wa kitaalamu hutumia sehemu kubwa ya wakati wao kusoma nyaraka – si kwa sababu hawajui wanachofanya, bali kwa sababu mandhari ya maendeleo ya wavuti hubadilika kwa kasi hivyo kuweka hatua kunahitaji kujifunza endelevu. Nyaraka bora zinakusaidia kuelewa sio tu *jinsi* ya kutumia kitu, bali *kwa nini* na *lini* kuvitumia. #### Rasilimali Muhimu za Nyaraka **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Kiwango cha dhahabu cha nyaraka za teknolojia ya wavuti -- Miongozo kamili ya HTML, CSS, na JavaScript +- Kiwango cha dhahabu kwa nyaraka za teknolojia ya wavuti +- Miongozo kamili kwa HTML, CSS, na JavaScript - Inajumuisha taarifa za ulinganifu wa vivinjari -- Ina mifano ya vitendo na maonyesho ya kuingiliana +- Ina mifano ya vitendo na maonyesho ya mwingiliano -**[Web.dev](https://web.dev)** (kwa Google) -- Vigezo bora vya maendeleo ya wavuti ya kisasa -- Miongozo ya kuboresha utendaji -- Kanuni za upatikanaji na muundo ujumuishi -- Masomo ya kesi kutoka miradi halisi +**[Web.dev](https://web.dev)** (kutoka Google) +- Mbinu bora za kisasa za maendeleo ya wavuti +- Miongozo ya uboreshaji wa utendaji +- Kanuni za upatikanaji na muundo jumuishi +- Masomo ya kesi kutoka miradi ya ulimwengu wa kweli **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Rasilimali za maendeleo ya kivinjari cha Edge -- Miongozo ya Programu za Wavuti Inayopiga Mbele -- Maarifa juu ya maendeleo ya mseto wa majukwaa +- Miongozo ya Progressive Web App +- Maarifa ya maendeleo kwa mitandao mingi **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Mitaala ya kujifunza yenye muundo +- Mtaala wa kujifunza uliopangwa - Kozi za video kutoka kwa wataalamu wa sekta -- Mazoezi ya msimbo wa vitendo +- Mazoezi ya msimbo ya vitendo -> 📚 **Mbinu ya Kujifunza**: Usijaribu kukumbuka nyaraka – badala yake, jifunze jinsi ya kuzitafuta kwa ufanisi. Weka alama rasilimali zinazotumika mara kwa mara na fanya mazoezi ya kutumia kazi za utafutaji kupata taarifa maalum kwa haraka. +> 📚 **Mkakati wa Kusoma**: Usijaribu kukumbuka nyaraka yote – badala yake, jifunze kuvinjari kwa ufanisi. Weka alama rasilimali unazotumia mara kwa mara na fanya mazoezi kutumia kazi za utafutaji kupata taarifa maalum haraka. -### 🔧 **Kazia Zana: Ni Nini Kinaendana na Wewe?** +### 🔧 **Kukagua Uwezo wa Zana: Nini Kinachokuvutia?** -**Chukua muda kufikiria:** -- Ni zana gani unayo hamu ya kutumia kwanza? (Hakuna jibu baya!) -- Je, mstari wa amri bado unahisi kutisha, au unavutiwa na hivyo? -- Unaweza kufikiria kutumia browser DevTools kuangalia siri za nyuma za tovuti zako za kupenda? +**Chukua muda ufikirie:** +- Ni zana gani una hamu zaidi kujaribu kwanza? (Hakuna jibu baya!) +- Je, mstari wa amri bado unakuogopesha, au una hamu ya kuijua? +- Unaweza kufikiria kutumia DevTools za kivinjari kuangalia siri za nyuma ya tovuti unazopenda? ```mermaid -pie title "Muda wa Mendevu Kutumika na Vifaa" +pie title "Muda Wa Mendelezi Kutumia Vifaa" "Mhariri wa Msimbo" : 40 - "Kujaribu Kivinjari" : 25 + "Kukagua Kivinjari" : 25 "Mstari wa Amri" : 15 "Kusoma Nyaraka" : 15 - "Kukaguzi Kasoro" : 5 + "Kukagua Hitilafu" : 5 ``` -> **Maarifa ya kufurahisha**: Waendelezaji wengi hutumia takriban 40% ya wakati wao ndani ya mhariri wao wa msimbo, lakini angalia muda mwingi unaotumika kwa upimaji, kujifunza, na kutatua matatizo. Programu si tu kuandika msimbo – ni kutengeneza uzoefu! +> **Maarifa ya kufurahisha**: Waendelezaji wengi hutumia takriban asilimia 40 ya wakati wao katika mhariri wa msimbo, lakini zingatia jinsi muda mwingi unatumika kwa upimaji, kujifunza, na kutatua matatizo. Programu siyo tu kuandika msimbo – ni kutengeneza uzoefu! -✅ **Kukuza mawazo**: Hapa kuna jambo la kufikiria – unaonaje zana za kujenga tovuti (maendeleo) zinavyotofautiana na zana za kubuni muonekano wake (buni)? Ni kama tofauti kati ya kuwa mbunifu wa majengo anayetengeneza nyumba nzuri na mkandarasi anayejenga kweli. Zote ni muhimu, lakini zinahitaji boksi tofauti za zana! Fikra hii itakusaidia kuona picha kubwa ya jinsi tovuti zinavyooanwa. +✅ **Chunguzi la Kupendelea**: Hapa kuna jambo la kufikiria – je, unaonaje zana za kujenga tovuti (maendeleo) zinavyotofautiana na zana za kubuni jinsi zinavyoonekana (muundo)? Ni kama tofauti kati ya kuwa mbunifu binafsi anayeunda nyumba nzuri na mkandarasi anayejenga nyumba hiyo. Zote ni muhimu, lakini zina masanduku tofauti ya zana! Mtazamo huu utakusaidia kuona taswira kubwa jinsi tovuti zinavyoanzishwa. -## Changamoto ya GitHub Copilot Agent 🚀 +## Changamoto ya Wakala wa GitHub Copilot 🚀 -Tumia hali ya Agent kukamilisha changamoto ifuatayo: +Tumia hali ya Wakala kukamilisha changamoto ifuatayo: -**Maelezo:** Chunguza vipengele vya mhariri wa msimbo wa kisasa au IDE na onyesha jinsi vinaweza kuboresha mtiririko wako wa kazi kama mwendelezaji wa wavuti. +**Maelezo:** Chunguza vipengele vya mhariri wa msimbo wa kisasa au IDE na uonyeshe jinsi inavyoweza kuboresha mtiririko wako wa kazi kama mtaalamu wa wavuti. -**Ombi:** Chagua mhariri wa msimbo au IDE (kama Visual Studio Code, WebStorm, au IDE ya wingu). Orodhesha vipengele au nyongeza tatu zinazokusaidia kuandika, kutambua makosa, au kudumisha msimbo kwa ufanisi zaidi. Kwa kila moja, toa maelezo mafupi kuhusu jinsi inavyoboresha mtiririko wako wa kazi. +**Maelekezo:** Chagua mhariri wa msimbo au IDE (kama Visual Studio Code, WebStorm, au IDE ya wingu). Orodhesha vipengele tatu au nyongeza zinazokusaidia kuandika, kutatua matatizo, au kudumisha msimbo kwa ufanisi zaidi. Kila moja toa maelezo mafupi jinsi inavyoboresha mtiririko wako wa kazi. --- ## 🚀 Changamoto -**Sawa, mpelelezi, uko tayari kwa kesi yako ya kwanza?** +**Sawa, mpelelezi, tayari kwa kesi yako ya kwanza?** -Sasa umejenga msingi mzuri, nina adventure itakayokusaidia kuona jinsi ulimwengu wa programu ulivyo tofauti na kupendeza kweli. Na sikiliza – hii siyo kuhusu kuandika msimbo bado, hivyo usijisikie shinikizo! Fikiria kama mpelelezi wa lugha za programu kwenye kesi yako ya kwanza ya kusisimua! +Sasa kwa kuwa umepata msingi huu mzuri, ninaendeleza adventure itakayokusaidia kuona jinsi ulimwengu wa programu unavyotofautiana na kuvutia. Sikiliza – hii sio kuhusu kuandika msimbo bado, huna shinikizo lolote! Fikiria kama mpelelezi wa lugha za programu kwenye kesi yako ya kwanza yenye msisimko! -**Kazi yako, ukikubali:** -1. **Kuwa mchunguzi wa lugha**: Chagua lugha tatu za programu kutoka kwa dunia tofauti kabisa – labda moja inayojenga tovuti, moja inayounda apps za simu, na moja inayochambua data kwa wanasayansi. Tafuta mifano ya kazi rahisi sawa imeandikwa katika kila lugha. Naahidi utashangaa sana jinsi zinavyotofautiana huku zikifanya kitu kimoja kabisa! +**Misheni yako, kama utachagua kuitikia:** +1. **Kuwa mchunguzi wa lugha:** Chagua lugha tatu za programu kutoka ulimwengu tofauti kabisa – labda moja linalojenga tovuti, moja linalotengeneza programu za simu, na moja linalochambua data kwa wanasayansi. Tafuta mifano ya kazi rahisi ile ile imeandikwa katika kila lugha. Ninaahidi utafurahi jinsi zinavyoweza kuonekana tofauti kabisa huku zikifanya kitu kimoja halisi! -2. **Gundua hadithi zao za asili**: Nini kinachofanya kila lugha kuwa ya kipekee? Hapa kuna jambo la baridi – kila lugha ya programu iliumbwa kwa sababu mtu alifikiri, "Unajua? Lazima kuna njia bora ya kutatua tatizo hili maalum." Je, unaweza kubaini matatizo hayo? Hadithi hizi ni za kusisimua kweli! +2. **Gundua hadithi zao za asili:** Nini kinachofanya kila lugha kuwa ya kipekee? Hapa kuna ukweli mzuri – kila lugha ya programu imetengenezwa kwa sababu mtu alifikiri, "Unajua nini? Lazima kuwe na njia bora ya kutatua tatizo hili maalum." Je, unaweza kubaini tatizo hilo lilikuwa lipi? Baadhi ya hadithi hizi ni za kuvutia kabisa! -3. **Kutana na jumuiya**: Angalia jinsi jumuiya ya kila lugha inavyokaribisha na yenye shauku. Baadhi zina mamilioni ya waendelezaji wanaoshirikiana na kusaidiana, wengine ni wadogo lakini wa karibu na wenye msaada mkubwa. Utapenda kuona tabia tofauti za jumuiya hizi! +3. **Kutana na jamii:** Angalia jinsi jamii ya kila lugha inavyokukaribisha na kuwa na shauku. Baadhi ina maelfu ya waendelezaji wakishirikiana na kusaidiana, wengine ni wadogo lakini wana mshikamano mkubwa sana na msaada. Utapenda kuona tabia tofauti za jamii hizi! -4. **Fuata hisia zako**: Ni lugha gani inayoonekana inakukaribisha zaidi kwa sasa? Usijali juu ya kuchagua sahihi kabisa – sikiliza tu hisia zako! Hakuna jibu baya hapa, na unaweza kamwe kuchunguza nyingine baadaye. +4. **Fuata hisia zako:** Ni lugha gani unayohisi ni rahisi kwako kwa sasa? Usijali kuchukua uamuzi "mkamilifu" – sikiliza tu hisia zako! Hakuna jibu baya hapa, na unaweza kila wakati kuchunguza nyingine baadaye. -**Kazi ya ziada ya mpelelezi**: Angalia kama unaweza kugundua ni tovuti au apps gani kubwa zimejengwa kwa kila lugha. Nahakikishia utashangaa kujua ni nini kinaendesha Instagram, Netflix, au mchezo wa simu ambao huwezi kuacha kucheza! +**Kazi ya ziada kwa mpelelezi**: Angalia kama unaweza kugundua ni tovuti au programu gani kubwa zimejengwa kwa kila lugha. Nihakikishie utashangazwa kujua kinachoiendesha Instagram, Netflix, au mchezo wa simu usioachwa kucheza! -> 💡 **Kumbuka**: Huhuji kugeuka mtaalamu wa lugha hizi leo. Unajifunza tu mtaa kabla ya kuamua wapi unataka kuanzisha duka. Chukua muda wako, furahia, na ruhusu udadisi wako uongoze! +> 💡 **Kumbuka**: Haujai kuwa mtaalamu wa lugha hizi leo. Unajifunza tu mazingira kabla ya kuamua wapi unataka kuanzisha makazi. Chukua muda, furahia, na ufuate hamu yako ya kujua! -## Tusherehekee Uliyegundua! +## Tuadhimishe Ulimwengu Uliougundua! -Mungu wangu, umejifunza mambo mengi ya kushangaza leo! Nimefurahi kweli kuona kiasi gani cha safari hii kubwa umekumbatia. Na kumbuka – hii si mtihani unaotakiwa kufanikisha kila kitu kwa ukamilifu. Hii ni sherehe ya mambo yote mazuri uliyofahamu kuhusu dunia hii ya kusisimua unayoanza kuingia ndani! +Mzazi wa raha, umepokea maarifa mengi ya kushangaza leo! Ninashukuru kabisa kuona jinsi sehemu kubwa ya safari hii ya ajabu imekushika. Na kumbuka – hii si mtihani wa kupata kila kitu kamili. Hii ni sherehe ya mambo mazuri uliyoyajifunza kuhusu ulimwengu huu wa kuvutia unaojiandaa kuingia ndani yake! -[Chukua jaribio baada ya somo](https://ff-quizzes.netlify.app/web/) -## Mapitio & Kujifunza Binafsi +[Chukua mtihani wa baada ya somo](https://ff-quizzes.netlify.app/web/) -**Chukua muda wako kuchunguza na kufurahia!** +## Tathmini & Kujisomea Mwenyewe -Umeshughulikia mengi leo, na hilo ni jambo la kujivunia! Sasa kuna sehemu ya kufurahisha – kuchunguza mada zilizoanzisha hamu yako. Kumbuka, hii si kazi za nyumbani – ni adventure! +**Chukua muda kuchunguza na kufurahia!** +Umekamilisha mambo mengi leo, na hiyo ni kitu cha kujivunia! Sasa inakuja sehemu ya kufurahisha – kuchunguza mada zilizoamua udadisi wako. Kumbuka, huu sie kazi ya nyumbani – ni safari ya kusisimua! -**Chunguza kwa undani zaidi kile kinachokufurahisha:** +**Zamisha zaidi katika kile kinachokuvutia:** -**Jaribu lugha za programu:** -- Tembelea tovuti rasmi za lugha 2-3 zilizokuvutia. Kila moja ina tabia na hadithi yake! -- Jaribu mizinga ya kuandika nambari mtandaoni kama [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), au [Replit](https://replit.com/). Usisite kujaribu – huwezi kuvunjika kitu chochote! -- Soma jinsi lugha yako unayopenda ilivyotokea. Kwa kweli, baadhi ya hadithi hizi za asili ni za kuvutia na zitakusaidia kuelewa kwa nini lugha zinafanya kazi kama zinavyofanya. +**Jitosee katika lugha za programu:** +- Tembelea tovuti rasmi za lugha 2-3 za programu zilizokuvutia. Kila moja ina utu na hadithi yake ya kipekee! +- Jaribu baadhi ya maeneo ya kuchezea msimbo mtandaoni kama [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), au [Replit](https://replit.com/). Usijizuaye kujaribu – hutaweza kuvunja chochote! +- Soma kuhusu jinsi lugha unayopenda ilivyotokea. Kweli kabisa, baadhi ya hadithi hizi za asili ni za kuvutia na zitakusaidia kuelewa kwa nini lugha zinafanya kazi kama zinavyofanya. -**Jifunze kutumia zana zako mpya:** -- Pakua Visual Studio Code kama bado hujapakia – ni bure na utapenda! -- Tumia dakika chache vinjari Soko la Extensions. Ni kama duka la programu kwa mhariri wako wa nambari! -- Fungua Zana za Mjenzi wa kivinjari chako na bonyeza sehemu mbali mbali. Usijali kuelewa kila kitu – jifunze tu na mambo yaliyopo. +**Jifunze kutumia zana zako mpya kwa urahisi:** +- Pakua Visual Studio Code ikiwa bado hujafanya hivyo – ni bure na utapenda sana! +- Tumia dakika chache kuvinjari soko la Extensions. Ni kama duka la programu la mhariri wako wa msimbo! +- Fungua Zana za Mwanaendelezi (Developer Tools) kwenye kivinjari chako na bonyeza sehemu mbalimbali. Usijali kuelewa kila kitu – jifunze tu kuhusu kilichopo. **Jiunge na jamii:** -- Fuata jamii za waendelezaji kwenye [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), au [GitHub](https://github.com/). Jamii ya uandishi wa programu ni marafiki sana kwa wapya! -- Tazama video za kuanzia kuandika nambari kwenye YouTube. Kuna waumbaji wengi wazuri wanaokumbuka jinsi ilivyokuwa kuanza. -- Waza kujiunga na mikutano ya karibu au jamii mtandaoni. Ni kweli, waendelezaji wanapenda kusaidia wapya! +- Fuata baadhi ya jumuiya za waendelezaji kwenye [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), au [GitHub](https://github.com/). Jamii ya waprogramu ni ya kupokea wageni vibaya kabisa! +- Tazama video za kuanzia kuandika msimbo kwenye YouTube. Kuna waumba wengi wazuri sana ambao wanakumbuka jinsi ilivyokuwa kuanza. +- Fikiria kujiunga na mikutano ya karibu au jumuiya mtandaoni. Niamini, waendelezaji wanapenda kuwasaidia wanaoanza! -> 🎯 **Sikiliza, hapa ni kile nataka ukumbuke**: Huiruhusiwi kuwa mchawi wa kuandika nambari usiku moja! Sasa hivi, unajifunza tu kuhusu dunia hii mpya ya kushangaza unayoanza kujiingiza. Chukua muda wako, furahia safari, na kumbuka – kila mendelezaji unayemheshimu alikuwa hapo ulipo sasa hivi, akisikia msisimko na labda kidogo kukosa uwezo. Hilo ni la kawaida kabisa, na ina maana unafanya vizuri! +> 🎯 **Sikiliza, hapa ndipo nataka ukumbuke**: Haurajiwi kuwa mchawi wa kuandika programu usiku mmoja! Hivi sasa, unajifunza tu kuhusu dunia hii mpya ya kushangaza ambayo unakaribia kuingia. Chukua muda wako, furahia safari, na kumbuka – kila mtaalamu unayemheshimu alikuwa anakaa mahali ulipo sasa, akihisi msisimko na labda kidogo kuchanganyikiwa. Hiyo ni kawaida kabisa, na inamaanisha unaenda sawa! -## Kazi ya Nyumbani +## Kazi Ya Nyumbani [Reading the Docs](assignment.md) -> 💡 **Kichocheo kidogo kwa kazi yako ya nyumbani**: Ningependa sana kukuona ukichunguza zana ambazo hatujazifunza bado! Ruka wahariri, vivinjari, na zana za mstari wa amri tulizozizungumza – kuna ulimwengu mzima wa zana za maendeleo nzuri kabisa zinasubiri kugunduliwa. Tafuta zile zinazotunzwa kwa ufanisi na zina jamii za kuishi na msaada (hizi huwa na mafunzo bora na watu wenye msaada wa hali ya juu ukiwa umefungwa na unahitaji msaada mzuri). +> 💡 **Msukumo mdogo kwa kazi yako ya nyumbani**: Ningependa sana kukuona ukichunguza zana zingine ambazo hatujazifunua bado! Ruka wahariri, vivinjari, na zana za mistari ya amri tulizozungumza tayari – kuna ulimwengu mzima wa zana za maendeleo zinazostahiki kugunduliwa. Tafuta zile zinazoendeshwa mara kwa mara na zina jamii zenye nguvu, zenye msaada (hizi ndizo huwa na mafunzo bora na watu wenye msaada wakati ukiwa umekwama na unahitaji msaada mzuri). --- -## 🚀 Ratiba Yako ya Safari ya Kujifunza Programu +## 🚀 Ratiba Yako ya Safari ya Programu -### ⚡ **Unachoweza Kufanya Katika Dakika 5 Zijazo** -- [ ] Hifadhi tovuti 2-3 za lugha za programu zilizokuvutia -- [ ] Pakua Visual Studio Code kama bado hujafanya hivyo +### ⚡ **Ni Nini Unaweza Kufanya Katika Dakika 5 Zilizofuata** +- [ ] Weka alama tovuti za lugha 2-3 za programu zilizokuvutia +- [ ] Pakua Visual Studio Code ikiwa bado hujafanya hivyo - [ ] Fungua DevTools za kivinjari chako (F12) na bonyeza sehemu yoyote ya tovuti -- [ ] Jiunge na jumuiya moja ya waendelezaji (Dev.to, Reddit r/webdev, au Stack Overflow) - -### ⏰ **Unachoweza Kufanikisha Saa Hii** -- [ ] Kamili mtihani baada ya somo na tafakari majibu yako -- [ ] Sanidi VS Code na nyongeza ya GitHub Copilot -- [ ] Jaribu mfano wa "Hello World" katika lugha 2 tofauti mtandaoni -- [ ] Tazama video ya "Siku Maisha ya Mendelezaji" kwenye YouTube -- [ ] Anza kufanya upelelezi wa lugha yako ya programu (kutoka changamoto) - -### 📅 **Adventure Yako ya Wiki Nzima** -- [ ] Kamili kazi ya nyumbani na chunguza zana 3 mpya za maendeleo -- [ ] Fuata waendelezaji 5 au akaunti za programu kwenye mitandao ya kijamii -- [ ] Jaribu kujenga kitu kidogo kwenye CodePen au Replit (hata tu "Hello, [Jina Lako]!") -- [ ] Soma blogu moja ya mendelezaji kuhusu safari ya mtu binafsi ya kuandika nambari -- [ ] Jiunge na mkutano mtandaoni au angalia hotuba ya programu -- [ ] Anza kujifunza lugha uliyoteua kwa mafunzo mtandaoni - -### 🗓️ **Mabadiliko Yako ya Mwezi Mzima** -- [ ] Jenga mradi wako wa kwanza mdogo (hata tovuti rahisi ni nzuri!) -- [ ] Changia mradi wa open-source (anza na marekebisho ya nyaraka) -- [ ] Fundisha mtu anayeanza safari ya kuandika nambari -- [ ] Tengeneza tovuti yako ya portfolio ya mendelezaji -- [ ] Unganisha na jamii za mendelezaji wa karibu au vikundi vya masomo -- [ ] Anza kupanga lengo lako lijalo la kujifunza - -### 🎯 **Chunguza Mafanikio ya Mwisho** +- [ ] Jiunge na jamii moja ya waendelezaji (Dev.to, Reddit r/webdev, au Stack Overflow) + +### ⏰ **Ni Nini Unaweza Kufanikisha Saa Hii** +- [ ] Maliza mtihani wa baada ya somo na tafakari majibu yako +- [ ] Sanidi VS Code na kifungu cha GitHub Copilot +- [ ] Jaribu mfano wa "Hello World" katika lugha 2 za programu mtandaoni +- [ ] Tazama video ya "Siku Maishani mwa Mtaalamu wa Programu" kwenye YouTube +- [ ] Anza kazi yako ya kuwa mpelelezi wa lugha za programu (kutoka changamoto) + +### 📅 **Mchezo Wako wa Wiki Nzima** +- [ ] Maliza kazi ya nyumbani na chunguza zana 3 mpya za maendeleo +- [ ] Fuata waendelezaji au akaunti za programu 5 kwenye mitandao ya kijamii +- [ ] Jaribu kujenga kitu kidogo ndani ya CodePen au Replit (hata "Hello, [Jina Lako]!" tu) +- [ ] Soma chapisho moja la blogu la mtaalamu kuhusu safari yao ya kuandika programu +- [ ] Jiunge na mkutano wa mtandaoni au tazama hotuba ya programu +- [ ] Anza kujifunza lugha uliyochagua kwa mafunzo ya mtandaoni + +### 🗓️ **Mabadiliko Yako kwa Mwezi Mzima** +- [ ] Tengeneza mradi wako mdogo wa kwanza (hata ukurasa wa wavuti rahisi unahesabiwa!) +- [ ] Changia kwenye mradi wa chanzo wazi (anza na marekebisho ya nyaraka) +- [ ] Mwelekeze mtu anayeanza safari yake ya programu +- [ ] Tengeneza tovuti yako ya wasifu wa mtaalamu wa programu +- [ ] Ungana na jumuiya za waendelezaji wa mtaa au vikundi vya kusoma +- [ ] Anza kupanga hatua zako zinazofuata za kujifunza + +### 🎯 **Ukaguzi wa Mwisho wa Tafakari** **Kabla hujaendelea, chukua muda kusherehekea:** -- Ni jambo gani moja kuhusu kuandika nambari lililokufurahisha leo? -- Ni zana au dhana gani unataka kuchunguza kwanza? -- Unajisikia vipi kuanza safari hii ya programu? -- Ni swali gani moja ungependa kumuuliza mendelezaji sasa hivi? +- Ni jambo gani moja kuhusu programu lililokusisimua leo? +- Ni zana au dhana gani ungependa kuchunguza kwanza? +- Unajisikiaje kuanza safari hii ya programu? +- Ni swali gani ungependa kumuuliza mtaalamu wa programu sasa hivi? ```mermaid journey @@ -844,11 +845,11 @@ journey Confident: 5: You Helping Others: 5: You ``` -> 🌟 **Kumbuka**: Kila mtaalamu alikuwa mwanzoni. Kila mendelezaji mkuu alikuwa akijihisi kama unavyohisi sasa – msisimko, labda kidogo kupotea, na kila wakati na hamu kujua ni nini kinachowezekana. Uko katika kampuni nzuri sana, na safari hii itakuwa ya kushangaza. Karibu katika dunia ya ajabu ya programu! 🎉 +> 🌟 **Kumbuka**: Kila mtaalamu alikuwa mwanzoni mwanzo. Kila mtaalamu mzee alikuwa akihisi kama wewe sasa – msisimko, labda kidogo kuchanganyikiwa, na waziwazi na hamu ya kujua kile kinachowezekana. Upo katika kampuni bora, na safari hii itakuwa ya kushangaza. Karibu katika ulimwengu mzuri wa programu! 🎉 --- -**Taarifa ya Kukataa**: -Nyaraka hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamuni kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro za usahihi. Nyaraka asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha uthibitisho. Kwa taarifa muhimu, tafsiri ya mtaalamu wa lugha inashauriwa. Sisi hatuwajibiki kwa maelewano mabaya au tafsiri zisizofaa zinazotokana na matumizi ya tafsiri hii. +**Onyo**: +Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro. Hati ya asili katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatubebei jukumu lolote kwa kutoelewana au tafsiri potofu zinazotokana na matumizi ya tafsiri hii. \ No newline at end of file diff --git a/translations/sw/AGENTS.md b/translations/sw/AGENTS.md index 9bf550522..f98f09c44 100644 --- a/translations/sw/AGENTS.md +++ b/translations/sw/AGENTS.md @@ -2,27 +2,27 @@ ## Muhtasari wa Mradi -Hii ni hifadhidata ya mtaala wa elimu kwa kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala ni kozi kamilifu ya wiki 12 iliyotengenezwa na Wakili wa Wingu wa Microsoft, ukiwa na masomo 24 ya vitendo yanayohusisha JavaScript, CSS, na HTML. +Hii ni hifadhidata ya mtaala wa kielimu kwa kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala huu ni kozi kamili ya wiki 12 iliyotengenezwa na Wakili wa Microsoft Cloud, ikiwa na masomo 24 ya vitendo yanayohusisha JavaScript, CSS, na HTML. -### Vipengele Muhimu +### Sehemu Muhimu -- **Yaliyomo ya Kielimu**: Masomo 24 yaliyoandaliwa kwa muundo wa miradi -- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kuandika, Kiendelezi cha Kivinjari, Mchezo wa Anga, App ya Benki, Mhariri wa Nambari, na Msaidizi wa Chat wa AI -- **Mitihani ya Kuingiliana**: Mitihani 48 yenye maswali 3 kila moja (uchunguzi kabla/baada ya somo) +- **Maudhui ya Kielimu**: Masomo 24 yaliyopangwa katika moduli za miradi +- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kutaipa, Kiongezi cha Kivinjari, Mchezo wa Anga, Programu ya Benki, Mhariri wa Msimbo, na Msaidizi wa Mazungumzo wa AI +- **Mitozo ya Kuingiliana**: Mitozo 48 yenye maswali 3 kila mmoja (vipimo kabla/baada ya somo) - **Msaada wa Lugha Nyingi**: Tafsiri za kiotomatiki kwa lugha 50+ kupitia GitHub Actions - **Teknolojia**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (kwa miradi ya AI) -### Muundo +### Miundo -- Hifadhidata ya kielimu yenye muundo wa somo +- Hifadhidata ya kielimu yenye muundo wa masomo - Kila folda ya somo ina README, mifano ya msimbo, na suluhisho -- Miradi huru katika folda tofauti (quiz-app, miradi mbalimbali ya somo) +- Miradi huru katika folda tofauti (quiz-app, miradi mbalimbali ya masomo) - Mfumo wa tafsiri ukitumia GitHub Actions (co-op-translator) -- Nyaraka hutolewa kupitia Docsify na zinapatikana kama PDF +- Hati hutolewa kupitia Docsify na zinapatikana pia kama PDF ## Amri za Kuanzisha -Hifadhidata hii ni kwa lengo la matumizi ya yaliyomo kielimu. Kwa kazi na miradi maalum: +Hifadhidata hii ni kwa ajili ya matumizi ya maudhui ya kielimu hasa. Kwa kufanya kazi na miradi maalum: ### Kuanzisha Hifadhidata Kuu @@ -31,7 +31,7 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Kuanzisha Quiz App (Vue 3 + Vite) +### Kuanzisha App ya Mitozo (Vue 3 + Vite) ```bash cd quiz-app @@ -48,15 +48,15 @@ cd 7-bank-project/api npm install npm start # Anza seva ya API npm run lint # Endesha ESLint -npm run format # Panga kwa Prettier +npm run format # Panga na Prettier ``` -### Miradi ya Kiendelezi cha Kivinjari +### Miradi ya Kiongezi cha Kivinjari ```bash cd 5-browser-extension/solution npm install -# Fuata maelekezo ya upakiaji wa programu-jalizi maalum za kivinjari +# Fuata maelekezo ya kupakia viendelezi maalum kwa kivinjari ``` ### Miradi ya Mchezo wa Anga @@ -64,10 +64,10 @@ npm install ```bash cd 6-space-game/solution npm install -# Fungua index.html katika kivinjari au tumia Live Server +# Fungua index.html kwenye kivinjari au tumia Live Server ``` -### Mradi wa Chat (Python Backend) +### Mradi wa Mazungumzo (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -78,114 +78,114 @@ python api.py ## Mtiririko wa Maendeleo -### Kwa Wasaidizi wa Maudhui +### Kwa Wachangia Maudhui -1. **Fungua 'fork' ya hifadhidata** kwenye akaunti yako ya GitHub -2. **Nakili fork yako** ndani ya kompyuta +1. **Fungua hifadhidata** kwenye akaunti yako ya GitHub +2. **Nakili hifadhidata ya macho** kwa kompyuta yako 3. **Tengeneza tawi jipya** kwa mabadiliko yako -4. Fanya mabadiliko kwa yaliyomo ya somo au mifano ya msimbo -5. Jaribu mabadiliko yoyote ya msimbo katika folda zinazohusiana za mradi -6. Wasilisha mahitaji ya kusukuma ikifuata miongozo ya michango +4. Fanya mabadiliko kwa maudhui ya somo au mifano ya msimbo +5. Jaribu mabadiliko yoyote ya msimbo katika folda husika za miradi +6. Wasilisha ombi la kuunganisha (pull request) ukizingatia miongozo ya mchango ### Kwa Wanafunzi -1. Fikia 'fork' au nakili hifadhidata -2. Tembea folda za masomo kwa mfuatano -3. Soma faili za README kwa kila somo -4. Kamilisha mitihani ya kabla ya somo kwenye https://ff-quizzes.netlify.app/web/ -5. Fanya kazi kupitia mifano ya msimbo kwenye folda za masomo +1. Fungua au nakili hifadhidata +2. Vuka kwenye folda za somo mfululizo +3. Soma faili za README za kila somo +4. Kamilisha mitihani kabla ya somo katika https://ff-quizzes.netlify.app/web/ +5. Fanya kazi na mifano ya msimbo katika folda za masomo 6. Kamilisha majukumu na changamoto -7. Fanya mitihani ya baada ya somo +7. Fanya mitihani baada ya somo ### Maendeleo ya Moja kwa Moja -- **Nyaraka**: Endesha `docsify serve` kwenye mzizi (bandari 3000) -- **Quiz App**: Endesha `npm run dev` kwenye folda ya quiz-app -- **Miradi**: Tumia VS Code Live Server kwa miradi ya HTML -- **Miradi ya API**: Endesha `npm start` kwenye folda husika za API +- **Nyaraka**: Endesha `docsify serve` kutoka mzizi (bandari 3000) +- **App ya Mitozo**: Endesha `npm run dev` katika folda ya quiz-app +- **Miradi**: Tumia ugani wa VS Code Live Server kwa miradi ya HTML +- **Miradi ya API**: Endesha `npm start` katika folda husika za API -## Maelekezo ya Upimaji +## Maelekezo ya Kupima -### Upimaji wa Quiz App +### Kupima App ya Mitozo ```bash cd quiz-app npm run lint # Angalia matatizo ya mtindo wa msimbo -npm run build # Thibitisha ujenzi unafanikiwa +npm run build # Hakiki ujenzi unafanikiwa ``` -### Upimaji wa API ya Benki +### Kupima API ya Benki ```bash cd 7-bank-project/api npm run lint # Angalia matatizo ya mtindo wa msimbo -node server.js # Thibitisha server inaanza bila makosa +node server.js # Hakiki seva inaanza bila makosa ``` -### Mbinu ya Upimaji kwa Juu +### Njia ya Kupima kwa Ujumla -- Hii ni hifadhidata ya elimu bila majaribio ya kiotomatiki ya kina -- Upimaji wa mkono unazingatia: - - Mifano ya msimbo inatimia bila makosa - - Viungo kwenye nyaraka vinatumika ipasavyo - - Ujenzi wa mradi hufanyika kwa mafanikio - - Mifano inafuata mbinu bora +- Hii ni hifadhidata ya kielimu bila vipimo vya kiotomatiki kwa kina +- Ukaguzi wa mkono unalenga: + - Mifano ya msimbo ifanyike bila makosa + - Viungo katika nyaraka vifanye kazi ipasavyo + - Ujenzi wa miradi ukamilike bila matatizo + - Mifano ifuatane na mbinu bora -### Ukaguzi wa Kabla ya Kuwasilisha +### Ukaguzi Kabla ya Kuwasilisha - Endesha `npm run lint` katika folda zenye package.json -- Hakiki viungo vya markdown ni sahihi -- Jaribu mifano ya msimbo katika kivinjari au Node.js -- Angalia tafsiri zinahifadhi muundo mzuri +- Hakiki viungo vya markdown +- Jaribu mifano ya msimbo kwenye kivinjari au Node.js +- Hakiki tafsiri ziendelee na muundo sahihi ## Miongozo ya Mtindo wa Msimbo ### JavaScript -- Tumia sintaksia ya kisasa ya ES6+ -- Fuata usanidi wa ESLint uliowekwa katika miradi -- Tumia majina ya maana kwa mabadiliko na kazi kwa ufafanuzi wa kielimu +- Tumia msimbo wa kisasa ES6+ +- Fuata mipangilio ya ESLint iliyopewa katika miradi +- Tumia majina yenye maana kwa mabadiliko na kazi kwa ufafanuzi wa kielimu - Ongeza maelezo kuelezea dhana kwa wanafunzi -- Panga kwa Prettier pale panapopangizwa +- Panga msimbo kwa Prettier pale panapopangwa ### HTML/CSS -- Vipengele vya semantic vya HTML5 -- Kanuni za muundo unaobadilika (responsive) -- Mazingira ya majina ya darasa yaliyobainishwa wazi -- Maelezo ya mbinu za CSS kwa wanafunzi +- Matumizi ya vipengele vya semantic HTML5 +- Kanuni za muundo unaojibadilisha (responsive design) +- Mamlaka ya jina la daraja kwa uwazi +- Maelezo yanayoelezea mbinu za CSS kwa wanafunzi ### Python - Miongozo ya mtindo wa PEP 8 -- Mifano wazi, ya kielimu -- Vidokezo vya aina walivyonufaika na kujifunza +- Mifano wazi, ya kielimu ya msimbo +- Maelezo ya aina (type hints) mahali panaposaidia kujifunza ### Nyaraka za Markdown -- Hieraki ya vichwa vya habari -- Sehemu za msimbo zenye lugha -- Viungo vya rasilimali za ziada -- Picha na manyumbulizo kwenye folda za `images/` -- Nyaraka za alt kwa picha kwa upatikanaji +- Mipangilio wazi ya vichwa vya habari +- Vipande vya msimbo vyenye ufafanuzi wa lugha +- Viungo kwa rasilimali za ziada +- Picha na skrini katika folda za `images/` +- Maelezo ya alt kwa picha kwa upatikanaji ### Mpangilio wa Faili -- Masomo namba mfuatano (1-getting-started-lessons, 2-js-basics, n.k) -- Mradi wowote una folda za `solution/` na mara nyingi `start/` au `your-work/` -- Picha huhifadhiwa katika folda maalum za masomo `images/` -- Tafsiri katika muundo wa `translations/{language-code}/` +- Masomo yamepangiwa nambari mfululizo (1-getting-started-lessons, 2-js-basics, n.k.) +- Kila mradi una folda za `solution/` na mara nyingi `start/` au `your-work/` +- Picha zinahifadhiwa katika folda za somo maalum `images/` +- Tafsiri zinapatikana katika muundo wa `translations/{language-code}/` ## Ujenzi na Uenezaji -### Uenezaji wa Quiz App (Azure Static Web Apps) +### Uenezaji wa App ya Mitozo (Azure Static Web Apps) -quiz-app imepangiliwa kwa uenezaji wa Azure Static Web Apps: +App ya quiz imewekwa kwa ajili ya uenezaji wa Azure Static Web Apps: ```bash cd quiz-app npm run build # Inaunda folda ya dist/ -# Inaweka kupitia mtiririko wa kazi wa GitHub Actions wakati wa kusukuma kwenye main +# Inaendesha kupitia mtiririko wa GitHub Actions wakati wa kusukuma kwenye main ``` Mipangilio ya Azure Static Web Apps: @@ -193,17 +193,17 @@ Mipangilio ya Azure Static Web Apps: - **Mahali pa Matokeo**: `dist` - **Mtiririko wa Kazi**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Uundaji wa PDF za Nyaraka +### Kutengeneza PDF ya Nyaraka ```bash -npm install # Sanidi docsify-to-pdf +npm install # Sakinisha docsify-to-pdf npm run convert # Tengeneza PDF kutoka kwa docs ``` ### Nyaraka za Docsify ```bash -npm install -g docsify-cli # Sakinisha Docsify kwa ulimwengu mzima +npm install -g docsify-cli # Sakinisha Docsify kote docsify serve # Hudumia kwenye localhost:3000 ``` @@ -211,72 +211,72 @@ docsify serve # Hudumia kwenye localhost:3000 Kila folda ya mradi inaweza kuwa na mchakato wake wa ujenzi: - Miradi ya Vue: `npm run build` huunda vifurushi vya uzalishaji -- Miradi ya static: Hakuna hatua ya ujenzi, tengeneza faili moja kwa moja +- Miradi ya statiki: Hakuna hatua ya kujenga, anuguza faili moja kwa moja -## Miongozo ya Ombi la Kujoshea (Pull Request) +## Miongozo ya Maombi ya Kuunganisha ### Muundo wa Kichwa -Tumia vichwa wazi na vinaonesha eneo la mabadiliko: +Tumia vichwa wazi, vinavyoelezea sehemu ya mabadiliko: - `[Quiz-app] Ongeza mtihani mpya kwa somo X` -- `[Lesson-3] Rekebisha kosa la tahajia katika mradi wa terrarium` +- `[Lesson-3] Rekebisha tahajia katika mradi wa terrarium` - `[Translation] Ongeza tafsiri ya Kihispania kwa somo 5` - `[Docs] Sasisha maelekezo ya kuanzisha` -### Uchunguzi Unaohitajika +### Ukaguzi Unaotakiwa Kabla ya kuwasilisha PR: 1. **Ubora wa Msimbo**: - - Endesha `npm run lint` katika folda za miradi zilizohusika + - Endesha `npm run lint` katika folda za miradi zilizoathirika - Rekebisha makosa na onyo zote za lint -2. **Uhakiki wa Ujenzi**: +2. **Thibitisha Ujenzi**: - Endesha `npm run build` inapohitajika - Hakikisha hakuna makosa ya ujenzi -3. **Uhakiki wa Viungo**: +3. **Thibitisha Viungo**: - Jaribu viungo vyote vya markdown - - Thibitisha marejeleo ya picha yanatumika + - Thibitisha marejeleo ya picha yanafanya kazi -4. **Mapitio ya Maudhui**: - - Soma kwa usahihi ya tahajia na sarufi +4. **Uhakiki wa Maudhui**: + - Soma kwa tahajia na sarufi - Hakikisha mifano ya msimbo ni sahihi na ya kielimu - - Hakikisha tafsiri zinahifadhi maana asili + - Thibitisha tafsiri zinadumisha maana halisi -### Mahitaji ya Michango +### Mahitaji ya Mchango - Kubali Microsoft CLA (ukaguzi wa kiotomatiki kwenye PR ya kwanza) - Fuata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Angalia [CONTRIBUTING.md](./CONTRIBUTING.md) kwa miongozo kamili -- Rejelea nambari za masuala katika maelezo ya PR kama zinahusika +- Tazama [CONTRIBUTING.md](./CONTRIBUTING.md) kwa miongozo kamili +- Taja nambari za masuala kwenye maelezo ya PR inapobidi -### Mchakato wa Mapitio +### Mchakato wa Ukaguzi -- PR hupitiwa na wasimamizi na jamii -- Uwazi wa elimu unaheshimiwa -- Mifano ya msimbo inapaswa kufuata mbinu bora za sasa -- Tafsiri hupitiwa kwa usahihi na utamaduni unaofaa +- PR hukaguliwa na watunzaji na jamii +- Uwafafanuzi wa kielimu unazingatiwa zaidi +- Mifano ya msimbo ifuatane na mbinu bora za sasa +- Tafsiri hurejelewa kwa usahihi na muafaka wa kitamaduni ## Mfumo wa Tafsiri ### Tafsiri ya Kiotomatiki - Inatumia GitHub Actions na mtiririko wa co-op-translator -- Hutoa tafsiri kwa lugha zaidi ya 50 kiotomatiki -- Faili za asili ziko katika folda kuu -- Faili za tafsiri ziko `translations/{language-code}/` +- Hufasiri kwa lugha 50+ moja kwa moja +- Faili chanzo ziko kwenye folda kuu +- Faili zilizotafsiriwa ziko katika `translations/{language-code}/` ### Kuongeza Maboresho ya Tafsiri ya Mkono 1. Tafuta faili katika `translations/{language-code}/` -2. Fanya maboresho huku ukihifadhi muundo -3. Hakikisha mifano ya msimbo inabaki kazi -4. Jaribu maudhui ya mtihani uliobadilishwa kwa lugha husika +2. Fanya maboresho bila kubadilisha muundo +3. Hakikisha mifano ya msimbo bado inafanya kazi +4. Jaribu maudhui ya mtihani yaliyobinafsishwa ### Metadata ya Tafsiri -Faili za tafsiri zina kiambatisho cha metadata: +Faili zilizotafsiriwa zina kichwa cha metadata: ```markdown ``` -## Ufungaji na Utatuzi wa Matatizo +## Ugunduzi na Urekebishaji ### Masuala ya Kawaida -**Quiz app haianzi**: -- Angalia toleo la Node.js (v14+ inashauriwa) +**App ya mitihani haianzi**: +- Angalia toleo la Node.js (v14+ linapendekezwa) - Futa `node_modules` na `package-lock.json`, endesha tena `npm install` - Angalia migongano ya bandari (kawaida: Vite hutumia bandari 5173) -**Server ya API haianzi**: -- Thibitisha toleo la Node.js linakidhi (node >=10) +**Seva ya API haianzi**: +- Hakiki toleo la Node.js kuwa la chini kabisa (node >=10) - Angalia kama bandari tayari inatumika -- Hakikisha utegemezi wote umewekwa kwa `npm install` +- Hakikisha tegemezi zote zimesakinishwa kwa `npm install` -**Kiendelezi cha kivinjari hakifungui**: -- Thibitisha manifest.json imeandikwa vizuri -- Angalia console ya kivinjari kwa makosa -- Fuata maelekezo maalum ya usakinishaji wa kiendelezi cha kivinjari +**Kiongezi cha kivinjari hakifanyi kazi**: +- Hakikisha manifest.json imeandikwa vizuri +- Angalia makosa kwenye konsole ya kivinjari +- Fuata maelekezo ya usakinishaji ya kivinjari husika -**Matatizo ya mradi wa chat wa Python**: -- Hakikisha kifurushi cha OpenAI kimesakinishwa: `pip install openai` -- Thibitisha GITHUB_TOKEN imewekwa kwa mazingira -- Angalia ruhusa za kupata GitHub Models +**Masuala ya mradi wa mazungumzo ya Python**: +- Hakikisha kifurushi cha OpenAI kimesanikishwa: `pip install openai` +- Hakiki mazingira ya GITHUB_TOKEN yamewekwa +- Angalia ruhusa za upatikanaji wa GitHub Models -**Docsify haionyeshi nyaraka**: -- Sakinisha docsify-cli kimataifa: `npm install -g docsify-cli` -- Endesha kutoka folda ya mzizi ya hifadhidata -- Hakiki kuwepo kwa `docs/_sidebar.md` +**Docsify haileti nyaraka**: +- Sakinisha docsify-cli ulimwenguni: `npm install -g docsify-cli` +- Endesha kutoka folda ya hifadhidata mzizi +- Hakiki kuwa `docs/_sidebar.md` ipo ### Vidokezo vya Mazingira ya Maendeleo -- Tumia VS Code yenye upanuzi wa Live Server kwa miradi ya HTML -- Sakinisha upanuzi wa ESLint na Prettier kwa muundo thabiti -- Tumia zana za DevTools za kivinjari kutatua masuala ya JavaScript -- Kwa miradi ya Vue, sakinisha upanuzi wa Vue DevTools wa kivinjari +- Tumia VS Code na ugani wa Live Server kwa miradi ya HTML +- Sakinisha ugani za ESLint na Prettier kwa panga msimbo mzuri +- Tumia DevTools za kivinjari kwa kufuatilia JavaScript +- Kwa miradi ya Vue, install ugani wa Vue DevTools wa kivinjari -### Mambo ya Kuangalia Utendaji +### Mambo ya Kufikiria Kuhusu Utendaji -- Idadi kubwa ya faili za tafsiri (lugha 50+) maana clones kamili zina ukubwa mkubwa -- Tumia clone dhaifu ukifanya kazi tu na yaliyomo: `git clone --depth 1` -- Epuka tafutiza tafsiri unapotaka kufanya kazi na maudhui ya Kiingereza -- Mchakato wa ujenzi unaweza kuchukua muda kwenye mwanzoni (npm install, ujenzi Vite) +- Idadi kubwa ya faili zilizotafsiriwa (lugha 50+) husababisha nakala nzito +- Tumia shallow clone kama unafanya kazi tu na maudhui: `git clone --depth 1` +- Zuia tafsiri katika utafutaji unapotumia maudhui ya Kiingereza +- Mchakato wa ujenzi unaweza kuwa polepole mara ya kwanza (npm install, ujenzi wa Vite) ## Masuala ya Usalama -### Vigezo vya Mazingira +### Mabadiliko ya Mazingira -- Funguo za API hazipaswi kuwekwa kwenye hifadhidata -- Tumia faili za `.env` (zimenaswa katika `.gitignore`) -- Eleza vigezo vya mazingira vinavyohitajika katika README za miradi +- Funguo za API hazipaswi kuwekwa hifadhidatani +- Tumia faili za `.env` (siku hizi ziko `.gitignore`) +- Elezea mabadiliko ya mazingira yanayohitajika kwenye README za miradi ### Miradi ya Python -- Tumia mazingira ya kudanganya (virtual environments): `python -m venv venv` -- Sasisha utegemezi mara kwa mara -- Tokeni za GitHub ziwe na ruhusa ndogo inayohitajika +- Tumia mazingira ya mtandao wa virtual: `python -m venv venv` +- Sasisha tegemezi mara kwa mara +- Tokeni za GitHub ziwe na idhini kidogo inayohitajika -### Kufikia GitHub Models +### Upatikanaji wa GitHub Models -- Tokeni za Ufikiaji wa Kibinafsi (PAT) zinahitajika kwa GitHub Models -- Tokeni zihifadhiwe kama vigezo vya mazingira -- Usiwekee tokeni au nyaraka kwenye hifadhidata +- Tokens za Upatikanaji wa Kibinafsi (PAT) zinahitajika kwa GitHub Models +- Tokens ziwekewe kama mabadiliko ya mazingira (environment variables) +- Usiweze kuweka tokens au nyaraka za usalama hifadhidatani ## Vidokezo Zaidi ### Walengwa -- Wanaoanza kabisa kwenye maendeleo ya wavuti +- Wanaoanza kabisa katika maendeleo ya wavuti - Wanafunzi na wanaojifunza peke yao - Walimu wanaotumia mtaala darasani -- Yaliyomo yameundwa kwa njia inayofanikisha upatikanaji na kujifunza hatua kwa hatua +- Maudhui yameundwa kwa upatikanaji na uelekezaji wa hatua kwa hatua ### Falsafa ya Elimu -- Njia ya kujifunza kupitia miradi -- Mikakati ya mara kwa mara ya kukagua maarifa (mitihani) -- Mazoezi ya vitendo vya uandishi wa msimbo -- Mifano halisi ya matumizi -- Kuzingatia misingi kabla ya mifumo ya kazi (frameworks) +- Mbinu ya kujifunza kwa miradi +- Ukaguzi wa mara kwa mara wa maarifa (mitihani) +- Mazoezi ya msimbo ya vitendo +- Mifano halisi ya utekelezaji +- Lengo la msingi kabla ya majukwaa -### Usimamizi wa Hifadhidata +### Matunzo ya Hifadhidata -- Jamii hai ya wanafunzi na wasaidizi -- Sasisho la mara kwa mara la utegemezi na yaliyomo -- Masuala na majadiliano yanadhibitiwa na wasimamizi -- Sasisho za tafsiri kwa kutumia GitHub Actions kiotomatiki +- Jamii hai ya wanafunzi na wachangiaji +- Sasisho la mara kwa mara kwa tegemezi na maudhui +- Masuala na mijadala ikifuatiliwa na watunzaji +- Sasisho za tafsiri kwa njia ya kiotomatiki kupitia GitHub Actions ### Rasilimali Zinazohusiana -- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Moduli za Microsoft Learn](https://docs.microsoft.com/learn/) - [Rasilimali za Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inayopendekezwa kwa wanafunzi -- Kozi za ziada: AI ya Kutengeneza, Sayansi ya Data, ML, kozi za IoT zinapatikana +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inapendekezwa kwa wanaojifunza +- Kozi za ziada: AI ya Asili, Sayansi ya Takwimu, ML, na mtaala wa IoT zinapatikana -### Kazi na Miradi Maalum +### Kufanya Kazi na Miradi Maalum -Kwa maelekezo ya kina kuhusu miradi binafsi, rejelea faili za README katika: -- `quiz-app/README.md` - Programu ya quiz ya Vue 3 +Kwa maelekezo ya kina juu ya miradi binafsi, rejelea faili za README katika: +- `quiz-app/README.md` - Programu ya mtihani ya Vue 3 - `7-bank-project/README.md` - Programu ya benki yenye uthibitishaji -- `5-browser-extension/README.md` - Maendeleo ya kiendelezi cha kivinjari -- `6-space-game/README.md` - Maendeleo ya mchezo wa Canvas -- `9-chat-project/README.md` - Mradi wa msaidizi wa chat AI +- `5-browser-extension/README.md` - Ukuaji wa kiongezi cha kivinjari +- `6-space-game/README.md` - Ukuaji wa mchezo wa Canvas +- `9-chat-project/README.md` - Mradi wa msaidizi wa mazungumzo wa AI ### Muundo wa Monorepo -Ingawa sio monorepo ya kawaida, hifadhidata hii ina miradi kadhaa huru: -- Kila somo lina muundo wake -- Miradi haishiriki utegemezi +Ingawa si monorepo ya kawaida, hifadhidata hii ina miradi huru mingi: +- Kila somo ni huru +- Miradi haiungi mkono tegemezi zao - Fanya kazi kwenye miradi binafsi bila kuathiri mingine -- Nakili hifadhidata nzima kwa uzoefu kamili wa mtaala +- Nakili hifadhidata yote kwa uzoefu kamili wa mtaala --- -**Kipengele cha Kutolewa Wajibu**: -Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za moja kwa moja zinaweza kuwa na makosa au usahihi mdogo. Hati ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya mtaalamu wa binadamu inapendekezwa. Hatuwezi kuwajibika kwa kutoelewana au tafsiri potovu zinazotokana na matumizi ya tafsiri hii. +**Kiarifu cha Kutokujali**: +Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali kumbuka kuwa tafsiri za moja kwa moja zinaweza kuwa na makosa au upungufu wa usahihi. Hati ya asili katika lugha yake ya mama inapaswa kuchukuliwa kama chanzo halali. Kwa taarifa muhimu, tafsiri ya mtaalamu wa kibinadamu inapendekezwa. Hatutawajibika kwa changamoto au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii. \ No newline at end of file diff --git a/translations/sw/README.md b/translations/sw/README.md index 12a1025f5..f5d774072 100644 --- a/translations/sw/README.md +++ b/translations/sw/README.md @@ -1,61 +1,71 @@ [![Leseni ya GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![Wachangiaji wa GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![Wadau wa GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![Masuala ya GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![Maombi ya pull ya GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![Karibu PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![Maombi ya kuvuta GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Karibu](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![Watazamaji wa GitHub](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/) -[![Machota ya GitHub](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/) +[![Watalii wa GitHub](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/) +[![Matawi ya GitHub](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/) [![Nyota za GitHub](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/) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) # Maendeleo ya Wavuti kwa Waanzilishi - Mtaala -Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu ya kina ya wiki 12 inayotolewa na Wakili wa Wingu wa Microsoft. Kila somo kati ya 24 linaingia kwa undani katika JavaScript, CSS, na HTML kwa mradi wa vitendo kama vile terrariums, nyongeza za kivinjari, na michezo ya anga. Shirikiana na maswali, mijadala, na kazi za vitendo. Boreshaji ujuzi wako na kuimarisha ufahamu wako kwa njia yetu bora ya kufundisha inayozingatia miradi. Anza safari yako ya kuprogramu leo! +Jifunze misingi ya maendeleo ya wavuti na kozi yetu kamili ya wiki 12 iliyotolewa na Microsoft Cloud Advocates. Kila somo kati ya 24 linachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama vile terrariums, virutubisho vya kivinjari, na michezo ya anga. Shirikiana na vipimo, mijadala, na waraka wa vitendo. Boresha ujuzi wako na boresha ufahamu wako kwa mbinu bora ya kujifunza kupitia miradi. Anza safari yako ya kuweka nambari leo! -Jiunge na Jamii ya Discord ya Azure AI Foundry +Jiunge na Jumuiya ya Azure AI Foundry Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Fuata hatua hizi kuanza kutumia rasilimali hizi: -1. **Chimba Hifadhi**: Bonyeza [![Machota ya GitHub](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. **Nakili Hifadhi**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Jiunge na Discord ya Azure AI Foundry na ukutane na wataalamu na wapenzi wa maendeleo**](https://discord.com/invite/ByRwuEEgH4) +1. **Fagia Repository**: Bonyeza [![Matawi ya GitHub](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. **Nakili Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Jiunge na Azure AI Foundry Discord na ukutane na wataalamu na wajasiliamali wenzako**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Msaada wa Lugha Nyingi -#### Unaungwa mkono kupitia Kitendo cha GitHub (Kiotomatiki & Kila Mara Kisivyocha) +#### Umahiri kupitia Hatua za GitHub (Moja kwa moja & Daima Sasishwa) -[Kiarabu](../ar/README.md) | [Kibengali](../bn/README.md) | [Kibulgaria](../bg/README.md) | [Kiburma (Myanmar)](../my/README.md) | [Kichina (Rahisi)](../zh-CN/README.md) | [Kichina (Marefu, Hong Kong)](../zh-HK/README.md) | [Kichina (Marefu, Macau)](../zh-MO/README.md) | [Kichina (Marefu, Taiwan)](../zh-TW/README.md) | [Kikroeshia](../hr/README.md) | [Kicheki](../cs/README.md) | [Kideni](../da/README.md) | [Kiholanzi](../nl/README.md) | [Kiestoniani](../et/README.md) | [Kifini](../fi/README.md) | [Kifaransa](../fr/README.md) | [Kijerumani](../de/README.md) | [Kigiriki](../el/README.md) | [Kiheberi](../he/README.md) | [Kihindi](../hi/README.md) | [Kihungari](../hu/README.md) | [Kiindonesia](../id/README.md) | [Kitaliano](../it/README.md) | [Kijapani](../ja/README.md) | [Kikannada](../kn/README.md) | [Kikorea](../ko/README.md) | [Kilithuania](../lt/README.md) | [Kimelayu](../ms/README.md) | [Kimalayalam](../ml/README.md) | [Kimarathi](../mr/README.md) | [Kinepali](../ne/README.md) | [Pidgin ya Nijeria](../pcm/README.md) | [Kinorwe](../no/README.md) | [Kiajemi (Farsi)](../fa/README.md) | [Kipolandi](../pl/README.md) | [Kireno (Brazil)](../pt-BR/README.md) | [Kireno (Ureno)](../pt-PT/README.md) | [Kipunabi (Gurmukhi)](../pa/README.md) | [Kiromania](../ro/README.md) | [Kirusi](../ru/README.md) | [Kiserbia (Sirilik)](../sr/README.md) | [Kislovakia](../sk/README.md) | [Kislovenia](../sl/README.md) | [Kihispania](../es/README.md) | [Kiswahili](./README.md) | [Kiswidi](../sv/README.md) | [Kitagalogi (Filipino)](../tl/README.md) | [Kitamili](../ta/README.md) | [Kitelugu](../te/README.md) | [Kithai](../th/README.md) | [Kituruki](../tr/README.md) | [Kiukrania](../uk/README.md) | [Kiurdu](../ur/README.md) | [Kivietinamu](../vi/README.md) +[Kiarabu](../ar/README.md) | [Kibangla](../bn/README.md) | [Kibelgaria](../bg/README.md) | [Kirumi (Myanmar)](../my/README.md) | [Kichina (Rahisi)](../zh-CN/README.md) | [Kichina (Mila, Hong Kong)](../zh-HK/README.md) | [Kichina (Mila, Macau)](../zh-MO/README.md) | [Kichina (Mila, Taiwan)](../zh-TW/README.md) | [Kroatia](../hr/README.md) | [Kicheki](../cs/README.md) | [Kidenmaki](../da/README.md) | [Kiholanzi](../nl/README.md) | [Kiestonia](../et/README.md) | [Kifini](../fi/README.md) | [Kifaransa](../fr/README.md) | [Kijerumani](../de/README.md) | [Kigiriki](../el/README.md) | [Kiebrania](../he/README.md) | [Kihindi](../hi/README.md) | [Kihungari](../hu/README.md) | [Kihindonesia](../id/README.md) | [Kiitaliano](../it/README.md) | [Kijapani](../ja/README.md) | [Kikannada](../kn/README.md) | [Kikorea](../ko/README.md) | [Kilithuania](../lt/README.md) | [Kimalay](../ms/README.md) | [Kimalayalam](../ml/README.md) | [Kimarathi](../mr/README.md) | [Kinepali](../ne/README.md) | [Kipidgin cha Nigeria](../pcm/README.md) | [Kinorwe](../no/README.md) | [Kifarsi (Farsi)](../fa/README.md) | [Kipolandi](../pl/README.md) | [Kireno (Brazil)](../pt-BR/README.md) | [Kireno (Portugal)](../pt-PT/README.md) | [Kipunjabi (Gurmukhi)](../pa/README.md) | [Kiromania](../ro/README.md) | [Kirusi](../ru/README.md) | [Kiserbia (Cyrillic)](../sr/README.md) | [Kislovaki](../sk/README.md) | [Kislovenia](../sl/README.md) | [Kihispania](../es/README.md) | [Kiswahili](./README.md) | [Kiswidi](../sv/README.md) | [Kitagalog (Filipino)](../tl/README.md) | [Kitamili](../ta/README.md) | [Kitelugu](../te/README.md) | [Kitai](../th/README.md) | [Kituruki](../tr/README.md) | [Kiukrania](../uk/README.md) | [Kiurdu](../ur/README.md) | [Kivietinamu](../vi/README.md) -> **Unapendelea Kunakili Moja kwa Moja?** - -> Hifadhi hii ina tafsiri za lugha zaidi ya 50 ambazo huongeza sana ukubwa wa kupakua. Ili kunakili bila tafsiri, tumia sparse checkout: +> **Unapendelea Kukopa Kwenye Kompyuta Yako?** +> +> Hii repository ina jumla ya tafsiri 50+ za lugha ambazo huongeza kiasi cha kupakua. Ili kukopa bila tafsiri, tumia 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' > ``` -> Hii inakupa kila kitu unachohitaji kumaliza kozi kwa download ya kasi zaidi. +> +> **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" +> ``` +> +> Hii itakupa kila kitu unachohitaji kukamilisha kozi kwa upakuaji wa haraka zaidi. -**Ikiwa unataka kuwa na lugha za tafsiri za ziada zinazoungwa mkono zimo [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Ikiwa unataka kuongezwa kwa lugha za tafsiri zinazoungwa mkono zimetajwa [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Fungua katika 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) +[![Fungua katika Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Fungua%20katika%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Je, wewe ni mwanafunzi?_ -Tembelea [**ukurasa wa Kituo cha Wanafunzi**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali kwa wanaoanza, vifurushi vya Wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ni ukurasa unayotaka kuweka alama na kuangalia mara kwa mara tunapo badilisha maudhui kila mwezi. +Tembelea [**ukurasa wa Kituo cha Wanafunzi**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali za waanzilishi, vifurushi vya wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ndio ukurasa unaotaka kuweka alama na kuangalia mara kwa mara tunapobadilisha maudhui kila mwezi. -### 📣 Tangazo - Changamoto mpya za Hali ya Wakala wa GitHub Copilot za kukamilisha! +### 📣 Tangazo - Changamoto Mpya za GitHub Copilot Agent Mode za Kumaliza! -Changamoto mpya imeongezwa, tafuta "Changamoto ya Wakala wa GitHub Copilot 🚀" katika sura nyingi. Hii ni changamoto mpya kwako kumaliza ukitumia GitHub Copilot na hali ya Wakala. Ikiwa hujawahi kutumia hali ya Wakala hapo awali ina uwezo wa si tu kuandika maandishi bali pia kuunda na kuhariri faili, kuendesha amri na zaidi. +Changamoto mpya imeongezwa, tafuta "GitHub Copilot Agent Challenge 🚀" katika sura nyingi. Hiyo ni changamoto mpya kwa ajili yako kukamilisha ukitumia GitHub Copilot na Agent mode. Ikiwa hujawahi kutumia Agent mode hapo awali, ina uwezo wa si tu kuzalisha maandishi bali pia kuunda na kuhariri faili, kuendesha amri zaidi. -### 📣 Tangazo - _Mradi Mpya wa kujenga ukitumia AI ya Kizazi_ +### 📣 Tangazo - _Mradi Mpya wa Kujenga kwa Kutumia AI ya Kizazi_ -Mradi mpya wa Msaidizi wa AI umeongezwa hivi karibuni, angalia [mradi](./9-chat-project/README.md) +Mradi mpya wa Msaidizi wa AI umeongezwa, angalia [mradi](./9-chat-project/README.md) ### 📣 Tangazo - _Mtaala Mpya_ juu ya AI ya Kizazi kwa JavaScript umeachiliwa tu @@ -63,18 +73,18 @@ Usikose mtaala wetu mpya wa AI ya Kizazi! Tembelea [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kuanza! -![Background](../../translated_images/sw/background.148a8d43afde5730.webp) +![Mandhari](../../translated_images/sw/background.148a8d43afde5730.webp) -- Masomo yanayogusa kila kitu kutoka mwanzo hadi RAG. -- Shirikiana na wahusika wa kihistoria ukitumia GenAI na programu yetu ya mwenzaji. -- Hadithi ya kufurahisha na yenye mvuto, utasafiri kwa wakati! +- Masomo yanayohusu kila kitu kutoka misingi hadi RAG. +- Shirikiana na wahusika wa kihistoria ukitumia GenAI na programu yetu ya mshirika. +- Hadithi ya kufurahisha na yenye kuvutia, utasafiri kwa wakati! -![character](../../translated_images/sw/character.5c0dd8e067ffd693.webp) +![husika](../../translated_images/sw/character.5c0dd8e067ffd693.webp) -Kila somo linajumuisha kazi ya kukamilisha, kipimo cha uelewa na changamoto ya kukuongoza katika mada kama: -- Kutoa maagizo na uhandisi wa maagizo -- Uundaji wa programu za maandishi na picha +Kila somo linajumuisha kazi za kumaliza, ukaguzi wa maarifa na changamoto itakayokuongoza kujifunza mada kama: +- Uongozi wa maswali na uhandisi wa maswali +- Uundaji wa programu ya maandishi na picha - Programu za utafutaji Tembelea [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kuanza! @@ -83,130 +93,130 @@ Tembelea [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kuanza ## 🌱 Kuanzia -> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [katika jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Walimu**, tumetoa [mapendekezo baadhi](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yenu [katika jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Wajifunza](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza kwa mtihani wa kabla ya somo na fuata kwa kusoma nyenzo za somo, kukamilisha shughuli mbalimbali na thibitisha uelewa wako kwa mtihani wa baada ya somo. +**[Wanafunzi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na jaribio la kabla ya mhadhara na fuata kwa kusoma nyenzo za mhadhara, kukamilisha shughuli mbalimbali na angalia ufahamu wako na jaribio la baada ya mhadhara. -Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya miradi pamoja! Mijadala inahimizwa katika [jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwa tayari kujibu maswali yako. +Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzao kufanya miradi pamoja! Majadiliano yanahimizwa katika [jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwa inapatikana kujibu maswali yako. -Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa nyenzo za ziada za kujifunzia. +Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa nyenzo zaidi za masomo. ### 📋 Kuweka mazingira yako -Mtaala huu una mazingira ya maendeleo tayari kwa matumizi! Unapoanza unaweza kuchagua kuendesha mtaala huu katika [Codespace](https://github.com/features/codespaces/) (_mazingira ya kivinjari, pasipo hitaji kufunga programu_), au kwa kompyuta yako mwenyewe ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Mtaala huu una mazingira ya maendeleo tayari kufanya kazi! Unapoanza unaweza kuchagua kuendesha mtaala kwenye [Codespace](https://github.com/features/codespaces/) (_eneo la kivinjari lisilo hitaji usakinishaji_), au sokoni kwenye kompyuta yako ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Tengeneza hifadhi yako -Ili kuhifadhi kazi yako kwa urahisi, inashauriwa kutengeneza nakala yako ya hifadhi hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Tumia kiolezo hiki** juu ya ukurasa. Hii itaunda hifadhi mpya katika akaunti yako ya GitHub yenye nakala ya mtaala huu. +#### Unda repository yako +Ili kukuwezesha kuhifadhi kazi yako kwa urahisi, inashauriwa uunde nakala yako mwenyewe ya repository hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Use this template** juu ya ukurasa huu. Hii itaunda repository mpya kwenye akaunti yako ya GitHub na nakala ya mtaala. Fuata hatua hizi: -1. **Chimba Hifadhi**: Bonyeza kitufe cha "Fork" juu-kulia wa ukurasa huu. -2. **Nakili Hifadhi**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Fagia Repository**: Bonyeza kitufe cha "Fork" kilichopo kona ya juu-kulia ya ukurasa huu. +2. **Nakili Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Kuendesha mtaala huu katika Codespace +#### Kuendesha mtaala kwenye Codespace -Katika nakala yako ya hifadhi uliyotengeneza, bonyeza kitufe cha **Code** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya kwako kufanya kazi. +Katika nakala yako ya repository uliyoiunda, bonyeza kitufe cha **Code** na chagua **Open with Codespaces**. Hii itaunda Codespace mpya utakayofanyia kazi. ![Codespace](../../translated_images/sw/createcodespace.0238bbf4d7a8d955.webp) -#### Kuendesha mtaala huu kafaida ya kompyuta yako mwenyewe - -Ili kuendesha mtaala huu kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na zana ya amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Zana za Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za kila chombo ili uchague kinachokufaa zaidi. +#### Kuendesha mtaala sokoni kwenye kompyuta yako -Tunapendekeza kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojengwa ndani. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Ili kuendesha mtaala huu sokoni kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na chombo cha mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Vifaa vya Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za kila chombo ili uchague kinachofaa zaidi kwako. - -1. Nakili hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Code** na kunakili URL: +Mapendekezo yetu ni kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojengwa ndani. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Nakili hazina yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubofya kitufe cha **Code** na kunakili URL: [CodeSpace](./images/createcodespace.png) -Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `` na URL uliyokuwa nayo: + + Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `` na URL uliyoinakili hivi karibuni: ```bash git clone ``` -2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivi kwa kubonyeza **File** > **Open Folder** na kuchagua folda uliyokuwa umeikopa. +2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivyo kwa kubofya **File** > **Open Folder** na kuchagua folda uliyoinakili hivi karibuni. -> Mapendekezo ya nyongeza za Visual Studio Code: + +> Vipengele vya ziada vya Visual Studio Code vinavyopendekezwa: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuangalia ukurasa wa HTML ndani ya Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo kwa haraka +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kutazama ukurasa wa HTML ndani ya Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo haraka zaidi ## 📂 Kila somo linajumuisha: -- sketchnote ya hiari -- video ya ziada ya hiari -- mtihani wa kuandaa kabla ya somo +- sketchnote hiari +- video ya ziada hiari +- mtihani wa kujiandaa kabla ya somo - somo lililoandikwa -- kwa masomo ya mradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi +- kwa masomo yanayohusiana na miradi, mwongozo wa hatua kwa hatua jinsi ya kujenga mradi - ukaguzi wa maarifa - changamoto - usomaji wa ziada - kazi ya nyumbani -- [mtihani wa baada ya somo](https://ff-quizzes.netlify.app/web/) +- [mtihani baada ya somo](https://ff-quizzes.netlify.app/web/) -> **Kumbuka kuhusu mitihani**: Mitihani yote iko katika folda ya Quiz-app, mitihani 48 jumla ya maswali matatu kila moja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/), programu ya mtihani inaweza kuendeshwa kwa ndani au kusambazwa kwenye Azure; fuata maagizo katika folda ya `quiz-app`. +> **Kumbuka kuhusu mitihani**: Mitihani yote ipo katika folda ya Quiz-app, mitihani 48 kwa jumla yenye maswali matatu kila moja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/) programu ya mtihani inaweza kuendeshwa kwa ndani au kuwekwa katika Azure; fuata maelekezo katika folda ya `quiz-app`. ## 🗃️ Masomo | | Jina la Mradi | Dhana Zinazofundishwa | Malengo ya Kujifunza | Somo Linalohusiana | Mwandishi | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Kuanzisha | Utangulizi wa Uprogramu na Zana za Kazi | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Kuanzisha | Misingi ya GitHub, ikiwa ni pamoja na kufanya kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa chanzo | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Kuanzisha | Ufikivu | Jifunze misingi ya ufikivu wa wavuti | [Misingi ya Ufikivu](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 01 | Kuanzisha | Utangulizi wa Programu na Zana za Kazi | Jifunze msingi wa misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Kuanzisha | Misingi ya GitHub, pamoja na kufanya kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa msingi | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Kuanzisha | Ufikikaji | Jifunze misingi ya upatikanaji wa mtandao | [Misingi ya Ufikikaji](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | Misingi ya JS | Aina za Data za JavaScript | Misingi ya aina za data za JavaScript | [Aina za Data](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Misingi ya JS | Kazi na Mbinu | Jifunze kuhusu kazi na mbinu za kusimamia mtiririko wa mantiki ya programu | [Kazi na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher | -| 06 | Misingi ya JS | Kufanya Maamuzi kwa JS | Jifunze jinsi ya kuunda masharti katika msimbo wako ukitumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Misingi ya JS | Msururu na Mizunguko | Fanya kazi na data kupitia msururu na mizunguko katika JavaScript | [Msururu na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML kuunda terrarium ya mtandaoni, ukizingatia kujenga mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Katika Vitendo | Jenga CSS kuibeba terrarium ya mtandaoni, ukizingatia misingi ya CSS ikiwa ni pamoja na kuifanya ukurasa uwe responsive | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Funguo za JavaScript, uendeshaji wa DOM | Tengeneza JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/acha, ukizingatia funguo na uendeshaji wa DOM | [Funguo za JavaScript, uendeshaji wa DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Jenga Mchezo wa Kuandika | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript | [Uprogramu unaoendeshwa na Matukio](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kufanya kazi na Vivinjari | Jifunze jinsi vinjari vinavyofanya kazi, historia yao, na jinsi ya kuanzisha vipengele vya kwanza vya kiendelezi cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kujenga fomu, kuita API na kuhifadhi vigezo kwenye hifadhi ya ndani | Tengeneza vipengele vya JavaScript vya kiendelezi chako cha kivinjari kuitumia API kwa kutumia vigezo vilivyosubiriwa katika hifadhi ya ndani | [APIs, Fomu, na Hifadhi ya Ndani](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mchakato wa nyuma katika kivinjari, utendaji wa wavuti | Tumia michakato ya kivinjari ya nyuma kusimamia ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya marekebisho ili kufanya | [Kazi za Nyuma na Utendaji](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Maendeleo ya Juu zaidi ya Mchezo kwa JavaScript | Jifunze kuhusu Urithi ukitumia Madarasa na Muundo pamoja na mfano wa Pub/Sub, kama maandalizi ya kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo Cha Juu](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye turubai | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Kuweka vipengele kuzunguka kwenye skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia kuratibu za Cartesian na API ya Canvas | [Kusogeza Vipengele Kizunguka](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Kugundua mgongano | Fanya vipengele kuwa na mgongano na kutoa athari kwa kila mmoja kwa kutumia kufungia vitufe na toa kazi ya kupumzika ili kuhakikisha utendaji wa mchezo | [Ugunduzi wa Mgongano](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhifadhi alama | Fanya hesabu za kijumla kulingana na hali na utendakazi wa mchezo | [Kuhifadhi Alama](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Kumaliza na kuanzisha upya mchezo | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, ikiwa ni pamoja na kusafisha mali na kuweka upya thamani za vigezo | [Hali ya Kumaliza](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika App ya Wavuti | Jifunze jinsi ya kuunda muundo wa tovuti ya kurasa nyingi ukitumia uelekeaji na violezo vya HTML | [Violezo vya HTML na Njia](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Jenga Fomu ya Kuingia na Kusajili | Jifunze kuhusu ujenzi wa fomu na kushughulikia utambuzi | [Fomu](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Mbinu za Kupata na Kutumia Data | Jinsi data inavyopita ndani na nje ya app yako, jinsi ya kuipata, kuhifadhi na kuiondoa | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Dhana za Usimamizi wa Hali | Jifunze jinsi app yako inavyoshikilia hali na jinsi ya kuisimamia kitaalamu | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo | [Tumia mhariri wa msimbo wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi wako mwenye akili bandia | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris | - -## 🏫 Pedagogia - -Mtaala wetu umeundwa kwa misingi miwili muhimu ya kielimu: -* kujifunza kwa mradi +| 05 | Misingi ya JS | Vifunction na Mbinu | Jifunze kuhusu vifunction na mbinu za kusimamia mtiririko wa mantiki ya programu | [Vifunction na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher | +| 06 | Misingi ya JS | Kufanya Maamuzi kwa JS | Jifunze jinsi ya kuunda masharti katika msimbo wako kwa kutumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Misingi ya JS | Miskani na Mizunguko | Fanya kazi na data kwa kutumia miskani na mizunguko katika JavaScript | [Miskani na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML kuunda terrarium mtandaoni, ukielekeza kwenye kuunda mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Katika Vitendo | Jenga CSS kupamba terrarium mtandaoni, ukielekeza misingi ya CSS ikijumuisha kupangilia ukurasa iwe rahisi kubadilika | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Kufunga za JavaScript, usimamizi wa DOM | Jenga JavaScript ili kufanya terrarium kufanya kazi kama interface ya buruta/achilia, ukielekeza kwenye kufunga na usimamizi wa DOM | [Kufunga za JavaScript, usimamizi wa DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Jenga Mchezo wa Kuandika | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript | [Programu Inayoendeshwa na Matukio](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kufanya kazi na Vivinjari | Jifunze jinsi vivinjari vinavyofanya kazi, historia yao, na jinsi ya kuanzisha vipengele vya kwanza vya kiendelezaji cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kujenga fomu, kuitisha API na kuhifadhi vigezo katika hifadhi ya ndani | Jenga vipengele vya JavaScript vya kiendelezaji chako cha kivinjari kuitisha API kwa kutumia vigezo vilivyohifadhiwa katika hifadhi ya ndani | [API, Fomu, na Hifadhi ya Ndani](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mchakato wa nyuma katika kivinjari, utendakazi wa wavuti | Tumia michakato ya nyuma ya kivinjari kusimamia ikoni ya kiendelezaji; jifunze kuhusu utendakazi wa wavuti na baadhi ya maboresho ya kufanya | [Mchakato wa Nyuma na Utendakazi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Maendeleo ya Mchezo wa Juu zaidi na JavaScript | Jifunze kuhusu Urithi kwa kutumia Madarasa na Muundo pamoja na muundo wa Pub/Sub, tayari kwa kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo ya Juu](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye turubai | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Turubai](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Kusogeza vipengele kwenye skrini | Gundua jinsi vipengele vinavyoweza kupata mwendo kwa kutumia makosari ya Cartesian na API ya Canvas | [Kusogeza Vipengele](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Ugunduzi wa Migongano | Fanya vipengele kugongana na kuathiriana kwa kutumia kubofya funguo na toa kipengele cha mapumziko kuhakikisha utendakazi bora wa mchezo | [Ugunduzi wa Migongano](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhifadhi alama | Fanya mahesabu ya hisabati kulingana na hali na utendakazi wa mchezo | [Kuhifadhi Alama](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Kuhitimisha na kuanzisha upya mchezo | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, pamoja na kusafisha rasilimali na kuweka upya thamani za vigezo | [Hali ya Kumaliza](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika Tovuti Mtandao | Jifunze jinsi ya kuunda muundo wa tovuti yenye kurasa nyingi kwa kutumia routing na violezo vya HTML | [Violezo vya HTML na Njia](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Jenga Fomu ya Kuingia na Usajili | Jifunze kuhusu ujenzi wa fomu na kushughulikia taratibu za uhakiki | [Fomu](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Mbinu za Kupata na Kutumia Data | Jinsi data inavyotiririka ndani na nje ya app yako, jinsi ya kuipata, kuhifadhi na kuizitupa | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Dhana za Usimamizi wa Hali | Jifunze jinsi app yako inavyodumisha hali na jinsi ya kuiendesha kwa mpangilio | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo| [Tumia Mhariri wa Msimbo wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi wako wa AI | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris | + +## 🏫 Falsafa ya Mafunzo + +Mtaala wetu umeundwa kwa kanuni mbili muhimu za kielimu: +* kujifunza kwa miradi * mitihani ya mara kwa mara -Programu hii inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za hivi karibuni zinazotumiwa na waendelezaji wa wavuti wa sasa. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya kidijitali, kiendelezi cha kivinjari chenye uangalifu wa mazingira, mchezo wa kawaida wa wavamizi wa anga, na app ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa na ufahamu imara wa maendeleo ya wavuti. +Mpango huu hufundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za hivi karibuni zinazotumiwa na waendelezaji wa wavuti wa sasa. Wanafunzi watapata fursa ya kufanya mazoezi kwa mikono kwa kujenga mchezo wa kuandika, terrarium halisi mtandaoni, kiendelezaji cha kivinjari kinachozingatia mazingira, mchezo wa aina ya wavamizi wa anga, na programu ya benki kwa biashara. Mwisho wa mfululizo huu, wanafunzi watakuwa na uelewa thabiti wa uendelezaji wa wavuti. -> 🎓 Unaweza kuchukua masomo machache ya kwanza katika mtaala huu kama [Njia ya Kujifunza](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kwenye Microsoft Learn! +> 🎓 Unaweza kuchukua masomo ya mwanzo ya mtaala huu kama [Njia ya Kujifunza](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kwenye Microsoft Learn! -Kwa kuhakikisha kuwa maudhui yanaendana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaimarishwa. Pia tuliandika masomo kadhaa ya kuanzisha misingi ya JavaScript ili kuanzisha dhana, yakiwa na video kutoka kwa mkusanyiko wa video wa "[Mfululizo wa Waanzilishi kwa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", baadhi ya waandishi wake walichangia mtaala huu. +Kwa kuhakikisha kuwa maudhui yanahusiana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaongezeka. Pia tuliandika masomo kadhaa ya mwanzo kuhusu misingi ya JavaScript kuanzisha dhana, pamoja na video kutoka kwenye mkusanyo wa “"[Mfululizo wa Waanzilishi wa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” ya mafunzo ya video, baadhi ya waandishi wake walichangia kwa mtaala huu. -Zaidi ya hayo, mtihani wa hali ya chini kabla ya darasa huweka nia ya mwanafunzi kuelekea kujifunza mada, wakati mtihani wa pili baada ya darasa huhakikisha uhifadhi zaidi. Mtaala huu uliundwa kuwa na ufanisi na furaha na unaweza kuchukuliwa kwa jumla au sehemu. Miradi inaanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12. +Pia, mtihani wa chini kabla ya darasa unaweka nia ya mwanafunzi kuelekea kujifunza somo, wakati mtihani wa pili baada ya darasa unahakikisha uhifadhi zaidi. Mtaala huu umeundwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa ujumla au sehemu. Miradi huanza ndogo na kuendelea kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12. -Ingawa tumejaribu kuepuka kuanzisha mifumo ya JavaScript badala yake tunalenga ujuzi wa msingi unaohitajika kama msanifu wa wavuti kabla ya kutumia mfumo, hatua inayofuata bora ya kumaliza mtaala huu itakuwa kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Mfululizo wa Waanzilishi kwa: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Ingawa tumependelea kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mendelezaji wa wavuti kabla ya kutumia mfumo, hatua njema inayofuata baada ya kukamilisha mtaala huu ni kujifunza kuhusu Node.js kupitia mkusanyo mwingine wa video: "[Mfululizo wa Waanzilishi wa: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Tembelea [Kanuni zetu za Maadili](CODE_OF_CONDUCT.md) na miongozo ya [Michango](CONTRIBUTING.md). Tunakaribisha maoni yako yenye kujenga! +> Tembelea [Kanuni Zetu za Maadili](CODE_OF_CONDUCT.md) na miongozo ya [Kushiriki](CONTRIBUTING.md). Tunakukaribisha maoni yako yenye kujenga! -## 🧭 Ufikiaji wa Offline +## 🧭 Upatikanaji bila Mtandao -Unaweza kuendesha nyaraka hizi bila mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Kopia hifadhi hii, [weka Docsify](https://docsify.js.org/#/quickstart) kwenye kompyuta yako ya karibu, kisha katika folda kuu ya hifadhi hii, andika `docsify serve`. Tovuti itakuwa ikihudumiwa kwenye bandari 3000 kwenye localhost yako: `localhost:3000`. +Unaweza kuendesha nyaraka hii bila mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Nakili repozitori hii, [sakinisha Docsify](https://docsify.js.org/#/quickstart) kwenye mashine yako ya ndani, kisha katika folda kuu ya repozitori hii, andika `docsify serve`. Tovuti itahudumiwa kwenye lango la 3000 kwenye localhost yako: `localhost:3000`. ## 📘 PDF - PDF ya masomo yote inaweza kupatikana [hapa](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Kozi Nyingine -Timu yetu hutengeneza kozi zingine! Angalia: + +Timu yetu hutengeneza kozi nyingine! Angalia: ### LangChain @@ -215,7 +225,7 @@ Timu yetu hutengeneza kozi zingine! Angalia: [![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 / Wakala +### 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) @@ -231,7 +241,7 @@ Timu yetu hutengeneza kozi zingine! Angalia: --- -### Kujifunza Msingi +### Msingi wa Kujifunza [![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) @@ -250,21 +260,21 @@ Timu yetu hutengeneza kozi zingine! Angalia: ## Kupata Msaada -Kama unashindwa au una maswali yoyote kuhusu kujenga programu za AI. Jiunge na wanafunzi wenzako na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii inayounga mkono ambapo maswali yanakaribishwa na maarifa hushirikiwa kwa huru. +Ikiwa umekwama au una maswali kuhusu kujenga programu za AI. Jiunge na wanafunzi wenzako na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii inayounga mkono ambapo maswali yanakaribishwa na maarifa husambazwa kwa huru. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Kama una maoni juu ya bidhaa au makosa wakati wa kujenga tembelea: +Ikiwa una maoni kuhusu bidhaa au makosa wakati wa kujenga tembelea: [![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) ## Leseni -Hifadhidata hii imelindwa chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi. +Hifadhidata hii imepewa leseni chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi. --- -**Kidokezo cha Kutokujali**: -Nyaraka hii imetafsiriwa kwa kutumia huduma ya utafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuwa sahihi, tafadhali fahamu kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro. Nyaraka asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, utafsiri wa kitaalamu wa binadamu unashauriwa. Hatutawajibika kwa kutoelewana au tafsiri za makosa zitokanazo na matumizi ya tafsiri hii. +**Takwimu ya Kukataa**: +Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za moja kwa moja zinaweza kuwa na makosa au kasoro. Hati ya awali katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo chenye mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu na ya binadamu inapendekezwa. Hatuwajibiki kwa kutoelewana au tafsiri mbaya yatokanayo na matumizi ya tafsiri hii. \ No newline at end of file