|
After Width: | Height: | Size: 250 KiB |
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 276 KiB |
|
After Width: | Height: | Size: 286 KiB |
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 253 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 292 KiB |
|
After Width: | Height: | Size: 287 KiB |
|
After Width: | Height: | Size: 286 KiB |
|
After Width: | Height: | Size: 700 KiB |
|
After Width: | Height: | Size: 750 KiB |
@ -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.
|
||||
|
||||

|
||||
|
||||
# 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 👇
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
[](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 -->
|
||||
@ -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"
|
||||
}
|
||||
-->
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://discord.gg/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
|
||||
|
||||
[](https://discord.gg/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 [](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 [](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?**
|
||||
|
||||
[](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.
|
||||
[](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
|
||||
|
||||

|
||||
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!
|
||||
|
||||

|
||||

|
||||
|
||||
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!
|
||||

|
||||
|
||||
## 🌱 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
|
||||
|
||||

|
||||
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)
|
||||

|
||||
|
||||
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
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
|
||||
### LangChain
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
|
||||
---
|
||||
|
||||
### Generative AI Series
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-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
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
### Pangunahing Pag-aaral
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Generative AI Series
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-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
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
### Copilot Series
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
---
|
||||
|
||||
### Copilot Series
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](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.
|
||||
|
||||
[](https://discord.gg/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:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
[](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 -->
|
||||
@ -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.
|
||||
|
||||

|
||||
|
||||
# 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 👇
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
[](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 -->
|
||||
@ -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"
|
||||
}
|
||||
-->
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://discord.gg/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
|
||||
|
||||
[](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 [](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)
|
||||
|
||||
[](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 [](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)**
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
[](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!
|
||||
|
||||

|
||||

|
||||
|
||||
- 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!
|
||||
|
||||

|
||||

|
||||
|
||||
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`
|
||||
|
||||

|
||||
#### 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.
|
||||

|
||||
|
||||
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
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
[](https://aka.ms/langchain4j-for-beginners)
|
||||
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
|
||||
|
||||
---
|
||||
|
||||
### Azure / Edge / MCP / Agents
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Chuỗi AI Tạo Sinh
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
|
||||
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
|
||||
[-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
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
|
||||
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Chuỗi Copilot
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
|
||||
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
|
||||
[](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.
|
||||
|
||||
[](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:
|
||||
|
||||
[](https://aka.ms/foundry/forum)
|
||||
[](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 -->
|
||||