You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
19 KiB
102 lines
19 KiB
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
|
[](http://makeapullrequest.com)
|
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
# Web Development para sa mga Nagsisimula - Kurikulum
|
|
|
|
Ang Azure Cloud Advocates sa Microsoft ay nalulugod na mag-alok ng 12-linggo, 24-aralin na curriculum tungkol sa JavaScript, CSS, at HTML basics. Kasama sa bawat aralin ang mga pagsusulit bago at pagkatapos ng aralin, nakasulat na mga tagubilin upang makumpleto ang aralin, isang solusyon, isang takdang-aralin at higit pa. Ang aming project-based na pedagogy ay nagbibigay-daan sa iyo na matuto habang nagtatayo, isang napatunayang paraan para sa mga bagong kasanayan.
|
|
|
|
**Taos pusong pasasalamat sa aming mga may-akda Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, at sketchnote artist Tomomi Imura!**
|
|
|
|
# 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 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-77807-sagibbon) and by watching the videos mentioned below.
|
|
|
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
|
|
|
> 🎥 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-77807-sagibbon) 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-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
|
|
|
|
Bilang karagdagan, ang isang mababang-stakes na pagsusulit bago ang isang klase ay nagtatakda ng intensyon ng mag-aaral sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagpapanatili. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12 linggong ikot.
|
|
|
|
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-77807-sagibbon)".
|
|
|
|
> 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!
|
|
>
|
|
## Kasama sa bawat aralin ang:
|
|
|
|
- optional sketchnote
|
|
- optional supplemental video
|
|
- pre-lesson warmup quiz
|
|
- written lesson
|
|
- for project-based lessons, step-by-step guides on how to build the project
|
|
- knowledge checks
|
|
- a challenge
|
|
- supplemental reading
|
|
- assignment
|
|
- post-lesson quiz
|
|
|
|
> **Isang tala tungkol sa mga pagsusulit**: Ang lahat ng mga pagsusulit ay nakapaloob [in this app](https://ashy-river-0debb7803.1.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.
|
|
|
|
## Mga aralin
|
|
|
|
| | Pangalan ng proyekto | Mga Konseptong Itinuro | Mga Layunin sa pag-aaral | Nakaugnay na Aralin | May-akda |
|
|
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
|
| 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 | [Panimula sa Programming Languages at 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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/README.md) | 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, [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`.
|
|
|
|
## PDF
|
|
|
|
Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
|
|
|
## Iba pang Kurikulum
|
|
|
|
Ang aming team ay gumagawa ng iba pang kurikulum! Tignan:
|
|
|
|
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|