Web-Dev-For-Beginners/translations/tl

Web Development para sa mga Nagsisimula - Isang Kurikulum

Matutunan ang mga pangunahing kaalaman sa 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 terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Pagbutihin ang iyong mga kasanayan at i-optimize ang iyong pagkatuto gamit ang aming epektibong project-based pedagogy. Simulan ang iyong paglalakbay sa coding 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 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 makipagkita sa mga eksperto at kapwa developer

🌐 Multi-Language Support

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 Lokal?

Kasama sa repositoryong ito ang 50+ na pagsasalin ng wika na malaki ang dagdag sa laki ng ida-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'

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

Kung nais mong magkaroon ng karagdagang mga suportadong wika para sa pagsasalin, nakalista ito dito

🧑‍🎓 Estudyante ka ba?

Bisitahin ang Student Hub page kung saan makakahanap ka ng mga panimulang resources, Student packs, at pati mga paraan upang makakuha ng libreng voucher para sa sertipiko. Ito ang pahina na gusto mong i-bookmark at tingnan paminsan-minsan dahil nagpapalit-palit tayo ng nilalaman buwan-buwan.

📣 Paunawa - 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. Ito ay isang bagong hamon para sa iyo upang matapos gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang gumawa ng teksto kundi makatulong sa paggawa at pag-edit ng mga file, pagpapatakbo ng mga command, at marami pang iba.

📣 Paunawa - Bagong Proyekto na gagawin gamit ang Generative AI

May bagong AI Assistant project na idinagdag, tingnan ito sa proyekto

📣 Paunawa - Bagong Kurikulum tungkol sa Generative AI para sa JavaScript ang bagong inilabas

Huwag palampasin ang aming bagong Generative AI curriculum!

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

• Mga aralin na sumasaklaw mula sa mga batayan hanggang RAG.
• Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at ang aming companion app.
• Masaya at nakakatuwang naratibo, ikaw ay magta-time travel!

Bawat aralin ay may kasamang gawain na tapusin, isang knowledge check, at isang hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:

• Prompting at prompt engineering
• Pagbuo ng mga text at image app
• Search apps

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

🌱 Pagsisimula

Mga Guro, mayroon kaming ilang mga mungkahi kung paano gamitin ang kurikulum na ito. Ikalulugod naming makatanggap ng inyong feedback sa aming discussion forum!

Mga Mag-aaral, para sa bawat aralin, magsimula sa isang pre-lecture na pagsusulit at sundan ito sa pagbabasa ng materyal ng lektyur, pagtapos sa mga iba't ibang gawain, at pagsuri ng inyong pag-unawa sa post-lecture na pagsusulit.

Para palalimin ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase para sabay na magtrabaho sa mga proyekto! Inaanyayahan ang mga talakayan sa aming discussion forum kung saan ang aming mga moderator ay handang sagutin ang iyong mga tanong.

Para palawigin pa ang iyong edukasyon, mariin naming inirerekomenda ang pagtuklas sa Microsoft Learn para sa karagdagang mga materyales sa pag-aaral.

📋 Pag-set up ng iyong kapaligiran

Handa na ang development environment para sa kurikulum na ito! Sa pagsisimula mo, maaari mong piliing patakbuhin ang kurikulum sa isang Codespace (isang browser-based, hindi na kailangan mag-install na kapaligiran), o local sa iyong computer gamit ang isang text editor tulad ng Visual Studio Code.

Gumawa ng iyong repositoryo

Para madali mong maisave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click sa button na Use this template 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 isang Codespace

Sa iyong kopya ng repositoryong nilikha mo, i-click ang Code button at piliin ang Open with Codespaces. Lilikha ito ng bagong Codespace para sa iyong trabahuhin.

Pagpapatakbo ng kurikulum local sa iyong computer

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

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

1. I-clone ang iyong repositoryo sa iyong computer. Maaari mo itong gawin 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 iyong kinopya:

   git clone <your-repository-url>
   

2. Buksan ang folder sa Visual Studio Code. Maaari mong gawin ito sa pamamagitan ng pag-click sa File > Open Folder at pagpili sa folder na kaklone mo lang.

Inirerekomendang mga extension ng Visual Studio Code:

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

📂 Kasama sa bawat aralin:

• opsyonal na sketchnote
• opsyonal na karagdagang video
• pre-lesson warmup quiz
• nakasulat na aralin
• para sa mga araling proyekto, hakbang-hakbang na gabay kung paano buuin ang proyekto
• mga knowledge check
• isang hamon
• karagdagang babasahin
• asignatura
• post-lesson quiz

Isang paalala tungkol sa mga pagsusulit: Lahat ng pagsusulit ay nilalaman sa folder ng Quiz-app, 48 kabuuang pagsusulit na may tig-tatlong tanong bawat isa. Available ang mga ito dito; ang quiz app ay maaaring patakbuhin nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa quiz-app folder.

🗃️ Mga Aralin

	Pangalan ng Proyekto	Mga Konseptong Itinuro	Mga Layunin sa Pagkatuto	Kaugnay na Aralin	May-akda
