Web-Dev-For-Beginners/translations/tl

Web Development para sa mga Nagsisimula - Isang Kurikulum

Matutunan ang mga pundasyon ng web development sa 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 extensions, at mga laro sa kalawakan. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga asignatura. Paunlarin ang iyong mga kasanayan at pahusayin ang pagkatuto gamit ang aming epektibong metodolohiyang nakabatay 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 mapagkukunang ito:

1. I-fork ang Repositoryo: I-click ang
2. I-clone ang Repositoryo: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Sumali sa Azure AI Foundry Discord at makipagkilala sa mga eksperto at kapwa 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 mag-clone nang lokal?

Kasama sa repositoryo na ito ang mahigit 50 mga pagsasalin ng wika na malaki ang dagdag sa laki ng download. Para mag-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'

Makukuha mo ang lahat ng kailangan mo para tapusin ang kurso nang mas mabilis mag-download.

Kung nais mong magkaroon pa ng ibang suporta sa mga wika ng pagsasalin, nakalista ito dito

🧑‍🎓 Estudyante ka ba?

Bisitahin ang Student Hub page kung saan makakakita ka ng mga mapagkukunang pambaguhan, Student packs at pati mga paraan para makakuha ng libreng voucher ng sertipiko. Ito ang pahina na gusto mong i-bookmark at paminsan-minsan tingnan dahil buwan-buwan ay pinalitan natin ang nilalaman.

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

May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Isa itong bagong hamon para sa iyo na tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang gumawa ng teksto kundi pati lumikha at mag-edit ng mga file, magpatakbo ng mga utos at marami pa.

📣 Anunsyo - Bagong Proyekto gamit ang Generative AI

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

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

Huwag palampasin ang aming bagong Generative AI kurikulum!

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

• Mga aralin mula sa mga batayan hanggang sa RAG.
• Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at aming companion app.
• Masaya at nakakaaliw na kuwento, tulad ng paglalakbay sa panahon!

Bawat aralin ay may nakalakip na asignatura, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:

• Pag-prompt 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, may nagdagdag kaming ilang suhestiyon kung paano gamitin ang kurikulum na ito. Nais naming marinig ang inyong puna sa aming discussion forum!

Mga Nag-aaral, para sa bawat aralin, magsimula sa pre-lecture quiz at sundan ito sa pagbabasa ng materyal ng lektura, pagtapos ng mga gawain, at pagsusuri ng iyong pag-unawa gamit ang post-lecture quiz.

Para mapabuti ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase upang magtulungan sa mga proyekto! Inirerekomenda ang mga talakayan sa aming discussion forum kung saan naroon ang aming mga moderator na handang sagutin ang iyong mga tanong.

Para lalo pang paunlarin ang iyong edukasyon, mariing inirerekumenda namin ang pag-explore sa Microsoft Learn para sa karagdagang mga materyales sa pag-aaral.

📋 Pagsasaayos ng iyong kapaligiran

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

Gumawa ng iyong repositoryo

Para madaling masave ang iyong mga gawa, inirerekomenda na gumawa ka ng sariling kopya ng repositoryo na ito. Magagawa mo ito sa pamamagitan ng pag-click sa Use this template na button sa itaas ng pahina. Lilikha ito ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum.

Sundin ang mga hakbang na ito:

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

Pagpapatakbo ng kurikulum sa Codespace

Sa iyong kopya ng repositoryo na ginawa mo, i-click ang Code button at piliin ang Open with Codespaces. Lilikha ito ng bagong Codespace para magtrabaho ka.

Pagpapatakbo ng kurikulum lokal sa iyong kompyuter

Para patakbuhin ang kurikulum na ito lokal sa iyong kompyuter, kailangan mo ng text editor, browser, at command line tool. Ang unang aralin namin, Introduction to Programming Languages and Tools of the Trade, ay gagabay sa iyo sa iba't ibang mga opsyon para sa mga ito upang pumili ka ng angkop sa iyo.

Inirerekomenda naming gamitin ang Visual Studio Code bilang editor mo, na may built-in na Terminal. Maaari mong i-download ang Visual Studio Code dito.

1. I-clone ang iyong repositoryo sa iyong kompyuter. 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 utos, palitan ang <your-repository-url> ng URL na kakopya mo lang:

   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 Visual Studio Code extensions:

• Live Server - para makita ang preview ng mga pahina ng HTML sa loob ng Visual Studio Code
• Copilot - upang makatulong sa mas mabilis na pagsusulat ng code

📂 Kasama sa bawat aralin:

• opsyonal na sketchnote
• opsyonal na karagdagang video
• pre-lesson warmup quiz
• nakasulat na aralin
• para sa mga aralin na nakabase sa proyekto, mga gabay hakbang-hakbang sa kung paano buuin ang proyekto
• pagsubok sa kaalaman
• isang hamon
• karagdagang pagbasa
• takdang-aralin
• post-lesson quiz

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

🗃️ Mga Aralin

	Pangalan ng Proyekto	Mga Konseptong Itinuturo	Mga Layunin sa Pagkatuto	Nakaugnay na Aralin	May-akda
