|
3 weeks ago | |
---|---|---|
.. | ||
1-getting-started-lessons | 3 weeks ago | |
2-js-basics | 3 weeks ago | |
3-terrarium | 3 weeks ago | |
4-typing-game | 3 weeks ago | |
5-browser-extension | 3 weeks ago | |
6-space-game | 3 weeks ago | |
7-bank-project | 3 weeks ago | |
8-code-editor/1-using-a-code-editor | 3 weeks ago | |
docs | 3 weeks ago | |
lesson-template | 3 weeks ago | |
quiz-app | 3 weeks ago | |
CODE_OF_CONDUCT.md | 3 weeks ago | |
CONTRIBUTING.md | 3 weeks ago | |
README.md | 3 weeks ago | |
SECURITY.md | 3 weeks ago | |
SUPPORT.md | 3 weeks ago | |
_404.md | 3 weeks ago | |
for-teachers.md | 3 weeks ago |
README.md
Pembangunan Web untuk Pemula - Kurikulum
Pelajari asas pembangunan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap daripada 24 pelajaran meneroka JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan pemahaman anda dengan pendekatan pembelajaran berasaskan projek kami. Mulakan perjalanan pengkodan anda hari ini!
🧑🎓 Adakah anda seorang pelajar?
Lawati Halaman Student Hub di mana anda akan menemui sumber untuk pemula, pakej pelajar, dan juga cara mendapatkan baucar sijil percuma. Ini adalah halaman yang patut anda tandai dan periksa dari semasa ke semasa kerana kandungan akan ditukar setiap bulan.
📣 Pengumuman - Kurikulum Baru tentang Generative AI untuk JavaScript baru sahaja dilancarkan
Jangan lepaskan kurikulum Generative AI kami yang baru!
Lawati https://aka.ms/genai-js-course untuk bermula!

- Pelajaran yang merangkumi segalanya dari asas hingga RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Naratif yang menyeronokkan dan menarik, anda akan mengembara masa!

Setiap pelajaran termasuk tugasan untuk diselesaikan, semakan pengetahuan, dan cabaran untuk membimbing anda mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
Lawati https://aka.ms/genai-js-course untuk bermula!
🌱 Memulakan
Guru, kami telah menyediakan beberapa cadangan tentang cara menggunakan kurikulum ini. Kami menghargai maklum balas anda di forum perbincangan kami!
Pelajar, untuk setiap pelajaran, mulakan dengan kuiz pra-kuliah dan teruskan dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti, dan semak pemahaman anda dengan kuiz pasca-kuliah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sebaya untuk bekerjasama dalam projek! Perbincangan digalakkan di forum perbincangan kami di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka Microsoft Learn untuk bahan pembelajaran tambahan.
📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan yang sedia untuk digunakan! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum ini dalam Codespace (persekitaran berasaskan pelayar, tidak memerlukan pemasangan), atau secara tempatan di komputer anda menggunakan editor teks seperti Visual Studio Code.
Buat repositori anda
Untuk memudahkan anda menyimpan kerja anda, disarankan agar anda membuat salinan repositori ini. Anda boleh melakukannya dengan mengklik butang Use this template di bahagian atas halaman. Ini akan membuat repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah-langkah ini:
- Fork Repositori: Klik pada butang "Fork" di sudut kanan atas halaman ini.
- Clone Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Menjalankan kurikulum dalam Codespace
Dalam salinan repositori anda yang telah dibuat, klik butang Code dan pilih Open with Codespaces. Ini akan membuat Codespace baru untuk anda bekerja.

