Web-Dev-For-Beginners/translations/tl

Web Development para sa mga Nagsisimula - Isang Kurikulum

Alamin ang mga pangunahing kaalaman sa web development gamit ang aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng mga terrarium, browser extension, at mga space game. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Palawakin ang iyong kasanayan at paghusayin ang iyong kaalaman gamit ang epektibong pedagogiya namin na batay sa proyekto. Simulan ang iyong paglalakbay sa coding ngayon!

Sumali sa Azure AI Foundry Discord Community

Sundin ang mga hakbang na ito para 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 makilala ang mga eksperto at ibang mga developer

🌐 Suporta para sa Maramihang Wika

Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko at Palaging 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 | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Mas gusto mo bang I-clone ito nang Lokal?

Kasama sa repository na ito ang 50+ na mga pagsasalin sa wika na malaki ang dagdag sa laki ng pag-download. Para i-clone nang walang mga pagsasalin, gamitin ang sparse checkout:

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'

Bibigyan ka nito ng lahat ng kailangan mo para matapos ang kurso nang mas mabilis ang pag-download.

Kung nais mo ng karagdagang suportadong mga wika ng pagsasalin ay nakalistang dito

🧑‍🎓 Estudyante ka ba?

Bisitahin ang Student Hub page kung saan makakakita ka ng mga panimulang resources, Student packs at maging mga paraan para makakuha ng libreng voucher para sa sertipiko. Ito ang pahinang gusto mong i-bookmark at tingnan paminsan-minsan habang nagpapalit kami ng nilalaman buwan-buwan.

📣 Anunsyo - Mga bagong hamon sa GitHub Copilot Agent mode na kailangang tapusin!

May bagong Hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Isang bagong hamon para sa iyo na gamitin ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, kaya nitong hindi lamang gumawa ng teksto kundi pati na maglikha at mag-edit ng mga file, magpatakbo ng mga utos, at marami pa.

📣 Anunsyo - Bagong Proyekto na gagawin gamit ang Generative AI

Bagong AI Assistant na proyekto lang ang idinagdag, tingnan ito project

📣 Anunsyo - Bagong Kurikulum sa Generative AI para sa JavaScript ay inilabas na

Huwag palampasin ang aming bagong Generative AI curriculum!

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

• Mga aralin na sumasaklaw mula sa mga batayan hanggang RAG.
• Makipag-ugnayan sa mga historikal na karakter gamit ang GenAI at aming kasamang app.
• Masaya at nakaka-enganyong kuwento, ikaw ay maglalakbay sa panahon!

Bawat aralin ay may kasamang takdang-aralin, pagsusulit sa kaalaman at hamon upang gabayan ka sa pag-aaral ng mga paksa gaya ng:

• Prompting at prompt engineering
• Pagbuo ng text at image app
• Mga search app

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

🌱 Pagsisimula

Mga Guro, nagbigay kami ng ilang mga mungkahi kung paano gamitin ang kurikulum na ito. Masaya kaming tanggapin ang inyong puna sa aming discussion forum!

Mga Nag-aaral, sa bawat aralin, magsimula sa isang pre-lecture quiz at sundan ito sa pagbasa ng materyal sa lektura, pagtapos sa iba't ibang gawain at pag-check ng iyong pagkaunawa gamit ang post-lecture quiz.

Para mapabuti ang iyong karanasan sa pag-aaral, kumonekta sa iyong mga kapwa nag-aaral upang magtulungan sa mga proyekto! Hinihikayat ang mga talakayan sa aming discussion forum kung saan ang aming mga moderator ay handang sumagot sa iyong mga tanong.

Para lalong mapalawak ang iyong edukasyon, lubos naming inirerekomenda ang pag-explore sa Microsoft Learn para sa mga karagdagang materyales sa pag-aaral.

📋 Pag-setup ng iyong kapaligiran

Ang kurikulum na ito ay may handang development environment! Sa pagsisimula mo, maaari mong piliin na patakbuhin ang kurikulum sa isang Codespace (isang browser-based na kapaligiran na hindi na kailangan ng install), o lokal sa iyong kompyuter gamit ang editor ng teksto tulad ng Visual Studio Code.

Gumawa ng iyong repositoryo

Para madali mong masave ang iyong mga gawain, inirerekomenda na gumawa ka ng sariling kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click ng button na Use this template sa itaas ng pahina. Ito ay lilikha ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum.

Sundin ang mga hakbang na ito:

1. I-Fork ang Repository: I-click ang button na "Fork" 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 Codespace