01	Pagsisimula	Panimula sa Programming at Mga Kagamitan sa Industriya	Matutunan ang mga pangunahing pundasyon 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	Pagsisimula	Mga Batayan ng GitHub, kasama ang pagtatrabaho sa isang koponan	Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base	Intro to GitHub	Floor
03	Pagsisimula	Accessibility	Matutunan ang mga batayan ng web accessibility	Accessibility Fundamentals	Christopher
04	JS Basics	Mga Uri ng Data sa JavaScript	Ang 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 upang pamahalaan ang daloy ng lohika ng isang aplikasyon	Functions and Methods	Jasmine and Christopher
06	JS Basics	Paggawa ng mga Desisyon gamit ang JS	Matuto 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	Gamitin ang data gamit ang arrays at loops sa JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML sa Praktis	Bumuo ng HTML upang makalikha ng online terrarium, nakatuon sa pagbuo ng layout	Introduction to HTML	Jen
09	Terrarium	CSS sa Praktis	Bumuo ng CSS upang istilohan ang online terrarium, nakatuon sa mga batayan ng CSS kabilang ang paggawa ng pahina na tumutugon	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Bumuo ng JavaScript upang mag-fungsyon ang terrarium bilang isang drag/drop interface, nakatuon sa closures at DOM manipulation	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Bumuo ng Isang Typing Game	Matutunan kung paano gamitin ang mga event ng keyboard upang paandarin ang lohika ng iyong JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Paggawa sa mga Browser	Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at kung paano mag-scaffold ng mga unang elemento ng isang browser extension	About Browsers	Jen
13	Green Browser Extension	Pagbuo 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 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, pagganap ng web	Gamitin ang mga background process ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga optimisasyon upang mapabilis	Background Tasks and Performance	Jen
15	Space Game	Mas Advanced na Pagbuo ng Laro gamit ang JavaScript	Matuto 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	Pagguho sa canvas	Matuto tungkol sa Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen	Drawing to Canvas	Chris
17	Space Game	Paggalaw ng mga elemento sa paligid ng screen	Tuklasin kung paano nagkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API	Moving Elements Around	Chris
18	Space Game	Pag-detect ng collision	Pahintulutan ang mga elemento na magbanggaan at mag-react sa isa't isa gamit ang keypresses at magbigay ng cooldown function upang matiyak ang pagganap ng laro	Collision Detection	Chris
19	Space Game	Pagpapanatili ng puntos	Gawin ang mga kalkulasyon batay sa status ng laro at pagganap	Keeping Score	Chris
20	Space Game	Pagtatapos at muling pagsisimula ng laro	Matutunan ang tungkol sa pagtatapos at muling pagsisimula ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable values	The Ending Condition	Chris
21	Banking App	Mga HTML Template at Routing sa isang Web App	Matutunan kung paano lumikha ng scaffolding ng multipage website gamit ang routing at HTML template	HTML Templates and Routes	Yohan
22	Banking App	Bumuo ng Login at Registration Form	Matuto tungkol sa pagbuo ng mga form at paghawak ng mga validation routine	Forms	Yohan
23	Banking App	Mga Paraan ng Pagkuha at Paggamit ng Datos	Paano dumadaloy ang datos papasok at palabas ng iyong app, paano ito kunin, i-imbak, at alisin	Data	Yohan
24	Banking App	Mga Konsepto ng State Management	Matutunan kung paano hinahawakan ng iyong app ang state at kung paano ito pamahalaan programmatically	State Management	Yohan
25	Browser/VScode Code	Paggamit ng VScode	Matutunang Gumamit ng code editor	Use VScode Code Editor	Chris
26	AI Assistants	Paggamit ng AI	Matutong bumuo ng sariling AI assistant	AI Assistant project	Chris

🏫 Pedagohiya

Ang aming kurikulum ay dinisenyo batay sa dalawang pangunahing prinsipyo sa pagtuturo:

• pagkatuto batay sa proyekto
• madalas na mga pagsusulit

Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kagamitan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng praktikal na karanasan sa pamamagitan ng paggawa ng isang typing game, virtual terrarium, eco-friendly browser extension, laro gaya ng space invader, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pang-unawa sa pag-develop ng web.

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

Sa pamamagitan ng pagtiyak na ang nilalaman ay tugma sa mga proyekto, mas nagiging kawili-wili ang proseso para sa mga estudyante at mas napapalakas ang pag-alala sa mga konsepto. Sumulat din kami ng ilang panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng video mula sa koleksyon na "Beginners Series to: JavaScript", na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.

Bukod dito, isang mababang-pader na pagsusulit bago ang klase ang nagsisilbing intensyon ng estudyante sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagkatuto. Dinisenyo ang kurikulum na ito upang maging flexible at masaya, maaari itong kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalalim sa pagiging kumplikado hanggang sa pagtatapos ng 12-linggong yugto.

Habang sinasadya naming iwasan ang pagpapakilala ng JavaScript frameworks upang magpokus sa mga pangunahing kakayahan na kailangan bilang isang web developer bago gumamit ng framework, ang isang magandang susunod na hakbang sa pagtatapos ng kurikulum na ito ay ang matutunan ang 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. Malugod naming tinatanggap ang iyong mga konstruktibong puna!

🧭 Offline na pag-access

Maaari mong patakbuhin ang dokumentasyong ito nang offline gamit ang Docsify. I-fork ang repo, i-install ang Docsify sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang docsify serve. Ihahain ang website 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 ang:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Pagkuha ng Tulong

Kung ikaw ay natigil o may mga katanungan tungkol sa paggawa ng mga AI app. Sumali sa mga kapwa mag-aaral at mga may karanasang developer sa mga talakayan tungkol sa MCP. Ito ay isang suportadong komunidad kung saan malugod na tinatanggap ang mga tanong at malayang naibabahagi ang kaalaman.

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

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 na Co-op Translator. Bagamat nagsusumikap kami para sa katumpakan, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na impormasyon. Ang orihinal na dokumento sa kanyang sariling wika ang dapat ituring na pinakaawtoritatibong sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling-tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.