Skip to content

Latest commit

 

History

History
280 lines (192 loc) · 33 KB

File metadata and controls

280 lines (192 loc) · 33 KB

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Microsoft Foundry Discord

Pembangunan Web untuk Pemula - Kurikulum

Pelajari asas pembangunan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa. Ikuti kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan pengekalan ilmu dengan pedagogi berasaskan projek kami yang berkesan. Mulakan perjalanan pengkodan anda hari ini!

Sertai Komuniti Discord Azure AI Foundry

Microsoft Foundry Discord

Ikuti langkah-langkah berikut untuk memulakan menggunakan sumber ini:

  1. Fork Repositori: Klik GitHub forks
  2. Clone Repositori: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
  3. Sertai Azure AI Foundry Discord dan temui pakar serta pembangun lain

🌐 Sokongan Pelbagai Bahasa

Disokong melalui GitHub Action (Automatik & Sentiasa Terkini)

Arab | Bengali | Bulgaria | Burmese (Myanmar) | Cina (Dipermudahkan) | Cina (Tradisional, Hong Kong) | Cina (Tradisional, Macau) | Cina (Tradisional, Taiwan) | Croatia | Czech | Denmark | Belanda | Estonia | Finland | Perancis | Jerman | Greek | Hebrew | Hindi | Hungary | Indonesia | Itali | Jepun | Kannada | Khmer | Korea | Lithuania | Melayu | Malayalam | Marathi | Nepali | Pidgin Nigeria | Norway | Farsi (Parsi) | Poland | Portugis (Brazil) | Portugis (Portugal) | Punjabi (Gurmukhi) | Romania | Rusia | Serbia (Sirilik) | Slovakia | Slovenia | Sepanyol | Swahili | Sweden | Tagalog (Filipina) | Tamil | Telugu | Thai | Turki | Ukrainian | Urdu | Vietnam

Lebih suka Clone Secara Tempatan?

Repositori ini merangkumi lebih daripada 50 terjemahan bahasa yang meningkatkan saiz muat turun dengan ketara. 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 perlukan untuk melengkapkan kursus dengan muat turun lebih pantas.

Jika anda ingin bahasa terjemahan tambahan disokong, senarai disediakan di sini

Open in Visual Studio Code

🧑‍🎓 Adakah anda pelajar?

Lawati halaman Student Hub di mana anda akan menemui sumber untuk pemula, Pakej Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda perlu tandai dan semak dari semasa ke semasa kerana kandungan akan ditukar setiap bulan.

📣 Pengumuman - Cabaran Mod Ejen GitHub Copilot Baru untuk diselesaikan!

Cabaran Baru ditambah, cari "Cabaran Ejen GitHub Copilot 🚀" dalam kebanyakan bab. Ini adalah cabaran baharu untuk anda selesaikan menggunakan GitHub Copilot dan mod Ejen. Jika anda belum pernah menggunakan mod Ejen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga mencipta dan mengedit fail, menjalankan arahan dan banyak lagi.

📣 Pengumuman - Projek Baru untuk dibina menggunakan Generative AI

Projek Pembantu AI baru sahaja ditambah, semak projek

📣 Pengumuman - Kurikulum Baru tentang Generative AI untuk JavaScript baru sahaja dikeluarkan

Jangan ketinggalan kurikulum baru Generative AI kami!

Lawati https://aka.ms/genai-js-course untuk memulakan!

Background

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

character

Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam topik seperti:

  • Prompting dan kejuruteraan arahan
  • Penjanaan aplikasi teks dan imej
  • Aplikasi carian

Lawati https://aka.ms/genai-js-course untuk memulakan!

🌱 Memulakan

Guru-guru, kami telah menyertakan beberapa cadangan tentang cara menggunakan kurikulum ini. Kami ingin mendapatkan maklum balas anda di forum perbincangan kami!

Pelajar, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan ikuti dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pasca-ceramah.

Untuk meningkatkan pengalaman pembelajaran anda, berhubunglah dengan rakan-rakan anda untuk bekerja pada projek bersama! Perbincangan digalakkan di forum perbincangan kami di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.

Untuk memajukan pendidikan anda, kami sangat mengesyorkan meneroka Microsoft Learn untuk bahan pembelajaran tambahan.

📋 Menyediakan persekitaran anda

Kurikulum ini mempunyai persekitaran pembangunan yang sudah siap! Semasa anda mula, anda boleh memilih untuk menjalankan kurikulum di Codespace (persekitaran berasaskan pelayar, tiada pemasangan diperlukan), atau secara tempatan di komputer anda menggunakan penyunting teks seperti Visual Studio Code.

Cipta repositori anda

