Web-Dev-For-Beginners/translations/tl

Web Development para sa mga Baguhan - Isang Kurikulum

Matutunan ang mga pangunahing kaalaman sa web development gamit ang aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Ang bawat isa sa 24 na aralin ay sumasaklaw sa JavaScript, CSS, at HTML sa pamamagitan ng mga praktikal na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at mga praktikal na gawain. Paunlarin ang iyong kakayahan at pagbutihin ang iyong kaalaman gamit ang aming epektibong project-based na pamamaraan. Simulan ang iyong coding journey ngayon!

Sumali sa Azure AI Foundry Discord Community

Sundin ang mga hakbang na ito upang makapagsimula gamit ang mga resources na ito:

1. I-Fork ang Repository: I-click ang
2. I-Clone ang Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Sumali sa Azure AI Foundry Discord at makipagkita sa mga eksperto at kapwa developer

🌐 Suporta sa Iba't Ibang Wika

Sinusuportahan sa pamamagitan ng GitHub Action (Automated at Laging Napapanahon)

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 | Korean | Lithuanian | Malay | Marathi | Nepali | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Kung nais mong magkaroon ng karagdagang mga pagsasalin, ang mga sinusuportahang wika ay nakalista dito

🧑‍🎓 Estudyante ka ba?

Bisitahin ang Student Hub page kung saan makakahanap ka ng mga resources para sa mga baguhan, Student packs, at maging mga paraan upang makakuha ng libreng certificate voucher. Ito ang pahinang dapat mong i-bookmark at balikan paminsan-minsan dahil nagbabago ang nilalaman buwan-buwan.

📣 Anunsyo - Mga Bagong Hamon gamit ang GitHub Copilot Agent mode!

May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay bagong hamon na maaari mong tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, kaya nitong hindi lang mag-generate ng text kundi pati gumawa at mag-edit ng mga file, magpatakbo ng mga command, at marami pa.

📣 Anunsyo - Bagong Proyekto gamit ang Generative AI

Bagong AI Assistant project ang idinagdag, tingnan ito project

📣 Anunsyo - Bagong Kurikulum sa Generative AI para sa JavaScript

Huwag palampasin ang aming bagong Generative AI curriculum!

Bisitahin ang https://aka.ms/genai-js-course upang makapagsimula!

• Mga aralin mula sa mga pangunahing kaalaman hanggang sa RAG.
• Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at ang aming companion app.
• Masaya at nakaka-engganyong kwento, magta-time travel ka!

Ang bawat aralin ay may kasamang gawain na dapat tapusin, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:

• Prompting at prompt engineering
• Text at image app generation
• Search apps

Bisitahin ang https://aka.ms/genai-js-course upang makapagsimula!

🌱 Pagsisimula

Mga Guro, nagdagdag kami ng ilang mungkahi kung paano gamitin ang kurikulum na ito. Gusto naming marinig ang inyong feedback sa aming discussion forum!

Mga Mag-aaral, para sa bawat aralin, magsimula sa pre-lecture quiz at sundan ito sa pagbabasa ng lecture material, pagtapos ng iba't ibang aktibidad, at suriin ang inyong kaalaman gamit ang post-lecture quiz.

Upang mapahusay ang inyong karanasan sa pag-aaral, makipag-ugnayan sa inyong mga kapwa mag-aaral upang magtulungan sa mga proyekto! Ang mga talakayan ay hinihikayat sa aming discussion forum kung saan ang aming team ng mga moderator ay handang sagutin ang inyong mga tanong.

Upang higit pang mapalawak ang inyong kaalaman, lubos naming inirerekomenda ang pag-explore sa Microsoft Learn para sa karagdagang mga materyales sa pag-aaral.

📋 Pagsasaayos ng iyong kapaligiran

Ang kurikulum na ito ay may handang development environment! Sa pagsisimula, maaari kang pumili na patakbuhin ang kurikulum sa isang Codespace (isang browser-based, walang kailangang i-install na environment), o lokal sa iyong computer gamit ang isang text editor tulad ng Visual Studio Code.

Gumawa ng iyong repository

Upang madali mong mai-save ang iyong trabaho, inirerekomenda na gumawa ka ng sariling kopya ng repository na ito. Magagawa mo ito sa pamamagitan ng pag-click sa Use this template na button sa itaas ng pahina. Ito ay lilikha ng bagong repository sa iyong GitHub account na may kopya ng kurikulum.

Sundin ang mga hakbang na ito:

1. I-Fork ang Repository: I-click ang "Fork" button sa kanang itaas na bahagi ng pahinang ito.
2. I-Clone ang Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Pagpapatakbo ng kurikulum sa isang Codespace

Sa iyong kopya ng repository na iyong ginawa, i-click ang Code button at piliin ang Open with Codespaces. Ito ay lilikha ng bagong Codespace para sa iyo upang magtrabaho.

