Web-Dev-For-Beginners/translations/tl

Web Development para sa mga Baguhan - 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 mga laro sa kalawakan. Makibahagi sa mga pagsusulit, talakayan, at praktikal na mga gawain. Pahusayin ang iyong mga kasanayan at pagbutihin ang pagtipid ng kaalaman gamit ang aming epektibong proyekto-base na pamamaraan ng pagtuturo. Simulan ang iyong paglalakbay sa coding ngayon!

Sumali sa Azure AI Foundry Discord at makipagkilala sa mga eksperto at kapwa mga developer.

Sundan ang mga hakbang na ito upang makapagsimula gamit ang mga 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 makipagkilala sa mga eksperto at kapwa mga developer

🌐 Suporta para sa Maramihang Wika

Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko 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 | Kannada | Khmer | 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 nang Lokal?

Kasama sa repositoryong ito ang mahigit 50 na pagsasalin ng wika na nagpapalaki nang malaki sa laki ng pag-download. Upang i-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"

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

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

🧑‍🎓 Estudyante ka ba?

Bisitahin ang Student Hub page kung saan makikita mo ang mga panimulang materyales, mga Student pack at maging mga paraan upang makakuha ng libreng voucher para sa sertipiko. Ito ang pahinang nais mong i-bookmark at tingnan paminsan-minsan dahil regular naming pinapalitan ang nilalaman buwan-buwan.

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

May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay isang bagong hamon na kailangan mong 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 makalikha at makapag-edit ng mga file, magpatakbo ng mga utos, at marami pa.

📣 Anunsyo - Bagong Proyekto para gawin gamit ang Generative AI

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

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

Huwag palampasin ang aming bagong Generative AI na kurikulum!

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

• Mga aralin mula sa mga pangunahing kaalaman hanggang RAG.
• Makipag-ugnayan sa mga makasaysayang tauhan gamit ang GenAI at ang aming kasamang app.
• Masaya at kapana-panabik na salaysay, para kang naglalakbay sa panahon!

Bawat aralin ay may kasamang takdang-aralin na kailangang matapos, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:

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

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

🌱 Pagsisimula

Mga Guro, may nilikha kaming ilang mungkahi kung paano gamitin ang kurikulum na ito. Malugod naming tatanggapin ang inyong puna sa aming talakayan forum!

Mga Mag-aaral, para sa bawat aralin, magsimula sa isang pre-lecture quiz at sundan ito sa pamamagitan ng pagbabasa ng mga materyales sa lektura, pagtapos ng iba't ibang gawain, at pagsuri sa iyong pagkaunawa gamit ang post-lecture quiz.

Upang mapabuti ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase at magtulungan sa mga proyekto! Hinihikayat ang mga talakayan sa aming discussion forum kung saan ang aming mga moderator ay handang sagutin ang iyong mga tanong.

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

📋 Pagsasaayos ng iyong kapaligiran

May nakaayos nang development environment ang kurikulum na ito! Sa pagsisimula mo, maaari kang pumili na patakbuhin ang kurikulum sa isang Codespace (isang browser-based, environment na hindi nangangailangan ng pag-install), o lokal sa iyong computer gamit ang isang text editor tulad ng Visual Studio Code.

Gumawa ng sariling repository

Para madali mong maisave ang iyong trabaho, inirerekomenda na gumawa ka ng sariling kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click sa Use this template na button sa itaas ng pahina. Ito ay gagawa 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 button na "Fork" sa kanang-itaas na sulok 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 ng repositoryong ginawa mo, i-click ang Code na button at piliin ang Open with Codespaces. Ito ay gagawa ng bagong Codespace para sa iyong gawain.

Pagpapatakbo ng kurikulum nang lokal sa iyong computer

Para patakbuhin ang kurikulum na ito nang lokal sa iyong computer, kailangan 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 pagpili ng mga opsyon para sa bawat isa sa mga tool na ito upang mapili mo ang pinakaangkop para sa iyo.

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

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

   git clone <your-repository-url>
   

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

