Web-Dev-For-Beginners/translations/tl

Pagsisimula sa Web Development - 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 terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na gawain. Pahusayin ang iyong mga kakayahan at i-optimize ang pag-alala ng kaalaman gamit ang aming epektibong project-based pedagogy. Simulan ang iyong paglalakbay sa pag-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 kapwa mga developer

🌐 Suporta para sa Maramihang Wika

Sinusuportahan sa pamamagitan ng GitHub Action (Automated 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 Locally?

Ang repository na ito ay naglalaman ng 50+ na pagsasalin sa wika na nagpapalaki ng laki ng pag-download. Para mag-clone nang walang mga pagsasalin, gamitin ang 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"

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

Kung nais mo ng karagdagang mga suportadong wika ng pagsasalin ay naka-lista dito

🧑‍🎓 Estudyante ka ba?

Bisitahin ang Student Hub page kung saan makikita mo ang mga panimulang resources, Student packs at pati na rin ang mga paraan para makakuha ng libreng certificate voucher. Ito ang pahina na dapat mong i-bookmark at balikan paminsan-minsan dahil buwan-buwan naming pinapalitan ang mga nilalaman.

📣 Anunsyo - Bagong GitHub Copilot Agent mode challenges na dapat tapusin!

May bagong Challenge na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay isang 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 bumuo ng teksto kundi lumikha at mag-edit ng mga file, magpatakbo ng mga command at marami pang iba.

📣 Anunsyo - Bagong Proyekto na gagawin gamit ang Generative AI

Kamakailan ay nadagdag ang bagong AI Assistant project, tingnan ito sa proyekto

📣 Anunsyo - Bagong Kurikulum sa Generative AI para sa JavaScript ay bagong 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 sa RAG.
• Makipag-ugnayan sa mga makasaysayang tauhan gamit ang GenAI at ang kasama naming app.
• Masaya at nakakaaliw na kwento, maglalakbay ka sa panahon!

Bawat aralin ay may kasamang gawain na dapat tapusin, pagsusulit sa kaalaman at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:

• Pagbuo ng prompt at prompt engineering
• Pagbuo ng apps para sa teksto at larawan
• Search apps

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

🌱 Paano Magsimula

Guro, mayroong kaming ilang mga mungkahi kung paano gamitin ang kurikulum na ito. Masaya kaming marinig ang iyong puna sa aming discussion forum!

Mga Mag-aaral, sa bawat aralin, simulan sa isang pre-lecture quiz at sundan ito sa pagbasa ng lecture material, pagtapos ng iba't ibang mga aktibidad at pagtsek ng iyong pag-unawa gamit ang post-lecture quiz.

Para mapahusay ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kapwa mag-aaral upang magtrabaho sa mga proyekto nang magkakasama! Ang mga diskusyon ay hinihikayat sa aming discussion forum kung saan ang aming mga moderator ay nasa handang sumagot sa iyong mga tanong.

Para lalong mapalawak ang iyong edukasyon, 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 nakahandang development environment! Sa pag-simula, maaari kang pumili na patakbuhin ang kurikulum sa isang Codespace (isang browser-based, hindi na kailangan ng install na environment), o lokal sa iyong computer gamit ang text editor tulad ng Visual Studio Code.

Gumawa ng iyong repositoryo

Para madali mong masave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repositoryo na ito. Maaari mong gawin 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 Repository: I-click ang "Fork" na button sa itaas-kanang 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 kopya mo ng repositoryo na ginawa mo, i-click ang button na Code at piliin ang Open with Codespaces. Lilikha ito ng bagong Codespace para sa iyong trabaho.

Pagpapatakbo ng kurikulum lokal sa iyong computer

Para mapatakbo ang kurikulum na ito lokal sa iyong computer, kakailanganin mo ng isang text editor, isang browser at isang 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 bawat isa sa mga ito upang mapili mo kung ano ang pinakamahusay para sa iyo.

Ang aming rekomendasyon ay gamitin ang Visual Studio Code bilang editor mo, na may kasamang built-in na Terminal. Maaari mong i-download ang Visual Studio Code dito.

1. I-clone ang iyong repositoryo sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa Code na 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. Magagawa mo ito sa pamamagitan ng pag-click sa File > Open Folder at pagpili ng folder na kaklone mo lang.

Inirerekomendang mga extension sa Visual Studio Code:

• Live Server - para i-preview ang mga HTML na pahina sa loob ng Visual Studio Code
• Copilot - para tulungan kang magsulat ng code nang mas mabilis

📂 Kasama sa bawat aralin:

• opsyonal na sketchnote
• opsyonal na dagdag na video
• pre-lesson warmup na pagsusulit
• nakasulat na aralin
• para sa mga araling nakabatay sa proyekto, mga hakbang-hakbang na gabay kung paano gawin ang proyekto
• pagsusuri ng kaalaman
• isang hamon
• dagdag na babasahin
• takdang-aralin
• post-lesson quiz

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

🗃️ Mga Aralin

	Pangalan ng Proyekto	Mga Konsepto na Itinuturo	Mga Layunin sa Pagkatuto	Nauugnay na Aralin	May Awtor
01	Pagsisimula	Panimula sa Programming at Mga Kagamitan sa Trabaho	Matutunan ang mga pangunahing pundasyon sa likod ng karamihan ng mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer sa kanilang trabaho	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Pagsisimula	Mga Batayan ng GitHub, kasama ang pakikipagtulungan sa grupo	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	Mga Batayan ng JS	Mga Uri ng Datos sa JavaScript	Mga batayan ng mga uri ng datos sa JavaScript	Data Types	Jasmine
05	Mga Batayan ng JS	Mga Function at Método	Matuto tungkol sa mga function at método upang pamahalaan ang daloy ng lohika ng aplikasyon	Functions and Methods	Jasmine at Christopher
06	Mga Batayan ng JS	Paggawa ng mga Desisyon gamit ang JS	Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon	Making Decisions	Jasmine
07	Mga Batayan ng JS	Mga Arrays at Loops	Gumamit ng datos gamit ang mga array at loops sa JavaScript	Arrays and Loops	Jasmine
08	Terrarium	Praktis sa HTML	Buuhin ang HTML para gumawa ng online terrarium, na nakatuon sa paggawa ng layout	Introduction to HTML	Jen
09	Terrarium	Praktis sa CSS	Buuhin ang CSS para istayl ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng responsive na pahina	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Buuhin ang JavaScript para gawing 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 events upang patakbuhin ang lohika ng iyong JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Paggamit ng mga Browser	Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at paano mag-scaffold ng mga unang elemento ng isang browser extension	About Browsers	Jen
13	Green Browser Extension	Paggawa ng form, pagtawag ng API at pag-iimbak ng mga variable sa local storage	Buuhin ang 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 para pamahalaan ang icon ng extension; matuto tungkol sa performance ng web at ilang optimizations para mapabuti	Background Tasks and Performance	Jen
15	Space Game	Mas advanced na pag-develop ng laro gamit ang JavaScript	Matuto tungkol sa Inheritance gamit parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro	Introduction to Advanced Game Development	Chris
16	Space Game	Pagdibuho sa canvas	Matutunan ang Canvas API, na ginagamit sa pagguhit ng mga elemento sa screen	Drawing to Canvas	Chris
17	Space Game	Paggalaw ng mga elemento sa 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	Collision detection	Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para mapanatili ang performance ng laro	Collision Detection	Chris
19	Space Game	Pagbantay ng score	Gawin ang mga kalkulasyon batay sa status at performance ng laro	Keeping Score	Chris
20	Space Game	Pagtatapos at muling pagsisimula ng laro	Matutunan ang pagtatapos at muling pagsisimula 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 isang Web App	Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at mga HTML template	HTML Templates and Routes	Yohan
22	Banking App	Gumawa ng Login at Registration Form	Matutunan ang paggawa ng mga form at paghawak ng mga validation routines	Forms	Yohan
23	Banking App	Mga Pamamaraan ng Pagkuha at Paggamit ng Datos	Paano dumadaloy ang mga datos papasok at palabas ng iyong app, paano ito kunin, imbakin, at itapon	Data	Yohan
24	Banking App	Mga Konsepto ng Pamamahala ng Estado	Matutunan kung paano pinapanatili ng iyong app ang estado at paano ito pamahalaan sa programmatic na paraan	State Management	Yohan
25	Browser/VScode Code	Paggamit ng VScode	Matutunan kung paano Gamitin ang isang 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 na may dalawang pangunahing prinsipyo sa pagtuturo:

• pagkatuto batay sa proyekto
• madalas na 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 sa kasalukuyan. 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, space-invader-style na laro, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pag-unawa sa web development.

🎓 Maari mong kunin ang mga 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, ginagawang mas nakaka-engganyo ang proseso para sa mga estudyante at mapapalakas ang pag-alala sa mga konsepto. Nagsulat din kami ng ilang mga panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng video mula sa koleksyon ng video tutorial na "Beginners Series to: JavaScript", na ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.

Bukod dito, ang isang mababang-peligro na pagsusulit bago ang klase ay nagtatalaga ng layunin ng estudyante patungkol sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng mas matagal na pag-alala. Dinisenyo ang kurikulum na ito 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 JavaScript frameworks upang magpokus sa mga pangunahing kasanayan na kailangan bilang isang web developer bago gumamit ng framework, isang magandang susunod na hakbang sa pagtapos 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 gabay. Tinatanggap namin ang iyong makabuluhang puna!

🧭 Offline na pag-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 sa root folder ng repo na ito, i-type ang docsify serve. Ang website ay ihahain sa port 3000 sa iyong localhost: localhost:3000.

📘 PDF

Maaaring mahanap ang PDF ng lahat ng mga aralin dito.

🎒 Iba Pang 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 naipit o may mga tanong tungkol sa paggawa ng mga AI app. Sumali sa mga kapwa mag-aaral at may karanasang mga developer sa talakayan tungkol sa MCP. Ito ay isang sumusuportang komunidad kung saan malugod ang mga tanong at malayang ibinabahagi ang kaalaman.

Kung mayroon kang puna 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.

---

Pababala:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat aming pinagsisikapan ang kawastuhan, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na bahagi. Ang orihinal na dokumento sa wikang likas nito 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 maaaring magmula sa paggamit ng pagsasaling ito.