Pagpapatakbo ng kurikulum nang lokal sa iyong computer

Upang patakbuhin ang kurikulum na ito nang lokal sa iyong computer, kakailanganin mo ng text editor, browser, at command line tool. Ang aming unang aralin, Introduction to Programming Languages and Tools of the Trade, ay magpapaliwanag ng iba't ibang opsyon para sa bawat isa sa mga tool na ito upang makapili ka ng pinakaangkop para sa iyo.

Ang aming rekomendasyon ay gamitin ang Visual Studio Code bilang iyong editor, na mayroon ding built-in na Terminal. Maaari mong i-download ang Visual Studio Code dito.

1. I-clone ang iyong repository sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa Code button at pagkopya ng URL:

   CodeSpace

   Pagkatapos, buksan ang Terminal sa loob ng Visual Studio Code at patakbuhin ang sumusunod na command, palitan ang <your-repository-url> ng URL na iyong kinopya:

   git clone <your-repository-url>
   

2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa File > Open Folder at piliin ang folder na iyong na-clone.

Inirerekomendang mga extension para sa Visual Studio Code:

• Live Server - upang ma-preview ang mga HTML page sa loob ng Visual Studio Code
• Copilot - para tulungan kang magsulat ng code nang mas mabilis

📂 Bawat aralin ay naglalaman ng:

• opsyonal na sketchnote
• opsyonal na karagdagang video
• paunang pagsusulit bago ang aralin
• nakasulat na aralin
• para sa mga araling nakabatay sa proyekto, mga gabay na hakbang-hakbang kung paano buuin ang proyekto
• pagsusuri ng kaalaman
• isang hamon
• karagdagang babasahin
• takdang-aralin
• pagsusulit pagkatapos ng aralin

Tungkol sa mga pagsusulit: Ang lahat ng pagsusulit ay nasa folder ng Quiz-app, kabuuang 48 pagsusulit na may tig-tatlong tanong bawat isa. Makukuha ang mga ito dito at maaaring patakbuhin ang quiz app nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa folder na quiz-app.

🗃️ Mga Aralin

	Pangalan ng Proyekto	Mga Konseptong Itinuturo	Mga Layunin sa Pagkatuto	Nakakabit na Aralin	May-akda
01	Pagsisimula	Panimula sa Programming at Mga Kasangkapan sa Trabaho	Matutunan ang mga pangunahing pundasyon sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer sa kanilang trabaho	Panimula sa Programming Languages at Mga Kasangkapan sa Trabaho	Jasmine
02	Pagsisimula	Mga Pangunahing Kaalaman sa GitHub, kabilang ang pakikipagtulungan sa isang koponan	Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base	Panimula sa GitHub	Floor
03	Pagsisimula	Accessibility	Matutunan ang mga pangunahing kaalaman sa web accessibility	Mga Pangunahing Kaalaman sa Accessibility	Christopher
04	Mga Pangunahing Kaalaman sa JS	Mga Uri ng Data sa JavaScript	Ang mga pangunahing kaalaman sa mga uri ng data sa JavaScript	Mga Uri ng Data	Jasmine
05	Mga Pangunahing Kaalaman sa JS	Mga Function at Method	Matutunan ang tungkol sa mga function at method upang pamahalaan ang daloy ng lohika ng isang application	Mga Function at Method	Jasmine at Christopher
06	Mga Pangunahing Kaalaman sa JS	Paggawa ng Desisyon gamit ang JS	Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon	Paggawa ng Desisyon	Jasmine
07	Mga Pangunahing Kaalaman sa JS	Mga Array at Loop	Magtrabaho gamit ang data gamit ang mga array at loop sa JavaScript	Mga Array at Loop	Jasmine
08	Terrarium	HTML sa Praktika	Bumuo ng HTML upang lumikha ng isang online na terrarium, na nakatuon sa paggawa ng layout	Panimula sa HTML	Jen
09	Terrarium	CSS sa Praktika	Bumuo ng CSS upang i-style ang online na terrarium, na nakatuon sa mga pangunahing kaalaman sa CSS kabilang ang paggawa ng page na responsive	Panimula sa CSS	Jen
10	Terrarium	Mga JavaScript Closures, DOM Manipulation	Bumuo ng JavaScript upang gawing drag/drop interface ang terrarium, na nakatuon sa closures at DOM manipulation	Mga JavaScript Closures, DOM Manipulation	Jen
11	Typing Game	Bumuo ng Typing Game	Matutunan kung paano gamitin ang mga keyboard event upang magmaneho ng lohika ng iyong JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Paggawa gamit ang Mga Browser	Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano i-scaffold ang mga unang elemento ng isang browser extension	Tungkol sa Mga Browser	Jen
13	Green Browser Extension	Paggawa ng form, pagtawag sa API at pag-iimbak ng mga variable sa local storage	Bumuo ng mga elemento ng JavaScript ng iyong browser extension upang tumawag sa API gamit ang mga variable na nakaimbak sa local storage	Mga API, Form, at Local Storage	Jen
14	Green Browser Extension	Mga proseso sa background sa browser, web performance	Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; matutunan ang tungkol sa web performance at ilang mga optimization upang mapabuti	Mga Background Task at Performance	Jen
15	Space Game	Mas Advanced na Game Development gamit ang JavaScript	Matutunan ang tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro	Panimula sa Advanced Game Development	Chris
16	Space Game	Pag-drawing sa canvas	Matutunan ang tungkol sa Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen	Pag-drawing sa Canvas	Chris
17	Space Game	Paggalaw ng mga elemento sa screen	Tuklasin kung paano makakakuha ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API	Paggalaw ng mga Elemento	Chris
18	Space Game	Pagtukoy ng banggaan	Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function upang matiyak ang performance ng laro	Pagtukoy ng Banggaan	Chris
19	Space Game	Pagpapanatili ng score	Gumawa ng mga kalkulasyon sa matematika batay sa status at performance ng laro	Pagpapanatili ng Score	Chris
20	Space Game	Pagtatapos at pag-restart ng laro	Matutunan ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable	Kondisyon ng Pagtatapos	Chris
21	Banking App	Mga HTML Template at Route sa Web App	Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at HTML template	Mga HTML Template at Route	Yohan
22	Banking App	Bumuo ng Login at Registration Form	Matutunan ang tungkol sa paggawa ng mga form at paghawak ng mga validation routine	Mga Form	Yohan
23	Banking App	Mga Paraan ng Pagkuha at Paggamit ng Data	Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, iimbak, at itapon	Data	Yohan
24	Banking App	Mga Konsepto ng State Management	Matutunan kung paano pinapanatili ng iyong app ang estado at kung paano ito pamahalaan sa programmatically	State Management	Yohan
25	Browser/VScode Code	Paggawa gamit ang VScode	Matutunan kung paano gamitin ang code editor	Gamitin ang VScode Code Editor	Chris
26	AI Assistants	Paggawa gamit ang AI	Matutunan kung paano bumuo ng sarili mong AI assistant	AI Assistant project	Chris

