chore(i18n): sync translations with latest source changes (chunk 11/20, 100 files)

pull/1668/head
localizeflow[bot] 4 weeks ago
parent e00c0e2d71
commit c31f210f01

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 700 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 750 KiB

File diff suppressed because it is too large Load Diff

@ -112,7 +112,7 @@ Rejelea [nyaraka za API ya seva](../api/README.md) kwa:
**Matokeo Yanayotarajiwa:**
Baada ya kukamilisha kazi hii, programu yako ya benki inapaswa kuwa na kipengele kamili cha "Ongeza Muamala" ambacho kinaonekana na kinafanya kazi kitaalamu:
![Picha ya skrini inayoonyesha mfano wa dialogi ya "Ongeza muamala"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.sw.png)
![Picha ya skrini inayoonyesha mfano wa dialogi ya "Ongeza muamala"](../../../../translated_images/dialog.93bba104afeb79f1.sw.png)
## Kupima Utekelezaji Wako

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Katika mradi huu, utajifunza jinsi ya kujenga benki ya kufikirika. Masomo haya yanajumuisha maelekezo ya jinsi ya kupanga programu ya wavuti na kutoa njia, kujenga fomu, kusimamia hali (state), na kupata data kutoka kwa API ambayo unaweza kutumia kupata data ya benki.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.sw.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.sw.png) |
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.sw.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.sw.png) |
|--------------------------------|--------------------------------|
## Masomo