Untuk memudahkan anda menyimpan kerja anda, disyorkan anda membuat salinan sendiri repositori ini. Anda boleh lakukan ini dengan mengklik butang Use this template di bahagian atas halaman. Ini akan mencipta repositori baru di akaun GitHub anda dengan salinan kurikulum.

Ikut langkah ini:

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

Menjalankan kurikulum di Codespace

Dalam salinan repositori yang anda cipta, klik butang Code dan pilih Open with Codespaces. Ini akan mencipta Codespace baru untuk anda bekerja.

Codespace

Menjalankan kurikulum secara tempatan di komputer anda

Untuk menjalankan kurikulum ini secara tempatan di komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris arahan. Pelajaran pertama kami, Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan, akan membimbing anda melalui pelbagai pilihan untuk setiap alat agar anda memilih yang paling sesuai untuk anda.

Cadangan kami ialah menggunakan Visual Studio Code sebagai penyunting anda, yang juga mempunyai Terminal terbina dalam. Anda boleh muat turun Visual Studio Code di sini.

  1. Klon repositori anda ke komputer anda. Anda boleh melakukan ini dengan mengklik butang Code dan menyalin URL:

    CodeSpace

    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>
  2. Buka folder dalam Visual Studio Code. Anda boleh melakukan ini dengan mengklik File > Open Folder dan memilih folder yang baru anda klon.

Sambungan Visual Studio Code yang disyorkan:

  • Live Server - untuk pratonton halaman HTML dalam Visual Studio Code
  • Copilot - untuk membantu anda menulis kod dengan lebih pantas

📂 Setiap pelajaran merangkumi:

  • sketchnote pilihan
  • video tambahan pilihan
  • kuiz pemanasan pra-pelajaran
  • pelajaran bertulis
  • untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
  • pemeriksaan pengetahuan
  • satu cabaran
  • bacaan tambahan
  • tugasan
  • kuiz pasca-pelajaran

Nota tentang kuiz: Semua kuiz terkandung dalam folder Quiz-app, jumlah 48 kuiz dengan tiga soalan setiap satu. Ia tersedia di sini aplikasi kuiz boleh dijalankan secara tempatan atau diterapkan ke Azure; ikut arahan dalam folder quiz-app.

🗃️ Pelajaran

Nama Projek Konsep yang Diajarkan Objektif Pembelajaran Pelajaran Berpaut Pengarang
01 Bermula Pengenalan kepada Pengaturcaraan dan Alat-alat Perdagangan Pelajari asas-asas yang mendasari kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan tugas mereka Pengenalan Kepada Bahasa Pengaturcaraan dan Alat-alat Perdagangan Jasmine
02 Bermula Asas GitHub, termasuk bekerja dengan pasukan Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain pada kod asas Pengenalan kepada GitHub Floor
03 Bermula Aksesibiliti Pelajari asas aksesibiliti web Asas Aksesibiliti 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 membuat syarat dalam kod anda menggunakan kaedah membuat keputusan Membuat Keputusan Jasmine
07 Asas JS Tatasusun dan Gelung Bekerja dengan data menggunakan tatasusun dan gelung dalam JavaScript Tatasusun dan Gelung Jasmine
08 Terrarium HTML dalam Praktik Bina HTML untuk membuat terrarium dalam talian, menumpukan pada membina susun atur Pengenalan kepada HTML Jen
09 Terrarium CSS dalam Praktik Bina CSS untuk menghias terrarium dalam talian, menumpukan pada asas CSS termasuk membuat halaman responsif Pengenalan kepada CSS Jen
10 Terrarium Penutupan JavaScript, manipulasi DOM Bina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, menumpukan pada penutupan dan manipulasi DOM Penutupan JavaScript, manipulasi DOM Jen
11 Permainan Taip Bina Permainan Taip Pelajari cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda Pengaturcaraan Berpandukan Acara Christopher
12 Sambungan Pelayar Hijau Bekerja dengan Pelayar Pelajari cara pelayar berfungsi, sejarahnya, dan bagaimana membina elemen pertama sambungan pelayar Mengenai Pelayar Jen
13 Sambungan Pelayar Hijau Bina borang, memanggil API dan menyimpan pemboleh ubah dalam penyimpanan tempatan Bina elemen JavaScript bagi sambungan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam penyimpanan tempatan API, Borang, dan Penyimpanan Tempatan Jen
14 Sambungan Pelayar Hijau Proses latar belakang dalam pelayar, prestasi web Gunakan proses latar belakang pelayar untuk mengurus ikon sambungan; pelajari tentang prestasi web dan beberapa pengoptimuman untuk meningkatkan Tugas Latar Belakang dan Prestasi Jen
15 Permainan Angkasa Pembangunan Permainan Lebih Lanjut dengan JavaScript Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta corak Pub/Sub, sebagai persiapan membina permainan Pengenalan kepada Pembangunan Permainan Lanjutan Chris
16 Permainan Angkasa Melukis pada kanvas Pelajari tentang API Canvas, digunakan untuk melukis elemen pada skrin Melukis pada Kanvas Chris
17 Permainan Angkasa Menggerakkan elemen di sekitar skrin Temui cara elemen memperoleh pergerakan menggunakan koordinat kartesian dan API Canvas Menggerakkan Elemen Chris
18 Permainan Angkasa Pengesanan pertembungan Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan tekan kekunci dan sediakan fungsi had masa untuk memastikan prestasi permainan Pengesanan Pertembungan Chris
19 Permainan Angkasa Menjaga skor Lakukan pengiraan matematik berdasarkan status dan prestasi permainan Menjaga Skor Chris
20 Permainan Angkasa Mengakhiri dan memulakan semula permainan Pelajari tentang mengakhiri dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah Keadaan Penamat Chris
21 Aplikasi Perbankan Templat HTML dan Laluan dalam Aplikasi Web Pelajari bagaimana membuat kerangka seni bina laman web berbilang halaman menggunakan laluan dan templat HTML Templat HTML dan Laluan Yohan
22 Aplikasi Perbankan Bina Borang Log Masuk dan Pendaftaran Pelajari tentang membina borang dan mengendalikan rutin pengesahan Borang Yohan
23 Aplikasi Perbankan Kaedah Mengambil dan Menggunakan Data Bagaimana data mengalir masuk dan keluar dari aplikasi anda, cara mengambil, menyimpan, dan membuangnya Data Yohan
24 Aplikasi Perbankan Konsep Pengurusan Negeri Pelajari bagaimana aplikasi anda mengekalkan negeri dan cara menguruskannya secara berprogram Pengurusan Negeri Yohan
25 Kod Pelayar/VScode Bekerja dengan VScode Pelajari cara menggunakan penyunting kod Gunakan Penyunting Kod VScode Chris
26 Pembantu AI Bekerja dengan AI Pelajari cara membina pembantu AI sendiri Projek Pembantu AI Chris

