|
|
4 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 5 months ago | |
| 2-js-basics | 7 months ago | |
| 3-terrarium | 7 months ago | |
| 4-typing-game | 7 months ago | |
| 5-browser-extension | 7 months ago | |
| 6-space-game | 7 months ago | |
| 7-bank-project | 7 months ago | |
| 8-code-editor/1-using-a-code-editor | 7 months ago | |
| 9-chat-project | 7 months ago | |
| 10-ai-framework-project | 7 months ago | |
| Git-Basics | 7 months ago | |
| docs | 7 months ago | |
| lesson-template | 4 months ago | |
| memory-game | 7 months ago | |
| quiz-app | 7 months ago | |
| .co-op-translator.json | 4 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 7 months ago | |
| CONTRIBUTING.md | 7 months ago | |
| README.md | 4 months ago | |
| Roadmap.md | 6 months ago | |
| SECURITY.md | 7 months ago | |
| SUPPORT.md | 7 months ago | |
| _404.md | 7 months ago | |
| for-teachers.md | 7 months ago | |
README.md
Pengembangan Web untuk Pemula - Kurikulum
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif selama 12 minggu oleh Microsoft Cloud Advocates. Setiap dari 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan Anda dengan pedagogi berbasis proyek yang efektif. Mulailah perjalanan pemrograman Anda hari ini!
Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang.
Ikuti langkah-langkah ini untuk memulai menggunakan sumber daya ini:
- Fork Repositori: Klik
- Clone Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Bergabung dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang
🌐 Dukungan Multi-Bahasa
Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Lebih suka Clone Secara Lokal?
Repositori ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
Bash / macOS / Linux:
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'CMD (Windows):
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"Ini memberi Anda semua yang Anda butuhkan untuk menyelesaikan kursus dengan unduhan yang jauh lebih cepat.
Jika Anda ingin memiliki terjemahan tambahan, bahasa yang didukung terdaftar di sini. di sini
🧑🎓 Apakah Anda seorang pelajar?
Kunjungi halaman Student Hub di mana Anda akan menemukan sumber daya pemula, paket pelajar dan bahkan cara untuk mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu karena kami mengganti konten setiap bulan.
📣 Pengumuman - Tantangan mode GitHub Copilot Agent baru untuk diselesaikan!
Tantangan baru ditambahkan, cari "GitHub Copilot Agent Challenge 🚀" di sebagian besar bab. Itu adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agent. Jika Anda belum pernah menggunakan mode Agent sebelumnya, mode ini tidak hanya mampu menghasilkan teks tetapi juga dapat membuat dan mengedit file, menjalankan perintah dan lainnya.
📣 Pengumuman - Proyek Baru untuk dibangun menggunakan Generative AI
Proyek Asisten AI baru saja ditambahkan, cek proyek
📣 Pengumuman - Kurikulum Baru tentang Generative AI untuk JavaScript baru saja dirilis
Jangan lewatkan kurikulum Generative AI baru kami!
Kunjungi https://aka.ms/genai-js-course untuk memulai!
- Pelajaran mencakup segala sesuatu mulai dari dasar hingga RAG.
- Berinteraksi dengan karakter sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!
Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan dan tantangan untuk memandu Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Pembuatan aplikasi teks dan gambar
- Aplikasi pencarian
Kunjungi https://aka.ms/genai-js-course untuk memulai!
🌱 Memulai
Guru, kami telah menyertakan beberapa saran tentang cara menggunakan kurikulum ini. Kami sangat menghargai masukan Anda di forum diskusi kami!
Pembelajar, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan memeriksa pemahaman Anda dengan kuis pasca-kuliah.
Untuk memperkaya pengalaman belajar Anda, hubungkan dengan rekan Anda untuk mengerjakan proyek bersama! Diskusi dianjurkan di forum diskusi kami di mana tim moderator kami akan siap menjawab pertanyaan Anda.
Untuk melanjutkan pendidikan Anda, kami sangat menyarankan menjelajahi Microsoft Learn untuk bahan studi tambahan.
📋 Menyiapkan lingkungan Anda
Kurikulum ini sudah memiliki lingkungan pengembangan siap pakai! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum di Codespace (lingkungan berbasis browser tanpa perlu instalasi), atau secara lokal di komputer Anda menggunakan editor teks seperti Visual Studio Code.
Buat repositori Anda
Agar Anda mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repositori ini sendiri. Anda dapat melakukannya dengan mengklik tombol Use this template di bagian atas halaman. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum.
Ikuti langkah berikut:
- Fork Repositori: Klik tombol "Fork" di pojok kanan atas halaman ini.
- Clone Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Menjalankan kurikulum di Codespace
Di salinan repositori yang Anda buat, klik tombol Code dan pilih Open with Codespaces. Ini akan membuat Codespace baru untuk Anda bekerja.
Menjalankan kurikulum secara lokal di komputer Anda
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser dan alat baris perintah. Pelajaran pertama kami, Pengantar Bahasa Pemrograman dan Alat Perdagangan, akan memandu Anda melalui berbagai opsi untuk setiap alat ini agar Anda dapat memilih yang terbaik untuk Anda.
Rekomendasi kami adalah menggunakan Visual Studio Code sebagai editor Anda, yang juga memiliki Terminal bawaan. Anda dapat mengunduh Visual Studio Code di sini.
-
Kloning repositori Anda ke komputer. Anda dapat melakukannya dengan mengklik tombol Code dan menyalin URL-nya:
Kemudian, buka Terminal di dalam Visual Studio Code dan jalankan perintah berikut, mengganti
<your-repository-url>dengan URL yang baru saja Anda salin:git clone <your-repository-url> -
Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik File > Open Folder dan memilih folder yang baru saja Anda kloning.
Ekstensi Visual Studio Code yang Direkomendasikan:
- Live Server - untuk melihat pratinjau halaman HTML di dalam Visual Studio Code
- Copilot - untuk membantu Anda menulis kode lebih cepat
📂 Setiap pelajaran mencakup:
- sketchnote opsional
- video tambahan opsional
- kuis pemanasan sebelum pelajaran
- pelajaran tertulis
- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek
- pemeriksaan pengetahuan
- tantangan
- bacaan tambahan
- tugas
- kuis setelah pelajaran
Catatan tentang kuis: Semua kuis terdapat di dalam folder Quiz-app, total 48 kuis dengan tiga pertanyaan setiap kuis. Kuis tersedia di sini, aplikasi kuis dapat dijalankan secara lokal atau dideploy ke Azure; ikuti instruksi di folder
quiz-app.
🗃️ Pelajaran
| Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis | |
|---|---|---|---|---|---|
| 01 | Memulai | Pengenalan Pemrograman dan Alat Bantu | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | Pengantar Bahasa Pemrograman dan Alat | Jasmine |
| 02 | Memulai | Dasar-dasar GitHub, termasuk bekerja dalam tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain dalam basis kode | Pengantar GitHub | Floor |
| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | Dasar-Dasar Aksesibilitas | Christopher |
| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data pada JavaScript | Tipe Data | Jasmine |
| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | Fungsi dan Metode | Jasmine dan Christopher |
| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari bagaimana membuat kondisi dalam kode menggunakan metode pengambilan keputusan | Membuat Keputusan | Jasmine |
| 07 | Dasar JS | Array dan Perulangan | Bekerja dengan data menggunakan array dan perulangan di JavaScript | Array dan Perulangan | Jasmine |
| 08 | Terrarium | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | Pengantar ke HTML | Jen |
| 09 | Terrarium | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | Pengantar ke CSS | Jen |
| 10 | Terrarium | JavaScript Closures, manipulasi DOM | Bangun JavaScript agar terrarium berfungsi sebagai antarmuka seret dan lepas, fokus pada closures dan manipulasi DOM | JavaScript Closures, manipulasi DOM | Jen |
| 11 | Typing Game | Membangun Game Mengetik | Pelajari cara menggunakan event keyboard untuk menjalankan logika aplikasi JavaScript | Pemrograman Berbasis Event | Christopher |
| 12 | Green Browser Extension | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan bagaimana membuat pondasi elemen pertama sebuah ekstensi browser | Tentang Browser | Jen |
| 13 | Green Browser Extension | Membangun form, memanggil API, dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | API, Form, dan Penyimpanan Lokal | Jen |
| 14 | Green Browser Extension | Proses latar belakang di browser, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa optimisasi untuk membuat | Tugas Latar Belakang dan Kinerja | Jen |
| 15 | Space Game | Pengembangan Game Lebih Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan membangun game | Pengantar Pengembangan Game Lanjutan | Chris |
| 16 | Space Game | Menggambar di kanvas | Pelajari tentang Canvas API, digunakan untuk menggambar elemen ke layar | Menggambar ke Kanvas | Chris |
| 17 | Space Game | Memindahkan elemen di sekitar layar | Temukan bagaimana elemen bisa bergerak menggunakan koordinat kartesius dan Canvas API | Memindahkan Elemen | Chris |
| 18 | Space Game | Deteksi tabrakan | Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan kinerja game | Deteksi Tabrakan | Chris |
| 19 | Space Game | Menghitung skor | Melakukan perhitungan matematika berdasarkan status dan kinerja game | Menghitung Skor | Chris |
| 20 | Space Game | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | Kondisi Akhir | Chris |
| 21 | Banking App | Template HTML dan Rute dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | Template HTML dan Rute | Yohan |
| 22 | Banking App | Membuat Formulir Login dan Registrasi | Pelajari tentang membuat formulir dan menangani rutin validasi | Formulir | Yohan |
| 23 | Banking App | Metode Pengambilan dan Penggunaan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, bagaimana mengambilnya, menyimpannya, dan membuangnya | Data | Yohan |
| 24 | Banking App | Konsep Manajemen Status | Pelajari bagaimana aplikasi Anda mempertahankan status dan cara mengelolanya secara programatik | Manajemen Status | Yohan |
| 25 | Browser/VScode Code | Bekerja dengan VScode | Pelajari cara menggunakan editor kode | Gunakan Editor Kode VScode | Chris |
| 26 | AI Assistants | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | Proyek Asisten AI | Chris |
🏫 Pedagogi
Kurikulum kami dirancang dengan dua prinsip pedagogis utama dalam pikiran:
- pembelajaran berbasis proyek
- kuis yang sering
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, permainan gaya invasi ruang angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memperoleh pemahaman yang kuat tentang pengembangan web.
🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!
Dengan memastikan konten sesuai dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran awal mengenai dasar-dasar JavaScript untuk memperkenalkan konsep, dipadukan dengan video dari koleksi tutorial video "Seri Pemula untuk: JavaScript", beberapa penulisnya berkontribusi pada kurikulum ini.
Selain itu, kuis dengan risiko rendah sebelum kelas menetapkan niat siswa terhadap pembelajaran topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diambil secara lengkap atau sebagian. Proyek dimulai kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.
Meskipun kami sengaja menghindari mengenalkan framework JavaScript untuk fokus pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum menggunakan framework, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah mempelajari Node.js melalui koleksi video lain: "Seri Pemula untuk: Node.js".
Kunjungi Kode Etik dan pedoman Kontribusi kami. Kami menyambut umpan balik konstruktif Anda!
🧭 Akses Offline
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan Docsify. Fork repositori ini, pasang Docsify pada mesin lokal Anda, lalu di folder root dari repositori ini, ketik docsify serve. Situs web akan dilayani pada port 3000 di localhost Anda: localhost:3000.
PDF dari semua pelajaran dapat ditemukan di sini.
🎒 Kursus Lainnya
Tim kami memproduksi kursus lain! Periksa:
LangChain
Azure / Edge / MCP / Agents
Seri AI Generatif
Pembelajaran Inti
Seri Copilot
Mendapatkan Bantuan
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan sesama pembelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan dipersilakan dan pengetahuan dibagikan secara bebas.
Jika Anda memiliki masukan produk atau kesalahan saat membangun, kunjungi:
Lisensi
Repositori ini dilisensikan di bawah lisensi MIT. Lihat file LICENSE untuk informasi lebih lanjut.
Disclaimer:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI Co-op Translator. Meskipun kami berupaya untuk keakuratan, harap diingat bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.