Inirerekomendang mga extension para sa Visual Studio Code:

• Live Server - para makita ang preview ng mga HTML page sa loob ng Visual Studio Code
• Copilot - para matulungan kang mas mabilis magsulat ng code

📂 Kasama sa bawat leksyon:

• opsyonal na sketchnote
• opsyonal na supplemental na video
• pre-lesson warmup quiz
• nakasulat na leksyon
• para sa mga project-based na leksyon, step-by-step na gabay kung paano gumawa ng proyekto
• knowledge checks
• isang hamon
• supplemental na babasahin
• takdang-aralin
• post-lesson quiz

Isang paalala tungkol sa mga quiz: Lahat ng quiz ay nasa Quiz-app folder, 48 na kabuuang quiz na may 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 instruksyon sa quiz-app folder.

🗃️ Mga Leksiyon

	Pangalan ng Proyekto	Mga Konseptong Itinuro	Mga Layunin sa Pagkatuto	Nakalink na Leksiyon	May-akda
01	Getting Started	Panimula sa Programming at mga Kagamitan ng Gawain	Alamin ang mga pangunahing kaalaman sa likod ng karamihan sa mga programming language at software na tumutulong sa mga propesyonal na developer para sa kanilang trabaho	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	Mga Batayan ng GitHub, kasama ang pagtatrabaho kasama ang koponan	Paano gamitin ang GitHub sa iyong proyekto, paano makipag-collaborate sa iba sa isang code base	Intro to GitHub	Floor
03	Getting Started	Accessibility	Alamin ang mga batayan ng web accessibility	Accessibility Fundamentals	Christopher
04	JS Basics	Mga Uri ng Datos sa JavaScript	Mga batayan ng mga uri ng datos sa JavaScript	Data Types	Jasmine
05	JS Basics	Mga Function at Metodo	Alamin ang tungkol sa mga function at metodong ginagamit para pamahalaan ang daloy ng lohika ng aplikasyon	Functions and Methods	Jasmine at Christopher
06	JS Basics	Paggawa ng mga Desisyon gamit ang JS	Alamin kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan ng paggawa ng desisyon	Making Decisions	Jasmine
07	JS Basics	Mga Array at Loops	Gumamit ng datos gamit ang arrays at loops sa JavaScript	Arrays and Loops	Jasmine
08	Terrarium	HTML sa Praktis	Gumawa ng HTML para gumawa ng online terrarium, nakatuon sa pagbuo ng layout	Introduction to HTML	Jen
09	Terrarium	CSS sa Praktis	Gumawa ng CSS para istilohan ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng halaman na responsive	Introduction to CSS	Jen
10	Terrarium	JavaScript Closures, DOM manipulation	Gumawa ng JavaScript para gawing drag/drop interface ang terrarium, nakatuon sa closures at DOM manipulation	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	Gumawa ng Typing Game	Alamin kung paano gamitin ang keyboard events para patakbuhin ang lohika ng iyong JavaScript app	Event-Driven Programming	Christopher
12	Green Browser Extension	Paggawa gamit ang Mga Browser	Alamin kung paano gumagana ang mga browser, ang kasaysayan nito, at paano gawin ang unang mga elemento ng browser extension	About Browsers	Jen
13	Green Browser Extension	Paggawa ng form, pagtawag sa API at pag-iimbak ng variables sa local storage	Gumawa ng mga elemento ng JavaScript ng iyong browser extension para tumawag sa API gamit ang mga variable na iniimbak sa local storage	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	Mga Background Process sa browser, web performance	Gamitin ang mga background process ng browser para pamahalaan ang icon ng extension; alamin ang tungkol sa web performance at ilang optimizations para mapabuti ito	Background Tasks and Performance	Jen
15	Space Game	Mas Advanced na Pagbuo ng Laro gamit ang JavaScript	Alamin ang tungkol sa Inheritance gamit parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda para sa paggawa ng laro	Introduction to Advanced Game Development	Chris
16	Space Game	Pag-drawing sa canvas	Alamin ang tungkol sa Canvas API, ginagamit para mag-drawing ng mga elemento sa screen	Drawing to Canvas	Chris
17	Space Game	Paggalaw ng mga elemento sa screen	Tuklasin kung paano makakagawa ng galaw ang mga elemento gamit ang cartesian coordinates at Canvas API	Moving Elements Around	Chris
18	Space Game	Pagtukoy sa Collision	Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para matiyak ang performance ng laro	Collision Detection	Chris
19	Space Game	Pagtatala ng score	Magsagawa ng mga kalkulasyon batay sa status at performance ng laro	Keeping Score	Chris
20	Space Game	Pagtatapos at pag-restart ng laro	Alamin ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga assets at pag-reset ng mga value ng variable	The Ending Condition	Chris
21	Banking App	HTML Templates at Ruta sa isang Web App	Alamin kung paano bumuo ng scaffolding ng arkitektura ng multipage na website gamit ang routing at HTML templates	HTML Templates and Routes	Yohan
22	Banking App	Gumawa ng Login at Registration Form	Alamin ang tungkol sa 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 papasok at palabas ng iyong app, paano ito kunin, iimbak, at itapon	Data	Yohan
24	Banking App	Mga Konsepto ng State Management	Alamin kung paano pinananatili ng iyong app ang estado at paano ito pamahalaan programmatically	State Management	Yohan
25	Browser/VScode Code	Paggamit ng VScode	Alamin kung paano gumamit ng code editor	Use VScode Code Editor	Chris
26	AI Assistants	Paggamit ng AI	Alamin kung paano gumawa ng sarili mong AI assistant	AI Assistant project	Chris