01	Getting Started	Introduksyon sa Programming at Mga Kagamitan sa Trabaho	Matutunan ang mga pundamental na kaalaman sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Mga Batayan ng 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	Matuto tungkol sa mga function at method para pamahalaan ang daloy ng lohika ng 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 pamamaraan sa 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	Buoin ang HTML upang makagawa ng online terrarium, na nakatuon sa paggawa ng layout	Introduction to HTML	Jen
09	Terrarium	CSS sa Praktis	Buoin ang CSS upang istayl ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng pahina na responsive	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Buoin ang JavaScript upang gumana ang terrarium bilang 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 event upang patakbuhin ang lohika ng iyong JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Paggamit ng Browsers	Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at paano gumawa ng unang mga elemento ng isang browser extension	About Browsers	Jen
13	Green Browser Extension	Pagbuo ng form, pagtawag ng API at pagtatago ng variables sa local storage	Buoin ang mga JavaScript na elemento ng iyong browser extension para tumawag ng API gamit ang mga variable na nakaimbak sa local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Mga proseso sa background ng browser, web performance	Gamitin ang mga proseso sa background ng browser para pamahalaan ang icon ng extension; alamin ang tungkol sa web performance at ilang mga optimisasyon para mapahusay ito	Background Tasks and Performance	Jen
15	Space Game	Mas Advanced na Pag-develop ng Laro 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	Introduction to Advanced Game Development	Chris
16	Space Game	Pagguuhit sa canvas	Matutunan ang Canvas API, na ginagamit para mag-draw ng mga elemento sa screen	Drawing to Canvas	Chris
17	Space Game	Paggalaw ng mga elemento sa paligid ng screen	Tuklasin kung paano magkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API	Moving Elements Around	Chris
18	Space Game	Pagtuklas ng banggaan	Pahintulutan ang mga elemento na magbanggaan at mag-react sa isa't isa gamit ang mga keypress at magbigay ng cooldown function upang mapanatili ang performance ng laro	Collision Detection	Chris
19	Space Game	Pagpapanatili ng iskor	Gumawa ng mga kalkulasyon base sa status at performance ng laro	Keeping Score	Chris
20	Space Game	Pagtatapos at pagsisimula muli ng laro	Matutunan ang tungkol sa pagtatapos at pagsisimula muli ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable	The Ending Condition	Chris
21	Banking App	Mga HTML Template at Ruta sa Web App	Matutunan kung paano gumawa ng balangkas ng arkitektura ng multipage website gamit ang routing at mga HTML template	HTML Templates and Routes	Yohan
22	Banking App	Gumawa ng Form para sa Pag-login at Pagrehistro	Matuto tungkol sa paggawa ng mga form at paghawak ng mga routine sa validation	Forms	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, itago, at itapon	Data	Yohan
24	Banking App	Mga Konsepto ng State Management	Matuto kung paano nakahawak ang iyong app ng estado at paano ito pamahalaan nang programatiko	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 idinisenyo gamit ang dalawang pangunahing prinsipyo sa pedagogiya:

• pagkatuto batay sa proyekto
• madalas na pagsusulit

Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong mga kagamitan at teknik na ginagamit ng mga web developer sa kasalukuyan. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng praktikal na karanasan sa paggawa ng isang typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay 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 pamamagitan ng pagtitiyak na ang nilalaman ay nakaayon sa mga proyekto, nagiging mas kaakit-akit ang proseso para sa mga estudyante at mas mapapalalim ang pag-alala ng mga konsepto. Sumulat din kami ng ilang panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na pinagsama sa isang video mula sa koleksyon ng mga video tutorial na "Beginners Series to: JavaScript", na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.

Bukod dito, ang isang low-stakes na pagsusulit bago ang klase ay nagtatakda ng intensyon ng estudyante sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pag-alala. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Nagsisimula sa maliit ang mga proyekto at nagiging mas kumplikado habang papalapit ang pagtatapos ng 12-linggong siklo.

Habang sinadyang iniiwasan naming ipakilala ang mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kailangan bilang web developer bago gumamit ng framework, isang magandang susunod na hakbang sa pagtatapos ng 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 patnubay. Tinatanggap namin ang iyong konstruktibong puna!

🧭 Offline access

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

📘 PDF

Isang PDF ng lahat ng mga aralin ay matatagpuan dito.

🎒 Iba Pang Mga Kurso

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

LangChain

---

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Pangunahing Pag-aaral

---

Copilot Series

Pagkuha ng Tulong

Kung ikaw ay natigil o may mga tanong tungkol sa paggawa ng AI apps. Sumali sa mga kapwa nag-aaral at may karanasang mga developer sa mga talakayan tungkol sa MCP. Ito ay isang sumusuportang komunidad kung saan malugod na tinatanggap ang mga tanong at malayang ibinabahagi ang kaalaman.

Kung mayroon kang puna tungkol sa produkto o mga error habang nagtatayo, bisitahin:

Lisensya

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

---

Paalala: Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat nagsusumikap kaming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o kamalian. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.