Web-Dev-For-Beginners/translations/id

Pengembangan Web untuk Pemula - Kurikulum

Pelajari dasar-dasar pengembangan web dengan kursus 12 minggu yang komprehensif dari Microsoft Cloud Advocates. Setiap dari 24 pelajaran membahas JavaScript, CSS, dan HTML melalui proyek langsung seperti terrarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan pemahaman Anda dengan pendekatan pembelajaran berbasis proyek yang efektif. Mulailah perjalanan coding Anda hari ini!

Bergabunglah dengan Komunitas Discord Azure AI Foundry

Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:

1. Fork Repositori: Klik
2. Clone Repositori: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta pengembang lainnya

🌐 Dukungan Multi-Bahasa

Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)

Arab | Bengali | Bulgaria | Burma (Myanmar) | Cina (Sederhana) | Cina (Tradisional, Hong Kong) | Cina (Tradisional, Makau) | Cina (Tradisional, Taiwan) | Kroasia | Ceko | Denmark | Belanda | Estonia | Finlandia | Prancis | Jerman | Yunani | Ibrani | Hindi | Hungaria | Indonesia | Italia | Jepang | Korea | Lituania | Melayu | Marathi | Nepali | Norwegia | Persia (Farsi) | Polandia | Portugis (Brasil) | Portugis (Portugal) | Punjabi (Gurmukhi) | Rumania | Rusia | Serbia (Kiril) | Slovakia | Slovenia | Spanyol | Swahili | Swedia | Tagalog (Filipina) | Tamil | Thai | Turki | Ukraina | Urdu | Vietnam

Jika Anda ingin mendukung bahasa tambahan, daftar bahasa yang didukung tersedia di sini

🧑‍🎓 Apakah Anda seorang pelajar?

Kunjungi Halaman Student Hub di mana Anda akan menemukan sumber daya untuk pemula, paket pelajar, dan bahkan cara mendapatkan voucher sertifikat gratis. Halaman ini adalah tempat yang perlu Anda tandai dan periksa dari waktu ke waktu karena konten kami diperbarui setiap bulan.

📣 Pengumuman - Proyek Baru untuk Dibangun Menggunakan AI Generatif

Proyek Asisten AI baru baru saja ditambahkan, lihat proyek

📣 Pengumuman - Kurikulum Baru tentang AI Generatif untuk JavaScript baru saja dirilis

Jangan lewatkan kurikulum AI Generatif kami yang baru!

Kunjungi https://aka.ms/genai-js-course untuk memulai!

• Pelajaran mencakup segalanya dari dasar hingga RAG.
• Berinteraksi dengan tokoh sejarah menggunakan GenAI dan aplikasi pendamping kami.
• Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!

Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk memandu Anda mempelajari topik seperti:

• Teknik pembuatan 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 umpan balik Anda di forum diskusi kami!

Pelajar, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-kuliah.

Untuk meningkatkan pengalaman belajar Anda, terhubunglah dengan teman-teman Anda untuk mengerjakan proyek bersama! Diskusi sangat dianjurkan di forum diskusi kami di mana tim moderator kami akan tersedia untuk menjawab pertanyaan Anda.

Untuk melanjutkan pendidikan Anda, kami sangat merekomendasikan menjelajahi Microsoft Learn untuk materi belajar tambahan.

📋 Menyiapkan lingkungan Anda

Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih untuk menjalankan kurikulum di Codespace (lingkungan berbasis browser, tidak perlu instalasi), atau secara lokal di komputer Anda menggunakan editor teks seperti Visual Studio Code.

Buat repositori Anda

Agar Anda dapat dengan mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repositori ini. 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-langkah ini:

1. Fork Repositori: Klik tombol "Fork" di sudut kanan atas halaman ini.
2. Clone Repositori: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Menjalankan kurikulum di Codespace

Di salinan repositori Anda yang telah dibuat, 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 yang Digunakan, akan memandu Anda melalui berbagai opsi untuk setiap alat ini agar Anda dapat memilih yang paling sesuai 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.

