Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulumnya adalah kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisasi dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Obrolan AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan setiap kuis (penilaian sebelum dan sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk 50+ bahasa melalui GitHub Actions
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: Generative AI, Data Science, ML, IoT tersedia
- Kursus tambahan: Generative AI, Data Science, ML, kurikulum IoT tersedia
### Bekerja dengan Proyek Spesifik
Untuk instruksi detail proyek individual, lihat file README di:
Untuk instruksi rinci proyek individual, lihat README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan permainan canvas
- `9-chat-project/README.md` - proyek asisten obrolan AI
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
### Struktur Monorepo
Walaupun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran berdiri sendiri
Meski bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran bersifat mandiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Kerjakan proyek individual tanpa memengaruhi proyek lain
- Clone seluruh repo untuk pengalaman kurikulum lengkap
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi yang penting, disarankan untuk menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini.
Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini adalah kursus lengkap selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran amali yang merangkumi JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini merupakan kursus menyeluruh selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktikal yang merangkumi JavaScript, CSS, dan HTML.
### Komponen Utama
- **Kandungan Pendidikan**: 24 pelajaran berstruktur yang disusun dalam modul berasaskan projek
- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Pelayar, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Sembang AI
- **Kuis Interaktif**: 48 kuis dengan 3 soalan setiap satu (penilaian pra/pasca pelajaran)
- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50+ bahasa melalui GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) disyorkan untuk pelajar
- Kursus tambahan: AI Generatif, Sains Data, ML, kurikulum IoT tersedia
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Pelajar Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) disyorkan untuk pelajar
- Kursus tambahan: AI Generatif, Sains Data, ML, kurikulum IoT tersedia
### Bekerja dengan Projek Tertentu
Untuk arahan terperinci mengenai projek individu, rujuk fail README dalam:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - pembangunan sambungan pelayar
- `6-space-game/README.md` - pembangunan permainan berasaskan canvas
- `9-chat-project/README.md` - projek pembantu sembang AI
Untuk arahan terperinci projek individu, rujuk fail README di:
- `quiz-app/README.md` - aplikasi kuiz Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - pembangunan sambungan pelayar
- `6-space-game/README.md` - pembangunan permainan berasaskan canvas
- `9-chat-project/README.md` - projek pembantu chat AI
### Struktur Monorepo
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek bebas:
- Setiap pelajaran adalah berdikari
- Projek tidak berkongsi kebergantungan
- Bekerja pada projek individu tanpa menjejaskan projek lain
- Klon keseluruhan repo untuk pengalaman kurikulum penuh
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek bebas:
- Setiap pelajaran berdiri sendiri
- Projek tidak berkongsi kebergantungan
- Kerja pada projek individu tanpa menjejaskan yang lain
- Clone keseluruhan repositori untuk pengalaman kurikulum penuh
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila diberi perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidakakuratan. Dokumen asal dalam bahasa asalnya hendaklah dianggap sebagai sumber yang sahih. Untuk maklumat kritikal, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab terhadap sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab terhadap sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Ito ay isang edukasyonal na repositoryo ng kurikulum para sa pagtuturo ng mga pundasyon ng web development sa mga nagsisimula. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na may 24 na hands-on na aralin na sumasaklaw sa JavaScript, CSS, at HTML.
Ito ay isang edukasyonal na repositoryo ng kurikulum para sa pagtuturo ng mga pangunahing kaalaman sa web development sa mga nagsisimula. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na nagtatampok ng 24 na hands-on na aralin na sumasaklaw sa JavaScript, CSS, at HTML.
### Key Components
- **Nilalamang Pang-edukasyon**: 24 na istrukturadong aralin na inayos sa mga module batay sa proyekto
- **Mga Praktikal na Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Mga Interactive na Quiz**: 48 na quiz na may tig-3 tanong bawat isa (pre/post-lesson assessments)
- **Suporta sa Maramihang Wika**: Awtomatikong pagsasalin para sa 50+ na wika gamit ang GitHub Actions
- **Nilalaman Pang-edukasyon**: 24 na istrukturadong aralin na inayos sa mga proyekto bilang mga modulo
- **Praktikal na Mga Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Interaktibong Mga Quiz**: 48 na quiz na may tig-3 tanong bawat isa (pagsusulit bago/pagkatapos ng aralin)
- **Suporta sa Maraming Wika**: Awtomatikong pagsasalin para sa 50+ na wika gamit ang GitHub Actions
- **Mga Teknolohiya**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa mga AI na proyekto)
### Architecture
- Edukasyonal na repositoryo na may lesson-based na estruktura
- Bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon
- Mga standalone na proyekto sa hiwalay na mga direktoryo (quiz-app, iba't ibang proyekto ng aralin)
- Edukasyonal na repositoryo na may istruktura batay sa mga aralin
- Ang bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon
- Mga standalone na proyekto sa hiwalay na mga direktoryo (quiz-app, iba't ibang mga proyekto sa aralin)
- Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator)
- Dokumentasyon na ipinapakita sa pamamagitan ng Docsify at available bilang PDF
- Dokumentasyon na ibinibigay sa pamamagitan ng Docsify at available bilang PDF
## Setup Commands
Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para sa pagtatrabaho sa mga partikular na proyekto:
Ang repositoryong ito ay pangunahing para sa konsumpsyon ng edukasyonal na nilalaman. Para sa pagtatrabaho sa mga partikular na proyekto:
### Main Repository Setup
@ -37,7 +37,7 @@ cd Web-Dev-For-Beginners
cd quiz-app
npm install
npm run dev # Simulan ang development server
npm run build # Bumuo para sa produksyon
npm run build # I-build para sa produksyon
npm run lint # Patakbuhin ang ESLint
```
@ -56,7 +56,7 @@ npm run format # I-format gamit ang Prettier
```bash
cd 5-browser-extension/solution
npm install
# Sundin ang mga tagubilin para sa pag-load ng extension na tiyak sa browser
# Sundin ang mga tagubilin sa pag-load ng extension na partikular sa browser
```
### Space Game Projects
@ -72,37 +72,37 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Itakda ang environment variable na GITHUB_TOKEN
# Itakda ang GITHUB_TOKEN na variable ng kapaligiran
python api.py
```
## Development Workflow
### Para sa mga Content Contributors
### Para sa mga Contributor ng Nilalaman
1. **I-fork ang repository** sa iyong GitHub account
1. **I-fork ang repositoryo** sa iyong GitHub account
2. **I-clone ang iyong fork** nang lokal
3. **Gumawa ng bagong branch** para sa iyong mga pagbabago
4. Gumawa ng mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code
5. Subukan ang anumang mga pagbabago sa code sa mga kaukulang direktoryo ng proyekto
6. Mag-submit ng pull request alinsunod sa mga panuntunan ng kontribusyon
3. **Gumawa ng bagong sanga** para sa iyong mga pagbabago
4. Gawin ang mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code
5. Subukan ang anumang pagbabago sa code sa mga kaukulang direktoryo ng proyekto
6. Mag-submit ng pull requests alinsunod sa mga gabay sa kontribusyon
### Para sa mga Learners
### Para sa mga Nag-aaral
1. Mag-fork o mag-clone ng repositoryo
2. Pumunta sa mga direktoryo ng aralin nang sunud-sunod
3. Basahin ang mga README na file para sa bawat aralin
4. Kumpletuhin ang mga pre-lesson quiz sa https://ff-quizzes.netlify.app/web/
5. Gawing ang mga halimbawa ng code sa mga folder ng aralin
6. Tapusin ang mga assignment at hamon
7. Kunin ang mga post-lesson quiz
1. I-fork o i-clone ang repositoryo
2. Mag-navigate sa mga direktoryo ng aralin sunod-sunod
3. Basahin ang mga README file para sa bawat aralin
4. Kumpletuhin ang mga pre-lesson quizzes sa https://ff-quizzes.netlify.app/web/
5. Trabahuhin ang mga halimbawa ng code sa mga folder ng aralin
6. Kumpletuhin ang mga takdang-aralin at hamon
7. Sagutan ang mga post-lesson quizzes
### Live Development
- **Dokumentasyon**: Patakbuhin ang `docsify serve` sa root (port 3000)
- **Quiz App**: Patakbuhin ang `npm run dev` sa direktoryo ng quiz-app
- **Quiz App**: Patakbuhin ang `npm run dev` sa folder ng quiz-app
- **Mga Proyekto**: Gamitin ang VS Code Live Server extension para sa mga HTML na proyekto
- **API Projects**: Patakbuhin ang `npm start` sa kaukulang mga direktoryo ng API
- **API Projects**: Patakbuhin ang `npm start` sa mga kaukulang API na direktoryo
## Testing Instructions
@ -110,71 +110,71 @@ python api.py
```bash
cd quiz-app
npm run lint # Suriin ang mga isyu sa estilo ng code
npm run build # Tiyakin na matagumpay ang build
npm run lint # Suriin kung may mga isyu sa istilo ng kodigo
npm run build # Tiyakin na matagumpay ang pagbuo
```
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Suriin ang mga isyu sa istilo ng code
node server.js # Tiyakin na nagsisimula ang server nang walang mga error
npm run lint # Suriin ang mga isyu sa estilo ng code
node server.js # Tiyaking nagsisimula ang server nang walang mga error
```
### General Testing Approach
### Pangkalahatang Paraan ng Pagsusuri
- Ito ay isang edukasyonal na repositoryo na walang kumpletong automated tests
- Manual testing ay nakatuon sa:
- Mga halimbawa ng code na tumatakbo nang walang error
- Mga link sa dokumentasyon ay gumagana nang tama
- Proyekto ay matagumpay na na-build
- Mga halimbawa ay sumusunod sa pinakamahusay na kasanayan
- Ito ay isang edukasyonal na repositoryo na walang komprehensibong automated tests
- Ang manual na pagsusuri ay nakatuon sa:
- Hindi nagkakaroon ng error ang mga halimbawa ng code kapag pinatakbo
- Gumagana nang maayos ang mga links sa dokumentasyon
- Matagumpay ang pagbuo ng mga proyekto
- Sumusunod ang mga halimbawa sa pinakamahusay na mga kasanayan
### Pre-submission Checks
### Mga Pre-submission Checks
- Patakbuhin ang `npm run lint` sa mga direktoryo na may package.json
- Siguraduhing ang mga markdown link ay valid
- Patakbuhin ang `npm run lint` sa mga direktoryong may package.json
- Tiyakin na wasto ang mga markdown links
- Subukan ang mga halimbawa ng code sa browser o Node.js
- Suriin na ang mga pagsasalin ay nagpapanatili ng tamang estruktura
- Suriin na ang mga pagsasalin ay nananatiling maayos ang istruktura
## Code Style Guidelines
### JavaScript
- Gumamit ng modernong ES6+ na sintaks
- Sundan ang standard na ESLint configurations na ibinigay sa mga proyekto
- Gumamit ng makahulugang pangalan ng mga variable at function para sa kalinawan sa edukasyon
- Magdagdag ng mga komento na nagpapaliwanag ng mga konsepto para sa mga nag-aaral
- Gumamit ng makabagong ES6+ na syntax
- Sundin ang mga standard ESLint na konfigurasyon na ibinigay sa mga proyekto
- Gumamit ng makabuluhang mga pangalan ng variable at function para sa kalinawan sa edukasyon
- Magdagdag ng mga paliwanag na komentaryo tungkol sa mga konsepto para sa mga nag-aaral
- I-format gamit ang Prettier kung saan naka-configure
### HTML/CSS
- Semantic na HTML5 na mga elemento
- Semantic HTML5 elements
- Mga prinsipyo ng responsive design
- Malinaw na klaseng pagnenaming mga kombensiyon
- Mga komento na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral
- Malinaw na conventions sa pagbibigay ng pangalan sa mga klase
- Mga komentaryo na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral
### Python
- PEP 8 na mga gabay sa estilo
- Malinaw, edukasyonal na mga halimbawa ng code
- Mga type hint kung makakatulong sa pag-aaral
- Mga patnubay sa estilo ayon sa PEP 8
- Malinaw, pang-edukasyonal na mga halimbawa ng code
- Mga type hint kung nakakatulong sa pag-aaral
### Markdown Documentation
- Malinaw na hierarchy ng mga heading
- Mga code block na may pagtukoy ng wika
- Mga code block na may pagspecify ng wika
- Mga link sa karagdagang mga mapagkukunan
- Mga screenshot at mga larawan sa `images/` na mga direktoryo
- Mga screenshot at larawan sa mga `images/` na mga direktoryo
- Alt text para sa mga larawan para sa accessibility
### File Organization
- Mga aralin na naka-numero nang sunud-sunod (1-getting-started-lessons, 2-js-basics, atbp.)
- Bawat proyekto ay may `solution/` at madalas ay`start/` o `your-work/` na mga direktoryo
- Mga larawan na nakaimbak sa aralin-nakatuong mga folder na `images/`
- Mga pagsasalin sa `translations/{language-code}/` na istruktura
- Ang mga aralin ay may sunud-sunod na bilang (1-getting-started-lessons, 2-js-basics, atbp.)
- Ang bawat proyekto ay may `solution/` at madalas `start/` o `your-work/` na mga direktoryo
- Ang mga larawan ay naka-imbak sa mga lesson-specific na `images/` folder
- Mga pagsasalin sa istrukturang `translations/{language-code}/`
## Build and Deployment
@ -184,11 +184,11 @@ Ang quiz-app ay naka-configure para sa Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Lumilikha ng folder na dist/
# Nagde-deploy gamit ang GitHub Actions workflow sa push sa main
npm run build # Lumilikha ng dist/ folder
# Nagde-deploy gamit ang GitHub Actions workflow kapag may push sa main
- Inirerekomenda ang [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) para sa mga nag-aaral
- Mga karagdagang kurso: Generative AI, Data Science, ML, IoT curricula ay available
- Karagdagang mga kurso: Generative AI, Data Science, ML, IoT curricula ang available
### Working with Specific Projects
### Pagtatrabaho sa Partikular na Mga Proyekto
Para sa detalyadong mga tagubilin sa mga indibidwal na proyekto, sumangguni sa README files sa:
Para sa detalyadong mga instruksyon sa mga indibidwal na proyekto, tingnan ang mga README file sa:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Banking application na may authentication
- `5-browser-extension/README.md` - Pag-develop ng browser extension
- `6-space-game/README.md` - Canvas-based na pag-develop ng laro
- `9-chat-project/README.md` - AI chat assistant na proyekto
- `6-space-game/README.md` - Pag-develop ng game gamit ang canvas
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
Bagaman hindi isang tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independyenteng proyekto:
- Bawat aralin ay self-contained
- Ang mga proyekto ay hindi nagbabahagi ng mga dependencies
- Magtrabaho sa mga indibidwal na proyekto nang hindi naaapektuhan ang iba
Bagamat hindi tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independiyenteng proyekto:
- Ang bawat aralin ay nakahiwalay
- Hindi nagbabahagi ng dependencies ang mga proyekto
- Puwedeng magtrabaho sa bawat proyekto nang hindi naaapektuhan ang iba
- I-clone ang buong repo para sa buong karanasan ng kurikulum
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Pagsasanggalang**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Habang nagsusumikap kami para sa katumpakan, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga error o kamalian. Ang orihinal na dokumento sa katutubong wika nito ang dapat ituring na opisyal na sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaintindihan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagaman nagsusumikap kami para sa katuparan, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mga mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot para sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmumula sa paggamit ng pagsasaling ito.
localizeflow[bot]
3 weeks ago