Menjalankan kurikulum secara tempatan di komputer anda
Untuk menjalankan kurikulum ini secara tempatan di komputer anda, anda memerlukan editor teks, pelayar, dan alat baris perintah. Pelajaran pertama kami, Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan, akan membimbing anda melalui pelbagai pilihan untuk setiap alat ini supaya anda boleh memilih yang paling sesuai untuk anda.
Cadangan kami adalah menggunakan Visual Studio Code sebagai editor anda, yang juga mempunyai Terminal terbina dalam. Anda boleh memuat turun Visual Studio Code di sini.
-
Clone repositori anda ke komputer anda. Anda boleh melakukannya dengan mengklik butang Code dan menyalin URL:
Kemudian, buka Terminal dalam Visual Studio Code dan jalankan arahan berikut, gantikan
<your-repository-url>
dengan URL yang baru anda salin:git clone <your-repository-url>
-
Buka folder dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik File > Open Folder dan memilih folder yang baru anda clone.
Sambungan Visual Studio Code yang disyorkan:
- Live Server - untuk melihat pratonton halaman HTML dalam Visual Studio Code
- Copilot - untuk membantu anda menulis kod dengan lebih pantas
📂 Setiap pelajaran termasuk:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan pra-pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
- semakan pengetahuan
- cabaran
- bacaan tambahan
- tugasan
- kuiz pasca-pelajaran
Nota tentang kuiz: Semua kuiz terdapat dalam folder Quiz-app, 48 kuiz keseluruhan dengan tiga soalan setiap satu. Mereka dihubungkan dari dalam pelajaran, aplikasi kuiz boleh dijalankan secara tempatan atau dideploy ke Azure; ikuti arahan dalam folder
quiz-app
. Kuiz sedang dilokalkan secara beransur-ansur.
🗃️ Pelajaran
Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Penulis | |
---|---|---|---|---|---|
01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat Perdagangan | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan | Jasmine |
02 | Memulakan | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam pangkalan kod | Pengenalan kepada GitHub | Floor |
03 | Memulakan | Kebolehaksesan | Pelajari asas kebolehaksesan web | Asas Kebolehaksesan | Christopher |
04 | Asas JS | Jenis Data JavaScript | Asas jenis data JavaScript | Jenis Data | Jasmine |
05 | Asas JS | Fungsi dan Kaedah | Pelajari tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | Fungsi dan Kaedah | Jasmine dan Christopher |
06 | Asas JS | Membuat Keputusan dengan JS | Pelajari cara mencipta syarat dalam kod anda menggunakan kaedah membuat keputusan | Membuat Keputusan | Jasmine |
07 | Asas JS | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | Array dan Gelung | Jasmine |
08 | Terrarium | HTML dalam Praktik | Bina HTML untuk mencipta terrarium dalam talian, dengan fokus pada membina susun atur | Pengenalan kepada HTML | Jen |
09 | Terrarium | CSS dalam Praktik | Bina CSS untuk menggayakan terrarium dalam talian, dengan fokus pada asas CSS termasuk menjadikan halaman responsif | Pengenalan kepada CSS | Jen |
10 | Terrarium | Penutupan JavaScript, manipulasi DOM | Bina JavaScript untuk membuat terrarium berfungsi sebagai antara muka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | Penutupan JavaScript, manipulasi DOM | Jen |
11 | Permainan Menaip | Bina Permainan Menaip | Pelajari cara menggunakan acara papan kekunci untuk memacu logik aplikasi JavaScript anda | Pengaturcaraan Berasaskan Acara | Christopher |
12 | Green Browser Extension | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara untuk memulakan elemen pertama sambungan pelayar | Tentang Pelayar | Jen |
13 | Green Browser Extension | Membina borang, memanggil API dan menyimpan pembolehubah dalam storan tempatan | Bina elemen JavaScript untuk sambungan pelayar anda bagi memanggil API menggunakan pembolehubah yang disimpan dalam storan tempatan | API, Borang, dan Storan Tempatan | Jen |
14 | Green Browser Extension | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon sambungan; pelajari tentang prestasi web dan beberapa pengoptimuman | Tugas Latar Belakang dan Prestasi | Jen |
15 | Space Game | Pembangunan Permainan Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | Pengenalan kepada Pembangunan Permainan Lanjutan | Chris |
16 | Space Game | Melukis pada kanvas | Pelajari tentang API Kanvas, yang digunakan untuk melukis elemen pada skrin | Melukis pada Kanvas | Chris |
17 | Space Game | Menggerakkan elemen di sekitar skrin | Ketahui bagaimana elemen boleh bergerak menggunakan koordinat kartesian dan API Kanvas | Menggerakkan Elemen | Chris |
18 | Space Game | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci dan sediakan fungsi cooldown untuk prestasi permainan | Pengesanan Perlanggaran | Chris |
19 | Space Game | Menyimpan skor | Lakukan pengiraan matematik berdasarkan status dan prestasi permainan | Menyimpan Skor | Chris |
20 | Space Game | Menamatkan dan memulakan semula permainan | Pelajari tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | Keadaan Tamat | Chris |
21 | Banking App | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara mencipta rangka kerja seni bina laman web berbilang halaman menggunakan laluan dan templat HTML | Templat HTML dan Laluan | Yohan |
22 | Banking App | Membina Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan mengendalikan rutin pengesahan | Borang | Yohan |
23 | Banking App | Kaedah Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, cara mengambilnya, menyimpannya, dan membuangnya | Data | Yohan |
24 | Banking App | Konsep Pengurusan Keadaan | Pelajari cara aplikasi anda mengekalkan keadaan dan cara menguruskannya secara programatik | Pengurusan Keadaan | Yohan |
🏫 Pedagogi
Kurikulum kami direka dengan dua prinsip pedagogi utama:
- pembelajaran berasaskan projek
- kuiz yang kerap
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang untuk mendapatkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
🎓 Anda boleh mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai Learn Path di Microsoft Learn!
Dengan memastikan kandungan sejajar dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, digabungkan dengan video dari koleksi "Beginners Series to: JavaScript", beberapa penulisnya turut menyumbang kepada kurikulum ini.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari topik, manakala kuiz kedua selepas kelas memastikan pengekalan lebih lanjut. Kurikulum ini direka untuk fleksibel dan menyeronokkan dan boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu.
Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik selepas melengkapkan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "Beginner Series to: Node.js".
Lawati Code of Conduct dan panduan Contributing kami. Kami mengalu-alukan maklum balas membina anda!
🧭 Akses luar talian
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan Docsify. Fork repo ini, pasang Docsify pada mesin tempatan anda, dan kemudian di folder root repo ini, taip docsify serve
. Laman web akan disediakan pada port 3000 di localhost anda: localhost:3000
.
PDF semua pelajaran boleh didapati di sini.
🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihat:
- Generative AI for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- Data Science for Beginners
- ML for Beginners
- Cybersecurity for Beginners
- Web Dev for Beginners
- IoT for Beginners
- XR Development for Beginners
- Mastering GitHub Copilot for Agentic use
- Mastering GitHub Copilot for C#/.NET Developers
- Choose Your Own Copilot Adventure
Lesen
Repositori ini dilesenkan di bawah lesen MIT. Lihat fail LICENSE untuk maklumat lanjut.
Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.