1. Clone repositori Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol Code dan menyalin URL:

   CodeSpace

   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>
   

2. Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik File > Open Folder dan memilih folder yang baru saja Anda clone.

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
• cek pemahaman
• tantangan
• bacaan tambahan
• tugas
• kuis setelah pelajaran

Catatan tentang kuis: Semua kuis terdapat dalam folder Quiz-app, total 48 kuis dengan masing-masing tiga pertanyaan. Kuis tersedia di sini. Aplikasi kuis dapat dijalankan secara lokal atau di-deploy ke Azure; ikuti instruksi di folder quiz-app.

🗃️ Pelajaran

	Nama Proyek	Konsep yang Diajarkan	Tujuan Pembelajaran	Tautan Pelajaran	Penulis
01	Memulai	Pengantar Pemrograman dan Alat yang Digunakan	Mempelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional bekerja	Pengantar Bahasa Pemrograman dan Alat yang Digunakan	Jasmine
02	Memulai	Dasar-dasar GitHub, termasuk bekerja dalam tim	Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode	Pengantar GitHub	Floor
03	Memulai	Aksesibilitas	Mempelajari dasar-dasar aksesibilitas web	Dasar-dasar Aksesibilitas	Christopher
04	Dasar JS	Tipe Data JavaScript	Dasar-dasar tipe data JavaScript	Tipe Data	Jasmine
05	Dasar JS	Fungsi dan Metode	Mempelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi	Fungsi dan Metode	Jasmine dan Christopher
06	Dasar JS	Membuat Keputusan dengan JS	Mempelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan	Membuat Keputusan	Jasmine
07	Dasar JS	Array dan Loop	Bekerja dengan data menggunakan array dan loop dalam JavaScript	Array dan Loop	Jasmine
08	Terrarium	HTML dalam Praktik	Membangun HTML untuk membuat terrarium online, dengan fokus pada pembuatan tata letak	Pengantar HTML	Jen
09	Terrarium	CSS dalam Praktik	Membangun CSS untuk mendesain terrarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif	Pengantar CSS	Jen
10	Terrarium	Penutupan JavaScript, manipulasi DOM	Membangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM	Penutupan JavaScript, manipulasi DOM	Jen
11	Permainan Mengetik	Membangun Permainan Mengetik	Mempelajari cara menggunakan peristiwa keyboard untuk menggerakkan logika aplikasi JavaScript Anda	Pemrograman Berbasis Peristiwa	Christopher
12	Ekstensi Browser Hijau	Bekerja dengan Browser	Mempelajari cara kerja browser, sejarahnya, dan cara membuat elemen pertama dari ekstensi browser	Tentang Browser	Jen
13	Ekstensi Browser Hijau	Membangun formulir, memanggil API, dan menyimpan variabel di local storage	Membangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di local storage	API, Formulir, dan Local Storage	Jen
14	Ekstensi Browser Hijau	Proses latar belakang di browser, performa web	Menggunakan proses latar belakang browser untuk mengelola ikon ekstensi; mempelajari tentang performa web dan beberapa optimasi untuk meningkatkannya	Tugas Latar Belakang dan Performa	Jen
15	Permainan Luar Angkasa	Pengembangan Game Lanjutan dengan JavaScript	Mempelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membangun game	Pengantar Pengembangan Game Lanjutan	Chris
16	Permainan Luar Angkasa	Menggambar di kanvas	Mempelajari tentang API Kanvas, yang digunakan untuk menggambar elemen ke layar	Menggambar di Kanvas	Chris
17	Permainan Luar Angkasa	Menggerakkan elemen di layar	Menemukan bagaimana elemen dapat bergerak menggunakan koordinat kartesian dan API Kanvas	Menggerakkan Elemen	Chris
18	Permainan Luar Angkasa	Deteksi tabrakan	Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan performa game	Deteksi Tabrakan	Chris
19	Permainan Luar Angkasa	Menghitung skor	Melakukan perhitungan matematika berdasarkan status dan performa game	Menghitung Skor	Chris
20	Permainan Luar Angkasa	Mengakhiri dan memulai ulang game	Mempelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel	Kondisi Akhir	Chris
21	Aplikasi Perbankan	Template HTML dan Rute dalam Aplikasi Web	Mempelajari cara membuat kerangka arsitektur situs web multi-halaman menggunakan routing dan template HTML	Template HTML dan Rute	Yohan
22	Aplikasi Perbankan	Membangun Formulir Login dan Registrasi	Mempelajari tentang membangun formulir dan menangani rutinitas validasi	Formulir	Yohan
23	Aplikasi Perbankan	Metode Mengambil dan Menggunakan Data	Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan mengelolanya	Data	Yohan
24	Aplikasi Perbankan	Konsep Manajemen Status	Mempelajari bagaimana aplikasi Anda mempertahankan status dan cara mengelolanya secara programatis	Manajemen Status	Yohan
25	Kode Browser/VScode	Bekerja dengan VScode	Mempelajari cara menggunakan editor kode	Menggunakan Editor Kode VScode	Chris
26	Asisten AI	Bekerja dengan AI	Mempelajari cara membangun asisten AI Anda sendiri	Proyek Asisten AI	Chris

