Unduhan Web Dev For Beginners - Unduhan kode sumber Web Dev For Beginners

Web Dev For Beginners

Kode sumber lainnya

1.0.0

Unduh

Pengembangan Web untuk Pemula - Kurikulum

Pelajari dasar-dasar pengembangan web dengan kursus komprehensif 12 minggu kami dari Microsoft Cloud Advocates. Masing-masing dari 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek praktis seperti terarium, ekstensi browser, dan permainan luar angkasa. Terlibat dengan kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan Anda dengan pedagogi berbasis proyek kami yang efektif. Mulailah perjalanan coding Anda hari ini!

Apakah kamu seorang pelajar?

Kunjungi halaman Student Hub di mana Anda akan menemukan sumber daya pemula, paket Siswa, dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu saat kami mengganti konten setiap bulan.

Pengumuman - Kurikulum Baru AI Generatif baru saja dirilis!

Jangan lewatkan 12 kurikulum pelajaran BARU kami tentang AI generatif!

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

rekayasa yang cepat dan cepat
pembuatan aplikasi teks dan gambar
aplikasi pencarian

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

Memulai

Guru , kami telah menyertakan beberapa saran tentang cara menggunakan kurikulum ini. Kami menantikan tanggapan Anda di forum diskusi kami!

Peserta didik , untuk setiap pembelajaran, diawali dengan kuis pra perkuliahan dan dilanjutkan dengan membaca materi perkuliahan, menyelesaikan berbagai kegiatan dan mengecek pemahamannya dengan kuis pasca perkuliahan.

Untuk meningkatkan pengalaman belajar Anda, terhubunglah dengan rekan-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 Anda menjelajahi Microsoft Learn untuk materi pelajaran tambahan.

