[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
Azure Cloud Advocates di Microsoft dengan senang hati menawarkan kurikulum 12 minggu 24 pelajaran tentang JavaScript, CSS, dan dasar-dasar HTML. Setiap pelajaran mencakup kuis sebelum dan sesudah pelajaran, instruksi tertulis untuk menyelesaikan pelajaran, solusi, tugas, dan banyak lagi. Pedagogi berbasis proyek kami memungkinkan Anda untuk belajar sambil membangun, cara yang terbukti untuk keterampilan baru untuk 'stick'.
**Terima kasih yang sebesar-besarnya kepada penulis kami Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, dan seniman sketchnote Tomomi Imura!**
> **Guru**, kita punya [termasuk beberapa saran](for-teachers.md) tentang bagaimana menggunakan kurikulum ini. Kami akan menyukai tanggapan Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Pelajar**, untuk menggunakan kurikulum ini sendiri, bagilah seluruh repo dan selesaikan latihannya sendiri, dimulai dengan kuis pra-kuliah, kemudian membaca kuliah dan menyelesaikan sisa kegiatan. Cobalah untuk membuat proyek dengan memahami pelajaran daripada menyalin kode solusi; namun kode tersebut tersedia di folder /solutions di setiap pelajaran berorientasi proyek. Ide lain adalah membentuk kelompok belajar dengan teman-teman dan membahas isinya bersama-sama. Untuk studi lebih lanjut, kami merekomendasikan [Belajar Microsoft](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) dan dengan menonton video yang disebutkan di bawah ini.
Kami telah memilih dua prinsip pedagogis saat membangun kurikulum ini: memastikan bahwa itu berbasis proyek dan termasuk kuis yang sering. Pada akhir seri ini, siswa akan membuat game mengetik, terarium virtual, ekstensi browser 'hijau', game tipe 'penyerbu ruang', dan aplikasi perbankan tipe bisnis, dan akan mempelajari dasar-dasar JavaScript , HTML, dan CSS bersama dengan rantai alat modern dari pengembang web saat ini.
> 🎓 Anda dapat mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Pelajari Jalur](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan bahwa konten selaras dengan proyek, proses dibuat lebih menarik bagi siswa dan retensi konsep akan ditambah. Kami juga menulis beberapa pelajaran awal dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kumpulan video tutorial, yang beberapa penulisnya berkontribusi pada kurikulum ini.
Selain itu, kuis berisiko rendah sebelum kelas menetapkan niat siswa untuk mempelajari suatu topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diambil secara keseluruhan atau sebagian. Proyek mulai kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.
Meskipun kami sengaja menghindari pengenalan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari Node.js melalui kumpulan video lainnya: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> **Catatan tentang kuis**: Semua kuis terkandung [di aplikasi ini](https://ashy-river-0debb7803.1.azurestaticapps.net/), untuk 48 total kuis dari tiga pertanyaan masing-masing. Mereka ditautkan dari dalam pelajaran tetapi aplikasi kuis dapat dijalankan secara lokal; ikuti petunjuk di `quiz-app` folder. Mereka secara bertahap dilokalisasi.
| 01 | Mulai | Perkenalan pada Programming dan Tools dari Perdagangan | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | [Pengantar Programming Languages dan Tools dari Perdagangan](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Mulai | Dasar-dasar GitHub, termasuk bekerja dengan tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain dalam basis kode | [Intro di GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Mulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | Dasar-dasar tipe data JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Array dan Loop | Bekerja dengan data menggunakan array dan loop dalam JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML dalam Praktek | Bangun HTML untuk membuat terarium online, dengan fokus membangun tata letak | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS dalam Praktek | Bangun CSS untuk menata terarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat fungsi terarium sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi 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) | Buat Game Mengetik | Pelajari cara menggunakan peristiwa keyboard untuk mendorong logika aplikasi JavaScript Anda | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, riwayatnya, dan cara membuat perancah elemen pertama dari ekstensi browser | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Membangun formulir, 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 | [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) | Proses latar belakang di browser, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa pengoptimalan yang harus dilakukan | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Pengembangan Game Lebih Lanjut dengan JavaScript | Pelajari tentang Warisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membuat game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Menggambar ke kanvas | Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Memindahkan elemen di sekitar layar | Temukan bagaimana elemen bisa mendapatkan gerakan menggunakan koordinat kartesius dan Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan kinerja game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Menjaga skor | Lakukan perhitungan matematika berdasarkan status dan kinerja game | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Mengakhiri dan memulai kembali permainan | Pelajari tentang mengakhiri dan memulai kembali game, termasuk membersihkan aset dan menyetel ulang nilai variabel | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Template dan Rute HTML di Aplikasi Web | Pelajari cara membuat perancah arsitektur situs web multihalaman menggunakan perutean dan templat HTML | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Buat Formulir Login dan Registrasi | pelajari tentang membuat formulir dan menangani rutinitas validasi | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konsep Manajemen Negara | Pelajari cara aplikasi Anda mempertahankan status dan cara mengelolanya secara terprogram | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
Anda dapat menjalankan dokumentasi ini secara luring dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [install Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, dan kemudian di folder root repo ini, ketik `docsify serve`. Situs web akan disajikan pada port 3000 di localhost Anda: `localhost:3000`.