Sa kopya ng repositoryong ginawa mo, i-click ang button na Code at piliin ang Open with Codespaces. Ito ay lilikha ng bagong Codespace para sa iyong trabaho.

Pagpapatakbo ng kurikulum lokal sa iyong kompyuter

Para patakbuhin ang kurikulum na ito nang lokal sa iyong kompyuter, kakailanganin mo ng isang text editor, browser, at command line tool. Ang unang aralin namin, Panimula sa Programming Languages at Tools of the Trade, ay gagabay sa iyo sa iba't ibang pagpipilian para sa bawat tool na ito upang mapili mo ang pinakaangkop sa iyo.

Inirerekomenda namin ang paggamit ng Visual Studio Code bilang iyong editor, na may kasamang built-in na Terminal. Maaari mong i-download ang Visual Studio Code dito.

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

   CodeSpace Pagkatapos, buksan ang Terminal sa loob ng Visual Studio Code at patakbuhin ang sumusunod na utos, 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 kaklone mo lang.

Inirerekomendang Mga Extension ng Visual Studio Code:

• Live Server - upang makita ang preview ng mga pahina ng HTML sa loob mismo ng Visual Studio Code
• Copilot - para tulungan kang mas mabilis magsulat ng code

📂 Bawat aralin ay may kasamang:

• opsyonal na sketchnote
• opsyonal na karagdagang video
• pre-lesson warmup quiz
• nakasulat na aralin
• para sa mga proyekto, sunud-sunod na gabay kung paano itatayo ang proyekto
• pagsusuri ng kaalaman
• isang hamon
• karagdagang babasahin
• takdang-aralin
• post-lesson quiz

Isang tala tungkol sa mga pagsusulit: Lahat ng pagsusulit ay nasa Quiz-app na folder, may 48 kabuuang pagsusulit na tig-3 tanong bawat isa. Available ang mga ito dito, ang quiz app ay maaaring patakbuhin nang lokal o ma-deploy sa Azure; sundin ang mga instruksyon sa quiz-app na folder.

🗃️ Mga Aralin

	Pangalan ng Proyekto	Mga Konseptong Itinuro	Mga Layunin sa Pagkatuto	Nakalink na Aralin	May-akda
01	Getting Started	Panimula sa Programming at Mga Kasangkapan ng Propesyon	Matutunan ang mga batayang pundasyon sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Mga Pangunahing Kaalaman sa GitHub, kasama ang pagtatrabaho sa koponan	Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base	Intro to GitHub	Floor
03	Getting Started	Accessibility	Matutunan ang mga batayan ng web accessibility	Accessibility Fundamentals	Christopher
04	JS Basics	Mga Uri ng Data sa JavaScript	Mga batayan ng mga uri ng data sa JavaScript	Data Types	Jasmine
05	JS Basics	Mga Function at Method	Matutunan ang tungkol sa mga function at method para pamahalaan ang daloy ng lohika ng isang aplikasyon	Functions and Methods	Jasmine at Christopher
06	JS Basics	Paggawa ng Mga Desisyon gamit ang JS	Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon	Making Decisions	Jasmine
07	JS Basics	Arrays at Loops	Gumamit ng data gamit ang arrays at loops sa JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML sa Praktis	Gumawa ng HTML para makagawa ng online terrarium, nakatuon sa paggawa ng layout	Introduction to HTML	Jen
09	Terrarium	CSS sa Praktis	Gumawa ng CSS para istilohan ang online terrarium, nakatuon sa mga batayan ng CSS kabilang ang paggawa ng page na responsive	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Gumawa ng JavaScript upang pagandahin ang terrarium bilang isang drag/drop interface, na nakatuon sa closures at DOM manipulation	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Gumawa ng Typing Game	Matutunan kung paano gamitin ang mga keyboard events para patakbuhin ang 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 kasaysayan nito, at paano magsimula sa mga unang elemento ng isang browser extension	About Browsers	Jen
13	Green Browser Extension	Paggawa ng form, pagtawag ng API at pag-iimbak ng variables sa local storage	Gumawa ng mga elemento ng JavaScript ng iyong browser extension upang tumawag ng API gamit ang mga variable na nakaimbak sa local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Mga background process sa browser, performance ng web	Gamitin ang mga background process ng browser upang pamahalaan ang icon ng extension; matutunan ang web performance at ilang optimizations	Background Tasks and Performance	Jen
15	Space Game	Mas Advanced na Pag-develop ng Game gamit ang JavaScript	Matutunan ang tungkol sa Inheritance gamit ang Classes at Composition pati na ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro	Introduction to Advanced Game Development	Chris
16	Space Game	Pag-drawing sa canvas	Matutunan ang Canvas API, na ginagamit para gumuhit ng mga elemento sa screen	Drawing to Canvas	Chris
17	Space Game	Paggalaw ng mga elemento sa paligid ng screen	Alamin kung paano makakakuha ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API	Moving Elements Around	Chris
18	Space Game	Pagtuklas ng pagbangga	Pahintulutan ang mga elemento na dumagit at tumugon sa isa't isa gamit ang keypresses at magbigay ng cooldown function para sa performance ng laro	Collision Detection	Chris
19	Space Game	Pagpapanatili ng score	Isagawa ang mga kalkulasyon ng math base sa katayuan at performance ng laro	Keeping Score	Chris
20	Space Game	Pagtatapos at pagrere-start ng laro	Matutunan ang tungkol sa pagtatapos at pagrere-start ng laro, kabilang ang paglilinis ng mga asset at pagrereset ng mga variable na halaga	The Ending Condition	Chris
21	Banking App	HTML Templates at Routes sa isang Web App	Matutunan kung paano lumikha ng istruktura ng isang multipage website gamit ang routing at HTML templates	HTML Templates and Routes	Yohan
22	Banking App	Gumawa ng Login at Registration Form	Matutunan ang paggawa ng mga form at paghawak ng validation routines	Forms	Yohan
23	Banking App	Mga Paraan ng Pagkuha at Paggamit ng Data	Paano dumadaloy ang data sa iyong app, paano ito kunin, iimbak, at alisin	Data	Yohan
24	Banking App	Mga Konsepto ng Pamamahala ng Estado	Matutunan kung paano pinananatili ng iyong app ang estado at paano ito pamahalaan programmatically	State Management	Yohan
25	Browser/VScode Code	Paggamit ng VScode	Matutunan kung paano Gumamit ng code editor	Use VScode Code Editor	Chris
26	AI Assistants	Paggamit ng AI	Matutunan kung paano gumawa ng sarili mong AI assistant	AI Assistant project	Chris

