@ -17,19 +17,19 @@ Ang Azure Cloud Advocates sa Microsoft ay nalulugod na mag-alok ng 12-linggo, 24
# Simula
> **Mga Guro**, mayroon kaming [included some suggestions](for-teachers.md) kung paano gamitin ang curriculum na ito. Gusto namin ang iyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Mga Guro**, mayroon kaming [included some suggestions](/Web-Dev-For-Beginners/for-teachers.md) kung paano gamitin ang curriculum na ito. Gusto namin ang iyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Mga mag-aaral**, para magamit ang curriculum na ito nang mag-isa, i-fork ang buong repo at kumpletuhin ang mga pagsasanay nang mag-isa, simula sa pagsusulit bago ang lecture, pagkatapos ay basahin ang lecture at kumpletuhin ang iba pang aktibidad. Subukang lumikha ng mga proyekto sa pamamagitan ng pag-unawa sa mga aralin sa halip na pagkopya ng code ng solusyon; gayunpaman, ang code na iyon ay magagamit sa mga folder ng /solutions sa bawat aralin na nakatuon sa proyekto. Ang isa pang ideya ay ang bumuo ng isang grupo ng pag-aaral kasama ang mga kaibigan at sabay-sabay na suriin ang nilalaman. Para sa karagdagang pag-aaral, inirerekomenda namin ang [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa proyekto at sa mga taong lumikha nito!
> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa proyekto at sa mga taong lumikha nito!
## Pedagogy
Pumili kami ng dalawang pedagogical tenets habang binubuo ang curriculum na ito: pagtiyak na ito ay batay sa proyekto at kasama nito ang madalas na mga pagsusulit. Sa pagtatapos ng seryeng ito, makakagawa ang mga mag-aaral ng laro sa pag-type, virtual terrarium, extension ng browser na 'berde', uri ng larong 'space invaders', at banking app na uri ng negosyo, at matututunan nila ang mga pangunahing kaalaman sa JavaScript. , HTML, at CSS kasama ang modernong toolchain ng web developer ngayon.
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay ginagawang mas nakakaengganyo para sa mga mag-aaral at ang pagpapanatili ng mga konsepto ay madaragdagan. Sumulat din kami ng ilang panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
@ -37,9 +37,9 @@ Bilang karagdagan, ang isang mababang-stakes na pagsusulit bago ang isang klase
Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript upang makapag-concentrate sa mga pangunahing kasanayang kailangan bilang isang web developer bago magpatibay ng isang balangkas, isang magandang susunod na hakbang sa pagkumpleto 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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
> Hanapin ang aming [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), at [Translation](TRANSLATIONS.md) mga alituntunin. Tinatanggap namin ang iyong nakabubuo na feedback!
> Hanapin ang aming [Code of Conduct](/Web-Dev-For-Beginners/CODE_OF_CONDUCT.md), [Contributing](/Web-Dev-For-Beginners/CONTRIBUTING.md), at [Translation](TRANSLATIONS.md) mga alituntunin. Tinatanggap namin ang iyong nakabubuo na feedback!
>
## Each lesson includes:
## Kasama sa bawat aralin ang:
- optional sketchnote
- optional supplemental video
@ -52,40 +52,40 @@ Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript
- assignment
- post-lesson quiz
> **A note about quizzes**: All quizzes are contained [in this app](https://happy-mud-02d95f10f.azurestaticapps.net/), for 48 total quizzes of three questions each. They are linked from within the lessons but the quiz app can be run locally; follow the instruction in the `quiz-app` folder. They are gradually being localized.
> **Isang tala tungkol sa mga pagsusulit**: Ang lahat ng mga pagsusulit ay nakapaloob [in this app](https://happy-mud-02d95f10f.azurestaticapps.net/), para sa 48 kabuuang pagsusulit ng tatlong tanong bawat isa. Ang mga ito ay naka-link mula sa loob ng mga aralin ngunit ang pagsusulit app ay maaaring patakbuhin nang lokal; sundin ang panuto sa `quiz-app` folder. Unti-unti silang na-localize.
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Nagsisimula | Panimula sa Programming at Tools of the Trade | Matutunan ang mga pangunahing batayan sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer na gawin ang kanilang mga trabaho | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Nagsisimula | Ang mga pangunahing kaalaman ng GitHub, kasama ang pakikipagtulungan sa isang team | Paano gamitin ang GitHub sa iyong proyekto, kung paano makipagtulungan sa iba sa isang code base | [Panimula sa GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Nagsisimula | Accessibility | Alamin ang mga pangunahing kaalaman sa web accessibility | [Mga Pangunahing Kakayahan](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Mga Uri ng Data ng JavaScript | Ang mga pangunahing kaalaman ng mga uri ng data ng JavaScript | [Uri ng data](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Mga Kakayahan at Paraan | Matuto tungkol sa mga function at pamamaraan para pamahalaan ang logic flow ng isang application | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Paggawa ng mga Desisyon sa JS | Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon | [Paggawa ng mga Desisyon](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Mga Array at Loop | Makipagtulungan sa data gamit ang mga arrays at loops in JavaScript | [Mga Array at Loop](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML sa Practice | Buuin ang HTML upang lumikha ng isang online na terrarium, na nakatuon sa pagbuo ng isang layout | [Panimula sa HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS sa Practice | Buuin ang CSS upang mai-istilo ang online na terrarium, na tumutuon sa mga pangunahing kaalaman ng CSS kabilang ang paggawa ng page na tumutugon | [Panimula sa CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | Mga Pagsasara ng JavaScript, pagmamanipula ng DOM | Buuin ang JavaScript upang gawing function ang terrarium bilang isang drag/drop interface, na tumutuon sa mga pagsasara at pagmamanipula ng DOM | [Mga Pagsasara ng JavaScript, pagmamanipula ng DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Matutunan kung paano gumamit ng mga kaganapan sa keyboard upang himukin ang lohika ng iyong JavaScript app | [Programming na Batay sa Kaganapan](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Nagtatrabaho sa Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano scaffold ang mga unang elemento ng isang extension ng browser | [Tungkol sa Mga Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Pagbuo ng form, pagtawag ng API at pag-iimbak ng mga variable sa lokal na storage | Buuin ang mga elemento ng JavaScript ng iyong extension ng browser upang tumawag sa isang API gamit ang mga variable na nakaimbak sa lokal na storage | [APIs, Forms, at Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Mga proseso sa background sa browser, pagganap ng web | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga pag-optimize na gagawin | [Mga Gawain sa Background at Pagganap](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | Higit pang Advanced na Pagbuo ng Laro gamit ang JavaScript | Alamin ang tungkol sa Inheritance gamit ang parehong Mga Klase at Komposisyon at ang pattern ng Pub/Sub, bilang paghahanda sa pagbuo ng isang laro | [Panimula sa Advanced na Pagbuo ng Laro](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Pagguhit sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang gumuhit ng mga elemento sa isang screen | [Pagguhit sa Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Paglipat ng mga elemento sa paligid ng screen | Tuklasin kung paano makakakuha ng paggalaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API | [Paglipat ng mga Elemento](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Pagtuklas ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Pagpapanatiling Kalidad | Magsagawa ng mga kalkulasyon sa matematika batay sa katayuan at pagganap ng laro | [Pagpapanatiling Kalidad](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Pagtapos at i-restart ang laro | Matuto tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable na value | [Ang Katapusang Kondisyon](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | Mga Template at Ruta ng HTML sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage na website gamit ang pagruruta at mga HTML na template | [Mga Template at Ruta ng HTML](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Bumuo ng isang Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at pagbibigay ng mga gawain sa pagpapatunay | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data sa loob at labas ng iyong app, kung paano ito kunin, iimbak, at itapon ito | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Mga Konsepto ng Pamamahala ng Estado | Alamin kung paano napapanatili ng iyong app ang estado at kung paano ito pamahalaan sa pamamagitan ng program | [Estadong Pamamahala](/7-bank-project/4-state-management/README.md) | Yohan |
## Offline access
Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit [Docsify](https://docsify.js.org/#/). i-Fork itong repo, [install Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahatid ang website sa port 3000 sa iyong localhost: `localhost:3000`.
Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit [Docsify](https://docsify.js.org/#/). i-Fork itong repo, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahatid ang website sa port 3000 sa iyong localhost: `localhost:3000`.
petemadis
4 years ago
committed by
GitHub