🏫 Pedagogi

Kurikulum kami direka dengan dua prinsip pedagogi utama:

  • pembelajaran berasaskan projek
  • kuiz kerap

Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang membangunkan 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 kukuh tentang pembangunan web.

🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!

Dengan memastikan kandungan selaras dengan projek, proses menjadi lebih menarik bagi pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, dipadankan dengan video dari koleksi video tutorial "Siri Permulaan ke: JavaScript", beberapa pengarangnya turut menyumbang kepada kurikulum ini.

Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar terhadap pembelajaran sesuatu topik, manakala kuiz kedua selepas kelas memastikan pengekalan lanjut. Kurikulum ini direka agar fleksibel dan menyeronokkan serta boleh diambil sepenuhnya atau sebahagian. Projek bermula dari kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu.

Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan kepada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik untuk melengkapkan kurikulum ini adalah mempelajari Node.js melalui koleksi video lain: "Siri Permulaan ke: Node.js".

Lawati Kod Etika dan panduan Penyumbang kami. Kami mengalu-alukan maklum balas membina anda!

🧭 Akses luar talian

Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan Docsify. Fork repositori ini, pasang Docsify pada mesin tempatan anda, dan kemudian di folder akar repositori ini, taip docsify serve. Laman web akan dihidangkan pada port 3000 di localhost anda: localhost:3000.

📘 PDF

PDF bagi semua pelajaran boleh didapati di sini.

🎒 Kursus Lain

Pasukan kami menghasilkan kursus lain! Semak:

LangChain

LangChain4j for Beginners LangChain.js for Beginners LangChain for Beginners

Azure / Edge / MCP / Agents

AZD for Beginners Edge AI for Beginners MCP for Beginners AI Agents for Beginners


Siri AI Generatif

Generative AI for Beginners Generative AI (.NET) Generative AI (Java) Generative AI (JavaScript)


Pembelajaran Teras

ML for Beginners Data Science for Beginners AI for Beginners Cybersecurity for Beginners Web Dev for Beginners IoT for Beginners XR Development for Beginners


Siri Copilot

Copilot for AI Paired Programming Copilot for C#/.NET Copilot Adventure

Mendapatkan Bantuan

Jika anda tersekat atau mempunyai sebarang soalan tentang membina aplikasi AI. Sertai para pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan ilmu dikongsi dengan bebas.

Microsoft Foundry Discord

Jika anda mempunyai maklum balas produk atau ralat semasa membina lawati:

Microsoft Foundry Developer Forum

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 ketepatan, sila ambil maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya hendaklah dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.