🏫 Pedagohiya

Ang aming kurikulum ay dinisenyo gamit ang dalawang mahahalagang prinsipyo sa pagtuturo:

• pagkatuto base sa proyekto
• madalas na pagsusulit

Itinuro sa programa ang 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 praktikal na karanasan sa paggawa ng isang typing game, virtual na terrarium, eco-friendly na browser extension, space-invader-style game, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga mag-aaral ng matatag na pag-unawa sa web development.

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

Sa pagtitiyak na ang nilalaman ay naka-align sa mga proyekto, mas nagiging kawili-wili ang proseso para sa mga mag-aaral at mapapalakas ang pag-alala sa mga konsepto. Sumulat din kami ng ilang panimulang aralin sa JavaScript basics upang ipakilala ang mga konsepto, na sinamahan ng isang video mula sa koleksyon ng mga tutorial na video na "Beginners Series to: JavaScript", na ang ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.

Bukod dito, ang isang low-stakes quiz bago ang klase ay nagtatakda ng intensiyon ng estudyante sa pagkatuto ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagtitiyak na lalo pang maalala ang materyal. Ang kurikulum na ito ay ginawa upang maging flexible at masaya at maaaring kunin nang buo o paunti-unti. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalawak hanggang sa katapusan ng 12-linggong panahon.

Habang sinadyang iniiwasan naming ipakilala ang mga JavaScript framework upang magpokus sa mga pangunahing kasanayan na kailangan bilang web developer bago tumanggap ng framework, isang magandang susunod na hakbang matapos 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 mga gabay sa Contributing. Malugod naming tinatanggap ang iyong makabuluhang puna!

🧭 Offline access

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

📘 PDF

Ang PDF ng lahat ng mga aralin ay matatagpuan dito.

🎒 Iba Pang Kurso

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

LangChain

---

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Pagkuha ng Tulong

Kung ikaw ay nahihirapan o may mga tanong tungkol sa paggawa ng mga AI app. Sumali sa kapwa mga nag-aaral at mga bihasang developer sa mga talakayan tungkol sa MCP. Isa itong sumusuportang komunidad kung saan malugod ang pagtatanong at malayang pagbabahagi ng kaalaman.

Kung may feedback ka sa produkto o mga error habang nagbuo, bisitahin:

Lisensya

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

---

Paunawa: Ang dokumentong ito ay isinalin gamit ang serbisyo ng AI translation na Co-op Translator. Bagaman aming sinisikap ang pagiging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na impormasyon. Ang orihinal na dokumento sa katutubong wika nito ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng salin na ito.