@ -1,372 +1,639 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "cfd4a15974168ca426d50c67682ab9d4",
"translation_date": "2025-10-24T19:12:43+00:00",
"original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
"translation_date": "2026-01-07T01:30:41+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/README.md",
"language_code": "sw"
}
-->
# Kutumia Mhariri wa Nambari: Kumiliki VSCode.dev
# Kutumia Mhariri wa Msimbo: Kuweza VSCode.dev
Unakumbuka kwenye *The Matrix* wakati Neo alihitaji kuunganishwa na kompyuta kubwa ili kuingia kwenye ulimwengu wa kidijitali? Zana za maendeleo ya mtandao za leo ni kinyume kabisa uwezo wa ajabu unaopatikana kutoka popote. VSCode.dev ni mhariri wa nambari unaotegemea kivinjari ambao huleta zana za maendeleo ya kitaalamu kwenye kifaa chochote chenye muunganisho wa intaneti.
Kumbuka katika *The Matrix* pale Neo alipotakiwa kuunganisha kwenye kituo kikubwa cha kompyuta ili kufikia dunia ya kidijitali? Vifaa vya maendeleo ya wavuti vya leo ni hadithi kinyume uwezo mkubwa sana unaopatikana kutoka mahali popote. VSCode.dev ni mhariri wa msimbo unaotumia kivinjari ambao huleta vifaa vya maendeleo ya kitaalamu kwa kifaa chochote kilicho na muunganisho wa intaneti.
Kama vile mashine ya uchapishaji ilivyofanya vitabu kupatikana kwa kila mtu, si kwa waandishi tu katika monasteri, VSCode.dev inafanya coding kuwa ya kila mtu. Unaweza kufanya kazi kwenye miradi kutoka kwenye kompyuta ya maktaba, maabara ya shule, au popote unapoingia kwenye kivinjari. Hakuna usakinishaji, hakuna vikwazo vya "Nahitaji mpangilio wangu maalum".
Kama vile mashine ya kuchapisha ilivyofanya vitabu kupatikana kwa kila mtu, siwaandishi tu katika monastari, VSCode.dev huleta usawa wa upatikanaji wa kuandika msimbo. Unaweza kufanya kazi kwenye miradi kutoka kwenye kompyuta ya maktaba, maabara ya shule, au mahali popote ambapo unapata kivinjari. Hakuna usakinishaji, hakuna vizingiti vya "nahitaji usanidi wangu maalum".
Mwisho wa somo hili, utaelewa jinsi ya kuzunguka VSCode.dev, kufungua hifadhi za GitHub moja kwa moja kwenye kivinjari chako, na kutumia Git kwa udhibiti wa toleo ujuzi ambao watengenezaji wa kitaalamu hutegemea kila siku.
Mwisho wa somo hili, utakuwa umeelewa jinsi ya kuvinjari VSCode.dev, kufungua hifadhidata za GitHub moja kwa moja kwenye kivinjari chako, na kutumia Git kwa ajili ya udhibiti wa matoleo ujuzi wote ambao wataalamu wa maendeleo hutumia kila siku.
## Utakachojifunza
## ⚡ Unachoweza Kufanya kwa Dakika 5 Zijazo
Baada ya kupitia somo hili pamoja, utaweza:
**Njia ya Kuanza Haraka kwa Waendelezaji Wenye Muda Mfupi**
- Kuzunguka VSCode.dev kama ni nyumbani kwako ukipata kila unachohitaji bila kupotea
- Kufungua hifadhi yoyote ya GitHub kwenye kivinjari chako na kuanza kuhariri mara moja (hii ni ya kichawi sana!)
- Kutumia Git kufuatilia mabadiliko yako na kuhifadhi maendeleo yako kama mtaalamu
- Kuongeza nguvu kwa mhariri wako kwa viendelezi vinavyofanya coding kuwa haraka na ya kufurahisha
- Kuunda na kupanga faili za miradi kwa kujiamini
```mermaid
flowchart LR
A[⚡ Dakika 5] --> B[Tembelea vscode.dev]
B --> C[Unganisha akaunti ya GitHub]
C --> D[Fungua hifadhi yoyote]
D --> E[Anza kuhariri mara moja]
```
- **Dakika 1**: Nenda kwenye [vscode.dev](https://vscode.dev) - hakuna usakinishaji unaohitajika
- **Dakika 2**: Ingia kwa kutumia GitHub kuungana na hifadhidata zako
- **Dakika 3**: Jaribu mbinu ya URL: badilisha `github.com` kuwa `vscode.dev/github` katika URL yoyote ya hifadhidata
- **Dakika 4**: Tengeneza faili jipya na uangalie jinsi mwangaza wa sintaksia unavyofanya kazi moja kwa moja
- **Dakika 5**: Fanya mabadiliko na yafanye kuwasilishwa kupitia paneli ya Udhibiti wa Chanzo
**URL ya Jaribio la Haraka**:
```
# Transform this:
github.com/microsoft/Web-Dev-For-Beginners
# Into this:
vscode.dev/github/microsoft/Web-Dev-For-Beginners
```
**Kwa Nini Hii ni Muhimu**: Kwa dakika 5 tu, utapata uhuru wa kuandika msimbo mahali popote ukiwa na vifaa vya kitaalamu. Hii ni mustakabali wa maendeleo - inapatikana, yenye nguvu, na ya mara moja.
## 🗺️ Safari Yako ya Kujifunza Kupitia Maendeleo ya Wingu
```mermaid
journey
title Kutoka Usanidi wa Mitaa hadi Utaalamu wa Maendeleo ya Wingu
section Kuelewa Jukwaa
Gundua uhariri wa mtandao: 4: You
Unganisha na mfumo wa GitHub: 6: You
Shuhudia urambazaji wa kiolesura: 7: You
section Ujuzi wa Usimamizi wa Faili
Tengeneza na panga faili: 5: You
Hariri kwa muonekano wa sintaksia: 7: You
Pita kwenye miundo ya mradi: 8: You
section Utaalamu wa Udhibiti wa Toleo
Elewa ujumuishaji wa Git: 6: You
Fanya mazoezi ya mchakato wa commit: 8: You
Shuhudia mifumo ya ushirikiano: 9: You
section Ubunifu wa Kitaalamu
Sakinisha nyongeza zenye nguvu: 7: You
Panga mazingira ya maendeleo: 8: You
Tengeneza michakato binafsi: 9: You
```
**Lengo la Safari Yako**: Mwisho wa somo hili, utakuwa umeweza kutumia mazingira ya kitaalamu ya maendeleo ya wingu yanayofanya kazi kutoka kifaa chochote, kukuwezesha kuandika msimbo kwa kutumia vifaa vinavyotumiwa na waendelezaji katika makampuni makubwa ya teknolojia.
## Unachojifunza
## Utakachohitaji
Baada ya kutembea pamoja, utaweza:
- Kuvinjari VSCode.dev kama ni nyumba yako ya pili kupata kila unachohitaji bila kupotea
- Kufungua hifadhidata yoyote ya GitHub kwenye kivinjari chako na kuanza kuhariri mara moja (hii ni ya kushangaza sana!)
- Kutumia Git kufuatilia mabadiliko yako na kuhifadhi maendeleo kama mtaalamu
- Kuongeza nguvu kwa mhariri wako kwa kutumia nyongeza zinazofanya kuandika msimbo kuwa haraka na kufurahisha zaidi
- Kuunda na kupanga faili za mradi kwa kujiamini
## Utabidi Unachohitaji
Mahitaji ni rahisi:
- Akaunti ya bure ya [GitHub](https://github.com) (tutakuelekeza jinsi ya kuunda ikiwa unahitaji)
- Uelewa wa msingi wa vivinjari vya wavuti
- Somo la Misingi ya GitHub linatoa msingi mzuri, ingawa si lazima
- Akaunti ya bure ya [GitHub](https://github.com) (tutakuongoza kuunda kama inahitajika)
- Uwezo wa msingi wa kutumia vivinjari vya wavuti
- Somo la Misingi ya GitHub linatoa msingi mzuri wa maarifa, ingawa si sharti
> 💡 **Mpya kwa GitHub?** Kuunda akaunti ni bure na huchukua dakika chache. Kama vile kadi ya maktaba inavyokuwezesha kupata vitabu duniani kote, akaunti ya GitHub hukufungulia milango ya hifadhidata za msimbo mtandao mzima.
> 💡 **Mgeni wa GitHub?** Kuunda akaunti ni bure na huchukua dakika chache. Kama vile kadi ya maktaba inavyokupa ufikiaji wa vitabu duniani kote, akaunti ya GitHub inafungua milango kwa hifadhi za nambari kote mtandaoni.
## 🧠 Muhtasari wa Mfumo wa Maendeleo ya Wingu
```mermaid
mindmap
root((VSCode.dev Utaalamu))
Platform Benefits
Accessibility
Uhuru wa Kifaa
Hakuna Ufungaji Unahitajika
Sasisho la Mara Moja
Ufikiaji Ulimwenguni
Integration
Muunganisho wa GitHub
Mfumo wa Kukimbia Hifadhi
Uhifadhi wa Mipangilio
Tayari kwa Ushirikiano
Development Workflow
File Management
Muundo wa Mradi
Mwangaza wa Sarufi
Kuhariri Tab Tofauti
Sifa za Hifadhi Yaotomatiki
Version Control
Muunganisho wa Git
Mizunguko ya Kuajiri
Usimamizi wa Matawi
Ufuatiliaji wa Mabadiliko
Customization Power
Extensions Ecosystem
Vifaa vya Uzalishaji
Msaada wa Lugha
Chaguo za Mandhari
Njia Fupi za Custom
Environment Setup
Mapendeleo Binafsi
Mpangilio wa Eneo la Kazi
Muunganisho wa Vifaa
Uboreshaji wa Mtiririko wa Kazi
Professional Skills
Industry Standards
Udhibiti wa Toleo
Ubora wa Msimbo
Ushirikiano
Nyaraka
Career Readiness
Kazi Mbali
Maendeleo ya Wingu
Miradi ya Timu
Chanzo Huru
```
**Kanuni Muhimu**: Mazingira ya maendeleo ya msingi wa wingu ni mustakabali wa kuandika msimbo yanatoa zana za kitaalamu zinazopatikana kwa urahisi, zinazoshirikiana, na zisizo tegemea jukwaa lolote.
## Kwa Nini Wahitaji Mhariri wa Nambari wa Kivinjari?
## Kwa Nini Wahariri wa Msimbo wa Mtandao ni Muhimu
Kabla ya intaneti, wanasayansi katika vyuo vikuu tofauti hawakuweza kushiriki utafiti kwa urahisi. Kisha ARPANET ikaja miaka ya 1960, ikunganisha kompyuta kwa umbali. Wahariri wa nambari wa kivinjari hufuata kanuni hiyo hiyo kufanya zana zenye nguvu kupatikana bila kujali eneo lako au kifaa.
Kabla ya intaneti, wanasayansi katika vyuo mbalimbali hawakuweza kushirikiana tafiti kwa urahisi. Kisha ARPANET ilikuja miaka ya 1960, ikawaunganisha kompyuta kutoka maeneo tofauti. Wahariri wa msimbo wa mtandao hufuata kanuni hii ile ile kufanya zana za nguvu zipatikane bila kujali mahali ulipo au kifaa unachotumia.
Mhariri wa nambari hufanya kazi kama eneo lako la maendeleo, ambapo unaandika, kuhariri, na kupanga faili za nambari. Tofauti na wahariri wa maandishi rahisi, wahariri wa nambari wa kitaalamu hutoa mwangaza wa sintaksia, kugundua makosa, na vipengele vya usimamizi wa miradi.
Mhariri wa msimbo hutumika kama eneo lako la kazi la maendeleo, ambapo unaandika, kuhariri, na kupanga faili za msimbo. Tofauti na wahariri wa maandishi rahisi, wahariri wa msimbo wa kitaalamu hutoa mwangaza wa sintaksia, utambuzi wa makosa, na vipengele vya usimamizi wa miradi.
VSCode.dev huleta uwezo huu kwenye kivinjari chako:
**Faida za kuhariri kwa kivinjari:**
**Faida za kuhariri mtandaoni:**
| Kipengele | Maelezo | Faida ya Kivitendo |
|-----------|---------|--------------------|
| **Uhuru wa Jukwaa** | Inaendeshwa kwenye kifaa chochote chenye kivinjari | Fanya kazi kutoka kompyuta tofauti bila shida |
| **Hakuna Usakinishaji Unaohitajika** | Ufikiaji kupitia URL ya wavuti | Epuka vikwazo vya usakinishaji wa programu |
| **Sasisho za Kiotomatiki** | Daima ina toleo la hivi karibuni | Pata vipengele vipya bila sasisho za mikono |
| **Muunganisho wa Hifadhi** | Muunganisho wa moja kwa moja na GitHub | Hariri nambari bila usimamizi wa faili za ndani |
| Kipengele | Maelezo | Faida Zaidi |
|---------|-------------|----------|
| **Hutoa Uhuru wa Jukwaa Lolote** | Inaendeshwa kwenye kifaa chochote chenye kivinjari | Fanya kazi kutoka kompyuta tofauti bila shida |
| **Hakuna Usakinishaji Unahitajika** | Inapatikana kupitia URL ya wavuti | Epuka vizuizi vya usakinishaji wa programu |
| **Mabadiliko Ya Moja kwa Moja** | Huuendeshwa kwa toleo la hivi karibuni kila mara | Upatikanaji wa sifa mpya bila usasishaji wa mkono |
| **Muunganisho wa Hifadhidata** | Muunganisho wa moja kwa moja na GitHub | Hariri msimbo bila kusimamia faili za ndani |
**Matokeo ya kivitendo:**
- Mwendelezo wa kazi katika mazingira tofauti
- Kiolesura thabiti bila kujali mfumo wa uendeshaji
**Athari za vitendo:**
- Kuendelea kwa kazi katika mazingira tofauti
- Muonekano thabiti bila kujali mfumo wa uendeshaji
- Uwezo wa kushirikiana mara moja
- Mahitaji ya uhifadhi wa ndani yaliyopunguzwa
- Kupunguza hitaji la kuhifadhi kwa kifaa cha eneo la nahe
## Kuchunguza VSCode.dev
Kama vile maabara ya Marie Curie ilivyokuwa na vifaa vya kisasa katika nafasi rahisi, VSCode.dev ina zana za maendeleo ya kitaalamu ndani ya kiolesura cha kivinjari. Programu hii ya wavuti hutoa utendaji wa msingi sawa na wahariri wa nambari wa desktop.
Kama vile maabara ya Marie Curie ilivyokuwa na vifaa vya hali ya juu katika nafasi rahisi, VSCode.dev hujumuisha zana za kitaalamu za maendeleo katika jukwaa la kivinjari. Programu hii ya wavuti hutoa uwezo sawa kama wahariri wa msimbo wa kompyuta za mezani.
Anza kwa kwenda [vscode.dev](https://vscode.dev) kwenye kivinjari chako. Kiolesura kinapakia bila kupakua au kusakinisha mfumo matumizi ya moja kwa moja ya kanuni za kompyuta ya wingu.
Anza kwa kuvinjari [vscode.dev](https://vscode.dev) kwenye kivinjari chako. Muonekano huo hujazwa bila kupakua au kusakinisha mfumo wowote ni utekelezaji wa moja kwa moja wa kanuni za kompyuta za wingu.
### Kuunganisha Akaunti Yako ya GitHub
Kama vile simu ya Alexander Graham Bell ilivyounganisha maeneo ya mbali, kuunganisha akaunti yako ya GitHub huunganisha VSCode.dev na hifadhi zako za nambari. Unapoulizwa kuingia na GitHub, kukubali muunganisho huu kunapendekezwa.
Kama vile simu ya Alexander Graham Bell ilivyowezesha mawasiliano ya mbali, kuunganisha akaunti yako ya GitHub huunganisha VSCode.dev na hifadhidata zako. Ukiwaombwa kuingia kwa GitHub, kukubali muunganisho huu kinapendekezwa.
**Muunganisho wa GitHub hutoa:**
- Ufikiaji wa moja kwa moja wa hifadhi zako ndani ya mhariri
- Mipangilio na viendelezi vilivyolinganishwa kwenye vifaa tofauti
- Mtiririko wa kuhifadhi ulio rahisi kwa GitHub
- Upatikanaji wa moja kwa moja wa hifadhidata zako ndani ya mhariri
- Mipangilio na nyongeza zimeunganishwa kwenye vifaa mbalimbali
- Mtiririko rahisi wa kuhifadhi kazi kwenye GitHub
- Mazingira ya maendeleo yaliyobinafsishwa
### Kujifunza Eneo Lako Jipya la Kazi
### Kufahamu Eneo Lako Jipya la Kazi
Mara kila kitu kinapopakia, utaona eneo la kazi safi na lenye mpangilio mzuri ambalo limeundwa kukufanya uzingatie kile kinachojalisha nambari yako!
Mara kila kitu kinapopakuliwa, utaona eneo la kazi safi na la kuvutia lililoundwa kukuweka makini na kinachohitajika msimbo wako!
![Kiolesura cha kawaida cha VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.sw.png)
![Muonekano wa kawaida wa VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.sw.png)
**Hapa kuna ziara ya eneo:**
- **Upau wa Shughuli** (kile kipande upande wa kushoto): Urambazaji wako kuu na Explorer 📁, Tafuta 🔍, Udhibiti wa Chanzo 🌿, Viendelezi 🧩, na Mipangilio ⚙️
- **Upau wa Pembeni** (paneli karibu nayo): Hubadilika kuonyesha maelezo yanayofaa kulingana na kile ulichoteua
- **Eneo la Mhariri** (nafasi kubwa katikati): Hapa ndipo uchawi hutokea eneo lako kuu la kuandika nambari
**Hapa ni ziara yako ya mtaa:**
- **Ukuta wa Shughuli** (ukingo wa kushoto): Urambazaji wako mkuu una Explorer 📁, Tafuta 🔍, Udhibiti wa Chanzo 🌿, Nyongeza 🧩, na Mipangilio ⚙️
- **Upau wa Pembeni** (bamba upande wake): Hubadilika kuonyesha taarifa husika kulingana na unachochagua
- **Eneo la Mhariri** (sehemu kubwa katikati): Hapa ndipo uchawi unapotokea eneo lako kuu la kuandika msimbo
**Chukua muda kuchunguza:**
- Bonyeza ikoni za Upau wa Shughuli na uone kila moja inafanya nini
- Angalia jinsi upau wa pembeni unavyosasisha kuonyesha maelezo tofauti ni nzuri, sivyo?
- Mwonekano wa Explorer (📁) pengine ndio utatumia muda mwingi, kwa hivyo zoea nao
**Chukua muda kugundua:**
- Bonyeza alama za Ukuta wa Shughuli na uone kila moja inavyofanya kazi gani
- Angalia jinsi upau wa pembeni unavyosasishwa kuonyesha taarifa tofauti ni nzuri, sivyo?
- Muonekano wa Explorer (📁) ni sehemu ambayo utatumia zaidi muda wako, hivyo jiandae nayo
## Kufungua Hifadhi za GitHub
```mermaid
flowchart TB
subgraph "Usanifu wa Kiolesura cha VSCode.dev"
A[Ukanda wa Shughuli] --> B[Mchunguzi 📁]
A --> C[Utafutaji 🔍]
A --> D[Udhibiti wa Chanzo 🌿]
A --> E[Virutubisho 🧩]
A --> F[Mipangilio ⚙️]
B --> G[Mti wa Faili]
C --> H[Tafuta & Badilisha]
D --> I[Hali ya Git]
E --> J[Soko la Virutubisho]
F --> K[Mipangilio]
L[Upau wa Pembeni] --> M[Bodi ya Muktadha]
N[Eneo la Mhariri] --> O[Faili za Msimbo]
P[Terminala/Matokeo] --> Q[Mstari wa Amri]
end
```
## Kufungua Hifadhidata za GitHub
Kabla ya intaneti, watafiti walihitaji kusafiri kimwili kwenda maktaba kupata nyaraka. Hifadhi za GitHub hufanya kazi kwa njia sawa ni mkusanyiko wa nambari uliowekwa mbali. VSCode.dev huondoa hatua ya jadi ya kupakua hifadhi kwenye mashine yako ya ndani kabla ya kuhariri.
Kabla ya intaneti, watafiti walilazimika kusafiri kwenda maktaba kupata nyaraka. Hifadhidata za GitHub zinafanya kazi kwa njia ile ile ni makusanyo ya msimbo yaliyohifadhiwa mbali. VSCode.dev huondoa hatua ya kawaida ya kupakua hifadhidata kwenye mashine yako kabla ya kuhariri.
Uwezo huu unaruhusu ufikiaji wa haraka wa hifadhi yoyote ya umma kwa kutazama, kuhariri, au kuchangia. Hapa kuna njia mbili za kufungua hifadhi:
Uwezo huu unaruhusu upatikanaji wa mara moja wa hifadhidata yoyote ya umma kwa ajili ya kutazama, kuhariri, au kuchangia. Hapa kuna njia mbili za kufungua hifadhidata:
### Njia ya 1: Njia ya Kubonyeza na Kuchagua
### Njia ya 1: Kidhibiti-na-Klika
Hii ni bora unapokuwa unaanza upya kwenye VSCode.dev na unataka kufungua hifadhi maalum. Ni rahisi na rafiki kwa wanaoanza:
Hii ni bora unapoanza mpya kwenye VSCode.dev na unataka kufungua hifadhidata maalum. Ni rahisi na rafiki kwa wanaoanza:
**Hivi ndivyo unavyofanya:**
1. Nenda kwenye [vscode.dev](https://vscode.dev) ikiwa bado hujafika
2. Tafuta kitufe cha "Fungua Hifadhi ya Mbali" kwenye skrini ya kukaribisha na bonyeza
1. Nenda kwenye [vscode.dev](https://vscode.dev) kama bado hujafika
2. Tafuta kitufe cha "Open Remote Repository" kwenye skrini ya kuanza na kubofya
![Fungua hifadhi ya mbali](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.sw.png)
![Fungua hifadhidata ya mbali](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.sw.png)
3. Bandika URL yoyote ya hifadhi ya GitHub (jaribu hii: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Bonyeza Enter na uone uchawi ukitokea!
3. Bandika URL yoyote ya hifadhidata ya GitHub (jaribu hii: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Bonyeza Enter na angalia uchawi unavyotokea!
**Kidokezo cha kitaalamu - Njia ya Command Palette:**
**Ushauri wa mtaalamu - Mkato wa Komandi ya Palette:**
Unataka kujisikia kama mchawi wa coding? Jaribu njia ya mkato ya kibodi: Ctrl+Shift+P (au Cmd+Shift+P kwenye Mac) kufungua Command Palette:
Unataka kujisikia kama mchawi wa kuandika msimbo? Jaribu mkato huu wa kibodi: Ctrl+Shift+P (au Cmd+Shift+P kwa Mac) kufungua Komandi ya Palette:
![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.sw.png)
![Komandi ya Palette](../../../../translated_images/palette-menu.4946174e07f42622.sw.png)
**Command Palette ni kama injini ya utafutaji kwa kila kitu unachoweza kufanya:**
- Andika "open remote" na itapata kifungua hifadhi kwa ajili yako
- Inakumbuka hifadhi ulizofungua hivi karibuni (ni muhimu sana!)
- Ukizoea, utajisikia kama unafanya coding kwa kasi ya umeme
- Ni kama "Hey Siri, lakini kwa coding" ya VSCode.dev
**Komandi ya Palette ni kama kuwa na injini ya utafutaji ya kila jambo unaloweza kufanya:**
- Andika "open remote" na itakupata kifungua hifadhidata
- Inakumbuka hifadhidata ulizofungua hivi karibuni (ni rahisi sana!)
- Ukizoea, utajisikia unavyotuma msimbo kwa kasi ya radi
- Hii ni aina ya VSCode.dev ya "Hey Siri, lakini kwa kuandika msimbo"
### Njia ya 2: Mbinu ya Kubadilisha URL
### Njia ya 2: Mbinu ya Mabadiliko ya URL
Kama vile HTTP na HTTPS zinavyotumia itifaki tofauti huku zikihifadhi muundo wa kikoa sawa, VSCode.dev hutumia muundo wa URL unaoakisi mfumo wa anwani wa GitHub. URL yoyote ya hifadhi ya GitHub inaweza kubadilishwa kufunguliwa moja kwa moja kwenye VSCode.dev.
Kama vile HTTP na HTTPS wanavyotumia itifaki tofauti huku wakidumisha muundo wa kikoa sawa, VSCode.dev hutumia muundo wa URL unaoiga mfumo wa anwani za GitHub. URL yoyote ya hifadhidata ya GitHub inaweza kubadilishwa kufunguliwa moja kwa moja VSCode.dev.
**Muundo wa mabadiliko ya URL:**
**Mfano wa mabadiliko ya URL:**
| Aina ya Hifadhi | URL ya GitHub | URL ya VSCode.dev |
|------------------|---------------|-------------------|
| **Hifadhi ya Umma** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
| **Mradi wa Kibinafsi** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
| **Hifadhi Yoyote Inayopatikana** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
| Aina ya Hifadhidata | URL ya GitHub | URL ya VSCode.dev |
|----------------|---------------------|----------------|
| **Hifadhidata ya Umma** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
| **Mradi Binafsi** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
| **Hifadhidata Ipo kwa Upatikanaji** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
**Utekelezaji:**
- Badilisha `github.com` na `vscode.dev/github`
- Hifadhi vipengele vyote vya URL bila kubadilika
- Inafanya kazi na hifadhi yoyote inayopatikana kwa umma
- Hutoa ufikiaji wa haraka wa kuhariri
- Badilisha `github.com` kuwa `vscode.dev/github`
- Hifadhi sehemu zingine zote za URL bila kubadilika
- Inaweza kufanya kazi na hifadhidata yoyote ya umma
- Hutoa upatikanaji wa moja kwa moja wa kuhariri
> 💡 **Kidokezo cha kubadilisha maisha**: Hifadhi matoleo ya VSCode.dev ya hifadhi zako unazozipenda. Nina alama za kurasa kama "Hariri Wasifu Wangu" na "Sahihisha Nyaraka" ambazo hunipeleka moja kwa moja kwenye hali ya kuhariri!
> 💡 **Kidokezo cha kubadilisha maisha**: Weka alama za VSCode.dev za hifadhidata zako unazozipenda. Mimi nina alama kama "Hariri Miradi Yangu" na "Rekebisha Nyaraka" zinazonipeleka moja kwa moja kwenye hali ya kuhariri!
**Ni njia gani unapaswa kutumia?**
- **Njia ya kiolesura**: Nzuri unapochunguza au huwezi kukumbuka majina halisi ya hifadhi
- **Mbinu ya URL**: Bora kwa ufikiaji wa haraka unapojua hasa unakoenda
- **Njia ya kiolesura**: Nzuri unapotafuta au hujui majina sahihi ya hifadhidata
- **Mbinu ya URL**: Bora kwa upatikanaji wa haraka unapojua hasa mahali unapotaka kwenda
### 🎯 Kagua Kujifunza: Upatikanaji wa Maendeleo ya Wingu
**Simama na Fikiria**: Umejifunza njia mbili za kufikia hifadhidata kwa njia ya kivinjari. Hii ni mabadiliko makubwa katika jinsi maendeleo yanavyofanya kazi.
**Tathmini Yako ya Haraka:**
- Je, unaweza kuelezea kwa nini kuhariri mtandaoni huondoa hitaji la "usanidi wa mazingira ya maendeleo" ya kawaida?
- Ni faida gani mbinu ya mabadiliko ya URL hutoa ikilinganishwa na kunakili git mahali poko?
- Jinsi gani njia hii huhariri njia unavyoweza kuchangia miradi ya chanzo wazi?
**Muunganisho wa Dunia Halisi**: Makampuni makubwa kama GitHub, GitLab, na Replit wamejenga jukwaa lao la maendeleo kwa misingi hii ya kihudumu wa wingu. Unajifunza mitiririko ile ile inayotumiwa na timu za maendeleo duniani kote.
**Swali la Changamoto**: Maendeleo ya wingu yanaweza kubadilisha vipi jinsi kuandaliwa kwa kozi ya kuandika msimbo katika shule? Fikiria kuhusu mahitaji ya vifaa, usimamizi wa programu, na uwezekano wa kushirikiana.
## Kufanya Kazi na Faili na Miradi
Sasa kwa kuwa umefungua hifadhi, hebu tuanze kujenga! VSCode.dev inakupa kila unachohitaji kuunda, kuhariri, na kupanga faili za nambari zako. Fikiria kama warsha yako ya kidijitali kila zana iko mahali unapoihitaji.
Sasa umefungua hifadhidata, hebu tuanze kujenga! VSCode.dev inakupatia kila kitu unachohitaji kuunda, kuhariri, na kupanga faili zako za msimbo. Fikiria kama warsha yako ya kidijitali kila zana iko mahali unapotakiwa.
Hebu tuingie kwenye kazi za kila siku ambazo zitaunda sehemu kubwa ya mtiririko wako wa kazi wa coding.
Tuanze na kazi za kila siku zitakazokuwa sehemu kubwa ya mtiririko wako wa kuandika msimbo.
### Kuunda Faili Mpya
Kama kupanga michoro katika ofisi ya mhandisi, uundaji wa faili katika VSCode.dev hufuata mbinu ya muundo. Mfumo huu unasaidia aina zote za faili za maendeleo ya wavuti.
Kama kupanga ramani za majengo ofisini mwa mbuni wa majengo, uundaji wa faili ndani ya VSCode.dev hufuata mtindo ulio wazi. Mfumo unaunga mkono aina zote za kawaida za faili za maendeleo ya wavuti.
**Mchakato wa kuunda faili:**
1. Nenda kwenye folda lengwa kwenye upau wa pembeni wa Explorer
2. Elekeza juu ya jina la folda ili kufichua ikoni ya "Faili Mpya" (📄+)
3. Ingiza jina la faili likijumuisha kiendelezi kinachofaa (`style.css`, `script.js`, `index.html`)
1. Vinjari folda lengwa kwenye upande wa Explorer
2. Lusua juu ya jina la folda kuonyesha ikoni ya "Faili Mpya" (📄+)
3. Andika jina la faili pamoja na kiendelezi kinachofaa (`style.css`, `script.js`, `index.html`)
4. Bonyeza Enter kuunda faili
![Kuunda faili mpya](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.sw.png)
![Kuunda faili mpya](../../../../translated_images/create-new-file.2814e609c2af9aeb.sw.png)
**Misingi ya kutaja faili:**
- Tumia majina yanayoelezea madhumuni ya faili
**Kanuni za kuitia majina:**
- Tumia majina ya kueleweka yanayoonyesha matumizi ya faili
- Jumuisha viendelezi vya faili kwa mwangaza sahihi wa sintaksia
- Fuata mifumo thabiti ya kutaja faili katika miradi
- Tumia herufi ndogo na alama za kuunganisha badala ya nafasi
- Fuata mifumo ya majina thabiti katika miradi
- Tumia herufi ndogo na mabano badala ya nafasi
### Kuhariri na Kuhifadhi Faili
Hapa ndipo raha halisi inaanza! Mhariri wa VSCode.dev umejaa vipengele vya kusaidia vinavyofanya coding kuwa laini na ya angavu. Ni kama kuwa na msaidizi mzuri wa kuandika, lakini kwa nambari.
Hapa ndipo furaha ya kweli inaanza! Mhariri wa VSCode.dev umejaa vipengele vya kusaidia vinavyofanya kuandika msimbo kuwa laini na ya kueleweka. Kama kuwa na msaidizi mahiri wa uandishi, lakini kwa msimbo.
**Mtiririko wako wa kuhariri:**
1. Bonyeza faili yoyote kwenye Explorer ili kuifungua kwenye eneo kuu
2. Anza kuandika na uone VSCode.dev ikikusaidia kwa rangi, mapendekezo, na kugundua makosa
3. Hifadhi kazi yako kwa Ctrl+S (Windows/Linux) au Cmd+S (Mac) ingawa inahifadhi kiotomatiki pia!
1. Bonyeza faili yoyote kwenye Explorer kufungua katika eneo kuu
2. Anza kuandika na uangalie VSCode.dev ikikuongezea rangi, mapendekezo, na kugundua makosa
3. Hifadhi kazi kwa Ctrl+S (Windows/Linux) au Cmd+S (Mac) ingawa huhifadhi moja kwa moja pia!
![Kuhariri faili katika VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.sw.png)
![Kuhariri faili kwenye VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.sw.png)
**Mambo mazuri yanayotokea unapoandika nambari:**
- Nambari yako inapata rangi nzuri ili iwe rahisi kusoma
- VSCode.dev inapendekeza marekebisho unapoandika (kama autocorrect, lakini bora zaidi)
- Inagundua makosa na makosa ya tahajia kabla hujahifadhi
- Unaweza kuwa na faili nyingi wazi kwenye tabo, kama kwenye kivinjari
- Kila kitu kinahifadhiwa kiotomatiki kwa nyuma
**Mambo mazuri yanayotokea unapoandika msimbo:**
- Msimbo wako unatolewa kwa rangi nzuri ili uwe rahisi kusoma
- VSCode.dev inapendekeza mitiifu ya neno unaloteka (kama kusahihisha moja kwa moja, lakini zaidi intelligent)
- Inakagua makosa kabla haujahifadhi
- Unaweza kuwa na faili nyingi zikiwa wazi kwenye tabo tofauti, kama kwenye kivinjari
- Kila kitu huhifadhiwa moja kwa moja nyuma ya pazia
> ⚠️ **Kidokezo cha haraka**: Ingawa auto-save inakusaidia, kubonyeza Ctrl+S au Cmd+S bado ni tabia nzuri. Inahifadhi kila kitu mara moja na kuanzisha vipengele vingine vya kusaidia kama ukaguzi wa makosa.
> ⚠️ **Kidokezo cha haraka**: Ingawa kuhifadhi moja kwa moja kuna msaada, kuzima Ctrl+S au Cmd+S bado ni desturi nzuri. Huhifadhi mara moja kila kitu na huanzisha vipengele vingine vya msaada kama ukaguzi wa makosa.
### Udhibiti wa Toleo na Git
### Udhibiti wa Matoleo kwa Git
Kama vile wanakiolojia wanavyounda rekodi za kina za tabaka za uchimbaji, Git hufuatilia mabadiliko katika nambari yako kwa muda. Mfumo huu huhifadhi historia ya mradi na hukuwezesha kurudi kwenye matoleo ya awali unapohitaji. VSCode.dev inajumuisha utendaji wa Git.
Kama wachimbaji wa kumbukumbu wanavyotengeneza kumbukumbu za kina za tabaka za kuchimba, Git hufuatilia mabadiliko kwenye msimbo wako kwa muda. Mfumo huu unahifadhi historia ya mradi na unakuwezesha kurudi kwa matoleo ya awali inapohitajika. VSCode.dev ina utendakazi wa Git uliounganishwa.
**Kiolesura cha Udhibiti wa Chanzo:**
1. Fikia paneli ya Udhibiti wa Chanzo kupitia ikoni ya 🌿 kwenye Upau wa Shughuli
1. Ingia kwenye paneli ya Udhibiti wa Chanzo kwa kutumia ikoni ya 🌿 kwenye Ukuta wa Shughuli
2. Faili zilizobadilishwa zinaonekana katika sehemu ya "Mabadiliko"
3. Uwekaji rangi unaonyesha aina za mabadiliko: kijani kwa nyongeza, nyekundu kwa kufutwa
3. Rangi hutambulisha aina za mabadiliko: kijani kwa nyongeza, nyekundu kwa ufutaji
![Kuangalia mabadiliko katika Udhibiti wa Chanzo](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.sw.png)
![Kutazama mabadiliko katika Udhibiti wa Chanzo](../../../../translated_images/working-tree.c58eec08e6335c79.sw.png)
**Kuhifadhi kazi yako (mtiririko wa commit):**
**Kuhifadhi kazi yako (mtiririko wa kufanya commit):**
```mermaid
flowchart TD
A[Make changes to files] --> B[View changes in Source Control]
B --> C[Stage changes by clicking +]
C --> D[Write descriptive commit message]
D --> E[Click checkmark to commit]
E --> F[Changes pushed to GitHub]
A[Fanya mabadiliko kwenye faili] --> B[Tazama mabadiliko katika Udhibiti wa Chanzo]
B --> C[Tayarisha mabadiliko kwa kubofya +]
C --> D[Andika ujumbe wa kujitolea unaoelezea]
D --> E[Bonyeza alama ya kuangalia ili kujitolea]
E --> F[Mabadiliko yametumwa GitHub]
```
```mermaid
stateDiagram-v2
[*] --> Modified: Hariri faili
Modified --> Staged: Bonyeza + kuweka hatua
Staged --> Modified: Bonyeza - kuondoa hatua
Staged --> Committed: Ongeza ujumbe & jitihada
Committed --> [*]: Sambaza kwenye GitHub
state Committed {
[*] --> LocalCommit
LocalCommit --> RemotePush: Sambaza kiotomatiki
}
```
**Hivi ndivyo unavyofanya hatua kwa hatua:**
- Bonyeza ikoni ya "+" karibu na faili unazotaka kuhifadhi (hii inaziweka "staged")
- Hakikisha kuwa unaridhika na mabadiliko yote yaliyowekwa
- Andika maelezo mafupi yanayoelezea ulichofanya (hii ni "commit message" yako)
- Bonyeza kitufe cha alama ya tiki ili kuhifadhi kila kitu kwenye GitHub
- Ikiwa unabadili mawazo kuhusu kitu, ikoni ya kurudisha nyuma inakuruhusu kufuta mabadiliko
- Bonyeza ikoni ya "+" kando ya faili unazotaka kuhifadhi (hii inawaita "kuweka awali" faili)
- Hakikisha mara mbili kwamba umefurahishwa na mabadiliko yote yaliyopangwa
- Andika noti fupi ikielezea ulichofanya (hii ni "ujumbe wako wa kujiwekea")
- Bonyeza kitufe cha tiki kuhifadhi kila kitu kwenye GitHub
- Ikiwa utabadilisha mawazo kuhusu jambo fulani, ikoni ya kufuta inakuwezesha kukataa mabadiliko
**Kuandika ujumbe mzuri wa kujiwekea (hii ni rahisi kuliko unavyofikiri!):**
- Elezea tu ulichofanya, kama "Ongeza fomu ya mawasiliano" au "Rekebisha urambazaji uliovunjika"
- Fanya iwe fupi na nzuri fikiria kama twiti, sio insha
- Anza kwa maneno ya kitendo kama "Ongeza", "Rekebisha", "Sasisha", au "Ondoa"
- **Mifano mizuri**: "Ongeza menyu ya urambazaji inayojibadilisha", "Rekebisha masuala ya muundo wa simu", "Sasisha rangi kwa ufikiaji bora"
**Kuandika ujumbe mzuri wa commit (hii ni rahisi kuliko unavyofikiria!):**
- Eleza tu ulichofanya, kama "Ongeza fomu ya mawasiliano" au "Sahihisha urambazaji uliovunjika"
- Ifanye iwe fupi na rahisi fikiria urefu wa tweet, si insha
- Anza na maneno ya hatua kama "Ongeza", "Sahihisha", "Sasisha", au "Ondoa"
- **Mifano mizuri**: "Ongeza menyu ya urambazaji inayojibika", "Sahihisha masuala ya mpangilio wa simu", "Sasisha rangi kwa upatikanaji bora"
> 💡 **Kidokezo cha urambazaji haraka**: Tumia menyu ya hamburger (☰) juu kushoto kurudi kwenye hifadhi yako ya GitHub na kuona mabadiliko uliyojiwekea mtandaoni. Ni kama lango kati ya mazingira yako ya uhariri na nyumbani kwa mradi wako GitHub!
> 💡 **Kidokezo cha urambazaji wa haraka**: Tumia menyu ya hamburger (☰) upande wa juu kushoto kurudi kwenye hifadhi yako ya GitHub na kuona mabadiliko yako yaliyohifadhiwa mtandaoni. Ni kama lango kati ya mazingira yako ya kuhariri na nyumbani kwa mradi wako kwenye GitHub!
## Kuongeza Ufanisi Kwa Kuongeza Vipengele
Kama vile duka la msanii linavyokuwa na zana maalum kwa kazi tofauti, VSCode.dev inaweza kuboreshwa kwa vipengele vinavyoongeza uwezo maalum. Viendelezaji waliotengenezwa na jamii hurekebisha mahitaji ya kawaida ya maendeleo kama vile upangaji wa msimbo, onyesho la moja kwa moja, na uunganisho bora wa Git.
Soko la vipengele lina maelfu ya zana za bure zilizotengenezwa na watengenezaji duniani kote. Kila kiendelezaji hutatua changamoto maalum za mtiririko wa kazi, kukuwezesha kujenga mazingira ya maendeleo yaliyoongozwa na mahitaji yako binafsi na mapendeleo.
```mermaid
mindmap
root((Extension Ecosystem))
Essential Categories
Productivity
Live Server
Auto Rename Tag
Bracket Pair Colorizer
GitLens
Code Quality
Prettier
ESLint
Spell Checker
Error Lens
Language Support
HTML CSS Support
JavaScript ES6
Python Extension
Markdown Preview
Themes & UI
Dark+ Modern
Material Icon Theme
Peacock
Rainbow Brackets
Discovery Methods
Popular Rankings
Idadi za Kupakua
Ratings za Watumiaji
Sasisho za Karibuni
Mapitio ya Jamii
Recommendations
Mapendekezo ya Eneo la Kazi
Kulingana na Lugha
Kazi maalum ya Mtiririko
Viwango vya Timu
```
### Kupata Vipengele Vyako Kamili
## Kuongeza Uwezo na Viendelezi
Soko la vipengele limepangiliwa vyema, hivyo hutapotea ukitafuta unachohitaji. Limebuniwa kusaidia kugundua zana maalum na vitu vya kuvutia ambavyo haujajua vilikuwepo!
Kama vile warsha ya fundi ina zana maalum kwa kazi tofauti, VSCode.dev inaweza kubinafsishwa na viendelezi vinavyoongeza uwezo maalum. Programu hizi zilizotengenezwa na jamii zinashughulikia mahitaji ya kawaida ya maendeleo kama uundaji wa nambari, mwonekano wa moja kwa moja, na ushirikiano ulioboreshwa wa Git.
**Jinsi ya kufikia soko la vipengele:**
Soko la viendelezi lina maelfu ya zana za bure zilizotengenezwa na watengenezaji kote ulimwenguni. Kila kiendelezi hutatua changamoto fulani za mtiririko wa kazi, ikiruhusu kujenga mazingira ya maendeleo yaliyobinafsishwa yanayofaa mahitaji na mapendeleo yako maalum.
1. Bonyeza ikoni ya Vipengele (🧩) kwenye Upau wa Shughuli
2. Vinjari au tafuta kitu maalum
3. Bonyeza chochote kinachovutia kujifunza zaidi
### Kupata Viendelezi Vyako Bora
![Kiolesura cha soko la vipengele](../../../../translated_images/extensions.eca0e0c7f59a10b5.sw.png)
Soko la viendelezi limepangwa vizuri, kwa hivyo hutapotea ukijaribu kutafuta unachohitaji. Limeundwa kusaidia kugundua zana maalum na vitu vya kuvutia ambavyo hata hukujua vinapatikana!
**Utakachoona humo:**
**Kufikia soko:**
| Sehemu | Kile Kilicho Ndani | Kwa Nini Ni Msaada |
|----------|---------|----------|
| **Imesakinishwa** | Vipengele ulivyoviongeza tayari | Zana zako binafsi za uandishi wa msimbo |
| **Maarufu** | Vipendwa na wengi | Vilivyo maarufu kwa watengenezaji wengi |
| **Inapendekezwa** | Mapendekezo mazuri kwa mradi wako | Mapendekezo ya msaada ya VSCode.dev |
1. Bonyeza ikoni ya Viendelezi (🧩) kwenye Upau wa Shughuli
2. Vin
- Kila kiendelezi kinaonyesha alama za ukadiriaji, idadi ya upakuaji, na maoni ya watumiaji halisi
- Unapata picha za skrini na maelezo wazi ya kile kila moja inafanya
- Kila kitu kimewekwa alama wazi na taarifa za ulinganifu
- Viendelezi vinavyofanana vinapendekezwa ili uweze kulinganisha chaguo
**Kile kinachofanya urambazaji kuwa rahisi:**
- Kila kiendelezaji kina viwango, idadi ya pakizi, na maoni halisi ya watumiaji
- Unapata picha na maelezo wazi ya kile kila kimoja hufanya
- Kila kitu kimeainishwa kwa uwazi na taarifa ya ulinganifu
- Vipengele vinavyofanana vinapendekezwa ili ulinganishe chaguzi
### Kusakinisha Viendelezi (Ni Rahisi Sana!)
### Kusakinisha Vipengele (Ni Rahisi Sana!)
Kuongeza nguvu mpya kwenye mhariri wako ni rahisi kama kubonyeza kitufe. Viendelezi husakinishwa kwa sekunde na kuanza kufanya kazi mara moja hakuna kuanzisha upya, hakuna kusubiri.
Kuwaongeza nguvu mpya mhariri wako ni rahisi kama kubonyeza kitufe. Vipengele husakinishwa kwa sekunde na kuanza kufanya kazi mara moja hakuna kuanzisha upya, hakuna kusubiri.
**Hivi ndivyo unavyopaswa kufanya:**
**Hivi ndivyo unavyofanya:**
1. Tafuta unachotaka (jaribu kutafuta "live server" au "prettier")
2. Bonyeza kile kinachoonekana kizuri ili kuona maelezo zaidi
3. Soma kile kinachofanya na angalia alama za ukadiriaji
4. Bonyeza kitufe cha bluu "Install" na umemaliza!
2. Bonyeza kile kinachoonekana kizuri kuona maelezo zaidi
3. Soma kuhusu kile hufanya na angalia viwango
4. Bonyeza kitufe cha buluu cha "Install" na umemaliza!
![Kusakinisha viendelezi](../../../../8-code-editor/images/install-extension.gif)
![Kusakinisha vipengele](../../../../8-code-editor/images/install-extension.gif)
**Kinachotokea nyuma ya pazia:**
- Kiendelezi kinapakuliwa na kujisakinisha kiotomatiki
- Vipengele vipya vinaonekana kwenye kiolesura chako mara moja
- Kila kitu kinaanza kufanya kazi mara moja (kweli, ni haraka hivyo!)
- Ikiwa umeingia, kiendelezi kinasawazishwa kwenye vifaa vyako vyote
- Kiendelezaji hupakuliwa na kujiseti moja kwa moja
- Vipengele vipya vinaonekana katika kiolesura chako mara moja
- Kila kitu kinaanza kufanya kazi papo hapo (kwa kweli, ni haraka hivyo!)
- Ikiwa umeingia kwenye akaunti, kiendelezaji kinalinganisha vifaa vyako vyote
**Baadhi ya viendelezi ninavyopendekeza kuanza navyo:**
- **Live Server**: Tazama tovuti yako ikisasishwa moja kwa moja unapoandika (hiki ni cha kichawi!)
- **Prettier**: Hufanya msimbo wako uonekane safi na wa kitaalamu kiotomatiki
- **Auto Rename Tag**: Badilisha tagi moja ya HTML na mwenza wake pia anasasishwa
- **Bracket Pair Colorizer**: Inaweka rangi kwenye mabano yako ili usipotee
- **GitLens**: Inaongeza nguvu kwenye vipengele vyako vya Git na taarifa nyingi za msaada
**Vipengele vingine ninavyopendekeza kuanzia navyo:**
- **Live Server**: Tazama tovuti yako ikibadilika kwa wakati halisi unapotengeneza (hiki ni cha kishangaza!)
- **Prettier**: Hufanya msimbo wako kuwa safi na wa kitaalamu moja kwa moja
- **Auto Rename Tag**: Badilisha lebo moja ya HTML na mshirika wake hubadilika pia
- **Bracket Pair Colorizer**: Rangi mabano yako ili usipotee kabisa
- **GitLens**: Inaongeza nguvu kwa vipengele vya Git na taarifa nyingi za msaada
### Kubinafsisha Viendelezi Vyako
### Kubinafsisha Vipengele Vyako
Viendelezi vingi vina mipangilio unayoweza kurekebisha ili kufanya vifanye kazi jinsi unavyopenda. Fikiria kama kurekebisha kiti na vioo kwenye gari kila mtu ana mapendeleo yake!
Vipengele vingi huja na mipangilio unayoweza kubadilisha ili kufanya kazi jinsi unavyotaka. Fikiria kama kurekebisha kiti na vioo ndani ya gari kila mtu ana mapendeleo yake!
**Kurekebisha mipangilio ya kiendelezi:**
**Kurekebisha mipangilio ya kiendelezaji:**
1. Tafuta kiendelezi chako kilichosakinishwa kwenye paneli ya Viendelezi
2. Tafuta ikoni ndogo ya gia (⚙️) karibu na jina lake na bonyeza
3. Chagua "Extension Settings" kutoka kwenye menyu ya kushuka
4. Rekebisha mambo hadi yahisi sawa na mtiririko wako wa kazi
1. Pata kiendelezaji ulichosakinisha kwenye paneli ya Vipengele
2. Tafuta ikoni ya gia ndogo (⚙️) kando ya jina lake na bonyeza
3. Chagua "Extension Settings" kutoka kwenye menyu ya kushuka chini
4. Rekebisha vitu hadi viwe vinakufaa kabisa kwa mtiririko wako wa kazi
![Kubinafsisha mipangilio ya kiendelezi](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.sw.png)
![Kubinafsisha mipangilio ya kiendelezaji](../../../../translated_images/extension-settings.21c752ae4f4cdb78.sw.png)
**Mambo ya kawaida unayoweza kutaka kurekebisha:**
- Jinsi msimbo wako unavyopangwa (tabu dhidi ya nafasi, urefu wa mistari, nk.)
- Vifupisho vya kibodi vinavyosababisha vitendo tofauti
- Aina gani za faili kiendelezi kinapaswa kufanya kazi nazo
- Kuwasha au kuzima vipengele maalum ili kuweka mambo safi
**Vitu vya kawaida ambavyo unaweza kutaka kubadilisha:**
- Jinsi msimbo wako unavyoandaliwa (taps vs nafasi, urefu wa mstari, n.k.)
- Ni vitufe gani vya kibodi vinavyochochea vitendo tofauti
- Aina ya faili ambazo kiendelezaji kinapaswa kufanya nao kazi
- Kuzima au kuwasha vipengele maalum ili kuweka kila kitu safi
### Kuweka Viendelezi Vyako Vizuri
### Kuweka Vipengele Vyako Katika Mpangilio
Unapogundua viendelezi zaidi vya kuvutia, utataka kuweka mkusanyiko wako safi na unaofanya kazi vizuri. VSCode.dev inafanya hili kuwa rahisi sana kusimamia.
Unapogundua vipengele zaidi vya kuvutia, utataka kuweka mkusanyiko wako katika mpangilio mzuri na kuendesha vizuri. VSCode.dev inafanya hili kuwa rahisi sana kusimamia.
**Chaguo zako za usimamizi wa viendelezi:**
**Chaguzi zako za usimamizi wa vipengele:**
| Unachoweza Kufanya | Wakati Inapokuwa Msaada | Kidokezo cha Mtaalamu |
| Unaweza Kufanya Nini | Linapokuwa Msaada | Kumbukumbu ya Mtaalamu |
|--------|---------|----------|
| **Disable** | Kuangalia kama kiendelezi kinasababisha matatizo | Bora kuliko kuondoa ikiwa unaweza kutaka kurudisha |
| **Uninstall** | Kuondoa kabisa viendelezi usivyohitaji | Huweka mazingira yako safi na haraka |
| **Update** | Kupata vipengele vipya na marekebisho ya hitilafu | Kawaida hufanyika kiotomatiki, lakini ni vyema kuangalia |
| **Zima** | Kupima ikiwa kiendelezaji kinayosababisha matatizo | Bora kuliko kuondoa ikiwa ungetaka kurudisha baadaye |
| **Ondoa** | Kuondoa kabisa vipengele usivihitaji | Huweka mazingira yako safi na ya kasi |
| **Sasisha** | Kupata vipengele na marekebisho ya hitilafu mpya | Kawaida hufanyika moja kwa moja, lakini ni vyema kuangalia |
**Jinsi ninavyopenda kusimamia vipengele:**
- Kila miezi michache, hupitia kile nilicho nacho na kuondoa visivyotumika
- Ninasasisha vipengele ili kupata maboresho mapya na marekebisho ya usalama
- Ikiwa kitu kinaonekana cha polepole, huwasha au kuzima kwa muda vipengele kuona kama kilikuwa chanzo
- Ninasoma maelezo ya sasisho wakati vipengele vinapopata maboresho makubwa wakati mwingine kuna vipengele vipya vya kuvutia!
> ⚠️ **Kidokezo cha utendaji**: Vipengele ni vya ajabu, lakini kuwa na nyingi sana kunaweza kuharakisha mfumo. Lenga kwenye zile zinazokuongeza maisha rahisi na usiogope kuondoa zile ambazo hutumiwi kamwe.
### 🎯 Ukaguzi wa Kifundisho: Urekebishaji wa Mazingira ya Maendeleo
**Uelewa wa Miundo**: Umejifunza kubinafsisha mazingira ya kitaalamu ya maendeleo kwa kutumia vipengele vilivyotengenezwa na jamii. Hii inaendana na jinsi timu za maendeleo za makampuni zinavyotengeneza zana za kawaida.
**Mada Muhimu Uliyothibitisha**:
- **Ugunduzi wa Vipengele**: Kupata zana zinazotatua changamoto maalum za maendeleo
- **Usanidi wa Mazingira**: Kubinafsisha zana kufuata mapendeleo binafsi au timu
- **Uboreshaji wa Utendaji**: Kuweka uwiano kati ya ufanisi na utendaji wa mfumo
- **Ushirikiano wa Jamii**: Kutumia zana zilizo tengenezwa na jamii ya watengenezaji duniani
**Jinsi ninavyopenda kusimamia viendelezi:**
- Kila miezi michache, ninapitia nilichosakinisha na kuondoa chochote nisichotumia
- Ninaweka viendelezi vikiwa vimesasishwa ili nipate maboresho ya hivi karibuni na marekebisho ya usalama
- Ikiwa kitu kinaonekana kuwa polepole, ninazima viendelezi kwa muda ili kuona kama moja yao ndiyo sababu
- Ninasoma maelezo ya sasisho wakati viendelezi vinapata sasisho kubwa wakati mwingine kuna vipengele vipya vya kuvutia!
**Uhusiano wa Sekta**: Mifumo ya vipengele ndio nguvu ya majukwaa makubwa ya maendeleo kama VS Code, Chrome DevTools, na IDE za kisasa. Kuelewa jinsi ya kutathmini, kusakinisha, na kusanidi vipengele ni muhimu kwa mtiririko wa kazi wa kitaalamu.
**Swali la Tafakari**: Ungedhibiti vipi kuanzisha mazingira ya maendeleo yaliyosawazishwa kwa timu ya watengenezaji 10? Fikiria kuhusu utofauti, utendaji, na mapendeleo binafsi.
## 📈 Ratiba Yako ya Uwezo wa Maendeleo ya Wingu
```mermaid
timeline
title Safari ya Uendelezaji wa Wingu ya Kitaalamu
section Misingi ya Jukwaa
Uelewa wa Uendelezaji wa Wingu
: Jifunze dhana za uhariri mtandaoni
: Unganisha mifumo ya uunganishaji wa GitHub
: Panda kutumia maeneo ya kitaalamu
section Uwezo wa Kazi
Usimamizi wa Faili & Miradi
: Tengeneza miundo ya mradi uliopangwa
: Jifunze manufaa ya kuonyesha sentensi
: Simamia michakato ya uhariri wa faili nyingi
Uunganishaji wa Udhibiti wa Toleo
: Elewa uonyesha wa Git
: Fanya mazoezi ya viwango vya ujumbe wa commit
: Jifunze michakato ya kufuatilia mabadiliko
section Ubinafsishaji wa Mazingira
Eneo la Upanuzi
: Gundua virutubisho vya tija
: Sanidi mapendeleo ya ukuzaji
: Boresha utendaji vs utendakazi
Usanidi wa Kitaalamu
: Tengeneza michakato thabiti
: Tengeneza usanidi unaoweza kutumika tena
: Weka viwango vya timu
section Utaalamu wa Sekta
Uendelezaji wa Kwanza Wingu
: Jifunze mazoea ya ukuzaji wa mbali
: Elewa michakato ya ushirikiano
: Jenga ujuzi huru wa jukwaa
Mazoezi ya Kitaalamu
: Fuata viwango vya sekta
: Tengeneza michakato inayoweza kudumishwa
: Jiandae kwa mazingira ya timu
```
**🎓 Hatua ya Kuajiliwa**: Umefanikiwa kukamilisha maendeleo ya wingu kwa kutumia zana na mtiririko huo huo unaotumiwa na watengenezaji wa kitaalamu katika makampuni makubwa ya teknolojia. Hizi ni stadi za mustakabali wa maendeleo ya programu.
> ⚠️ **Kidokezo cha Utendaji**: Viendelezi ni vya ajabu, lakini kuwa na vingi sana vinaweza kupunguza kasi ya mambo. Zingatia vile vinavyokufanya maisha yako kuwa rahisi na usisite kuondoa vile usivyotumia.
**🔄 Uwezo wa Ngazi Ifuatayo**:
- Tayari kuchunguza majukwaa ya maendeleo ya wingu ya hali ya juu (Codespaces, GitPod)
- Tayari kufanya kazi katika timu za maendeleo zilizoenea
- Umebeba uwezo wa kuchangia miradi ya chanzo huria duniani
- Msingi umejengwa kwa mbinu za kisasa za DevOps na ujumuishaji endelevu
## Changamoto ya Wakala wa GitHub Copilot 🚀
Kama mbinu iliyopangwa ambayo NASA hutumia kwa misheni za anga, changamoto hii inahusisha matumizi ya kimfumo ya ujuzi wa VSCode.dev katika hali kamili ya mtiririko wa kazi.
Kama vile NASA inavyotumia mbinu ya muundo kwa misheni za anga za juu, changamoto hii inahusisha matumizi ya kitaalamu ya ujuzi wa VSCode.dev katika hali kamili ya mtiririko wa kazi.
**Lengo:** Onyesha ustadi na VSCode.dev kwa kuanzisha mtiririko wa kazi wa maendeleo ya wavuti.
**Lengo:** Onyesha ufanisi na VSCode.dev kwa kuanzisha mtiririko kamili wa maendeleo ya wavuti.
**Mahitaji ya mradi:** Kwa kutumia msaada wa hali ya Wakala, kamilisha majukumu haya:
1. Fork hifadhi iliyopo au unda mpya
**Mahitaji ya mradi:** Kwa msaada wa hali ya Wakala, kamilisha kazi hizi:
1. Fanya nakala ya hifadhi iliyopo au unda mpya
2. Anzisha muundo wa mradi unaofanya kazi na faili za HTML, CSS, na JavaScript
3. Sakinisha na sanidi viendelezi vitatu vinavyoongeza maendeleo
4. Fanya udhibiti wa toleo na ujumbe wa maelezo ya commit
5. Jaribu kuunda na kurekebisha matawi ya vipengele
3. Sakinisha na sanidi vipengele vitatu vinavyoongeza maendeleo
4. Fanya mazoezi ya udhibiti wa toleo kwa ujumbe wa maelezo wa kujiwekea
5. Jaribu kuunda na kubadilisha matawi ya kipengele
6. Andika mchakato na mafunzo katika faili ya README.md
Zoezi hili linajumuisha dhana zote za VSCode.dev katika mtiririko wa kazi wa vitendo ambao unaweza kutumika kwa miradi ya maendeleo ya baadaye.
Mazoezi haya yanakusanya dhana zote za VSCode.dev katika mtiririko wa kazi wa vitendo unaoweza kutumika kwa miradi ya maendeleo yajayo.
Jifunze zaidi kuhusu [hali ya wakala](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) hapa.
## Kazi
Ni wakati wa kujaribu ujuzi huu kwa vitendo! Nina mradi wa vitendo utakao kuruhusu kufanya mazoezi ya kila kitu tulichojadili: [Tengeneza tovuti ya wasifu kwa kutumia VSCode.dev](./assignment.md)
Wakati wa kutumia ujuzi huu kwa mtihani halisi! Nina mradi wa vitendo utakayokuwezesha kufanya mazoezi ya kila kitu tulichojifunza: [Unda tovuti ya wasifu kwa kutumia VSCode.dev](./assignment.md)
Kazi hii inakuelekeza jinsi ya kujenga tovuti ya wasifu wa kitaalamu kabisa kwenye kivinjari chako. Utatumia vipengele vyote vya VSCode.dev tulivyovijadili, na mwishoni, utakuwa na tovuti nzuri na ujasiri thabiti katika mtiririko wako mpya wa kazi.
Kazi hii itakuongoza kujenga tovuti ya kitaalamu ya wasifu kabisa kwa kutumia kivinjari chako. Utatumia sifa zote za VSCode.dev tulizochunguza, na mwishoni utakuwa na tovuti nzuri pamoja na uhakika imara katika mtiririko wako mpya wa kazi.
## Endelea Kuchunguza na Kuongeza Ujuzi Wako
Sasa una msingi mzuri, lakini kuna mambo mengi zaidi ya kuvutia ya kugundua! Hapa kuna rasilimali na mawazo ya kukuza ujuzi wako wa VSCode.dev:
Umejenga msingi mzuri sasa, lakini kuna mambo mengi ya kuvutia zaidi ya kugundua! Hapa ni baadhi ya rasilimali na mawazo ya kuinua ujuzi wako wa VSCode.dev hadi ngazi inayofuata:
**Nyaraka rasmi zinazofaa kuwekwa alama:**
- [Nyaraka za VSCode Web](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) Mwongozo kamili wa kuhariri kwa kutumia kivinjari
- [GitHub Codespaces](https://docs.github.com/en/codespaces) Kwa wakati unapotaka nguvu zaidi kwenye wingu
**Nyaraka rasmi za kuenzi:**
- [Nyaraka za Mtandao wa VSCode](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) Mwongozo kamili wa kuhariri kwenye kivinjari
- [GitHub Codespaces](https://docs.github.com/en/codespaces) Kwa wakati unapotaka nguvu zaidi katika wingu
**Vipengele vya kuvutia vya kujaribu baadaye:**
- **Vifupisho vya Kibodi**: Jifunze mchanganyiko wa funguo utakufanya uhisi kama ninja wa msimbo
- **Mipangilio ya Workspace**: Sanidi mazingira tofauti kwa aina tofauti za miradi
- **Multi-root Workspaces**: Fanya kazi kwenye hifadhi nyingi kwa wakati mmoja (inasaidia sana!)
- **Ujumuishaji wa Terminal**: Fikia zana za mstari wa amri moja kwa moja kwenye kivinjari chako
**Vipengele vya kufurahisha vya kujaribu baadaye:**
- **Mifungo ya Kibodi**: Jifunze mchanganyiko wa funguo utakayohisi kama mtaalamu wa kuandika msimbo
- **Mipangilio ya Eneo la Kazi**: Andaa mazingira tofauti kwa aina tofauti za miradi
- **Mazingira ya Kazi ya Msingi Mwingi**: Fanya kazi kwenye hifadhi nyingi kwa wakati mmoja (ni rahisi sana!)
- **Uunganisho wa Terminal**: Pata zana za mstari wa amri moja kwa moja kwenye kivinjari chako
**Mawazo ya kufanya mazoezi:**
- Jiunge na miradi ya chanzo huria na uchangie ukitumia VSCode.dev ni njia nzuri ya kurudisha!
- Jaribu viendelezi tofauti ili kupata mpangilio wako bora
- Unda templeti za miradi kwa aina za tovuti unazojenga mara nyingi
- Fanya mazoezi ya mtiririko wa kazi wa Git kama kuunda matawi na kuunganisha ujuzi huu ni dhahabu katika miradi ya timu
- Jitose kwenye miradi ya chanzo huria na changia kwa kutumia VSCode.dev ni njia nzuri ya kutoa msaada!
- Jaribu vipengele tofauti kutafuta mpangilio wako kamili
- Unda templeti za miradi kwa aina za tovuti unazojenga mara nyingi zaidi
- Fanya mazoezi ya mikondo ya Git kama matawi na mchanganyiko hizi ni dhahabu kwa miradi ya timu
---
**Umebobea katika maendeleo ya msingi wa kivinjari!** 🎉 Kama jinsi uvumbuzi wa vyombo vinavyobebeka uliruhusu wanasayansi kufanya utafiti katika maeneo ya mbali, VSCode.dev inawezesha usimbaji wa kitaalamu kutoka kwa kifaa chochote chenye muunganisho wa intaneti.
**Umeshinda maendeleo ya kivinjari!** 🎉 Kama vile uvumbuzi wa vyombo vinavyobebwa ulivyoruhusu wanasayansi kufanya utafiti katika maeneo ya mbali, VSCode.dev inakuwezesha kuandika msimbo kitaaluma kutoka kifaa chochote kilichounganishwa na intaneti.
Ujuzi huu unaakisi mazoea ya sasa ya sekta watengenezaji wengi wa kitaalamu hutumia mazingira ya maendeleo ya msingi wa wingu kwa kubadilika na upatikanaji wake. Umejifunza mtiririko wa kazi unaoweza kupanuka kutoka miradi ya mtu binafsi hadi ushirikiano wa timu kubwa.
Stadi hizi zinaonyesha mbinu za sasa za sekta watengenezaji wengi wa kitaalamu hutumia mazingira ya maendeleo ya wingu kwa ugumu na upatikanaji wake. Umejifunza mtiririko wa kazi unaobadilika kutoka kwenye miradi ya mtu binafsi hadi ushirikiano mkubwa wa timu.
Tumia mbinu hizi kwenye mradi wako wa maendeleo unaofuata! 🚀
Tumia mbinu hizi kwa mradi wako unaofuata wa maendeleo! 🚀
---
**Kanusho**:
Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tangazo la Kukataa**:
Nyaraka 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 kiotomatiki zinaweza kuwa na makosa au kasoro. Nyaraka asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo halali. Kwa taarifa muhimu, tafsiri ya kitaalamu inayofanywa na binadamu inashauriwa. Hatuwajibiki kwa kutokuelewana au tafsiri potofu zinazotokana na matumizi ya tafsiri hii.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -78,7 +78,7 @@ Kwa kuwa VSCode.dev inahitaji angalau faili moja kufungua hifadhi, tutaunda fail
4. **Andika** ujumbe wa kujitolea: "Ongeza muundo wa awali wa HTML"
5. **Bonyeza** "Commit new file" ili kuhifadhi mabadiliko yako
![Kuunda faili ya awali kwenye GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sw.png)
![Kuunda faili ya awali kwenye GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.sw.png)
**Hiki ndicho uanzishaji huu wa awali unakamilisha:**
- **Unaunda** muundo sahihi wa hati ya HTML5 na vipengele vya kimantiki
@ -104,7 +104,7 @@ Sasa kwa kuwa msingi wa hifadhi yako umeanzishwa, hebu tubadilishe kwa VSCode.de
**Kiashiria cha mafanikio**: Unapaswa kuona faili za mradi wako kwenye upau wa kando wa Explorer na `index.html` ikipatikana kwa kuhariri kwenye eneo kuu la mhariri.
![Mradi umepakiwa kwenye VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sw.png)
![Mradi umepakiwa kwenye VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.sw.png)
**Unachokiona kwenye kiolesura:**
- **Upau wa kando wa Explorer**: **Unaonyesha** faili za hifadhi yako na muundo wa folda
@ -448,7 +448,7 @@ Viendelezi vinaboresha uzoefu wako wa maendeleo kwa kutoa uwezo wa hakikisho la
**Matokeo ya haraka baada ya usakinishaji:**
Mara tu CodeSwing itakaposakinishwa, utaona hakikisho la moja kwa moja la tovuti yako ya resume likijitokeza kwenye mhariri. Hii inakuwezesha kuona jinsi tovuti yako inavyoonekana unavyofanya mabadiliko.
![Kiendelezi cha CodeSwing kikionyesha hakikisho la moja kwa moja](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sw.png)
![Kiendelezi cha CodeSwing kikionyesha hakikisho la moja kwa moja](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.sw.png)
**Kuelewa kiolesura kilichoboreshwa:**
- **Muonekano wa mgawanyiko**: **Unaonyesha** msimbo wako upande mmoja na hakikisho la moja kwa moja upande mwingine

File diff suppressed because it is too large Load Diff

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8b9d0562ea649b6012d1a67acc630681",
"translation_date": "2025-10-24T19:08:51+00:00",
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-07T01:14:03+00:00",
"source_file": "README.md",
"language_code": "sw"
}
@ -10,247 +10,271 @@ CO_OP_TRANSLATOR_METADATA:
[![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/)
[![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 kuvuta ya 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)
[![Maombi ya GitHub pull](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)
[![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/)
[![Forks za 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/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![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/)
[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Maendeleo ya Wavuti kwa Kompyuta - Mtaala
# Maendeleo ya Tovuti kwa Waanzilishi - Mtaala
Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu ya wiki 12 iliyotolewa na Microsoft Cloud Advocates. Kila somo kati ya masomo 24 linachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama terrariums, viendelezi vya kivinjari, na michezo ya anga. Shirikiana na maswali, mijadala, na kazi za vitendo. Boresha ujuzi wako na uimarisha maarifa yako kwa kutumia mbinu yetu ya kujifunza kwa miradi. Anza safari yako ya usimbaji leo!
Jifunze misingi ya maendeleo ya tovuti kupitia kozi yetu kamili ya wiki 12 inayotolewa na Microsoft Cloud Advocates. Kila somo kati ya 24 linaangazia JavaScript, CSS, na HTML kupitia miradi ya vitendo kama vile terrariums, virahisi vya kivinjari, na michezo ya anga. Jihusishe na maswali ya mtihani, majadiliano, na kazi za vitendo. Boresha ujuzi wako na uboresha uhifadhi wa maarifa yako kupitia mbinu zetu bora za kufundisha zinazotegemea miradi. Anza safari yako ya kuandika programu leo!
Jiunge na Jumuiya ya Discord ya Azure AI Foundry
Jiunge na Jumuiya ya Azure AI Foundry Discord
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Fuata hatua hizi kuanza kutumia rasilimali hizi:
1. **Fork Hifadhi**: Bonyeza [![Forks za 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. **Clone Hifadhi**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Jiunge na Azure AI Foundry Discord na kutana na wataalamu na watengenezaji wenzako**](https://discord.com/invite/ByRwuEEgH4)
1. **Fanya Nakala ya Repositori**: Bonyeza [![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. **Nakili Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Jiunge na Azure AI Foundry Discord na kutana na wataalamu na waendelezaji wenza**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Msaada wa Lugha Nyingi
### 🌐 Usaidizi wa Lugha Nyingi
#### Inasaidiwa kupitia GitHub Action (Imejiendesha & Daima Imeboreshwa)
#### Unaungwa mkono kupitia GitHub Action (Otoma na Daima Imesasishwa)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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](./README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Kiarabu](../ar/README.md) | [Kibengali](../bn/README.md) | [Kibulgaria](../bg/README.md) | [Kiburma (Myanmar)](../my/README.md) | [Kichina (Rahisi)](../zh/README.md) | [Kichina (Marefu, Hong Kong)](../hk/README.md) | [Kichina (Marefu, Macau)](../mo/README.md) | [Kichina (Marefu, Taiwan)](../tw/README.md) | [Kikroeshia](../hr/README.md) | [Kicheki](../cs/README.md) | [Kideni](../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) | [Kiindonesia](../id/README.md) | [Kiitaliano](../it/README.md) | [Kijapani](../ja/README.md) | [Kikannada](../kn/README.md) | [Kikorea](../ko/README.md) | [Kilituwania](../lt/README.md) | [Kimalay](../ms/README.md) | [Kimalayalamu](../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) | [Kipolishi](../pl/README.md) | [Kireno (Brazil)](../br/README.md) | [Kireno (Portugal)](../pt/README.md) | [Kipunjabi (Gurmukhi)](../pa/README.md) | [Kiromania](../ro/README.md) | [Kirusi](../ru/README.md) | [Kiserbia (Cyrillic)](../sr/README.md) | [Kislovak](../sk/README.md) | [Kislovenia](../sl/README.md) | [Kihispania](../es/README.md) | [Kiswahili](./README.md) | [Kiswidi](../sv/README.md) | [Kitagalog (Kifilipino)](../tl/README.md) | [Kitamil](../ta/README.md) | [Kitelugu](../te/README.md) | [Kitailandi](../th/README.md) | [Kituruki](../tr/README.md) | [Kiukraine](../uk/README.md) | [Kiurdu](../ur/README.md) | [Kivietinamu](../vi/README.md)
> **Ungependa Kukopi Kwenye Kompyuta Yako?**
> Repositori hii ina tafsiri zaidi ya 50 za lugha ambazo huongeza ukubwa wa faili kupakuliwa. Ili kukopi bila tafsiri, tumia sparse checkout:
> ```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 kukamilisha kozi kwa upakuaji wa haraka zaidi.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ikiwa ungependa kuwa na msaada wa lugha za ziada, orodha ya lugha zinazosaidiwa inapatikana [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ikiwa unataka lugha za tafsiri zaidi zinazoungwa mkono ziko [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)
#### 🧑‍🎓 _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 za wanaoanza, vifurushi vya wanafunzi na hata njia za kupata vocha ya cheti cha bure. Huu ni ukurasa unaopaswa kuhifadhi na kuangalia mara kwa mara kwani tunabadilisha maudhui kila mwezi.
Tembelea [**ukurasa wa Student Hub**](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 bila malipo. Huu ni ukurasa unayotakiwa kuweka alama na kuangalia mara kwa mara wakati 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 kukamilisha!
Changamoto mpya imeongezwa, tafuta "Changamoto ya Wakala wa GitHub Copilot 🚀" katika sura nyingi. Hii ni changamoto mpya kwako kukamilisha kwa kutumia GitHub Copilot na hali ya Wakala. Ikiwa hujawahi kutumia hali ya Wakala hapo awali, ina uwezo wa si tu kuunda maandishi bali pia kuunda na kuhariri faili, kuendesha amri na zaidi.
Changamoto Mpya imeongezwa, tazama "GitHub Copilot Agent Challenge 🚀" katika sura nyingi. Hiyo ni changamoto mpya ya kukamilisha ukitumia GitHub Copilot na Agent mode. Ikiwa hujawahi kutumia Agent mode hapo awali, ina uwezo wa si tu kuunda maandishi bali pia kuunda na kuhariri faili, kuendesha amri na zaidi.
### 📣 Tangazo - _Mradi Mpya wa kujenga kwa kutumia AI ya Kizazi_
### 📣 Tangazo - _Mradi Mpya wa kujenga ukitumia AI Inayozalisha_
Mradi mpya wa Msaidizi wa AI umeongezwa tu, angalia [mradi](./09-chat-project/README.md)
Mradi mpya wa Msaidizi wa AI umeongezwa tu, angalia [mradi](./9-chat-project/README.md)
### 📣 Tangazo - _Mtaala Mpya_ wa AI ya Kizazi kwa JavaScript umetolewa tu
### 📣 Tangazo - _Mtaala Mpya_ juu ya AI Inayozalisha kwa JavaScript umeachiliwa hivi karibuni
Usikose mtaala wetu mpya wa AI ya Kizazi!
Usikose mtaala wetu mpya wa AI Inayozalisha!
Tembelea [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kuanza!
![Mandhari](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.sw.png)
![Background](../../translated_images/background.148a8d43afde5730.sw.png)
- Masomo yanayofunika kila kitu kutoka kwa misingi hadi RAG.
- Shirikiana na wahusika wa kihistoria kwa kutumia GenAI na programu yetu ya msaidizi.
- Hadithi ya kufurahisha na ya kuvutia, utasafiri kwa wakati!
- Masomo yanayofunika kila kitu kutoka misingi hadi RAG.
- Shirikiana na wahusika wa kihistoria ukitumia GenAI na programu yetu ya msaidizi.
- Hadithi za kufurahisha na kuvutia, utasafiri kwa wakati!
![mhusika](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.sw.png)
![character](../../translated_images/character.5c0dd8e067ffd693.sw.png)
Kila somo linajumuisha kazi ya kukamilisha, ukaguzi wa maarifa na changamoto ya kukuongoza kujifunza mada kama:
- Kuunda maelezo na uhandisi wa maelezo
Kila somo lina kazi ya kukamilisha, ukaguzi wa maarifa na changamoto ya kukuongoza kujifunza mada kama:
- Kuanzisha na uhandisi wa kuanzisha
- Uundaji wa programu za maandishi na picha
- Programu za utafutaji
Tembelea [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) kuanza!
## 🌱 Kuanzisha
> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [kwenye jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Wanafunzi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na jaribio la awali la mihadhara na uendelee kwa kusoma nyenzo za mihadhara, ukamilishe shughuli mbalimbali na uhakiki uelewa wako kwa jaribio la baada ya mihadhara.
## 🌱 Kuanzishwa
> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [katika jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya kazi kwenye miradi pamoja! Mijadala inahimizwa katika [jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itapatikana kujibu maswali yako.
**[Wanafunzi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na mtihani wa kabla ya somo na fuata kwa kusoma nyenzo ya somo, kukamilisha shughuli mbalimbali na angalia uelewa wako kwa mtihani wa baada ya somo.
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 masomo.
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzao kufanya kazi kwa pamoja miradi! Majadiliano yanahimizwa katika [jukwaa letu la majadiliano](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwa tayari kujibu maswali yako.
### 📋 Kuandaa mazingira 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 kusoma.
Mtaala huu una mazingira ya maendeleo tayari! Unapoanza unaweza kuchagua kuendesha mtaala katika [Codespace](https://github.com/features/codespaces/) (_mazingira yanayotumia kivinjari, hakuna haja ya kusakinisha_), au kwa ndani kwenye kompyuta yako kwa kutumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
### 📋 Kuweka mazingira yako
#### Unda hifadhi yako
Ili kuokoa kazi yako kwa urahisi, inashauriwa kwamba uunde nakala yako mwenyewe 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.
Mtaala huu una mazingira ya maendeleo tayari! Unapoanza unaweza kuchagua kuendesha mtaala katika [Codespace](https://github.com/features/codespaces/) (_mazingira ya kivinjari, hakuna usakinishaji unaohitajika_), au kwa ndani kwenye kompyuta yako ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Unda repositori yako
Ili iwe rahisi kuhifadhi kazi yako, inashauriwa kuunda nakala yako mwenyewe ya repositori hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Tumia templeti hii** kilele cha ukurasa. Hii itaunda repositori mpya katika akaunti yako ya GitHub ikiwa na nakala ya mtaala.
Fuata hatua hizi:
1. **Fork Hifadhi**: Bonyeza kitufe cha "Fork" kwenye kona ya juu-kulia ya ukurasa huu.
2. **Clone Hifadhi**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fanya Nakala ya Repositori**: Bonyeza kitufe cha "Fork" kona ya juu ya kulia ya ukurasa huu.
2. **Nakili Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Kuendesha mtaala katika Codespace
Katika nakala yako ya hifadhi hii uliyoijenga, bonyeza kitufe cha **Code** na uchague **Fungua na Codespaces**. Hii itaunda Codespace mpya kwako kufanya kazi ndani yake.
Katika nakala yako ya repositori uliyounda, bonyeza kitufe cha **Code** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya ya kufanya kazi ndani yake.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.sw.png)
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.sw.png)
#### Kuendesha mtaala kwa ndani kwenye kompyuta yako
#### Kuendesha mtaala ndani ya kompyuta yako
Ili kuendesha mtaala huu kwa ndani kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na zana ya mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Zana za Kazi](../../1-getting-started-lessons/1-intro-to-programming-languages), litakutembeza kupitia chaguo mbalimbali za kila moja ya zana hizi ili uchague kinachokufaa zaidi.
Ili kuendesha mtaala huu ndani ya kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na chombo cha mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Kuprogramu na Vifaa vya Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za zana hizi ili uchague inayofaa zaidi kwako.
Pendekezo letu 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).
Tunapendekeza 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) builtin. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Code** na kunakili URL:
[CodeSpace](./images/createcodespace.png)
1. Nakili repositori yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Code** na kunakili URL:
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 `<your-repository-url>` na URL uliyonakili:
[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 `<your-repository-url>` na URL uliyokuwa umetumia:
```bash
git clone <your-repository-url>
```
2. Fungua folda katika Visual Studio Code. Unaweza kufanya hivyo kwa kubonyeza **Faili** > **Fungua Folda** na kuchagua folda uliyoklon.
2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivi kwa kubofya **File** > **Open Folder** na kuchagua folda uliyokuwa umetengeneza nakala yake.
> Viendelezi vya Visual Studio Code vinavyopendekezwa:
> Upanuzi uliopendekezwa wa Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuonyesha kurasa za 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuangalia mapema kurasa za 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 zaidi
## 📂 Kila somo linajumuisha:
- sketchnote ya hiari
- video ya ziada ya hiari
- jaribio la kujiandaa kabla ya somo
- sketchnote hiari
- video ya ziada hiari
- mtihani wa kuamka kabla ya somo
- somo lililoandikwa
- kwa masomo yanayozingatia miradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi
- ukaguzi wa maarifa
- kwa masomo yanayotegemea miradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi
- vipimo vya maarifa
- changamoto
- usomaji wa ziada
- kazi ya nyumbani
- [jaribio baada ya somo](https://ff-quizzes.netlify.app/web/)
- [mtihani wa baada ya somo](https://ff-quizzes.netlify.app/web/)
> **Maelezo kuhusu majaribio**: Majaribio yote yamejumuishwa kwenye folda ya Quiz-app, jumla ya majaribio 48 yenye maswali matatu kila moja. Yanapatikana [hapa](https://ff-quizzes.netlify.app/web/) programu ya jaribio inaweza kuendeshwa kwa ndani au kupelekwa kwenye Azure; fuata maelekezo kwenye folda ya `quiz-app`.
> **Kidokezo kuhusu mitihani**: Mitihani yote iko ndani ya folda ya Quiz-app, jumla ya mitihani 48 yenye maswali matatu kila mmoja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/) app ya mtihani inaweza kuendeshwa mahali hapa au kuiweka kwenye Azure; fuata maelekezo katika folda ya `quiz-app`.
## 🗃️ Masomo
| | Jina la Mradi | Dhana Zinazofundishwa | Malengo ya Kujifunza | Somo Lililounganishwa | Mwandishi |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Kuanza | Utangulizi wa Uprogramu na Zana za Kazi | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia watengenezaji wa programu kufanya kazi zao | [Utangulizi wa Lugha za Uprogramu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanza | Misingi ya GitHub, ikijumuisha kufanya kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa programu | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanza | Ufikiaji | Jifunze misingi ya ufikiaji wa wavuti | [Misingi ya Ufikiaji](./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 kudhibiti mtiririko wa mantiki wa programu | [Kazi na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher |
| 06 | Misingi ya JS | Kufanya Maamuzi na 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 | Arrays na Loops | Fanya kazi na data kwa kutumia arrays na loops katika JavaScript | [Arrays na Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML kwa Vitendo | Jenga HTML ili kuunda terrarium mtandaoni, ukizingatia kuunda mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS kwa Vitendo | Jenga CSS ili kuunda mtindo wa terrarium mtandaoni, ukizingatia misingi ya CSS ikijumuisha kufanya ukurasa uwe msikivu | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, Manipulasi ya DOM | Jenga JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha drag/drop, ukizingatia closures na manipulasi ya DOM | [JavaScript Closures, Manipulasi ya 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 kuunda 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 | Jenga vipengele vya JavaScript vya kiendelezi chako cha kivinjari ili kuita API kwa kutumia vigezo vilivyohifadhiwa kwenye 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) | Michakato ya nyuma ya kivinjari, utendaji wa wavuti | Tumia michakato ya nyuma ya kivinjari kudhibiti ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya uboreshaji wa 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 Mchezo wa Juu na JavaScript | Jifunze kuhusu Urithi kwa kutumia Darasa na Muundo na muundo wa Pub/Sub, kama maandalizi ya kujenga mchezo | [Utangulizi wa Maendeleo ya Juu ya Mchezo](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye canvas | 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) | Kusogeza vipengele kwenye skrini | Gundua jinsi vipengele vinavyoweza kupata mwendo kwa kutumia kuratibu za 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) | Kugundua Migongano | Fanya vipengele vigongane na kuathiriana kwa kutumia kubonyeza vitufe na toa kazi ya kupoza ili kuhakikisha utendaji wa mchezo | [Kugundua Migongano](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhesabu Alama | Fanya mahesabu ya hesabu kulingana na hali ya mchezo na utendaji | [Kuhesabu Alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kumaliza na kuanzisha tena mchezo | Jifunze kuhusu kumaliza na kuanzisha tena mchezo, ikijumuisha 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 Programu ya Wavuti | Jifunze jinsi ya kuunda muundo wa usanifu wa tovuti yenye kurasa nyingi kwa kutumia njia 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 kujenga fomu na kushughulikia taratibu za uthibitishaji | [Fomu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Njia za Kupata na Kutumia Data | Jinsi data inavyotiririka ndani na nje ya programu yako, jinsi ya kuipata, kuihifadhi, 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 programu yako inavyohifadhi hali na jinsi ya kuisimamia kwa programu | [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 |
| | Jina la Mradi | Misingi Iliyofundishwa | Malengo ya Kujifunza | Somo Lililohusishwa | Mwandishi |
| :-: | :-------------------------------------------------------: | :-------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :------------------------: |
| 01 | Kuanzia | Utangulizi wa Uprogramu na Zana za Biashara | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia watengenezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Kuprogramu na Zana za Biashara](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanzia | Misingi ya GitHub, pamoja na kufanya kazi na timu | Jinsi ya kutumia GitHub kwenye mradi wako, jinsi ya kushirikiana na wengine kwenye msingi wa msimbo | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanzia | Ufikikaji | Jifunze misingi ya ufikikaji wa wavuti | [Misingi ya Ufikikaji](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Misingi | 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 | JS Misingi | 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 | JS Misingi | Kufanya Maamuzi kwa JS | Jifunze jinsi ya kuunda masharti katika msimbo wako kwa kutumia mbinu za kufanya maamuzi | [Kutegemea Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Misingi | Arrays na Loops | Fanya kazi na data kwa kutumia arrays na loops ndani ya JavaScript | [Arrays na Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Mazoezi | Jenga HTML kuunda terrarium mtandaoni, ukizingatia muundo | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Katika Mazoezi | Jenga CSS kupendeza terrarium mtandaoni, ukizingatia misingi ya CSS ikijumuisha kufanya kurasa itumike kwenye vifaa tofauti | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Mifungo ya JavaScript, uendeshaji wa DOM | Jenga JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/acha, ukizingatia mifungo na uendeshaji wa DOM | [Mifungo ya 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 Kuandikia | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript | [Uprogramu Inayotegemea 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 mwanzo 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) | J constructing form, calling an API and storing variables in local storage | Jenga vipengele vya JavaScript vya kiendelezi chako cha kivinjari ili kuitumia API kwa kutumia variable zilizohifadhiwa 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 wavuti | Tumia michakato ya nyuma ya kivinjari kusimamia ikoni ya kiendelezi; jifunze kuhusu utendaji wavuti na marekebisho kadhaa | [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 kwa kutumia Darasa na Muundo pamoja na muundo wa Pub/Sub, kwa ajili ya kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo Juu Zaidi](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye kanausi | Jifunze kuhusu Canvas API, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Kanausi](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Kusogeza vipengele kuzunguka skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia kuratibu za karthesiani na Canvas API | [Kusogeza Vipengele](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kugundua migongano | Fanya vipengele vigongane na kuathiriana kwa kutumia vibonye vya kibodi na toa kipengele cha kupumzika ili kuhakikisha utendaji | [Kugundua 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 utendaji 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, ikijumuisha kusafisha mali na kuweka upya thamani za variable | [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 kwenye Programu ya Wavuti | Jifunze jinsi ya kuunda msingi wa muundo wa tovuti yenye kurasa nyingi kwa kutumia njia 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 kujenga fomu na kushughulikia taratibu za uthibitishaji | [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 inavyosogea ndani na nje ya programu 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) | Misingi ya Usimamizi wa Hali | Jifunze jinsi programu yako inavyohifadhi hali na jinsi ya kuisimamia kwa mpangilio wa programu | [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 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 |
## 🏫 Pedagogia
## 🏫 Mbinu za Kufundishia
Mtaala wetu umeundwa kwa misingi miwili muhimu ya kifikra:
* kujifunza kwa misingi ya miradi
* mitihani ya mara kwa mara
Mtaala wetu umeundwa kwa kuzingatia kanuni mbili kuu za pedagogia:
* kujifunza kwa msingi wa miradi
* majaribio ya mara kwa mara
Mpango wa masomo hufundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu mpya zinazotumika na watengenezaji wa wavuti wa leo. Wanafunzi watakuwa na fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya mtandaoni, kiendelezi cha kivinjari rafiki kwa mazingira, mchezo wa aina ya uvamizi wa anga, na programu ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa na uelewa thabiti wa maendeleo ya wavuti.
Programu inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za kisasa zinazotumiwa na watengenezaji wa wavuti wa leo. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya mtandaoni, kiendelezi cha kivinjari kinachojali mazingira, mchezo wa mtindo wa space-invader, na programu ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa wamepata uelewa mzuri wa maendeleo ya wavuti.
> 🎓 Unaweza kuchukua masomo ya kwanza machache 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!
> 🎓 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!
Kwa kuhakikisha maudhui yanalingana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaongezeka. Pia tuliandika masomo kadhaa ya kuanzisha kuhusu misingi ya JavaScript ili kuanzisha dhana, sambamba 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 walisaidia kuandaa mtaala huu.
Kwa kuhakikisha kuwa maudhui yanalingana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaongezeka. Pia tuliandika masomo kadhaa ya kuanzia katika misingi ya JavaScript ili kuanzisha dhana, pamoja na video kutoka kwa "[Mfululizo wa Wanaoanza: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" mkusanyiko wa mafunzo ya video, baadhi ya waandishi wake walichangia mtaala huu.
Vilevile, mtihani wa kiwango kidogo kabla ya darasa huweka nia ya mwanafunzi kuelekea kujifunza mada, wakati mtihani wa pili baada ya darasa huhakikisha uhifadhi zaidi. Mtaala huu umeundwa kuwa na unyumbufu na kufurahisha na unaweza kuchukuliwa kwa jumla au sehemu. Miradi huanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Zaidi ya hayo, jaribio lenye hatari ndogo kabla ya darasa linaweka nia ya mwanafunzi kuelekea kujifunza mada, wakati jaribio la pili baada ya darasa linahakikisha uhifadhi zaidi. Mtaala huu uliundwa kuwa rahisi na wa kufurahisha na unaweza kuchukuliwa kwa ukamilifu au kwa sehemu. Miradi huanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Ingawa tumeweka mkazo wa kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mtengenezaji wa wavuti kabla ya kutumia mfumo, hatua nzuri inayofuata kutimiza mtaala huu ni 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)".
Wakati tumekusudia kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mtengenezaji wa wavuti kabla ya kupitisha mfumo, hatua nzuri inayofuata baada ya kukamilisha mtaala huu itakuwa kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Mfululizo wa Wanaoanza: 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 [Kushiriki](CONTRIBUTING.md). Tunakukaribisha maoni yako ya kujenga!
> Tembelea [Kanuni za Maadili](CODE_OF_CONDUCT.md) na miongozo ya [Kuchangia](CONTRIBUTING.md). Tunakaribisha maoni yako ya kujenga!
## 🧭 Ufikiaji wa Nje ya Mtandao
## 🧭 Upatikanaji wa nje ya mtandao
Unaweza kuendesha nyaraka hizi nje ya mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Fork repo hii, [sakinisha Docsify](https://docsify.js.org/#/quickstart) kwenye mashine yako ya ndani, kisha kwenye folda ya mizizi ya repo hii, andika `docsify serve`. Tovuti itahudumiwa kwenye bandari 3000 kwenye localhost yako: `localhost:3000`.
Unaweza kuendesha nyaraka hizi nje ya mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Fikiria hii repo, [weka Docsify](https://docsify.js.org/#/quickstart) kwenye mashine yako ya karibu, kisha katika folda kuu ya repo hii, andika `docsify serve`. Tovuti itatumiwa kwenye bandari 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 inazalisha kozi nyingine! Angalia:
## 🎒 Kozi Nyingine
Timu yetu hutengeneza kozi nyingine! Angalia:
### 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 kwa Kompyuta](https://img.shields.io/badge/Edge%20AI%20kwa%20Kompyuta-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP kwa Kompyuta](https://img.shields.io/badge/MCP%20kwa%20Kompyuta-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Wakala wa AI kwa Kompyuta](https://img.shields.io/badge/Wakala%20wa%20AI%20kwa%20Kompyuta-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j kwa Waanzilishi](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 kwa Waanzilishi](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)
---
### Mfululizo wa AI ya Kizazi
[![AI ya Kizazi kwa Kompyuta](https://img.shields.io/badge/AI%20ya%20Kizazi%20kwa%20Kompyuta-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI ya Kizazi (.NET)](https://img.shields.io/badge/AI%20ya%20Kizazi%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)
[![AI ya Kizazi (Java)](https://img.shields.io/badge/AI%20ya%20Kizazi%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)
[![AI ya Kizazi (JavaScript)](https://img.shields.io/badge/AI%20ya%20Kizazi%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)
### Azure / Edge / MCP / Wakala
[![AZD kwa Waanzilishi](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 kwa Waanzilishi](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 kwa Waanzilishi](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)
[![Makala wa AI kwa Waanzilishi](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)
---
### Mafunzo ya Msingi
[![ML kwa Kompyuta](https://img.shields.io/badge/ML%20kwa%20Kompyuta-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Sayansi ya Takwimu kwa Kompyuta](https://img.shields.io/badge/Sayansi%20ya%20Takwimu%20kwa%20Kompyuta-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI kwa Kompyuta](https://img.shields.io/badge/AI%20kwa%20Kompyuta-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Usalama wa Mtandao kwa Kompyuta](https://img.shields.io/badge/Usalama%20wa%20Mtandao%20kwa%20Kompyuta-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Maendeleo ya Wavuti kwa Kompyuta](https://img.shields.io/badge/Maendeleo%20ya%20Wavuti%20kwa%20Kompyuta-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT kwa Kompyuta](https://img.shields.io/badge/IoT%20kwa%20Kompyuta-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Maendeleo ya XR kwa Kompyuta](https://img.shields.io/badge/Maendeleo%20ya%20XR%20kwa%20Kompyuta-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Mfululizo wa AI Inayounda
[![AI Inayounda kwa Waanzilishi](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)
[![AI Inayounda (.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)
[![AI Inayounda (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)
[![AI Inayounda (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)
---
### Kujifunza Msingi
[![ML kwa Waanzilishi](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)
[![Sayansi ya Takwimu kwa Waanzilishi](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 kwa Waanzilishi](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)
[![Usalama wa Mtandao kwa Waanzilishi](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)
[![Uendelezaji wa Wavuti kwa Waanzilishi](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 kwa Waanzilishi](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)
[![Maendeleo ya XR kwa Waanzilishi](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)
### Mfululizo wa Copilot
[![Copilot kwa Uandishi wa Programu ya Pamoja ya AI](https://img.shields.io/badge/Copilot%20kwa%20Uandishi%20wa%20Programu%20ya%20Pamoja%20ya%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot kwa C#/.NET](https://img.shields.io/badge/Copilot%20kwa%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)
[![Safari ya Copilot](https://img.shields.io/badge/Safari%20ya%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
---
### Mfululizo wa Copilot
[![Copilot kwa Programu za Pamoja za AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot kwa 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)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Kupata Msaada
## Kupata Msaada
Ikiwa unakwama au una maswali kuhusu kujenga programu za AI, jiunge:
Kama unagongwa au una maswali yoyote kuhusu ujenzi wa programu za AI. Jiunge na wajasiriamali wenzako na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii yenye msaada ambapo maswali yanakaribishwa na maarifa yanashirikiwa kwa uhuru.
[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Jamii_ya_Discord_ya_Azure_AI_Foundry-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ikiwa una maoni kuhusu bidhaa au makosa wakati wa kujenga tembelea:
Kama una maoni au makosa wakati wa kujenga tembelea:
[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Jukwaa_la_Watengenezaji_wa_Azure_AI_Foundry-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)
## Leseni
## Leseni
Hifadhi hii imesajiliwa chini ya leseni ya MIT. Tazama faili ya [LICENSE](../../LICENSE) kwa maelezo zaidi.
Hifadhidata hii imepewa leseni chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
---
**Kanusho**:
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 kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**FAQADHALI**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri 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 kutokamilika. Hati asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu kutoka kwa mtu inashauriwa. Hatubebei dhamana kwa maelewano mabaya au tafsiri potofu zinazotokana na matumizi ya tafsiri hii.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -42,10 +42,10 @@ Mtaala huu unajumuisha pakiti zinazoweza kuingizwa kwa kazi za kawaida za LMS.
- Moodle Cloud ina msaada mdogo wa Common Cartridge. Pendekeza faili ya Moodle hapo juu, ambayo pia inaweza kupakiwa kwenye Canvas.
- Baada ya kuingiza, hakiki moduli, tarehe za mwisho, na mipangilio ya majaribio ili kuendana na ratiba ya muhula wako.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.sw.png)
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.sw.png)
> Mtaala katika darasa la Moodle
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.sw.png)
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.sw.png)
> Mtaala katika Canvas
### Kutumia hifadhi moja kwa moja (bila Classroom)

@ -17,7 +17,7 @@ Alam mo, naiintindihan ko kung bakit nakakatakot ang programming sa simula. Noon
Ngayon, sisilipin natin ang mga kamangha-manghang tools na ginagawang posible ang modernong web development at sobrang nakakaadik! Pinag-uusapan natin ang parehong editors, browsers, at workflows na ginagamit ng mga developer sa Netflix, Spotify, at sa paborito mong indie app studio araw-araw. At eto ang magpapasayaw sa'yo: karamihan sa mga propesyonal-grade, industry-standard tools na ito ay ganap na libre!
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.tl.png)
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ Alam kong maaaring nakakatakot ito sa simula naalala ko pa noong una kong ti
Sama-sama nating tatahakin ang paglalakbay na ito, hakbang-hakbang. Walang pagmamadali, walang pressure ikaw, ako, at ilang napakagandang tool na magiging bago mong matalik na kaibigan!
![Panimula sa GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.tl.png)
![Panimula sa GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Una, maghanap tayo ng repository (o **repo**) sa GitHub na interesado ka at kung
✅ Isang magandang paraan para makahanap ng 'beginner-friendly' na mga repo ay [maghanap gamit ang tag na 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Kopyahin ang repo sa lokal](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.tl.png)
![Kopyahin ang repo sa lokal](../../../../translated_images/clone_repo.5085c48d666ead57.tl.png)
May ilang paraan para kopyahin ang code. Isa sa mga paraan ay "i-clone" ang nilalaman ng repository, gamit ang HTTPS, SSH, o gamit ang GitHub CLI (Command Line Interface).

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Paglikha ng Accessible na Mga Webpage
![Lahat Tungkol sa Accessibility](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.tl.png)
![Lahat Tungkol sa Accessibility](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Mga Pangunahing Kaalaman sa JavaScript: Mga Uri ng Data
![Mga Pangunahing Kaalaman sa JavaScript - Mga Uri ng Data](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.tl.png)
![Mga Pangunahing Kaalaman sa JavaScript - Mga Uri ng Data](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Mga Pangunahing Kaalaman sa JavaScript: Mga Pamamaraan at Function
![Mga Pangunahing Kaalaman sa JavaScript - Mga Function](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.tl.png)
![Mga Pangunahing Kaalaman sa JavaScript - Mga Function](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Mga Pangunahing Kaalaman sa JavaScript: Paggawa ng Desisyon
![Mga Pangunahing Kaalaman sa JavaScript - Paggawa ng Desisyon](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.tl.png)
![Mga Pangunahing Kaalaman sa JavaScript - Paggawa ng Desisyon](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Mga Pangunahing Kaalaman sa JavaScript: Arrays at Loops
![Mga Pangunahing Kaalaman sa JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.tl.png)
![Mga Pangunahing Kaalaman sa JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![Panimula sa HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.tl.png)
![Panimula sa HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
Ang HTML, o HyperText Markup Language, ang pundasyon ng bawat website na iyong binisita. Isipin ang HTML bilang balangkas na nagbibigay ng istruktura sa mga web page ito ang nagtatakda kung saan ilalagay ang nilalaman, paano ito iaayos, at ano ang kinakatawan ng bawat bahagi. Habang ang CSS ang magpapaganda sa iyong HTML gamit ang mga kulay at layout, at ang JavaScript ang magdadagdag ng interaktibidad, ang HTML ang nagbibigay ng mahalagang istruktura na nagpapahintulot sa lahat ng iba pang aspeto na maging posible.
@ -88,7 +88,7 @@ Gagawa ka ng dedikadong folder para sa iyong proyekto ng terrarium at magdadagda
4. Sa Explorer pane, i-click ang "New File" icon
5. Pangalanan ang iyong file na `index.html`
![VS Code Explorer na nagpapakita ng paggawa ng bagong file](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.tl.png)
![VS Code Explorer na nagpapakita ng paggawa ng bagong file](../../../../translated_images/vs-code-index.e2986cf919471eb9.tl.png)
**Opsyon 2: Gamit ang Terminal Commands**
```bash

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![Panimula sa CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.tl.png)
![Panimula sa CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
Naalala mo ba kung gaano kasimple ang hitsura ng iyong HTML terrarium? Sa CSS, binabago natin ang simpleng istruktura na iyon upang maging mas kaakit-akit sa paningin.
@ -205,7 +205,7 @@ body {
Buksan ang developer tools ng iyong browser (F12), pumunta sa Elements tab, at i-inspect ang iyong `<h1>` element. Makikita mo na namamana nito ang font family mula sa body:
![namana na font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.tl.png)
![namana na font](../../../../translated_images/1.cc07a5cbe114ad1d.tl.png)
**Experiment Time**: Subukang mag-set ng iba pang inheritable properties sa `<body>` tulad ng `color`, `line-height`, o `text-align`. Ano ang nangyayari sa iyong heading at iba pang elemento?
@ -599,7 +599,7 @@ Handa ka na bang pagandahin ang iyong terrarium gamit ang realistic glass reflec
Gagawa ka ng subtle highlights na ginagaya kung paano nagre-reflect ang ilaw sa glass surfaces. Ang approach na ito ay kahalintulad ng paraan ng mga pintor noong Renaissance tulad ni Jan van Eyck na gumamit ng ilaw at reflection upang gawing three-dimensional ang painted glass. Narito ang layunin mo:
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.tl.png)
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.tl.png)
**Ang iyong hamon:**
- **Gumawa** ng subtle white o light-colored oval shapes para sa glass reflections

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM at isang closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.tl.png)
![DOM at isang closure](../../../../translated_images/webdev101-js.10280393044d7eaa.tl.png)
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
Maligayang pagdating sa isa sa mga pinaka-kapanapanabik na aspeto ng web development - ang paggawa ng mga bagay na interactive! Ang Document Object Model (DOM) ay parang tulay sa pagitan ng iyong HTML at JavaScript, at ngayon gagamitin natin ito upang buhayin ang iyong terrarium. Nang likhain ni Tim Berners-Lee ang unang web browser, inisip niya ang isang web kung saan ang mga dokumento ay maaaring maging dynamic at interactive - ang DOM ang nagpapaganap ng pangitain na iyon.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![Representasyon ng DOM tree](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.tl.png)
![Representasyon ng DOM tree](../../../../translated_images/dom-tree.7daf0e763cbbba92.tl.png)
> Isang representasyon ng DOM at ang HTML markup na tumutukoy dito. Mula kay [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Pag-unawa sa Closures**: Ang closures ay isang mahalagang paksa sa JavaScript, at maraming developer ang gumagamit nito sa loob ng maraming taon bago lubos na maunawaan ang lahat ng teoretikal na aspeto. Ngayon, magpo-focus tayo sa praktikal na aplikasyon - makikita mo ang closures na natural na lumilitaw habang binubuo natin ang ating mga interactive na feature. Ang pag-unawa ay lalago habang nakikita mo kung paano nila nilulutas ang mga totoong problema.
![Representasyon ng DOM tree](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.tl.png)
![Representasyon ng DOM tree](../../../../translated_images/dom-tree.7daf0e763cbbba92.tl.png)
> Isang representasyon ng DOM at ang HTML markup na tumutukoy dito. Mula kay [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Ngayon, subukan ang iyong interactive terrarium! Buksan ang iyong `index.html` f
- **Suporta sa iba't ibang device**: Gumagana sa desktop at mobile
- **Performance conscious**: Walang memory leaks o redundant calculations
![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.tl.png)
![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.tl.png)
---

@ -1,45 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
"translation_date": "2025-08-27T22:56:05+00:00",
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
"translation_date": "2026-01-07T01:13:58+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "tl"
}
-->
# Ang Aking Terrarium: Isang proyekto para matutunan ang HTML, CSS, at DOM manipulation gamit ang JavaScript 🌵🌱
## I-deploy ang iyong Terrarium
Isang maliit na drag and drop code-meditation. Sa kaunting HTML, JS, at CSS, magagawa mong bumuo ng web interface, i-style ito, at magdagdag ng iba't ibang interaksyon ayon sa iyong kagustuhan.
![ang aking terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.tl.png)
# Mga Aralin
1. [Panimula sa HTML](./1-intro-to-html/README.md)
2. [Panimula sa CSS](./2-intro-to-css/README.md)
3. [Panimula sa DOM at JS Closures](./3-intro-to-DOM-and-closures/README.md)
## Mga Kredito
Isinulat nang may ♥️ ni [Jen Looper](https://www.twitter.com/jenlooper)
Ang terrarium na ginawa gamit ang CSS ay inspirasyon mula sa glass jar ni Jakub Mandra sa [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
Ang mga likhang sining ay mano-manong iginuhit ni [Jen Looper](http://jenlooper.com) gamit ang tulong ng Procreate.
## I-deploy ang Iyong Terrarium
Maaari mong i-deploy, o i-publish ang iyong terrarium sa web gamit ang Azure Static Web Apps.
Maaari mong i-deploy, o i-publish ang iyong Terrarium sa web gamit ang **Azure Static Web Apps**.
1. I-fork ang repo na ito
2. Pindutin ang button na ito
2. Pindutin ang button na ito 👇
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
3. Sundan ang wizard para sa paglikha ng iyong app. Siguraduhing itakda ang app root sa `/solution` o sa root ng iyong codebase. Walang API sa app na ito, kaya huwag mag-alala tungkol sa pagdaragdag nito. Isang github folder ang malilikha sa iyong forked repository na makakatulong sa Azure Static Web Apps' build services upang i-build at i-publish ang iyong app sa isang bagong URL.
3. Sundin ang setup wizard upang likhain ang iyong app.
- Itakda ang **App root** sa alinman sa `/solution` o ang root ng iyong codebase.
- Walang API sa app na ito, kaya maaari mong laktawan ang API configuration.
- Isang `.github` folder ang awtomatikong lilikhain upang tulungan ang Azure Static Web Apps na itayo at i-publish ang iyong app.
---
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Pahayag ng Pagsuway**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat aming nilalayon ang pagiging tumpak, pakatandaan na ang awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o kamalian. Ang orihinal na dokumento sa kanyang sariling wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang maling pagkakaintindi o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Isang maliit na drag and drop na code-meditation. Sa kaunting HTML, JS, at CSS, maaari kang gumawa ng web interface, i-style ito, at magdagdag ng interaksyon.
![ang aking terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.tl.png)
![ang aking terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.tl.png)
## Mga Kredito

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.tl.jpg)
![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84a.tl.jpg)
> Sketchnote ni [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Pre-Lecture Quiz
@ -79,7 +79,7 @@ Ang prosesong ito ay sumasalamin sa disenyo ng unang web browser, ang WorldWideW
**Kaunting Kasaysayan**: Ang unang browser ay tinawag na 'WorldWideWeb' at nilikha ni Sir Timothy Berners-Lee noong 1990.
![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.tl.jpg)
![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.tl.jpg)
> Ilang maagang browser, mula kay [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Paano Pinoproseso ng Mga Browser ang Web Content
@ -198,7 +198,7 @@ quadrantChart
Ang pag-unawa sa proseso ng pag-install ng extension ay tumutulong sa iyo na ma-anticipate ang karanasan ng user kapag ini-install nila ang iyong extension. Ang proseso ng pag-install ay standardized sa mga modernong browser, na may kaunting pagkakaiba sa disenyo ng interface.
![screenshot ng Edge browser na nagpapakita ng bukas na edge://extensions page at bukas na settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.tl.png)
![screenshot ng Edge browser na nagpapakita ng bukas na edge://extensions page at bukas na settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.tl.png)
> **Mahalaga**: Siguraduhing i-toggle ang developer mode at payagan ang mga extension mula sa ibang mga tindahan kapag sinusubukan ang iyong sariling mga extension.
@ -313,10 +313,10 @@ Ito ay sumusunod sa prinsipyo ng progressive disclosure na ginagamit sa disenyo
### Overview ng Extension Views
**Setup View** - Paunang configuration ng user:
![screenshot ng tapos na extension na bukas sa browser, nagpapakita ng form na may mga input para sa pangalan ng rehiyon at API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.tl.png)
![screenshot ng tapos na extension na bukas sa browser, nagpapakita ng form na may mga input para sa pangalan ng rehiyon at API key.](../../../../translated_images/1.b6da8c1394b07491.tl.png)
**Results View** - Pagpapakita ng data ng carbon footprint:
![screenshot ng tapos na extension na nagpapakita ng mga halaga para sa carbon usage at fossil fuel percentage para sa rehiyong US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.tl.png)
![screenshot ng tapos na extension na nagpapakita ng mga halaga para sa carbon usage at fossil fuel percentage para sa rehiyong US-NEISO.](../../../../translated_images/2.1dae52ff08042246.tl.png)
### Pagbuo ng Configuration Form

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.tl.png)
![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.tl.png)
> ⚠️ **Pagsasaalang-alang sa Seguridad**: Sa mga production application, ang pag-iimbak ng API keys sa LocalStorage ay may panganib sa seguridad dahil maa-access ito ng JavaScript. Para sa layunin ng pag-aaral, ang approach na ito ay maayos, ngunit ang mga totoong application ay dapat gumamit ng secure server-side storage para sa mga sensitibong credentials.

@ -126,7 +126,7 @@ Upang buksan ang Developer Tools sa Edge, i-click ang tatlong tuldok sa kanang i
Subukan natin ito. Buksan ang isang website (Microsoft.com ay maganda para dito) at i-click ang 'Record' button. Ngayon i-refresh ang pahina at panoorin ang profiler na kinukuha ang lahat ng nangyayari. Kapag tumigil ka sa pag-record, makikita mo ang detalyadong breakdown kung paano 'scripts', 'renders', at 'paints' ng browser ang site. Parang kung paano mino-monitor ng mission control ang bawat sistema sa panahon ng paglulunsad ng rocket - makakakuha ka ng real-time na data sa eksaktong nangyayari at kailan.
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.tl.png)
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.tl.png)
✅ Ang [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ay may maraming detalye kung nais mong mas malalim na pag-aralan.
@ -136,11 +136,11 @@ Piliin ang mga elemento ng profile timeline upang mag-zoom in sa mga event na na
Kumuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane:
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.tl.png)
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.tl.png)
Suriin ang Event Log pane upang makita kung may anumang event na tumagal ng higit sa 15 ms:
![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.tl.png)
![Edge event log](../../../../translated_images/log.804026979f3707e0.tl.png)
✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung may mga bottleneck. Ano ang pinakamabagal na naglo-load na asset? Ang pinakamabilis?

@ -23,7 +23,7 @@ Ang extension na ito ay maaaring tawagin ng isang user kapag ang isang API key a
### Mga Kredito
![isang berdeng browser extension](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![isang berdeng browser extension](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Mga Kredito

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gamit ang tmrow's CO2 Signal API para subaybayan ang paggamit ng kuryente, gumawa ng browser extension upang magkaroon ka ng paalala sa iyong browser tungkol sa bigat ng paggamit ng kuryente sa iyong rehiyon. Ang paggamit ng extension na ito nang ad hoc ay makakatulong sa iyo na gumawa ng mas maingat na desisyon sa iyong mga aktibidad batay sa impormasyong ito.
![screenshot ng extension](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![screenshot ng extension](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Pagsisimula
@ -31,7 +31,7 @@ npm run build
Para i-install sa Edge, gamitin ang menu na 'three dot' sa kanang itaas na bahagi ng browser upang hanapin ang Extensions panel. Mula roon, piliin ang 'Load Unpacked' upang mag-load ng bagong extension. Buksan ang 'dist' folder kapag lumitaw ang prompt, at mai-load ang extension. Upang magamit ito, kakailanganin mo ng API key para sa CO2 Signal's API ([kumuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO').
![pag-install](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![pag-install](../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag na-input na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa browser extension bar ay magbabago upang ipakita ang paggamit ng enerhiya sa iyong rehiyon at magbibigay ng ideya kung anong mga aktibidad na mabigat sa enerhiya ang angkop na gawin. Ang konsepto sa likod ng sistemang 'tuldok' na ito ay inspirasyon mula sa [Energy Lollipop extension](https://energylollipop.com/) para sa emissions sa California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gamit ang API ng CO2 Signal mula sa tmrow para subaybayan ang konsumo ng kuryente, gumawa ng browser extension upang magkaroon ka ng paalala direkta sa iyong browser tungkol sa konsumo ng kuryente sa iyong lugar. Ang paggamit ng extension na ito ay makakatulong sa iyo na magpasya sa iyong mga aktibidad base sa impormasyong ito.
![screenshot ng extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![screenshot ng extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Pagsisimula
@ -31,7 +31,7 @@ npm run build
Para i-install sa Edge, gamitin ang menu na 'tatlong tuldok' sa kanang itaas na bahagi ng browser upang hanapin ang panel ng Extensions. Mula doon, piliin ang 'Load unpacked extension' upang mag-load ng bagong extension. Buksan ang folder na 'dist' kapag na-prompt, at ang extension ay maglo-load. Para magamit ito, kakailanganin mo ng API key para sa CO2 Signal API ([kumuha ng isa dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO').
![pag-install](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![pag-install](../../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag nailagay na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa extension bar ng browser ay dapat magbago upang ipakita ang konsumo ng enerhiya sa iyong lugar at magbigay ng indikasyon kung anong mga aktibidad na mataas sa enerhiya ang angkop gawin. Ang konsepto sa likod ng sistemang ito ng 'mga tuldok' ay inspirasyon ng [extension na Energy Lollipop](https://energylollipop.com/) para sa mga emisyon sa California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gamit ang CO2 Signal API ng tmrow para subaybayan ang paggamit ng kuryente, gumawa ng isang browser extension na magbibigay sa iyo ng paalala kung gaano kabigat ang paggamit ng kuryente sa iyong lugar habang ginagamit ang iyong browser. Ang extension na ito ay makakatulong sa iyo na gumawa ng mga desisyon batay sa impormasyong ito para sa iyong mga aktibidad.
![Screenshot ng Extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![Screenshot ng Extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Pagsisimula
@ -31,7 +31,7 @@ npm run build
Para i-install sa Edge, gamitin ang 'tatlong tuldok' na menu sa kanang itaas ng browser para hanapin ang extension panel. Mula doon, piliin ang 'Load Unpacked' para mag-load ng bagong extension. Sa prompt, buksan ang 'dist' folder at ma-load ang extension. Para magamit ito, kakailanganin mo ng API key mula sa CO2 Signal ([makukuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa page na iyon) at [code para sa iyong lugar](http://api.electricitymap.org/v3/zones) mula sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO').
![Pag-install](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![Pag-install](../../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag na-input na ang API key at lugar sa extension interface, ang makikita mong makulay na tuldok sa browser extension bar ay magbabago upang ipakita ang paggamit ng enerhiya sa iyong lugar. Magbibigay ito sa iyo ng indikasyon kung ang mga energy-intensive na aktibidad ay angkop sa iyong kasalukuyang sitwasyon. Ang konsepto ng 'dot' system na ito ay inspirasyon ng [Energy Lollipop Extension](https://energylollipop.com/) para sa emissions sa California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gagamitin ang Signal CO2 API ng tmrow upang subaybayan ang paggamit ng kuryente at lumikha ng isang browser extension na magbibigay ng paalala direkta sa iyong browser kung gaano kabigat ang paggamit ng kuryente sa iyong rehiyon. Ang paggamit ng extension na ito ay makakatulong sa iyo na suriin ang iyong mga aktibidad batay sa impormasyong ito.
![screenshot ng extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![screenshot ng extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Paano Magsimula
@ -31,7 +31,7 @@ npm run build
Para i-install sa Edge, gamitin ang menu na "tatlong tuldok" sa kanang itaas na bahagi ng browser upang mahanap ang panel ng Mga Extension. Kung hindi pa naka-activate, i-on ang Developer Mode (nasa ibabang kaliwa). Piliin ang "Load unpacked" upang mag-load ng bagong extension. Buksan ang folder na "dist" sa prompt, at ang extension ay mai-load. Upang magamit ito, kakailanganin mo ng API key para sa CO2 Signal API (maaari kang [kumuha nito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [electricity map](https://www.electricitymap.org/map) (halimbawa, sa Boston, "US-NEISO").
![pag-install](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![pag-install](../../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag nailagay na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa extension bar ng browser ay magbabago upang ipakita ang paggamit ng enerhiya sa rehiyon at magbibigay ng ideya kung aling mga aktibidad na mataas ang konsumo ng enerhiya ang angkop na gawin. Ang konsepto sa likod ng sistemang ito ng "mga tuldok" ay hango sa [Energy Lollipop extension](https://energylollipop.com/) para sa mga emisyon sa California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gagamitin natin ang CO2 Signal API ng tmrow upang subaybayan ang paggamit ng kuryente sa iyong lugar at ipapakita ito bilang paalala sa iyong browser. Sa pamamagitan ng browser extension na ito, maaari mong gamitin ang impormasyong ito upang magdesisyon sa iyong mga aktibidad.
![screenshot ng extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![screenshot ng extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Panimula
@ -31,7 +31,7 @@ npm run build
Upang mai-install sa Edge, hanapin ang "Extensions" panel mula sa menu na "tatlong tuldok" sa kanang itaas ng browser. Piliin ang "Load Unpacked" at i-load ang bagong extension. Sa prompt, buksan ang "dist" folder upang ma-load ang extension. Upang magamit ito, kakailanganin mo ng API key mula sa CO2 Signal API ([kumuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang iyon) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ang 'US-NEISO').
![pag-install](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![pag-install](../../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag nailagay mo na ang API key at rehiyon sa interface ng extension, magbabago ang kulay ng dot na makikita sa extension bar ng iyong browser. Ang kulay ng dot ay sumasalamin sa paggamit ng enerhiya sa iyong lugar at nagbibigay ng ideya kung anong mga aktibidad ang angkop batay sa pangangailangan ng enerhiya. Ang konsepto ng "dot" system na ito ay inspirasyon ng [Energy Lollipop extension](https://energylollipop.com/) para sa emissions sa California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gamit ang API ng CO2 Signal mula sa tmrow para subaybayan ang paggamit ng kuryente, gumawa ng isang browser extension na magbibigay ng abiso sa iyong browser tungkol sa bigat ng paggamit ng kuryente sa iyong lugar. Ang paggamit ng extension na ito ay makakatulong sa iyo na magdesisyon tungkol sa iyong mga aktibidad base sa impormasyong ito.
![screenshot ng browser extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![screenshot ng browser extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Paano Magsimula
@ -31,7 +31,7 @@ npm run build
Para i-install sa Edge, gamitin ang menu na 'tatlong tuldok' sa kanang itaas na bahagi ng browser para hanapin ang panel ng Extensions. Mula roon, piliin ang 'Load Unpacked' para mag-load ng bagong extension. Buksan ang folder na 'dist' kapag hiniling, at ang extension ay mai-load. Para magamit ito, kakailanganin mo ng API key para sa CO2 Signal API ([kumuha ng isa dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginamit ko ang 'US-NEISO').
![nagda-download](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![nagda-download](../../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag nailagay na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa extension bar ng browser ay magbabago upang ipakita ang paggamit ng enerhiya sa iyong lugar at magbibigay ng mga rekomendasyon tungkol sa mga aktibidad na angkop gawin. Ang konsepto sa likod ng sistemang 'dot' na ito ay nakuha ko mula sa [Energy Lollipop browser extension](https://energylollipop.com/) para sa emissions sa California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gamit ang tmrow's C02 Signal API para subaybayan ang paggamit ng kuryente, gumawa ng browser extension upang magkaroon ka ng paalala sa iyong browser tungkol sa bigat ng paggamit ng kuryente sa iyong rehiyon. Ang paggamit ng extension na ito nang ad hoc ay makakatulong sa iyo na gumawa ng mas maingat na desisyon sa iyong mga aktibidad batay sa impormasyong ito.
![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.tl.png)
![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.tl.png)
## Pagsisimula
@ -31,7 +31,7 @@ npm run build
Para i-install sa Edge, gamitin ang menu na 'three dot' sa kanang itaas na bahagi ng browser upang hanapin ang Extensions panel. Mula doon, piliin ang 'Load Unpacked' upang mag-load ng bagong extension. Buksan ang 'dist' folder sa prompt at maglo-load ang extension. Para magamit ito, kakailanganin mo ng API key para sa CO2 Signal's API ([kumuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO').
![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.tl.png)
![installing](../../../../translated_images/install-on-edge.78634f02842c4828.tl.png)
Kapag na-input na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa browser extension bar ay dapat magbago upang ipakita ang paggamit ng enerhiya sa iyong rehiyon at magbigay ng gabay kung anong mga aktibidad na mabigat sa enerhiya ang angkop na gawin. Ang konsepto sa likod ng sistemang 'dot' na ito ay ibinigay sa akin ng [Energy Lollipop extension](https://energylollipop.com/) para sa emissions sa California.

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![ang grid ng canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.tl.png)
![ang grid ng canvas](../../../../translated_images/canvas_grid.5f209da785ded492.tl.png)
> Imahe mula sa [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Para mag-drawing sa canvas element, susundin mo ang parehong tatlong hakbang na proseso na bumubuo sa pundasyon ng lahat ng canvas graphics. Kapag nagawa mo ito nang ilang beses, magiging natural na ito:
@ -329,11 +329,11 @@ Gagawa ka ng web page na may Canvas element. Dapat itong mag-render ng black scr
- Hero ship
![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.tl.png)
![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b.tl.png)
- 5*5 monster
![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.tl.png)
![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2.tl.png)
### Mga Inirerekomendang Hakbang para Simulan ang Development
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Ang tapos na resulta ay dapat magmukhang ganito:
![Itim na screen na may isang bayani at 5*5 na mga halimaw](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.tl.png)
![Itim na screen na may isang bayani at 5*5 na mga halimaw](../../../../translated_images/partI-solution.36c53b48c9ffae2a.tl.png)
## Solusyon

@ -160,7 +160,7 @@ sequenceDiagram
```
- **Sistema ng puntos**: Ang bawat nasirang barko ng kalaban ay nagbibigay ng 100 puntos (mas madaling kalkulahin ng mga manlalaro ang mga bilog na numero). Ang score ay makikita sa ibabang kaliwang sulok.
- **Counter ng buhay**: Ang iyong hero ay magsisimula sa tatlong buhay - isang pamantayan na itinatag ng mga unang arcade games para balansehin ang hamon at kasiyahan sa paglalaro. Ang bawat banggaan sa kalaban ay magbabawas ng isang buhay. Ipapakita natin ang natitirang buhay sa ibabang kanan gamit ang mga icon ng barko ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.tl.png).
- **Counter ng buhay**: Ang iyong hero ay magsisimula sa tatlong buhay - isang pamantayan na itinatag ng mga unang arcade games para balansehin ang hamon at kasiyahan sa paglalaro. Ang bawat banggaan sa kalaban ay magbabawas ng isang buhay. Ipapakita natin ang natitirang buhay sa ibabang kanan gamit ang mga icon ng barko ![life image](../../../../translated_images/life.6fb9f50d53ee0413.tl.png).
## Simulan na Natin ang Paggawa!

@ -652,7 +652,7 @@ sequenceDiagram
Ang paggamit ng `history.pushState` ay lumilikha ng mga bagong entry sa navigation history ng browser. Maaari mong suriin iyon sa pamamagitan ng pag-hold sa *back button* ng iyong browser, dapat itong magpakita ng ganito:
![Screenshot ng navigation history](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.tl.png)
![Screenshot ng navigation history](../../../../translated_images/history.7fdabbafa521e064.tl.png)
Kung susubukan mong mag-click sa back button nang ilang beses, makikita mo na nagbabago ang kasalukuyang URL at na-update ang history, ngunit ang parehong template ang patuloy na ipinapakita.

@ -295,7 +295,7 @@ Una, obserbahan natin kung ano ang nangyayari sa basic form submission:
2. Obserbahan ang mga pagbabago sa address bar ng iyong browser
3. Pansinin kung paano nagre-reload ang page at lumalabas ang data sa URL
![Screenshot ng pagbabago sa URL ng browser pagkatapos i-click ang Register button](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.tl.png)
![Screenshot ng pagbabago sa URL ng browser pagkatapos i-click ang Register button](../../../../translated_images/click-register.e89a30bf0d4bc9ca.tl.png)
### Paghahambing ng HTTP Methods
@ -350,7 +350,7 @@ I-configure natin ang iyong registration form para maayos na makipag-ugnayan sa
2. **I-click** ang "Create Account" button
3. **Obserbahan** ang server response sa iyong browser
![Isang browser window sa address na localhost:5000/api/accounts, nagpapakita ng JSON string na may user data](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.tl.png)
![Isang browser window sa address na localhost:5000/api/accounts, nagpapakita ng JSON string na may user data](../../../../translated_images/form-post.61de4ca1b964d91a.tl.png)
**Ang dapat mong makita:**
- **Ang browser ay nagre-redirect** sa API endpoint URL
@ -615,7 +615,7 @@ async function register() {
3. **I-click** ang "Create Account"
4. **Obserbahan** ang mga mensahe sa console at feedback ng user
![Screenshot na nagpapakita ng log message sa console ng browser](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.tl.png)
![Screenshot na nagpapakita ng log message sa console ng browser](../../../../translated_images/browser-console.efaf0b51aaaf6778.tl.png)
**Ano ang dapat mong makita:**
- **Loading state** na lumalabas sa submit button
@ -790,7 +790,7 @@ Palakasin natin ang iyong registration form gamit ang matibay na pag-validate na
3. **Subukan** ang mga espesyal na karakter sa field ng username
4. **Mag-input** ng negatibong halaga ng balanse
![Screenshot na nagpapakita ng error sa pag-validate kapag sinusubukang isumite ang form](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.tl.png)
![Screenshot na nagpapakita ng error sa pag-validate kapag sinusubukang isumite ang form](../../../../translated_images/validation-error.8bd23e98d416c22f.tl.png)
**Ano ang iyong mapapansin:**
- **Ipinapakita ng browser** ang mga native na mensahe ng pag-validate
@ -932,7 +932,7 @@ Magpakita ng error message sa HTML kung ang user ay umiiral na.
Narito ang isang halimbawa ng kung ano ang magiging hitsura ng final login page pagkatapos ng kaunting pag-istilo:
![Screenshot ng login page pagkatapos magdagdag ng mga estilo sa CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.tl.png)
![Screenshot ng login page pagkatapos magdagdag ng mga estilo sa CSS](../../../../translated_images/result.96ef01f607bf856a.tl.png)
## Post-Lecture Quiz

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![Workflow ng pag-update sa multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.tl.png)
![Workflow ng pag-update sa multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa77.tl.png)
**Bakit pakiramdam na clunky ang approach na ito:**
- Bawat click ay nangangahulugan ng pag-rebuild ng buong page mula sa simula
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![Workflow ng pag-update sa single-page application](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.tl.png)
![Workflow ng pag-update sa single-page application](../../../../translated_images/spa.268ec73b41f992c2.tl.png)
**Bakit mas maganda ang pakiramdam ng SPAs:**
- Ang mga bahagi lang na talagang nagbago ang na-update (matalino, di ba?)
@ -523,7 +523,7 @@ if (data.error) {
Ngayon, kapag sinubukan mong mag-login gamit ang invalid na account, makikita mo ang isang kapaki-pakinabang na mensahe ng error sa mismong pahina!
![Screenshot na nagpapakita ng mensahe ng error na lumalabas sa pag-login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.tl.png)
![Screenshot na nagpapakita ng mensahe ng error na lumalabas sa pag-login](../../../../translated_images/login-error.416fe019b36a6327.tl.png)
#### Hakbang 4: Pagiging Inclusive sa Accessibility
@ -961,7 +961,7 @@ Handa ka na bang dalhin ang iyong banking app sa susunod na antas? Gawin natin i
Ganito ang maaaring hitsura ng isang polished na dashboard:
![Screenshot ng isang halimbawa ng resulta ng dashboard pagkatapos ng styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.tl.png)
![Screenshot ng isang halimbawa ng resulta ng dashboard pagkatapos ng styling](../../../../translated_images/screen2.123c82a831a1d14a.tl.png)
Huwag kang mag-alala kung hindi mo ito eksaktong ma-match - gamitin ito bilang inspirasyon at gawin itong sarili mo!

@ -190,7 +190,7 @@ Ang [state management](https://en.wikipedia.org/wiki/State_management) ay tungko
Sa halip na maguluhan, gagawa tayo ng **centralized state management** system. Isipin ito na parang may isang organisadong tao na namamahala sa lahat ng mahahalagang bagay:
![Schema na nagpapakita ng daloy ng data sa pagitan ng HTML, mga aksyon ng user, at estado](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.tl.png)
![Schema na nagpapakita ng daloy ng data sa pagitan ng HTML, mga aksyon ng user, at estado](../../../../translated_images/data-flow.fa2354e0908fecc8.tl.png)
```mermaid
flowchart TD
@ -803,7 +803,7 @@ Ang hamon na ito ay makakatulong sa iyo na mag-isip tulad ng isang propesyonal n
Narito ang isang halimbawa ng resulta pagkatapos makumpleto ang assignment:
![Screenshot na nagpapakita ng halimbawa ng "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.tl.png)
![Screenshot na nagpapakita ng halimbawa ng "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f1.tl.png)
---

@ -112,7 +112,7 @@ Tingnan ang [server API documentation](../api/README.md) para sa:
**Inaasahang Resulta:**
Pagkatapos makumpleto ang assignment na ito, ang iyong banking app ay dapat magkaroon ng ganap na functional na "Magdagdag ng Transaksyon" na tampok na mukhang propesyonal at maayos ang pagganap:
![Screenshot na nagpapakita ng halimbawa ng "Magdagdag ng Transaksyon" na dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.tl.png)
![Screenshot na nagpapakita ng halimbawa ng "Magdagdag ng Transaksyon" na dialog](../../../../translated_images/dialog.93bba104afeb79f1.tl.png)
## Pagsubok ng Iyong Pagpapatupad

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sa proyektong ito, matututo kang gumawa ng isang kathang-isip na bangko. Kasama sa mga araling ito ang mga tagubilin kung paano mag-layout ng isang web app at magbigay ng mga ruta, gumawa ng mga form, pamahalaan ang estado, at kumuha ng data mula sa isang API kung saan maaari mong makuha ang datos ng bangko.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.tl.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.tl.png) |
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.tl.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.tl.png) |
|--------------------------------|--------------------------------|
## Mga Aralin

@ -185,7 +185,7 @@ Katulad ng kung paano nagkonekta ang telepono ni Alexander Graham Bell sa mga ma
Kapag na-load na ang lahat, makikita mo ang isang malinis na workspace na dinisenyo para panatilihin kang nakatuon sa mahalaga ang iyong code!
![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.tl.png)
![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.tl.png)
**Narito ang tour sa iyong bagong lugar:**
- **Activity Bar** (ang strip sa kaliwa): Ang iyong pangunahing navigation na may Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, at Settings ⚙️
@ -233,7 +233,7 @@ Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng partikular n
1. Pumunta sa [vscode.dev](https://vscode.dev) kung hindi ka pa naroon
2. Hanapin ang "Open Remote Repository" button sa welcome screen at i-click ito
![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.tl.png)
![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.tl.png)
3. I-paste ang anumang GitHub repository URL (subukan ito: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Pindutin ang Enter at panoorin ang magic!
@ -242,7 +242,7 @@ Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng partikular n
Gusto mo bang maramdaman na parang coding wizard? Subukan ang keyboard shortcut na ito: Ctrl+Shift+P (o Cmd+Shift+P sa Mac) para buksan ang Command Palette:
![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.tl.png)
![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.tl.png)
**Ang Command Palette ay parang search engine para sa lahat ng magagawa mo:**
- I-type ang "open remote" at hahanapin nito ang repository opener para sa iyo
@ -304,7 +304,7 @@ Katulad ng pag-aayos ng mga blueprint sa opisina ng isang arkitekto, ang paggawa
3. I-type ang filename kasama ang tamang extension (`style.css`, `script.js`, `index.html`)
4. Pindutin ang Enter para gawin ang file
![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.tl.png)
![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.tl.png)
**Mga Naming Conventions:**
- Gumamit ng mga deskriptibong pangalan na nagpapahiwatig ng layunin ng file
@ -322,7 +322,7 @@ Dito nagsisimula ang totoong kasiyahan! Ang editor ng VSCode.dev ay puno ng mga
2. Simulan ang pag-type at panoorin ang VSCode.dev na tumutulong sa iyo gamit ang kulay, mga suggestion, at pag-detect ng error
3. I-save ang iyong trabaho gamit ang Ctrl+S (Windows/Linux) o Cmd+S (Mac) bagama't auto-save din ito!
![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.tl.png)
![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.tl.png)
**Ang mga cool na bagay na nangyayari habang nagko-code ka:**
- Ang iyong code ay nagiging maganda ang kulay kaya madali itong basahin
@ -343,7 +343,7 @@ Katulad ng kung paano gumagawa ng detalyadong tala ang mga archaeologist ng exca
2. Ang mga binagong file ay lumalabas sa seksyong "Changes"
3. Ang color coding ay nagpapahiwatig ng uri ng pagbabago: berde para sa mga dagdag, pula para sa mga binura
![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.tl.png)
![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.tl.png)
**Pag-save ng iyong trabaho (ang commit workflow):**
@ -438,7 +438,7 @@ Ang extension marketplace ay talagang maayos ang pagkakaorganisa, kaya hindi ka
2. Mag-browse o maghanap ng isang partikular na bagay
3. I-click ang anumang mukhang kawili-wili upang matuto pa tungkol dito
![Interface ng extension marketplace](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.tl.png)
![Interface ng extension marketplace](../../../../translated_images/extensions.eca0e0c7f59a10b5.tl.png)
**Ano ang makikita mo roon:**
@ -491,7 +491,7 @@ Karamihan sa mga extension ay may mga setting na maaari mong i-tweak upang guman
3. Piliin ang "Extension Settings" mula sa dropdown
4. Ayusin ang mga bagay hanggang sa maging tama ang pakiramdam para sa iyong workflow
![Pag-customize ng mga setting ng extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.tl.png)
![Pag-customize ng mga setting ng extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78.tl.png)
**Mga karaniwang bagay na maaaring gusto mong ayusin:**
- Paano nafo-format ang iyong code (tabs vs spaces, haba ng linya, atbp.)

@ -78,7 +78,7 @@ Dahil ang VSCode.dev ay nangangailangan ng kahit isang file upang buksan ang rep
4. **Maglagay** ng commit message: "Magdagdag ng initial HTML structure"
5. **I-click** ang "Commit new file" upang i-save ang iyong mga pagbabago
![Paglikha ng initial file sa GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.tl.png)
![Paglikha ng initial file sa GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.tl.png)
**Narito ang nagagawa ng initial setup na ito:**
- **Nag-eestablish** ng tamang HTML5 document structure gamit ang semantic elements
@ -104,7 +104,7 @@ Ngayon na ang pundasyon ng iyong repository ay na-set up, lumipat tayo sa VSCode
**Indicator ng Tagumpay**: Makikita mo ang mga file ng iyong proyekto sa Explorer sidebar at ang `index.html` na available para i-edit sa pangunahing editor area.
![Proyekto na naka-load sa VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.tl.png)
![Proyekto na naka-load sa VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.tl.png)
**Ano ang makikita mo sa interface:**
- **Explorer sidebar**: **Ipinapakita** ang mga file ng iyong repository at istruktura ng folder
@ -448,7 +448,7 @@ Ang mga extension ay nagpapahusay sa iyong development experience sa pamamagitan
**Mga agarang resulta pagkatapos ng pag-install:**
Kapag na-install ang CodeSwing, makikita mo ang live preview ng iyong resume website na lumalabas sa editor. Pinapayagan ka nitong makita kung paano eksaktong magmumukha ang iyong site habang gumagawa ng mga pagbabago.
![CodeSwing extension na nagpapakita ng live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.tl.png)
![CodeSwing extension na nagpapakita ng live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.tl.png)
**Pag-unawa sa pinahusay na interface:**
- **Split view**: **Ipinapakita** ang iyong code sa isang bahagi at ang live preview sa kabila

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
Ganito ang magiging hitsura ng iyong natapos na proyekto:
![Chat app interface na nagpapakita ng usapan sa pagitan ng user at AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tl.png)
![Chat app interface na nagpapakita ng usapan sa pagitan ng user at AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.tl.png)
## 🗺️ Ang Iyong Paglalakbay sa Pagbuo ng AI Application
@ -194,7 +194,7 @@ mindmap
**Pangunahing Prinsipyo**: Ang pagbuo ng AI application ay pinagsasama ang tradisyunal na kasanayan sa web development at AI service integration, na lumilikha ng matatalinong aplikasyon na natural at tumutugon sa mga user.
![GitHub Models AI Playground interface na may model selection at testing area](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tl.png)
![GitHub Models AI Playground interface na may model selection at testing area](../../../translated_images/playground.d2b927122224ff8f.tl.png)
**Narito kung bakit kapaki-pakinabang ang playground:**
- **Subukan** ang iba't ibang AI models tulad ng GPT-4o-mini, Claude, at iba pa (lahat libre!)
@ -204,7 +204,7 @@ mindmap
Kapag nakapaglaro ka na nang kaunti, i-click lang ang "Code" tab at piliin ang programming language para makuha ang implementation code na kailangan mo.
![Playground choice na nagpapakita ng code generation options para sa iba't ibang programming languages](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tl.png)
![Playground choice na nagpapakita ng code generation options para sa iba't ibang programming languages](../../../translated_images/playground-choice.1d23ba7d407f4758.tl.png)
## Pag-set Up ng Python Backend Integration
@ -2364,14 +2364,14 @@ Gusto mo bang subukan ang proyektong ito sa isang cloud development environment?
- **Pumunta** sa [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **I-click** ang "Use this template" sa kanang itaas na bahagi (siguraduhing naka-log in ka sa GitHub)
![Interface ng paggawa mula sa template na nagpapakita ng berdeng "Use this template" button](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tl.png)
![Interface ng paggawa mula sa template na nagpapakita ng berdeng "Use this template" button](../../../translated_images/template.67ad477109d29a2b.tl.png)
**Hakbang 2: I-launch ang Codespaces**
- **Buksan** ang iyong bagong likhang repository
- **I-click** ang berdeng "Code" button at piliin ang "Codespaces"
- **Piliin** ang "Create codespace on main" upang simulan ang iyong development environment
![Interface ng paggawa ng codespace na may mga opsyon para sa paglulunsad ng cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tl.png)
![Interface ng paggawa ng codespace na may mga opsyon para sa paglulunsad ng cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d.tl.png)
**Hakbang 3: Configuration ng Environment**
Kapag nag-load ang iyong Codespace, magkakaroon ka ng access sa:

@ -1,259 +1,280 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-25T11:53:25+00:00",
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-07T01:12:35+00:00",
"source_file": "README.md",
"language_code": "tl"
}
-->
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web Development para sa mga Baguhan - Isang Kurikulum
# Web Development para sa mga Nagsisimula - Isang Kurikulum
Matutunan ang mga pangunahing kaalaman sa web development gamit ang aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Ang bawat isa sa 24 na aralin ay sumasaklaw sa JavaScript, CSS, at HTML sa pamamagitan ng mga praktikal na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at mga praktikal na gawain. Paunlarin ang iyong kakayahan at pagbutihin ang iyong kaalaman gamit ang aming epektibong project-based na pamamaraan. Simulan ang iyong coding journey ngayon!
Matutunan ang mga pundasyon ng web development sa aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng mga terrarium, browser extensions, at mga laro sa kalawakan. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga asignatura. Paunlarin ang iyong mga kasanayan at pahusayin ang pagkatuto gamit ang aming epektibong metodolohiyang nakabatay sa proyekto. Simulan ang iyong paglalakbay sa coding ngayon!
Sumali sa Azure AI Foundry Discord Community
Sumali sa Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sundin ang mga hakbang na ito upang makapagsimula gamit ang mga resources na ito:
1. **I-Fork ang Repository**: I-click ang [![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. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Sumali sa Azure AI Foundry Discord at makipagkita sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
Sundin ang mga hakbang na ito para makapagsimula gamit ang mga mapagkukunang ito:
1. **I-fork ang Repositoryo**: I-click ang [![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. **I-clone ang Repositoryo**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Sumali sa Azure AI Foundry Discord at makipagkilala sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporta sa Iba't Ibang Wika
### 🌐 Suporta para sa Maramihang Wika
#### Sinusuportahan sa pamamagitan ng GitHub Action (Automated at Laging Napapanahon)
#### Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko at Palaging Napapanahon)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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)](./README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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)](./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)
**Kung nais mong magkaroon ng karagdagang mga pagsasalin, ang mga sinusuportahang wika ay nakalista [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> **Mas gusto mo bang mag-clone nang lokal?**
[![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)
> Kasama sa repositoryo na ito ang mahigit 50 mga pagsasalin ng wika na malaki ang dagdag sa laki ng download. Para mag-clone nang walang mga pagsasalin, gamitin ang sparse checkout:
> ```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'
> ```
> Makukuha mo ang lahat ng kailangan mo para tapusin ang kurso nang mas mabilis mag-download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
#### 🧑‍🎓 _Estudyante ka ba?_
**Kung nais mong magkaroon pa ng ibang suporta sa mga wika ng pagsasalin, nakalista ito [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakahanap ka ng mga resources para sa mga baguhan, Student packs, at maging mga paraan upang makakuha ng libreng certificate voucher. Ito ang pahinang dapat mong i-bookmark at balikan paminsan-minsan dahil nagbabago ang nilalaman buwan-buwan.
[![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)
### 📣 Anunsyo - Mga Bagong Hamon gamit ang GitHub Copilot Agent mode!
#### 🧑‍🎓 _Estudyante ka ba?_
May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay bagong hamon na maaari mong tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, kaya nitong hindi lang mag-generate ng text kundi pati gumawa at mag-edit ng mga file, magpatakbo ng mga command, at marami pa.
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakakita ka ng mga mapagkukunang pambaguhan, Student packs at pati mga paraan para makakuha ng libreng voucher ng sertipiko. Ito ang pahina na gusto mong i-bookmark at paminsan-minsan tingnan dahil buwan-buwan ay pinalitan natin ang nilalaman.
### 📣 Anunsyo - _Bagong Proyekto gamit ang Generative AI_
### 📣 Anunsyo - Mga bagong hamon sa GitHub Copilot Agent mode na dapat tapusin!
Bagong AI Assistant project ang idinagdag, tingnan ito [project](./09-chat-project/README.md)
May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Isa itong bagong hamon para sa iyo na tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang gumawa ng teksto kundi pati lumikha at mag-edit ng mga file, magpatakbo ng mga utos at marami pa.
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript
### 📣 Anunsyo - _Bagong Proyekto gamit ang Generative AI_
Huwag palampasin ang aming bagong Generative AI curriculum!
Bagong AI Assistant na proyekto lang ang idinagdag, tingnan ang [proyekto](./9-chat-project/README.md)
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
### 📣 Anunsyo - _Bagong Kurikulum_ tungkol sa Generative AI para sa JavaScript ay inilabas na
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.tl.png)
Huwag palampasin ang aming bagong Generative AI kurikulum!
- Mga aralin mula sa mga pangunahing kaalaman hanggang sa RAG.
- Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at ang aming companion app.
- Masaya at nakaka-engganyong kwento, magta-time travel ka!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.tl.png)
![Background](../../translated_images/background.148a8d43afde5730.tl.png)
Ang bawat aralin ay may kasamang gawain na dapat tapusin, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:
- Prompting at prompt engineering
- Text at image app generation
- Search apps
- Mga aralin mula sa mga batayan hanggang sa RAG.
- Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at aming companion app.
- Masaya at nakakaaliw na kuwento, tulad ng paglalakbay sa panahon!
Bisitahin ang [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) upang makapagsimula!
![character](../../translated_images/character.5c0dd8e067ffd693.tl.png)
## 🌱 Pagsisimula
> **Mga Guro**, nagdagdag kami ng [ilang mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Gusto naming marinig ang inyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Bawat aralin ay may nakalakip na asignatura, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:
- Pag-prompt at prompt engineering
- Pagbuo ng text at image app
- Mga search app
**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat aralin, magsimula sa pre-lecture quiz at sundan ito sa pagbabasa ng lecture material, pagtapos ng iba't ibang aktibidad, at suriin ang inyong kaalaman gamit ang post-lecture quiz.
Bisitahin ang [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para makapagsimula!
Upang mapahusay ang inyong karanasan sa pag-aaral, makipag-ugnayan sa inyong mga kapwa mag-aaral upang magtulungan sa mga proyekto! Ang mga talakayan ay hinihikayat sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming team ng mga moderator ay handang sagutin ang inyong mga tanong.
Upang higit pang mapalawak ang inyong kaalaman, lubos naming inirerekomenda ang pag-explore sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral.
### 📋 Pagsasaayos ng iyong kapaligiran
## 🌱 Pagsisimula
Ang kurikulum na ito ay may handang development environment! Sa pagsisimula, maaari kang pumili na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, walang kailangang i-install na environment_), o lokal sa iyong computer gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
> **Mga Guro**, may [nagdagdag kaming ilang suhestiyon](for-teachers.md) kung paano gamitin ang kurikulum na ito. Nais naming marinig ang inyong puna [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
#### Gumawa ng iyong repository
Upang madali mong mai-save ang iyong trabaho, inirerekomenda na gumawa ka ng sariling kopya ng repository na ito. Magagawa mo ito sa pamamagitan ng pag-click sa **Use this template** na button sa itaas ng pahina. Ito ay lilikha ng bagong repository sa iyong GitHub account na may kopya ng kurikulum.
**[Mga Nag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat aralin, magsimula sa pre-lecture quiz at sundan ito sa pagbabasa ng materyal ng lektura, pagtapos ng mga gawain, at pagsusuri ng iyong pag-unawa gamit ang post-lecture quiz.
Sundin ang mga hakbang na ito:
1. **I-Fork ang Repository**: I-click ang "Fork" button sa kanang itaas na bahagi ng pahinang ito.
2. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Para mapabuti ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase upang magtulungan sa mga proyekto! Inirerekomenda ang mga talakayan sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan naroon ang aming mga moderator na handang sagutin ang iyong mga tanong.
#### Pagpapatakbo ng kurikulum sa isang Codespace
Para lalo pang paunlarin ang iyong edukasyon, mariing inirerekumenda namin ang pag-explore sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral.
Sa iyong kopya ng repository na iyong ginawa, i-click ang **Code** button at piliin ang **Open with Codespaces**. Ito ay lilikha ng bagong Codespace para sa iyo upang magtrabaho.
### 📋 Pagsasaayos ng iyong kapaligiran
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.tl.png)
Mayroon nang handang development environment ang kurikulum na ito! Sa pagsisimula mo maaari mong piliin na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, hindi kailangan mag-install na kapaligiran_), o lokal sa iyong kompyuter gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Pagpapatakbo ng kurikulum nang lokal sa iyong computer
#### Gumawa ng iyong repositoryo
Para madaling masave ang iyong mga gawa, inirerekomenda na gumawa ka ng sariling kopya ng repositoryo na ito. Magagawa mo ito sa pamamagitan ng pag-click sa **Use this template** na button sa itaas ng pahina. Lilikha ito ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum.
Upang patakbuhin ang kurikulum na ito nang lokal sa iyong computer, kakailanganin mo ng text editor, browser, at command line tool. Ang aming unang aralin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay magpapaliwanag ng iba't ibang opsyon para sa bawat isa sa mga tool na ito upang makapili ka ng pinakaangkop para sa iyo.
Sundin ang mga hakbang na ito:
1. **I-fork ang Repositoryo**: I-click ang "Fork" button sa kanang itaas na bahagi ng pahinang ito.
2. **I-clone ang Repositoryo**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang iyong editor, na mayroon ding built-in na [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Pagpapatakbo ng kurikulum sa Codespace
1. I-clone ang iyong repository sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
Sa iyong kopya ng repositoryo na ginawa mo, i-click ang **Code** button at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para magtrabaho ka.
[CodeSpace](./images/createcodespace.png)
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.tl.png)
Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na command, palitan ang `<your-repository-url>` ng URL na iyong kinopya:
#### Pagpapatakbo ng kurikulum lokal sa iyong kompyuter
Para patakbuhin ang kurikulum na ito lokal sa iyong kompyuter, kailangan mo ng text editor, browser, at command line tool. Ang unang aralin namin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa iyo sa iba't ibang mga opsyon para sa mga ito upang pumili ka ng angkop sa iyo.
Inirerekomenda naming gamitin ang [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang editor mo, na may built-in na [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. I-clone ang iyong repositoryo sa iyong kompyuter. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
[CodeSpace](./images/createcodespace.png)
Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na utos, palitan ang `<your-repository-url>` ng URL na kakopya mo lang:
```bash
git clone <your-repository-url>
```
2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at piliin ang folder na iyong na-clone.
> Inirerekomendang mga extension para sa Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - upang ma-preview ang mga HTML page sa loob ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para tulungan kang magsulat ng code nang mas mabilis
2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at piliin ang folder na kaklone mo lang.
## 📂 Bawat aralin ay naglalaman ng:
> Inirerekomendang Visual Studio Code extensions:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para makita ang preview ng mga pahina ng HTML sa loob ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - upang makatulong sa mas mabilis na pagsusulat ng code
## 📂 Kasama sa bawat aralin:
- opsyonal na sketchnote
- opsyonal na karagdagang video
- paunang pagsusulit bago ang aralin
- pre-lesson warmup quiz
- nakasulat na aralin
- para sa mga araling nakabatay sa proyekto, mga gabay na hakbang-hakbang kung paano buuin ang proyekto
- pagsusuri ng kaalaman
- para sa mga aralin na nakabase sa proyekto, mga gabay hakbang-hakbang sa kung paano buuin ang proyekto
- pagsubok sa kaalaman
- isang hamon
- karagdagang babasahin
- karagdagang pagbasa
- takdang-aralin
- [pagsusulit pagkatapos ng aralin](https://ff-quizzes.netlify.app/web/)
- [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **Tungkol sa mga pagsusulit**: Ang lahat ng pagsusulit ay nasa folder ng Quiz-app, kabuuang 48 pagsusulit na may tig-tatlong tanong bawat isa. Makukuha ang mga ito [dito](https://ff-quizzes.netlify.app/web/) at maaaring patakbuhin ang quiz app nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa folder na `quiz-app`.
> **Isang tala tungkol sa mga pagsusulit**: Lahat ng pagsusulit ay nasa Quiz-app folder, may 48 na kabuuang pagsusulit na may tig-3 tanong bawat isa. Makukuha ang mga ito [dito](https://ff-quizzes.netlify.app/web/) ang quiz app ay maaaring patakbuhin locally o i-deploy sa Azure; sundin ang mga tagubilin sa `quiz-app` folder.
## 🗃️ Mga Aralin
| | Pangalan ng Proyekto | Mga Konseptong Itinuturo | Mga Layunin sa Pagkatuto | Nakakabit na Aralin | May-akda |
| | Pangalan ng Proyekto | Mga Konseptong Itinuturo | Mga Layunin sa Pagkatuto | Nakaugnay na Aralin | May-akda |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Pagsisimula | Panimula sa Programming at Mga Kasangkapan sa Trabaho | Matutunan ang mga pangunahing pundasyon sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer sa kanilang trabaho | [Panimula sa Programming Languages at Mga Kasangkapan sa Trabaho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pagsisimula | Mga Pangunahing Kaalaman sa GitHub, kabilang ang pakikipagtulungan sa isang koponan | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Panimula sa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pagsisimula | Accessibility | Matutunan ang mga pangunahing kaalaman sa web accessibility | [Mga Pangunahing Kaalaman sa Accessibility](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Mga Pangunahing Kaalaman sa JS | Mga Uri ng Data sa JavaScript | Ang mga pangunahing kaalaman sa mga uri ng data sa JavaScript | [Mga Uri ng Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Mga Pangunahing Kaalaman sa JS | Mga Function at Method | Matutunan ang tungkol sa mga function at method upang pamahalaan ang daloy ng lohika ng isang application | [Mga Function at Method](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | Mga Pangunahing Kaalaman sa JS | Paggawa ng Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon | [Paggawa ng Desisyon](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Mga Pangunahing Kaalaman sa JS | Mga Array at Loop | Magtrabaho gamit ang data gamit ang mga array at loop sa JavaScript | [Mga Array at Loop](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML sa Praktika | Bumuo ng HTML upang lumikha ng isang online na terrarium, na nakatuon sa paggawa ng layout | [Panimula sa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS sa Praktika | Bumuo ng CSS upang i-style ang online na terrarium, na nakatuon sa mga pangunahing kaalaman sa CSS kabilang ang paggawa ng page na responsive | [Panimula sa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Mga JavaScript Closures, DOM Manipulation | Bumuo ng JavaScript upang gawing drag/drop interface ang terrarium, na nakatuon sa closures at DOM manipulation | [Mga JavaScript Closures, DOM Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bumuo ng Typing Game | Matutunan kung paano gamitin ang mga keyboard event upang magmaneho ng lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa gamit ang Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano i-scaffold ang mga unang elemento ng isang browser extension | [Tungkol sa Mga Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa ng form, pagtawag sa API at pag-iimbak ng mga variable sa local storage | Bumuo ng mga elemento ng JavaScript ng iyong browser extension upang tumawag sa API gamit ang mga variable na nakaimbak sa local storage | [Mga API, Form, at Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mga proseso sa background sa browser, web performance | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; matutunan ang tungkol sa web performance at ilang mga optimization upang mapabuti | [Mga Background Task at Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Game Development gamit ang JavaScript | Matutunan ang tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro | [Panimula sa Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Pag-drawing sa canvas | Matutunan ang tungkol sa Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen | [Pag-drawing sa Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Paggalaw ng mga elemento sa screen | Tuklasin kung paano makakakuha ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Paggalaw ng mga Elemento](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pagtukoy ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function upang matiyak ang performance ng laro | [Pagtukoy ng Banggaan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagpapanatili ng score | Gumawa ng mga kalkulasyon sa matematika batay sa status at performance ng laro | [Pagpapanatili ng Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pagtatapos at pag-restart ng laro | Matutunan ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable | [Kondisyon ng Pagtatapos](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mga HTML Template at Route sa Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at HTML template | [Mga HTML Template at Route](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bumuo ng Login at Registration Form | Matutunan ang tungkol sa paggawa ng mga form at paghawak ng mga validation routine | [Mga Form](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, iimbak, at itapon | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng State Management | Matutunan kung paano pinapanatili ng iyong app ang estado at kung paano ito pamahalaan sa programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Paggawa gamit ang VScode | Matutunan kung paano gamitin ang code editor| [Gamitin ang VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Paggawa gamit ang AI | Matutunan kung paano bumuo ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 01 | Getting Started | Introduksyon sa Programming at Mga Kagamitan sa Trabaho | Matutunan ang mga pundamental na kaalaman sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Mga Batayan ng GitHub, kasama ang pagtatrabaho sa koponan | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Matutunan ang mga batayan ng web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Mga Uri ng Data sa JavaScript | Mga batayan ng mga uri ng data sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Mga Function at Method | Matuto tungkol sa mga function at method para pamahalaan ang daloy ng lohika ng aplikasyon | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | JS Basics | Paggawa ng mga Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays at Loops | Gumamit ng data gamit ang arrays at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML sa Praktis | Buoin ang HTML upang makagawa ng online terrarium, na nakatuon sa paggawa ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS sa Praktis | Buoin ang CSS upang istayl ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng pahina na responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Buoin ang JavaScript upang gumana ang terrarium bilang drag/drop interface, na nakatuon sa closures at DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Gumawa ng Typing Game | Matutunan kung paano gamitin ang mga keyboard event upang patakbuhin ang lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggamit ng Browsers | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at paano gumawa ng unang mga elemento ng isang browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pagbuo ng form, pagtawag ng API at pagtatago ng variables sa local storage | Buoin ang mga JavaScript na elemento ng iyong browser extension para tumawag ng API gamit ang mga variable na nakaimbak sa local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mga proseso sa background ng browser, web performance | Gamitin ang mga proseso sa background ng browser para pamahalaan ang icon ng extension; alamin ang tungkol sa web performance at ilang mga optimisasyon para mapahusay ito | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Pag-develop ng Laro gamit ang JavaScript | Matutunan ang tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Pagguuhit sa canvas | Matutunan ang Canvas API, na ginagamit para mag-draw ng mga elemento sa screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Paggalaw ng mga elemento sa paligid ng screen | Tuklasin kung paano magkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pagtuklas ng banggaan | Pahintulutan ang mga elemento na magbanggaan at mag-react sa isa't isa gamit ang mga keypress at magbigay ng cooldown function upang mapanatili ang performance ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagpapanatili ng iskor | Gumawa ng mga kalkulasyon base sa status at performance ng laro | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pagtatapos at pagsisimula muli ng laro | Matutunan ang tungkol sa pagtatapos at pagsisimula muli ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mga HTML Template at Ruta sa Web App | Matutunan kung paano gumawa ng balangkas ng arkitektura ng multipage website gamit ang routing at mga HTML template | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Gumawa ng Form para sa Pag-login at Pagrehistro | Matuto tungkol sa paggawa ng mga form at paghawak ng mga routine sa validation | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, itago, at itapon | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng State Management | Matuto kung paano nakahawak ang iyong app ng estado at paano ito pamahalaan nang programatiko | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunan kung paano gumamit ng code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Matutunan kung paano gumawa ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagohiya
Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyo ng pedagohiya:
* pagkatuto na nakabatay sa proyekto
Ang aming kurikulum ay idinisenyo gamit ang dalawang pangunahing prinsipyo sa pedagogiya:
* pagkatuto batay sa proyekto
* madalas na pagsusulit
Ang programa ay nagtuturo ng mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ang mga mag-aaral ng pagkakataon na magkaroon ng hands-on na karanasan sa pamamagitan ng paggawa ng typing game, virtual terrarium, eco-friendly browser extension, space-invader-style na laro, at banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga mag-aaral ng matibay na pag-unawa sa web development.
Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong mga kagamitan at teknik na ginagamit ng mga web developer sa kasalukuyan. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng praktikal na karanasan sa paggawa ng isang typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pag-unawa sa web development.
> 🎓 Maaari mong kunin ang unang ilang aralin sa kurikulum na ito bilang isang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn!
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang isang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn!
Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay nagiging mas nakakaengganyo para sa mga mag-aaral at ang pagkatuto ng mga konsepto ay mas mapapalakas. Nagsulat din kami ng ilang mga panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa isang video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" na koleksyon ng mga video tutorial, ang ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.
Sa pamamagitan ng pagtitiyak na ang nilalaman ay nakaayon sa mga proyekto, nagiging mas kaakit-akit ang proseso para sa mga estudyante at mas mapapalalim ang pag-alala ng mga konsepto. Sumulat din kami ng ilang panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na pinagsama sa isang video mula sa koleksyon ng mga video tutorial na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.
Bukod dito, ang isang mababang-panganib na pagsusulit bago ang klase ay nagtatakda ng intensyon ng mag-aaral patungo sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay mas nagpapalakas ng pagkatuto. Ang kurikulum na ito ay dinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong siklo.
Bukod dito, ang isang low-stakes na pagsusulit bago ang klase ay nagtatakda ng intensyon ng estudyante sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pag-alala. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Nagsisimula sa maliit ang mga proyekto at nagiging mas kumplikado habang papalapit ang pagtatapos ng 12-linggong siklo.
Habang sinadya naming iwasan ang pagpapakilala ng mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kinakailangan bilang isang web developer bago magpatibay ng framework, ang isang magandang susunod na hakbang pagkatapos makumpleto ang kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Habang sinadyang iniiwasan naming ipakilala ang mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kailangan bilang web developer bago gumamit ng framework, isang magandang susunod na hakbang sa pagtatapos ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga alituntunin. Malugod naming tinatanggap ang iyong nakabubuong feedback!
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga patnubay. Tinatanggap namin ang iyong konstruktibong puna!
## 🧭 Offline na access
## 🧭 Offline access
Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo na ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay magsisilbi sa port 3000 sa iyong localhost: `localhost:3000`.
Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo na ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong local na makina, at pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay ihahatid sa port 3000 sa iyong localhost: `localhost:3000`.
## 📘 PDF
Ang PDF ng lahat ng mga aralin ay makikita [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Iba Pang Kurso
## 🎒 Iba Pang Mga Kurso
Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan:
### 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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j para sa mga Baguhan](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 para sa mga Baguhan](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)
---
### Generative AI Series
[![Generative AI para sa mga Baguhan](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)
### Azure / Edge / MCP / Agents
[![AZD para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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)
---
### Pangunahing Pag-aaral
[![ML para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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)
### Generative AI Series
[![Generative AI para sa mga Baguhan](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)
---
### Pangunahing Pag-aaral
[![ML para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 para sa mga Baguhan](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 Series
[![Copilot para sa 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 para sa C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
---
### Copilot Series
[![Copilot para sa 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 para sa 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)
[![Pakikipagsapalaran ng Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Pagtatanong ng Tulong
## Pagkuha ng Tulong
Kung ikaw ay nahihirapan o may mga katanungan tungkol sa paggawa ng mga AI apps, sumali sa mga kapwa mag-aaral at mga bihasang developer sa mga talakayan tungkol sa MCP. Isa itong suportadong komunidad kung saan malugod na tinatanggap ang mga tanong at malayang ibinabahagi ang kaalaman.
Kung ikaw ay natigil o may mga tanong tungkol sa paggawa ng AI apps. Sumali sa mga kapwa nag-aaral at may karanasang mga developer sa mga talakayan tungkol sa MCP. Ito ay isang sumusuportang komunidad kung saan malugod na tinatanggap ang mga tanong at malayang ibinabahagi ang kaalaman.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Kung mayroon kang feedback sa produkto o mga error habang gumagawa, bisitahin:
Kung mayroon kang puna tungkol sa produkto o mga error habang nagtatayo, bisitahin:
[![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)
[![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)
## Lisensya
## Lisensya
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) file para sa karagdagang impormasyon.
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) na file para sa karagdagang impormasyon.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
**Paalala**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat nagsusumikap kaming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o kamalian. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -42,10 +42,10 @@ Kasama sa kurikulum na ito ang mga importable na package para sa karaniwang mga
- Limitado ang suporta ng Moodle Cloud para sa Common Cartridge. Mas mainam gamitin ang Moodle file sa itaas, na maaari ring i-upload sa Canvas.
- Pagkatapos ng import, suriin ang mga module, petsa ng due, at mga setting ng pagsusulit upang tumugma sa iskedyul ng inyong term.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.tl.png)
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.tl.png)
> Ang kurikulum sa isang Moodle classroom
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.tl.png)
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.tl.png)
> Ang kurikulum sa Canvas
### Direktang paggamit ng repositoryo (walang Classroom)

@ -17,7 +17,7 @@ Nghe này, tôi hoàn toàn hiểu nếu lập trình có vẻ đáng sợ ngay
Hôm nay, chúng ta sẽ khám phá những công cụ tuyệt vời làm cho phát triển web hiện đại không chỉ khả thi mà còn thực sự gây nghiện. Tôi đang nói về chính những trình soạn thảo, trình duyệt và quy trình làm việc mà các nhà phát triển tại Netflix, Spotify, và studio ứng dụng indie yêu thích của bạn sử dụng mỗi ngày. Và đây là phần sẽ khiến bạn nhảy múa vui vẻ: hầu hết các công cụ chuyên nghiệp, tiêu chuẩn ngành này đều hoàn toàn miễn phí!
![Giới thiệu Lập trình](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.vi.png)
![Giới thiệu Lập trình](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ Mình biết điều này có thể khiến bạn cảm thấy hơi quá tải l
Chúng ta sẽ cùng nhau đi qua hành trình này, từng bước một. Không vội vàng, không áp lực chỉ có bạn, mình, và một số công cụ cực kỳ thú vị sắp trở thành người bạn thân mới của bạn!
![Giới thiệu về GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.vi.png)
![Giới thiệu về GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -610,7 +610,7 @@ Bạn không chỉ học cách viết mã ở đây bạn đang chuẩn bị
✅ Một cách tốt để tìm các repo 'thân thiện với người mới bắt đầu' là [tìm kiếm theo thẻ 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Sao chép repo về máy](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.vi.png)
![Sao chép repo về máy](../../../../translated_images/clone_repo.5085c48d666ead57.vi.png)
Có nhiều cách để sao chép mã. Một cách là "clone" nội dung của repository, sử dụng HTTPS, SSH, hoặc GitHub CLI (Command Line Interface).

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Tạo Trang Web Dễ Tiếp Cận
![Tất cả về khả năng tiếp cận](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.vi.png)
![Tất cả về khả năng tiếp cận](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Kiểu dữ liệu
![Cơ bản về JavaScript - Kiểu dữ liệu](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.vi.png)
![Cơ bản về JavaScript - Kiểu dữ liệu](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Phương thức và Hàm
![Cơ bản về JavaScript - Hàm](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.vi.png)
![Cơ bản về JavaScript - Hàm](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Ra quyết định
![Cơ bản về JavaScript - Ra quyết định](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.vi.png)
![Cơ bản về JavaScript - Ra quyết định](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Mảng và Vòng lặp
![Cơ bản về JavaScript - Mảng](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.vi.png)
![Cơ bản về JavaScript - Mảng](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![Giới thiệu về HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.vi.png)
![Giới thiệu về HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, hay HyperText Markup Language, là nền tảng của mọi trang web mà bạn từng truy cập. Hãy nghĩ về HTML như bộ khung xương cung cấp cấu trúc cho các trang web nó xác định nơi nội dung sẽ xuất hiện, cách tổ chức và ý nghĩa của từng phần. Trong khi CSS sẽ "trang trí" HTML của bạn với màu sắc và bố cục, và JavaScript sẽ làm cho nó sống động với tính tương tác, HTML cung cấp cấu trúc cơ bản làm nền tảng cho mọi thứ khác.
@ -88,7 +88,7 @@ Bạn sẽ tạo một thư mục dành riêng cho dự án terrarium và thêm
4. Trong bảng Explorer, nhấp vào biểu tượng "New File"
5. Đặt tên tệp của bạn là `index.html`
![VS Code Explorer hiển thị việc tạo tệp mới](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.vi.png)
![VS Code Explorer hiển thị việc tạo tệp mới](../../../../translated_images/vs-code-index.e2986cf919471eb9.vi.png)
**Cách 2: Sử dụng Lệnh Terminal**
```bash

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![Giới thiệu về CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.vi.png)
![Giới thiệu về CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
Bạn còn nhớ terrarium HTML của mình trông khá đơn giản chứ? CSS chính là nơi chúng ta biến cấu trúc cơ bản đó thành một thứ hấp dẫn về mặt thị giác.
@ -205,7 +205,7 @@ body {
Mở công cụ phát triển của trình duyệt (F12), điều hướng đến tab Elements, và kiểm tra phần tử `<h1>` của bạn. Bạn sẽ thấy rằng nó thừa hưởng font family từ body:
![font thừa hưởng](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.vi.png)
![font thừa hưởng](../../../../translated_images/1.cc07a5cbe114ad1d.vi.png)
**Thời gian thử nghiệm**: Hãy thử đặt các thuộc tính có thể thừa hưởng khác trên `<body>` như `color`, `line-height`, hoặc `text-align`. Điều gì xảy ra với tiêu đề và các phần tử khác?
@ -599,7 +599,7 @@ Sẵn sàng nâng cấp terrarium của bạn với hiệu ứng phản chiếu
Bạn sẽ tạo các điểm sáng tinh tế mô phỏng cách ánh sáng phản chiếu trên bề mặt thủy tinh. Cách tiếp cận này tương tự như cách các họa sĩ thời Phục hưng như Jan van Eyck sử dụng ánh sáng và phản chiếu để làm cho thủy tinh được vẽ trông như ba chiều. Đây là mục tiêu của bạn:
![terrarium hoàn thiện](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.vi.png)
![terrarium hoàn thiện](../../../../translated_images/terrarium-final.2f07047ffc597d0a.vi.png)
**Thử thách của bạn:**
- **Tạo** các hình oval màu trắng hoặc sáng để làm hiệu ứng phản chiếu thủy tinh

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM và một closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.vi.png)
![DOM và một closure](../../../../translated_images/webdev101-js.10280393044d7eaa.vi.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
Chào mừng bạn đến với một trong những khía cạnh thú vị nhất của phát triển web - làm cho mọi thứ trở nên tương tác! Mô hình Đối tượng Tài liệu (DOM) giống như một cây cầu giữa HTML và JavaScript của bạn, và hôm nay chúng ta sẽ sử dụng nó để làm cho terrarium của bạn sống động. Khi Tim Berners-Lee tạo ra trình duyệt web đầu tiên, ông đã hình dung một web nơi các tài liệu có thể động và tương tác - DOM làm cho tầm nhìn đó trở thành hiện thực.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![Biểu diễn cây DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.vi.png)
![Biểu diễn cây DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.vi.png)
> Một biểu diễn của DOM và mã HTML tham chiếu nó. Từ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Hiểu về Closures**: Closures là một chủ đề quan trọng trong JavaScript, và nhiều nhà phát triển sử dụng chúng trong nhiều năm trước khi hiểu đầy đủ tất cả các khía cạnh lý thuyết. Hôm nay, chúng ta tập trung vào ứng dụng thực tế - bạn sẽ thấy closures xuất hiện tự nhiên khi chúng ta xây dựng các tính năng tương tác. Hiểu biết sẽ phát triển khi bạn thấy cách chúng giải quyết các vấn đề thực tế.
![Biểu diễn cây DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.vi.png)
![Biểu diễn cây DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.vi.png)
> Một biểu diễn của DOM và mã HTML tham chiếu nó. Từ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Bây giờ hãy kiểm tra terrarium tương tác của bạn! Mở tệp `index
- **Hỗ trợ đa thiết bị**: Hoạt động trên máy tính và di động
- **Ý thức về hiệu suất**: Không có rò rỉ bộ nhớ hay tính toán dư thừa
![terrarium hoàn chỉnh](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.vi.png)
![terrarium hoàn chỉnh](../../../../translated_images/terrarium-final.0920f16e87c13a84.vi.png)
---

@ -1,45 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
"translation_date": "2025-08-27T22:55:36+00:00",
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
"translation_date": "2026-01-07T01:09:33+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "vi"
}
-->
# Terrarium của tôi: Một dự án học về HTML, CSS và thao tác DOM bằng JavaScript 🌵🌱
Một bài tập nhỏ về kéo thả mã. Với một chút HTML, JS và CSS, bạn sẽ có thể xây dựng giao diện web, tạo kiểu cho nó, và thậm chí thêm nhiều tương tác theo ý thích.
![terrarium của tôi](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.vi.png)
# Bài học
1. [Giới thiệu về HTML](./1-intro-to-html/README.md)
2. [Giới thiệu về CSS](./2-intro-to-css/README.md)
3. [Giới thiệu về DOM và JS Closures](./3-intro-to-DOM-and-closures/README.md)
## Tín dụng
Được viết với ♥️ bởi [Jen Looper](https://www.twitter.com/jenlooper)
Terrarium được tạo qua CSS lấy cảm hứng từ lọ thủy tinh của Jakub Mandra trên [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
Tác phẩm nghệ thuật được vẽ tay bởi [Jen Looper](http://jenlooper.com) với sự hỗ trợ của Procreate.
## Triển khai Terrarium của bạn
Bạn có thể triển khai, hoặc xuất bản terrarium của mình lên web bằng Azure Static Web Apps.
Bạn có thể triển khai hoặc xuất bản Terrarium của mình trên web bằng cách sử dụng **Azure Static Web Apps**.
1. Fork kho lưu trữ này
1. Fork repo này
2. Nhấn nút này
2. Nhấn nút này 👇
[![Nút triển khai lên Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
3. Làm theo hướng dẫn trong wizard để tạo ứng dụng của bạn. Đảm bảo bạn đặt thư mục gốc của ứng dụng là `/solution` hoặc thư mục gốc của mã nguồn. Ứng dụng này không có API, vì vậy không cần lo lắng về việc thêm API. Một thư mục github sẽ được tạo trong kho lưu trữ đã fork của bạn, giúp dịch vụ xây dựng của Azure Static Web Apps xây dựng và xuất bản ứng dụng của bạn lên một URL mới.
3. Làm theo trình hướng dẫn thiết lập để tạo ứng dụng của bạn.
- Đặt **App root** thành `/solution` hoặc thư mục gốc của mã nguồn của bạn.
- Ứng dụng này không có API, vì vậy bạn có thể bỏ qua cấu hình API.
- Một thư mục `.github` sẽ được tạo tự động để giúp Azure Static Web Apps xây dựng và xuất bản ứng dụng của bạn.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp từ con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ gốc của nó nên được coi là nguồn chính xác và uy tín nhất. Đối với thông tin quan trọng, việc dịch thuật chuyên nghiệp do con người thực hiện được khuyến nghị. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc sai sót nào phát sinh từ việc sử dụng bản dịch này.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Một bài tập nhỏ về kéo và thả. Với một chút HTML, JS và CSS, bạn có thể tạo giao diện web, định kiểu và thêm tương tác.
![terrarium của tôi](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.vi.png)
![terrarium của tôi](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.vi.png)
## Tín dụng

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![Ghi chú hình ảnh về trình duyệt](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.vi.jpg)
![Ghi chú hình ảnh về trình duyệt](../../../../translated_images/browser.60317c9be8b7f84a.vi.jpg)
> Ghi chú hình ảnh bởi [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Câu hỏi trước bài giảng
@ -79,7 +79,7 @@ Quá trình này giống như cách trình duyệt web đầu tiên, WorldWideWe
**Một chút lịch sử**: Trình duyệt đầu tiên được gọi là 'WorldWideWeb' và được tạo ra bởi Sir Timothy Berners-Lee vào năm 1990.
![trình duyệt đầu tiên](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.vi.jpg)
![trình duyệt đầu tiên](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.vi.jpg)
> Một số trình duyệt đầu tiên, qua [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Cách Trình duyệt Xử lý Nội dung Web
@ -198,7 +198,7 @@ quadrantChart
Hiểu quy trình cài đặt tiện ích mở rộng giúp bạn dự đoán trải nghiệm người dùng khi họ cài đặt tiện ích mở rộng của bạn. Quy trình cài đặt được chuẩn hóa trên các trình duyệt hiện đại, với những biến thể nhỏ trong thiết kế giao diện.
![ảnh chụp màn hình trình duyệt Edge hiển thị trang edge://extensions mở và menu cài đặt mở](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.vi.png)
![ảnh chụp màn hình trình duyệt Edge hiển thị trang edge://extensions mở và menu cài đặt mở](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.vi.png)
> **Quan trọng**: Đảm bảo bật chế độ nhà phát triển và cho phép tiện ích mở rộng từ các cửa hàng khác khi thử nghiệm tiện ích mở rộng của riêng bạn.
@ -313,10 +313,10 @@ Bây giờ chúng ta sẽ xây dựng các thành phần giao diện người d
### Tổng quan về Giao diện Tiện ích Mở rộng
**Màn hình Cấu hình** - Cấu hình người dùng lần đầu:
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh mở trong trình duyệt, hiển thị một biểu mẫu với các trường nhập cho tên vùng và khóa API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.vi.png)
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh mở trong trình duyệt, hiển thị một biểu mẫu với các trường nhập cho tên vùng và khóa API.](../../../../translated_images/1.b6da8c1394b07491.vi.png)
**Màn hình Kết quả** - Hiển thị dữ liệu dấu chân carbon:
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh hiển thị các giá trị về sử dụng carbon và tỷ lệ nhiên liệu hóa thạch cho vùng US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.vi.png)
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh hiển thị các giá trị về sử dụng carbon và tỷ lệ nhiên liệu hóa thạch cho vùng US-NEISO.](../../../../translated_images/2.1dae52ff08042246.vi.png)
### Xây dựng Biểu mẫu Cấu hình

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![Bảng bộ nhớ cục bộ](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.vi.png)
![Bảng bộ nhớ cục bộ](../../../../translated_images/localstorage.472f8147b6a3f8d1.vi.png)
> ⚠️ **Cân nhắc về bảo mật**: Trong các ứng dụng sản xuất, việc lưu trữ khóa API trong LocalStorage gây rủi ro bảo mật vì JavaScript có thể truy cập dữ liệu này. Đối với mục đích học tập, cách tiếp cận này hoạt động tốt, nhưng các ứng dụng thực tế nên sử dụng lưu trữ phía máy chủ an toàn cho thông tin đăng nhập nhạy cảm.

@ -126,7 +126,7 @@ flowchart LR
Hãy thử điều này. Mở một trang web (Microsoft.com hoạt động tốt cho việc này) và nhấp vào nút 'Record'. Bây giờ làm mới trang và xem profiler ghi lại mọi thứ xảy ra. Khi bạn dừng ghi, bạn sẽ thấy một phân tích chi tiết về cách trình duyệt 'scripts', 'renders', và 'paints' trang web. Nó làm tôi nhớ đến cách trung tâm điều khiển giám sát mọi hệ thống trong một lần phóng tên lửa - bạn nhận được dữ liệu thời gian thực về chính xác những gì đang xảy ra và khi nào.
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.vi.png)
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.vi.png)
✅ [Tài liệu Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) có rất nhiều chi tiết nếu bạn muốn tìm hiểu sâu hơn
@ -136,11 +136,11 @@ Chọn các phần của dòng thời gian profile để phóng to các sự ki
Lấy một ảnh chụp nhanh về hiệu suất trang của bạn bằng cách chọn một phần của dòng thời gian profile và nhìn vào bảng tóm tắt:
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.vi.png)
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.vi.png)
Kiểm tra bảng Event Log để xem liệu có sự kiện nào mất hơn 15 ms:
![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.vi.png)
![Edge event log](../../../../translated_images/log.804026979f3707e0.vi.png)
✅ Làm quen với profiler của bạn! Mở công cụ dành cho nhà phát triển trên trang này và xem liệu có bất kỳ nút thắt nào không. Tài nguyên nào tải chậm nhất? Nhanh nhất?

@ -23,7 +23,7 @@ Tiện ích này có thể được người dùng gọi bất kỳ lúc nào sa
### Ghi nhận
![một tiện ích mở rộng trình duyệt màu xanh lá cây](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![một tiện ích mở rộng trình duyệt màu xanh lá cây](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Ghi nhận

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện, bạn có thể xây dựng một tiện ích mở rộng trình duyệt để nhận nhắc nhở ngay trong trình duyệt về mức độ tiêu thụ điện năng trong khu vực của bạn. Việc sử dụng tiện ích này một cách linh hoạt sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![ảnh chụp tiện ích](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt Đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện Ích Mở Rộng (Extensions). Từ đó, chọn 'Tải Tiện Ích Không Đóng Gói' (Load Unpacked) để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một khóa API cho API của CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![cài đặt](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![cài đặt](../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Khi bạn đã nhập khóa API và mã khu vực vào giao diện tiện ích, chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp gợi ý về các hoạt động tiêu tốn năng lượng phù hợp. Ý tưởng đằng sau hệ thống 'chấm màu' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện năng, hãy tạo một tiện ích mở rộng trình duyệt để bạn có thể nhận được thông báo trực tiếp trong trình duyệt về mức tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![ảnh chụp tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Từ đó, chọn 'Tải tiện ích mở rộng chưa nén' để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Bản đồ điện năng](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![cài đặt](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![cài đặt](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Sau khi nhập khóa API và khu vực vào giao diện tiện ích mở rộng, điểm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng mà bạn nên thực hiện. Ý tưởng đằng sau hệ thống 'điểm' này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API tín hiệu CO2 của tmrow để theo dõi mức tiêu thụ điện năng, xây dựng một tiện ích mở rộng trình duyệt nhằm nhắc nhở bạn về mức độ tiêu thụ điện năng trong khu vực của bạn ngay trong trình duyệt. Việc sử dụng tiện ích này sẽ giúp bạn đưa ra quyết định dựa trên thông tin đó về các hoạt động của mình.
![Ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![Ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng tiện ích mở rộng. Từ đó, chọn 'Load unpacked' để tải một tiện ích mở rộng mới. Khi được nhắc, mở thư mục 'dist' và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API của CO2 Signal ([nhận qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào hộp trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) từ [Electricity Map](https://www.electricitymap.org/map) (ví dụ: ở Boston, tôi sử dụng 'US-NEISO').
![Cài đặt](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![Cài đặt](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Sau khi nhập khóa API và mã khu vực vào giao diện tiện ích mở rộng, dấu chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng phù hợp với hiệu suất của bạn. Ý tưởng về hệ thống 'dấu chấm' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Chúng ta sẽ sử dụng API Signal CO2 của tmrow để theo dõi việc sử dụng điện và tạo một tiện ích mở rộng cho trình duyệt, giúp bạn nhận được thông báo trực tiếp trên trình duyệt về mức độ tiêu thụ điện năng trong khu vực của mình. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đánh giá các hoạt động của mình dựa trên thông tin này.
![ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu "ba chấm" ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Nếu chưa được kích hoạt, hãy bật Chế độ nhà phát triển (ở góc dưới bên trái). Chọn "Tải không nén" để tải một tiện ích mở rộng mới. Mở thư mục "dist" khi được nhắc và tiện ích mở rộng sẽ được tải lên. Để sử dụng, bạn sẽ cần một khóa API cho API CO2 Signal (bạn có thể [nhận tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [bản đồ điện](https://www.electricitymap.org/map) (ví dụ, ở Boston, mã là "US-NEISO").
![cài đặt](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![cài đặt](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Khi bạn đã nhập khóa API và khu vực vào giao diện của tiện ích mở rộng, chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực và cung cấp gợi ý về những hoạt động tiêu tốn nhiều năng lượng nào phù hợp để thực hiện. Ý tưởng đằng sau hệ thống "chấm" này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Xây dựng một tiện ích mở rộng trình duyệt để hiển thị lời nhắc trên trình duyệt về mức độ sử dụng điện trong khu vực của bạn, sử dụng API CO2 Signal của tmrow để theo dõi lượng điện tiêu thụ. Bằng cách sử dụng tiện ích mở rộng này, bạn có thể đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, hãy tìm bảng điều khiển "Tiện ích mở rộng" từ menu "ba chấm" ở góc trên bên phải của trình duyệt. Từ đó, chọn "Load Unpacked" để tải tiện ích mở rộng mới. Khi được nhắc, mở thư mục "dist" và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một API key của CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực tương ứng](http://api.electricitymap.org/v3/zones) từ [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, sử dụng 'US-NEISO').
![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Sau khi nhập API key và khu vực vào giao diện tiện ích, một chấm màu sẽ xuất hiện trên thanh tiện ích mở rộng của trình duyệt, thay đổi màu sắc để phản ánh mức độ sử dụng năng lượng trong khu vực của bạn. Điều này giúp bạn biết khi nào là thời điểm thích hợp để thực hiện các hoạt động cần nhiều năng lượng. Ý tưởng về hệ thống "chấm màu" này được lấy cảm hứng từ [Energy Lollipop extension](https://energylollipop.com/) dành cho lượng phát thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API CO2 Signal của tmrow để theo dõi mức tiêu thụ điện năng, xây dựng tiện ích mở rộng trình duyệt để bạn có thể nhận được cảnh báo trong trình duyệt về mức độ tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích này sẽ giúp bạn cân nhắc các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích mở rộng trình duyệt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![ảnh chụp tiện ích mở rộng trình duyệt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt Đầu Từ Đây
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện Ích Mở Rộng. Từ đó, chọn 'Load Unpacked' để tải tiện ích mở rộng mới. Mở thư mục 'dist' theo yêu cầu và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Bản Đồ Điện](https://www.electricitymap.org/map) (ở Boston, ví dụ, tôi sử dụng 'US-NEISO').
![đang tải xuống](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![đang tải xuống](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Sau khi khóa API và khu vực được nhập vào giao diện tiện ích mở rộng, điểm màu trên thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn gợi ý về các hoạt động phù hợp với mức tiêu thụ đó. Ý tưởng về hệ thống 'điểm màu' này được lấy cảm hứng từ [tiện ích mở rộng trình duyệt Lollipop Năng Lượng](https://energylollipop.com/) dành cho khu vực California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện, bạn sẽ xây dựng một tiện ích mở rộng trình duyệt để có thể nhận được nhắc nhở ngay trong trình duyệt về mức độ tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích này một cách linh hoạt sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.vi.png)
![ảnh chụp tiện ích](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Từ đó, chọn 'Tải không đóng gói' để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một API key cho API của CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![cài đặt](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.vi.png)
![cài đặt](../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
Khi API key và mã khu vực được nhập vào giao diện tiện ích, chấm màu trong thanh tiện ích trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn gợi ý về các hoạt động tiêu tốn năng lượng phù hợp. Ý tưởng đằng sau hệ thống 'chấm' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![lưới của canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.vi.png)
![lưới của canvas](../../../../translated_images/canvas_grid.5f209da785ded492.vi.png)
> Hình ảnh từ [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Để vẽ trên phần tử canvas, bạn sẽ làm theo quy trình ba bước giống nhau, tạo nền tảng cho tất cả đồ họa canvas. Một khi bạn làm điều này vài lần, nó sẽ trở thành bản năng:
@ -329,11 +329,11 @@ Bạn sẽ xây dựng một trang web với một phần tử Canvas. Nó sẽ
- Tàu nhân vật chính
![Tàu nhân vật chính](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.vi.png)
![Tàu nhân vật chính](../../../../translated_images/player.dd24c1afa8c71e9b.vi.png)
- 5*5 quái vật
![Tàu quái vật](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.vi.png)
![Tàu quái vật](../../../../translated_images/enemyShip.5df2a822c16650c2.vi.png)
### Các bước được khuyến nghị để bắt đầu phát triển
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Kết quả hoàn chỉnh sẽ trông như sau:
![Màn hình đen với một nhân vật chính và 5*5 quái vật](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.vi.png)
![Màn hình đen với một nhân vật chính và 5*5 quái vật](../../../../translated_images/partI-solution.36c53b48c9ffae2a.vi.png)
## Giải pháp

@ -34,7 +34,7 @@ Việc hiển thị trực quan rất quan trọng - hiển thị biểu tượn
Bây giờ chúng ta sẽ triển khai các hệ thống phản hồi cốt lõi để giữ người chơi tham gia:
- **Hệ thống điểm số**: Mỗi tàu địch bị tiêu diệt sẽ thưởng 100 điểm (số tròn dễ tính toán hơn cho người chơi). Điểm số sẽ hiển thị ở góc dưới bên trái.
- **Bộ đếm mạng sống**: Nhân vật chính của bạn bắt đầu với ba mạng sống - một tiêu chuẩn được thiết lập bởi các trò chơi arcade đầu tiên để cân bằng giữa thử thách và khả năng chơi. Mỗi lần va chạm với kẻ địch sẽ mất một mạng sống. Chúng ta sẽ hiển thị số mạng sống còn lại ở góc dưới bên phải bằng biểu tượng tàu ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.vi.png).
- **Bộ đếm mạng sống**: Nhân vật chính của bạn bắt đầu với ba mạng sống - một tiêu chuẩn được thiết lập bởi các trò chơi arcade đầu tiên để cân bằng giữa thử thách và khả năng chơi. Mỗi lần va chạm với kẻ địch sẽ mất một mạng sống. Chúng ta sẽ hiển thị số mạng sống còn lại ở góc dưới bên phải bằng biểu tượng tàu ![life image](../../../../translated_images/life.6fb9f50d53ee0413.vi.png).
## Bắt đầu xây dựng!

@ -652,7 +652,7 @@ sequenceDiagram
Sử dụng `history.pushState` tạo các mục mới trong lịch sử điều hướng của trình duyệt. Bạn có thể kiểm tra điều đó bằng cách giữ *nút quay lại* của trình duyệt, nó sẽ hiển thị như sau:
![Ảnh chụp màn hình lịch sử điều hướng](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.vi.png)
![Ảnh chụp màn hình lịch sử điều hướng](../../../../translated_images/history.7fdabbafa521e064.vi.png)
Nếu bạn thử nhấp vào nút quay lại vài lần, bạn sẽ thấy rằng URL hiện tại thay đổi và lịch sử được cập nhật, nhưng cùng một mẫu vẫn được hiển thị.

@ -295,7 +295,7 @@ Hãy cùng xem điều gì thực sự xảy ra khi ai đó nhấn nút gửi.
2. Quan sát các thay đổi trong thanh địa chỉ của trình duyệt
3. Lưu ý cách trang tải lại và dữ liệu xuất hiện trong URL
![Ảnh chụp màn hình thay đổi URL của trình duyệt sau khi nhấn nút Đăng ký](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.vi.png)
![Ảnh chụp màn hình thay đổi URL của trình duyệt sau khi nhấn nút Đăng ký](../../../../translated_images/click-register.e89a30bf0d4bc9ca.vi.png)
### So sánh phương thức HTTP
@ -350,7 +350,7 @@ Hãy cấu hình biểu mẫu đăng ký của bạn để giao tiếp đúng c
2. **Nhấn** nút "Tạo tài khoản"
3. **Quan sát** phản hồi của máy chủ trong trình duyệt của bạn
![Một cửa sổ trình duyệt tại địa chỉ localhost:5000/api/accounts, hiển thị chuỗi JSON với dữ liệu người dùng](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.vi.png)
![Một cửa sổ trình duyệt tại địa chỉ localhost:5000/api/accounts, hiển thị chuỗi JSON với dữ liệu người dùng](../../../../translated_images/form-post.61de4ca1b964d91a.vi.png)
**Những gì bạn nên thấy:**
- **Trình duyệt chuyển hướng** đến URL điểm cuối API
@ -615,7 +615,7 @@ async function register() {
3. **Nhấp** vào "Tạo tài khoản"
4. **Quan sát** các thông báo trên bảng điều khiển và phản hồi của người dùng
![Ảnh chụp màn hình hiển thị thông báo nhật ký trong bảng điều khiển trình duyệt](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.vi.png)
![Ảnh chụp màn hình hiển thị thông báo nhật ký trong bảng điều khiển trình duyệt](../../../../translated_images/browser-console.efaf0b51aaaf6778.vi.png)
**Những gì bạn sẽ thấy:**
- **Trạng thái tải** xuất hiện trên nút gửi
@ -790,7 +790,7 @@ Hãy nâng cao biểu mẫu đăng ký của bạn với xác thực mạnh mẽ
3. **Thử** các ký tự đặc biệt trong trường tên người dùng
4. **Nhập** số dư âm
![Ảnh chụp màn hình hiển thị lỗi xác thực khi cố gắng gửi biểu mẫu](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.vi.png)
![Ảnh chụp màn hình hiển thị lỗi xác thực khi cố gắng gửi biểu mẫu](../../../../translated_images/validation-error.8bd23e98d416c22f.vi.png)
**Những gì bạn sẽ quan sát:**
- **Trình duyệt hiển thị** các thông báo xác thực gốc
@ -940,7 +940,7 @@ Hiển thị thông báo lỗi trong HTML nếu người dùng đã tồn tại.
Dưới đây là một ví dụ về giao diện trang đăng nhập cuối cùng sau khi thêm một chút kiểu dáng:
![Ảnh chụp màn hình của trang đăng nhập sau khi thêm kiểu dáng CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.vi.png)
![Ảnh chụp màn hình của trang đăng nhập sau khi thêm kiểu dáng CSS](../../../../translated_images/result.96ef01f607bf856a.vi.png)
## Câu hỏi sau bài giảng

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![Quy trình cập nhật trong ứng dụng nhiều trang](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.vi.png)
![Quy trình cập nhật trong ứng dụng nhiều trang](../../../../translated_images/mpa.7f7375a1a2d4aa77.vi.png)
**Tại sao cách tiếp cận này cảm thấy cồng kềnh:**
- Mỗi lần nhấp chuột đều yêu cầu xây dựng lại toàn bộ trang từ đầu
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![Quy trình cập nhật trong ứng dụng một trang](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.vi.png)
![Quy trình cập nhật trong ứng dụng một trang](../../../../translated_images/spa.268ec73b41f992c2.vi.png)
**Tại sao SPA cảm thấy tốt hơn:**
- Chỉ những phần thực sự thay đổi mới được cập nhật (thông minh, đúng không?)
@ -523,7 +523,7 @@ if (data.error) {
Bây giờ khi bạn thử với tài khoản không hợp lệ, bạn sẽ thấy một thông báo lỗi hữu ích ngay trên trang!
![Ảnh chụp màn hình hiển thị thông báo lỗi trong quá trình đăng nhập](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.vi.png)
![Ảnh chụp màn hình hiển thị thông báo lỗi trong quá trình đăng nhập](../../../../translated_images/login-error.416fe019b36a6327.vi.png)
#### Bước 4: Tạo Sự Bao Gồm Với Khả Năng Tiếp Cận
@ -958,7 +958,7 @@ Sẵn sàng nâng cấp ứng dụng ngân hàng của bạn lên một tầm ca
Dưới đây là hình ảnh bảng điều khiển được chỉnh sửa:
![Ảnh chụp màn hình ví dụ về kết quả bảng điều khiển sau khi thêm kiểu dáng](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.vi.png)
![Ảnh chụp màn hình ví dụ về kết quả bảng điều khiển sau khi thêm kiểu dáng](../../../../translated_images/screen2.123c82a831a1d14a.vi.png)
Đừng cảm thấy rằng bạn phải làm giống hệt như vậy - hãy sử dụng nó làm nguồn cảm hứng và tạo dấu ấn riêng của bạn!

@ -190,7 +190,7 @@ Giống như thiết kế ngăn cách của Titanic tưởng chừng như mạnh
Thay vì chạy vòng quanh, chúng ta sẽ tạo một hệ thống **quản lý trạng thái tập trung**. Hãy nghĩ về nó như có một người thực sự tổ chức chịu trách nhiệm về tất cả những thứ quan trọng:
![Sơ đồ hiển thị luồng dữ liệu giữa HTML, hành động người dùng và trạng thái](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.vi.png)
![Sơ đồ hiển thị luồng dữ liệu giữa HTML, hành động người dùng và trạng thái](../../../../translated_images/data-flow.fa2354e0908fecc8.vi.png)
```mermaid
flowchart TD
@ -803,7 +803,7 @@ Thử thách này sẽ giúp bạn suy nghĩ như một nhà phát triển chuy
Dưới đây là kết quả ví dụ sau khi hoàn thành bài tập:
![Ảnh chụp màn hình hiển thị hộp thoại "Thêm giao dịch" ví dụ](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.vi.png)
![Ảnh chụp màn hình hiển thị hộp thoại "Thêm giao dịch" ví dụ](../../../../translated_images/dialog.93bba104afeb79f1.vi.png)
---

@ -112,7 +112,7 @@ Tham khảo [tài liệu API máy chủ](../api/README.md) để biết:
**Kết quả mong đợi:**
Sau khi hoàn thành bài tập này, ứng dụng ngân hàng của bạn sẽ có tính năng "Thêm giao dịch" hoạt động đầy đủ, trông chuyên nghiệp và hoạt động mượt mà:
![Ảnh chụp màn hình hiển thị ví dụ về hộp thoại "Thêm giao dịch"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.vi.png)
![Ảnh chụp màn hình hiển thị ví dụ về hộp thoại "Thêm giao dịch"](../../../../translated_images/dialog.93bba104afeb79f1.vi.png)
## Kiểm tra triển khai của bạn

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Trong dự án này, bạn sẽ học cách xây dựng một ngân hàng giả tưởng. Những bài học này bao gồm hướng dẫn về cách thiết kế ứng dụng web và cung cấp các tuyến đường, xây dựng biểu mẫu, quản lý trạng thái, và lấy dữ liệu từ API để truy xuất thông tin của ngân hàng.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.vi.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.vi.png) |
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.vi.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.vi.png) |
|--------------------------------|--------------------------------|
## Các bài học

@ -185,7 +185,7 @@ Giống như cách điện thoại của Alexander Graham Bell kết nối các
Khi mọi thứ đã tải lên, bạn sẽ thấy một không gian làm việc sạch sẽ được thiết kế để giúp bạn tập trung vào điều quan trọng mã của bạn!
![Giao diện mặc định của VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.vi.png)
![Giao diện mặc định của VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.vi.png)
**Đây là chuyến tham quan khu vực của bạn:**
- **Thanh Hoạt Động** (dải bên trái): Điều hướng chính của bạn với Explorer 📁, Tìm kiếm 🔍, Source Control 🌿, Tiện ích 🧩, và Cài đặt ⚙️
@ -233,7 +233,7 @@ Khả năng này cho phép truy cập ngay lập tức vào bất kỳ kho công
1. Truy cập [vscode.dev](https://vscode.dev) nếu bạn chưa ở đó
2. Tìm nút "Open Remote Repository" trên màn hình chào mừng và nhấp vào nó
![Mở kho từ xa](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.vi.png)
![Mở kho từ xa](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.vi.png)
3. Dán vào bất kỳ URL kho GitHub nào (thử cái này: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Nhấn Enter và xem điều kỳ diệu xảy ra!
@ -242,7 +242,7 @@ Khả năng này cho phép truy cập ngay lập tức vào bất kỳ kho công
Muốn cảm thấy như một phù thủy lập trình? Thử phím tắt này: Ctrl+Shift+P (hoặc Cmd+Shift+P trên Mac) để mở Command Palette:
![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.vi.png)
![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.vi.png)
**Command Palette giống như có một công cụ tìm kiếm cho mọi thứ bạn có thể làm:**
- Gõ "open remote" và nó sẽ tìm trình mở kho cho bạn
@ -304,7 +304,7 @@ Giống như việc tổ chức các bản vẽ trong văn phòng kiến trúc s
3. Nhập tên tệp bao gồm phần mở rộng phù hợp (`style.css`, `script.js`, `index.html`)
4. Nhấn Enter để tạo tệp
![Tạo tệp mới](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.vi.png)
![Tạo tệp mới](../../../../translated_images/create-new-file.2814e609c2af9aeb.vi.png)
**Quy ước đặt tên:**
- Sử dụng tên mô tả chỉ ra mục đích của tệp
@ -322,7 +322,7 @@ Giống như việc tổ chức các bản vẽ trong văn phòng kiến trúc s
2. Bắt đầu gõ và xem VSCode.dev hỗ trợ bạn với màu sắc, gợi ý và phát hiện lỗi
3. Lưu công việc của bạn bằng Ctrl+S (Windows/Linux) hoặc Cmd+S (Mac) mặc dù nó cũng tự động lưu!
![Chỉnh sửa tệp trong VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.vi.png)
![Chỉnh sửa tệp trong VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.vi.png)
**Những điều thú vị xảy ra khi bạn lập trình:**
- Mã của bạn được tô màu đẹp mắt để dễ đọc
@ -343,7 +343,7 @@ Giống như cách các nhà khảo cổ tạo hồ sơ chi tiết về các l
2. Các tệp đã chỉnh sửa xuất hiện trong phần "Changes"
3. Mã màu chỉ ra loại thay đổi: xanh lá cho bổ sung, đỏ cho xóa
![Xem các thay đổi trong Source Control](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.vi.png)
![Xem các thay đổi trong Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.vi.png)
**Lưu công việc của bạn (quy trình commit):**
@ -438,7 +438,7 @@ Marketplace của extensions được tổ chức rất tốt, vì vậy bạn s
2. Duyệt qua hoặc tìm kiếm một thứ gì đó cụ thể
3. Nhấp vào bất kỳ thứ gì trông thú vị để tìm hiểu thêm về nó
![Giao diện marketplace của extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.vi.png)
![Giao diện marketplace của extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5.vi.png)
**Những gì bạn sẽ thấy ở đó:**
@ -491,7 +491,7 @@ Hầu hết các extensions đi kèm với các cài đặt bạn có thể đi
3. Chọn "Extension Settings" từ menu thả xuống
4. Điều chỉnh mọi thứ cho đến khi cảm thấy phù hợp với quy trình làm việc của bạn
![Tùy chỉnh cài đặt extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.vi.png)
![Tùy chỉnh cài đặt extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78.vi.png)
**Những điều phổ biến bạn có thể muốn điều chỉnh:**
- Cách mã của bạn được định dạng (tab so với khoảng trắng, độ dài dòng, v.v.)

@ -78,7 +78,7 @@ Vì VSCode.dev yêu cầu ít nhất một tệp để mở kho lưu trữ, chú
4. **Viết** thông điệp commit: "Thêm cấu trúc HTML ban đầu"
5. **Nhấn** "Commit new file" để lưu thay đổi của bạn
![Tạo tệp ban đầu trên GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.vi.png)
![Tạo tệp ban đầu trên GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.vi.png)
**Những gì thiết lập ban đầu này đạt được:**
- **Thiết lập** cấu trúc tài liệu HTML5 đúng chuẩn với các phần tử ngữ nghĩa
@ -104,7 +104,7 @@ Bây giờ nền tảng kho lưu trữ của bạn đã được thiết lập,
**Chỉ báo thành công**: Bạn sẽ thấy các tệp dự án của mình trong thanh bên Explorer và `index.html` có sẵn để chỉnh sửa trong khu vực chỉnh sửa chính.
![Dự án được tải trong VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.vi.png)
![Dự án được tải trong VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.vi.png)
**Những gì bạn sẽ thấy trong giao diện:**
- **Thanh bên Explorer**: **Hiển thị** các tệp và cấu trúc thư mục của kho lưu trữ
@ -448,7 +448,7 @@ Các tiện ích mở rộng cải thiện trải nghiệm phát triển của b
**Kết quả ngay sau khi cài đặt:**
Khi CodeSwing được cài đặt, bạn sẽ thấy một bản xem trước trực tiếp của website sơ yếu lý lịch xuất hiện trong trình chỉnh sửa. Điều này cho phép bạn thấy chính xác cách website của bạn trông như thế nào khi thực hiện các thay đổi.
![Tiện ích CodeSwing hiển thị bản xem trước trực tiếp](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.vi.png)
![Tiện ích CodeSwing hiển thị bản xem trước trực tiếp](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.vi.png)
**Hiểu giao diện được cải tiến:**
- **Chế độ xem chia đôi**: **Hiển thị** mã của bạn ở một bên và bản xem trước trực tiếp ở bên kia

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
Dưới đây là hình ảnh dự án hoàn chỉnh của bạn:
![Giao diện ứng dụng chat hiển thị cuộc trò chuyện giữa người dùng và trợ lý AI](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.vi.png)
![Giao diện ứng dụng chat hiển thị cuộc trò chuyện giữa người dùng và trợ lý AI](../../../translated_images/screenshot.0a1ee0d123df681b.vi.png)
## 🗺️ Hành trình học tập của bạn qua phát triển ứng dụng AI
@ -194,7 +194,7 @@ mindmap
**Nguyên tắc cốt lõi**: Phát triển ứng dụng AI kết hợp các kỹ năng phát triển web truyền thống với tích hợp dịch vụ AI, tạo ra các ứng dụng thông minh mang lại cảm giác tự nhiên và phản hồi nhanh cho người dùng.
![Giao diện GitHub Models AI Playground với khu vực chọn mô hình và thử nghiệm](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.vi.png)
![Giao diện GitHub Models AI Playground với khu vực chọn mô hình và thử nghiệm](../../../translated_images/playground.d2b927122224ff8f.vi.png)
**Dưới đây là những gì làm cho playground trở nên hữu ích:**
- **Thử nghiệm** các mô hình AI khác nhau như GPT-4o-mini, Claude và các mô hình khác (tất cả đều miễn phí!)
@ -204,7 +204,7 @@ mindmap
Sau khi bạn đã thử nghiệm một chút, chỉ cần nhấp vào tab "Code" và chọn ngôn ngữ lập trình của bạn để nhận mã triển khai mà bạn cần.
![Lựa chọn playground hiển thị các tùy chọn tạo mã cho các ngôn ngữ lập trình khác nhau](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.vi.png)
![Lựa chọn playground hiển thị các tùy chọn tạo mã cho các ngôn ngữ lập trình khác nhau](../../../translated_images/playground-choice.1d23ba7d407f4758.vi.png)
## Thiết lập tích hợp backend Python
@ -2352,14 +2352,14 @@ Bạn muốn thử dự án này trong môi trường phát triển trên đám
- **Đi tới** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Nhấn** "Use this template" ở góc trên bên phải (đảm bảo bạn đã đăng nhập vào GitHub)
![Giao diện tạo từ mẫu hiển thị nút "Use this template" màu xanh lá cây](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.vi.png)
![Giao diện tạo từ mẫu hiển thị nút "Use this template" màu xanh lá cây](../../../translated_images/template.67ad477109d29a2b.vi.png)
**Bước 2: Khởi chạy Codespaces**
- **Mở** repository vừa tạo của bạn
- **Nhấn** nút "Code" màu xanh lá cây và chọn "Codespaces"
- **Chọn** "Create codespace on main" để bắt đầu môi trường phát triển của bạn
![Giao diện tạo codespace với các tùy chọn khởi chạy môi trường phát triển trên đám mây](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.vi.png)
![Giao diện tạo codespace với các tùy chọn khởi chạy môi trường phát triển trên đám mây](../../../translated_images/codespace.bcecbdf5d2747d3d.vi.png)
**Bước 3: Cấu hình môi trường**
Khi Codespace của bạn tải xong, bạn sẽ có quyền truy cập vào:

@ -1,265 +1,276 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:23:05+00:00",
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-07T01:08:08+00:00",
"source_file": "README.md",
"language_code": "vi"
}
-->
[![Giấy phép GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![Người đóng góp GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Vấn đề GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![Yêu cầu kéo GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![Chào mừng PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Người theo dõi 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/)
[![Fork 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/)
[![Sao 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/)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Phát triển Web cho Người mới bắt đầu - Chương trình học
# Phát triển Web cho Người mới bắt đầu - Một chương trình học
Học những điều cơ bản về phát triển web với khóa học toàn diện 12 tuần do Microsoft Cloud Advocates thiết kế. Mỗi trong số 24 bài học đào sâu về JavaScript, CSS, và HTML thông qua các dự án thực hành như terrariums, tiện ích mở rộng trình duyệt, và trò chơi không gian. Tham gia với các bài kiểm tra, thảo luận, và bài tập thực tế. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức với phương pháp dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Học các kiến thức cơ bản về phát triển web với khóa học 12 tuần toàn diện của Microsoft Cloud Advocates. Mỗi bài học trong 24 bài sẽ đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như làm terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia các bài kiểm tra, thảo luận và bài tập thực hành. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức của bạn với phương pháp học dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Tham gia Cộng đồng Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Tham gia cộng đồng Azure AI Foundry Discord
Làm theo các bước sau để bắt đầu sử dụng các tài nguyên này:
1. **Fork Kho lưu trữ**: Nhấp vào [![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. **Clone Kho lưu trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tham gia Discord Azure AI Foundry và gặp gỡ các chuyên gia cũng như các nhà phát triển khác**](https://discord.com/invite/ByRwuEEgH4)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
### 🌐 Hỗ trợ Đa ngôn ngữ
Thực hiện các bước sau để bắt đầu sử dụng tài nguyên này:
1. **Fork kho lưu trữ**: Nhấp vào [![Fork 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. **Clone kho lưu trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia và nhà phát triển khác**](https://discord.com/invite/ByRwuEEgH4)
#### Hỗ trợ qua GitHub Action (Tự động & Luôn được cập nhật)
### 🌐 Hỗ trợ đa ngôn ngữ
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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](./README.md)
#### Được hỗ trợ qua GitHub Action (Tự động & Luôn cập nhật)
> **Ưu tiên Clone về máy tính?**
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Tiếng Ả Rập](../ar/README.md) | [Tiếng Bengal](../bn/README.md) | [Tiếng Bulgaria](../bg/README.md) | [Tiếng Miến Điện (Myanmar)](../my/README.md) | [Tiếng Trung (Giản thể)](../zh/README.md) | [Tiếng Trung (Phồn thể, Hồng Kông)](../hk/README.md) | [Tiếng Trung (Phồn thể, Macau)](../mo/README.md) | [Tiếng Trung (Phồn thể, Đài Loan)](../tw/README.md) | [Tiếng Croatia](../hr/README.md) | [Tiếng Séc](../cs/README.md) | [Tiếng Đan Mạch](../da/README.md) | [Tiếng Hà Lan](../nl/README.md) | [Tiếng Estonia](../et/README.md) | [Tiếng Phần Lan](../fi/README.md) | [Tiếng Pháp](../fr/README.md) | [Tiếng Đức](../de/README.md) | [Tiếng Hy Lạp](../el/README.md) | [Tiếng Do Thái](../he/README.md) | [Tiếng Hindi](../hi/README.md) | [Tiếng Hungary](../hu/README.md) | [Tiếng Indonesia](../id/README.md) | [Tiếng Ý](../it/README.md) | [Tiếng Nhật](../ja/README.md) | [Tiếng Hàn](../ko/README.md) | [Tiếng Litva](../lt/README.md) | [Tiếng Mã Lai](../ms/README.md) | [Tiếng Marathi](../mr/README.md) | [Tiếng Nepal](../ne/README.md) | [Tiếng Na Uy](../no/README.md) | [Tiếng Ba Tư (Farsi)](../fa/README.md) | [Tiếng Ba Lan](../pl/README.md) | [Tiếng Bồ Đào Nha (Brazil)](../br/README.md) | [Tiếng Bồ Đào Nha (Bồ Đào Nha)](../pt/README.md) | [Tiếng Punjab (Gurmukhi)](../pa/README.md) | [Tiếng Romania](../ro/README.md) | [Tiếng Nga](../ru/README.md) | [Tiếng Serbia (Cyrillic)](../sr/README.md) | [Tiếng Slovak](../sk/README.md) | [Tiếng Slovenia](../sl/README.md) | [Tiếng Tây Ban Nha](../es/README.md) | [Tiếng Swahili](../sw/README.md) | [Tiếng Thụy Điển](../sv/README.md) | [Tiếng Tagalog (Philippines)](../tl/README.md) | [Tiếng Tamil](../ta/README.md) | [Tiếng Thái](../th/README.md) | [Tiếng Thổ Nhĩ Kỳ](../tr/README.md) | [Tiếng Ukraina](../uk/README.md) | [Tiếng Urdu](../ur/README.md) | [Tiếng Việt](./README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ làm tăng đáng kể kích thước tải xuống. Để clone mà không có bản dịch, hãy sử dụng sparse checkout:
> ```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'
> ```
> Điều này cung cấp cho bạn tất cả những gì bạn cần để hoàn thành khóa học với tốc độ tải xuống nhanh hơn nhiều.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Nếu bạn muốn có thêm các ngôn ngữ dịch, danh sách các ngôn ngữ được hỗ trợ có [tại đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Nếu bạn muốn có thêm các ngôn ngữ dịch hỗ trợ được liệt kê [ đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Mở trong 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)
[![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)
#### 🧑‍🎓 _Bạn là học sinh/sinh viên?_
#### 🧑‍🎓 _Bạn là sinh viên?_
Truy cập [**Trang Hub dành cho Học sinh**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, các gói dành cho học sinh và thậm chí là cách nhận voucher chứng chỉ miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên vì nội dung sẽ được thay đổi hàng tháng.
Truy cập [**Trang Trung tâm Sinh viên**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, bộ dụng cụ dành cho sinh viên và thậm chí cả cách nhận phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên vì chúng tôi thay đổi nội dung hàng tháng.
### 📣 Thông báo - Thử thách chế độ Agent của GitHub Copilot mới để hoàn thành!
### 📣 Thông báo - Thử thách mới về Chế độ GitHub Copilot Agent để hoàn thành!
Thử thách mới đã được thêm, tìm "Thử thách GitHub Copilot Agent 🚀" trong hầu hết các chương. Đây là một thử thách mới để bạn hoàn thành bằng cách sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa từng sử dụng chế độ Agent trước đây, nó không chỉ có khả năng tạo văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và nhiều hơn nữa.
Thử thách mới đã được thêm, tìm "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đây là thử thách mới dành cho bạn hoàn thành bằng cách sử dụng GitHub Copilot và Chế độ Agent. Nếu bạn chưa từng dùng Chế độ Agent trước đây, nó không chỉ tạo ra văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và nhiều hơn thế.
### 📣 Thông báo - _Dự án mới để xây dựng bằng AI Tạo sinh_
### 📣 Thông báo - _Dự án mới xây dựng sử dụng AI Tạo sinh_
Dự án Trợ lý AI mới vừa được thêm, hãy xem [dự án](./09-chat-project/README.md)
Dự án Trợ lý AI mới vừa được thêm, xem ngay [dự án](./9-chat-project/README.md)
### 📣 Thông báo - _Chương trình học mới_ về AI Tạo sinh cho JavaScript vừa được phát hành
### 📣 Thông báo - _Chương trình học mới_ về Generative AI cho JavaScript vừa được phát hành
Đừng bỏ lỡ chương trình học AI Tạo sinh mới của chúng tôi!
Đừng bỏ lỡ chương trình học Generative AI mới của chúng tôi!
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
![Nền](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.vi.png)
![Background](../../translated_images/background.148a8d43afde5730.vi.png)
- Các bài học bao gồm mọi thứ từ cơ bản đến RAG.
- Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi.
- Câu chuyện thú vị và hấp dẫn, bạn sẽ được du hành thời gian!
- Các bài học bao phủ từ cơ bản đến RAG.
- Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi.
- Câu chuyện thú vị và hấp dẫn, bạn sẽ du hành thời gian!
![nhân vật](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.vi.png)
![character](../../translated_images/character.5c0dd8e067ffd693.vi.png)
Mỗi bài học bao gồm một bài tập để hoàn thành, một bài kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Tạo prompt và kỹ thuật tạo prompt
- Ứng dụng tạo văn bản và hình ảnh
- Ứng dụng tìm kiếm
Mỗi bài học bao gồm một bài tập hoàn thành, kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Lời nhắc và kỹ thuật tạo lời nhắc
- Tạo ứng dụng văn bản và hình ảnh
- Ứng dụng tìm kiếm
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
Truy cập [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) để bắt đầu!
## 🌱 Bắt đầu
> **Giáo viên**, chúng tôi đã [bao gồm một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được phản hồi của bạn [trong diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với mỗi bài học, hãy bắt đầu bằng bài kiểm tra trước bài giảng và tiếp tục đọc tài liệu bài giảng, hoàn thành các hoạt động khác nhau và kiểm tra hiểu biết của bạn với bài kiểm tra sau bài giảng.
## 🌱 Bắt đầu
Để nâng cao trải nghiệm học tập của bạn, hãy kết nối với bạn bè để cùng làm các dự án! Khuyến khích thảo luận trong [diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi đội ngũ quản trị viên của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn.
> **Giáo viên**, chúng tôi đã [đưa ra một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được phản hồi của bạn [trong diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Để mở rộng kiến thức của bạn, chúng tôi khuyến khích bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để tìm thêm tài liệu học tập.
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với mỗi bài học, bắt đầu với bài kiểm tra trước bài giảng và tiếp tục đọc tài liệu bài giảng, hoàn thành các hoạt động đa dạng và kiểm tra hiểu biết của bạn bằng bài kiểm tra sau bài giảng.
### 📋 Thiết lập môi trường của bạn
Để nâng cao trải nghiệm học tập, hãy kết nối với bạn bè để cùng làm các dự án! Thảo luận được khuyến khích trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi đội ngũ điều hành của chúng tôi sẽ hỗ trợ trả lời câu hỏi của bạn.
Chương trình học này đã có sẵn môi trường phát triển! Khi bạn bắt đầu, bạn có thể chọn chạy chương trình học trong một [Codespace](https://github.com/features/codespaces/) (_một môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc trên máy tính của bạn bằng cách sử dụng trình soạn thảo văn bản như [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Để mở rộng kiến thức, chúng tôi khuyên bạn nên khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để có thêm tài liệu học tập.
#### Tạo kho lưu trữ của bạn
Để dễ dàng lưu công việc của bạn, chúng tôi khuyến nghị bạn tạo một bản sao của kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấp vào nút **Use this template** ở đầu trang. Điều này sẽ tạo một kho lưu trữ mới trong tài khoản GitHub của bạn với một bản sao của chương trình học.
### 📋 Thiết lập môi trường
Thực hiện các bước sau:
1. **Fork kho lưu trữ**: Nhấp vào nút "Fork" ở góc trên bên phải của trang này.
2. **Clone kho lưu trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Chương trình học này đã có sẵn môi trường phát triển! Khi bắt đầu, bạn có thể chọn chạy chương trình trong [Codespace](https://github.com/features/codespaces/) (_một môi trường trên trình duyệt không cần cài đặt_), hoặc chạy cục bộ trên máy tính sử dụng trình soạn thảo văn bản như [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Chạy chương trình học trong Codespace
#### Tạo kho lưu trữ của bạn
Để dễ dàng lưu trữ công việc của bạn, bạn nên tạo bản sao riêng của kho lưu trữ này. Bạn có thể làm điều đó bằng cách nhấp vào nút **Use this template** ở đầu trang. Điều này sẽ tạo một kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao chương trình học.
Trong bản sao kho lưu trữ mà bạn đã tạo, nhấp vào nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc.
Thực hiện theo các bước:
1. **Fork Kho lưu trữ**: Nhấp vào nút "Fork" ở góc trên bên phải của trang này.
2. **Clone Kho lưu trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.vi.png)
#### Chạy chương trình trong Codespace
#### Chạy chương trình học trên máy tính của bạn
Trong bản sao kho lưu trữ bạn đã tạo, nhấp nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo Codespace mới để bạn làm việc.
Để chạy chương trình học này trên máy tính của bạn, bạn sẽ cần một trình soạn thảo văn bản, một trình duyệt và một công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, [Giới thiệu về Ngôn ngữ Lập trình và Công cụ](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn khác nhau cho từng công cụ này để bạn chọn những gì phù hợp nhất với bạn.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.vi.png)
Chúng tôi khuyến nghị sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, nó cũng có một [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp sẵn. Bạn có thể tải xuống Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Chạy chương trình trên máy tính của bạn
1. Clone kho lưu trữ của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấp vào nút **Code** và sao chép URL:
Để chạy chương trình này trên máy tính, bạn cần trình soạn thảo văn bản, trình duyệt và công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, [Giới thiệu về Ngôn ngữ Lập trình và Công cụ](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn các lựa chọn cho từng công cụ để bạn chọn phù hợp nhất.
[CodeSpace](./images/createcodespace.png)
Chúng tôi khuyên bạn dùng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, trình soạn thảo này cũng có [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp sẵn. Bạn có thể tải Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay `<your-repository-url>` bằng URL bạn vừa sao chép:
1. Clone kho lưu trữ về máy tính. Bạn có thể làm điều này bằng cách nhấp nút **Code** và sao chép URL:
[CodeSpace](./images/createcodespace.png)
Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay thế `<your-repository-url>` bằng URL bạn vừa sao chép:
```bash
git clone <your-repository-url>
```
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào **File** > **Open Folder** và chọn thư mục bạn vừa clone.
> Các tiện ích mở rộng Visual Studio Code được khuyến nghị:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào **File** > **Open Folder** và chọn thư mục bạn vừa sao chép.
> Các tiện ích mở rộng Visual Studio Code được khuyến nghị:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn
## 📂 Mỗi bài học bao gồm:
- sketchnote tùy chọn
- video bổ sung tùy chọn
- bài kiểm tra khởi động trước bài học
- có thể có sketchnote tùy chọn
- có thể có video bổ sung tùy chọn
- bài kiểm tra làm nóng trước bài học
- bài học viết
- đối với các bài học dựa trên dự án, hướng dẫn từng bước để xây dựng dự án
- kiểm tra kiến thức
- đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án
- các bài kiểm tra kiến thức
- một thử thách
- tài liệu đọc bổ sung
- bài tập
- [bài kiểm tra sau bài học](https://ff-quizzes.netlify.app/web/)
- bài kiểm tra sau bài học [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **Lưu ý về bài kiểm tra**: Tất cả các bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra, mỗi bài gồm ba câu hỏi. Chúng có sẵn [tại đây](https://ff-quizzes.netlify.app/web/) và ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai lên Azure; làm theo hướng dẫn trong thư mục `quiz-app`.
> **Lưu ý về các bài kiểm tra**: Tất cả các bài kiểm tra đều nằm trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra với mỗi bài 3 câu hỏi. Chúng có sẵn [tại đây](https://ff-quizzes.netlify.app/web/); ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai lên Azure; làm theo hướng dẫn trong thư mục `quiz-app`.
## 🗃️ Các bài học
| | Tên Dự Án | Các Khái Niệm Được Dạy | Mục Tiêu Học Tập | Liên Kết Bài Học | Tác Giả |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ hỗ trợ | Tìm hiểu các nguyên lý cơ bản đằng sau hầu hết các ngôn ngữ lập trình và phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Giới thiệu về Ngôn ngữ Lập trình và Công cụ hỗ trợ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng truy cập | Tìm hiểu các nguyên tắc cơ bản về khả năng truy cập web | [Nguyên tắc cơ bản về Khả năng truy cập](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Cơ bản JS | Kiểu dữ liệu trong JavaScript | Các nguyên tắc cơ bản về kiểu dữ liệu trong JavaScript | [Kiểu Dữ Liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Cơ bản JS | Hàm và Phương thức | Tìm hiểu về hàm và phương thức để quản lý luồng logic của ứng dụng | [Hàm và Phương thức](./2-js-basics/2-functions-methods/README.md) | Jasmine và Christopher |
| 06 | Cơ bản JS | Ra quyết định với JS | Tìm hiểu cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định | [Ra Quyết Định](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Cơ bản JS | Mảng và Vòng lặp | Làm việc với dữ liệu bằng mảng và vòng lặp trong JavaScript | [Mảng và Vòng lặp](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực tế | Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào việc xây dựng bố cục | [Giới thiệu về HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực tế | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các nguyên tắc cơ bản của CSS bao gồm làm cho trang web đáp ứng | [Giới thiệu về CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Đóng gói JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho terrarium hoạt động như một giao diện kéo/thả, tập trung vào đóng gói và thao tác DOM | [Đóng gói JavaScript, thao tác DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Trò chơi gõ phím](./4-typing-game/solution/README.md) | Xây dựng Trò chơi gõ phím | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript của bạn | [Lập trình dựa trên sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Tiện ích mở rộng trình duyệt xanh](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách trình duyệt hoạt động, lịch sử của chúng và cách tạo các yếu tố đầu tiên của tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Tiện ích mở rộng trình duyệt xanh](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu trữ biến trong bộ nhớ cục bộ | Xây dựng các yếu tố JavaScript của tiện ích mở rộng trình duyệt của bạn để gọi API bằng các biến được lưu trữ trong bộ nhớ cục bộ | [API, Biểu mẫu và Bộ nhớ cục bộ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Tiện ích mở rộng trình duyệt xanh](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các quá trình nền của trình duyệt để quản lý biểu tượng của tiện ích mở rộng; tìm hiểu về hiệu suất web và một số tối ưu hóa để cải thiện | [Nhiệm vụ nền và Hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao hơn với JavaScript | Tìm hiểu về Kế thừa bằng cách sử dụng cả Lớp và Thành phần và mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Giới thiệu về Phát triển Trò chơi Nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Trò chơi không gian](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các yếu tố lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Trò chơi không gian](./6-space-game/solution/README.md) | Di chuyển các yếu tố trên màn hình | Khám phá cách các yếu tố có thể chuyển động bằng cách sử dụng tọa độ cartesian và API Canvas | [Di chuyển các yếu tố](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các yếu tố va chạm và phản ứng với nhau bằng cách sử dụng các phím nhấn và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi | [Phát hiện Va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Trò chơi không gian](./6-space-game/solution/README.md) | Ghi điểm | Thực hiện các phép tính toán học dựa trên trạng thái và hiệu suất của trò chơi | [Ghi điểm](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Trò chơi không gian](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về việc kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [Điều kiện Kết thúc](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong Ứng dụng Web | Tìm hiểu cách tạo khung kiến trúc của một trang web nhiều trang bằng cách sử dụng định tuyến và mẫu HTML | [Mẫu HTML và Định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu về việc xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Phương pháp Lấy và Sử dụng Dữ liệu | Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Khái niệm về Quản lý Trạng thái | Tìm hiểu cách ứng dụng của bạn duy trì trạng thái và cách quản lý nó bằng lập trình | [Quản lý Trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Trình duyệt/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Sử dụng Trình soạn thảo Mã VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Trợ lý AI](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án Trợ lý AI](./9-chat-project/README.md) | Chris |
| | Tên Dự Án | Khái Niệm Được Dạy | Mục Tiêu Học Tập | Bài Học Liên Kết | Tác Giả |
| :-: | :----------------------------------------------------: | :----------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: |
| 01 | Getting Started | Giới thiệu về Lập trình và Công cụ làm việc | Tìm hiểu nền tảng cơ bản đằng sau hầu hết các ngôn ngữ lập trình và về phần mềm hỗ trợ các nhà phát triển chuyên nghiệp | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Kiến thức cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách hợp tác với người khác trên mã code | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Khả năng truy cập | Tìm hiểu các kiến thức cơ bản về truy cập web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Các loại dữ liệu trong JavaScript | Các kiến thức cơ bản về các loại dữ liệu trong JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Hàm và Phương thức | Tìm hiểu về hàm và phương thức để quản lý luồng logic ứng dụng | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine và Christopher |
| 06 | JS Basics | Ra quyết định với JavaScript | Tìm hiểu cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Mảng và Vòng lặp | Làm việc với dữ liệu bằng cách sử dụng mảng và vòng lặp trong JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong Thực hành | Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào xây dựng bố cục | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong Thực hành | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào kiến thức cơ bản CSS bao gồm làm trang web phản hồi | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, thao tác DOM | Xây dựng JavaScript để làm cho terrarium hoạt động như giao diện kéo và thả, tập trung vào closures và thao tác DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi đánh máy | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển luồng logic cho ứng dụng JavaScript của bạn | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với Trình duyệt | Tìm hiểu về cách trình duyệt hoạt động, lịch sử của nó và cách dựng khung đầu tiên cho tiện ích mở rộng trình duyệt | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu biến trong bộ nhớ cục bộ | Xây dựng các thành phần JavaScript của tiện ích trình duyệt để gọi API sử dụng biến lưu trữ trong bộ nhớ cục bộ | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Các tiến trình nền của trình duyệt, hiệu suất web | Sử dụng các tiến trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu suất web và một số tối ưu để cải thiện | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao hơn với JavaScript | Tìm hiểu về Kế thừa sử dụng cả Lớp và Thành phần cũng như mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về Canvas API, sử dụng để vẽ các phần tử lên màn hình | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các phần tử trên màn hình | Khám phá cách các phần tử có thể di chuyển sử dụng tọa độ Decart và Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng lẫn nhau sử dụng phím bấm và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Gi điểm số | Thực hiện các phép tính toán dựa trên trạng thái và hiệu suất của trò chơi | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại các giá trị biến | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong Web App | Tìm hiểu cách tạo khung kiến trúc website nhiều trang bằng kỹ thuật định tuyến và mẫu HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng mẫu đăng nhập và đăng ký | Tìm hiểu cách xây dựng biểu mẫu và xử lý các quy trình xác thực | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Các phương thức lấy và sử dụng dữ liệu | Cách dữ liệu chảy vào và ra khỏi ứng dụng của bạn, cách lấy dữ liệu, lưu trữ và loại bỏ | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Các khái niệm quản lý trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Phương pháp giảng dạy
Chương trình học của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính:
* học tập dựa trên dự án
* bài kiểm tra thường xuyên
Chương trình học của chúng tôi được thiết kế dựa trên hai nguyên tắc sư phạm chủ chốt:
* học dựa trên dự án
* các bài kiểm tra thường xuyên
Chương trình giảng dạy các nguyên tắc cơ bản của JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội phát triển kinh nghiệm thực tế bằng cách xây dựng một trò chơi gõ phím, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu không gian và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ có được sự hiểu biết vững chắc về phát triển web.
Chương trình giảng dạy dạy các kiến thức cơ bản của JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học sinh sẽ có cơ hội phát triển kinh nghiệm thực hành bằng cách xây dựng trò chơi đánh máy, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu xâm lược không gian và ứng dụng ngân hàng cho doanh nghiệp. Cuối chuỗi bài học, học viên sẽ nắm chắc kiến thức cơ bản về phát triển web.
> 🎓 Bạn có thể tham gia một số bài học đầu tiên trong chương trình này dưới dạng [Lộ trình học](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
> 🎓 Bạn có thể theo học vài bài học đầu tiên trong chương trình này dưới dạng [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
Bằng cách đảm bảo rằng nội dung phù hợp với các dự án, quá trình học tập trở nên thú vị hơn cho học viên và việc ghi nhớ các khái niệm sẽ được tăng cường. Chúng tôi cũng đã viết một số bài học khởi đầu về các nguyên tắc cơ bản của JavaScript để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "[Dành cho người mới bắt đầu: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", một số tác giả của bộ sưu tập này đã đóng góp vào chương trình học này.
Bằng cách đảm bảo nội dung phù hợp với dự án, quá trình học trở nên hấp dẫn hơn cho học sinh và khả năng ghi nhớ các khái niệm sẽ được tăng cường. Chúng tôi cũng đã viết một số bài học khởi đầu về cơ bản JavaScript để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", một số tác giả của video này đã góp sức vào chương trình học này.
Ngoài ra, một bài kiểm tra không áp lực trước lớp sẽ định hướng ý định của học viên đối với việc học một chủ đề, trong khi một bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ thêm. Chương trình học này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu từ nhỏ và trở nên phức tạp hơn vào cuối chu kỳ 12 tuần.
Ngoài ra, một bài kiểm tra nhẹ trước lớp giúp học sinh có định hướng học tập chủ động về chủ đề, trong khi một bài kiểm tra thứ hai sau lớp giúp đảm bảo sự ghi nhớ lâu dài. Chương trình này được thiết kế linh hoạt và vui vẻ, bạn có thể học toàn bộ hoặc học từng phần. Các dự án bắt đầu nhỏ và trở nên phức tạp hơn dần vào cuối chu kỳ 12 tuần.
Mặc dù chúng tôi cố ý tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết như một nhà phát triển web trước khi áp dụng một framework, một bước tiếp theo tốt sau khi hoàn thành chương trình học này sẽ là tìm hiểu về Node.js thông qua một bộ sưu tập video khác: "[Dành cho người mới bắt đầu: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Hãy ghé thăm [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và [Hướng dẫn đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi hoan nghênh phản hồi mang tính xây dựng của bạn!
Mặc dù chúng tôi cố tình tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết cho một nhà phát triển web trước khi áp dụng framework, bước tiếp theo tốt để hoàn thành chương trình học này là tìm hiểu về Node.js thông qua bộ sưu tập video khác: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Hãy tham khảo hướng dẫn [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và [Đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi rất hoan nghênh phản hồi xây dựng của bạn!
## 🧭 Truy cập ngoại tuyến
Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Fork repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy của bạn, và sau đó trong thư mục gốc của repo này, gõ `docsify serve`. Trang web sẽ được phục vụ trên cổng 3000 trên localhost của bạn: `localhost:3000`.
Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Fork kho lưu trữ này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy tính của bạn, sau đó trong thư mục gốc của kho này, gõ `docsify serve`. Trang web sẽ được phục vụ trên cổng 3000 tại localhost của bạn: `localhost:3000`.
## 📘 PDF
Một tệp PDF của tất cả các bài học có thể được tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Bản PDF của tất cả các bài học có thể được tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Các khóa học khác
Nhóm của chúng tôi còn sản xuất các khóa học khác! Hãy xem qua:
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j cho người mới bắt đầu](https://img.shields.io/badge/LangChain4j%20cho%20người%20mới%20bắt%20đầu-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js cho người mới bắt đầu](https://img.shields.io/badge/LangChain.js%20cho%20người%20mới%20bắt%20đầu-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-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)
---
### Azure / Edge / MCP / Agents
[![AZD cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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)
---
### Chuỗi AI Tạo Sinh
[![AI Tạo Sinh cho Người Mới Bắt Đầu](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)
[![AI Tạo Sinh (.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)
[![AI Tạo Sinh (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)
[![AI Tạo Sinh (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)
---
### Học Tập Cốt Lõi
[![ML cho Người Mới Bắt Đầu](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)
[![Khoa Học Dữ Liệu cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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)
[![An Ninh Mạng cho Người Mới Bắt Đầu](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)
[![Phát Triển Web cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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)
[![Phát Triển XR cho Người Mới Bắt Đầu](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)
---
### Chuỗi Copilot
[![Copilot cho Lập Trình Cặp AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot cho 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)
[![Cuộc Phiêu Lưu với Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[![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)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Nhận Hỗ Trợ
## Nhận trợ giúp
Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng ứng dụng AI, hãy tham gia cùng các học viên và nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ, nơi mọi câu hỏi đều được chào đón và kiến thức được chia sẻ tự do.
Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng ứng dụng AI, hãy tham gia cùng những người học khác và các nhà phát triển giàu kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ, nơi các câu hỏi được chào đón và kiến thức được chia sẻ tự do.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Nếu bạn có phản hồi về sản phẩm hoặc gặp lỗi trong quá trình xây dựng, hãy truy cập:
Nếu bạn có phản hồi về sản phẩm hoặc lỗi trong quá trình xây dựng, hãy truy cập:
[![Diễn Đàn Nhà Phát Triển Microsoft Foundry](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)
## Giấy Phép
## Giấy phép
Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp [LICENSE](../../LICENSE) để biết thêm thông tin.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp của con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
**Tuyên bố từ chối trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc sai sót. Tài liệu gốc bằng ngôn ngữ nguyên bản nên được xem là nguồn thông tin chính xác nhất. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi người dịch. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu nhầm hay giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -42,10 +42,10 @@ Giáo trình này bao gồm các gói có thể nhập vào để phù hợp v
- Moodle Cloud có hỗ trợ hạn chế đối với Common Cartridge. Ưu tiên sử dụng tệp Moodle ở trên, tệp này cũng có thể được tải lên Canvas.
- Sau khi nhập, hãy xem lại các mô-đun, ngày đến hạn và cài đặt bài kiểm tra để phù hợp với lịch học của bạn.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.vi.png)
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.vi.png)
> Giáo trình trong lớp học Moodle
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.vi.png)
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.vi.png)
> Giáo trình trong Canvas
### Sử dụng kho lưu trữ trực tiếp (không dùng Classroom)

Loading…
Cancel
Save