Menyiapkan lingkungan Anda

Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat memulai, Anda dapat memilih untuk menjalankan kurikulum di Codespace ( lingkungan berbasis browser, tidak memerlukan 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 agar Anda membuat salinan repositori ini sendiri. Anda dapat melakukannya dengan mengeklik tombol Gunakan templat ini di bagian atas halaman. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum.

Ikuti langkah-langkah berikut:

Fork the Repository : Klik tombol "Fork" di pojok kanan atas halaman ini.
Kloning Repositori : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Menjalankan kurikulum di Codespace

Di salinan repositori yang Anda buat ini, klik tombol Kode dan pilih Buka dengan Codespaces . Ini akan membuat Codespace baru untuk Anda bekerja.

Buat ruang kode

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 masing-masing alat agar Anda dapat memilih mana yang terbaik bagi Anda.

Rekomendasi kami adalah menggunakan Visual Studio Code sebagai editor Anda, yang juga memiliki Terminal bawaan. Anda dapat mengunduh Kode Visual Studio di sini.

Kloning repositori Anda ke komputer Anda. Anda dapat melakukan ini dengan mengklik tombol Kode dan menyalin URL:
Kemudian, buka Terminal dalam Visual Studio Code dan jalankan perintah berikut, ganti <your-repository-url> dengan URL yang baru saja Anda salin:
```
 git clone <url-repositori-Anda>
```
Buka folder di Visual Studio Code. Anda dapat melakukan ini dengan mengklik File > Open Folder dan memilih folder yang baru saja Anda kloning.

Ekstensi Kode Visual Studio yang direkomendasikan:
Live Server - untuk melihat pratinjau halaman HTML dalam Visual Studio Code
Copilot - untuk membantu Anda menulis kode lebih cepat

Setiap pelajaran meliputi:

catatan sketsa opsional
video tambahan opsional
kuis pemanasan sebelum pelajaran
pelajaran tertulis
untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek
pemeriksaan pengetahuan
sebuah tantangan
bacaan tambahan
penugasan
kuis pasca pelajaran

Catatan tentang kuis : Semua kuis terdapat dalam folder aplikasi Kuis, total 48 kuis yang masing-masing terdiri dari tiga pertanyaan. Mereka ditautkan dari dalam pelajaran, aplikasi kuis dapat dijalankan secara lokal atau disebarkan ke Azure; ikuti instruksi di folder quiz-app . Mereka secara bertahap dilokalisasi.

Pelajaran

	Nama Proyek	Konsep yang Diajarkan	Tujuan pembelajaran	Pelajaran Tertaut	Pengarang
01	Memulai	Pengantar Pemrograman dan Alat Perdagangan	Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaannya	Pengantar Bahasa Pemrograman dan Alat Perdagangan	Melati
02	Memulai	Dasar-dasar GitHub, termasuk bekerja dengan tim	Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain berdasarkan basis kode	Pengantar GitHub	Lantai
03	Memulai	Aksesibilitas	Pelajari dasar-dasar aksesibilitas web	Dasar-dasar Aksesibilitas	Christopher
04	Dasar-dasar JS	Tipe Data JavaScript	Dasar-dasar tipe data JavaScript	Tipe Data	Melati
05	Dasar-dasar JS	Fungsi dan Metode	Pelajari tentang fungsi dan metode untuk mengelola aliran logika aplikasi	Fungsi dan Metode	Melati dan Christopher
06	Dasar-dasar JS	Membuat Keputusan dengan JS	Pelajari cara membuat ketentuan dalam kode Anda menggunakan metode pengambilan keputusan	Membuat Keputusan	Melati
07	Dasar-dasar JS	Array dan Loop	Bekerja dengan data menggunakan array dan loop dalam JavaScript	Array dan Loop	Melati
08	Terarium	HTML dalam Praktek	Bangun HTML untuk membuat terarium online, dengan fokus pada pembuatan tata letak	Pengantar HTML	Jen
09	Terarium	CSS dalam Praktek	Bangun CSS untuk menata terarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif	Pengantar CSS	Jen
10	Terarium	Penutupan JavaScript, manipulasi DOM	Bangun JavaScript untuk menjadikan terarium berfungsi sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM	Penutupan JavaScript, manipulasi DOM	Jen
11	Permainan Mengetik	Buat Game Mengetik	Pelajari cara menggunakan peristiwa keyboard untuk menggerakkan logika aplikasi JavaScript Anda	Pemrograman Berbasis Peristiwa	Christopher
12	Ekstensi Browser Hijau	Bekerja dengan Browser	Pelajari cara kerja browser, riwayatnya, dan cara menyusun elemen pertama ekstensi browser	Tentang Browser	Jen
13	Ekstensi Browser Hijau	Membangun formulir, memanggil API dan menyimpan variabel di penyimpanan lokal	Bangun elemen JavaScript pada ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal	API, Formulir, dan Penyimpanan Lokal	Jen
14	Ekstensi Browser Hijau	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	Latar Belakang Tugas dan Kinerja	Jen
15	Permainan Luar Angkasa	Pengembangan Game Lebih Lanjut dengan JavaScript	Pelajari tentang Warisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membuat game	Pengantar Pengembangan Game Tingkat Lanjut	Kris
16	Permainan Luar Angkasa	Menggambar ke kanvas	Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar	Menggambar ke Kanvas	Kris
17	Permainan Luar Angkasa	Memindahkan elemen di sekitar layar	Temukan bagaimana elemen dapat memperoleh gerakan menggunakan koordinat kartesius dan Canvas API	Memindahkan Elemen Di Sekitar	Kris
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	Kris
19	Permainan Luar Angkasa	Menjaga skor	Lakukan perhitungan matematika berdasarkan status dan kinerja game	Menjaga Skor	Kris
20	Permainan Luar Angkasa	Mengakhiri dan memulai kembali permainan	Pelajari cara mengakhiri dan memulai ulang game, termasuk membersihkan aset dan menyetel ulang nilai variabel	Kondisi Akhir	Kris
21	Aplikasi Perbankan	Templat dan Rute HTML di Aplikasi Web	Pelajari cara membuat perancah arsitektur situs web multihalaman menggunakan perutean dan templat HTML	Templat dan Rute HTML	Yohan
22	Aplikasi Perbankan	Buat Formulir Login dan Registrasi	Pelajari tentang membuat formulir dan menangani rutinitas validasi	Formulir	Yohan
23	Aplikasi Perbankan	Metode Pengambilan dan Penggunaan Data	Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya	Data	Yohan
24	Aplikasi Perbankan	Konsep Pengelolaan Negara	Pelajari cara aplikasi Anda mempertahankan status dan cara mengelolanya secara terprogram	Manajemen Negara	Yohan

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 mengembangkan pengalaman langsung dengan membuat permainan mengetik, terarium virtual, ekstensi browser ramah lingkungan, permainan bergaya penyerbu luar angkasa, dan aplikasi perbankan untuk bisnis. Di akhir seri ini, siswa akan memperoleh pemahaman yang kuat tentang pengembangan web.

? Anda dapat mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!

Dengan memastikan bahwa konten selaras dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan ditingkatkan. Kami juga menulis beberapa pelajaran awal tentang dasar-dasar JavaScript untuk memperkenalkan konsep, dipadukan dengan video dari kumpulan tutorial video "Seri Pemula hingga: JavaScript", yang beberapa penulisnya berkontribusi pada kurikulum ini.

Selain itu, kuis berisiko rendah sebelum kelas menetapkan niat siswa untuk mempelajari suatu topik, sedangkan kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang fleksibel dan menyenangkan serta dapat diambil secara keseluruhan atau sebagian. Proyek-proyek tersebut dimulai dari skala kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.

Meskipun kami sengaja menghindari pengenalan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang diperlukan sebagai pengembang web sebelum mengadopsi suatu kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui kumpulan video lainnya: "Seri Pemula untuk: Node.js".

Kunjungi pedoman Kode Etik dan Kontribusi kami. Kami menyambut masukan konstruktif Anda!

Akses luring

Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan Docsify. Garpu repo ini, instal Docsify di mesin lokal Anda, lalu di folder root repo ini, ketik docsify serve . Situs web akan disajikan pada port 3000 di localhost Anda: localhost:3000 .