🏫 Pedagohiya

Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyo ng pedagohiya:

• pagkatuto na nakabatay sa proyekto
• madalas na pagsusulit

Ang programa ay nagtuturo ng mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ang mga mag-aaral ng pagkakataon na magkaroon ng hands-on na karanasan sa pamamagitan ng paggawa ng typing game, virtual terrarium, eco-friendly browser extension, space-invader-style na laro, at banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga mag-aaral ng matibay na pag-unawa sa web development.

🎓 Maaari mong kunin ang unang ilang aralin sa kurikulum na ito bilang isang Learn Path sa Microsoft Learn!

Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay nagiging mas nakakaengganyo para sa mga mag-aaral at ang pagkatuto ng mga konsepto ay mas mapapalakas. Nagsulat din kami ng ilang mga panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa isang video mula sa "Beginners Series to: JavaScript" na koleksyon ng mga video tutorial, ang ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.

Bukod dito, ang isang mababang-panganib na pagsusulit bago ang klase ay nagtatakda ng intensyon ng mag-aaral patungo sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay mas nagpapalakas ng pagkatuto. Ang kurikulum na ito ay dinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong siklo.

Habang sinadya naming iwasan ang pagpapakilala ng mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kinakailangan bilang isang web developer bago magpatibay ng framework, ang isang magandang susunod na hakbang pagkatapos makumpleto ang kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "Beginner Series to: Node.js".

Bisitahin ang aming Code of Conduct at Contributing na mga alituntunin. Malugod naming tinatanggap ang iyong nakabubuong feedback!

🧭 Offline na access

Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang Docsify. I-fork ang repo na ito, i-install ang Docsify sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang docsify serve. Ang website ay magsisilbi sa port 3000 sa iyong localhost: localhost:3000.

📘 PDF

Ang PDF ng lahat ng mga aralin ay makikita dito.

🎒 Iba Pang Kurso

Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan:

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Pangunahing Pag-aaral

---

Copilot Series

Pagtatanong ng Tulong

Kung ikaw ay nahihirapan o may mga katanungan tungkol sa paggawa ng mga AI apps, sumali sa mga kapwa mag-aaral at mga bihasang developer sa mga talakayan tungkol sa MCP. Isa itong suportadong komunidad kung saan malugod na tinatanggap ang mga tanong at malayang ibinabahagi ang kaalaman.

Kung mayroon kang feedback sa produkto o mga error habang gumagawa, bisitahin:

Lisensya

Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang LICENSE file para sa karagdagang impormasyon.

---

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service Co-op Translator. Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.