🏫 Pedagogi

Kurikulum kami dirancang dengan dua prinsip pedagogi utama:

• 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 mendapatkan pengalaman langsung dengan membangun permainan mengetik, terrarium virtual, ekstensi browser ramah lingkungan, permainan gaya space-invader, dan aplikasi perbankan untuk bisnis. Pada akhir seri ini, siswa akan memiliki pemahaman yang solid tentang pengembangan web.

🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!

Dengan memastikan bahwa konten selaras dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan meningkatkan retensi konsep. Kami juga menulis beberapa pelajaran dasar JavaScript untuk memperkenalkan konsep-konsep, yang dipasangkan dengan video dari koleksi tutorial video "Beginners Series to: JavaScript", beberapa di antaranya ditulis oleh penulis kurikulum ini.

Selain itu, kuis dengan risiko rendah sebelum kelas dapat mengarahkan niat siswa untuk mempelajari topik tertentu, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diikuti secara keseluruhan atau sebagian. Proyek dimulai dari yang kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.

Meskipun kami sengaja menghindari pengenalan framework JavaScript untuk lebih fokus pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi framework, langkah baik berikutnya setelah menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lainnya: "Beginner Series to: 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, instal Docsify di komputer lokal Anda, lalu di folder root repositori ini, ketik docsify serve. Situs web akan disajikan di port 3000 di localhost Anda: localhost:3000.

📘 PDF

PDF dari semua pelajaran dapat ditemukan di sini.

🎒 Kursus Lainnya

Tim kami juga membuat kursus lainnya! Lihat:

• MCP untuk Pemula
• Edge AI untuk Pemula
• Agen AI untuk Pemula
• AI Generatif untuk Pemula .NET
• AI Generatif dengan JavaScript
• AI Generatif dengan Java
• AI untuk Pemula
• Data Science untuk Pemula
• ML untuk Pemula
• Keamanan Siber untuk Pemula
• Pengembangan Web untuk Pemula
• IoT untuk Pemula
• Pengembangan XR untuk Pemula
• Menguasai GitHub Copilot untuk Penggunaan Agentic
• Menguasai GitHub Copilot untuk Pengembang C#/.NET
• Pilih Petualangan Copilot Anda Sendiri

Mendapatkan Bantuan

Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI, bergabunglah di:

Jika Anda memiliki masukan produk atau menemukan kesalahan saat membangun, kunjungi:

Lisensi

Repositori ini dilisensikan di bawah lisensi MIT. Lihat file LICENSE untuk informasi lebih lanjut.

---

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.