🏫 Pedagohiya

Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyong pedagogical:

• pagkatuto batay sa proyekto
• madalas na quizzes

Itinuturo ng programa ang mga pangunahing kaalaman ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at tekniko na ginagamit ng mga web developer ngayon. Magkakaroon ang mga estudyante ng pagkakataong magkaroon ng hands-on na karanasan sa pamamagitan ng paggawa ng 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 pagbuo ng web.

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

Sa pamamagitan ng pagsiguro na ang nilalaman ay tumutugma sa mga proyekto, ang proseso ay ginagawa mas kawili-wili para sa mga estudyante at ang retention ng mga konsepto ay mapapalakas. Sumulat din kami ng ilang panimulang leksyon sa mga batayan ng JavaScript para ipakilala ang mga konsepto, kasabay ng isang video mula sa koleksyon ng video tutorial na "Beginners Series to: JavaScript", kung saan ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.

Bukod pa rito, ang isang mababang-stakes na quiz bago ang klase ay nagtatakda ng layunin ng estudyante patungo sa pag-aaral ng isang paksa, habang ang pangalawang quiz pagkatapos ng klase ay tinitiyak ang karagdagang retention. Ang kurikulum na ito ay dinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalaki ang kumplikasyon sa pagtatapos ng 12-linggong yugto.

Habang sinasadyang iniiwasan naming ipakilala ang mga framework ng JavaScript upang magpokus sa mga pangunahing kasanayan na kailangan bilang isang web developer bago gamitin ang isang 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 alituntunin. Malugod naming tinatanggap ang iyong konstruktibong feedback!

🧭 Offline 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 ipapakita sa port 3000 sa iyong localhost: localhost:3000.

📘 PDF

Ang isang PDF ng lahat ng mga aralin ay makikita 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 na-stuck o may mga katanungan tungkol sa paggawa ng AI apps. Sumali sa mga kapwa nag-aaral at mga bihasang developer sa mga talakayan tungkol sa MCP. Ito ay isang suportadong komunidad kung saan malugod ang mga tanong at malayang ibinabahagi ang kaalaman.

Kung mayroon kang feedback sa produkto o mga error habang bumubuo pumunta sa:

Lisensya

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

---

Pagtatanging Pahayag:
Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin Co-op Translator. Bagaman aming pinagsisikapan ang katumpakan, mangyaring tandaan na ang mga automated na pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. 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.